/* ============================================================ TEE TIME — CLUBHOUSE DESIGN TOKENS ------------------------------------------------------------ The single source of truth for color, type, space, and shape across every room of the Virtual Clubhouse: web, admin, and the mobile app (mirrored in tokens.app.js, kept honest by `npm run check:tokens`). THE RECONCILIATION Before this file there were three palettes in the repo: · base.css #e8793c orange on #1b2430 cool navy (documented as "replacing Toptracer teal" — a retrofit, not a brand decision) · tee-time.css #CE6428 orange on #1F0E00 espresso, cream ink (sampled from the actual Tee Time logo) · portal.css a third drift of the same idea The clubhouse anchors on the LOGO-DERIVED palette, because it is the only one traceable to the brand itself. The cool navy is kept — but demoted from "brand color" to what it was always good at: a dark surface for live score screens, where warm darks muddy the red/green of under/over par. Every value below is either a brand token (--tt-*) or a semantic token (--room-*, --surface-*, --ink-*). Rooms override SEMANTIC tokens only. Never redefine a --tt-* value downstream. ============================================================ */ /* ============================================================ MANROPE — the app's typeface, self-hosted ------------------------------------------------------------ The same files teetime-mobile bundles in src/assets/fonts/, converted TTF -> WOFF2. Four weights, 30 KB each: Regular, Medium, SemiBold, Bold. The app bundles seven; shipping weights nothing renders is pure download. SELF-HOSTED RATHER THAN GOOGLE FONTS, on purpose: · byte-identical glyphs to the app, so a heading is the same shape on both surfaces rather than merely the same name · no third-party request on the critical path, and no dependency on fonts.googleapis.com being reachable · font-display: swap, so text is readable immediately in the fallback and reflows once — the alternative is invisible text for as long as the download takes The fallback stack is the system sans the site used before, so a blocked or failed font degrades to what it always looked like. ============================================================ */ @font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-Bold.woff2') format('woff2'); /* 700 AND 800: the web asks for 900 in places and Manrope has no 900 face. Without this the browser synthesises one by smearing Bold, which looks like a rendering fault next to the app. */ font-weight: 700 900; font-style: normal; font-display: swap; } :root { /* ── BRAND: Foliage ────────────────────────────────────── Sampled from the Tee Time logo. These never change per room. THE ACCENT IS THE APP'S ACCENT. #D26D22 is `primary` in teetime-mobile/src/themes/BaseColor.ts — the value the app actually paints every button and link with. It used to be #CE6428, and nothing caught that because check-tokens.js compared tokens.css against tokens.app.js, two files in THIS repo, neither of which the app reads. The guardrail was comparing two copies of a value the app does not use. `npm run check:mobile` compares against the app itself and would not have let this stand. As a bonus it is closer to the logo's own #DA6B21, which assets/README.md has flagged as an open mismatch since the logo landed. */ --tt-orange: #D26D22; /* signature — app `primary` */ --tt-orange-glow: #E27A3D; /* hover / highlight */ --tt-orange-warm: #F09256; /* soft hover, tints */ --tt-orange-deep: #8B3A0F; /* rust, pressed states */ --tt-cream: #F5E6D3; /* the logo's ink — warm off-white */ --tt-cream-soft: #FBF6EE; /* light page background */ --tt-cream-hover: #EAD5B7; --tt-espresso: #1F0E00; /* deep warm brown — grounded contrast */ --tt-espresso-2: #3A1C08; /* softer than pure espresso */ --tt-gold: #F0C86F; /* sparkle accent — used sparingly */ /* ── BRAND: Course (functional dark) ───────────────────── Retained from base.css for live-score surfaces only. Warm darks make sub-par red and over-par green hard to separate; these cool darks don't. Not a general-purpose brand color. */ --tt-night: #1B2430; --tt-night-deep: #131A24; --tt-night-raised: #26313F; /* ── BRAND: Scoring ────────────────────────────────────── Reserved meanings. Do not reuse these for decoration — on a leaderboard they read as strokes, everywhere. */ --tt-under: #D6453C; /* under par (golf convention: red) */ --tt-over: #2F7D4F; /* over par */ --tt-even: #7A6A5A; /* level par */ --tt-eagle: #C9A227; /* eagle or better */ /* ── BRAND: Status ─────────────────────────────────────── THE APP'S. `textSuccess300`, `textWarning400`, `textDanger300` in BaseColor.ts. They used to be muted to sit on cream; the app's are brighter, and a member should not see one product report an error in two different reds. --tt-live stays ours: the app has no live-scoring pulse, and it is a Tee Time Live signature rather than a status colour. */ --tt-live: #E2483D; /* the LIVE pulse — nothing else */ --tt-good: #158e54; /* app textSuccess300 */ --tt-warn: #ffc62b; /* app textWarning400 */ --tt-bad: #eb2444; /* app textDanger300 */ --tt-info: #3A6B8C; /* no app counterpart — ours */ /* ── APP: Neutral ramp ─────────────────────────────────── BaseColor.ts `textNeutral0`–`600`, verbatim. Cool greys, not the warm browns the web had. This is the ramp the semantic ink and line tokens below are now built from, so the two surfaces share one idea of "grey". */ --n-0: #F3F4F8; --n-50: #E7E9EE; --n-100: #D2D4DA; --n-200: #777986; --n-300: #5B5D6B; --n-400: #404252; --n-500: #282A3A; --n-600: #101223; /* ── APP: Accent tints ─────────────────────────────────── `primary00` and `primary100`. The app paints selected rows, chips and highlighted cards with these. The web had nothing equivalent and reached for cream, which is why "selected" looked different on the two surfaces. */ --accent-tint: #FCF1EA; /* app primary00 */ --accent-tint-2: #F6D4C0; /* app primary100 */ /* ── SEMANTIC: Surfaces ────────────────────────────────── THE APP'S LIGHT THEME. `backgroundColor`, `inputFillWhite` and `textNeutral0` in BaseColor.ts. These were cream and espresso. The brand tokens above still are — cream and espresso remain the Tee Time palette and are what the logo, the tile scrims and the footer are painted with. What changed is the CHROME: the page a member reads text on now matches the app's, because that is the surface they compare when they switch device. Rooms still override these. Dark mode is deliberately not here yet — the app has a darkTheme and the web will get it as a second pass. */ --surface: #F9FAFF; /* app backgroundColor */ --surface-raised: #FFFFFF; /* app inputFillWhite */ --surface-sunken: var(--n-0); /* app textNeutral0 */ --surface-inverse: var(--tt-espresso); /* ── SEMANTIC: Ink ───────────────────────────────────────*/ --ink: var(--n-600); --ink-muted: var(--n-300); --ink-faint: var(--n-200); --ink-inverse: var(--tt-cream); --ink-inverse-muted: rgba(245, 230, 211, 0.72); /* ── SEMANTIC: Line & accent ───────────────────────────── The app uses flat greys for borders, not a tint of the text colour. Flat wins here: a translucent brown line over the app's cool surfaces goes muddy. */ --line: #EFEFEF; /* app border */ --line-strong: var(--n-100); /* app borderColor */ --accent: var(--tt-orange); --accent-hover: var(--tt-orange-glow); --accent-ink: var(--tt-cream); /* text ON accent */ /* ── SHAPE ─────────────────────────────────────────────── Rounded everywhere. The smallest radius here is larger than most sites' largest — that softness is the brand. */ --r-sm: 12px; --r-md: 20px; --r-lg: 32px; --r-xl: 48px; --r-pill: 999px; /* ── SPACE — 4px base scale ──────────────────────────────*/ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ── TYPE ──────────────────────────────────────────────── MANROPE, the app's typeface, self-hosted from the same files the app bundles — see the @font-face block below. Display and body are the same family now. Playfair Display was here for headlines; it is a serif, the app has no serif anywhere, and type is the FIRST thing that reads as a different product because it is on every line. --font-display stays as a separate token so weight and tracking can differ from body without every heading being rewritten. */ --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --t-xs: 0.78rem; --t-sm: 0.88rem; --t-base: 1rem; --t-md: 1.14rem; --t-lg: 1.4rem; --t-xl: 1.9rem; --t-2xl: 2.6rem; --t-3xl: 3.6rem; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.65; /* ── ELEVATION ─────────────────────────────────────────── Warm-tinted shadows. Neutral grey shadows read as dirt against cream. */ --shadow-sm: 0 1px 3px rgba(31, 14, 0, 0.07); --shadow-md: 0 4px 16px rgba(31, 14, 0, 0.09); --shadow-lg: 0 12px 40px rgba(31, 14, 0, 0.13); --shadow-accent: 0 8px 28px rgba(206, 100, 40, 0.28); /* ── MOTION ──────────────────────────────────────────────*/ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* ── LAYOUT ──────────────────────────────────────────────*/ --width-page: 1180px; --width-prose: 68ch; --nav-height: 72px; /* tall enough for the full logo lockup */ } /* ============================================================ ROOM THEMES A room sets ONE attribute on or and inherits a coherent surface treatment. Brand tokens stay fixed. ============================================================ */ /* The Lounge — live scores. Cool dark, for score legibility. */ [data-room-theme="lounge"] { --surface: var(--tt-night); --surface-raised: var(--tt-night-raised); --surface-sunken: var(--tt-night-deep); --surface-inverse: var(--tt-cream-soft); --ink: #FFFFFF; --ink-muted: rgba(255, 255, 255, 0.72); --ink-faint: rgba(255, 255, 255, 0.45); --ink-inverse: #1C1410; --ink-inverse-muted: #7A6A5A; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.24); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.48); } /* The Back Office — admin. Neutral, dense, low-chrome. Work, not brand. */ [data-room-theme="backoffice"] { --surface: #F7F7F6; --surface-raised: #FFFFFF; --surface-sunken: #EDEDEB; --ink: #1A1A18; --ink-muted: #61615C; --ink-faint: #92928B; --line: rgba(0, 0, 0, 0.11); --line-strong: rgba(0, 0, 0, 0.2); /* Admin runs tighter than the public rooms. */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; } /* ============================================================ ACCESSIBILITY BASELINE ============================================================ */ *:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }