Massive AI Overhaul
This commit is contained in:
John OReilly
@@ -1,255 +1,124 @@
|
||||
/* ══════════════════════════════════════════════════════════════
|
||||
SVS MSP Calculator — Light Theme
|
||||
Imported dynamically by toggleTheme() when user switches to light mode.
|
||||
Overrides :root design tokens and all hardcoded dark-mode colours
|
||||
in SVS-MSP-Calculator.css. Never edit layout or structure here.
|
||||
Phase 5 reduces this file to token overrides only so the light mode
|
||||
stays aligned with the shared product system.
|
||||
══════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── DESIGN TOKENS (light overrides) ───────────────────────────── */
|
||||
:root {
|
||||
--ink: #2c2825; /* soft near-black — readable without harshness */
|
||||
--paper: #ece7dc; /* warm sand/khaki page tone */
|
||||
--accent: #1a6a98; /* blue — good for buttons, kept full strength */
|
||||
--muted: #6b6360; /* mid-grey for secondary text */
|
||||
--border: #d2cbc0; /* warm border to match khaki palette */
|
||||
--card: #f1ebdf; /* general light-mode utility surface */
|
||||
--green: #217045; /* darker green — accessible on white */
|
||||
--amber: #a05f00; /* darker amber — accessible on white */
|
||||
--ink: #2c2825;
|
||||
--paper: #e2dccf;
|
||||
--accent: #637f88;
|
||||
--muted: #6a6157;
|
||||
--border: #c3baab;
|
||||
--border-soft: #cdc6ba;
|
||||
--card: #ece4d6;
|
||||
--green: #217045;
|
||||
--amber: #a05f00;
|
||||
--sky: #0e7490;
|
||||
--focus-ring-soft: rgba(99, 127, 136, 0.16);
|
||||
--top-bar-bg: #d9d0c1;
|
||||
--top-bar-border: rgba(0, 0, 0, 0.09);
|
||||
--top-bar-meta: var(--muted);
|
||||
--theme-chip-bg: rgba(67, 57, 50, 0.08);
|
||||
--theme-chip-hover: rgba(67, 57, 50, 0.13);
|
||||
--theme-chip-active: rgba(67, 57, 50, 0.18);
|
||||
--theme-chip-fg: #2a2622;
|
||||
--surface-section: #eee6d8;
|
||||
--surface-feature: #e6ddd0;
|
||||
--surface-settings: #e3d7c4;
|
||||
--surface-settings-divider: #c8bcab;
|
||||
--surface-input: #f1eadf;
|
||||
--surface-term-wrap: #ece3d6;
|
||||
--surface-term-tile: rgba(255, 255, 255, 0.04);
|
||||
--surface-term-tile-hover: rgba(99, 127, 136, 0.06);
|
||||
--surface-term-tile-active: linear-gradient(180deg, #829ea8 0%, #667f89 100%);
|
||||
--border-term-wrap: #cabdaa;
|
||||
--border-term-tile-active: rgba(82, 107, 116, 0.24);
|
||||
--shadow-term-wrap: inset 0 1px 0 rgba(255,255,255,0.34);
|
||||
--shadow-term-tile-active: inset 0 1px 0 rgba(255,255,255,0.18);
|
||||
--text-term-name: #64594e;
|
||||
--text-term-name-active: #f8f5ef;
|
||||
--text-term-sub: #4d433a;
|
||||
--text-term-sub-active: #f8f5ef;
|
||||
--text-term-discount: #2f2a25;
|
||||
--text-term-discount-active: #ffffff;
|
||||
--surface-best-value: rgba(86, 146, 105, 0.12);
|
||||
--border-best-value: rgba(86, 146, 105, 0.3);
|
||||
--text-best-value: #35554a;
|
||||
--surface-best-value-active: rgba(255, 255, 255, 0.18);
|
||||
--border-best-value-active: rgba(255, 255, 255, 0.36);
|
||||
--text-best-value-active: #ffffff;
|
||||
--surface-sidebar: #e0dad1;
|
||||
--surface-sidebar-header: #769aaa;
|
||||
--surface-sidebar-body: #ebe5dd;
|
||||
--surface-sidebar-utility: #d8d1c7;
|
||||
--surface-export: #ddd6cd;
|
||||
--surface-compare: #ddd7ce;
|
||||
--surface-modal: #f0e8dc;
|
||||
--surface-mobile-sheet: #e5dfd6;
|
||||
--surface-mobile-close-row: #dbd4cb;
|
||||
--surface-mobile-actions: #dbd4cb;
|
||||
--surface-mobile-sidebar: transparent;
|
||||
--surface-accent-soft: rgba(99, 127, 136, 0.09);
|
||||
--surface-summary-badge: rgba(99, 127, 136, 0.09);
|
||||
--border-summary-badge: rgba(99, 127, 136, 0.23);
|
||||
--surface-chevron: rgba(58, 50, 43, 0.04);
|
||||
--surface-chevron-active: rgba(58, 50, 43, 0.075);
|
||||
--surface-ghost: rgba(58, 50, 43, 0.06);
|
||||
--surface-ghost-hover: rgba(58, 50, 43, 0.1);
|
||||
--surface-step: #f2ebdf;
|
||||
--surface-step-hover: #e5dbcc;
|
||||
--surface-step-active: var(--accent);
|
||||
--surface-step-border: #a99e8f;
|
||||
--text-step: var(--accent);
|
||||
--surface-success: #e6f2e9;
|
||||
--surface-success-border: #8fb69d;
|
||||
--surface-danger: #f7e8ea;
|
||||
--surface-danger-border: #d5a1ab;
|
||||
--text-danger: #7a1520;
|
||||
--surface-warning: #f7f0dd;
|
||||
--surface-warning-panel: #f3ebda;
|
||||
--surface-warning-border: #ddc39b;
|
||||
--surface-compare-success: rgba(86, 146, 105, 0.12);
|
||||
--surface-compare-warning: rgba(179, 133, 72, 0.11);
|
||||
--surface-selected: #d6e0e1;
|
||||
--surface-addon-hover: #dde2de;
|
||||
--border-addon-hover: #b0bcc0;
|
||||
--text-selected-accent: #264b5d;
|
||||
--text-sidebar-kicker: rgba(248, 245, 239, 0.84);
|
||||
--text-sidebar-heading: #fbf8f3;
|
||||
--text-sidebar-placeholder: rgba(248, 245, 239, 0.76);
|
||||
--text-money: var(--ink);
|
||||
--text-money-hero: var(--ink);
|
||||
--text-vs-heading: var(--ink);
|
||||
--text-vs-accent: var(--accent);
|
||||
--text-vs-muted: var(--muted);
|
||||
--text-incentive: #35554a;
|
||||
--text-pill-savings-active: #d4f5e0;
|
||||
--section-hover-border: rgba(99, 127, 136, 0.18);
|
||||
--section-hover-shadow: -3px 0 0 0 rgba(99, 127, 136, 0.18);
|
||||
--section-open-border: rgba(99, 127, 136, 0.27);
|
||||
--section-open-shadow: -3px 0 0 0 rgba(99, 127, 136, 0.3);
|
||||
--surface-mobile-close-btn: rgba(61, 53, 46, 0.07);
|
||||
--surface-mobile-close-btn-active: rgba(61, 53, 46, 0.12);
|
||||
--btn-primary-fg: #fbf8f3;
|
||||
--btn-primary-hover: #59737c;
|
||||
--surface-pill-icon: rgba(255, 255, 255, 0.18);
|
||||
--border-sidebar: #c6beb3;
|
||||
--surface-sidebar-utility-border: #bfb7ad;
|
||||
--border-compare: #c8c0b5;
|
||||
--border-export-top: #ccc4ba;
|
||||
--border-mobile-sheet: #c6beb3;
|
||||
--border-mobile-row: #ccc4ba;
|
||||
--sidebar-zone-services: rgba(0, 0, 0, 0.025);
|
||||
--sidebar-zone-invoice: rgba(0, 0, 0, 0.04);
|
||||
--sidebar-zone-value: rgba(0, 0, 0, 0.015);
|
||||
--surface-switch-off: #b5ad9f;
|
||||
--surface-switch-on: var(--green);
|
||||
}
|
||||
|
||||
/* ── BODY ────────────────────────────────────────────────────────── */
|
||||
body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* ── TOP BAR ─────────────────────────────────────────────────────
|
||||
Dark CSS sets background: var(--ink). In dark mode --ink is cream.
|
||||
In light mode --ink becomes near-black, so we must pin it to cream
|
||||
to keep the SVG logo (fill="#0c0c0c" text) legible.
|
||||
─────────────────────────────────────────────────────────────────── */
|
||||
.top-bar {
|
||||
background: #e3ddd2 !important;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.09) !important; /* replace strong blue stripe with soft warm separator */
|
||||
}
|
||||
|
||||
/* ── SECTION CARDS ───────────────────────────────────────────────── */
|
||||
.section {
|
||||
background: #f5f2ea !important; /* warm cream — floats above khaki paper */
|
||||
}
|
||||
|
||||
/* ── SPLIT LIGHT-MODE SURFACES ─────────────────────────────────────
|
||||
Keep sections as the main content cards.
|
||||
Quote settings = warmer utility panel.
|
||||
Live quote = cooler summary panel, including the mobile sheet.
|
||||
*/
|
||||
.quote-settings-bar {
|
||||
background: #ebe1d2 !important;
|
||||
border-color: #d8cab8 !important;
|
||||
}
|
||||
.qs-divider {
|
||||
background: #d6c8b7 !important;
|
||||
}
|
||||
.qs-fee-input-wrap,
|
||||
.qs-fee-dollar,
|
||||
.qs-fee-input {
|
||||
background: #f6f0e6 !important;
|
||||
}
|
||||
.sidebar {
|
||||
background: #edf3f6 !important;
|
||||
border-color: #cfdae2 !important;
|
||||
}
|
||||
.sidebar-utility .btn-reset-quote,
|
||||
.mobile-panel-actions .btn-reset-quote {
|
||||
background: #edf3f6 !important;
|
||||
border-color: #cfdae2 !important;
|
||||
}
|
||||
.sidebar-body {
|
||||
background: #f3f7f9 !important;
|
||||
}
|
||||
.export-wrap {
|
||||
background: #edf3f6 !important;
|
||||
border-top: 1px solid #d8e2e8 !important;
|
||||
}
|
||||
.mobile-panel-sheet {
|
||||
background: #edf3f6 !important;
|
||||
border-top-color: #cfdae2 !important;
|
||||
}
|
||||
.mobile-panel-close-row {
|
||||
background: #edf3f6 !important;
|
||||
border-bottom-color: #d8e2e8 !important;
|
||||
}
|
||||
.mobile-panel-actions {
|
||||
background: #edf3f6 !important;
|
||||
border-bottom-color: #d8e2e8 !important;
|
||||
}
|
||||
.mobile-panel-sheet .sidebar {
|
||||
background: transparent !important;
|
||||
}
|
||||
.mobile-panel-sheet .sidebar-body {
|
||||
background: #f3f7f9 !important;
|
||||
}
|
||||
.confirm-modal-card {
|
||||
background: #f5f2ea !important;
|
||||
}
|
||||
.confirm-btn-secondary:hover {
|
||||
background: rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
/* ── CHEVRON PILL — swap white-alpha tint for dark-alpha ─────────── */
|
||||
.sec-chevron {
|
||||
background: rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
.sec-open .sec-chevron,
|
||||
.section-toggle:hover .sec-chevron {
|
||||
background: rgba(0, 0, 0, 0.07) !important;
|
||||
}
|
||||
|
||||
/* ── SECTION HOVER / OPEN GLOW ───────────────────────────────────── */
|
||||
.section:hover {
|
||||
border-color: rgba(26, 106, 152, 0.22) !important;
|
||||
box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.25) !important;
|
||||
}
|
||||
.sec-open {
|
||||
border-color: rgba(26, 106, 152, 0.35) !important;
|
||||
box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.45) !important;
|
||||
}
|
||||
|
||||
/* ── CALLOUT BOXES ───────────────────────────────────────────────── */
|
||||
.callout-green {
|
||||
background: #e8f7ef !important;
|
||||
border-color: #3ab870 !important;
|
||||
color: var(--green) !important;
|
||||
}
|
||||
.callout-red {
|
||||
background: #fceef0 !important;
|
||||
border-color: #c4526a !important;
|
||||
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: #faf8f3 !important; /* soft cream — not stark white */
|
||||
border-color: #b8b4ae !important; /* stronger than --border for crispness */
|
||||
color: var(--accent) !important; /* accent blue +/- symbols instead of muted grey */
|
||||
}
|
||||
.step-btn:hover {
|
||||
background: #ede8de !important; /* warm tint matches khaki family 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: #faf8f3 !important; /* soft cream — matches step buttons */
|
||||
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: #daedf8 !important;
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: inset 3px 0 0 0 var(--accent) !important;
|
||||
}
|
||||
.addon-row.selected .addon-name {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
.addon-row.selected .addon-price {
|
||||
color: var(--accent) !important; /* override dark-mode #62c5f0 */
|
||||
}
|
||||
|
||||
/* ── FEATURE CARDS ───────────────────────────────────────────────── */
|
||||
.feature-card {
|
||||
background: #e9e4da !important;
|
||||
}
|
||||
|
||||
/* ── SIDEBAR / SUMMARY TEXT ────────────────────────────────────────
|
||||
Base dark theme hardcodes a few bright values for money and labels.
|
||||
In light mode those need to return to dark text so the desktop
|
||||
sidebar and the responsive mobile sheet remain readable.
|
||||
*/
|
||||
.sidebar-line .val {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
.sidebar-mrr {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
.vs-svs-label {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
.vs-val-accent {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
.vs-td-muted {
|
||||
color: var(--muted) !important;
|
||||
}
|
||||
|
||||
/* ── NUDGE BANNER ────────────────────────────────────────────────── */
|
||||
.nudge-banner.amber {
|
||||
background: #fff7e0 !important;
|
||||
color: var(--amber) !important;
|
||||
}
|
||||
.nudge-banner.green {
|
||||
background: #e8f7ef !important;
|
||||
color: var(--green) !important;
|
||||
}
|
||||
.nudge-nav-btn {
|
||||
background: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
.nudge-nav-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.11) !important;
|
||||
}
|
||||
|
||||
/* ── VS COMPARISON ───────────────────────────────────────────────── */
|
||||
.vs-comparison-wrap {
|
||||
background: #e5edf2 !important;
|
||||
border-color: #cfdae2 !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 {
|
||||
background: rgba(26, 106, 152, 0.09) !important;
|
||||
border-color: rgba(26, 106, 152, 0.28) !important;
|
||||
}
|
||||
|
||||
/* ── MOBILE PILL HOVER ───────────────────────────────────────────── */
|
||||
.mobile-quote-pill:hover {
|
||||
background: #1a5f8a !important;
|
||||
}
|
||||
|
||||
/* ── THEME TOGGLE BUTTON (light-mode variant) ────────────────────── */
|
||||
.theme-toggle-btn {
|
||||
background: rgba(0, 0, 0, 0.09) !important;
|
||||
color: #2a2622 !important;
|
||||
}
|
||||
.theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.15) !important; }
|
||||
.theme-toggle-btn:active { background: rgba(0, 0, 0, 0.21) !important; }
|
||||
|
||||
/* ── SAVINGS RESULT BOX ──────────────────────────────────────────── */
|
||||
.savings-result {
|
||||
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 {
|
||||
background: #d4eddc !important;
|
||||
border-top-color: #a8d5b8 !important;
|
||||
.btn-import-quote:hover {
|
||||
background: color-mix(in srgb, var(--sky) 8%, transparent);
|
||||
border-color: color-mix(in srgb, var(--sky) 35%, transparent);
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user