@charset "UTF-8"; /* ============================================================================= themes.css — accessibility + appearance preferences --------------------------------------------------------------------------- Activated via data-* attributes on set by the server based on the visitor's cookie preferences. Cascade order: 1. main.css declares the brand defaults using --vars. 2. themes.css (this file) overrides the same vars for each theme + font-size + reduce-motion + underline-links + dyslexic-font value. 3. admin.css adds chrome-specific tokens that ALSO honour the same vars where it can. We avoid using !important except where the user's explicit choice MUST beat a hardcoded brand color (e.g. high-contrast wants pure black/white no matter what the merchant set as their accent). The CSS keeps the data-* selectors specific so authoring stays predictable. ============================================================================= */ /* ---- Base storefront tokens (so admin.css can also benefit) ---------------- */ :root { --c-bg: var(--nebula-base); --c-surface: #ffffff; --c-surface-soft: rgba(255, 255, 255, 0.65); --c-text: var(--text-primary); --c-text-muted: var(--text-muted); --c-border: var(--border); --c-link: var(--brand); --c-link-visited: var(--brand); --c-focus: var(--focus); --c-error: var(--danger); --c-success: var(--ok); /* Font size scale: applied as font-size on . The page already sizes everything in rem so this scales the whole UI uniformly, including form controls, buttons, navigation. */ --ui-font-size: 16px; } /* ---- Theme: auto (default) — react to OS prefers-color-scheme -------------- */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --c-bg: #14110d; --c-surface: #1f1a14; --c-surface-soft: rgba(31, 26, 20, 0.72); --c-text: #f5efe4; --c-text-muted: #b8ad99; --c-border: #3a3128; --glass-bg: rgba(31, 26, 20, 0.72); --glass-border: rgba(255, 255, 255, 0.06); --nebula-base: #14110d; --nebula-milky: rgba(31, 26, 20, 0.85); --nebula-warm: rgba(245, 166, 35, 0.04); --nebula-burnt: rgba(200, 71, 42, 0.03); --text-primary: #f5efe4; --text-muted: #b8ad99; --text-print-shadow: none; --border: #3a3128; } } /* ---- Theme: light (explicit, ignore OS) ------------------------------------ */ html[data-theme="light"] { --c-bg: #fffaf2; --c-surface: #ffffff; --c-surface-soft: rgba(255, 255, 255, 0.85); --c-text: #1f1b16; --c-text-muted: #6b6258; --c-border: #e5dccd; --nebula-base: #fffaf2; --text-primary: #1f1b16; --text-muted: #6b6258; --border: #e5dccd; --glass-bg: rgba(255, 255, 255, 0.85); } /* ---- Theme: dark (explicit) ------------------------------------------------ */ html[data-theme="dark"] { --c-bg: #14110d; --c-surface: #1f1a14; --c-surface-soft: rgba(31, 26, 20, 0.85); --c-text: #f5efe4; --c-text-muted: #b8ad99; --c-border: #3a3128; --glass-bg: rgba(31, 26, 20, 0.85); --glass-border: rgba(255, 255, 255, 0.06); --nebula-base: #14110d; --nebula-milky: rgba(31, 26, 20, 0.9); --nebula-warm: rgba(245, 166, 35, 0.04); --nebula-burnt: rgba(200, 71, 42, 0.03); --text-primary: #f5efe4; --text-muted: #b8ad99; --text-print-shadow: none; --border: #3a3128; } /* ---- Theme: high-contrast LIGHT (pure black on pure white) ----------------- */ /* WCAG AAA contrast (21:1). Removes shadows, gradients, glass effects. */ html[data-theme="hc-light"] { --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-soft: #ffffff; --c-text: #000000; --c-text-muted: #000000; --c-border: #000000; --c-link: #0000ee; --c-link-visited: #551a8b; --c-focus: #0000ee; --c-error: #b00020; --c-success: #006400; --glass-bg: #ffffff; --glass-border: #000000; --glass-shadow: none; --nebula-base: #ffffff; --nebula-milky: #ffffff; --nebula-warm: transparent; --nebula-burnt: transparent; --text-primary: #000000; --text-muted: #000000; --text-print-shadow: none; --border: #000000; --brand: #0000ee; --brand-light: #0000ee; --brand-amber: #0000ee; --focus: #0000ee; } html[data-theme="hc-light"] body { background: #ffffff; } html[data-theme="hc-light"] body::after { display: none; } html[data-theme="hc-light"] *, html[data-theme="hc-light"] *::before, html[data-theme="hc-light"] *::after { text-shadow: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* ---- Theme: high-contrast DARK (pure white on pure black) ------------------ */ html[data-theme="hc-dark"] { --c-bg: #000000; --c-surface: #000000; --c-surface-soft: #000000; --c-text: #ffffff; --c-text-muted: #ffffff; --c-border: #ffffff; --c-link: #ffff00; --c-link-visited: #ffff00; --c-focus: #ffff00; --c-error: #ff6b6b; --c-success: #51cf66; --glass-bg: #000000; --glass-border: #ffffff; --glass-shadow: none; --nebula-base: #000000; --nebula-milky: #000000; --nebula-warm: transparent; --nebula-burnt: transparent; --text-primary: #ffffff; --text-muted: #ffffff; --text-print-shadow: none; --border: #ffffff; --brand: #ffff00; --brand-light: #ffff00; --brand-amber: #ffff00; --focus: #ffff00; } html[data-theme="hc-dark"] body { background: #000000; color: #ffffff; } html[data-theme="hc-dark"] body::after { display: none; } html[data-theme="hc-dark"] *, html[data-theme="hc-dark"] *::before, html[data-theme="hc-dark"] *::after { text-shadow: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* ---- Theme: sepia (warm tinted, easier on the eyes for long reading) ------- */ html[data-theme="sepia"] { --c-bg: #f4ecd8; --c-surface: #faf3e0; --c-surface-soft: #faf3e0; --c-text: #3b2f1e; --c-text-muted: #6f5b3a; --c-border: #d6c39b; --c-link: #8a4b1e; --c-link-visited: #6b3d1a; --c-focus: #8a4b1e; --nebula-base: #f4ecd8; --nebula-milky: #faf3e0; --text-primary: #3b2f1e; --text-muted: #6f5b3a; --border: #d6c39b; --brand: #8a4b1e; --brand-light: #b97443; --focus: #8a4b1e; --glass-bg: #faf3e0; --glass-border: #d6c39b; } /* ---- Font-size scale ------------------------------------------------------- */ html[data-font-size="small"] { font-size: 14.5px; } html[data-font-size="medium"] { font-size: 16px; } html[data-font-size="large"] { font-size: 18.5px; } html[data-font-size="xlarge"] { font-size: 21px; } /* ---- Reduce motion (explicit override) ------------------------------------- */ html[data-reduce-motion="on"] *, html[data-reduce-motion="on"] *::before, html[data-reduce-motion="on"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; transform: none !important; } /* "auto" also reduces motion when the OS asks for it. */ @media (prefers-reduced-motion: reduce) { html[data-reduce-motion="auto"] *, html[data-reduce-motion="auto"] *::before, html[data-reduce-motion="auto"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Always-underline links (for low vision) ------------------------------- */ html[data-underline-links="on"] a:not(.btn):not(.brand):not(.admin-brand) { text-decoration: underline !important; text-underline-offset: 0.18em; } /* ---- Strong focus indicator ------------------------------------------------ */ html[data-highlight-focus="strong"] :focus-visible { outline: 4px solid var(--c-focus) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.25) !important; border-radius: 4px; } /* ---- Dyslexic-friendly typography (wider tracking, taller line) ------------ */ /* We can't bundle OpenDyslexic for licence reasons, but we CAN apply spacing guidance from BDA: extra letter-spacing, taller line-height, slightly heavier weight, sans-serif only. */ html[data-dyslexic-font="on"] body { font-family: "Estedad", "Geist", "Atkinson Hyperlegible", "Verdana", "Tahoma", sans-serif !important; letter-spacing: 0.035em !important; word-spacing: 0.12em !important; line-height: 2 !important; } html[data-dyslexic-font="on"] p, html[data-dyslexic-font="on"] li, html[data-dyslexic-font="on"] td { max-width: 70ch; } /* ---- Preferences page presentation ----------------------------------------- */ .prefs-page { max-width: 760px; margin-inline: auto; padding: 16px; } .prefs-page .page-head { margin-bottom: 16px; } .prefs-page .breadcrumbs { margin: 0 0 8px; font-size: .9rem; } .prefs-page .lead { margin-top: 8px; } .prefs-form { display: flex; flex-direction: column; gap: 20px; } .prefs-group { border: 1px solid var(--c-border, #e5dccd); border-radius: 10px; padding: 14px 18px 18px; background: var(--c-surface, #fff); } .prefs-group legend { font-weight: 700; padding: 0 6px; font-size: 1.05rem; } .prefs-help { color: var(--c-text-muted, #6b6258); margin: 4px 0 12px; font-size: .95rem; } .prefs-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .prefs-options label { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; } .prefs-options label:hover { background: rgba(0, 0, 0, 0.03); } .prefs-options label:has(input:checked) { border-color: var(--c-focus, var(--brand)); background: rgba(200, 71, 42, 0.05); } .prefs-options input[type="radio"] { grid-row: 1 / span 2; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--c-focus, var(--brand)); } .prefs-option-label { font-weight: 600; } .prefs-option-help { color: var(--c-text-muted, #6b6258); font-size: .9rem; } .prefs-form .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } /* Make sure preferences page itself stays usable in every theme */ html[data-theme="hc-light"] .prefs-options label:has(input:checked), html[data-theme="hc-dark"] .prefs-options label:has(input:checked) { background: transparent; border-color: var(--c-focus); outline: 2px solid var(--c-focus); } html[data-theme="hc-dark"] .prefs-options label:hover { background: #222; } /* ---- Body / surface bridging — make existing utility classes adopt theme --- */ html[data-theme="hc-light"] body, html[data-theme="hc-dark"] body, html[data-theme="dark"] body, html[data-theme="sepia"] body { background: var(--c-bg); color: var(--c-text); background-image: none; } html[data-theme="dark"] .product-card, html[data-theme="sepia"] .product-card { background: var(--c-surface); border-color: var(--c-border); } html[data-theme="dark"] .site-header, html[data-theme="sepia"] .site-header { background: var(--c-surface-soft); border-bottom-color: var(--c-border); } /* ---- Admin panel theme bridge ---------------------------------------------- */ html[data-theme="dark"] .admin-body, html[data-theme="hc-dark"] .admin-body { background: var(--c-bg); color: var(--c-text); } html[data-theme="hc-light"] .admin-body { background: #ffffff; color: #000000; } html[data-theme="sepia"] .admin-body { background: #f4ecd8; color: #3b2f1e; } html[data-theme="hc-light"] .admin-header, html[data-theme="hc-dark"] .admin-header { background: var(--c-bg); color: var(--c-text); border-bottom: 3px solid var(--c-focus); } html[data-theme="hc-light"] .admin-header *, html[data-theme="hc-dark"] .admin-header * { color: var(--c-text) !important; } html[data-theme="hc-light"] .admin-topnav a, html[data-theme="hc-dark"] .admin-topnav a { color: var(--c-text); text-decoration: underline; } html[data-theme="dark"] .admin-header { background: #0b0908; color: #f5efe4; } html[data-theme="dark"] .admin-topnav a { color: #f5efe4; } /* ---- Visible focus on radio labels themselves (keyboard users) ------------- */ .prefs-options label:focus-within { outline: 3px solid var(--c-focus, var(--brand)); outline-offset: 2px; }