/* ==================================================================== Sonimarto colour modes (themes) -------------------------------------------------------------------- Modes: light (default) | dark | auto (OS -> light/dark) | sepia | contrast How it works: - A tiny inline bootstrap in each page's reads localStorage key "simo_theme" and sets BEFORE first paint (auto resolves via prefers-color-scheme). - theme.js re-paints, keeps "auto" live-followed via matchMedia and exposes window.SonimartoTheme.apply(mode). - Every page stylesheet re-declares the same token names on :root (specificity 0,1,0). These blocks use html[data-theme=...] (specificity 0,1,1), so they win regardless of load order. - Radii / fonts are shared and theme-independent: never override here. ==================================================================== */ /* ---------- LIGHT (default palette = existing :root values) ---------- */ html[data-theme="light"] { color-scheme: light; /* extended tokens (used with in-place fallbacks by swept stylesheets). The page/surface wash sits a touch deeper than pure white so white cards (product/brand/listings/compare) read as cards instead of melting into the background. */ --surface-alt: #f2f5fa; --bg-page: #eef1f7; --premium-bg: #edf1f8; --overlay: rgba(255, 255, 255, 0.96); --overlay-glass: rgba(255, 255, 255, 0.7); --danger-soft: #fdecec; /* card outlines: a hair stronger than the page defaults */ --premium-border: #dfe6f2; --premium-border-soft: #e9eef7; /* compare page: table cell surface + differing-value highlight */ --compare-cell-bg: #ffffff; --diff-highlight: rgba(19, 88, 255, 0.06); --diff-highlight-ring: rgba(19, 88, 255, 0.14); /* results-card deal strip */ --deal-grad-top: #f4f8ff; --deal-border-hover: #bfd1ff; /* product/brand card elevation + edge vignette (inset shadow follows the card's rounded corners exactly). The ambient layer carries a NEGATIVE spread so the shadow silhouette hugs the card's corners instead of reading as a rounder blob behind it. */ --card-shadow: 0 2px 6px rgba(15, 23, 42, 0.07), 0 18px 40px -12px rgba(15, 23, 42, 0.13); --card-edge: inset 0 0 22px -10px rgba(71, 85, 105, 0.35); /* generic card token shared by results/history/profile/index pages */ --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.07), 0 18px 40px -12px rgba(15, 23, 42, 0.13); /* premium shadow fallbacks used directly by brand/compare cards */ --premium-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.07); --premium-shadow: 0 16px 42px -10px rgba(15, 23, 42, 0.12); } /* -------------------- LIGHT EXTRAS -------------------- */ /* The compare pages hardcode tiny card shadows — lift them in light mode so the white cards separate from the tinted page. */ html[data-theme="light"] .compare-sidebar-top, html[data-theme="light"] .compare-products-card { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 14px 30px -8px rgba(15, 23, 42, 0.10); } /* ------------------------------- DARK ------------------------------- */ html[data-theme="dark"] { color-scheme: dark; /* brand accent (brightened for dark surfaces) */ --primary: #4d8dff; --primary-light: #6da2ff; --primary-dark: #3b79f2; --primary-very-light: #5f97ff; --primary-bg: #16233d; /* text (brightened for comfortable reading on dark surfaces) */ --text-dark: #f2f5fb; --text-mid: #d3dceb; --text-light: #aebad2; --text-muted: #8794b0; /* lines & surfaces — page wash pulled toward black so the dark navy cards read as cards (mirror of the light theme's step off white) */ --border: #2c3b60; --border-strong: #314063; --bg-white: #161d31; --bg-page: #070b16; --card-bg: #161d31; --primary-soft: #1b2a4a; --primary-soft-border: #2d4068; --image-panel: #1d2438; --search-bg: #171e33; /* semantics */ --success: #45d07c; --success-bg: #0e2e1d; --danger: #ff6274; --surface-alt: #171e30; --overlay: rgba(13, 17, 31, 0.96); --overlay-glass: rgba(13, 17, 31, 0.72); --danger-soft: #3a1a24; /* compare page: table cell surface + differing-value highlight */ --compare-cell-bg: #111829; --diff-highlight: rgba(77, 141, 255, 0.12); --diff-highlight-ring: rgba(77, 141, 255, 0.28); /* results-card deal strip */ --deal-grad-top: #1e2f52; --deal-border-hover: #4d8dff; /* premium family (product / brand / legal) */ --premium-bg: #0e1424; --premium-card: #161d31; --premium-border: #263250; --premium-border-soft: #202b45; --premium-blue: #4d8dff; --premium-blue-soft: #1b2a4a; --premium-green: #45d07c; --premium-green-soft: #0e2e1d; --premium-red: #ff6274; --premium-shadow: 0 16px 42px -10px rgba(0, 0, 0, 0.6); --premium-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.45); /* product/brand card elevation + edge vignette — ambient layer negative spread so the silhouette hugs the card's corners (as in light) */ --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 18px 44px -12px rgba(0, 0, 0, 0.6); --card-edge: inset 0 0 22px -10px rgba(0, 0, 0, 0.7); /* auth modal family */ --auth-ink: #edf1f9; --auth-text: #c5cede; --auth-muted: #94a2bc; --auth-soft: #161d31; --auth-border: #263250; --auth-blue: #4d8dff; --auth-blue-hover: #6da2ff; /* support centre family */ --support-bg: #0c111f; --support-card: #161d31; --support-border: #263250; --support-primary: #4d8dff; --support-primary-50: #16233d; --support-primary-100: #1b2a4a; --support-text-900: #edf1f9; --support-text-700: #c5cede; --support-text-500: #94a2bc; --support-text-400: #6d7a93; --support-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35); --support-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.45); /* elevation */ --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.2), 0 10px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45); --shadow-card: 0 8px 18px rgba(0, 0, 0, 0.45); } /* ------------------------------- SEPIA ------------------------------ */ html[data-theme="sepia"] { color-scheme: light; /* warm amber accent (white text on it stays >= 4.5:1) */ --primary: #9a5326; --primary-light: #b06636; --primary-dark: #7f451d; --primary-very-light: #b06636; --primary-bg: #f2e7d3; /* warm grey-brown text */ --text-dark: #3f3226; --text-mid: #5a4b3c; --text-light: #86755f; --text-muted: #a2907a; /* warm paper surfaces */ --border: #e0d3ba; --border-strong: #d2c2a4; --bg-white: #fbf5e9; --bg-page: #f0e7d5; --card-bg: #fbf5e9; --primary-soft: #f4e6cd; --primary-soft-border: #e2cda4; --image-panel: #ece1cb; --search-bg: #f0e7d5; /* semantics */ --success: #3f7d4e; --success-bg: #e5eedd; --danger: #b0453b; --surface-alt: #f3ead9; --overlay: rgba(251, 245, 233, 0.96); --overlay-glass: rgba(240, 231, 213, 0.72); --danger-soft: #f3ddd7; /* compare page: table cell surface + differing-value highlight */ --compare-cell-bg: #f5edd9; --diff-highlight: rgba(87, 62, 26, 0.08); --diff-highlight-ring: rgba(87, 62, 26, 0.18); /* results-card deal strip */ --deal-grad-top: #f7eeda; --deal-border-hover: #d9b071; /* premium family */ --premium-bg: #f0e7d5; --premium-card: #fbf5e9; --premium-border: #e0d3ba; --premium-border-soft: #e8ddc6; --premium-blue: #9a5326; --premium-blue-soft: #f4e6cd; --premium-green: #3f7d4e; --premium-green-soft: #e5eedd; --premium-red: #b0453b; --premium-shadow: 0 16px 42px rgba(87, 62, 30, 0.12); --premium-shadow-soft: 0 8px 22px rgba(87, 62, 30, 0.09); /* product/brand cards stay flat in sepia (no edge vignette, original shadow) */ --card-shadow: 0 8px 22px rgba(87, 62, 30, 0.09); --card-edge: inset 0 0 0 0 rgba(0, 0, 0, 0); /* auth modal family */ --auth-ink: #3f3226; --auth-text: #5a4b3c; --auth-muted: #86755f; --auth-soft: #f6efe1; --auth-border: #e0d3ba; --auth-blue: #9a5326; --auth-blue-hover: #8c4e24; /* support centre family */ --support-bg: #f0e7d5; --support-card: #fbf5e9; --support-border: #e0d3ba; --support-primary: #9a5326; --support-primary-50: #f2e7d3; --support-primary-100: #e9d8ba; --support-text-900: #3f3226; --support-text-700: #5a4b3c; --support-text-500: #86755f; --support-text-400: #a2907a; --support-shadow: 0 1px 3px rgba(87, 62, 30, 0.06), 0 4px 16px rgba(87, 62, 30, 0.06); --support-shadow-lg: 0 1px 3px rgba(87, 62, 30, 0.06), 0 8px 32px rgba(87, 62, 30, 0.1); /* elevation */ --shadow-nav: 0 1px 0 rgba(87, 62, 30, 0.04), 0 10px 24px rgba(87, 62, 30, 0.08); --shadow-sm: 0 2px 8px rgba(87, 62, 30, 0.08); --shadow-md: 0 12px 30px rgba(87, 62, 30, 0.12); --shadow-card: 0 8px 18px rgba(87, 62, 30, 0.1); } /* --------------------------- HIGH CONTRAST -------------------------- */ html[data-theme="contrast"] { color-scheme: light; /* accessible blue accent (7.6:1 on white) */ --primary: #0043ce; --primary-light: #0050e6; --primary-dark: #0034a0; --primary-very-light: #2a63dd; --primary-bg: #d9e6ff; /* maximum-contrast text */ --text-dark: #000000; --text-mid: #111111; --text-light: #3d3d3d; --text-muted: #595959; /* strong lines, pure surfaces */ --border: #6f6f6f; --border-strong: #3d3d3d; --bg-white: #ffffff; --bg-page: #ffffff; --card-bg: #ffffff; --primary-soft: #d9e6ff; --primary-soft-border: #0043ce; --image-panel: #ececec; --search-bg: #ffffff; /* semantics */ --success: #067d48; --success-bg: #e2f3e8; --danger: #c11f36; --surface-alt: #f2f2f2; --overlay: rgba(255, 255, 255, 0.96); --overlay-glass: rgba(255, 255, 255, 0.9); --danger-soft: #f6d8dc; /* compare page: table cell surface + differing-value highlight */ --compare-cell-bg: #ffffff; --diff-highlight: rgba(0, 67, 206, 0.14); --diff-highlight-ring: rgba(0, 67, 206, 0.4); /* results-card deal strip */ --deal-grad-top: #e6efff; --deal-border-hover: #0043ce; /* premium family */ --premium-bg: #ffffff; --premium-card: #ffffff; --premium-border: #3d3d3d; --premium-border-soft: #6f6f6f; --premium-blue: #0043ce; --premium-blue-soft: #d9e6ff; --premium-green: #067d48; --premium-green-soft: #e2f3e8; --premium-red: #c11f36; --premium-shadow: 0 16px 42px -10px rgba(0, 0, 0, 0.12); --premium-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.07); /* auth modal family */ --auth-ink: #000000; --auth-text: #111111; --auth-muted: #3d3d3d; --auth-soft: #ffffff; --auth-border: #3d3d3d; --auth-blue: #0043ce; --auth-blue-hover: #0034a0; /* support centre family */ --support-bg: #ffffff; --support-card: #ffffff; --support-border: #3d3d3d; --support-primary: #0043ce; --support-primary-50: #d9e6ff; --support-primary-100: #b8cffb; --support-text-900: #000000; --support-text-700: #111111; --support-text-500: #3d3d3d; --support-text-400: #595959; --support-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15); --support-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.2); --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.1), 0 10px 24px rgba(0, 0, 0, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.16); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.2); --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.07), 0 18px 40px -12px rgba(0, 0, 0, 0.13); /* product/brand card elevation + edge vignette — same depth as the light theme (black shadows on white); colours stay untouched, borders still carry the contrast */ --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.07), 0 18px 40px -12px rgba(0, 0, 0, 0.13); --card-edge: inset 0 0 22px -10px rgba(0, 0, 0, 0.35); } /* -------------------- HIGH CONTRAST EXTRAS -------------------- */ /* Thicker visible focus ring for keyboard users */ html[data-theme="contrast"] :focus-visible { outline: 3px solid #0043ce !important; outline-offset: 2px; } /* Compare pages' hardcoded tiny card shadows get the same lift as light, using pure black (no palette change). */ html[data-theme="contrast"] .compare-sidebar-top, html[data-theme="contrast"] .compare-products-card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 30px -8px rgba(0, 0, 0, 0.10); } /* ------------------------- DARK EXTRAS ------------------------- */ /* The blue logo PNG is near-invisible on dark chrome — flip it to white in the navbar and footer. */ html[data-theme="dark"] .nav-logo-link img, html[data-theme="dark"] .site-footer-logo img { filter: brightness(0) invert(1); opacity: 0.95; } /* The compare pages hardcode tiny card shadows — lift them in dark mode too (now that the page is blacker, they need real elevation). */ html[data-theme="dark"] .compare-sidebar-top, html[data-theme="dark"] .compare-products-card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 30px -8px rgba(0, 0, 0, 0.55); } /* ---------------------- SWITCH TRANSITION ---------------------- */ /* Applied temporarily by theme.js so switching feels smooth without animating the initial pre-paint bootstrap. */ html.theme-switching body { transition: background-color 0.22s ease, color 0.22s ease; } html.theme-switching .navbar { transition: background-color 0.22s ease, border-color 0.22s ease; }