/* ============================================================ * GIGTIX SHARED DESIGN TOKENS * ------------------------------------------------------------ * One brand family, two surfaces: * · GigEntry — public storefront (light, editorial, warm) * · EntryRate — promoter back-of-house (dark, technical, bento) * * Each surface keeps its own personality, but pulls from the * same type stack, motion curves, and the bridge palette below * so a fan moving from gigentry.co.uk into an EntryRate-issued * link feels like the same company, not a coincidence. * * Usage: * * ← OR class="entryrate" * * The :root layer carries everything shared. The two scoped * blocks (.gigentry, .entryrate) override surface-specific * tokens. Pick one — never mix on the same page. * ============================================================ */ /* ─── 1. Shared foundation (every surface) ───────────────── */ :root { /* Type stack — both surfaces use Instrument Serif italic as the "soulful" accent against a workhorse sans. The display sans differs (Space Grotesk on light, Geist on dark) because each one carries its surface better — but the mono and serif italic are common across both. */ --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; --font-italic: "Instrument Serif", "Instrument Sans", Georgia, serif; /* Motion */ --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 800ms; /* Spacing scale (rem-aligned, used by both) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; /* Layout */ --max-width: 1240px; /* ─── Bridge palette ──────────────────────────────────── The two greens below are the cross-surface signature. Different hex on each side — they'd clash if identical against opposing backgrounds — but visually read as the same colour. Anything that needs to "feel like the brand" (live dots, success states, the energy moment in a gradient) uses the surface's own --signal token, which resolves to one of these. */ --bridge-green-warm: #b6ff2f; /* GigEntry on cream */ --bridge-green-cool: #c7f751; /* EntryRate on near-black */ } /* ─── 2. GigEntry (light, consumer storefront) ──────────── */ .gigentry { /* Surfaces */ --bg: #f6f1e8; --bg-strong: #efe5d2; --surface: rgba(255, 251, 245, 0.76); --surface-solid:#fffaf2; --surface-dark: #171717; /* Ink */ --text: #16120f; --text-muted: #665f58; --line: rgba(22, 18, 15, 0.11); --line-strong: rgba(22, 18, 15, 0.24); /* Brand */ --signal: var(--bridge-green-warm); /* primary accent */ --signal-deep: #95dd11; --ember: #ff6a3d; /* warning / energy */ --gold: #e1bf78; /* tertiary / luxe */ /* Type — display sans is Space Grotesk, body is Instrument Sans. Letter-spacing skews tight on display, neutral on body. */ --font-display: "Space Grotesk", sans-serif; --font-body: "Instrument Sans", sans-serif; --tracking-display: -0.06em; --tracking-body: 0; --tracking-eyebrow: 0.12em; /* Radii — rounder, friendlier */ --radius-sm: 16px; --radius-md: 24px; --radius-lg: 36px; --radius-pill: 999px; /* Shadows — soft, lived-in */ --shadow-soft: 0 20px 60px rgba(22, 18, 15, 0.10); --shadow-hard: 0 20px 90px rgba(22, 18, 15, 0.18); --shadow-lift: 0 24px 80px rgba(22, 18, 15, 0.18); background: var(--bg); color: var(--text); font-family: var(--font-body); } /* ─── 3. EntryRate (dark, promoter back-of-house) ───────── */ .entryrate { /* Surfaces */ --bg: #07070a; --bg-2: #0c0c10; --panel: #0f0f14; --panel-2: #14141a; --border: rgba(255, 255, 255, 0.07); --border-hi: rgba(255, 255, 255, 0.14); /* Ink */ --text: #ededf0; --text-muted: #8a8a95; --text-faint: #5c5c66; /* Brand */ --accent: #6ee7ff; /* electric cyan, primary */ --accent-2: #a78bff; /* iris, secondary */ --signal: var(--bridge-green-cool); /* live / success / "energy" */ --warn: #ff9a6e; /* warning */ /* Type — display sans is Geist (workmanlike, technical), body reuses it. Mono for codes, IDs, timestamps, fee figures. */ --font-display: "Geist", "Inter", -apple-system, system-ui, sans-serif; --font-body: "Geist", "Inter", -apple-system, system-ui, sans-serif; --tracking-display: -0.035em; --tracking-body: 0; --tracking-eyebrow: 0.10em; /* Radii — sharper, more product-y */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Shadows — depth via glow + ambient blur, not drop shadow */ --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -30px rgba(0, 0, 0, 0.6); --shadow-hard: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 120px -20px rgba(110, 231, 255, 0.18); background: var(--bg); color: var(--text); font-family: var(--font-body); font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; } /* ─── 4. Cross-surface utilities ────────────────────────── */ /* Eyebrow text — small uppercase tracked label. Both surfaces use this exact construction; only the colour resolves differently via --text-muted. */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } /* Italic accent — the soulful word in a headline. Use sparingly, one per headline, never two consecutive. */ .italic-accent { font-family: var(--font-italic); font-style: italic; font-weight: 400; } /* ─── 5. Notes ──────────────────────────────────────────── */ /* * Why two display sans-serifs instead of one: * Space Grotesk's wider apertures and softer terminals carry * the warmth of the GigEntry palette. Geist's sharper, more * geometric construction reads as "product surface" against * the dark EntryRate panels. Forcing one across both would * compromise one of the surfaces. * * The shared elements are deliberate: * · Instrument Serif italic is the brand's voice * · Geist Mono is the brand's number/code voice * · The two greens are the brand's energy * · The motion curves are the brand's pace * * If you ever ship co-branded artefacts (a confirmation email, * an embed widget, a co-marketing landing page) lead with those * five and the connection survives. */