/* ============================================================ Helix Games — Theme Reskins ---------------------------------------------------------------- Three themes that share the same HUD information architecture and the same dark-orange action accent, but paint the rest of the UI in distinct visual languages: (default) Holo HUD Orange — tactical mission-briefing with calm teal primary data-theme="terminal" Terminal Green + Orange — CRT phosphor green-on-near-black, heavy scanlines, monitor bloom data-theme="holo" Holo Green + Orange — translucent holographic panels, soft green bloom, frosted glass How the cascade works ---------------------------------------------------------------- tokens.css declares the base CSS variables and writes all rgba() tints as rgba(var(--helix-primary-rgb), ) so a single triplet override propagates everywhere. Themes here: 1. Re-set the primary RGB triplet + solid hex (greenish vs teal). 2. Re-set backgrounds for the right "behind-the-glass" mood. 3. Bump the atmosphere knobs (scanline intensity, vignette). 4. Add a small handful of selector overrides for bold-reskin surfaces that need more than a colour change (translucency for Holo cards, dashed borders for Terminal, etc.). The dark-orange secondary stays the same across all three so hover/action behaviour reads consistently no matter the skin. Load order: this file must be linked AFTER tokens.css. The shared/theme.js controller toggles based on the user's choice (persisted in localStorage). ============================================================ */ /* ────────────────────────────────────────────────────────────── TERMINAL — green phosphor CRT Bright #00ff66 text on near-black, denser scanlines, slight text-shadow glow on titles to mimic phosphor bloom. ────────────────────────────────────────────────────────────── */ :root[data-theme="terminal"] { /* Phosphor green primary */ --helix-primary-rgb: 0, 255, 102; --helix-primary: #00ff66; --helix-primary-light: #66ff99; --helix-primary-dark: #00cc52; --helix-glow: rgba(var(--helix-primary-rgb), 0.7); /* Near-black background with the faintest green wash */ --helix-bg-dark: #030604; --helix-bg-card: #07120a; /* Crank up the CRT-ness */ --helix-scanline-band: rgba(0, 0, 0, 0.35); --helix-scanline-opacity: 0.78; --helix-grain-opacity: 0.07; --helix-vignette-end: rgba(0, 0, 0, 0.65); } /* Phosphor text glow on the biggest titles. The base CSS already applies a soft text-shadow; we layer a second, wider halo so the text reads as if it's lit from behind. */ :root[data-theme="terminal"] .hero-title, :root[data-theme="terminal"] .page-title, :root[data-theme="terminal"] .game-title { text-shadow: 0 0 6px rgba(var(--helix-primary-rgb), 0.85), 0 0 18px rgba(var(--helix-primary-rgb), 0.55), 0 0 32px rgba(var(--helix-primary-rgb), 0.35); } /* Card surfaces switch to a thinner border style — feels more like a terminal-drawn frame. Corner brackets stay solid (they're the "drawn manually" anchors), only the rectangle gets the dashed character. */ :root[data-theme="terminal"] .game-card, :root[data-theme="terminal"] .stat-card, :root[data-theme="terminal"] .profile-header, :root[data-theme="terminal"] .scores-container, :root[data-theme="terminal"] .achievements-preview, :root[data-theme="terminal"] .leaderboard-card, :root[data-theme="terminal"] .admin-section, :root[data-theme="terminal"] .info-panel, :root[data-theme="terminal"] .stats-bar { border-style: dashed; } /* A subtle full-card phosphor halo on hover so it reads like the monitor is "lighting up" the focused row. */ :root[data-theme="terminal"] .game-card:hover, :root[data-theme="terminal"] .game-card:focus-visible { box-shadow: 0 0 24px var(--helix-secondary-glow), inset 0 0 32px rgba(var(--helix-primary-rgb), 0.08); } /* Header / nav lockup tightens a touch on Terminal so it feels more like a status bar. */ :root[data-theme="terminal"] .brand-text, :root[data-theme="terminal"] .hud-top { text-shadow: 0 0 6px rgba(var(--helix-primary-rgb), 0.6); } /* ────────────────────────────────────────────────────────────── HOLO — translucent holographic projection Cooler mint-green primary, frosted-glass cards (backdrop-filter blur), brighter glow halos, subtle scanlines (the bloom is doing the heavy lifting, not the lines). ────────────────────────────────────────────────────────────── */ :root[data-theme="holo"] { /* Holographic mint primary (slightly cooler than the default teal so the projector vibe reads as "lighter, ghostlier"). */ --helix-primary-rgb: 96, 240, 192; --helix-primary: #60f0c0; --helix-primary-light: #8df5d3; --helix-primary-dark: #3acaa0; --helix-glow: rgba(var(--helix-primary-rgb), 0.85); /* Deeper blue-green ink for the panel behind the glass. */ --helix-bg-dark: #04141a; --helix-bg-card: rgba(15, 32, 38, 0.55); /* Less CRT — the holo look is clean glass + bloom, not phosphor. */ --helix-scanline-band: rgba(var(--helix-primary-rgb), 0.06); --helix-scanline-opacity: 0.30; --helix-grain-opacity: 0.025; --helix-vignette-end: rgba(0, 0, 0, 0.40); /* Card translucency. The base CSS doesn't use this token yet, but we apply it via the selectors below — keeping it as a knob in case other surfaces want to read it. */ --helix-card-blur: 14px; } /* Frost the big content panels so the page background bleeds through slightly — the "projected onto thin air" effect. backdrop-filter needs to land on an element that has its own translucent bg, hence the explicit rgba() override here. */ :root[data-theme="holo"] .game-card, :root[data-theme="holo"] .stat-card, :root[data-theme="holo"] .profile-header, :root[data-theme="holo"] .scores-container, :root[data-theme="holo"] .achievements-preview, :root[data-theme="holo"] .leaderboard-card, :root[data-theme="holo"] .admin-section, :root[data-theme="holo"] .info-panel, :root[data-theme="holo"] .stats-bar { background: rgba(15, 32, 38, 0.45); backdrop-filter: blur(var(--helix-card-blur)); -webkit-backdrop-filter: blur(var(--helix-card-blur)); box-shadow: 0 0 32px rgba(var(--helix-primary-rgb), 0.16), inset 0 0 40px rgba(var(--helix-primary-rgb), 0.04); } /* Hero gets the same treatment with a touch more bloom — it's the page's "headline projection". */ :root[data-theme="holo"] .hero-section { background: rgba(15, 32, 38, 0.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 48px rgba(var(--helix-primary-rgb), 0.22), inset 0 0 60px rgba(var(--helix-primary-rgb), 0.05); } /* Stronger glow on titles (the only "light source" in a holo projection is the text itself). */ :root[data-theme="holo"] .hero-title, :root[data-theme="holo"] .page-title, :root[data-theme="holo"] .game-title { text-shadow: 0 0 8px rgba(var(--helix-primary-rgb), 0.7), 0 0 24px rgba(var(--helix-primary-rgb), 0.45), 0 0 48px rgba(var(--helix-primary-rgb), 0.25); } /* Hover bloom is brighter and pushes the card forward instead of tinting it warm — keeps the floating-hologram metaphor. */ :root[data-theme="holo"] .game-card:hover, :root[data-theme="holo"] .game-card:focus-visible { background: rgba(15, 32, 38, 0.55); box-shadow: 0 0 40px var(--helix-secondary-glow), 0 0 64px rgba(var(--helix-primary-rgb), 0.25), inset 0 0 32px rgba(var(--helix-primary-rgb), 0.10); } /* The atmosphere overlay's #app vignette is darker than the holo palette wants. Lighten it slightly. (Handled via the --helix- vignette-end variable above, so nothing else needed here.) */