/* ═══════════════════════════════════════════════════════════════════════ STUFF CURIOUS — LIGHT / DARK MODE Load LAST (after every other stylesheet) so these token overrides win. Strategy: - Dark is the DEFAULT (tokens already defined in style.css / patches). - Light mode applies when EITHER: (a) the OS prefers light AND the user hasn't manually chosen, OR (b) the user manually selects light via the toggle → - Manual choice always wins over OS preference, handled by data-theme. The JS sets data-theme="light" or data-theme="dark" on when the user toggles. When NO data-theme is set, we fall back to the OS media query. ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── LIGHT PALETTE — applied two ways below ───────────────────────────────────────────────────────────────────────── */ :root { /* Smooth the switch */ --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Define the light token set once, reuse for both triggers */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { /* Backgrounds — flat near-white, NO gradient per request */ --bg-primary: #faf9fc; --bg-surface: #f2f0f7; --bg-card: #ffffff; --bg-card-hover: #f7f5fb; --bg-raised: #efedf5; /* Text — dark ink on light */ --text-primary: #1a1626; --text-secondary: #3d3654; --text-faint: #6f6890; /* Borders */ --border-color: #e2def0; --border-light: #ebe8f4; /* Accent purple — darkened slightly for contrast on white */ --accent-purple: #7c4ddb; --accent-purple-dark: #6437c0; --accent-violet: #6d2f92; } } /* Manual override: user explicitly chose light */ :root[data-theme="light"] { --bg-primary: #faf9fc; --bg-surface: #f2f0f7; --bg-card: #ffffff; --bg-card-hover: #f7f5fb; --bg-raised: #efedf5; --text-primary: #1a1626; --text-secondary: #3d3654; --text-faint: #6f6890; --border-color: #e2def0; --border-light: #ebe8f4; --accent-purple: #7c4ddb; --accent-purple-dark: #6437c0; --accent-violet: #6d2f92; } /* ───────────────────────────────────────────────────────────────────────── COMPONENT FIXES FOR LIGHT MODE These target the hardcoded dark values that CSS variables don't cover. Scoped to both the OS-light and manual-light conditions. ───────────────────────────────────────────────────────────────────────── */ /* Shared selector groups via a helper: we repeat for both triggers. (CSS can't alias selector lists, so each rule block is written for the manual [data-theme="light"] AND the media-query fallback.) */ /* ── Body: kill the gradient, use flat background ─────────────────────── */ :root[data-theme="light"] body { background-color: var(--bg-primary); background-image: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body { background-color: var(--bg-primary); background-image: none; } } /* ── Header: light frosted bar ────────────────────────────────────────── */ :root[data-theme="light"] .site-header { background-color: rgba(250, 249, 252, 0.9); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .site-header { background-color: rgba(250, 249, 252, 0.9); } } /* ── Ticker: soften on light ──────────────────────────────────────────── */ :root[data-theme="light"] .site-ticker { background: rgba(124, 77, 219, 0.06); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .site-ticker { background: rgba(124, 77, 219, 0.06); } } /* ── Images: remove the dark-mode grayscale dimming in light mode ─────── */ :root[data-theme="light"] .post-card-thumb img, :root[data-theme="light"] .hero-card-thumb img, :root[data-theme="light"] .recipe-card__thumb img, :root[data-theme="light"] .post-featured-image img, :root[data-theme="light"] .recipe-hero-image img { filter: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .post-card-thumb img, :root:not([data-theme="dark"]) .hero-card-thumb img, :root:not([data-theme="dark"]) .recipe-card__thumb img, :root:not([data-theme="dark"]) .post-featured-image img, :root:not([data-theme="dark"]) .recipe-hero-image img { filter: none; } } /* ── Card shadows: softer, cooler on light ────────────────────────────── */ :root[data-theme="light"] .post-card, :root[data-theme="light"] .hero-card, :root[data-theme="light"] .recipe-card { box-shadow: 0 4px 20px rgba(60, 54, 84, 0.08); } :root[data-theme="light"] .post-card:hover, :root[data-theme="light"] .hero-card:hover, :root[data-theme="light"] .recipe-card:hover { box-shadow: 0 12px 40px rgba(124, 77, 219, 0.14); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .post-card, :root:not([data-theme="dark"]) .hero-card, :root:not([data-theme="dark"]) .recipe-card { box-shadow: 0 4px 20px rgba(60, 54, 84, 0.08); } :root:not([data-theme="dark"]) .post-card:hover, :root:not([data-theme="dark"]) .hero-card:hover, :root:not([data-theme="dark"]) .recipe-card:hover { box-shadow: 0 12px 40px rgba(124, 77, 219, 0.14); } } /* ── Buttons keep white text on purple (already fine), but shadow softens ─ */ :root[data-theme="light"] .hero-cta, :root[data-theme="light"] .newsletter-form button, :root[data-theme="light"] .sc-modal-btn { box-shadow: 0 4px 14px rgba(124, 77, 219, 0.3); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero-cta, :root:not([data-theme="dark"]) .newsletter-form button, :root:not([data-theme="dark"]) .sc-modal-btn { box-shadow: 0 4px 14px rgba(124, 77, 219, 0.3); } } /* ── Recipe header: was dark surface, use tinted light surface ────────── */ :root[data-theme="light"] .recipe-header, :root[data-theme="light"] .recipe-archive-hero { background: var(--bg-surface); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .recipe-header, :root:not([data-theme="dark"]) .recipe-archive-hero { background: var(--bg-surface); } } /* ── Strong text override from readability.css was near-white; fix it ──── */ :root[data-theme="light"] .post-content strong, :root[data-theme="light"] .recipe-steps__content strong { color: #100c1c; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .post-content strong, :root:not([data-theme="dark"]) .recipe-steps__content strong { color: #100c1c; } } /* ── Modal / overlay: lighten the scrim so it's not jarringly black ───── */ :root[data-theme="light"] #sc-modal-overlay { background: rgba(40, 32, 60, 0.45); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #sc-modal-overlay { background: rgba(40, 32, 60, 0.45); } } /* ── Code blocks: light-friendly ──────────────────────────────────────── */ :root[data-theme="light"] .post-content code, :root[data-theme="light"] .recipe-steps__content code { background: #f0edf8; color: #6437c0; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .post-content code, :root:not([data-theme="dark"]) .recipe-steps__content code { background: #f0edf8; color: #6437c0; } } /* ───────────────────────────────────────────────────────────────────────── SMOOTH TRANSITIONS when toggling ───────────────────────────────────────────────────────────────────────── */ body, .site-header, .site-ticker, .post-card, .hero-card, .recipe-card, .recipe-header, .newsletter-section, .site-footer, .sc-modal { transition: var(--theme-transition); } /* ───────────────────────────────────────────────────────────────────────── THEME TOGGLE BUTTON ───────────────────────────────────────────────────────────────────────── */ .theme-toggle { background: none; border: 1px solid var(--border-light); border-radius: var(--radius-pill); cursor: pointer; color: var(--text-secondary); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all 0.15s; flex-shrink: 0; } .theme-toggle:hover { color: var(--accent-purple); border-color: var(--accent-purple); background: rgba(139, 93, 246, 0.08); } .theme-toggle svg { width: 17px; height: 17px; } /* Show sun in dark mode (click → go light), moon in light mode (click → go dark) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; } }