/* ============================================================ WordNerd — Design Tokens : color + type A neon "night arena" for a live classroom word game. Vanilla CSS custom properties. Import this file anywhere. ============================================================ */ /* ---- Webfonts (loaded from Google Fonts CDN) ------------------- Display : Bricolage Grotesque — characterful, chunky headlines UI/Body : Hanken Grotesk — clean, friendly, legible Numerals: Martian Mono — tabular scoreboard / timer digits NOTE: served from CDN. If you need offline/self-hosted files, drop .woff2 into /fonts and swap these @imports for @font-face. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Martian+Mono:wght@500;600;700;800&display=swap'); :root { /* ========== BRAND / NON-SEMANTIC ACCENT ========== */ --brand: #7C5CFF; /* violet — logo, decorative, focus */ --brand-bright: #9B82FF; --brand-deep: #4A35B8; /* ========== ARENA SURFACES (dark, indigo-ink) ========== */ --ink-900: #0B0918; /* app background (the "stage") */ --ink-850: #110D26; /* deep panel */ --ink-800: #17123A; /* surface / card */ --ink-700: #211B4F; /* raised surface */ --ink-600: #322a6b; /* hairline / border */ --ink-500: #4a4090; /* strong border / divider */ /* ========== TEXT ========== */ --fg-1: #F6F4FF; /* primary text (near-white) */ --fg-2: #BAB4E6; /* secondary / muted lavender */ --fg-3: #7E78B0; /* tertiary / placeholders */ --fg-on-color: #0B0918; /* dark text used ON bright fills */ /* ========== THE THREE SEMANTIC HUES ========== Meaning must read at a glance. Spaced far apart in hue. */ /* 🧠 OWN-BRAIN · 3× points · answered from memory */ --brain: #B8FF3D; --brain-bright: #D4FF7A; --brain-deep: #3E5A00; --brain-glow: rgba(184,255,61,0.45); /* 🔎 AI-RESEARCH · 1× points · looked it up after */ --ai: #2ED9F2; --ai-bright: #7AEBFF; --ai-deep: #06485A; --ai-glow: rgba(46,217,242,0.45); /* ⚠️ FLAGGED-RELAY · passed / relayed / needs attention */ --flag: #FFAD1F; --flag-bright: #FFD27A; --flag-deep: #6B4400; --flag-glow: rgba(255,173,31,0.45); /* ========== RIGHT / WRONG FEEDBACK (not answer-source) ========== Correctness is separate from the answer-source trio. */ --correct: #B8FF3D; /* reuse brain-lime for "correct" */ --wrong: #FF466E; /* hot red for "incorrect" */ --wrong-deep: #6B0020; /* ========== SPACING (4px base) ========== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ========== RADII (chunky, game-y) ========== */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px; /* ========== BORDERS ========== */ --bw: 2px; /* default visible border weight */ --bw-thick: 3px; /* emphasis / focus */ /* ========== ELEVATION ========== Two systems: (a) chunky solid "extruded" edge for pressable game elements, (b) soft ambient shadow for floating panels, (c) colored glow for active semantic states. */ --edge: 0 6px 0 0 rgba(0,0,0,0.45); /* button bottom edge */ --edge-lg: 0 9px 0 0 rgba(0,0,0,0.45); --shadow-soft: 0 18px 40px -12px rgba(0,0,0,0.65); --shadow-pop: 0 24px 60px -16px rgba(0,0,0,0.75); --glow-brand: 0 0 28px rgba(124,92,255,0.50); --glow-brain: 0 0 28px var(--brain-glow); --glow-ai: 0 0 28px var(--ai-glow); --glow-flag: 0 0 28px var(--flag-glow); /* ========== MOTION ========== Game feel: quick, springy, never sleepy. */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* snappy settle */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* overshoot pop */ --ease-in: cubic-bezier(0.50, 0, 0.75, 0); --dur-1: 120ms; /* taps, hovers */ --dur-2: 220ms; /* lock-in, toggles */ --dur-3: 420ms; /* screen transitions, count-ups start */ --dur-4: 700ms; /* podium / reward bursts */ /* ========== TYPE FAMILIES ========== */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-num: 'Martian Mono', 'Hanken Grotesk', ui-monospace, monospace; /* ========== TYPE SCALE ========== Phone-first sizes; projector multiplies these (see --proj-scale). Use tabular-nums for any score/timer. */ --fs-mega: clamp(56px, 12vw, 132px); /* projector hero number/word */ --fs-hero: clamp(40px, 8vw, 72px); --fs-h1: clamp(30px, 5vw, 44px); --fs-h2: 26px; --fs-h3: 21px; --fs-body: 17px; --fs-small: 14px; --fs-micro: 12px; --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.5; --ls-tight: -0.02em; --ls-mega: -0.03em; --ls-label: 0.06em; /* uppercase eyebrows / labels */ } /* ============================================================ SEMANTIC ELEMENT DEFAULTS Lightweight base styles so raw HTML inherits the brand. ============================================================ */ .wn, body.wn { background: var(--ink-900); color: var(--fg-1); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wn h1, .wn .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; } .wn h2, .wn .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0; } .wn h3, .wn .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; } .wn .hero { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .wn p { margin: 0 0 var(--space-4); } /* Eyebrow / label */ .wn .eyebrow { font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); } /* Scoreboard / timer numerals — ALWAYS tabular */ .wn .num { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Code / room PINs share the mono face */ .wn code, .wn .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* Selection */ .wn ::selection { background: var(--brand); color: #fff; }