/* GENERATED — do not edit. Source: brand/brand.css. Run `python -m brand.sync`. */ /* ViewRegatta brand tokens — the single source for colour, type and the mark. * * Product-wide: consumed by `v3/` (broadcast, ingest, burgee, hooter, rie), by `website/` * (viewregatta.com / regattify.com) and, mirrored as constants, by the Android app and the * simulator. See `brand/README.md` for how it is distributed and why it is vendored rather * than served from one origin. * * THREE TIERS, ONE CORE. * core — the identity. Identical everywhere, on every domain. * .vr-screen — light UI read at arm's length on a laptop or a phone. * .vr-air — the streamed picture: light-on-dark, over moving video, read at distance * and through h264. Its colours are LIFTED variants of the core, and that is * a stated reason, not drift. * * Add a tier by putting the class on : */ :root { /* ---- Core identity ------------------------------------------------------------- * The red and the green are the PORT and STARBOARD sails of the mark; they are not * generic "brand red/green" and must not be reused as error/success colours. Semantic * status has its own tokens below. */ --vr-port: #e51f1f; /* port sail — the red half of the mark */ --vr-stbd: #13a83c; /* starboard sail — the green half */ --vr-navy: #15314a; /* the mark's keyline; ink on light ground */ --vr-navy-deep: #0c2233; /* deep ink, headings */ --vr-abyss: #05101a; /* the dark ground behind the 3D scene */ --vr-blue: #1f6fb2; /* interactive accent — links, buttons, focus */ /* ---- Type ---------------------------------------------------------------------- * Roboto: one metric family across three cuts, Apache 2.0, and already the Android * system face so the phone pays nothing. Condensed carries the broadcast bottom row, * where six fields share one strip. Mono is the burned-in instrument. * `brand/fonts/` is preferred when present — see brand/fonts/README.md. */ --vr-font: Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --vr-font-condensed: "Roboto Condensed", Roboto, "Arial Narrow", Arial, sans-serif; --vr-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace; /* ---- Race-clock state ---------------------------------------------------------- * The one standard, everywhere a race clock is drawn: the broadcast HUD, the OBS * overlay, the burned-in stamp on a boat-cam clip, the Race Officer console. * Specified in docs/streamed-picture-style-guide.md. */ --vr-clock-countdown: #ffb000; /* before the gun */ --vr-clock-racing: #5fe08a; /* racing */ --vr-clock-finished: #ffffff; /* finished */ /* ---- Semantic status (NOT the sail colours) ------------------------------------ */ --vr-ok: #0a7d4d; --vr-warn: #806000; --vr-err: #c62828; } /* ===== Screen tier — light UI ====================================================== * The palette Burgee, the race office and the ingest admin pages each arrived at * independently; this makes it one declaration instead of five copies. */ .vr-screen { --bg: #eef2f6; --paper: #ffffff; --card: #ffffff; --ink: var(--vr-navy); --ink-strong: var(--vr-navy-deep); --mut: #5a7186; --line: #d8e1ea; --acc: var(--vr-blue); --ok: var(--vr-ok); --warn: var(--vr-warn); --err: var(--vr-err); background: var(--bg); color: var(--ink); font-family: var(--vr-font); } /* ===== Air tier — the streamed picture ============================================= * Light-on-dark over moving video. The port/stbd variants are LIFTED in luminance * because h264 crushes saturated darks and the picture is read at distance — the same * reason the type floor exists. Everything here is drawn over the 3D scene, so the * plate colours are translucent by design. */ .vr-air { --bg: var(--vr-abyss); --ink: #ffffff; --mut: #93a7ba; --panel: rgba(10, 28, 44, 0.78); --panel-edge: rgba(255, 255, 255, 0.14); --port-bright: #ff5b5b; /* port sail, lifted for video */ --stbd-bright: #36d46a; /* starboard sail, lifted for video */ background: var(--bg); color: var(--ink); font-family: var(--vr-font); } /* ===== The mark ==================================================================== * `brand/logo.svg` is the ONE source. The wordmark's two-tone spelling is part of the * mark: View in port red, Regatta in starboard green, both lifted on the air tier so * they survive the encoder. */ .vr-wordmark .r { color: var(--vr-port); } .vr-wordmark .g { color: var(--vr-stbd); } .vr-air .vr-wordmark .r { color: var(--port-bright); } .vr-air .vr-wordmark .g { color: var(--stbd-bright); }