/* ═══════════════════════════════════════════════════════════════ theme-stone-age.css — Stone Age Quest colour theme. ┌─ HOW TO CREATE A NEW THEME ─────────────────────────────────┐ │ Copy this file, rename it (e.g. theme-spelling.css), │ │ and replace the values in :root below. The variable names │ │ and the comment describing each one are your reference. │ │ Delete the Stone Age–specific sections at the bottom │ │ (atmospheric body::before, torch, cave-art) and add your │ │ own game-specific decorative styles in their place. │ └─────────────────────────────────────────────────────────────┘ Import order in each game's index.html: 1. core.css 2. theme-*.css ← this file 3. components.css Fonts loaded here (not in core.css) because each game may use different display typefaces. ═══════════════════════════════════════════════════════════════ */ /* Google Fonts CDN removed — fonts self-hosted via shared/fonts.css */ /* ── THEME VARIABLES ────────────────────────────────────────── All --theme-* variables must be set by every theme file. components.css uses only these names — never raw hex values. ────────────────────────────────────────────────────────────── */ :root { /* ── Backgrounds (dark → mid → warm, used in layers) ── */ --theme-bg-dark: #1a0d05; /* Deepest background — body base colour */ --theme-bg-mid: #2e1a0a; /* Card faces, panel interiors */ --theme-bg-warm: #4a2e14; /* HUD block backgrounds, progress bar tracks */ /* ── Card / panel backgrounds with opacity ── */ --theme-card-bg: rgba(46,26,10,0.9); /* Stage cards, end card, question card */ --theme-panel-bg: rgba(74,46,20,0.7); /* HUD blocks, timer track */ /* ── Accent (primary interactive colour) ── */ --theme-accent: #ff8c00; /* Buttons, borders, primary highlights */ --theme-accent-dark: #e65c00; /* Darker end of accent gradients */ --theme-accent-light: #ffb347; /* Lighter accent — subtitles, labels */ /* ── Emphasis (secondary highlight, used for scores and headings) ── */ --theme-highlight: #ffd700; /* Gold — HUD values, large scores, star glow */ /* ── Text ── */ --theme-text: #fff5e6; /* Primary body text — warm cream */ --theme-text-dim: rgba(255,245,230,0.55); /* Labels, descriptions, secondary copy */ /* ── Borders ── */ --theme-border: rgba(255,140,0,0.25); /* Default card outline */ --theme-border-active: rgba(255,140,0,0.55); /* Stage 1 card, hover states */ /* ── Shadows ── */ --theme-title-shadow: #8b4513; /* Drop-shadow behind large Bangers display text */ --theme-btn-shadow: #8b3a00; /* Box-shadow beneath .btn-primary */ /* ── Typography ── */ --theme-font-display: 'Bangers', cursive; /* Headings, scores, badges */ --theme-font-body: 'Nunito', sans-serif; /* Body text, buttons */ } /* ── BODY BASE ── */ body { background: var(--theme-bg-dark); } /* ══════════════════════════════════════════════════════════════ STONE AGE–SPECIFIC ATMOSPHERIC EFFECTS (Not shared — do not copy to other themes without adapting) ══════════════════════════════════════════════════════════════ */ /* Torch-glow radial gradients layered over the background */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 200px 300px at 10% 20%, rgba(255,140,0,0.12) 0%, transparent 70%), radial-gradient(ellipse 180px 280px at 90% 15%, rgba(255,140,0,0.08) 0%, transparent 70%), radial-gradient(ellipse 600px 400px at 50% 100%, rgba(74,46,20,0.5) 0%, transparent 80%); animation: torchFlicker 3s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } @keyframes torchFlicker { 0% { opacity: 0.80; } 30% { opacity: 1; } 60% { opacity: 0.85; } 100% { opacity: 0.95; } } /* Animated torch emoji icons (.torch-left / .torch-right in index.html) */ .torch { position: fixed; font-size: 3rem; z-index: 1; animation: torchBounce 2s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px #ff8c00); } .torch-left { top: 1rem; left: 1rem; } .torch-right { top: 1rem; right: 1rem; animation-delay: 0.5s; } @keyframes torchBounce { 0% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 8px #ff8c00); } 100% { transform: scale(1.08) rotate(5deg); filter: drop-shadow(0 0 20px #ffb347); } } /* Floating cave-art emoji spans (.cave-art in index.html) */ .cave-art { position: fixed; opacity: 0.06; font-size: 5rem; pointer-events: none; z-index: 0; animation: floatArt 8s ease-in-out infinite alternate; } @keyframes floatArt { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } } /* ── STAGE CARD BORDER COLOURS (s1 / s2 / s3) ────────────────── components.css renders cards with class="stage-card s1" etc. The border colours and hover glows are Stone Age–specific. ────────────────────────────────────────────────────────────── */ .stage-card.s1 { border-color: rgba(255,140,0,0.55); animation: s1pulse 2.5s ease-in-out infinite alternate; } .stage-card.s1:hover { border-color: #ff8c00; box-shadow: 0 15px 40px rgba(255,140,0,0.35); animation: none; } @keyframes s1pulse { from { border-color: rgba(255,140,0,0.35); box-shadow: 0 0 0 rgba(255,140,0,0); } to { border-color: rgba(255,140,0,0.75); box-shadow: 0 0 18px rgba(255,140,0,0.2); } } .stage-card.s2 { border-color: rgba(76,175,80,0.4); } .stage-card.s2:hover { border-color: #4caf50; box-shadow: 0 15px 40px rgba(76,175,80,0.3); } .stage-card.s3 { border-color: rgba(123,82,193,0.4); } .stage-card.s3:hover { border-color: #7b52c1; box-shadow: 0 15px 40px rgba(123,82,193,0.3); } /* ── STAGE PLAY BUTTON COLOURS ── */ .btn-stage.s1 { background: linear-gradient(135deg,#ff8c00,#e65c00); box-shadow: 0 4px 0 #8b3a00; } .btn-stage.s2 { background: linear-gradient(135deg,#2e7d52,#1b5e3a); box-shadow: 0 4px 0 #0d3320; } .btn-stage.s3 { background: linear-gradient(135deg,#7b52c1,#5e3b9e); box-shadow: 0 4px 0 #3d2570; } /* ── TITLE SHADOW (Stone Age uses brown shadow behind gold text) ── */ .game-title { text-shadow: 3px 3px 0 var(--theme-title-shadow), 0 0 30px rgba(255,215,0,0.4); } /* ── QUESTION CATEGORY BADGE (accent-coloured pill) ── */ .question-category { background: rgba(255,140,0,0.18); border: 1px solid rgba(255,140,0,0.35); color: var(--theme-accent-light); }