/* ═══════════════════════════════════════════════════════════════ JAMMIN JR — Shared Brand CSS Loaded on every page: home, wordbuilder, letterhero, dyslexia Prefixed --jjr- to avoid collisions with per-game CSS vars. ═══════════════════════════════════════════════════════════════ */ /* Fredoka One is loaded via in each page's , not @import */ /* ── Global reset (just enough to kill browser default margins) ── */ * { box-sizing: border-box; } body { margin: 0; padding: 0; } /* ── Brand tokens ────────────────────────────────────────────── */ :root { /* Primary palette — bold, primary colours */ --jjr-red: #e63946; /* primary red */ --jjr-blue: #3a86ff; /* primary blue */ --jjr-yellow: #ffbe0b; /* primary yellow */ --jjr-green: #06d6a0; /* teal-green */ --jjr-purple: #8338ec; /* purple */ --jjr-orange: #fb5607; /* orange */ /* Keep legacy aliases so existing pages don't break */ --jjr-coral: var(--jjr-red); --jjr-teal: var(--jjr-green); --jjr-gold: var(--jjr-yellow); /* Neutrals */ --jjr-navy: #1a1a2e; --jjr-navy-mid: #2d2d5e; --jjr-bg: #f0f6ff; /* light site background */ --jjr-font-fun: 'Fredoka One', cursive, sans-serif; --jjr-font-body: 'Lexend Deca', system-ui, sans-serif; } /* ── Top navigation bar ──────────────────────────────────────── */ .jjr-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 52px; background: #1a1a2e; position: sticky; top: 0; z-index: 200; box-shadow: 0 3px 12px rgba(0,0,0,0.22); } .jjr-topbar .jjr-logo { font-family: var(--jjr-font-fun); font-size: 1.1rem; color: var(--jjr-gold); text-decoration: none; line-height: 1; } .jjr-topbar .jjr-logo em { font-style: normal; color: var(--jjr-coral); } .jjr-topbar .jjr-nav-links { display: flex; gap: 4px; align-items: center; } .jjr-topbar .jjr-nav-links a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 0.85rem; font-family: system-ui, -apple-system, sans-serif; padding: 5px 12px; border-radius: 20px; transition: background 0.15s, color 0.15s; } .jjr-topbar .jjr-nav-links a:hover { background: rgba(255,255,255,0.13); color: #fff; } /* ── Game page layout ────────────────────────────────────────── */ /* Screens account for topbar height so content is never clipped */ .jjr-gamepage .screen { min-height: calc(100vh - 52px); } /* ── Footer ──────────────────────────────────────────────────── */ .jjr-footer { text-align: center; padding: 18px 16px 16px; font-size: 0.78rem; color: #aaa; font-family: system-ui, -apple-system, sans-serif; border-top: 1px solid rgba(0,0,0,0.07); background: transparent; } .jjr-footer a { color: #bbb; text-decoration: none; margin: 0 8px; transition: color 0.15s; } .jjr-footer a:hover { color: #666; } .jjr-footer .jjr-copy { display: block; margin-top: 5px; color: #ccc; }