From bbe2b374a9feaf7c9c01af2c50e2bc99aa10f00a Mon Sep 17 00:00:00 2001 From: John OReilly Date: Wed, 11 Mar 2026 17:46:45 -0400 Subject: [PATCH] My very First own bigboy config --- SVS-MSP-Calculator-light.css | 8 +- SVS-MSP-Calculator.css | 309 +++++++++++++++++++++++++++++------ SVS-MSP-Calculator.html | 55 ++++--- SVS-MSP-Calculator.js | 274 ++++++++++++++++++------------- package-prices.csv | 31 ++++ 5 files changed, 484 insertions(+), 193 deletions(-) create mode 100644 package-prices.csv diff --git a/SVS-MSP-Calculator-light.css b/SVS-MSP-Calculator-light.css index ca56c87..0ac6272 100644 --- a/SVS-MSP-Calculator-light.css +++ b/SVS-MSP-Calculator-light.css @@ -10,7 +10,6 @@ --ink: #1a1816; /* near-black for body text */ --paper: #f4f2ed; /* warm off-white page background */ --accent: #1a6a98; /* slightly darker blue for contrast */ - --accent2: #a03050; --muted: #6b6360; /* mid-grey for secondary text */ --border: #ccc9c3; /* light grey borders */ --card: #ebe8e2; /* off-white card background */ @@ -98,9 +97,10 @@ body { background: rgba(0, 0, 0, 0.11) !important; } -/* ── VS COMPARISON ROWS ──────────────────────────────────────────── */ -.vs-save-green { background: #e8f5ee !important; } -.vs-save-amber { background: #fff8e1 !important; } +/* ── VS COMPARISON ───────────────────────────────────────────────── */ +.vs-comparison-wrap { background: rgba(0, 0, 0, 0.025) !important; } +.vs-save-green td { background: rgba(39, 174, 96, 0.10) !important; } +.vs-save-amber td { background: rgba(210, 120, 30, 0.09) !important; } /* ── SUMMARY BADGE ───────────────────────────────────────────────── */ .sec-summary-badge { diff --git a/SVS-MSP-Calculator.css b/SVS-MSP-Calculator.css index 6d66a1a..73b9b33 100644 --- a/SVS-MSP-Calculator.css +++ b/SVS-MSP-Calculator.css @@ -21,13 +21,11 @@ } /* ── DESIGN TOKENS ───────────────────────────────────────────── Single source of truth for all colours. Edit here, not inline. - --accent2 (#c4526a) is defined but currently unused in UI. ─────────────────────────────────────────────────────────────── */ :root { --ink: #ddd8d0; --paper: #22201d; --accent: #2d7aa8; - --accent2: #c4526a; --muted: #a09890; --border: #3a3630; --card: #2a2722; @@ -74,10 +72,11 @@ color: #555; text-align: right; line-height: 1.6; + margin-left: auto; } /* ── THEME TOGGLE BUTTON ──────────────────────────────────────── - Positioned between logo and quote ref in .top-bar-inner. + Sits to the right of the quote ref/date in .top-bar-inner. Slightly darker chip vs the cream top-bar bg so it reads as a distinct control, not noise. Works on both theme top-bars. ─────────────────────────────────────────────────────────────── */ @@ -94,8 +93,7 @@ color: #3a3632; transition: background 0.15s; flex-shrink: 0; - margin-left: auto; - margin-right: 16px; + margin-left: 14px; } .theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.17); } .theme-toggle-btn:active { background: rgba(0, 0, 0, 0.23); } @@ -119,7 +117,7 @@ align-items: start; } .main-col { display: flex; flex-direction: column; gap: 28px; } - .side-col { position: sticky; top: 72px; z-index: 10; align-self: start; } + .side-col { position: sticky; top: 35px; z-index: 10; align-self: start; } /* ── CLIENT BAR ───────────────────────────────────────────────── Lives inside .main-col, above section I. @@ -178,6 +176,7 @@ gap: 12px; margin-bottom: 32px; } + .section:not(.sec-open) .section-header { margin-bottom: 0; } .section-num { font-family: 'Cinzel', serif; font-weight: 700; @@ -261,6 +260,42 @@ margin-top: 2px; } + /* ── COLLAPSED SECTION COUNTER (sec-02/03/04 when collapsed) ─── + Sits inside .section-title-block below .section-badge. + Two square .sec-count-btn buttons with a small gap between them. + Visible only when the section is collapsed (not .sec-open). + Buttons call stepCount() which stops propagation. + ─────────────────────────────────────────────────────────────── */ + .sec-collapsed-counter { + display: none; + align-items: center; + gap: 6px; + margin-top: 12px; + } + .section:not(.sec-open) .sec-collapsed-counter { + display: flex; + } + .sec-count-btn { + width: 44px; + height: 44px; + background: var(--card); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--muted); + font-size: 22px; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + flex-shrink: 0; + user-select: none; + transition: background 0.12s, color 0.12s, border-color 0.12s; + } + .sec-count-btn:hover { background: var(--border); color: var(--ink); } + .sec-count-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); } + /* ── PILL TOGGLE (Section II — M365 vs BYOL) ─────────────────── CSS-only toggle using hidden radio inputs + adjacent label styling. input:checked + label gets accent background. @@ -500,7 +535,6 @@ transition: background 0.12s, border-color 0.12s; } .addon-row:hover { background: var(--card); } - .addon-row.selected { background: #1a2a38; border-color: #2a5070; } .addon-row input[type=checkbox] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } .addon-name { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; } .addon-price { @@ -681,7 +715,6 @@ line-height: 1; margin-bottom: 16px; } - .sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; } .sidebar-note { font-size: 13px; color: var(--muted); @@ -697,19 +730,27 @@ costs MORE than the comparison (rare at low seat counts). updateVsComparison(q) renders this section in update(). ─────────────────────────────────────────────────────────────── */ - .vs-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; } - .vs-table td { padding: 7px 4px; } - .vs-table td:last-child { text-align: right; font-family: 'DM Mono', monospace; } + .vs-table { width: 100%; border-collapse: collapse; font-size: 13px; } + .vs-table td { padding: 8px 6px; vertical-align: middle; } + .vs-table td:last-child { text-align: right; font-family: 'DM Mono', monospace; white-space: nowrap; } + .vs-table tr:first-child td { padding-bottom: 14px; border-bottom: 1px solid var(--border); } + .vs-table tr:nth-child(2) td, + .vs-table tr:nth-child(4) td { padding-top: 14px; } + .vs-save-row td { padding: 9px 12px; font-size: 12px; font-family: 'DM Mono', monospace; letter-spacing: 0.05em; } + .vs-save-row td:first-child { border-radius: 6px 0 0 6px; } + .vs-save-row td:last-child { border-radius: 0 6px 6px 0; } .vs-label { font-family: 'DM Mono', monospace; - font-size: 12px; - letter-spacing: 0.09em; + font-size: 10px; + letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); - margin-top: 18px; - margin-bottom: 6px; + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 8px; } - .vs-save-row td { border-radius: 3px; padding: 5px 6px; font-size: 13px; } + .vs-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── INSIGHT NUDGE BANNER ─────────────────────────────────────── Contextual sales insight shown at bottom of sidebar. @@ -730,6 +771,8 @@ font-size: 15px; line-height: 1.7; border-top: 1px solid var(--border); + min-height: 130px; + box-sizing: border-box; } .nudge-banner.amber { background: #1f1500; @@ -778,18 +821,52 @@ Right: HST checkbox + one-time fee input. padding-left:96px aligns with section card edges. ─────────────────────────────────────────────────────────────── */ + + /* ── SECTIONS TOOLBAR (Collapse All / Expand All) ───────────────── */ + .sections-toolbar { + display: flex; + justify-content: flex-end; + margin-left: 96px; + margin-bottom: 10px; + } + .btn-toggle-all { + font-family: 'DM Mono', monospace; + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted); + background: none; + border: 1px solid var(--border); + border-radius: 6px; + padding: 5px 14px; + cursor: pointer; + transition: color 0.15s, border-color 0.15s, background 0.15s; + } + .btn-toggle-all:hover { + color: var(--ink); + border-color: var(--accent); + background: rgba(45, 122, 168, 0.07); + } + .quote-settings-bar { margin-left: 96px; - padding: 20px 28px 24px 28px; + padding: 18px 24px 20px 24px; display: flex; - align-items: flex-start; - gap: 32px; - flex-wrap: wrap; + align-items: stretch; + gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; + overflow: hidden; + } + .qs-group { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; + min-width: 260px; + padding: 0 24px 0 0; } - .qs-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 260px; } .qs-label { font-family: 'DM Mono', monospace; font-size: 11px; @@ -801,12 +878,65 @@ .qs-term-wrap .tier-seg { padding: 10px 8px; } .qs-term-wrap .tier-name { font-size: 12px; } .qs-term-wrap .tier-price { display: none; } + + /* Best Value badge on 24-month */ + .qs-best-badge { + display: inline-block; + font-family: 'DM Mono', monospace; + font-size: 9px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--green); + background: rgba(33, 112, 69, 0.13); + border: 1px solid rgba(33, 112, 69, 0.3); + border-radius: 3px; + padding: 1px 5px; + vertical-align: middle; + margin-left: 5px; + line-height: 1.5; + } + .tier-seg.active .qs-best-badge { + color: rgba(255,255,255,0.9); + background: rgba(255,255,255,0.18); + border-color: rgba(255,255,255,0.35); + } + + /* Discount sub-text — green when not active */ + .qs-discount-sub { color: var(--green) !important; } + .tier-seg.active .qs-discount-sub { color: rgba(255,255,255,0.8) !important; } + + /* Dynamic savings row — appears below selector when discounted term active */ + .qs-savings-row { + display: flex; + align-items: center; + gap: 6px; + font-family: 'DM Mono', monospace; + font-size: 11px; + letter-spacing: 0.05em; + color: var(--green); + margin-top: 2px; + } + .qs-savings-row.hidden { display: none; } + #qsSavingsAmt { font-weight: 700; } + + /* Vertical divider between contract term and onboarding fee */ + .qs-divider { + width: 1px; + background: var(--border); + margin: -18px 0 -20px; + flex-shrink: 0; + } + .qs-right { display: flex; flex-direction: column; gap: 12px; - padding-top: 19px; + padding: 0 0 0 24px; + justify-content: center; } + + /* ── Custom toggle switch (replaces native checkbox for Waive) ── */ .qs-toggle-row { display: flex; align-items: center; @@ -814,7 +944,33 @@ cursor: pointer; user-select: none; } - .qs-toggle-row input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } + .qs-toggle-row input[type=checkbox] { display: none; } + .qs-switch { + width: 34px; + height: 20px; + background: var(--border); + border-radius: 10px; + position: relative; + transition: background 0.2s; + flex-shrink: 0; + } + .qs-switch::after { + content: ''; + position: absolute; + width: 14px; + height: 14px; + background: #fff; + border-radius: 50%; + top: 3px; + left: 3px; + transition: left 0.2s, background 0.2s; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + } + .qs-toggle-row input:checked ~ .qs-switch { background: var(--accent); } + .qs-toggle-row input:checked ~ .qs-switch::after { left: 17px; } + .qs-fee-waive:has(input:disabled) { opacity: 0.5; cursor: default; } + .qs-fee-input:disabled { opacity: 0.4; cursor: not-allowed; } + .qs-toggle-label { font-family: 'DM Mono', monospace; font-size: 13px; @@ -832,8 +988,6 @@ gap: 10px; } .qs-fee-waive { margin-left: 4px; } - .qs-fee-waive:has(input:disabled) { opacity: 0.5; cursor: default; } - .qs-fee-input:disabled { opacity: 0.4; cursor: not-allowed; } .qs-fee-label { font-family: 'DM Mono', monospace; font-size: 13px; @@ -863,8 +1017,8 @@ color: var(--ink); font-family: 'DM Mono', monospace; font-size: 14px; - width: 90px; - text-align: right; + width: 120px; + text-align: center; padding: 6px 10px; outline: none; } @@ -892,19 +1046,36 @@ .sidebar-note-mono { font-size: 12px; padding: 2px 0 6px; font-family: 'DM Mono', monospace; } /* VS Comparison block */ - .vs-comparison-wrap { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; } - .vs-inline-icon { margin-right: 5px; vertical-align: middle; } - .vs-svs-label { font-size: 15px; color: var(--ink); font-weight: 600; } - .vs-val-accent { color: var(--accent); font-weight: 600; } - .vs-td-muted { color: var(--muted); } - .vs-td-icon { margin-right: 5px; opacity: 0.6; vertical-align: middle; } - .vs-footnote { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; text-align: center; } + .vs-comparison-wrap { + margin-top: 16px; + margin-bottom: 15px; + padding: 24px 24px 22px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + border-radius: 10px; + } + .vs-inline-icon { margin-right: 6px; vertical-align: middle; } + .vs-svs-label { font-size: 14px; color: var(--ink); font-weight: 600; } + .vs-val-accent { color: var(--accent); font-weight: 600; font-size: 14px; } + .vs-td-muted { color: var(--muted); font-size: 12px; } + .vs-td-icon { margin-right: 5px; opacity: 0.55; vertical-align: middle; } + .vs-footnote { + font-size: 11px; + color: var(--muted); + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--border); + line-height: 1.55; + font-style: italic; + } /* Side note icons and savings highlight */ .note-icon { margin-right: 6px; vertical-align: middle; flex-shrink: 0; } .savings-amount { color: var(--green); } - .sl-otf-waived > span:first-child { color: var(--green); } + .sl-otf-waived > span:first-child { color: var(--green); text-decoration: line-through; text-decoration-color: var(--green); } .sl-otf-waived .val { color: var(--green); font-size: 12px; letter-spacing: 0.04em; } + .sl-otf-waived .otf-amt { text-decoration: line-through; text-decoration-color: var(--green); } + .sl-otf-waived .otf-waived-label { text-decoration: none; font-weight: 600; letter-spacing: 0.06em; } /* Nudge banner internal flex rows */ .nudge-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } @@ -939,10 +1110,10 @@ .vs-val-green — green text for savings value/label .vs-val-amber — amber text for "costs more" value/label ─────────────────────────────────────────────────────────────── */ - .vs-save-green { background: #1a2e20; } - .vs-save-amber { background: #2e1e0a; } - .vs-val-green { color: var(--green) !important; } - .vs-val-amber { color: var(--amber) !important; } + .vs-save-green td { background: rgba(39, 174, 96, 0.13); } + .vs-save-amber td { background: rgba(210, 120, 30, 0.13); } + .vs-val-green { color: var(--green) !important; } + .vs-val-amber { color: var(--amber) !important; } /* ── SECTION CARD HOVER / OPEN POLISH ─────────────────────────── Subtle left accent glow on hover; stronger treatment when open. @@ -1147,7 +1318,10 @@ .section { margin-left: 64px; } .section-num { left: -64px; width: 56px; font-size: 52px; } .client-bar { padding: 24px 0 24px 64px; } - .quote-settings-bar { margin-left: 64px; padding: 18px 22px 20px 22px; gap: 20px; } + .quote-settings-bar { margin-left: 64px; padding: 18px 22px 20px 22px; gap: 0; } + .qs-group { padding-right: 20px; } + .qs-right { padding-left: 20px; } + .sections-toolbar { margin-left: 64px; } .top-bar-logo { margin-left: 38px; } .pitch-inner { margin-left: 0; } @@ -1155,6 +1329,24 @@ .pitch-item:nth-child(2) { border-right: none; } .pitch-item:nth-child(3) { border-top: 1px solid var(--border); } .pitch-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; } + + /* Addon rows — price above title so text has full width */ + .addon-row { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + column-gap: 10px; + row-gap: 6px; + padding: 12px 14px; + align-items: start; + } + .addon-row input[type=checkbox] { grid-column: 1; grid-row: 2; } + .addon-row > div { grid-column: 2; grid-row: 2; } + .addon-price { + grid-column: 1 / -1; + grid-row: 1; + margin-left: 0; + } } /* ── SMALL TABLET / LANDSCAPE PHONE (≤ 900px) ── */ @@ -1166,7 +1358,10 @@ .section-num { left: -52px; width: 44px; font-size: 42px; top: 24px; } .top-bar-logo { margin-left: 26px; } .client-bar { padding: 20px 0 20px 52px; } - .quote-settings-bar { margin-left: 52px; padding: 16px 18px 16px 18px; gap: 16px; } + .quote-settings-bar { margin-left: 52px; padding: 16px 18px; gap: 0; } + .qs-group { padding-right: 16px; } + .qs-right { padding-left: 16px; } + .sections-toolbar { margin-left: 52px; } .pitch-wrap { padding: 0; } .pitch-inner { margin-left: 0; } @@ -1177,8 +1372,8 @@ margin-bottom: 24px; } .section-title-block { order: 2; flex: 0 0 100%; } - .sec-summary-badge { order: 1; margin-left: auto; } - .sec-chevron { order: 1; } + .sec-summary-badge { order: 1; } + .sec-chevron { order: 1; margin-left: auto; } .section-title { font-size: 20px; } .main-col { gap: 20px; } @@ -1271,9 +1466,12 @@ .client-bar { padding: 20px 0 20px 0; } .client-input { font-size: 22px; max-width: 100%; } - .quote-settings-bar { margin-left: 0; padding: 14px 16px 16px 16px; flex-direction: column; gap: 12px; } - .qs-group { min-width: 0; } - .qs-right { padding-top: 0; } + .quote-settings-bar { margin-left: 0; padding: 14px 16px 16px; flex-direction: column; gap: 0; } + .sections-toolbar { margin-left: 0; } + .qs-group { min-width: 0; padding-right: 0; } + /* Convert vertical divider to horizontal rule */ + .qs-divider { width: auto; height: 1px; margin: 14px 0; } + .qs-right { padding-left: 0; } .main-col { gap: 16px; } .main-col > .section:first-of-type { margin-top: 8px; } @@ -1300,10 +1498,11 @@ .num-input { width: 100%; font-size: 20px; padding: 12px; flex: 1; } .step-btn { width: 48px; font-size: 22px; } - /* Addon rows — tighter */ - .addon-row { padding: 12px 10px; gap: 10px; } - .addon-name { font-size: 14px; } - .addon-desc { font-size: 12px; } + /* Addon rows — tighter font on phones (grid inherited from ≤1100px) */ + .addon-row { padding: 12px 10px; } + .addon-price { font-size: 13px; } + .addon-name { font-size: 14px; } + .addon-desc { font-size: 12px; } /* Collapsible */ .collapsible-body { padding: 12px 0 16px 16px; } @@ -1393,7 +1592,7 @@ align-items: center; gap: 10px; position: fixed; - top: 62px; + top: 82px; right: 14px; z-index: 200; background: var(--accent); @@ -1579,7 +1778,7 @@ .nudge-banner, .pitch-wrap, .quote-settings-bar, - .section-header .section-toggle { pointer-events: none; } + .section-header.section-toggle { pointer-events: none; } .mobile-quote-pill { display: none !important; } .mobile-quote-panel { display: none !important; } @@ -1590,7 +1789,8 @@ .step-btn { display: none !important; } .collapsible-header { display: none !important; } .sec-chevron { display: none !important; } - .sec-summary-badge { display: none !important; } + .sec-summary-badge { display: none !important; } + .sec-collapsed-counter { display: none !important; } .quote-settings-bar { display: none !important; } .section-badge { display: none !important; } #savingsPrompt { display: none !important; } @@ -1646,7 +1846,8 @@ .sidebar-line .val { color: #1a1a1a !important; } /* ── VS comparison: clean for print ── */ - .vs-save-green { background: #e8f5e9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } + .vs-save-green td { background: #e8f5e9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } + .vs-save-amber td { background: #fff3e0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .vs-save-amber { background: #fff8e1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── Feature cards: minimal ── */ diff --git a/SVS-MSP-Calculator.html b/SVS-MSP-Calculator.html index e216aba..76d0b53 100644 --- a/SVS-MSP-Calculator.html +++ b/SVS-MSP-Calculator.html @@ -61,6 +61,8 @@
+ + -
@@ -131,15 +132,10 @@ $1,800
- -
- - - @@ -246,21 +242,27 @@ + +
@@ -272,6 +274,10 @@
+
+ +
+
+ + -
@@ -832,15 +851,9 @@ $1,800 - - -
- - -