/* ═══════════════════════════════════════════════════════════════════ GEEK BAR — "COSMIC RETAIL" Design System geek-bar.org · Rialto, CA warehouse · US Retailer for Geek Bar 2026-05-14 — Replaces "Stock Issue" (Direction B fork). Deep-space dark base + electric orange brand accent + cosmic cyan + nebula magenta + violet secondaries. Mono numerics, wide display. All CSS variables prefixed --gb-* per铁律. Token names backward-compat with legacy core.css (var(--gb-red) still resolves to var(--gb-accent)). ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Surface (cosmic dark) ───────────────────────────────────── */ --gb-paper: #06080F; /* page background — void */ --gb-paper-2: #0E121C; /* elevated surface */ --gb-paper-3: #161B28; /* card surface */ --gb-paper-4: #1F2536; /* hover / pressed */ --gb-paper-glass: rgba(22, 27, 40, 0.65); /* ── Ink ──────────────────────────────────────────────────────── */ --gb-ink: #F2F4FB; /* primary text */ --gb-ink-2: #C5CADC; /* secondary text */ --gb-ink-muted: #7A8198; /* tertiary / metadata */ --gb-ink-faint: #4A506A; /* placeholder */ /* ── Rules / borders ─────────────────────────────────────────── */ --gb-rule: #1E2535; --gb-rule-lite: #161B28; --gb-bd: #2A3247; --gb-bd-lite: #1B2030; --gb-bd-thick: #3D4661; /* ── Accent (signal colors) ──────────────────────────────────── */ --gb-accent: #FF6B1A; /* electric orange — primary CTA, brand DNA */ --gb-accent-2: #FF8A4C; /* hover */ --gb-accent-soft: rgba(255, 107, 26, 0.14); --gb-accent-glow: rgba(255, 107, 26, 0.45); --gb-cyan: #3DD9FF; /* cosmic cyan — Pulse X family, links */ --gb-cyan-soft: rgba(61, 217, 255, 0.14); --gb-cyan-glow: rgba(61, 217, 255, 0.45); --gb-magenta: #FF4FA8; /* nebula magenta — flavor / loyalty */ --gb-magenta-soft: rgba(255, 79, 168, 0.14); --gb-violet: #8B5CF6; /* deep nebula — zodiac / limited */ --gb-violet-soft: rgba(139, 92, 246, 0.14); /* legacy aliases kept for backward compat with existing core.css references */ --gb-red: var(--gb-accent); --gb-red-dark: #D85009; --gb-warm: #C19A83; /* legacy warm — soft tan accent */ /* ── Status ──────────────────────────────────────────────────── */ --gb-ok: #4FE0A0; --gb-warn: #FFCC4A; --gb-err: #FF5A5A; --gb-yellow: #FFE600; /* safety yellow — age gate only */ --gb-yellow-soft: rgba(255, 230, 0, 0.14); /* ── Family hues (used inside flavor cards, never page chrome) ─ */ --gb-fam-iced: #7FD9C8; --gb-fam-sour: #C2F250; --gb-fam-mint: #A8E6CF; --gb-fam-candy: #F8B5C7; --gb-fam-fruit: #FFA45B; --gb-fam-zodiac: #A86FBA; --gb-fam-limited: #FF4D6D; /* ── Typography ──────────────────────────────────────────────── */ --gb-font-display: 'Space Grotesk', 'Inter Tight', system-ui, -apple-system, sans-serif; --gb-font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif; --gb-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', monospace; --gb-font-serif: 'Newsreader', Georgia, serif; --gb-fs-xs: 11px; --gb-fs-sm: 13px; --gb-fs-base: 15px; --gb-fs-md: 15px; --gb-fs-lg: 17px; --gb-fs-xl: 20px; --gb-fs-2xl: 26px; --gb-fs-3xl: 34px; --gb-fs-4xl: 48px; --gb-fs-5xl: 64px; --gb-fs-6xl: 96px; --gb-fs-7xl: 128px; --gb-lh: 1.55; --gb-lh-tight: 1.2; --gb-lh-display: 0.95; --gb-label-track: 0.14em; /* uppercase mono labels */ --gb-display-track: -0.02em; /* display headlines */ /* ── Spacing scale (4px base) ────────────────────────────────── */ --gb-s-1: 4px; --gb-s-2: 8px; --gb-s-3: 12px; --gb-s-4: 16px; --gb-s-5: 20px; --gb-s-6: 24px; --gb-s-7: 32px; --gb-s-8: 40px; --gb-s-9: 56px; --gb-s-10: 72px; --gb-s-11: 96px; --gb-s-12: 128px; --gb-s-14: 96px; /* legacy alias to s-11 */ --gb-max-w: 1200px; --gb-max-w-nb: 920px; --gb-pad-x: 32px; /* ── Radii (sharp but not zero — cosmic glass feel) ──────────── */ --gb-r-xs: 4px; --gb-r-sm: 8px; --gb-r-md: 12px; --gb-r-lg: 18px; --gb-r-xl: 28px; --gb-r-pill: 999px; /* ── Border shorthand aliases (legacy `.gb-bd` / `.gb-bd-lite` classes) ── The plain color tokens `--gb-bd / --gb-bd-lite / --gb-bd-thick` already defined above hold the COLOR. Legacy shorthand needs its own name so the `border:1px solid var(--gb-bd)` pattern in component CSS resolves correctly. #} --gb-bd-sh: 1px solid #2A3247; --gb-bd-lite-sh: 1px solid #1B2030; --gb-bd-thick-sh: 2px solid #1E2535; /* ── Rule (table row + section divider) ──────────────────────── */ --gb-line: #1E2535; /* ── Shadows / glows ─────────────────────────────────────────── */ --gb-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.45); --gb-shadow-elev: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 60px rgba(0,0,0,0.55); --gb-shadow-glow-orange: 0 0 0 1px rgba(255,107,26,0.4), 0 12px 40px rgba(255,107,26,0.25); --gb-shadow-glow-cyan: 0 0 0 1px rgba(61,217,255,0.4), 0 12px 40px rgba(61,217,255,0.18); --gb-shadow-glow-magenta: 0 0 0 1px rgba(255,79,168,0.4), 0 12px 40px rgba(255,79,168,0.18); --gb-shadow-glow-violet: 0 0 0 1px rgba(139,92,246,0.4), 0 12px 40px rgba(139,92,246,0.18); } /* ═══════════════════════════════════════════════════════════════════ Global reset (dark canvas + body font) ═══════════════════════════════════════════════════════════════════ */ html, body { background: var(--gb-paper); color: var(--gb-ink); font-family: var(--gb-font-sans); font-size: var(--gb-fs-base); line-height: var(--gb-lh); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; margin: 0; padding: 0; } * { box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:hover { color: var(--gb-cyan); } img, svg { max-width: 100%; height: auto; display: block; } code, kbd, samp, pre { font-family: var(--gb-font-mono); font-size: 0.92em; } hr { border: 0; border-top: 1px solid var(--gb-rule); margin: var(--gb-s-7) 0; } ::selection { background: var(--gb-accent); color: #06080F; } button { font: inherit; cursor: pointer; } [x-cloak] { display: none !important; }