/* ============================================================================ STRAFE THEORY SOFTWARE — Core Color & Type Foundations ---------------------------------------------------------------------------- The single source of truth for color, type, spacing, radius and elevation tokens. Import this first in any Strafe Theory surface: The system runs on a THREE-SURFACE "chapter band" model: pure black, true white, and Strafe Blue bands stack edge-to-edge down a page like cuts in a launch trailer. The brand voice lives in a LIGHT (weight 300) display face — airy, editorial, premium — paired with a heavyweight 700 pill CTA. Chrome never decorates: no resting shadows, no gradient backgrounds (one membership-gold exception), imagery does the talking. ============================================================================ */ /* ---- Brand font: Hanken Grotesk (open substitute — see README "Type") ----- */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---- Titling face ----------------------------------------------------------- The brand titling face (Thuast) has been retired from the project. The slanted wordmark now lives only in the logo IMAGE (assets/strafe-logo-text-v2.png). Game-title lockups fall back to the normal family (Hanken Grotesk), set heavy + uppercase so they still read as titles over key art. */ :root { /* ==================================================================== COLOR — RAW PALETTE ==================================================================== */ /* -- Brand & accent -- */ --strafe-blue: #0070d1; /* universal primary CTA + footer band */ --strafe-blue-pressed: #0064b7; /* primary pill pressed / link-on-light */ --strafe-blue-active: #004d8d; /* deeply pressed primary */ --on-blue: #ffffff; --signal-orange: #d53b00; /* commerce: buy / pre-order ONLY */ --signal-orange-pressed: #aa2f00; --signal-orange-link: #d63d00; --on-orange: #ffffff; --volt: #deff20; /* per-title game accent (use scoped) */ /* -- Ink (text) -- */ --ink: #000000; /* primary text on light */ --ink-deep: #121314; /* warm near-black, in-card titles */ --ink-elevated: #181818; --body-light: rgba(0,0,0,0.6); /* default paragraph on light */ --mute-light: #6b6b6b; /* metadata on light */ --ash-light: #cccccc; /* disabled / lowest emphasis */ --on-dark: #ffffff; /* primary text on dark */ --body-dark: rgba(255,255,255,0.7); --on-dark-mute: #cccccc; --mute-dark: rgba(229,229,229,0.55); /* -- Surfaces -- */ --canvas-dark: #000000; /* black hero band / nav / footer base */ --surface-dark-elevated: #121314; /* inset dark panel, membership banner */ --surface-dark-card: #181818; /* game tile, dark product card */ --canvas-light: #ffffff; /* white showcase band, support body */ --surface-soft: #f3f3f3; /* soft band fill / divider */ --surface-card: #f5f7fa; /* cool-tinted light card */ --surface-filter: rgba(245,247,250,0.3); /* filter-pill default */ /* -- Hairlines -- */ --hairline-light: #f3f3f3; --hairline-dark: rgba(229,229,229,0.2); /* -- Semantic -- */ --warning: #c81b3a; /* validation / destructive */ --link-light: #0064b7; /* inline prose link on light */ --link-dark: #53b1ff; /* inline prose link on dark */ /* -- Membership gold (the ONLY chrome gradient — Strafe Pass only) -- */ --pass-gold-start: #ffce21; --pass-gold-mid: #f5a623; --pass-gold-end: #ee8e00; --pass-gradient: linear-gradient(90deg,#ffce21 0%,#f5a623 50%,#ee8e00 100%); /* ==================================================================== TYPE ==================================================================== */ --font-display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-text: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --font-title: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; /* game-title lockups (Thuast retired) */ /* weight stops */ --w-light: 300; /* THE display weight — brand voice */ --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; /* ==================================================================== SPACING (base 8, fine 4/12 steps) ==================================================================== */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* the silence between trailer cuts */ /* ==================================================================== RADIUS (4 / 8 / pill — structural surfaces stay flat at 0) ==================================================================== */ --radius-none: 0px; --radius-sm: 4px; /* inputs */ --radius-md: 8px; /* cards, tiles */ --radius-lg: 16px; /* rare large container */ --radius-full: 9999px; /* every CTA pill, chip, dot, paddle */ /* ==================================================================== ELEVATION (flat-on-canvas; depth comes from surface contrast) ==================================================================== */ --shadow-press: 0 4px 12px rgba(0,0,0,0.16); /* active/pressed CTA + lifted card */ --shadow-none: none; } /* ============================================================================ SEMANTIC TYPE ROLES 1.25 line-height ladder almost everywhere; body at 1.5. Display tiers ride weight 300 with airy positive tracking. ============================================================================ */ .display-xl { font:var(--w-light) 54px/1.25 var(--font-display); letter-spacing:-0.1px; } .display-lg { font:var(--w-light) 44px/1.25 var(--font-display); letter-spacing:0.1px; } .display-md { font:var(--w-light) 35px/1.25 var(--font-display); letter-spacing:0; } .heading-xl { font:var(--w-light) 28px/1.25 var(--font-display); letter-spacing:0.1px; } .heading-lg { font:var(--w-light) 22px/1.25 var(--font-display); letter-spacing:0.1px; } .heading-md { font:var(--w-semi) 18px/1 var(--font-text); letter-spacing:0; } .body-md { font:var(--w-reg) 18px/1.5 var(--font-text); letter-spacing:0.1px; } .body-strong { font:var(--w-med) 18px/1.25 var(--font-text); letter-spacing:0.4px; } .body-sm { font:var(--w-reg) 16px/1.5 var(--font-text); letter-spacing:0; } .caption-md { font:var(--w-reg) 14px/1.5 var(--font-text); letter-spacing:0; } .caption-sm { font:var(--w-med) 12px/1.5 var(--font-text); letter-spacing:0; } .link-md { font:var(--w-reg) 18px/1.5 var(--font-text); letter-spacing:0; } .button-lg { font:var(--w-bold) 18px/1.25 var(--font-text); letter-spacing:0.45px; } .button-md { font:var(--w-bold) 14px/1.25 var(--font-text); letter-spacing:0.324px; } /* Titling tier — heavy uppercase game-title lockups over key art. */ .title-display { font-family:var(--font-title); font-weight:800; text-transform:uppercase; letter-spacing:0.5px; line-height:1.0; } /* convenience element defaults — opt in by adding .st-prose to a container */ .st-prose h1 { margin:0; } .st-prose p { margin:0; color:var(--body-light); } /* ============================================================================ COMPONENT PRIMITIVES (cosmetic helpers — full set lives in ui_kits/) ============================================================================ */ /* -- Pills: every CTA is fully rounded -- */ .st-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:12px 28px; border:0; cursor:pointer; border-radius:var(--radius-full); white-space:nowrap; font:var(--w-bold) 18px/1.25 var(--font-text); letter-spacing:0.45px; transition:background-color .12s ease, transform .12s ease; } .st-btn--primary { background:var(--strafe-blue); color:var(--on-blue); } .st-btn--primary:active { background:var(--strafe-blue-pressed); transform:translateY(1px); } .st-btn--commerce { background:var(--signal-orange); color:var(--on-orange); } .st-btn--commerce:active { background:var(--signal-orange-pressed); transform:translateY(1px); } .st-btn--ghost-light { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ash-light); } .st-btn--ghost-dark { background:transparent; color:var(--on-dark); box-shadow:inset 0 0 0 1px var(--hairline-dark); } .st-btn--disabled { background:var(--surface-soft); color:var(--ash-light); cursor:not-allowed; } /* -- Cards -- */ .st-card { background:var(--surface-card); color:var(--ink); border-radius:var(--radius-md); padding:var(--space-lg); } .st-card--dark { background:var(--surface-dark-card); color:var(--on-dark); border-radius:var(--radius-md); padding:var(--space-lg); } .st-card--feature { background:var(--canvas-light); color:var(--ink); border-radius:var(--radius-md); padding:var(--space-xl); } /* -- Badge -- */ .st-badge { display:inline-flex; align-items:center; background:var(--strafe-blue); color:var(--on-blue); font:var(--w-med) 12px/1.5 var(--font-text); padding:4px 10px; border-radius:var(--radius-full); } /* -- Filter chip -- */ .st-chip { background:var(--surface-filter); color:var(--ink); border:0; cursor:pointer; font:var(--w-bold) 14px/1.25 var(--font-text); letter-spacing:0.324px; padding:8px 16px; border-radius:var(--radius-full); } .st-chip[aria-selected="true"] { background:var(--canvas-light); box-shadow:inset 0 0 0 1px var(--hairline-light); } /* -- Input -- */ .st-input { height:48px; padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--ash-light); background:var(--canvas-light); color:var(--ink); font:var(--w-reg) 18px/1.5 var(--font-text); outline:none; } .st-input:focus { border:2px solid var(--strafe-blue); padding:11px 15px; }