From bce93507cb4a048a8eb14f3bfcdc2ea9f0a91b4c Mon Sep 17 00:00:00 2001 From: John OReilly Date: Fri, 13 Mar 2026 17:21:38 -0400 Subject: [PATCH] GPT is about to go nuts with my project. --- SVS-MSP-Calculator-glass.css | 502 +++++++++++++++++++++++++++++++++++ SVS-MSP-Calculator.css | 12 +- SVS-MSP-Calculator.html | 150 +---------- SVS-MSP-Calculator.js | 303 +++++++++++++-------- 4 files changed, 712 insertions(+), 255 deletions(-) create mode 100644 SVS-MSP-Calculator-glass.css diff --git a/SVS-MSP-Calculator-glass.css b/SVS-MSP-Calculator-glass.css new file mode 100644 index 0000000..424c95b --- /dev/null +++ b/SVS-MSP-Calculator-glass.css @@ -0,0 +1,502 @@ +/* ══════════════════════════════════════════════════════════════ + SVS MSP Calculator — Glass Dark Theme + Imported dynamically by the theme toggle as a third test theme. + Keeps the existing HTML structure intact and overrides presentation only. + ══════════════════════════════════════════════════════════════ */ + +html { + color-scheme: dark; +} + +:root { + --ink: #eef6ff; + --paper: #08111c; + --accent: #69c8ff; + --muted: #9fb3c9; + --border: rgba(143, 183, 221, 0.2); + --card: rgba(10, 18, 31, 0.62); + --green: #63d8a2; + --amber: #ffbe68; + --glass-header-text: #5f6d7f; +} + +body { + background: + linear-gradient(138deg, #03070f 0%, #071120 14%, #10152a 30%, #1a1324 48%, #1a0d17 64%, #0a111b 82%, #050912 100%), + linear-gradient(125deg, rgba(44, 138, 255, 0.22) 0%, rgba(44, 138, 255, 0) 26%), + linear-gradient(142deg, rgba(18, 194, 152, 0.16) 18%, rgba(18, 194, 152, 0) 42%), + linear-gradient(154deg, rgba(118, 72, 224, 0.16) 34%, rgba(118, 72, 224, 0) 58%), + linear-gradient(164deg, rgba(198, 46, 86, 0.16) 52%, rgba(198, 46, 86, 0) 74%), + radial-gradient(circle at 8% 10%, rgba(72, 178, 255, 0.34), transparent 26%), + radial-gradient(circle at 26% 30%, rgba(32, 196, 144, 0.24), transparent 22%), + radial-gradient(circle at 58% 18%, rgba(116, 82, 222, 0.24), transparent 22%), + radial-gradient(circle at 88% 16%, rgba(200, 60, 92, 0.24), transparent 20%), + radial-gradient(circle at 76% 56%, rgba(42, 126, 255, 0.2), transparent 22%), + radial-gradient(circle at 24% 78%, rgba(112, 44, 138, 0.22), transparent 22%), + radial-gradient(circle at 92% 86%, rgba(18, 168, 132, 0.2), transparent 20%), + linear-gradient(160deg, rgba(7, 14, 25, 0.72) 0%, rgba(5, 10, 19, 0.8) 100%); + background-attachment: fixed; + color: var(--ink); + position: relative; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background: + linear-gradient(132deg, rgba(58, 154, 255, 0.16) 0%, rgba(58, 154, 255, 0) 34%), + linear-gradient(145deg, rgba(28, 201, 154, 0.12) 18%, rgba(28, 201, 154, 0) 44%), + linear-gradient(156deg, rgba(122, 84, 232, 0.12) 38%, rgba(122, 84, 232, 0) 60%), + linear-gradient(168deg, rgba(214, 68, 104, 0.12) 58%, rgba(214, 68, 104, 0) 78%); + opacity: 0.9; + z-index: 0; +} + +.outer, +.pitch-wrap { + position: relative; + z-index: 1; +} + +::selection { + background: rgba(105, 200, 255, 0.28); + color: #f8fbff; +} + +.top-bar { + position: sticky !important; + top: 0 !important; + z-index: 100 !important; + background: linear-gradient( + 180deg, + rgba(252, 255, 255, 0.96) 0%, + rgba(244, 249, 255, 0.93) 52%, + rgba(231, 240, 251, 0.91) 100% + ) !important; + border-bottom: 1px solid rgba(118, 143, 171, 0.35) !important; + box-shadow: 0 8px 24px rgba(7, 18, 33, 0.1) !important; + backdrop-filter: blur(18px) saturate(135%); + -webkit-backdrop-filter: blur(18px) saturate(135%); +} + +.top-bar-right { + color: var(--glass-header-text) !important; +} + +@media (min-width: 1101px) { + .outer { + padding-top: var(--sidebar-top-gap) !important; + } + + .side-col { + top: var(--sidebar-sticky-top) !important; + } +} + +.theme-toggle-btn { + background: linear-gradient(180deg, rgba(247, 250, 255, 0.88), rgba(217, 229, 242, 0.82)) !important; + border: 1px solid rgba(83, 117, 150, 0.24) !important; + color: #223142 !important; + box-shadow: 0 10px 24px rgba(6, 18, 31, 0.14) !important; +} + +.theme-toggle-btn:hover { + background: linear-gradient(180deg, rgba(252, 254, 255, 0.94), rgba(226, 237, 248, 0.88)) !important; +} + +.theme-toggle-btn:active { + background: linear-gradient(180deg, rgba(226, 236, 248, 0.95), rgba(205, 219, 235, 0.9)) !important; +} + +.section, +.quote-settings-bar, +.sidebar, +.sidebar-utility .btn-reset-quote, +.mobile-panel-sheet, +.mobile-panel-close-row, +.mobile-panel-actions, +.confirm-modal-card, +.feature-card, +.addon-row, +.vs-comparison-wrap, +.export-wrap, +.pitch-inner { + background: linear-gradient(180deg, rgba(16, 27, 43, 0.76), rgba(9, 17, 29, 0.68)) !important; + border-color: rgba(143, 183, 221, 0.18) !important; + box-shadow: + 0 18px 50px rgba(2, 8, 17, 0.32), + inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(18px) saturate(135%); + -webkit-backdrop-filter: blur(18px) saturate(135%); +} + +.section { + background: linear-gradient(180deg, rgba(17, 29, 46, 0.74), rgba(9, 17, 29, 0.66)) !important; +} + +.section:hover { + border-color: rgba(105, 200, 255, 0.34) !important; + box-shadow: + -4px 0 0 0 rgba(105, 200, 255, 0.36), + 0 20px 54px rgba(2, 8, 17, 0.38), + inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; +} + +.sec-open { + border-color: rgba(105, 200, 255, 0.5) !important; + box-shadow: + -4px 0 0 0 rgba(105, 200, 255, 0.5), + 0 22px 58px rgba(2, 8, 17, 0.42), + inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; +} + +.section-num { + color: rgba(226, 239, 255, 0.18) !important; + text-shadow: 0 0 26px rgba(105, 200, 255, 0.1); +} + +.section-title, +.confirm-modal-title, +.sidebar-mrr, +.sidebar-line .val, +.vs-svs-label { + color: #f4f9ff !important; +} + +.section-subtitle, +.feature-card-desc, +.sidebar-note, +.sidebar-note-mono, +.sl-sub, +.vs-label, +.vs-td-muted, +.savings-prompt, +.pitch-desc, +.qs-label, +.qs-toggle-label, +.qs-fee-label, +.qs-fee-dollar, +.sidebar-line, +.section-title-tag { + color: var(--muted) !important; +} + +.client-input { + color: #f4f9ff !important; + border-bottom-color: rgba(143, 183, 221, 0.24) !important; +} + +.client-input::placeholder { + color: rgba(159, 179, 201, 0.72) !important; +} + +.sec-chevron, +.addon-preview-pill, +.btn-toggle-all, +.confirm-btn-secondary, +.btn-export-secondary, +.mobile-panel-close, +.nudge-nav-btn { + background: rgba(255, 255, 255, 0.04) !important; + border-color: rgba(143, 183, 221, 0.18) !important; + color: var(--muted) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.sec-open .sec-chevron, +.section-toggle:hover .sec-chevron, +.btn-toggle-all:hover, +.confirm-btn-secondary:hover, +.btn-export-secondary:hover, +.nudge-nav-btn:hover, +.mobile-panel-close:hover { + background: rgba(105, 200, 255, 0.12) !important; + border-color: rgba(105, 200, 255, 0.3) !important; + color: #f2f8ff !important; +} + +.pill-toggle, +.tier-seg-wrap, +.qs-fee-input-wrap { + background: rgba(5, 11, 21, 0.3) !important; + border-color: rgba(143, 183, 221, 0.18) !important; +} + +.pill-toggle label, +.tier-seg { + background: transparent !important; +} + +.pill-toggle label:hover, +.tier-seg:hover, +.addon-row:hover { + background: rgba(255, 255, 255, 0.04) !important; +} + +.tier-seg.active, +.btn-export, +.confirm-btn-danger, +.mobile-quote-pill, +.progress-fill { + background: linear-gradient(135deg, #7ad6ff 0%, #4da8ff 52%, #337dff 100%) !important; + color: #ffffff !important; +} + +.pill-toggle input:checked + label { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%), + linear-gradient(135deg, rgba(103, 182, 248, 0.7) 0%, rgba(63, 122, 210, 0.76) 58%, rgba(45, 82, 155, 0.82) 100%) !important; + color: #ffffff !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.12), + inset 0 -1px 0 rgba(3, 10, 20, 0.2) !important; +} + +.sidebar-header { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 44%), + linear-gradient(135deg, rgba(105, 188, 250, 0.82) 0%, rgba(71, 132, 224, 0.8) 54%, rgba(67, 72, 156, 0.76) 100%) !important; + color: #ffffff !important; + box-shadow: + inset 0 -1px 0 rgba(255, 255, 255, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; +} + +.pill-toggle input:checked + label .pill-desc, +.pill-toggle input:checked + label .pill-price, +.tier-seg.active .tier-name, +.tier-seg.active .tier-price, +.tier-seg.active .tier-sub { + color: #ffffff !important; +} + +.num-input, +.qs-fee-input, +.qs-fee-dollar, +.qs-fee-input-wrap, +.mobile-panel-sheet .sidebar-body { + background: rgba(5, 11, 21, 0.34) !important; +} + +.num-input, +.qs-fee-input { + border-color: rgba(143, 183, 221, 0.2) !important; + color: #f2f8ff !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.num-input:focus, +.qs-fee-input:focus, +.client-input:focus-visible { + border-color: rgba(105, 200, 255, 0.55) !important; + box-shadow: 0 0 0 3px rgba(105, 200, 255, 0.16) !important; +} + +.qs-switch { + background: rgba(255, 255, 255, 0.12) !important; +} + +.qs-switch::after { + background: rgba(250, 252, 255, 0.95) !important; + box-shadow: 0 2px 8px rgba(3, 9, 18, 0.28); +} + +.addon-row.selected { + background: rgba(105, 200, 255, 0.12) !important; + border-color: rgba(105, 200, 255, 0.28) !important; +} + +.addon-row.selected .addon-name, +.addon-row.selected .addon-price { + color: #9edcff !important; +} + +.feature-card { + background: linear-gradient(180deg, rgba(19, 31, 49, 0.8), rgba(10, 18, 30, 0.72)) !important; +} + +.callout-green, +.nudge-banner.green, +.admin-waive-savings { + background: linear-gradient(180deg, rgba(15, 48, 42, 0.82), rgba(10, 35, 30, 0.72)) !important; + border-color: rgba(99, 216, 162, 0.26) !important; + color: var(--green) !important; +} + +.callout-red { + background: linear-gradient(180deg, rgba(62, 23, 34, 0.82), rgba(41, 14, 22, 0.74)) !important; + border-color: rgba(230, 117, 138, 0.26) !important; + color: #ffb7c6 !important; +} + +.nudge-banner.amber, +.admin-fee-waived-badge { + background: linear-gradient(180deg, rgba(66, 41, 12, 0.84), rgba(43, 27, 8, 0.76)) !important; + border-color: rgba(255, 190, 104, 0.26) !important; + color: var(--amber) !important; +} + +.admin-waive-savings, +.admin-fee-waived-badge, +.addon-preview-pill.active { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.addon-preview-pill.active { + background: rgba(105, 200, 255, 0.16) !important; + border-color: rgba(105, 200, 255, 0.28) !important; + color: #dff3ff !important; +} + +.collapsible-header, +.sidebar-line, +.pitch-item, +.vs-label::after, +.sidebar-line-total, +.pitch-footer, +.export-wrap, +.mobile-panel-close-row, +.mobile-panel-actions { + border-color: rgba(143, 183, 221, 0.14) !important; +} + +.sidebar-title, +.sidebar-client.placeholder { + color: rgba(255, 255, 255, 0.76) !important; +} + +.sidebar-body, +.mobile-panel-sheet .sidebar, +.mobile-panel-sheet .sidebar-body { + background: transparent !important; +} + +.sidebar-note strong, +.sl-discount-val, +.savings-amount { + color: var(--green) !important; +} + +.sl-hst-toggle, +.sl-hst-val, +.sl-muted { + color: var(--muted) !important; +} + +.vs-comparison-wrap { + background: linear-gradient(180deg, rgba(14, 24, 39, 0.72), rgba(9, 16, 29, 0.62)) !important; +} + +.vs-save-green td { + background: rgba(99, 216, 162, 0.14) !important; +} + +.vs-save-amber td { + background: rgba(255, 190, 104, 0.14) !important; +} + +.export-wrap { + border-top: 1px solid rgba(143, 183, 221, 0.14) !important; +} + +.btn-export { + box-shadow: 0 14px 28px rgba(29, 108, 186, 0.26) !important; +} + +.btn-export:hover, +.mobile-quote-pill:hover { + filter: brightness(1.05); +} + +.btn-reset-quote { + color: #dceefe !important; +} + +.btn-reset-quote:hover { + background: rgba(105, 200, 255, 0.1) !important; + border-color: rgba(105, 200, 255, 0.32) !important; + color: #f2f8ff !important; +} + +.confirm-modal-backdrop { + background: rgba(2, 7, 15, 0.72) !important; + backdrop-filter: blur(10px) saturate(125%); + -webkit-backdrop-filter: blur(10px) saturate(125%); +} + +.confirm-modal-card { + background: linear-gradient(180deg, rgba(18, 29, 46, 0.86), rgba(10, 17, 29, 0.8)) !important; +} + +.pitch-inner { + background: linear-gradient(180deg, rgba(14, 25, 40, 0.72), rgba(9, 16, 28, 0.68)) !important; +} + +.pitch-title { + color: #f1f8ff !important; +} + +.pitch-footer { + background: linear-gradient(135deg, rgba(11, 42, 34, 0.88), rgba(7, 28, 22, 0.86)) !important; + color: #8ee8bf !important; +} + +.mobile-panel-sheet { + background: linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(8, 14, 24, 0.9)) !important; +} + +.mobile-panel-close-row, +.mobile-panel-actions { + background: rgba(10, 18, 30, 0.84) !important; +} + +@media (max-width: 1100px) { + .top-bar { + background: linear-gradient( + 180deg, + rgba(251, 255, 255, 0.95) 0%, + rgba(241, 247, 254, 0.91) 56%, + rgba(228, 238, 250, 0.89) 100% + ) !important; + } +} + +@media (max-width: 600px) { + body { + background: + linear-gradient(150deg, #03070f 0%, #0a1220 24%, #171226 54%, #110d18 76%, #070c14 100%), + linear-gradient(132deg, rgba(58, 154, 255, 0.16) 0%, rgba(58, 154, 255, 0) 34%), + linear-gradient(150deg, rgba(28, 201, 154, 0.12) 18%, rgba(28, 201, 154, 0) 44%), + linear-gradient(162deg, rgba(214, 68, 104, 0.11) 48%, rgba(214, 68, 104, 0) 72%), + radial-gradient(circle at 16% 12%, rgba(72, 178, 255, 0.24), transparent 24%), + radial-gradient(circle at 72% 20%, rgba(189, 58, 92, 0.18), transparent 20%), + radial-gradient(circle at 34% 46%, rgba(32, 196, 144, 0.18), transparent 22%), + radial-gradient(circle at 74% 60%, rgba(116, 82, 222, 0.16), transparent 20%); + background-attachment: fixed; + } + + body::before { + background: + linear-gradient(138deg, rgba(58, 154, 255, 0.14) 0%, rgba(58, 154, 255, 0) 34%), + linear-gradient(154deg, rgba(28, 201, 154, 0.1) 18%, rgba(28, 201, 154, 0) 46%), + linear-gradient(166deg, rgba(122, 84, 232, 0.1) 36%, rgba(122, 84, 232, 0) 58%), + linear-gradient(174deg, rgba(214, 68, 104, 0.1) 56%, rgba(214, 68, 104, 0) 76%); + opacity: 0.82; + } + + .theme-toggle-btn { + box-shadow: 0 8px 20px rgba(6, 18, 31, 0.12) !important; + } + + .section, + .quote-settings-bar, + .sidebar, + .mobile-panel-sheet, + .confirm-modal-card { + box-shadow: + 0 14px 36px rgba(2, 8, 17, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; + } +} diff --git a/SVS-MSP-Calculator.css b/SVS-MSP-Calculator.css index 88ea41b..4c390b3 100644 --- a/SVS-MSP-Calculator.css +++ b/SVS-MSP-Calculator.css @@ -31,6 +31,10 @@ --card: #272420; /* elevated surface — clear separation from paper */ --green: #3ab870; --amber: #e8920f; + --sidebar-stack-gap: 12px; + --sidebar-top-gap: calc(var(--sidebar-stack-gap) + 20px); + --top-bar-sticky-offset: 62px; + --sidebar-sticky-top: calc(var(--top-bar-sticky-offset) + var(--sidebar-top-gap)); } body { background: var(--paper); @@ -111,14 +115,14 @@ display: grid; grid-template-columns: 3fr 2fr; gap: 52px; - padding: 50px clamp(20px,2vw,40px) 52px; + padding: var(--sidebar-top-gap) 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: 102px; z-index: 10; align-self: start; } - .sidebar-utility { margin-bottom: 12px; } + .side-col { position: sticky; top: var(--sidebar-sticky-top); z-index: 10; align-self: start; } + .sidebar-utility { margin-bottom: var(--sidebar-stack-gap); } .btn-reset-quote { width: 100%; background: var(--card); @@ -1459,7 +1463,7 @@ @media (max-width: 1350px) { .outer { gap: 36px; - padding: 52px clamp(48px,4vw,60px) 52px; + padding: var(--sidebar-top-gap) clamp(48px,4vw,60px) 52px; } .section { margin-left: 76px; } .section-num { left: -76px; width: 64px; font-size: 54px; top: 30px; } diff --git a/SVS-MSP-Calculator.html b/SVS-MSP-Calculator.html index e12cc05..f78af05 100644 --- a/SVS-MSP-Calculator.html +++ b/SVS-MSP-Calculator.html @@ -37,10 +37,10 @@ .mobile-panel-backdrop — dark blur overlay, click to close .mobile-panel-sheet — slides up from bottom, max-height:92vh .mobile-panel-handle — decorative drag indicator bar - .mobile-panel-close-row — "QUOTE SUMMARY" label + × button - #mobilePanelContent — contains duplicate sidebar (_m IDs) - DUPLICATE SIDEBAR: All sidebar IDs duplicated with _m suffix. - update() calls syncEl/syncClass/syncStyle to keep _m in sync. + .mobile-panel-close-row — "QUOTE SUMMARY" label + × button + #mobilePanelContent — receives a JS-cloned sidebar with _m IDs + MOBILE SIDEBAR: Built from the desktop sidebar on boot. + update() syncs the cloned _m elements after each render. Never DOM-move the real .sidebar here — it breaks desktop. ════════════════════════════════════════════════════════════ -->
@@ -54,144 +54,11 @@
- -
- -
-
-
SVS MSP — Live Quote
- -
- - -
-
- - - - - - - - - - - -
- - - - - -
Monthly Recurring (MRR)
- - - - - - - - - - - - - -
- Annual Projection - $1,800 -
- - - - - -
- -
- - -
-
- -
+ +
-
@@ -754,7 +621,7 @@
@@ -769,7 +636,7 @@