Light & Dark Theme Alterations

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 <span> 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 {