/* ══════════════════════════════════════════════════════════════ 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; --top-bar-bg: linear-gradient( 180deg, rgba(252, 255, 255, 0.96) 0%, rgba(244, 249, 255, 0.93) 52%, rgba(231, 240, 251, 0.91) 100% ); --top-bar-border: rgba(118, 143, 171, 0.35); --top-bar-meta: var(--glass-header-text); --theme-chip-bg: linear-gradient(180deg, rgba(247, 250, 255, 0.88), rgba(217, 229, 242, 0.82)); --theme-chip-hover: linear-gradient(180deg, rgba(252, 254, 255, 0.94), rgba(226, 237, 248, 0.88)); --theme-chip-active: linear-gradient(180deg, rgba(226, 236, 248, 0.95), rgba(205, 219, 235, 0.9)); --theme-chip-fg: #223142; --theme-chip-border: rgba(83, 117, 150, 0.24); --theme-chip-shadow: 0 10px 24px rgba(6, 18, 31, 0.14); --group-strip: color-mix(in srgb, var(--accent) 20%, var(--paper)); --shadow-card: 0 2px 12px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.12); --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15); --shadow-card-open: 0 8px 28px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.18); --section-hover-border: rgba(105, 200, 255, 0.34); --section-hover-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); --section-open-border: rgba(105, 200, 255, 0.5); --section-open-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); --selection-bg: rgba(105, 200, 255, 0.28); --selection-text: #f8fbff; --top-bar-shadow: 0 8px 24px rgba(7, 18, 33, 0.1); --glass-page-bg: linear-gradient(142deg, #030b14 0%, #071420 20%, #0a1d2c 46%, #081721 72%, #040b13 100%), linear-gradient(128deg, rgba(58, 182, 255, 0.2) 0%, rgba(58, 182, 255, 0) 30%), linear-gradient(148deg, rgba(22, 205, 164, 0.15) 18%, rgba(22, 205, 164, 0) 48%), radial-gradient(circle at 8% 10%, rgba(84, 200, 255, 0.3), transparent 26%), radial-gradient(circle at 28% 34%, rgba(36, 204, 168, 0.22), transparent 22%), radial-gradient(circle at 78% 18%, rgba(58, 166, 255, 0.2), transparent 24%), radial-gradient(circle at 84% 72%, rgba(24, 188, 150, 0.16), transparent 20%), linear-gradient(160deg, rgba(6, 14, 24, 0.74) 0%, rgba(4, 10, 19, 0.84) 100%); --glass-page-overlay: linear-gradient(132deg, rgba(70, 184, 255, 0.15) 0%, rgba(70, 184, 255, 0) 34%), linear-gradient(148deg, rgba(28, 198, 158, 0.12) 18%, rgba(28, 198, 158, 0) 46%), radial-gradient(circle at 16% 18%, rgba(72, 198, 255, 0.12), transparent 24%), radial-gradient(circle at 82% 24%, rgba(24, 188, 150, 0.1), transparent 22%); --glass-page-bg-mobile: linear-gradient(150deg, #030b13 0%, #091521 28%, #0d1b29 58%, #07121b 100%), linear-gradient(136deg, rgba(62, 186, 255, 0.16) 0%, rgba(62, 186, 255, 0) 36%), linear-gradient(152deg, rgba(24, 198, 160, 0.11) 18%, rgba(24, 198, 160, 0) 46%), radial-gradient(circle at 14% 12%, rgba(78, 196, 255, 0.24), transparent 24%), radial-gradient(circle at 70% 22%, rgba(24, 184, 148, 0.16), transparent 20%), radial-gradient(circle at 30% 48%, rgba(42, 162, 255, 0.15), transparent 22%); --glass-page-overlay-mobile: linear-gradient(138deg, rgba(66, 182, 255, 0.13) 0%, rgba(66, 182, 255, 0) 36%), linear-gradient(154deg, rgba(26, 194, 156, 0.1) 18%, rgba(26, 194, 156, 0) 46%), radial-gradient(circle at 78% 24%, rgba(26, 186, 150, 0.08), transparent 22%); --glass-panel-bg: linear-gradient(180deg, rgba(16, 27, 43, 0.76), rgba(9, 17, 29, 0.68)); --glass-section-bg: linear-gradient(180deg, rgba(17, 29, 46, 0.74), rgba(9, 17, 29, 0.66)); --glass-panel-border: rgba(143, 183, 221, 0.18); --glass-panel-shadow: 0 18px 50px rgba(2, 8, 17, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06); --glass-section-num: rgba(226, 239, 255, 0.18); --glass-section-num-glow: 0 0 26px rgba(105, 200, 255, 0.1); --glass-heading: #f4f9ff; --glass-heading-soft: var(--glass-heading); --glass-client-border: rgba(143, 183, 221, 0.24); --glass-client-placeholder: rgba(159, 179, 201, 0.72); --glass-ghost-bg: rgba(255, 255, 255, 0.04); --glass-ghost-border: var(--glass-panel-border); --glass-ghost-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); --glass-ghost-hover-bg: rgba(105, 200, 255, 0.12); --glass-ghost-hover-border: rgba(105, 200, 255, 0.3); --glass-ghost-hover-text: var(--glass-heading); --glass-group-surface: rgba(5, 11, 21, 0.3); --glass-input-surface: rgba(5, 11, 21, 0.34); --surface-term-wrap: linear-gradient(180deg, rgba(12, 21, 34, 0.62), rgba(8, 15, 26, 0.54)); --surface-term-tile: rgba(255, 255, 255, 0.02); --surface-term-tile-hover: rgba(105, 200, 255, 0.08); --surface-term-tile-active: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(135deg, rgba(62, 142, 190, 0.58) 0%, rgba(42, 107, 156, 0.62) 58%, rgba(24, 70, 118, 0.68) 100%); --border-term-wrap: var(--glass-panel-border); --border-term-tile-active: rgba(105, 200, 255, 0.16); --shadow-term-wrap: inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-term-tile-active: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(3, 10, 20, 0.26); --text-term-name: var(--muted); --text-term-name-active: var(--text-on-accent); --text-term-sub: var(--muted); --text-term-sub-active: var(--text-on-accent); --text-term-discount: var(--glass-heading); --text-term-discount-active: var(--text-on-accent); --surface-best-value: rgba(99, 216, 162, 0.12); --border-best-value: rgba(99, 216, 162, 0.26); --text-best-value: #baf0d3; --surface-best-value-active: rgba(255, 255, 255, 0.16); --border-best-value-active: rgba(255, 255, 255, 0.34); --text-best-value-active: #ffffff; --text-pill-savings-active: #a8f0c8; --glass-input-border: var(--glass-panel-border); --glass-input-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); --glass-input-focus-border: rgba(105, 200, 255, 0.55); --glass-input-focus-shadow: 0 0 0 3px rgba(105, 200, 255, 0.16); --glass-cta-gradient: linear-gradient(135deg, #76dbff 0%, #48b8ff 54%, #268ee3 100%); --glass-cta-checked-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(135deg, rgba(94, 206, 255, 0.72) 0%, rgba(55, 156, 233, 0.78) 58%, rgba(28, 104, 190, 0.82) 100%); --glass-cta-checked-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(3, 10, 20, 0.2); --glass-sidebar-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(135deg, rgba(63, 133, 175, 0.7) 0%, rgba(47, 113, 156, 0.68) 58%, rgba(31, 82, 126, 0.66) 100%); --glass-sidebar-header-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); --glass-switch-track: rgba(255, 255, 255, 0.12); --surface-switch-off: rgba(255, 255, 255, 0.15); --surface-switch-on: var(--green); --glass-switch-knob: rgba(250, 252, 255, 0.95); --glass-switch-shadow: 0 2px 8px rgba(3, 9, 18, 0.28); --glass-selected-bg: var(--glass-ghost-hover-bg); --glass-selected-border: var(--glass-ghost-hover-border); --glass-selected-text: var(--glass-heading); --surface-addon-hover: rgba(105, 200, 255, 0.08); --border-addon-hover: rgba(105, 200, 255, 0.24); --glass-feature-bg: linear-gradient(180deg, rgba(19, 31, 49, 0.8), rgba(10, 18, 30, 0.72)); --glass-success-bg: linear-gradient(180deg, rgba(15, 48, 42, 0.82), rgba(10, 35, 30, 0.72)); --glass-success-border: rgba(99, 216, 162, 0.26); --glass-danger-bg: linear-gradient(180deg, rgba(62, 23, 34, 0.82), rgba(41, 14, 22, 0.74)); --glass-danger-border: rgba(230, 117, 138, 0.26); --glass-danger-text: #ffb7c6; --glass-warning-bg: linear-gradient(180deg, rgba(66, 41, 12, 0.84), rgba(43, 27, 8, 0.76)); --glass-warning-border: rgba(255, 190, 104, 0.26); --glass-addon-active-bg: rgba(105, 200, 255, 0.16); --glass-addon-active-border: var(--glass-ghost-hover-border); --glass-addon-active-text: #dff3ff; --glass-pill-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); --glass-divider: rgba(143, 183, 221, 0.14); --glass-sidebar-placeholder: rgba(255, 255, 255, 0.76); --glass-compare-bg: linear-gradient(180deg, rgba(14, 24, 39, 0.72), rgba(9, 16, 29, 0.62)); --glass-compare-success: rgba(99, 216, 162, 0.14); --glass-compare-warning: rgba(255, 190, 104, 0.14); --glass-export-shadow: 0 14px 28px rgba(29, 108, 186, 0.26); --glass-reset-text: #dceefe; --glass-reset-hover-bg: rgba(105, 200, 255, 0.1); --glass-reset-hover-border: var(--glass-ghost-hover-border); --glass-reset-hover-text: var(--glass-heading); --sky: #7dd3fc; --glass-modal-backdrop: rgba(2, 7, 15, 0.72); --glass-modal-bg: linear-gradient(180deg, rgba(18, 29, 46, 0.86), rgba(10, 17, 29, 0.8)); --glass-pitch-bg: linear-gradient(180deg, rgba(14, 25, 40, 0.72), rgba(9, 16, 28, 0.68)); --glass-pitch-footer-bg: linear-gradient(135deg, rgba(11, 42, 34, 0.88), rgba(7, 28, 22, 0.86)); --glass-pitch-footer-text: #8ee8bf; --glass-mobile-sheet-bg: linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(8, 14, 24, 0.9)); --glass-mobile-row-bg: rgba(10, 18, 30, 0.84); --glass-top-bar-mobile-bg: linear-gradient( 180deg, rgba(251, 255, 255, 0.95) 0%, rgba(241, 247, 254, 0.91) 56%, rgba(228, 238, 250, 0.89) 100% ); --glass-theme-toggle-mobile-shadow: 0 8px 20px rgba(6, 18, 31, 0.12); --glass-mobile-panel-shadow: 0 14px 36px rgba(2, 8, 17, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05); --sidebar-zone-services: rgba(105, 200, 255, 0.04); --sidebar-zone-invoice: rgba(105, 200, 255, 0.07); --sidebar-zone-value: rgba(99, 216, 162, 0.04); --sidebar-zone-summary: rgba(105, 200, 255, 0.03); --sidebar-row-stripe: rgba(105, 200, 255, 0.03); --sidebar-line-rule: rgba(143, 183, 221, 0.12); --sidebar-total-rule: rgba(143, 183, 221, 0.22); } body { background: var(--glass-page-bg); background-attachment: fixed; color: var(--ink); position: relative; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--glass-page-overlay); opacity: 0.9; z-index: 0; } .outer, .pitch-wrap { position: relative; z-index: 1; } ::selection { background: var(--selection-bg); color: var(--selection-text); } .top-bar { border-bottom-width: 1px !important; box-shadow: var(--top-bar-shadow) !important; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); } @media (min-width: 1101px) { .outer { padding-top: var(--sidebar-top-gap) !important; } } .section, .quote-settings-bar, .sidebar, .sidebar-utility .btn-export, .sidebar-utility .btn-export-secondary, .mobile-panel-sheet, .mobile-panel-close-row, .mobile-panel-actions, .confirm-modal-card, .vs-comparison-wrap, .pitch-inner { background: var(--glass-panel-bg) !important; border-color: var(--glass-panel-border) !important; box-shadow: var(--glass-panel-shadow) !important; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); } .section { background: var(--glass-section-bg) !important; } .section-num { color: var(--glass-section-num) !important; text-shadow: var(--glass-section-num-glow); } .section-title, .confirm-modal-title, .sidebar-mrr, .sidebar-line .val, .vs-svs-label { color: var(--glass-heading) !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: var(--glass-heading) !important; border-bottom-color: var(--glass-client-border) !important; } .client-input::placeholder { color: var(--glass-client-placeholder) !important; } .sec-chevron, .addon-preview-pill, .btn-toggle-all, .confirm-btn-secondary, .btn-export-secondary, .mobile-panel-close, .nudge-nav-btn { background: var(--glass-ghost-bg) !important; border-color: var(--glass-ghost-border) !important; color: var(--muted) !important; box-shadow: var(--glass-ghost-shadow); } .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: var(--glass-ghost-hover-bg) !important; border-color: var(--glass-ghost-hover-border) !important; color: var(--glass-ghost-hover-text) !important; } .pill-toggle, .tier-seg-wrap, .qs-fee-input-wrap { background: var(--glass-group-surface) !important; border-color: var(--glass-ghost-border) !important; } .pill-toggle label, .tier-seg { background: transparent !important; } .pill-toggle label:hover, .tier-seg:hover, .addon-row:hover { background: var(--glass-ghost-bg) !important; } .tier-seg.active, .btn-export, .confirm-btn-danger, .mobile-quote-pill, .progress-fill { background: var(--glass-cta-gradient) !important; color: var(--text-on-accent) !important; } .pill-toggle input:checked + label { background: var(--glass-cta-checked-bg) !important; color: var(--text-on-accent) !important; box-shadow: var(--glass-cta-checked-shadow) !important; } .sidebar-header { background: var(--glass-sidebar-header-bg) !important; color: var(--text-on-accent) !important; box-shadow: var(--glass-sidebar-header-shadow) !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: var(--text-on-accent-strong) !important; } .num-input, .qs-fee-input, .qs-fee-dollar, .qs-fee-input-wrap, .mobile-panel-sheet .sidebar-body { background: var(--glass-input-surface) !important; } .num-input, .qs-fee-input { border-color: var(--glass-input-border) !important; color: var(--glass-ghost-hover-text) !important; box-shadow: var(--glass-input-inset-shadow); } .num-input:focus, .qs-fee-input:focus, .client-input:focus-visible { border-color: var(--glass-input-focus-border) !important; box-shadow: var(--glass-input-focus-shadow) !important; } .qs-switch { background: var(--surface-switch-off) !important; } .qs-toggle-row input:checked ~ .qs-switch { background: var(--surface-switch-on) !important; } .qs-switch::after { background: var(--glass-switch-knob) !important; box-shadow: var(--glass-switch-shadow); } .addon-row.selected { background: var(--glass-selected-bg) !important; border-color: var(--glass-selected-border) !important; } .addon-row.selected .addon-name, .addon-row.selected .addon-price, .addon-row.selected .addon-desc { color: var(--glass-selected-text) !important; } .feature-card { background: var(--glass-feature-bg) !important; border-color: var(--glass-panel-border) !important; box-shadow: none !important; } .addon-row { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .callout-green, .nudge-banner.green, .admin-waive-savings { background: var(--glass-success-bg) !important; border-color: var(--glass-success-border) !important; color: var(--green) !important; } .callout-red { background: var(--glass-danger-bg) !important; border-color: var(--glass-danger-border) !important; color: var(--glass-danger-text) !important; } .nudge-banner.amber, .admin-fee-waived-badge { background: var(--glass-warning-bg) !important; border-color: var(--glass-warning-border) !important; color: var(--amber) !important; } .admin-waive-savings, .admin-fee-waived-badge, .addon-preview-pill.active { box-shadow: var(--glass-pill-inset-shadow); } .addon-preview-pill.active { background: var(--glass-addon-active-bg) !important; border-color: var(--glass-addon-active-border) !important; color: var(--glass-addon-active-text) !important; } .collapsible-header, .pitch-item, .vs-label::after, .pitch-footer, .mobile-panel-close-row, .mobile-panel-actions { border-color: var(--glass-divider) !important; } .sidebar-line { border-bottom-color: var(--glass-divider) !important; } .sidebar-line.sidebar-line-total { border-top-color: var(--sidebar-total-rule) !important; border-bottom: none !important; } .sidebar-title, .sidebar-client.placeholder { color: var(--glass-sidebar-placeholder) !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: var(--glass-compare-bg) !important; } .vs-save-green td { background: var(--glass-compare-success) !important; } .vs-save-amber td { background: var(--glass-compare-warning) !important; } .export-wrap { background: transparent !important; border-top: none !important; } body.sidebar-focus-open .side-col .export-wrap { background: transparent !important; border-color: transparent !important; border-top: none !important; box-shadow: none !important; backdrop-filter: none; } .btn-export { box-shadow: var(--glass-export-shadow) !important; } .btn-export:hover, .mobile-quote-pill:hover { filter: brightness(1.2) !important; box-shadow: 0 4px 16px rgba(99, 127, 136, 0.35) !important; } .btn-export:active { filter: brightness(0.9) !important; transform: scale(0.97); } .btn-reset-quote { color: var(--glass-reset-text) !important; } .btn-reset-quote:hover { background: var(--glass-reset-hover-bg) !important; border-color: var(--glass-reset-hover-border) !important; color: var(--glass-reset-hover-text) !important; } .btn-import-quote { color: var(--glass-reset-text) !important; } .btn-import-quote:hover { background: color-mix(in srgb, var(--sky) 10%, transparent) !important; border-color: color-mix(in srgb, var(--sky) 35%, transparent) !important; color: var(--sky) !important; } .confirm-modal-backdrop { background: var(--glass-modal-backdrop) !important; backdrop-filter: blur(10px) saturate(125%); -webkit-backdrop-filter: blur(10px) saturate(125%); } .confirm-modal-card { background: var(--glass-modal-bg) !important; } .pitch-inner { background: var(--glass-pitch-bg) !important; } .pitch-title { color: var(--glass-heading-soft) !important; } .pitch-footer { background: var(--glass-pitch-footer-bg) !important; color: var(--glass-pitch-footer-text) !important; } .mobile-panel-sheet { background: var(--glass-mobile-sheet-bg) !important; } .mobile-panel-close-row, .mobile-panel-actions { background: var(--glass-mobile-row-bg) !important; } @media (max-width: 1100px) { .top-bar { background: var(--glass-top-bar-mobile-bg) !important; } } @media (max-width: 1100px) { body { background-attachment: scroll; } } @media (max-width: 600px) { body { background: var(--glass-page-bg-mobile); background-attachment: scroll; } body::before { background: var(--glass-page-overlay-mobile); opacity: 0.82; } .theme-toggle-btn { box-shadow: var(--glass-theme-toggle-mobile-shadow) !important; } .section, .quote-settings-bar, .sidebar, .mobile-panel-sheet, .confirm-modal-card { box-shadow: var(--glass-mobile-panel-shadow) !important; } }