/* THEME SYSTEM Every page on you-the-winner.com defines its colors as CSS variables in :root. This file overrides those same variables when is set to one of: vivid, paper, spectrum, sunrise, midnight. "Paper" is the default for first-time visitors (see theme.js); "Calm" is the only theme with no attribute at all, since it matches each page's plain :root variables. No page-specific CSS needed beyond linking this file and theme.js, and having the floating toggle button already in the page markup. */ /* ============ VIVID — bold red, inspired by Target's brand red (#CC0000) ============ */ html[data-theme="vivid"] { --bg: #ffffff; --surface: #ffffff; --surface2: #fdecec; --surface3: #fbd9d9; --border: #f3c6c6; --text: #1a1414; --muted: #7a6060; --soft: #c98f8f; --accent: #cc0000; --accent2: #8f0000; --accent-light: #fde3e3; --gold: #ffb800; --gold-bg: #fff4d6; --gold-border: #ffd966; --warm-bg: #ffe3e0; --warm-border: #ffb3ab; --warm-text: #8f0000; } html[data-theme="vivid"] body { background: #ffffff; } html[data-theme="vivid"] .brand-mark { background: #cc0000; } html[data-theme="vivid"] .btn-primary { background: #cc0000; box-shadow: 0 10px 28px rgba(204, 0, 0, 0.3); } html[data-theme="vivid"] .nav-cta { background: #cc0000 !important; } html[data-theme="vivid"] .app-tab.active { background: #cc0000; } html[data-theme="vivid"] .tier-card.featured { border-color: #cc0000; box-shadow: 0 16px 40px rgba(204, 0, 0, 0.18); } html[data-theme="vivid"] .tier-badge { background: #cc0000; } html[data-theme="vivid"] .compare-row.highlight .compare-bar-fill { background: #cc0000; box-shadow: 0 2px 10px rgba(204, 0, 0, 0.3); } html[data-theme="vivid"] .breath-circle { background: #cc0000; box-shadow: 0 10px 30px rgba(204, 0, 0, 0.3); } /* ============ PAPER — plain white, minimal, editorial ============ */ html[data-theme="paper"] { --bg: #ffffff; --surface: #ffffff; --surface2: #f7f7f5; --surface3: #eeeeeb; --border: #e2e2de; --text: #17201d; --muted: #5c6864; --soft: #93a19c; --accent: #1f6a5c; --accent2: #16455c; --accent-light: #edf5f2; --gold: #a3790f; --gold-bg: #fdfaf0; --gold-border: #e7d8a3; --warm-bg: #fdf1ef; --warm-border: #e6c4be; --warm-text: #9c3b32; } html[data-theme="paper"] body { background: #ffffff; } html[data-theme="paper"] body::before { display: none; } html[data-theme="paper"] .brand-mark { background: var(--accent); } html[data-theme="paper"] .btn-primary { background: var(--accent); box-shadow: none; } html[data-theme="paper"] .nav-cta { background: var(--accent) !important; box-shadow: none !important; } html[data-theme="paper"] .app-tab.active { background: var(--accent); } html[data-theme="paper"] .tier-card.featured { border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } html[data-theme="paper"] .tier-badge { background: var(--accent); } html[data-theme="paper"] .value-block { background: var(--surface2); } html[data-theme="paper"] .compare-panel { background: #ffffff; border: 1px solid var(--border); } html[data-theme="paper"] .compare-row.highlight .compare-bar-fill { background: var(--accent); box-shadow: none; } html[data-theme="paper"] .breath-circle { background: var(--accent); box-shadow: none; } html[data-theme="paper"] .card, html[data-theme="paper"] .modal-panel, html[data-theme="paper"] .compare-panel { box-shadow: none; } /* ============ SPECTRUM — a small, deliberate trio (blue / gold / teal), not a full rainbow — solid fills throughout ============ */ html[data-theme="spectrum"] { --bg: #ffffff; --surface: #ffffff; --surface2: #f4f6fb; --surface3: #eaeefa; --border: #dfe3ee; --text: #1f2430; --muted: #5f6676; --soft: #9aa0b0; --accent: #3b6fe0; --accent2: #2b3a55; --accent-light: #eaf0ff; --gold: #d9932e; --gold-bg: #fdf3e3; --gold-border: #f0d29e; --warm-bg: #fdeceb; --warm-border: #f5b8b8; --warm-text: #c23b3b; } html[data-theme="spectrum"] .brand-mark { background: #3b6fe0; } html[data-theme="spectrum"] .btn-primary { background: #3b6fe0; box-shadow: 0 10px 24px rgba(59,111,224,0.28); } html[data-theme="spectrum"] .nav-cta { background: #3b6fe0 !important; } html[data-theme="spectrum"] .app-tab.active { background: #3b6fe0; } html[data-theme="spectrum"] .tier-card.featured { border-color: #3b6fe0; box-shadow: 0 16px 40px rgba(59,111,224,0.16); } html[data-theme="spectrum"] .tier-badge { background: #d9932e; } html[data-theme="spectrum"] .compare-row.highlight .compare-bar-fill { background: #3b6fe0; box-shadow: 0 2px 10px rgba(59,111,224,0.28); } html[data-theme="spectrum"] .breath-circle { background: #3b6fe0; box-shadow: 0 10px 30px rgba(59,111,224,0.28); } /* a light, three-color rotation on repeated small elements (blue / gold / teal only) so the theme reads as "a few colors working together", not a rainbow */ html[data-theme="spectrum"] .feeling-btn:nth-child(1).selected { border-color: #3b6fe0; background: #eaf0ff; } html[data-theme="spectrum"] .feeling-btn:nth-child(2).selected { border-color: #2f9e8f; background: #e6f6f3; } html[data-theme="spectrum"] .feeling-btn:nth-child(3).selected { border-color: #d9932e; background: #fdf3e3; } html[data-theme="spectrum"] .feeling-btn:nth-child(4).selected { border-color: #3b6fe0; background: #eaf0ff; } html[data-theme="spectrum"] .feeling-btn:nth-child(5).selected { border-color: #2f9e8f; background: #e6f6f3; } html[data-theme="spectrum"] .sensory-card:nth-child(1).open { border-color: #3b6fe0; background: #eaf0ff; } html[data-theme="spectrum"] .sensory-card:nth-child(2).open { border-color: #2f9e8f; background: #e6f6f3; } html[data-theme="spectrum"] .sensory-card:nth-child(3).open { border-color: #d9932e; background: #fdf3e3; } html[data-theme="spectrum"] .sensory-card:nth-child(4).open { border-color: #3b6fe0; background: #eaf0ff; } html[data-theme="spectrum"] .insight-card:nth-child(2) .insight-tag { background: #e6f6f3; color: #1f7e6e; } html[data-theme="spectrum"] .insight-card:nth-child(3) .insight-tag { background: #fdf3e3; color: #a3790f; } /* ============ SUNRISE — mission palette: growth (teal) meets a win (gold) ============ */ html[data-theme="sunrise"] { --bg: #fbf8f2; --surface: #ffffff; --surface2: #fef3e2; --surface3: #fce8c8; --border: #eddcb5; --text: #2b2320; --muted: #7a6a55; --soft: #c9b48a; --accent: #e8963c; --accent2: #2a7d6f; --accent-light: #fdecd2; --gold: #e8963c; --gold-bg: #fff6e6; --gold-border: #f0cd8a; --warm-bg: #fdeae0; --warm-border: #f0c0a0; --warm-text: #b35a2a; } html[data-theme="sunrise"] body { background: #fbf8f2; } html[data-theme="sunrise"] .brand-mark { background: #e8963c; } html[data-theme="sunrise"] .btn-primary { background: #e8963c; box-shadow: 0 10px 26px rgba(232,150,60,0.3); } html[data-theme="sunrise"] .nav-cta { background: #e8963c !important; } html[data-theme="sunrise"] .app-tab.active { background: #e8963c; } html[data-theme="sunrise"] .tier-card.featured { border-color: #e8963c; box-shadow: 0 16px 40px rgba(232,150,60,0.18); } html[data-theme="sunrise"] .tier-badge { background: #2a7d6f; } html[data-theme="sunrise"] .compare-row.highlight .compare-bar-fill { background: #e8963c; box-shadow: 0 2px 10px rgba(232,150,60,0.3); } html[data-theme="sunrise"] .breath-circle { background: #e8963c; box-shadow: 0 10px 30px rgba(232,150,60,0.3); } /* ============ MIDNIGHT — dark mode ============ */ html[data-theme="midnight"] { --bg: #0f1720; --surface: #182430; --surface2: #1f2e3b; --surface3: #26394a; --border: #2f4254; --text: #eef3f6; --muted: #9fb3c2; --soft: #6d8494; --accent: #4fd8bc; --accent2: #7fb8e8; --accent-light: #1d3b38; --gold: #ffcf6b; --gold-bg: #2c2410; --gold-border: #5c4a1c; --warm-bg: #3a2020; --warm-border: #5c3030; --warm-text: #ff9b8a; } html[data-theme="midnight"] body { background: #0f1720; } html[data-theme="midnight"] body::before { opacity: 0.4; } html[data-theme="midnight"] a { color: var(--accent2); } html[data-theme="midnight"] .brand-mark { background: linear-gradient(135deg, #4fd8bc, #7fb8e8); color: #0f1720; } html[data-theme="midnight"] .btn-primary { background: linear-gradient(135deg, #4fd8bc, #7fb8e8); color: #0f1720; box-shadow: 0 10px 26px rgba(0,0,0,0.4); } html[data-theme="midnight"] .nav-cta { background: linear-gradient(135deg, #4fd8bc, #7fb8e8) !important; color: #0f1720 !important; } html[data-theme="midnight"] .app-tab.active { background: linear-gradient(135deg, #4fd8bc, #7fb8e8); color: #0f1720; } html[data-theme="midnight"] .tier-card.featured { border-color: #4fd8bc; box-shadow: 0 16px 40px rgba(0,0,0,0.45); } html[data-theme="midnight"] .tier-badge { background: linear-gradient(135deg, #4fd8bc, #7fb8e8); color: #0f1720; } html[data-theme="midnight"] .compare-row.highlight .compare-bar-fill { background: linear-gradient(90deg, #4fd8bc, #ffcf6b); box-shadow: 0 2px 12px rgba(0,0,0,0.4); } html[data-theme="midnight"] .breath-circle { background: radial-gradient(circle at 35% 30%, #7be8d0, #1f9a80); box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #0f1720; } html[data-theme="midnight"] .modal-panel, html[data-theme="midnight"] .card, html[data-theme="midnight"] .insight-card, html[data-theme="midnight"] .tier-card, html[data-theme="midnight"] .compare-panel { box-shadow: 0 8px 24px rgba(0,0,0,0.35); } html[data-theme="midnight"] input, html[data-theme="midnight"] select, html[data-theme="midnight"] textarea { background: var(--surface2); color: var(--text); border-color: var(--border); } /* ============ THEME TOGGLE BUTTON + PICKER MENU (shared across every page) ============ */ .theme-toggle-btn { position: fixed; bottom: 20px; right: 20px; z-index: 999; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border, #cfddd8); background: var(--surface, #ffffff); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease; } .theme-toggle-btn:hover { transform: translateY(-2px) scale(1.05); } .theme-menu { position: fixed; bottom: 82px; right: 20px; z-index: 999; background: var(--surface, #ffffff); border: 1px solid var(--border, #cfddd8); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.2); padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 190px; opacity: 0; transform: translateY(8px) scale(0.97); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .theme-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .theme-menu-item { display: flex; align-items: center; gap: 10px; border: none; background: transparent; cursor: pointer; padding: 9px 10px; border-radius: 10px; text-align: left; font-family: 'Quicksand', sans-serif; font-size: 0.85rem; color: var(--text, #0f1f1c); width: 100%; } .theme-menu-item:hover { background: var(--surface2, #e8f0ed); } .theme-menu-item.active { background: var(--accent-light, #e0eeea); font-weight: 700; } .theme-swatch { display: flex; flex-shrink: 0; } .theme-swatch span { width: 11px; height: 11px; border-radius: 50%; margin-left: -4px; border: 1px solid rgba(0,0,0,0.15); } .theme-swatch span:first-child { margin-left: 0; } .theme-menu-label { white-space: nowrap; } @media print { .theme-toggle-btn, .theme-menu { display: none !important; } }