/* ═══════════════════════════════════════════════════════════════════════════ ClubLogic public site — BASE layer (tokens, reset, theme, motion) MPP 15316462 P11 (dffc6258). Design pass: docs/design-public-site-2026-08.md Token names and values MIRROR clublogic-mobile/src/theme/colors.ts via C:/ClubLogic/docs/design/aloha-kit-spec.html. Copied, not reinvented — a marketing site that drifts from the app's palette is a bug that ships silently. If the app's palette moves, move these with it. THEMING. `data-theme` on takes dark | light | auto. `auto` is the DEFAULT and follows prefers-color-scheme. The auto block is a [data-theme="auto"] selector INSIDE a light media query — never a bare :root override — so an explicit user choice is not fighting a media query for specificity. SCOPE. This file is linked by EVERY page on the site, new and legacy. It carries only what is safe to drop on top of a page that already has its own bespoke stylesheet: the tokens, a reset identical to the one those pages already declare, focus, the theme switch, and the motion rules. The layout/component system lives in clublogic.css and is opted into by the rebuilt marketing pages only, so linking this file can never restyle a legacy page's sections, headings or cards out from under it. MOTION. Nothing on this site is ever left at opacity:0 waiting for JavaScript. The reveal is opt-IN: markup renders in its final readable state, and the animation only ever runs as a transient on an element the script has just seen enter the viewport. JS off => full page. Reduced motion => full page, instantly. See §MOTION below. ═══════════════════════════════════════════════════════════════════════════ */ /* ── TOKENS ──────────────────────────────────────────────────────────────── */ :root { /* brand */ --primary: #22c55e; --primary-dark: #166534; --primary-light: #86efac; --brand-forest: #16a34a; --brand-mint: #34d399; --on-primary: #000; /* Avatar chip. Its own pair rather than a reused brand green, because white ink on --brand-forest is only 3.3:1 and an initial is 12px text. */ --avatar-bg: #166534; --avatar-ink: #fff; --primary-tint: rgba(34, 197, 94, .08); --primary-tint-strong: rgba(34, 197, 94, .15); /* surfaces */ --bg: #0a0a0a; --bg-card: #111111; --bg-surface: #1a1a1a; --bg-hover: #222222; --bg-glass: rgba(10, 10, 10, .85); --wash: rgba(255, 255, 255, .04); --wash-strong: rgba(255, 255, 255, .08); /* text */ --text-primary: #f5f5f5; --text-secondary: #a3a3a3; --text-muted: #858585; --text-faint: #666666; /* lines */ --border: #262626; --border-light: #333333; /* status */ --success: #22c55e; --warning: #eab308; --error: #ef4444; --info: #3b82f6; /* capability status — see the truthfulness contract in the design doc. Each of these ALWAYS ships with its word on the page; colour is never the only signal. */ --status-live: #22c55e; --status-live-tint: rgba(34, 197, 94, .12); --status-preview: #eab308; --status-preview-tint: rgba(234, 179, 8, .12); --status-dev: #c084fc; --status-dev-tint: rgba(192, 132, 252, .14); --status-soon: #60a5fa; --status-soon-tint: rgba(96, 165, 250, .12); --status-planned: #94a3b8; --status-planned-tint: rgba(148, 163, 184, .12); /* per-person accents (the founders page runs one hue per founder). Light values are darkened to clear 4.5:1 as text on the light canvas — #eab308 on white is 2.0:1 and would be illegal body text. */ --accent-1: #22c55e; --accent-2: #c084fc; --accent-3: #eab308; --accent-4: #60a5fa; /* elevation */ --shadow-card: 0 20px 60px rgba(0, 0, 0, .5); --shadow-float: 0 4px 6px rgba(0, 0, 0, .3); /* motion — Aloha: short, functional, no bounce */ --ease: cubic-bezier(.4, 0, .2, 1); --t-color: .2s; --t-transform: .15s; /* metrics */ --wrap: 1100px; --wrap-wide: 1200px; --nav-h: 64px; color-scheme: dark; } [data-theme="light"] { --primary: #15803d; --primary-dark: #166534; --primary-light: #16a34a; --brand-forest: #166534; --brand-mint: #15803d; --on-primary: #fff; --avatar-bg: #15803d; --avatar-ink: #fff; --primary-tint: rgba(22, 163, 74, .08); --primary-tint-strong: rgba(22, 163, 74, .15); --bg: #fefdfb; --bg-card: #ffffff; --bg-surface: #f8f7f4; --bg-hover: #f1f0ec; --bg-glass: rgba(254, 253, 251, .85); --wash: rgba(15, 17, 21, .03); --wash-strong: rgba(15, 17, 21, .06); --text-primary: #0f1115; --text-secondary: #4a5568; --text-muted: #6b7280; --text-faint: #78808f; --border: #e5e7eb; --border-light: #d1d5db; --success: #16a34a; --warning: #a16207; --error: #dc2626; --info: #2563eb; --status-live: #166534; --status-live-tint: rgba(22, 101, 52, .1); --status-preview: #854d0e; --status-preview-tint: rgba(133, 77, 14, .1); --status-dev: #7e22ce; --status-dev-tint: rgba(126, 34, 206, .1); --status-soon: #1d4ed8; --status-soon-tint: rgba(29, 78, 216, .1); --status-planned: #52606d; --status-planned-tint: rgba(82, 96, 109, .1); --accent-1: #166534; --accent-2: #7e22ce; --accent-3: #854d0e; --accent-4: #1d4ed8; --shadow-card: 0 20px 60px rgba(15, 17, 21, .1); --shadow-float: 0 4px 6px rgba(15, 17, 21, .12); color-scheme: light; } @media (prefers-color-scheme: light) { [data-theme="auto"] { --primary: #15803d; --primary-dark: #166534; --primary-light: #16a34a; --brand-forest: #166534; --brand-mint: #15803d; --on-primary: #fff; --avatar-bg: #15803d; --avatar-ink: #fff; --primary-tint: rgba(22, 163, 74, .08); --primary-tint-strong: rgba(22, 163, 74, .15); --bg: #fefdfb; --bg-card: #ffffff; --bg-surface: #f8f7f4; --bg-hover: #f1f0ec; --bg-glass: rgba(254, 253, 251, .85); --wash: rgba(15, 17, 21, .03); --wash-strong: rgba(15, 17, 21, .06); --text-primary: #0f1115; --text-secondary: #4a5568; --text-muted: #6b7280; --text-faint: #78808f; --border: #e5e7eb; --border-light: #d1d5db; --success: #16a34a; --warning: #a16207; --error: #dc2626; --info: #2563eb; --status-live: #166534; --status-live-tint: rgba(22, 101, 52, .1); --status-preview: #854d0e; --status-preview-tint: rgba(133, 77, 14, .1); --status-dev: #7e22ce; --status-dev-tint: rgba(126, 34, 206, .1); --status-soon: #1d4ed8; --status-soon-tint: rgba(29, 78, 216, .1); --status-planned: #52606d; --status-planned-tint: rgba(82, 96, 109, .1); --accent-1: #166534; --accent-2: #7e22ce; --accent-3: #854d0e; --accent-4: #1d4ed8; --shadow-card: 0 20px 60px rgba(15, 17, 21, .1); --shadow-float: 0 4px 6px rgba(15, 17, 21, .12); color-scheme: light; } } /* ── RESET + BASE ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text-primary); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--t-color) var(--ease), color var(--t-color) var(--ease); } img, svg { max-width: 100%; } img { height: auto; display: block; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Focus is ALWAYS drawn. Both schemes, cards and buttons alike. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--primary); color: var(--on-primary); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700; font-size: 14px; } .skip-link:focus { left: 0; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── THEME SWITCH ────────────────────────────────────────────────────────── */ .cl-theme { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; } .cl-theme button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--t-color) var(--ease), color var(--t-color) var(--ease); } .cl-theme button:hover { color: var(--text-primary); background: var(--bg-hover); } .cl-theme button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); } .cl-theme svg { width: 15px; height: 15px; } /* ═══════════ MOTION ══════════════════════════════════════════════════════ Rule 1 — motion is never required to understand content. Rule 2 — the page is correct with JavaScript off. NOTHING below ever parks an element at opacity:0 in a resting state. `.reveal` is an ordinary visible element; the script adds `.cl-in` at the moment the element crosses into the viewport and the animation plays as a transient. Script never runs => nothing hidden. Rule 3 — prefers-reduced-motion removes motion, not information. Rule 4 — the only loops are brand atmosphere, and they stop under Rule 3. ═════════════════════════════════════════════════════════════════════════ */ @keyframes cl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes cl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .cl-in { animation: cl-rise .24s var(--ease) both; } .cl-in.s1 { animation-delay: .04s; } .cl-in.s2 { animation-delay: .08s; } .cl-in.s3 { animation-delay: .12s; } .cl-in.s4 { animation-delay: .16s; } .cl-in.s5 { animation-delay: .2s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── LEGACY INLINE BRAND MARK ──────────────────────────────────────────────── The secondary pages carry the original inline neural mark, whose node fills are presentation attributes pinned to the dark canvas. A CSS rule beats a presentation attribute (those carry specificity 0), so the theme wins here without touching a single one of those SVGs. */ svg circle[fill="#0a0a0a"] { fill: var(--bg); } svg circle[fill="#0f1f14"] { fill: var(--bg-surface); } svg .wm-club { fill: var(--brand-mint); }