174 lines
7.9 KiB
CSS
174 lines
7.9 KiB
CSS
/* ══════════════════════════════════════════════════════════════
|
|
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.
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── DESIGN TOKENS (light overrides) ───────────────────────────── */
|
|
:root {
|
|
--ink: #2c2825; /* soft near-black — readable without harshness */
|
|
--paper: #f4f2ed; /* warm off-white page background */
|
|
--accent: #1a6a98; /* blue — good for buttons, kept full strength */
|
|
--muted: #6b6360; /* mid-grey for secondary text */
|
|
--border: #d0cdc7; /* soft warm-grey borders */
|
|
--card: #ebe8e2; /* off-white card background */
|
|
--green: #217045; /* darker green — accessible on white */
|
|
--amber: #a05f00; /* darker amber — accessible on white */
|
|
}
|
|
|
|
/* ── 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: #e8e4db !important;
|
|
border-bottom-color: rgba(0, 0, 0, 0.09) !important; /* replace strong blue stripe with soft warm separator */
|
|
}
|
|
|
|
/* ── SECTION CARDS ───────────────────────────────────────────────── */
|
|
.section {
|
|
background: #faf9f5 !important; /* warm white — less stark than pure white on cream background */
|
|
}
|
|
|
|
/* ── 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: #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;
|
|
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: #f0ede7 !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: 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 {
|
|
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;
|
|
}
|