/* ============================================================ LineVerse — Design Tokens Color, typography, spacing, motion, elevation. Import this from any artifact, then use vars directly. ============================================================ */ /* --- Fonts -------------------------------------------------- */ /* Substitutions (flagged in README — replace with brand files if licensed): - Press Start 2P → pixel logotype + arcade chrome (Google Fonts) - VT323 → CRT terminal body (Google Fonts) - Anton → display headline ("WELCOME TO LINEVERSE") (Google Fonts) - JetBrains Mono → UI labels, code, badges, tabular numbers (Google Fonts) */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Anton&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* -------- Brand core ------------------------------------- */ --lv-yellow: #FFD400; /* Beanie yellow — primary action, highlight slab */ --lv-yellow-soft: #FFE45C; /* hover highlight */ --lv-yellow-deep: #C39A00; /* press / pixel shadow */ --lv-mint: #2EE6A6; /* "LIVE / READY / CURRENT" accent (the cursor stroke) */ --lv-mint-deep: #15A37A; --lv-red: #FF3D55; /* ON AIR — alert */ --lv-blue: #4FB2FF; /* CODE stat — info */ --lv-cream: #F1ECDC; /* primary text on dark */ /* -------- Neutrals --------------------------------------- */ --lv-black: #050505; /* page background */ --lv-ink: #0B0B0C; /* surface 0 (card body) */ --lv-ink-2: #131312; /* surface 1 (raised card) */ --lv-ink-3: #1C1B17; /* surface 2 (inset, video wells) */ --lv-line: #2A2820; /* hairline borders (warm dark) */ --lv-line-yellow: #3A3209; /* dim yellow border (locked / passed) */ --lv-muted: #6B665A; /* secondary text, meta */ --lv-muted-2: #A29A86; /* tertiary text */ /* -------- Semantic --------------------------------------- */ --bg: var(--lv-black); --surface: var(--lv-ink); --surface-raised: var(--lv-ink-2); --surface-inset: var(--lv-ink-3); --border: var(--lv-line); --border-strong: var(--lv-yellow); --fg: var(--lv-cream); --fg-muted: var(--lv-muted-2); --fg-dim: var(--lv-muted); --accent: var(--lv-yellow); --accent-2: var(--lv-mint); --danger: var(--lv-red); --info: var(--lv-blue); /* -------- Status colors (badges) ------------------------- */ --status-live: var(--lv-red); /* ON AIR */ --status-daily: var(--lv-mint); /* DAILY */ --status-current: var(--lv-mint); /* CURRENT */ --status-passed: var(--lv-muted); /* PASSED */ --status-coming: var(--lv-yellow); /* COMING */ --status-locked: var(--lv-muted); /* LOCKED */ /* -------- Type families ---------------------------------- */ --font-pixel: 'Press Start 2P', 'VT323', monospace; /* logo + arcade titles */ --font-display: 'Anton', 'Impact', 'Bebas Neue', sans-serif; /* HUGE headlines */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; --font-crt: 'VT323', 'Press Start 2P', monospace; /* terminal body */ --font-body: 'JetBrains Mono', ui-monospace, monospace; /* -------- Type scale (large screens) --------------------- */ --t-hero: clamp(72px, 12vw, 200px); /* "WELCOME TO LINEVERSE" */ --t-h1: clamp(48px, 7vw, 112px); /* section openers */ --t-h2: clamp(32px, 4vw, 56px); --t-h3: 24px; --t-body: 16px; --t-meta: 13px; --t-pixel-lg: 28px; /* logo */ --t-pixel: 14px; /* nav, chips */ --t-pixel-sm: 11px; /* tiny badges */ /* -------- Spacing ---------------------------------------- */ --s-0: 4px; --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; /* -------- Radii ------------------------------------------ */ --r-0: 0px; /* SHARP — default, arcade */ --r-1: 2px; /* "almost sharp" — chips */ --r-2: 4px; /* buttons */ --r-3: 8px; /* large surfaces (rare) */ /* LineVerse is SHARP — radii are intentionally tiny. */ /* -------- Borders ---------------------------------------- */ --bw-thin: 1px; --bw: 2px; /* default card border */ --bw-thick: 3px; /* hero card / active state */ /* -------- Shadows (mostly flat — arcade has no soft shadow) */ --shadow-pixel-yellow: 4px 4px 0 0 var(--lv-yellow-deep); --shadow-pixel-black: 4px 4px 0 0 #000; --shadow-glow-yellow: 0 0 0 1px var(--lv-yellow), 0 0 24px rgba(255,212,0,.35); --shadow-glow-mint: 0 0 0 1px var(--lv-mint), 0 0 24px rgba(46,230,166,.35); --shadow-card: 0 1px 0 0 var(--lv-line); /* -------- Motion ----------------------------------------- */ --ease-step: steps(6, end); /* pixel-style stepped */ --ease-snap: cubic-bezier(.2,.9,.1,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; /* -------- Grid / dot pattern ----------------------------- */ --pattern-dot: radial-gradient(circle, rgba(255,212,0,.06) 1px, transparent 1px); --pattern-dot-size: 24px 24px; --pattern-grid: linear-gradient(rgba(255,212,0,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,212,0,.045) 1px, transparent 1px); --pattern-grid-size: 48px 48px; --pattern-scanline: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 3px); } /* ============================================================ Element defaults — drop-in body styles ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* The brand voice prefers UPPERCASE for headlines + slab highlights */ .lv-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: .88; font-size: var(--t-hero); color: var(--fg); } .lv-h1 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-h1); line-height: .9; } .lv-h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-h2); line-height: .95; } .lv-pixel { font-family: var(--font-pixel); font-size: var(--t-pixel); letter-spacing: .05em; text-transform: uppercase; } .lv-pixel-lg { font-family: var(--font-pixel); font-size: var(--t-pixel-lg); letter-spacing: .04em; } .lv-pixel-sm { font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: .06em; } .lv-mono { font-family: var(--font-mono); font-size: var(--t-body); } .lv-meta { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--fg-dim); text-transform: uppercase; letter-spacing: .08em; } /* The signature highlight — yellow slab around a single word */ .lv-slab { background: var(--lv-yellow); color: #000; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .lv-slab--mint { background: var(--lv-mint); } /* Pixel cursor accent (the / in LINE/VERSE) */ .lv-cursor { display: inline-block; width: .5em; height: 1em; background: var(--lv-mint); vertical-align: -.1em; transform: skewX(-12deg); }