diff --git a/SVS-MSP-Calculator-light.css b/SVS-MSP-Calculator-light.css index 0ac6272..019a8d7 100644 --- a/SVS-MSP-Calculator-light.css +++ b/SVS-MSP-Calculator-light.css @@ -7,14 +7,14 @@ /* ── DESIGN TOKENS (light overrides) ───────────────────────────── */ :root { - --ink: #1a1816; /* near-black for body text */ - --paper: #f4f2ed; /* warm off-white page background */ - --accent: #1a6a98; /* slightly darker blue for contrast */ - --muted: #6b6360; /* mid-grey for secondary text */ - --border: #ccc9c3; /* light grey borders */ - --card: #ebe8e2; /* off-white card background */ - --green: #217045; /* darker green — accessible on white */ - --amber: #a05f00; /* darker amber — accessible on white */ + --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 ────────────────────────────────────────────────────────── */ @@ -30,11 +30,12 @@ body { ─────────────────────────────────────────────────────────────────── */ .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: #ffffff !important; + background: #faf9f5 !important; /* warm white — less stark than pure white on cream background */ } /* ── CHEVRON PILL — swap white-alpha tint for dark-alpha ─────────── */ @@ -48,12 +49,12 @@ body { /* ── SECTION HOVER / OPEN GLOW ───────────────────────────────────── */ .section:hover { - border-color: rgba(26, 106, 152, 0.3) !important; - box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.35) !important; + 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.45) !important; - box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.65) !important; + border-color: rgba(26, 106, 152, 0.35) !important; + box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.45) !important; } /* ── CALLOUT BOXES ───────────────────────────────────────────────── */ @@ -78,7 +79,12 @@ body { color: var(--ink) !important; } .addon-row.selected .addon-price { - color: var(--accent) !important; + color: var(--accent) !important; /* override dark-mode #62c5f0 */ +} + +/* ── FEATURE CARDS ───────────────────────────────────────────────── */ +.feature-card { + background: #f0ede7 !important; } /* ── NUDGE BANNER ────────────────────────────────────────────────── */ diff --git a/SVS-MSP-Calculator.css b/SVS-MSP-Calculator.css index cf87a01..020b1a5 100644 --- a/SVS-MSP-Calculator.css +++ b/SVS-MSP-Calculator.css @@ -26,7 +26,7 @@ --ink: #ddd8d0; --paper: #22201d; --accent: #2d7aa8; - --muted: #a09890; + --muted: #b0a898; /* lifted slightly — #a09890 was too faint on dark cards */ --border: #3a3630; --card: #2a2722; --green: #3ab870; @@ -166,7 +166,7 @@ margin-left: 96px; border-radius: 12px; border: 1px solid var(--border); - background: #1e1c18; + background: #272420; /* elevated above paper #22201d — was #1e1c18 (sunken) */ padding: 32px 36px 36px; } .main-col > .section:first-of-type { margin-top: 24px; } @@ -555,8 +555,8 @@ first line; text wrapped in so it never flows under icon. ─────────────────────────────────────────────────────────────── */ .callout-green { - background: #0d2016; - border: 1px solid #1e4a30; + background: #162e22; /* dark muted green — was #0d2016 (near-black, unreadable as green) */ + border: 1px solid #245840; border-radius: 6px; padding: 14px 18px; font-family: 'DM Mono', monospace; @@ -569,13 +569,13 @@ gap: 9px; } .callout-red { - background: #200d10; - border: 1px solid #4a1e24; + background: #2a1319; /* dark muted red — was #200d10 (near-black) */ + border: 1px solid #5e2830; border-radius: 6px; padding: 14px 18px; font-family: 'DM Mono', monospace; font-size: 14px; - color: #e06070; + color: #e87882; /* slightly lighter than #e06070 for better contrast on dark red bg */ margin-bottom: 24px; line-height: 1.65; display: flex; @@ -775,13 +775,13 @@ box-sizing: border-box; } .nudge-banner.amber { - background: #1f1500; - color: #d4901a; + background: #2a1e06; /* warm amber-tinted dark — was #1f1500 (near-black) */ + color: var(--amber); /* use token — was hardcoded #d4901a */ border-left: 3px solid var(--amber); } .nudge-banner.green { - background: #1a2e20; - color: #3dc472; + background: #162e22; /* match callout-green — was #1a2e20 */ + color: var(--green); /* use token — was off-token #3dc472 */ border-left: 3px solid var(--green); } .nudge-banner-label { @@ -1224,8 +1224,8 @@ } .savings-result { margin-top: 12px; - background: #0d2016; - border: 1px solid #1e4a30; + background: #162e22; /* match callout-green — was #0d2016 (near-black) */ + border: 1px solid #245840; border-radius: 6px; padding: 12px 16px; font-family: 'DM Mono', monospace; @@ -1267,8 +1267,8 @@ .pitch-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 8px; } .pitch-desc { font-size: 14px; color: var(--muted); line-height: 1.7; } .pitch-footer { - background: #1a2e20; - border-top: 1px solid #1e4a30; + background: #162e22; /* match green callout family — was #1a2e20 */ + border-top: 1px solid #245840; padding: 16px 32px; font-family: 'DM Mono', monospace; font-size: 13px; @@ -1299,12 +1299,31 @@ /* ═══════════════════════════════════════════════════════ RESPONSIVE — MOBILE FIRST Breakpoints: - < 600px — phone portrait - 600–900px — phone landscape / small tablet + < 600px — phone portrait + 600–900px — phone landscape / small tablet 900–1100px — tablet portrait - > 1100px — desktop (base styles apply) + 1101–1350px — narrow desktop (2-col, tighter numerals) + > 1350px — desktop (base styles apply) ═══════════════════════════════════════════════════════ */ + /* ── NARROW DESKTOP (≤ 1350px, > 1100px) ───────────────────── + Reduces the section numeral gutter and outer gap to give the + content columns more breathing room on small laptops / narrow + monitors before the layout collapses to single-column at 1100px. + ─────────────────────────────────────────────────────────────── */ + @media (max-width: 1350px) { + .outer { + gap: 36px; + padding: 52px clamp(48px,4vw,60px) 52px; + } + .section { margin-left: 76px; } + .section-num { left: -76px; width: 64px; font-size: 54px; top: 30px; } + .client-bar { padding: 32px 0 32px 76px; } + .quote-settings-bar { margin-left: 76px; } + .sections-toolbar { margin-left: 76px; } + .top-bar-logo { margin-left: 50px; } + } + /* ── TABLET PORTRAIT (≤ 1100px) ── */ @media (max-width: 1100px) { .outer { diff --git a/SVS-MSP-Calculator.html b/SVS-MSP-Calculator.html index 7623a07..985f9eb 100644 --- a/SVS-MSP-Calculator.html +++ b/SVS-MSP-Calculator.html @@ -275,7 +275,7 @@
- +