/* ============================================================= Cape Ride — public site theme ============================================================= THIS FILE IS THE THEME CONFIG. It is the only file you need to edit to change how caperide.org looks. Nothing else in site.css contains a literal color or typeface. A theme is two things: 1. An ORDERED SEQUENCE of full-bleed band colors. The page is a stack of colored sections, and the eye is carried down it by the color changing underneath. Reordering or replacing that sequence changes the page's character — which is why a theme is a sequence, not a tint. 2. A TYPE STACK: display family, its weight and width, its tracking, and the monospace face used for data. Each band gets a paired --on-N ink color. When you change a band, change its ink with it: every band must clear 4.5:1 against its own text, and --accent must clear 4.5:1 against --accent-ink because the primary button is 16px bold, which is below the threshold that would let 3:1 apply. SEPARATELY, --paper MUST CLEAR ABOUT dE 10 AGAINST EVERY BAND THAT CARRIES A CARD OR THE SCOREBOARD ROWS. That is a second rule with a second instrument, and the distinction is the whole point — see MEASURED RATIOS below for why a contrast ratio gets this question wrong in both directions. This rule was missing and it cost us: --paper is the fill for cards, rows and chips, so a theme whose --paper sits near its own band colors renders every card and every scoreboard row invisible. Last Call shipped that way, its surfaces between dE 0.0 and 5.3 of their own bands, because it was written as a commented alternate and never rendered before it was made active. In a dark theme --paper is the LIGHT value and --ink the dark one, the opposite of what "paper" suggests. MEASURED RATIOS — re-measure and update these if you change a color. They are recorded so the rule above can be checked by reading the file rather than by trusting it. pair Boneyard Regatta Chart Last Call band-1 / on-1 15.24 6.54 12.90 15.53 band-2 / on-2 13.42 6.03 4.89 9.71 band-3 / on-3 8.85 11.56 11.96 14.48 band-4 / on-4 14.31 14.13 14.41 13.84 band-5 / on-5 5.17 5.86 11.96 10.19 band-6 / on-6 10.50 14.91 14.41 10.21 accent / ink 8.60 5.86 6.56 7.34 The surface rule is measured differently, and it matters that you use the right tool. A contrast ratio answers "is this text legible". Whether a filled card is visible against the band behind it is a question about a hard edge between two large fields, and that is dE. Judged on contrast ratio, Regatta's white cards on its yellow band score 1.60:1 and look broken; they are dE 79 apart and perfectly clear. dE between --paper and each band. Only bands carrying a card or the scoreboard rows matter — 1, 2, 3 and 5: paper vs band Boneyard Regatta Chart Last Call band-1 card 87.1 104.5 4.8 * 89.1 band-2 rows 82.0 69.5 61.2 80.0 band-3 cards 65.9 79.1 17.8 85.0 band-5 card 74.7 80.9 17.8 84.3 Below about dE 10 the card stops reading as a separate object. * Chart's hero card is dE 4.8 from its own band and would be close to invisible. Chart is a commented alternate and is not active, so it is recorded here rather than changed — fixing a theme nobody has selected is not this change's job. Fix it before activating Chart. TO SWITCH THEMES: exactly one :root block may be active. Comment out the current one and uncomment another. There is no interface and no build step — the browser reads this file directly. ============================================================= */ /* ============ ALTERNATE — "Regatta" =========================== Signal flags and channel markers. Saturated, high contrast, built to be read on a phone in daylight. ============================================================= */ :root[data-theme="regatta"] { /* --- band sequence, in scroll order --- */ --band-1: #1B4FD8; --on-1: #FFFDF7; /* splash — signal blue */ --band-2: #0B7048; --on-2: #FFFDF7; /* scoreboard — channel green */ --band-3: #F5C518; --on-3: #14110A; /* the game — buoy yellow */ --band-4: #F2ECDC; --on-4: #12211C; /* the course — chart cream */ --band-5: #F0603C; --on-5: #1A0C06; /* the shirt — coral */ --band-6: #0F1E2E; --on-6: #F4F1E6; /* charity, foot — deep ink */ /* --- surfaces and accent --- */ --paper: #FFFDF7; --ink: #0F1E2E; --accent: #F0603C; /* Dark ink on the coral, not light: coral with paper-colored text measures 3.20:1, and the primary button is 16px bold — below the size that would let the 3:1 large-text threshold apply. */ --accent-ink: #1A0C06; /* --- typography --- */ --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif; --data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --figure: var(--data); --display-wght: 850; --display-wdth: 112; --display-track: -0.03em; --display-word: normal; --display-transform: none; /* --- shape --- */ --radius: 30px; --radius-sm: 16px; --pill: 999px; --mark: url("/site/bone-bike.png"); } /* ============ ALTERNATE — "Chart" ============================ The NOAA nautical palette the rider app already uses (docs/DESIGN-NOTES.md). Archivo narrowed, corners squared. Choose this to make the front door read as the same object as the app rather than as marketing. :root { --band-1: #DCE7E8; --on-1: #132321; --band-2: #2C7A52; --on-2: #F4F8F8; --band-3: #E8DCC0; --on-3: #132321; --band-4: #EDF2F3; --on-4: #132321; --band-5: #E8DCC0; --on-5: #132321; --band-6: #132321; --on-6: #EDF2F3; --paper: #EDF2F3; --ink: #132321; --accent: #B3175E; --accent-ink: #FFFFFF; --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif; --data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --figure: var(--data); --display-wght: 700; --display-wdth: 86; --display-track: -0.015em; --display-word: normal; --display-transform: none; --radius: 8px; --radius-sm: 6px; --pill: 6px; --mark: url("/site/bone-bike.png"); } ============================================================= */ /* ============ ACTIVE THEME — "Boneyard" ====================== The 2026 merch, on the page. Bone and blood on black, with a marigold accent and the bone bike as the mark. Colors are Pantone Solid Coated, converted to sRGB: 7506 C lightened and desaturated for the bone, Black 7 C, 7597 C. The red is a conversion rather than a Color Bridge reading — it must stay no lighter than about #B23D20 or bone text on band-5 drops below 4.5:1. Boneyard is dark throughout, and that is structural rather than stylistic: every band carries a bone card, row or chip, so no band can itself be bone. The rhythm comes from varying the darks — neutral, oxblood, warm grey, olive — against one saturated red band. Adjacent bands sit at dE 17.6 or more. ============================================================= */ :root { /* --- band sequence, in scroll order --- */ --band-1: #0D0D0D; --on-1: #EAE3D7; /* splash — neutral black */ --band-2: #2E130A; --on-2: #EAE3D7; /* scoreboard — oxblood */ --band-3: #3E3A35; --on-3: #EAE3D7; /* the game — Black 7 C */ --band-4: #17150F; --on-4: #EAE3D7; /* the course — olive black */ --band-5: #A6371F; --on-5: #EAE3D7; /* the shirt — 7597 C */ --band-6: #070707; --on-6: #C4BAA9; /* charity, foot — blackest */ /* --- surfaces and accent --- */ --paper: #EAE3D7; /* bone: cards, rows, chips */ --ink: #141210; --accent: #E9A227; /* marigold */ --accent-ink: #141210; /* --- typography --- */ /* Aventura is UPPERCASE ONLY — 60 glyphs, no lowercase at all. --display-transform: uppercase is a correctness requirement in this theme, not a style choice: a lowercase letter would silently fall back to Archivo mid-word. It also sets much wider than Archivo, hence the negative word spacing. Headings need a stronger correction than compact date/data display text. */ --display: "Aventura", "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif; --data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --figure: var(--display); --display-wght: 700; --display-wdth: 100; --display-track: 0.005em; --display-word: -0.09em; --heading-word: -0.20em; --wordmark-word: -0.20em; --display-transform: uppercase; /* --- shape --- */ --radius: 2px; --radius-sm: 2px; --pill: 2px; --mark: url("/site/bone-bike.png"); } /* ============ ALTERNATE — "Last Call" ======================== Dark, wide, uppercase. For the one context that actually matters on race night: someone watching the board from a table in a bar, on a laptop, at nine in the evening. FIXED HERE: --paper and --ink were inverted, which made every card and every scoreboard row invisible against its own band (dE 0.0 to 5.3). It shipped that way because this block was written as a commented alternate and never rendered before being made active. In a dark theme --paper is the light value. :root { --band-1: #12100E; --on-1: #F7E7C4; --band-2: #0D2B22; --on-2: #8CE0B6; --band-3: #1E1712; --on-3: #F7E7C4; --band-4: #241B14; --on-4: #F7E7C4; --band-5: #2B1410; --on-5: #FFB59B; --band-6: #0A0908; --on-6: #C9B896; --paper: #F7E7C4; --ink: #12100E; --accent: #FF7A45; --accent-ink: #12100E; --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif; --data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --figure: var(--data); --display-wght: 900; --display-wdth: 125; --display-track: -0.045em; --display-word: normal; --display-transform: uppercase; --radius: 4px; --radius-sm: 4px; --pill: 999px; --mark: url("/site/bone-bike.png"); } ============================================================= */ /* The webfont for the active theme. Uppercase-only; see the note in the Boneyard block. Licensing is unresolved — recorded in docs/DECISIONS.md and in the pull request that added it. */ @font-face { font-family: "Aventura"; src: url("/site/aventura-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }