/* * Hydive white-label seam — how a club's own brand gets onto its surfaces. * * Loaded immediately AFTER tokens.css on every surface, and served from the * same publish root (/shared/whitelabel.css). tokens.css defines Hydive's one * brand; this file defines which parts of it a club is allowed to replace, * and where. * * The core idea is a BOUNDARY, not a global theme. A club owns the surfaces * its members and the public see. Hydive owns the surfaces that run the club. * Surfaces read --brand-* for the handful of themable properties; --brand-* * resolves per zone, stamped as data-brand on each surface's : * * data-brand="club" The club's house — clubsite, member. Fully the * club's brand; Hydive is a credit ("powered by"). * data-brand="shared" Club hardware seen by members — kiosk, desk. The * club's colour and name so a member at the gate * knows whose pool this is, but Hydive's type, radii * and label register: staff move between clubs and * the support line has to recognise the screen it is * being described over the phone. * data-brand="platform" Hydive's tool — board, manage, lifeguard, onboard, * auth and the marketing site. Never re-skinned. The * club is identified by NAME in the header, never by * colour. * * Every --brand-* default below resolves to Hydive's own --hd-* value, so a * page that loads no club theme renders EXACTLY as it did before this file * existed. That is the acceptance test for the seam itself: zero visual diff * until a club theme loads. * * A club's --club-* values arrive at runtime: the public `site` read returns * the derived theme (api/handlers/site.js), and the clubsite and member app * set the properties on and stamp data-club-brand="on" — which is also * the gate for the "powered by Hydive" credit at the bottom of this file. * api/lib/theme.js derives those values from a club's one colour and is the * only place the intake checks below actually run; a club never hand-writes * these tokens, so the rules and the seam cannot drift apart. */ :root { /* ---- the resolved layer: what surface CSS actually reads ---- */ --brand-accent: var(--hd-accent); --brand-accent-deep: var(--hd-accent-deep); --brand-accent-text: var(--hd-accent-deep); --brand-accent-ink: var(--hd-accent-ink); --brand-deep: var(--hd-navy); --brand-highlight: var(--hd-sun); --brand-highlight-ink: var(--hd-navy); --brand-hero-bg: var(--hd-hero-bg); --brand-hero-ink: var(--hd-hero-ink); --brand-hero-ink-soft: var(--hd-hero-ink-soft); --brand-font-display: var(--hd-font-display); --brand-radius-card: var(--hd-radius); --brand-radius-card-lg: var(--hd-radius-lg); --brand-surface-warm: var(--hd-surface-2); --brand-label-case: none; --brand-label-tracking: .01em; /* ---- the club inputs: the ONLY values a club theme file sets ---- */ /* Unset means "use Hydive's". A club theme sets --club-*, never --brand-* and never --hd-*, so the zone rules below stay the single place that decides whether a club's value is allowed to reach a given surface. */ --club-name: "Hydive"; --club-accent: var(--hd-accent); --club-accent-deep: var(--hd-accent-deep); --club-accent-text: var(--hd-accent-deep); --club-accent-ink: var(--hd-accent-ink); --club-deep: var(--hd-navy); --club-highlight: var(--hd-sun); --club-highlight-ink: var(--hd-navy); --club-hero-bg: var(--hd-hero-bg); --club-font-display: var(--hd-font-display); --club-surface-warm: var(--hd-surface-2); --club-radius-card: var(--hd-radius); --club-radius-card-lg: var(--hd-radius-lg); --club-label-case: none; --club-label-tracking: .01em; } /* The club's house. Accent, structural dark, hero, display face, card radius and label register all become the club's. */ [data-brand="club"] { --brand-accent: var(--club-accent); --brand-accent-deep: var(--club-accent-deep); --brand-accent-text: var(--club-accent-text); --brand-accent-ink: var(--club-accent-ink); --brand-deep: var(--club-deep); --brand-highlight: var(--club-highlight); --brand-highlight-ink: var(--club-highlight-ink); --brand-hero-bg: var(--club-hero-bg); --brand-font-display: var(--club-font-display); --brand-radius-card: var(--club-radius-card); --brand-radius-card-lg: var(--club-radius-card-lg); --brand-surface-warm: var(--club-surface-warm); --brand-label-case: var(--club-label-case); --brand-label-tracking: var(--club-label-tracking); } /* Shared hardware: the club's colour and name, Hydive's everything-else. */ [data-brand="shared"] { --brand-accent: var(--club-accent); --brand-accent-deep: var(--club-accent-deep); --brand-accent-text: var(--club-accent-text); --brand-accent-ink: var(--club-accent-ink); --brand-deep: var(--club-deep); --brand-hero-bg: var(--club-hero-bg); } /* Hydive's tool. An EXPLICIT reset, not an omission: a club theme loaded at :root (which is how a themed page will deliver it) must not leak into the board or the guard app just because they happen to share a document. */ [data-brand="platform"] { --brand-accent: var(--hd-accent); --brand-accent-deep: var(--hd-accent-deep); --brand-accent-text: var(--hd-accent-deep); --brand-accent-ink: var(--hd-accent-ink); --brand-deep: var(--hd-navy); --brand-highlight: var(--hd-sun); --brand-highlight-ink: var(--hd-navy); --brand-hero-bg: var(--hd-hero-bg); --brand-hero-ink: var(--hd-hero-ink); --brand-hero-ink-soft: var(--hd-hero-ink-soft); --brand-font-display: var(--hd-font-display); --brand-radius-card: var(--hd-radius); --brand-radius-card-lg: var(--hd-radius-lg); --brand-surface-warm: var(--hd-surface-2); --brand-label-case: none; --brand-label-tracking: .01em; } /* ============================================================ THE ACCENT SPLITS INTO THREE JOBS One colour cannot do three incompatible things, so it gets three tokens and each states its own contrast requirement: --brand-accent a FILL; holds --brand-accent-ink --brand-accent-deep the hover FILL; holds WHITE at >= 4.5:1 --brand-accent-text small TEXT on a light surface (links, kickers); >= 4.5:1 on --hd-surface For Hydive all three collapse onto cyan and its darker step, which is exactly why this was one token until now. A pale club accent breaks all three at once: it works as a fill, fails as text on white, and fails again under white hover text. A very dark accent fails the opposite way. Same hue, three lightnesses — the club sets all three. ============================================================ */ /* ============================================================ THE HIGHLIGHT CARRIES TWO REQUIREMENTS --brand-highlight is both a small FILL that holds text ("Most popular") and small TEXT sitting on the structural dark (the status LED on a hero band, the waterline edge). So it must be LIGHT and BRIGHT — >= 4.5:1 as text against --club-deep — and must declare its own ink for the fill case. Hydive's sun-gold #f4b740 clears 8.9:1 against navy in both directions. A dark highlight (rust, maroon, forest) fails both directions at once. A club with no third colour repeats its accent here, as Oxford does. ============================================================ */ /* ============================================================ INTAKE CHECKS — run on a club's palette BEFORE accepting a theme. Enforced in code when the theme write path lands; documented here now so the rules and the seam can't drift apart. 1. Three accent lightnesses, each MEASURED (see the split above). A pastel brand colour fails all three as one token. 2. The accent must carry chroma: max(R,G,B) - min(R,G,B) >= 10% of range. Run this BEFORE check 3 — hue is meaningless on a grey. Use this, NOT HSL saturation, which is unstable at the lightness extremes: a near-white reports 13% saturation and would pass. A greyscale accent clears every contrast check and still cannot mark a selection, because chosen and unchosen both read as dark-on-light. 3. The accent must be >= 25 DEGREES OF HUE from each semantic (#0f8a55 paid, #b06f10 partial, #c0392b unpaid). Hue distance, NOT contrast ratio: contrast measures luminance only, so an opposite hue at similar lightness scores under 2:1 and looks like a collision when it is nothing of the kind — Hydive's own cyan sits 1.5-2.0:1 from all three semantics and is obviously distinct from every one. Hue separates the real cases: cardinal red is 10 degrees from unpaid, sand 0 from partial, forest 9 from paid; cyan 43 and pale aqua 37 pass cleanly. The semantics never move, so the accent does — a red, amber or green club keeps its colour in the mark and the hero, and takes its secondary as the accent. 4. The structural dark must actually be dark: --club-deep lightness <= 20%, not merely 4.5:1 against white. "Just clears the floor" leaves a washed- out hero and leaves the highlight nothing to read against. A sand-forward club puts the sand in --club-surface-warm and gets a deepened dark. ============================================================ */ /* ============================================================ NOT THEMABLE — deliberately absent from every zone above. --hd-ok / --hd-warn / --hd-crit and their tints Money and safety states. GREEN MEANS PAID AT EVERY CLUB, FOREVER. A red that means "unpaid" at one club and "sold out" at another destroys the support call and the November handoff. --hd-font-sans Body and UI stay Public Sans. A club's inherited display face may be anything; 14px text read on a pool deck in direct sun may not. --hd-font-figure Money reads the same at every club. A balance, a price and an amount due are set in Sometype Mono wherever they appear, so a member who owes $312 sees the same numerals a treasurer does. A club's display face stops at the headline; it does not reach the figures. --hd-s1..s9, --hd-radius-pill, --hd-hair Structure, not identity. --hd-ease, --hd-dur-* Motion is product behaviour, not brand expression. ============================================================ */ /* ============================================================ THE "POWERED BY HYDIVE" CREDIT The credit is the price of white-labelling, not a permanent watermark. A club wearing its OWN brand carries it; a club still rendering on Hydive's fallback palette is already visibly Hydive and does not. Gate: `data-club-brand="on"` on , stamped by the same code that applies a club theme — so the credit and the theme cannot disagree. Nothing stamps it yet (no route serves a theme), which is why the credit is currently hidden on every club surface. Mark the credit element with `.hy-credit` and it follows the rule for free. ============================================================ */ :root:not([data-club-brand="on"]) .hy-credit { display: none !important; }