/* ========================================================================== TOKENS - the only file you touch to re-skin the site. Three layers, in this order: 1. SHARED type scale, spacing, radius, motion. Theme-independent. 2. THEME [data-theme="..."] on sets a palette. Each theme defines TWO surfaces: a base and a lighter alt. 3. SURFACE .surface-base / .surface-alt on a
remap the contextual aliases, so the same component renders correctly on either without knowing which it is on. Components must ONLY read the aliases (--bg, --fg, --rule, --brand-fg, --wash-rgb, --ground-rgb ...). No component may name a raw colour - that is what makes a new theme a 30-line addition rather than a rewrite. ========================================================================== */ :root { /* ---- Type ------------------------------------------------------------ */ --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-display-1: clamp(2.75rem, 1.10rem + 7.33vw, 6rem); --fs-display-2: clamp(2.125rem, 1.35rem + 3.44vw, 3.875rem); --fs-display-3: clamp(1.625rem, 1.22rem + 1.80vw, 2.5rem); --fs-h4: clamp(1.1875rem, 1.05rem + 0.60vw, 1.5rem); --fs-h5: clamp(1.0625rem, 1.00rem + 0.28vw, 1.1875rem); --fs-lead: clamp(1.0625rem, 0.99rem + 0.33vw, 1.1875rem); --fs-body: 1rem; --fs-small: 0.9375rem; --fs-caption: 0.8125rem; --fs-eyebrow: 0.6875rem; --lh-display: 0.94; --lh-heading: 1.06; --lh-body: 1.62; --lh-tight: 1.35; --ls-display: -0.035em; --ls-heading: -0.025em; --ls-body: -0.006em; --ls-eyebrow: 0.16em; --fw-display: 800; /* ---- Space ----------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4.5rem, 3.0rem + 6.5vw, 9rem); --section-y-tight: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem); /* ---- Container / grid ------------------------------------------------ */ /* The nav bar's height. Three things measure against it - the bar itself, the hero's top padding and the drawer's ceiling - so it is a token rather than the same number written out three times. */ --nav-h: 78px; --container: 1280px; --container-narrow: 880px; --gutter: clamp(1.25rem, 0.85rem + 1.8vw, 2.5rem); --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); /* ---- Radius ---------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px; /* ---- Motion ---------------------------------------------------------- */ --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 560ms; --dur-reveal: 820ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Layers ---------------------------------------------------------- */ --z-sticky: 20; --z-nav: 40; --z-drawer: 60; } /* The one rule that steps up. Below this 1280 is a measure; above it the same number is a strip down the middle of a wide screen, with the page's own furniture pulling apart around it - the nav row wants 1247px and a 1280 container only ever hands it 1200, and the hero photo drifts away from the copy it is supposed to meet. 80vw rather than a second fixed number, because 80% of 1600 is exactly the 1280 it replaces: the container widens from the breakpoint instead of jumping at it. It stops at 1920, which a 2400px screen reaches. Widening this does not lengthen a single line of text. Every prose block on the page is capped in ch - .lead at 54, the hero lead at 48, and a dozen more - so what grows is the grids and the cards, which is the point. */ @media (min-width: 1600px) { :root { --container: min(80vw, 1920px); } } /* ========================================================================== THEME 1 - FAIRWAY Deep forest green base, bright off-white alt. Lime accent. Contrast ratios in the comments are measured, not estimated. ========================================================================== */ [data-theme='fairway'] { --theme-name: 'Fairway'; /* base surface - deep green */ --b-bg: #1D2711; /* hue 88 - the brand's own family */ --b-raise: #2C3A1D; --b-bg-deep: #141B0B; --b-bg-rgb: 29 39 17; --b-wash-rgb: 255 255 255; /* panels and edges are white washes */ --b-fg: #F2F7EE; /* 16.53:1 */ --b-fg-muted: #A8BCA0; /* 8.87:1 */ --b-fg-dim: #94A38F; /* 4.70:1 - large text and UI only */ --b-brand: #A3C93F; /* 9.40:1 */ --b-brand-rgb: 163 201 63; --b-on-brand: #1D2711; /* 8.6:1 on the lime fill */ /* alt surface - light */ --a-bg: #F4F5F0; --a-raise: #E9EAE3; --a-bg-deep: #DEDFD6; --a-bg-rgb: 244 245 240; --a-wash-rgb: 11 26 14; /* panels and edges are dark washes */ --a-fg: #12210F; /* 15.9:1 */ --a-fg-muted: #55634F; /* 6.6:1 */ --a-fg-dim: #626C59; /* 3.6:1 - large text and UI only */ --a-brand: #3D5A15; /* 7.5:1 - olive darkened to carry text */ --a-brand-rgb: 61 90 21; --a-on-brand: #FFFFFF; /* 7.5:1 on the olive fill */ --tier-1: #5C6B62; --tier-2: #267147; --tier-3: #9C5309; --tier-4: #6C43C9; --tier-5: #B3123C; --tier-1-on-dark: #9DB3A6; --tier-2-on-dark: #5FC98D; --tier-3-on-dark: #F0913A; --tier-4-on-dark: #B79BFF; --tier-5-on-dark: #FF7396; --accent: #E07A1F; --accent-ink: #A85606; /* orange as TEXT on a light ground */ --brand-bg: #3F6614; --brand-bg-fg: #F0F7DE; /* 8.68:1 */ --brand-bg-muted: #DCEBC0; /* 6.58:1 */ --brand-bg-dim: #CEE0AB; /* 4.92:1 */ } /* ========================================================================== THEME 2 - CLUBHOUSE Bright canvas base, deep green alt. The inverse of Fairway; matches the app and admin panel most closely. ========================================================================== */ [data-theme='clubhouse'] { --theme-name: 'Clubhouse'; --b-bg: #F6F7F3; --b-raise: #EAECE4; --b-bg-deep: #DFE1D8; --b-bg-rgb: 246 247 243; --b-wash-rgb: 15 23 42; --b-fg: #10200D; /* 16.6:1 */ --b-fg-muted: #53614D; /* 6.9:1 */ --b-fg-dim: #626D5B; /* 3.7:1 */ --b-brand: #3D5A15; /* 7.9:1 */ --b-brand-rgb: 61 90 21; --b-on-brand: #FFFFFF; --a-bg: #2A3C1B; /* hue 92 - was 134, a different family */ --a-raise: #374B25; --a-bg-deep: #1E2C13; --a-bg-rgb: 42 60 27; --a-wash-rgb: 255 255 255; --a-fg: #F3F8EF; /* 13.9:1 */ --a-fg-muted: #B2C6AC; /* 6.5:1 on the section, 4.7:1 on a card */ --a-fg-dim: #A8B8A2; /* 4.1:1 */ --a-brand: #A9CF45; /* 8.2:1 */ --a-brand-rgb: 169 207 69; --a-on-brand: #10200D; --tier-1: #5E6E64; --tier-2: #257A49; --tier-3: #A9560C; --tier-4: #5D34BE; --tier-5: #B01340; --tier-1-on-dark: #A6BAAE; --tier-2-on-dark: #63CE92; --tier-3-on-dark: #F4A65C; --tier-4-on-dark: #BCA2FF; --tier-5-on-dark: #FF7C9C; /* --accent is a FILL token and is the same in every theme; --accent-ink is the variant safe to use as text on a light ground. A darker fill here made the Most-popular badge fail at 4.08:1. */ --accent: #E07A1F; --accent-ink: #A85606; /* Must not collide with --a-raise (#24492D) or the brand block stops reading as punctuation and just looks like another alt section. */ --brand-bg: #366B18; --brand-bg-fg: #F0F7DE; /* 7.87:1 */ --brand-bg-muted: #DCEBC0; /* 5.96:1 */ --brand-bg-dim: #CEE0AB; /* 4.46:1 - large text and UI only */ } /* ========================================================================== THEME 3 - MIDNIGHT Near-black slate base, cool light alt. Led by the FF orange rather than the green - the most "performance tech" of the three. ========================================================================== */ [data-theme='midnight'] { --theme-name: 'Midnight'; --b-bg: #1D1916; /* hue 28 - warmed to the brand orange */ --b-raise: #2E2824; --b-bg-deep: #14110F; --b-bg-rgb: 29 25 22; --b-wash-rgb: 255 255 255; --b-fg: #F7F5F3; /* 16.05:1 */ --b-fg-muted: #B5ADA5; /* 7.89:1 */ --b-fg-dim: #968F88; /* 4.02:1 - large text and UI only */ --b-brand: #F0913A; /* 8.4:1 */ --b-brand-rgb: 240 145 58; --b-on-brand: #1D1916; --a-bg: #F6F5F4; --a-raise: #ECE8E4; --a-bg-deep: #E1DBD5; --a-bg-rgb: 246 245 244; --a-wash-rgb: 10 12 16; --a-fg: #0F1319; /* 17.0:1 */ --a-fg-muted: #545C68; /* 6.9:1 */ --a-fg-dim: #616873; /* 3.8:1 */ --a-brand: #9A4A07; /* 5.05:1 on the raised light ground */ --a-brand-rgb: 154 74 7; --a-on-brand: #FFFFFF; --tier-1: #5F6875; --tier-2: #1F7A4D; --tier-3: #A0500A; --tier-4: #5B37C4; --tier-5: #B41442; --tier-1-on-dark: #A2AAB8; --tier-2-on-dark: #4FC98A; --tier-3-on-dark: #F0913A; --tier-4-on-dark: #A78BFA; --tier-5-on-dark: #FF7A9B; --accent: #E07A1F; --accent-ink: #A85606; /* orange as TEXT on a light ground */ --brand-bg: #6B3405; --brand-bg-fg: #FDE8D2; /* 8.33:1 */ --brand-bg-muted: #EFC49B; /* 6.15:1 */ --brand-bg-dim: #D5A77E; /* 4.34:1 - large text and UI only */ } /* ========================================================================== SURFACES The page runs ONE dominant rhythm: value alternates section to section, so no two neighbours ever share a ground. Five surfaces, each a real step - a 5% nudge reads as a rendering artefact, not as design. .surface-base A the theme's ground .surface-raise B a visible step from A, same hue .surface-alt C the contrasting break (light on a dark theme) .surface-alt-2 C' a step from C, so the light run alternates too .surface-brand D saturated brand fill, used ONCE as punctuation Page order is A B A D C C' C C' B A B C A - no repeat across a boundary. Components read only the aliases below and never name a raw colour. ========================================================================== */ .surface-base, .surface-raise, .surface-alt, .surface-alt-2, .surface-brand { background-color: var(--bg); color: var(--fg); } [data-theme], .surface-base, .surface-raise { --bg: var(--b-bg); --bg-deep: var(--b-bg-deep); --bg-rgb: var(--b-bg-rgb); --wash-rgb: var(--b-wash-rgb); --fg: var(--b-fg); --fg-muted: var(--b-fg-muted); --fg-dim: var(--b-fg-dim); --brand-fg: var(--b-brand); --brand-rgb: var(--b-brand-rgb); --on-brand: var(--b-on-brand); } .surface-raise { --bg: var(--b-raise); } .surface-alt, .surface-alt-2 { --bg: var(--a-bg); --bg-deep: var(--a-bg-deep); --bg-rgb: var(--a-bg-rgb); --wash-rgb: var(--a-wash-rgb); --fg: var(--a-fg); --fg-muted: var(--a-fg-muted); --fg-dim: var(--a-fg-dim); --brand-fg: var(--a-brand); --brand-rgb: var(--a-brand-rgb); --on-brand: var(--a-on-brand); } .surface-alt-2 { --bg: var(--a-raise); } /* The one saturated block. Text is a pale tint of the brand hue rather than plain white, so it stays part of the palette. */ .surface-brand { --bg: var(--brand-bg); --bg-deep: var(--brand-bg); --bg-rgb: var(--b-bg-rgb); --wash-rgb: 255 255 255; --fg: var(--brand-bg-fg); --fg-muted: var(--brand-bg-muted); --fg-dim: var(--brand-bg-dim); --brand-fg: var(--brand-bg-fg); --brand-rgb: 255 255 255; --on-brand: var(--brand-bg); } /* Derived from --wash-rgb, so panels and hairlines are automatically white on a dark surface and near-black on a light one. */ [data-theme], .surface-base, .surface-raise, .surface-alt, .surface-alt-2, .surface-brand { --panel-1: rgb(var(--wash-rgb) / .055); --panel-2: rgb(var(--wash-rgb) / .09); --panel-3: rgb(var(--wash-rgb) / .13); --edge: rgb(var(--wash-rgb) / .14); --edge-strong: rgb(var(--wash-rgb) / .26); --edge-lit: rgb(var(--wash-rgb) / .38); /* An olive shadow on an olive ground is invisible. Shadows are black. */ --shadow-lift: 0 24px 60px -24px rgb(0 0 0 / .55); --shadow-float: 0 40px 90px -30px rgb(0 0 0 / .65); /* The shell of a device holding a real screenshot. Unlike every other token here it does NOT follow the surface: a phone is a physical object and stays dark whatever the page behind it is. Left theme-following, it resolves to the ground colour and the device vanishes around a light screenshot. The ring is wash-derived so the shell separates from a dark ground too. */ --device-frame: linear-gradient(165deg, #4C5155, #191C20 52%, #0A0C0E); --device-frame-ring: rgb(var(--wash-rgb) / .30); } /* ---- Card layer ---------------------------------------------------------- A card must always read as a plane ABOVE its ground. That needs two different mechanisms, not one token that flips sign: dark ground -> lighter wash + a lit top edge, no shadow light ground -> pure white + a real shadow, and NO lit edge (on light the edge inverts into a dark smudge across every card) */ [data-theme], .surface-base, .surface-raise, .surface-brand { --card-bg: rgb(var(--wash-rgb) / .065); --card-bg-hover: rgb(var(--wash-rgb) / .11); --card-bg-featured: rgb(var(--wash-rgb) / .11); --card-border: rgb(var(--wash-rgb) / .13); --card-border-hover: rgb(var(--wash-rgb) / .26); --card-lit: rgb(var(--wash-rgb) / .38); --card-shadow: none; --card-shadow-hover: none; --ghost-bg: var(--panel-1); --ghost-border: var(--edge-strong); --veil: .55; --device-bg: var(--bg-deep); } .surface-alt, .surface-alt-2 { --card-bg: #FFFFFF; --card-bg-hover: #FFFFFF; --card-bg-featured: #FFFFFF; --card-border: rgb(var(--wash-rgb) / .085); --card-border-hover: rgb(var(--brand-rgb) / .45); --card-lit: transparent; --card-shadow: 0 1px 2px rgb(var(--wash-rgb) / .045), 0 8px 20px -8px rgb(var(--wash-rgb) / .10); --card-shadow-hover: 0 2px 4px rgb(var(--wash-rgb) / .05), 0 22px 44px -16px rgb(var(--wash-rgb) / .18); --ghost-bg: transparent; --ghost-border: rgb(var(--wash-rgb) / .16); /* A ground-coloured veil over a photo on a LIGHT ground is a white haze - literally "washed out". */ --veil: .30; --device-bg: #FFFFFF; } /* A light surface needs real shadows; a dark one needs almost none, because a shadow on a dark ground is invisible and the lit top edge does the work. */ .surface-alt, .surface-alt-2 { --card: #FFFFFF; --card-hover: #FFFFFF; --shadow-lift: 0 1px 2px rgb(var(--wash-rgb) / .05), 0 8px 24px -8px rgb(var(--wash-rgb) / .14); --shadow-float: 0 2px 4px rgb(var(--wash-rgb) / .05), 0 24px 50px -16px rgb(var(--wash-rgb) / .22); } /* Tier colours flip with the value of the surface they sit on. */ .surface-base, .surface-raise, .surface-brand { --tone-1: var(--tier-1-on-dark); --tone-2: var(--tier-2-on-dark); --tone-3: var(--tier-3-on-dark); --tone-4: var(--tier-4-on-dark); --tone-5: var(--tier-5-on-dark); } .surface-alt, .surface-alt-2 { --tone-1: var(--tier-1); --tone-2: var(--tier-2); --tone-3: var(--tier-3); --tone-4: var(--tier-4); --tone-5: var(--tier-5); } /* Clubhouse's base IS the light one, so its shadows and tiers invert. */ [data-theme='clubhouse'] .surface-base, [data-theme='clubhouse'] .surface-raise { --card-bg: #FFFFFF; --card-bg-hover: #FFFFFF; --card-bg-featured: #FFFFFF; --card-border: rgb(var(--wash-rgb) / .085); --card-border-hover: rgb(var(--brand-rgb) / .45); --card-lit: transparent; --card-shadow: 0 1px 2px rgb(var(--wash-rgb) / .045), 0 8px 20px -8px rgb(var(--wash-rgb) / .10); --card-shadow-hover: 0 2px 4px rgb(var(--wash-rgb) / .05), 0 22px 44px -16px rgb(var(--wash-rgb) / .18); --ghost-bg: transparent; --ghost-border: rgb(var(--wash-rgb) / .16); --veil: .30; --device-bg: #FFFFFF; --shadow-lift: 0 1px 2px rgb(var(--wash-rgb) / .05), 0 8px 24px -8px rgb(var(--wash-rgb) / .14); --shadow-float: 0 2px 4px rgb(var(--wash-rgb) / .05), 0 24px 50px -16px rgb(var(--wash-rgb) / .22); --tone-1: var(--tier-1); --tone-2: var(--tier-2); --tone-3: var(--tier-3); --tone-4: var(--tier-4); --tone-5: var(--tier-5); } [data-theme='clubhouse'] .surface-alt, [data-theme='clubhouse'] .surface-alt-2 { --card-bg: rgb(var(--wash-rgb) / .065); --card-bg-hover: rgb(var(--wash-rgb) / .11); --card-bg-featured: rgb(var(--wash-rgb) / .11); --card-border: rgb(var(--wash-rgb) / .13); --card-border-hover: rgb(var(--wash-rgb) / .26); --card-lit: rgb(var(--wash-rgb) / .38); --card-shadow: none; --card-shadow-hover: none; --ghost-bg: var(--panel-1); --ghost-border: var(--edge-strong); --veil: .55; --device-bg: var(--bg-deep); --shadow-lift: 0 24px 60px -24px rgb(var(--bg-rgb) / .5); --shadow-float: 0 40px 90px -30px rgb(var(--bg-rgb) / .6); --tone-1: var(--tier-1-on-dark); --tone-2: var(--tier-2-on-dark); --tone-3: var(--tier-3-on-dark); --tone-4: var(--tier-4-on-dark); --tone-5: var(--tier-5-on-dark); } /* The document ground, so overscroll and the area behind the nav match. */ html { background-color: var(--b-bg); }