/* ========================================================================== The Founders Arena — Design Tokens Source of truth: TFABrandSheet.pdf (approved master, logo standards) ========================================================================== */ :root { /* ---- Brand primaries (verbatim from brand sheet) ------------------- */ --tfa-purple: #4C20BE; /* Electric Purple — gradient start */ --tfa-magenta: #DA538F; /* Arena Magenta — gradient end/ARENA */ --tfa-charcoal: #0B0D10; /* Arena Charcoal — preferred bg */ --tfa-white: #FFFFFF; /* Secondary mark */ /* ---- Signature gradient -------------------------------------------- */ --tfa-gradient: linear-gradient(90deg, var(--tfa-purple) 0%, var(--tfa-magenta) 100%); --tfa-gradient-diag: linear-gradient(135deg, var(--tfa-purple) 0%, var(--tfa-magenta) 100%); --tfa-gradient-soft: linear-gradient(135deg, rgba(76,32,190,.18) 0%, rgba(218,83,143,.18) 100%); /* ---- Text gradients ------------------------------------------------- The brand gradient is a FILL. Clipped to text on charcoal, its purple end sits at 2.09:1 and effectively disappears — worst at small sizes like the eyebrow labels. These variants keep the same purple-to-magenta read while staying legible at both ends. */ --tfa-gradient-text: linear-gradient(90deg, #B296F7 0%, #E36FA3 100%); /* 7.97:1 → 6.55:1 on charcoal */ --tfa-gradient-text-light: linear-gradient(90deg, #4C20BE 0%, #BE3877 100%); /* 9.30:1 → 5.22:1 on white */ /* ---- Purple ramp ---------------------------------------------------- #4C20BE is a FILL colour, not a text colour: it scores 2.09:1 on charcoal and fails WCAG AA for any text use on dark. Use the ramp below for text, links, icons and borders on dark surfaces. */ --tfa-purple-900: #2A1069; --tfa-purple-800: #3A1691; --tfa-purple-700: #4C20BE; /* = brand primary */ --tfa-purple-600: #6231D6; --tfa-purple-500: #7C4DEA; --tfa-purple-400: #9670F2; /* 5.46:1 on charcoal — AA body text */ --tfa-purple-300: #B296F7; /* 7.97:1 on charcoal — AAA body */ --tfa-purple-200: #CDBBFA; --tfa-purple-100: #E7DDFD; --tfa-purple-050: #F4EEFB; /* ---- Magenta ramp --------------------------------------------------- */ --tfa-magenta-900: #6E1A44; --tfa-magenta-800: #96265D; --tfa-magenta-700: #BE3877; --tfa-magenta-600: #DA538F; /* = brand primary, 5.2:1 on charcoal */ --tfa-magenta-500: #E36FA3; --tfa-magenta-400: #EC8DB8; --tfa-magenta-300: #F3AFCE; --tfa-magenta-200: #F8CCE0; --tfa-magenta-100: #FCE7F0; /* ---- Neutrals (charcoal-tinted, not pure grey) ---------------------- */ --tfa-ink-950: #0B0D10; /* = Arena Charcoal, page background */ --tfa-ink-900: #12151A; /* raised surface / card on dark */ --tfa-ink-850: #191D24; /* card hover / input bg */ --tfa-ink-800: #232830; /* hairline borders on dark */ --tfa-ink-700: #363C47; --tfa-ink-500: #6B7280; --tfa-ink-400: #9CA3AF; /* 7.7:1 on charcoal — muted body */ --tfa-ink-300: #B9BFC9; /* 10.5:1 — secondary body */ --tfa-ink-200: #D6DAE1; --tfa-ink-100: #EDEFF2; /* light-mode page background */ --tfa-ink-000: #FFFFFF; /* ---- Semantic: dark surfaces (default expression) ------------------- */ --bg-page: var(--tfa-ink-950); --bg-surface: var(--tfa-ink-900); --bg-surface-raised: var(--tfa-ink-850); --border-subtle: var(--tfa-ink-800); --border-strong: var(--tfa-ink-700); --text-primary: var(--tfa-white); --text-secondary: var(--tfa-ink-300); --text-muted: var(--tfa-ink-400); --text-accent: var(--tfa-purple-300); --link: var(--tfa-purple-300); --link-hover: var(--tfa-magenta-500); --focus-ring: var(--tfa-magenta-500); /* ---- Semantic: light surfaces --------------------------------------- */ --bg-page-light: var(--tfa-ink-000); --bg-surface-light: var(--tfa-purple-050); --border-subtle-light: #E4DCED; --text-primary-light: var(--tfa-ink-950); --text-secondary-light: #3F4652; --text-accent-light: var(--tfa-purple-700); /* 9.3:1 on white */ /* ---- Type ------------------------------------------------------------ Display face echoes the wordmark: wide, geometric, tight tracking. Body face is a neutral grotesque tuned for long-form reading. */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif; --font-mono: Arial, "Helvetica Neue", Helvetica, sans-serif; /* Type scale — fixed sizes from the client's typography standard, not a fluid scale. Base values are mobile; the desktop block below overrides. */ --fs-h1: 38px; --lh-h1: 1.05; --fw-h1: 700; --fs-h2: 32px; --lh-h2: 1.10; --fw-h2: 700; --fs-h3: 25px; --lh-h3: 1.15; --fw-h3: 600; --fs-h4: 22px; --lh-h4: 1.20; --fw-h4: 600; --fs-h5: 18px; --lh-h5: 1.20; --fw-h5: 600; --fs-body-lg: 17px; --fs-body: 16px; --fs-caption: 14px; --fs-btn: 16px; --lh-body: 1.5; --lh-caption: 1.4; /* Legacy aliases so no rule falls back to an undefined size. */ --step--1: var(--fs-caption); --step-0: var(--fs-body); --step-1: var(--fs-body-lg); --step-2: var(--fs-h3); --step-3: var(--fs-h2); --step-4: var(--fs-h2); --step-5: var(--fs-h1); --step-6: var(--fs-h1); --tracking-display: -0.02em; --tracking-eyebrow: 0.18em; /* matches the wordmark's letterspacing */ --leading-display: 1.03; --leading-heading: 1.15; --leading-body: 1.5; /* ---- Space (4px base) ------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Layout ---------------------------------------------------------- */ --container: 1200px; --container-wide: 1440px; --container-text: min(72ch, 800px); --gutter: clamp(1rem, 4vw, 3rem); /* ---- Radius, shadow, motion ------------------------------------------ */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(0,0,0,.28); --shadow-md: 0 12px 32px rgba(0,0,0,.36); --shadow-lg: 0 24px 64px rgba(0,0,0,.44); --shadow-glow: 0 0 48px rgba(124,77,234,.28); --ease: cubic-bezier(.22,.61,.36,1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; /* ---- Logo clear space ------------------------------------------------ Brand sheet: clear space = height of the TFA top bar ≈ 0.18 × mark height. Apply as padding around every logo instance. */ --logo-clearspace: 0.18em; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } /* Desktop sizes from the same standard. 782px keeps this in step with the breakpoint the responsive sources already use. */ @media (min-width: 782px){ :root{ --fs-h1: 54px; --fs-h2: 42px; --fs-h3: 30px; --fs-h4: 24px; --fs-h5: 20px; --fs-body-lg: 18px; } }