/* theme.css - light/dark theme variables only. Set data-theme on via theme.js / inline. */ /* Light (default) */ [data-theme="light"], :root { --site-bg: linear-gradient(135deg, #ff9a9e 0%, #fecfef 40%, #fecfef 60%, #a18cd1 100%); --site-text: #1a1a2e; --site-text-muted: #4a4a6a; --site-card-bg: rgba(255, 255, 255, 0.22); --site-card-border: rgba(255, 255, 255, 0.35); --site-header-bg: rgba(255, 255, 255, 0.3); --site-header-border: rgba(255, 255, 255, 0.4); --site-header-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); --site-footer-bg: rgba(0, 0, 0, 0.06); --site-footer-border: rgba(255, 255, 255, 0.2); --site-footer-text: #4a4a6a; --site-link: #1a1a2e; --site-link-hover: #e91e63; --site-input-bg: rgba(255, 255, 255, 0.4); --site-input-border: rgba(255, 255, 255, 0.5); --site-focus-ring: rgba(255, 105, 180, 0.4); --site-cta: linear-gradient(135deg, #e91e63, #c2185b); --site-cta-shadow: rgba(233, 30, 99, 0.4); --site-progress-low: #78909c; --site-progress-mid: #ec407a; --site-progress-high: #e91e63; --site-progress-soul: #c2185b; --site-scrollbar-track: rgba(255, 255, 255, 0.2); --site-scrollbar-thumb: linear-gradient(180deg, #e91e63, #a18cd1); --site-scrollbar-thumb-hover: linear-gradient(180deg, #c2185b, #7b68a8); /* Home tool section: optional distinct romantic gradient (full-width hero) */ --home-tool-bg: linear-gradient(160deg, #f8e8f0 0%, #e8e0f5 45%, #f0e4ec 100%); /* Zodiac page: warm pink/coral solid (screenshot style) */ --zodiac-section-bg: #f97272; /* Marriage page: vibrant pink (screenshot style) */ --marriage-section-bg: #f8b4c4; /* DOB page: soft pink/lavender */ --dob-section-bg: #f0d4e0; /* Name+DOB page: soft lavender */ --name-dob-section-bg: #e0d8f0; } /* Dark */ [data-theme="dark"] { --site-bg: linear-gradient(135deg, #1a0a0e 0%, #2d1b2e 40%, #1e1a2e 60%, #0f0a18 100%); --site-text: #f0e6ed; --site-text-muted: #b0a0b0; --site-card-bg: rgba(255, 255, 255, 0.08); --site-card-border: rgba(255, 255, 255, 0.12); --site-header-bg: rgba(20, 10, 25, 0.85); --site-header-border: rgba(255, 255, 255, 0.08); --site-header-shadow: 0 2px 24px rgba(233, 30, 99, 0.15); --site-footer-bg: rgba(0, 0, 0, 0.2); --site-footer-border: rgba(233, 30, 99, 0.2); --site-footer-text: #b0a0b0; --site-link: #f0e6ed; --site-link-hover: #ff6b9d; --site-input-bg: rgba(255, 255, 255, 0.08); --site-input-border: rgba(255, 255, 255, 0.15); --site-focus-ring: rgba(255, 107, 157, 0.5); --site-cta: linear-gradient(135deg, #e91e63, #9c27b0); --site-cta-shadow: rgba(233, 30, 99, 0.5); --site-progress-low: #78909c; --site-progress-mid: #ec407a; --site-progress-high: #e91e63; --site-progress-soul: #9c27b0; --site-scrollbar-track: rgba(0, 0, 0, 0.3); --site-scrollbar-thumb: linear-gradient(180deg, #e91e63, #9c27b0); --site-scrollbar-thumb-hover: linear-gradient(180deg, #ff6b9d, #b04bc4); --home-tool-bg: linear-gradient(160deg, #1e1218 0%, #1a1428 45%, #22181e 100%); --zodiac-section-bg: #8b3a4a; --marriage-section-bg: #5c2a3a; --dob-section-bg: #4a2a35; --name-dob-section-bg: #352a4a; /* Dark mode: dropdown (select) text visible - explicit background and text color */ --site-select-bg: rgba(55, 30, 60, 0.95); --site-select-text: #f0e6ed; --site-select-option-bg: rgba(45, 25, 50, 0.98); } /* Smooth theme transition */ html { transition: background 0.25s ease, color 0.2s ease; } body { background: var(--site-bg); color: var(--site-text); transition: background 0.25s ease, color 0.2s ease; } /* Custom scrollbar (Chromium) - theme-aware */ html { scrollbar-width: thin; scrollbar-color: var(--site-scrollbar-thumb) var(--site-scrollbar-track); } html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: var(--site-scrollbar-track); border-radius: 10px; } html::-webkit-scrollbar-thumb { background: var(--site-scrollbar-thumb); border-radius: 10px; transition: background 0.2s ease, box-shadow 0.2s ease; } html::-webkit-scrollbar-thumb:hover { background: var(--site-scrollbar-thumb-hover); box-shadow: 0 0 8px rgba(233, 30, 99, 0.25); }