From ac9420c8128da0585a0e2d68b52583e14a28ff02 Mon Sep 17 00:00:00 2001 From: John OReilly Date: Fri, 13 Mar 2026 10:24:58 -0400 Subject: [PATCH] Before Theme Change --- SVS-MSP-Calculator-light.css | 33 ++++ SVS-MSP-Calculator.css | 65 +++++--- SVS-MSP-Calculator.html | 219 +++++++++++-------------- SVS-MSP-Calculator.js | 307 +++++++++++++++++++++++++++-------- 4 files changed, 411 insertions(+), 213 deletions(-) diff --git a/SVS-MSP-Calculator-light.css b/SVS-MSP-Calculator-light.css index 019a8d7..81e8fde 100644 --- a/SVS-MSP-Calculator-light.css +++ b/SVS-MSP-Calculator-light.css @@ -69,6 +69,33 @@ body { color: #7a1520 !important; } +/* ── NUMBER STEPPER CONTROLS ─────────────────────────────────────── */ +/* Dark mode steppers blend in naturally. Light mode needs explicit lift: + white surfaces stand off the warm card bg; accent symbols tie to brand. */ +.step-btn { + background: #ffffff !important; + border-color: #b8b4ae !important; /* stronger than --border #d0cdc7 for crispness */ + color: var(--accent) !important; /* accent blue +/- symbols instead of muted grey */ +} +.step-btn:hover { + background: #f0ede7 !important; /* warm tint matches section card on hover */ + border-color: var(--accent) !important; + color: var(--accent) !important; +} +.step-btn:active { + background: var(--accent) !important; + border-color: var(--accent) !important; + color: #fff !important; +} +.num-input { + background: #ffffff !important; + border-color: #b8b4ae !important; +} +.num-input:focus { + border-color: var(--accent) !important; + box-shadow: 0 0 0 2px rgba(26, 106, 152, 0.15) !important; +} + /* ── ADDON ROW SELECTED ──────────────────────────────────────────── */ .addon-row.selected { background: #dff0fb !important; @@ -132,6 +159,12 @@ body { background: #eaf5ef !important; border-color: #a8d5b8 !important; } +/* Amber warning state — JS toggles .savings-amber class */ +.savings-result.savings-amber { + background: #fff4e0 !important; + border-color: #e8c57a !important; + color: var(--amber) !important; +} /* ── PITCH FOOTER (green strip) ──────────────────────────────────── */ .pitch-footer { diff --git a/SVS-MSP-Calculator.css b/SVS-MSP-Calculator.css index 020b1a5..5d1d712 100644 --- a/SVS-MSP-Calculator.css +++ b/SVS-MSP-Calculator.css @@ -69,7 +69,7 @@ font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.07em; - color: #555; + color: var(--muted); text-align: right; line-height: 1.6; margin-left: auto; @@ -111,13 +111,13 @@ display: grid; grid-template-columns: 3fr 2fr; gap: 52px; - padding: 52px clamp(20px,2vw,40px) 52px; + padding: 50px clamp(20px,2vw,40px) 52px; max-width: 1600px; margin: 0 auto; align-items: start; } .main-col { display: flex; flex-direction: column; gap: 28px; } - .side-col { position: sticky; top: 35px; z-index: 10; align-self: start; } + .side-col { position: sticky; top: 102px; z-index: 10; align-self: start; } /* ── CLIENT BAR ───────────────────────────────────────────────── Lives inside .main-col, above section I. @@ -166,7 +166,7 @@ margin-left: 96px; border-radius: 12px; border: 1px solid var(--border); - background: #272420; /* elevated above paper #22201d — was #1e1c18 (sunken) */ + background: var(--card); /* elevated above paper — was #272420 hardcoded */ padding: 32px 36px 36px; } .main-col > .section:first-of-type { margin-top: 24px; } @@ -267,14 +267,11 @@ Buttons call stepCount() which stops propagation. ─────────────────────────────────────────────────────────────── */ .sec-collapsed-counter { - display: none; + display: flex; align-items: center; gap: 6px; margin-top: 12px; } - .section:not(.sec-open) .sec-collapsed-counter { - display: flex; - } .sec-count-btn { width: 44px; height: 44px; @@ -321,6 +318,10 @@ gap: 6px; } .pill-toggle label:last-child { border-right: none; } + .pill-toggle input:focus-visible + label { + outline: 2px solid var(--accent); + outline-offset: -2px; + } .pill-toggle input:checked + label { background: var(--accent); color: #fff; @@ -350,6 +351,10 @@ margin-bottom: 20px; } .tier-seg-wrap input[type=radio] { display: none; } + .tier-seg-wrap input[type=radio]:focus-visible + .tier-seg { + outline: 2px solid var(--accent); + outline-offset: -2px; + } .tier-seg { padding: 16px 10px; cursor: pointer; @@ -424,6 +429,12 @@ border-radius: 2px; padding: 3px 8px; white-space: nowrap; + transition: color 0.15s, border-color 0.15s, background 0.15s; + } + .addon-preview-pill.active { + color: var(--green); + border-color: var(--green); + background: rgba(33,112,69,0.10); } .collapsible-body { padding: 16px 0 20px 28px; @@ -459,6 +470,8 @@ color: var(--green); font-size: 11px; } + .byol-mode .m365-feature { text-decoration: line-through; opacity: 0.55; } + .byol-mode .m365-feature::before { color: var(--amber); } /* ── NUMBER INPUTS ────────────────────────────────────────────── .input-row — flex row: label left, .num-input right @@ -660,7 +673,6 @@ border: 1px solid var(--border); border-radius: 12px; overflow: hidden; - margin-top: 100px; } .sidebar-header { padding: 20px 24px; @@ -681,7 +693,7 @@ color: #fff; line-height: 1.25; } - .sidebar-client.placeholder { color: rgba(255,255,255,0.35); font-weight: 400; font-style: italic; } + .sidebar-client.placeholder { color: rgba(255,255,255,0.65); font-weight: 400; font-style: italic; } .sidebar-body { padding: 24px; } .sidebar-line { display: flex; @@ -763,14 +775,13 @@ .nudge-nav-btn — SVG chevron pills (‹ ›), hidden when only 1 nudge. BOTH #nudgeBanner and #nudgeBanner_m are updated by renderNudge() via applyNudge('') and applyNudge('_m'). - nudgeBanner MUST stay inside .sidebar-body div. + nudgeBanner sits between .sidebar-header and .sidebar-body. ─────────────────────────────────────────────────────────────── */ .nudge-banner { - margin: 0; + margin: 0 0 16px 0; padding: 18px 24px; font-size: 15px; line-height: 1.7; - border-top: 1px solid var(--border); min-height: 130px; box-sizing: border-box; } @@ -945,6 +956,10 @@ user-select: none; } .qs-toggle-row input[type=checkbox] { display: none; } + .qs-toggle-row input[type=checkbox]:focus-visible + .qs-switch { + outline: 2px solid var(--accent); + outline-offset: 2px; + } .qs-switch { width: 34px; height: 20px; @@ -1032,7 +1047,7 @@ ─────────────────────────────────────────────────────────────── */ /* Section I — admin fee display row */ - .admin-fee-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } + /* .admin-fee-header base styles merged into the waived section definition at line ~1079 */ .admin-fee-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; } .admin-fee-val { font-family: 'DM Mono', monospace; font-size: 22px; color: var(--accent); } .admin-fee-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; } @@ -1078,7 +1093,7 @@ .sl-otf-waived .otf-waived-label { text-decoration: none; font-weight: 600; letter-spacing: 0.06em; } /* ── ADMIN FEE WAIVED display */ - .admin-fee-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } + .admin-fee-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .admin-fee-waive-toggle { margin-left: auto; } .admin-fee-strike { text-decoration: line-through; color: var(--muted); text-decoration-color: var(--muted); } .admin-fee-waived-badge { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--green); background: rgba(33,112,69,0.12); border: 1px solid rgba(33,112,69,0.28); border-radius: 4px; padding: 2px 7px; vertical-align: middle; } @@ -1233,6 +1248,12 @@ color: var(--green); line-height: 1.65; } + /* Amber modifier — toggled by JS (classList.add/remove) when VoIP quote > current bill */ + .savings-result.savings-amber { + background: #2e1f08; + border-color: #5a3a10; + color: var(--amber); + } /* ── BOTTOM PITCH BANNER ──────────────────────────────────────── 4-column grid (2-col on tablet/mobile) outside the .outer grid. @@ -1697,9 +1718,9 @@ bottom: 0; left: 0; right: 0; - max-height: 92vh; + max-height: 100vh; background: var(--card); - border-radius: 20px 20px 0 0; + border-radius: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; @@ -1764,12 +1785,16 @@ box-shadow: none !important; overflow: visible !important; } - /* Sidebar-header inside panel — hide it, panel has its own header row */ + /* Keep Live Quote header visible in responsive panel so + Insight can sit directly below it (matching desktop order). */ .mobile-panel-sheet .sidebar-header { - display: none !important; + display: block !important; } .mobile-panel-sheet .sidebar-body { - padding-top: 4px !important; + padding-top: 0 !important; + } + .mobile-panel-sheet .nudge-banner { + margin-bottom: 35px; } } diff --git a/SVS-MSP-Calculator.html b/SVS-MSP-Calculator.html index 985f9eb..774093f 100644 --- a/SVS-MSP-Calculator.html +++ b/SVS-MSP-Calculator.html @@ -59,6 +59,17 @@
SVS MSP — Live Quote
+ +
@@ -67,12 +78,12 @@ Users —
- + - + -
- - -
+
- + What's Covered by the Admin Fee
-
+
Tenant & Identity Management
Microsoft 365 / Entra ID tenant administration, user lifecycle, MFA enforcement, and conditional access policies.
Network & Infrastructure Oversight
Firewall configuration reviews, DNS management, VLAN segmentation oversight, and network performance monitoring.
@@ -380,9 +383,12 @@
User Package
Per-user monthly services — identity, email, security & helpdesk
Per User / Month -
- - +
+
+ + + +
@@ -414,14 +420,14 @@
- + What's Included in This Package
-
+
    -
  • Microsoft 365 Business Premium (M365 tier) — Word, Excel, PowerPoint, Teams, Exchange
    • -
  • Entra ID & MFA — identity protection, conditional access, and SSO
    • -
  • Microsoft Defender for Business — endpoint + email threat protection
    • +
  • Microsoft 365 Business Premium (M365 tier) — Word, Excel, PowerPoint, Teams, Exchange
    • +
  • Entra ID & MFA — identity protection, conditional access, and SSO
    • +
  • Microsoft Defender for Business — endpoint + email threat protection
  • Helpdesk support (business hours) — tickets, remote sessions, escalations
  • Onboarding & offboarding — provisioning, access revocation, equipment checklists
  • Security awareness training (SAT) — phishing simulations & training modules
    • @@ -429,29 +435,19 @@
-
-
-
Number of Users
-
-
- - - -
-
- + Per-User Add-Ons -
- Extended Hours - 1Password - INKY Pro - Zero Trust +
-
+