/* themes.css Phase 3, Part 0: curated colour themes as sets of CSS custom properties applied at the document root via a data-theme attribute. The base palette tokens live in main.css :root (--navy, --gold, --cream, --amber, --sky, --forest, --near-black, --ink). A theme simply overrides those tokens. Reconcile rule: the chosen theme is AUTHORITATIVE. Selecting any explicit theme sets data-theme on and overrides the day/time mood skin. The "Auto, time of day" choice removes data-theme and instead sets data-mood, so the mood skin (below) drives the base palette. They never both apply: when data-theme is present the mood selectors do not match. Accessibility: the picker and the freeform accent path enforce a minimum contrast ratio (WCAG relative luminance) in js. The High Contrast theme here is tuned to a strong contrast for young children and grandparents. The accessibility quick settings (--font-scale, body.high-contrast) keep working alongside any theme. Theme swaps are instant under reduced motion. */ /* A gentle cross-fade of the background when a theme changes, disabled under reduced motion (see the media query and body.reduce-motion rule below). */ html[data-theme], html[data-mood] { transition: background-color 360ms ease; } /* ------------------------------------------------------------------ * * Norse Default. The baseline navy and gold look. Declared explicitly * so reselecting it after another theme restores the exact tokens * rather than relying on the main.css :root cascade alone. * ------------------------------------------------------------------ */ html[data-theme='norse'] { --navy: #0b1038; --near-black: #06080f; --gold: #e0bd55; --gold-bright: #ffe08a; --rune-red: #b22424; --amber: #ffae33; --sky: #5aa0ee; --forest: #36994a; --cream: #fdf6e3; --ink: #1c2233; } /* ------------------------------------------------------------------ * * Aurora. Green and purple northern-lights palette. * ------------------------------------------------------------------ */ html[data-theme='aurora'] { --navy: #10182e; --near-black: #080b16; --gold: #7ee0b8; --gold-bright: #b8f5dd; --rune-red: #b06bd6; --amber: #5ad6a0; --sky: #9b6bd6; --forest: #2f9b6b; --cream: #f2fbf6; --ink: #16223a; } /* ------------------------------------------------------------------ * * Deep Fjord. Blue and teal. * ------------------------------------------------------------------ */ html[data-theme='deep-fjord'] { --navy: #06243a; --near-black: #04141f; --gold: #5fd0d6; --gold-bright: #aef3f5; --rune-red: #1b6e88; --amber: #2ec4c9; --sky: #3a7fd9; --forest: #1f8f8a; --cream: #effaff; --ink: #0d2c3e; } /* ------------------------------------------------------------------ * * Sunset. Amber and red. * ------------------------------------------------------------------ */ html[data-theme='sunset'] { --navy: #3a1320; --near-black: #1f0a12; --gold: #ffcf6a; --gold-bright: #ffe6a8; --rune-red: #c0392b; --amber: #ff8c42; --sky: #e0633a; --forest: #c2552f; --cream: #fff4e6; --ink: #45161f; } /* ------------------------------------------------------------------ * * Midnight. Dark, high legibility. * ------------------------------------------------------------------ */ html[data-theme='midnight'] { --navy: #0b0d12; --near-black: #05060a; --gold: #e8d27a; --gold-bright: #fff0b0; --rune-red: #c75c5c; --amber: #ffd166; --sky: #6aa6ff; --forest: #4fbf8b; --cream: #f4f6fb; --ink: #11141c; } /* ------------------------------------------------------------------ * * Parchment. Light, cream. Dark ink on warm paper. * ------------------------------------------------------------------ */ html[data-theme='parchment'] { --navy: #f3e6c4; --near-black: #e2cf9c; --gold: #8a5a1a; --gold-bright: #6b4410; --rune-red: #8b1a1a; --amber: #c47a16; --sky: #275a8f; --forest: #2d7a2d; --cream: #3a2b10; --ink: #efe2bf; } /* ------------------------------------------------------------------ * * High Contrast. Strong contrast for young children and grandparents. * Near-black surfaces, bright yellow accents, pure-white text. Tuned * to comfortably exceed WCAG AA for normal text. * ------------------------------------------------------------------ */ html[data-theme='high-contrast'] { --navy: #000000; --near-black: #000000; --gold: #ffe600; --gold-bright: #ffffff; --rune-red: #ff5252; --amber: #ffe600; --sky: #4fc3ff; --forest: #2fe06b; --cream: #ffffff; --ink: #000000; } /* In High Contrast, thicken focus and key borders for clarity. */ html[data-theme='high-contrast'] .btn-amber, html[data-theme='high-contrast'] .btn-small, html[data-theme='high-contrast'] .menu-item { border: 2px solid var(--gold); } html[data-theme='high-contrast'] *:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* ------------------------------------------------------------------ * * LIGHT per-experience themes (the platform default for each pack). Each is a * light palette (paper backgrounds, dark text) tuned to its experience, mirroring * the contrast-safe parchment theme: --navy / --near-black are the light surfaces, * --cream is the dark primary text, --ink is the light-on-accent text. * ------------------------------------------------------------------ */ /* Fjordy Shore: a bright Nordic day. Cool blue paper, bold fjord-blue + gold. */ html[data-theme='fjordy-day'] { --navy: #eef3f8; --near-black: #dde8f1; --gold: #1f74c4; /* bold fjord blue is the signature accent */ --gold-bright: #15568f; --rune-red: #9a2b2b; --amber: #c47a16; --sky: #195e9e; --forest: #1f8a64; --cream: #14263a; --ink: #eef3f8; } /* Blind Tiger (New York): deco daylight. Warm cream, bold brass and ink-black. */ html[data-theme='deco-day'] { --navy: #f6efdf; --near-black: #ece0c4; --gold: #a87c0c; /* richer deco brass */ --gold-bright: #7e5c08; --rune-red: #a81e2f; --amber: #c2901a; --sky: #345987; --forest: #2f6b4f; --cream: #1d1709; --ink: #f6efdf; } /* The Last Citadel (Calafell): Iberian sun. Warm sand, bold terracotta and sea. */ html[data-theme='iberia-day'] { --navy: #f7eedb; --near-black: #eedfc2; --gold: #c2511f; /* vivid terracotta */ --gold-bright: #9c3d12; --rune-red: #a8341f; --amber: #d2730f; --sky: #19697f; --forest: #4f7a3a; --cream: #36210f; --ink: #f7eedb; } /* The Killing Time (Edinburgh): cool stone day. Pale stone, bold heather and slate. */ html[data-theme='oldtown-day'] { --navy: #eee9f0; --near-black: #ddd5e3; --gold: #6d3fa8; /* bolder heather purple */ --gold-bright: #52287f; --rune-red: #8a2740; --amber: #9a5a2a; --sky: #275880; --forest: #3f6b54; --cream: #221a2e; --ink: #eee9f0; } /* Light themes drop the dark top-glow so the page reads as clean daylight. */ html[data-theme='fjordy-day'], html[data-theme='deco-day'], html[data-theme='iberia-day'], html[data-theme='oldtown-day'], html[data-theme='platform-day'] { --bg-glow: transparent; --header-bg: rgba(255, 255, 255, 0.78); /* Muted body / note / label text. Hardcoded light blues in the dark themes are overridden to a readable dark grey on the light paper backgrounds. */ --muted: #5a5446; /* The header is light on the day themes, so the bright dark-header status colours wash out. Use darker green/red/amber that clear AA on a light header. */ --status-ok: #0a5226; --status-bad: #9e1810; --status-warn: #7a4a0c; } /* The platform's own identity: a bold, modern, premium light chrome for the TROLLS hub (storefront / landing / login). Distinct from every pack's themed adventure, with a confident emerald accent and crisp neutral surfaces. */ html[data-theme='platform-day'] { --navy: #eef2f6; /* page wash, top */ --near-black: #e6ecf2; /* page wash, bottom */ --gold: #0fa57a; /* platform accent: emerald */ --gold-bright: #0b8c66; --rune-red: #c2410c; --amber: #d97706; --sky: #1e4fbd; --forest: #0fa57a; --cream: #131a24; /* body text ink */ --ink: #ffffff; /* light card surface */ --muted: #57636f; --header-bg: rgba(255, 255, 255, 0.9); } /* ------------------------------------------------------------------ * * Auto, time of day (the mood skin). Only active when NO explicit theme * is chosen: js removes data-theme and sets data-mood = dawn | day | * dusk | night. Because data-theme is absent these selectors win the * base palette, so theme and mood never drive the palette at once. * ------------------------------------------------------------------ */ html:not([data-theme])[data-mood='dawn'] { --navy: #2a2140; --near-black: #161228; --gold: #ffcf8a; --amber: #ff9e6a; --sky: #7fa8e0; --cream: #fff3e6; } html:not([data-theme])[data-mood='day'] { /* Bright daytime: the cheerful default look. */ --navy: #12306a; --near-black: #0a1d44; --gold: #ffe08a; --amber: #f5a623; --sky: #4a90d9; --cream: #fdfaf2; } html:not([data-theme])[data-mood='dusk'] { --navy: #3a2150; --near-black: #1c1030; --gold: #ffce6a; --amber: #ff7e5f; --sky: #9b6bd6; --cream: #fdeede; } html:not([data-theme])[data-mood='night'] { --navy: #0a0e2e; --near-black: #06080f; --gold: #c9a84c; --amber: #6a86c9; --sky: #4a6bd9; --cream: #eef2fb; } /* The theme-picker swatch button and panel. */ .theme-swatch-btn { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.45); cursor: pointer; padding: 0; flex: 0 0 auto; /* A clean two-tone palette swatch (theme accent + secondary) rather than a four-quadrant pinwheel: clearly a colour control, not an avatar. */ background: linear-gradient(135deg, var(--gold) 0%, var(--gold) 48%, var(--sky) 52%, var(--sky) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; } .theme-card { display: flex; align-items: center; gap: 10px; min-height: var(--tap, 64px); padding: 10px; border-radius: 12px; border: 2px solid rgba(201, 168, 76, 0.45); background: rgba(255, 255, 255, 0.06); color: var(--cream); cursor: pointer; text-align: left; font-weight: 700; } .theme-card.chosen { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold); } .theme-card-dot { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, 0.3); } .theme-accent-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .theme-accent-dot { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0; } .theme-accent-dot.fails { opacity: 0.35; cursor: not-allowed; position: relative; } .theme-accent-dot.fails::after { content: '\00d7'; /* multiplication sign, not an em dash */ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; } /* Reduced motion: no animated theme transition, just an instant swap. */ @media (prefers-reduced-motion: reduce) { html[data-theme], html[data-mood] { transition: none; } } body.reduce-motion html[data-theme], html:has(body.reduce-motion)[data-theme], html:has(body.reduce-motion)[data-mood] { transition: none; }