/* ============================================================================ OakTree Games — Theme System Four themes triggered via data-theme on . Persisted to localStorage. ============================================================================ */ /* --- Default theme is "cosmic" (defined in main.css :root) --- */ /* --- FOREST: deep canopy green, lush + warm gold accents --- */ html[data-theme="forest"] { --bg-void: #060d09; --bg-deep: #0b1611; --bg-panel: #11241a; --bg-panel-hi: #173427; --bg-elev: #1d422f; --text-pri: #eaf3eb; --text-sec: #a7c4ad; --text-mute: #647d6a; --accent-oak: #8bd49b; --accent-cosmic: #f6d27a; --accent-aurora: #66d9b3; --accent-rose: #ffa3b9; /* softer rose against green */ --accent-amber: #ffcf72; --line-faint: rgba(139,212,155,0.18); --line-soft: rgba(139,212,155,0.32); --line-strong: rgba(139,212,155,0.55); --glow-oak: 0 0 26px rgba(139, 212, 155, 0.45); --glow-cosm: 0 0 34px rgba(246, 210, 122, 0.42); } /* Forest-specific surface accents — softer gradient nav, leafy borders */ html[data-theme="forest"] .nav { background: rgba(11, 22, 17, 0.82); } html[data-theme="forest"] .nav.scrolled { background: rgba(11, 22, 17, 0.96); } html[data-theme="forest"] .panel, html[data-theme="forest"] .feature-card, html[data-theme="forest"] .entity-card, html[data-theme="forest"] .donate-tier { border-color: rgba(139,212,155,0.22); } html[data-theme="forest"] .btn-gold { background: linear-gradient(135deg, var(--accent-oak), var(--accent-cosmic)); color: var(--bg-void) !important; } /* --- VOLCANIC: scorched red/black, molten gold + ember orange --- */ html[data-theme="volcanic"] { --bg-void: #0d0604; --bg-deep: #1a0907; --bg-panel: #28110b; --bg-panel-hi: #381810; --bg-elev: #4a1f15; --text-pri: #fbeae3; --text-sec: #d4a89c; --text-mute: #846257; --accent-oak: #ff8552; /* "oak" reassigned to ember orange */ --accent-oak-d: #c45225; --accent-cosmic: #ffd86b; --accent-aurora: #ff6b6b; --accent-rose: #ff4e6b; --accent-violet: #ff7fb0; --accent-amber: #ffa845; --line-faint: rgba(255,133,82,0.22); --line-soft: rgba(255,133,82,0.42); --line-strong: rgba(255,133,82,0.65); --glow-oak: 0 0 28px rgba(255, 133, 82, 0.55); --glow-cosm: 0 0 36px rgba(255, 216, 107, 0.45); } html[data-theme="volcanic"] .nav { background: rgba(13, 6, 4, 0.84); border-bottom-color: rgba(255,133,82,0.22); } html[data-theme="volcanic"] .nav.scrolled { background: rgba(13, 6, 4, 0.96); } html[data-theme="volcanic"] .btn-gold { background: linear-gradient(135deg, #ff8552 0%, #ffd86b 100%); color: var(--bg-void) !important; } html[data-theme="volcanic"] .scroll-progress { background: linear-gradient(90deg, #ff4e6b, #ff8552, #ffd86b); } html[data-theme="volcanic"] .cosmos { background: radial-gradient(ellipse at 25% 15%, rgba(255,133,82,0.12), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(255,107,107,0.14), transparent 55%), radial-gradient(ellipse at 50% 95%, rgba(255,216,107,0.06), transparent 60%), linear-gradient(180deg, #0d0604 0%, #1a0907 60%, #0d0604 100%); } /* --- LIGHT: parchment / daylight (for accessibility) --- */ html[data-theme="light"] { --bg-void: #f3f1ea; --bg-deep: #e9e5d8; --bg-panel: #f7f5ee; --bg-panel-hi: #fffdf6; --bg-elev: #ffffff; --text-pri: #15201a; --text-sec: #3a4a3f; --text-mute: #6a7a6e; --accent-oak: #2f7a3d; --accent-oak-d: #1f5828; --accent-cosmic: #b5860f; --accent-aurora: #1d8b73; --accent-rose: #c43050; --line-faint: rgba(15,32,22,0.12); --line-soft: rgba(15,32,22,0.24); --line-strong: rgba(15,32,22,0.42); --shadow-pixel-sm: 0 2px 0 0 rgba(0,0,0,0.10); --shadow-pixel-md: 0 4px 0 0 rgba(0,0,0,0.14); --shadow-pixel-lg: 0 8px 0 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(15,32,22,0.18); } /* DO NOT set background on body for any theme — body MUST remain transparent so the canvas backdrop at z-index:-1 is visible. The html element paints --bg-void per-theme; that's enough. */ html[data-theme="light"] .cosmos { background: radial-gradient(ellipse at 25% 15%, rgba(47,122,61,0.10), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(181,134,15,0.08), transparent 55%), linear-gradient(180deg, #f3f1ea 0%, #e9e5d8 60%, #f3f1ea 100%); } html[data-theme="light"] .cosmos::before, html[data-theme="light"] .cosmos::after { display: none; } html[data-theme="light"] .nav { background: rgba(247, 245, 238, 0.84); } html[data-theme="light"] .nav.scrolled { background: rgba(247, 245, 238, 0.96); } html[data-theme="light"] ::selection { background: var(--accent-oak); color: #fff; } html[data-theme="light"] .nav-cta { color: #fff !important; } html[data-theme="light"] .btn { color: #fff !important; } html[data-theme="light"] .btn-gold { color: #fff !important; } html[data-theme="light"] .btn-ghost { color: var(--text-pri) !important; } html[data-theme="light"] .hero-corner-emblem { border-color: var(--bg-void); } /* All themes — smooth color transitions when switching */ html[data-theme] body, html[data-theme] .nav, html[data-theme] .panel, html[data-theme] .feature-card, html[data-theme] .entity-card, html[data-theme] .donate-tier, html[data-theme] .tier-card { transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease; } /* ============================================================================ FONT SIZE CONTROL (Settings panel) ---------------------------------------------------------------------------- Body font-size was hard-coded at 19px so changing `html { font-size }` used to be a no-op for paragraphs. Now the body multiplies a CSS variable that the settings UI flips, and key text-heavy elements (h1, h2, h3, p, li, dt, dd, summary) all scale together. Headers using pixel fonts at tiny px sizes are left alone — they'd become illegible at xlarge. ============================================================================ */ :root { --font-scale: 1; } html[data-font="small"] { --font-scale: 0.85; } html[data-font="medium"] { --font-scale: 1; } html[data-font="large"] { --font-scale: 1.18; } html[data-font="xlarge"] { --font-scale: 1.36; } /* The body font-size is bumped via the multiplier so paragraphs, list items, dt/dd, and any element that doesn't pin a px size all scale together with the Settings → Text Size buttons. Elements that hard-pin their size (the giant hero headline, pixel chips, etc.) stay anchored to their design size on purpose. */ body { font-size: calc(19px * var(--font-scale)) !important; } /* ============================================================================ REDUCED MOTION (Settings panel — overrides prefers-reduced-motion) ============================================================================ */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-delay: 0.001ms !important; transition-duration: 0.001ms !important; } html[data-motion="reduced"] .cosmos::before, html[data-motion="reduced"] .cosmos::after { animation: none !important; } /* ============================================================================ HIGH CONTRAST ============================================================================ */ html[data-contrast="high"] { --text-pri: #ffffff; --text-sec: #e0e6e2; --text-mute: #b3bdb7; --line-faint: rgba(255,255,255,0.30); --line-soft: rgba(255,255,255,0.55); --line-strong: rgba(255,255,255,0.80); } html[data-contrast="high"][data-theme="light"] { --text-pri: #000000; --text-sec: #1a1a1a; --text-mute: #444444; --line-faint: rgba(0,0,0,0.35); --line-soft: rgba(0,0,0,0.55); } /* ============================================================================ PER-THEME BACKDROPS ---------------------------------------------------------------------------- The animated objects (planets, stars, asteroids, shooting stars, nebula embers, black holes, …) are all painted into a