Initial Commit

2026-03-11 15:26:39 -04:00
commit 1232b12961
4 changed files with 3975 additions and 0 deletions
--- a/SVS-MSP-Calculator-light.css
+++ b/SVS-MSP-Calculator-light.css
@@ -0,0 +1,134 @@
+/* ══════════════════════════════════════════════════════════════
+   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:    #1a1816;       /* near-black for body text              */
+  --paper:  #f4f2ed;       /* warm off-white page background        */
+  --accent: #1a6a98;       /* slightly darker blue for contrast     */
+  --accent2: #a03050;
+  --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    */
+}
+
+/* ── 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;
+}
+
+/* ── SECTION CARDS ───────────────────────────────────────────────── */
+.section {
+  background: #ffffff !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.3) !important;
+  box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.35) !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;
+}
+
+/* ── 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;
+}
+
+/* ── 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;
+}
+
+/* ── 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 ROWS ──────────────────────────────────────────── */
+.vs-save-green { background: #e8f5ee !important; }
+.vs-save-amber { background: #fff8e1 !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;
+}
+
+/* ── PITCH FOOTER (green strip) ──────────────────────────────────── */
+.pitch-footer {
+  background: #d4eddc !important;
+  border-top-color: #a8d5b8 !important;
+}