/* ========================================================================= Weller Creative Group — Design Tokens Premium brand management for high-profile athletes & clients. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ----- FONT FACE --------------------------------------------------------- Primary type system is system Helvetica (matching the original site). Inter is loaded as a high-fidelity web fallback for environments without Helvetica Neue installed. NOTE: a true premium upgrade would use Neue Haas Grotesk / Söhne — flagged for future licensing. ------------------------------------------------------------------------- */ :root { /* ---------- COLOR — CORE PALETTE ---------- */ --wcg-black: #0B0A0A; /* page background — true premium black */ --wcg-ink: #151414; /* card / panel surface */ --wcg-ink-2: #1F1E1E; /* hover surface, subtle elevation */ --wcg-line: #2A2828; /* hairline divider on dark */ --wcg-white: #FFFFFF; /* primary type, marks */ --wcg-bone: #F4F2EE; /* off-white for inverted surfaces */ --wcg-red: #C8102E; /* signature red — sport / urgency / accent */ --wcg-red-deep: #8E0A1F; /* press / pressed state */ --wcg-red-glow: #FF1F3D; /* highlight, focus ring */ /* ---------- COLOR — NEUTRAL SCALE ---------- */ --wcg-n-900: #0B0A0A; --wcg-n-800: #151414; --wcg-n-700: #2A2828; --wcg-n-600: #4A4747; --wcg-n-500: #6B6868; --wcg-n-400: #8E8B8B; --wcg-n-300: #B5B2B2; --wcg-n-200: #D6D3D3; --wcg-n-100: #ECE9E9; --wcg-n-050: #F7F5F5; /* ---------- COLOR — SEMANTIC ---------- */ --fg-1: var(--wcg-white); /* primary type on dark */ --fg-2: rgba(255,255,255,0.72); /* secondary type */ --fg-3: rgba(255,255,255,0.48); /* tertiary / meta */ --fg-4: rgba(255,255,255,0.28); /* disabled / placeholder */ --fg-on-light-1: var(--wcg-black); --fg-on-light-2: rgba(11,10,10,0.65); --bg-1: var(--wcg-black); /* page */ --bg-2: var(--wcg-ink); /* card / nav */ --bg-3: var(--wcg-ink-2); /* hover / overlay */ --bg-inverse: var(--wcg-bone); --border-1: rgba(255,255,255,0.08); /* hairline */ --border-2: rgba(255,255,255,0.16); /* visible border */ --border-strong: rgba(255,255,255,0.32); --accent: var(--wcg-red); --accent-hover: var(--wcg-red-glow); --accent-press: var(--wcg-red-deep); /* ---------- TYPOGRAPHY — FAMILIES ---------- */ --font-sans: "Helvetica Neue", "Helvetica", "Inter", "Arial", system-ui, sans-serif; --font-display: "Helvetica Neue", "Helvetica", "Inter", "Arial", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- TYPOGRAPHY — SCALE ---------- */ /* Designed for editorial / portfolio scale — large display, generous body */ --t-display-xl: 700 96px/0.95 var(--font-display); /* hero billboards */ --t-display-l: 700 64px/1.02 var(--font-display); /* page titles */ --t-display-m: 700 44px/1.08 var(--font-display); /* section heroes */ --t-h1: 700 36px/1.12 var(--font-sans); --t-h2: 700 28px/1.18 var(--font-sans); --t-h3: 600 22px/1.25 var(--font-sans); --t-h4: 600 18px/1.3 var(--font-sans); --t-body-l: 400 18px/1.55 var(--font-sans); --t-body: 400 16px/1.55 var(--font-sans); --t-body-s: 400 14px/1.5 var(--font-sans); --t-caption: 400 12px/1.4 var(--font-sans); --t-eyebrow: 600 11px/1.2 var(--font-sans); /* uppercase, tracked */ --t-mono-s: 400 12px/1.45 var(--font-mono); --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-eyebrow: 0.18em; /* ---------- SPACING ---------- */ --space-0: 0; --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; --space-11: 192px; /* ---------- RADII ---------- */ --r-0: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; /* ---------- SHADOWS ---------- */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.5); --shadow-2: 0 8px 24px rgba(0,0,0,0.45); --shadow-3: 0 24px 64px rgba(0,0,0,0.6); --shadow-glow-red: 0 0 0 1px var(--wcg-red), 0 0 24px rgba(200,16,46,0.35); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; /* ---------- LAYOUT ---------- */ --container-max: 1320px; --gutter: 24px; --gutter-lg: 48px; } /* ========================================================================= SEMANTIC TYPOGRAPHY ========================================================================= */ .t-display-xl { font: var(--t-display-xl); letter-spacing: var(--tracking-tight); } .t-display-l { font: var(--t-display-l); letter-spacing: var(--tracking-tight); } .t-display-m { font: var(--t-display-m); letter-spacing: var(--tracking-tight); } .t-h1 { font: var(--t-h1); letter-spacing: var(--tracking-tight); } .t-h2 { font: var(--t-h2); letter-spacing: var(--tracking-tight); } .t-h3 { font: var(--t-h3); } .t-h4 { font: var(--t-h4); } .t-body-l { font: var(--t-body-l); } .t-body { font: var(--t-body); } .t-body-s { font: var(--t-body-s); } .t-caption{ font: var(--t-caption); color: var(--fg-3); } .t-eyebrow{ font: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-2); } /* ========================================================================= BASE ========================================================================= */ html, body { background: var(--bg-1); color: var(--fg-1); font: var(--t-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-hover); } ::selection { background: var(--wcg-red); color: var(--wcg-white); }