/* ========================================================================== golf.css — the golfer's stylesheet. Loaded ONLY on the golfer surfaces (/, /texts, /watches, /play/*). The operator console at /rig keeps teescout.css and base.html and is not touched by anything in here. Both files can load on the same page without a fight: every class below is namespaced `g-`, and the only bare-element rules are inside `.g-app` and wrapped in :where() so they carry no specificity. THE MAP, in order: §0 tokens — colour, type, space, geometry; the dark override; the one webfont; tabular numerals; reduced motion §1 shell — .g-app .g-shell .g-page .g-skip, the focus ring §2 type and utilities §3 header — .g-header .g-brand .g-nav .g-account §4 buttons — .g-btn §5 forms — .g-field .g-input .g-select .g-check .g-choice .g-checklist §6 the sheet page — .g-sheetpage .g-rail .g-sheet (phone / 1024 / 1280) §7 the query line — .g-query .g-only §8 the mechanism line — .g-mech §9 the two taps — .g-days .g-bands .g-carts .g-picker .g-trunc §10 the day header — .g-day §11 the course run header — .g-run §12 the tee row — .g-teelist .g-tee .g-more §13 the sticky action — .g-cta §14 every state — .g-empty .g-error .g-capped .g-note .g-loading §15 cards, watch summaries — /texts, /watch_edit, /watches §16 footer — .g-foot §17 last-resort guards §18 motion — the cancellation signature, and nothing else THREE RULES THE WHOLE FILE EXISTS TO ENFORCE: 1. STRUCTURE IS NAVY. #0B1A2E is the brand ink and every neutral derives from it. The outgoing --ink #14231A was a green-black, which made body copy itself a fourth green. 2. GREEN IS A SIGNAL. There are exactly five green declarations in this file and each one refers to a tee time a golfer can book: .g-tee--released .g-tee__mark background --live (the mark) .g-tee--released .g-tee__cancelled color --fairway (the word) .g-tee--released --g-sweep --live (§18, the sweep) .g-days__dot--on background --live (a day with one) .g-day__cancelled color --fairway (the day count) Nothing else. Not a button, not a link, not the focus ring, not the wordmark, not a checkbox, not a divider. `uv run python ops/contrast.py` prints the ledger; if it lists a fifth, something drifted. 3. NOTHING A GOLFER READS TO DECIDE IS BELOW 15px, in either scheme, at any viewport including 320. Density comes from deleting strings that repeat, never from shrinking type. Mobile first, always: the base rules ARE the 320px phone and every media query is min-width. Nothing here may scroll sideways at 320px. ========================================================================== */ /* ========================================================================== §0 — TOKENS Every ratio in a comment below was computed on 2026-08-06 with the WCAG 2.1 relative-luminance formula and re-verified against the shipped hexes by `uv run python ops/contrast.py`, which parses this block out of this file. Re-run it before changing any hex. If a comment and that script disagree, the comment is wrong. ========================================================================== */ :root { /* ---- surfaces -------------------------------------------------------- */ --paper: #FFFFFF; /* the page */ --panel: #F4F6FA; /* 1.08:1 off paper. Navy-tinted, replaces the green #F6F8F4. Cards on /texts and /watch_edit, the query line, the desktop rail. NEVER a tee row — --live measures 2.92:1 on it and fails the 3:1 non-text floor, so a tinted row silently breaks the one mark the product depends on. */ /* ---- ink ------------------------------------------------------------- */ --ink: #0B1A2E; /* 17.48:1 on paper, 16.16:1 on panel. Brand navy. Times, prices, day headers, primary BUTTON FILL, focus ring. Beats the outgoing #14231A (16.34:1) on the pair that matters most, so this is a measured upgrade, not a repaint. */ --dim: #55657B; /* 5.94:1 on paper, 5.49:1 on panel. Every non-numeric fact on a row: spots, drive time, freshness. Navy- derived; beats the outgoing #5A6B5E (5.68:1). */ --faint: #93A0B0; /* 2.66:1. BANNED FROM TEXT — this is what the old token comment already said and the landing page ignored on five elements. Survives for 1px ticks and empty week-rail cells ONLY. ops/contrast.py fails the build if --faint appears in a `color:`. */ /* ---- rules ----------------------------------------------------------- */ --rule: #D7DDE5; /* 1.37:1. STRUCTURAL only: day-header underline, column dividers, card borders. A divider is not a UI component and carries no 1.4.11 obligation. It is NOT allowed on the edge of a control — see --control. */ --control: #76859B; /* 3.75:1 on paper, 3.47:1 on panel. THE EDGE OF ANYTHING YOU TYPE INTO, and it is a floor rather than a taste call. WCAG 1.4.11 asks 3:1 of a control's boundary; --rule measured 1.37:1 on paper and 1.26:1 inside the query line, and an input's own fill is --paper on --paper (1:1), so that hairline was the entire affordance. #pick-filter on /watches/{id}/edit renders with no value and no placeholder, i.e. it was a blank box whose only boundary was a 1.37:1 line. Hover (--dim, 5.94) and focus (--ink, 17.48) still step up from here. */ --rule-hair: #EAEEF4; /* 1.16:1. The per-row hairline, and only that. At a 60px pitch there are ~14 rules on one phone screen; --rule at that frequency reads as a grey field and competes with the times for ink. Same hue at ~40% of the weight, still resolvable at 1px. Acceptance test: if your eye lands on the rules before the times, go lighter. */ /* ---- the two greens, each proven by ratio ---------------------------- */ --live: #23A566; /* 3.16:1 on paper, 5.53:1 on the dark surface. ONE HEX IN BOTH SCHEMES, so "green means one thing" is true at the value level. Clears the 3:1 graphical floor and FAILS 4.5:1 — which is exactly why it is a mark and never a letter. Spent on: the release mark in the row gutter, and lit half-hour cells in the week rail. Nothing else. */ --fairway: #1B6B45; /* 6.49:1 on paper, 6.00:1 on panel. The word "cancelled" in a tee row and the count in a day header. That is the complete list. Removed from buttons, focus rings, links, accent-color, the logo and the freshness dot. The measured proof it cannot stay a fill: #1B6B45 on the dark surface is 2.69:1, so a primary button in this colour could not survive dark mode. */ /* ---- the one warm colour --------------------------------------------- */ --clay: #B4552E; /* 4.91:1 on paper, 4.54:1 on panel. Stale-course dot on a run header, error text, destructive button border, the word "gone". Clears 4.5:1 in both schemes and on both surfaces. */ /* ---- type ------------------------------------------------------------- Six sizes, down from the 19 literals the previous file carried, eight of them crammed between 13 and 17. Body copy and ALL numerals stay on the system stack: it is more comfortable than a display face at 15px in bright sun, which is the reading condition that matters here. Space Grotesk SemiBold is permitted on headings and the wordmark ONLY, never below 17px, and never on a numeral a golfer reads. */ --g-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --g-display: "Space Grotesk", var(--g-ui); --t-h1: 34px; /* 600, -0.022em, display. Page h1. Once per page. */ --t-lg: 20px; /* 600. TWO THINGS ONLY: the tee time (system, tabular) and the day header (display, uppercase). The day header appears once per ~40 rows, so the tee time is the largest thing in its own neighbourhood. The tee time went UP from 19px. */ --t-lead: 17px; /* 600, display. Course run header, card titles. The floor for the display face. */ --t-body: 16px; /* 400. Price, body copy, buttons, inputs. 16 on inputs is not a taste call: below it, iOS zooms the page on focus. */ --t-fact: 15px; /* 400. THE FLOOR. Spots, drive time, the word "cancelled" (600), the mechanism line, every error and every empty state. Retires 14.5px, which was the most-used size in the outgoing file and set .g-tee__meta — the exact line the whole density decision hangs on. */ /* --t-axis (13px) IS RETIRED AND MUST NOT COME BACK. It survived one pass on .g-bands__hours with the argument that "6-11a" is only a label restating the chip's own word, so a golfer who cannot read it loses nothing. That argument is wrong twice. It is not a restatement — "Morning" does not tell you the band starts at 5:00 because the search window starts at 5:00, and the hours are the only place that edge is printed. And the floor in the locked decisions is "nothing below 15px", full stop; a floor that accepts a good enough reason is not a floor. Every band label now sets --t-fact and the chip grid was re-measured around it (§9). */ --lh-tight: 1.2; /* times and headings */ --lh-body: 1.5; /* everything else */ /* ---- space ------------------------------------------------------------ Eight steps, all multiples of 4, zero fractional values. Kills 22 and 30 (the only non-multiples in the old scale and the origin of the half-pixel drift) and the 48 off-scale literals in 15 sizes the old file carried. If a value is not here or in the geometry block below, it does not exist. */ --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 24px; --g-6: 32px; --g-7: 48px; --g-8: 64px; /* ---- radii ------------------------------------------------------------ Radius appears only on something you press or type into. */ --g-r-press: 8px; /* buttons, inputs, the query line, the sticky CTA. Replaces 11px: 11 was tuned for a card UI, and with the cards deleted from the sheet a 44px control reads tighter and less consumer at 8. */ --g-r-card: 14px; /* scoped to .g-card on /texts and /watch_edit. Never on the sheet — a sheet is ruled, not carded. */ --g-r-mark: 0; /* the release mark is a pencil stroke, not a pill */ /* ---- geometry --------------------------------------------------------- Derived measurements, not spacing steps. They live here rather than inline because each is referenced from more than one rule or overridden at a breakpoint, and a sticky offset that disagrees with the header height by one pixel is a bug you can see. */ --g-tap: 44px; /* a FLOOR, not a step. Nothing tappable is smaller. */ --g-head-h: 52px; /* the sticky header. 94px today, of which 36.6px was a freshness strip about pollers and 42px of padding around a 36px button. Both are gone: freshness is a per-course fact and now prints on the run header where the data lives. Also the `top:` for every sticky day header, which is why it is a token. */ --g-head-pad: var(--g-1); /* 52 − 44 tap target = 8, so 4 above and below */ --g-day-h: 36px; /* the day header. 3px taller than the two lines of 12.5px chips it replaces, and it carries the counts */ --g-run-h: 34px; /* the course run header */ --g-row: 60px; /* tee-row pitch, phone. Today's rows take five-plus distinct values from 70.3px to 265.9px because the facts wrap on 82.9% of them. A tee sheet with no baseline grid is not a sheet. */ --g-cta-h: 56px; /* the sticky action */ /* --g-week-h, --g-week-label and --g-cell went with the week lattice they measured. See §9: the lattice was drawn from a MAX_SLOTS-truncated list, it was display:none below 360, and its cells were anchor jumps into a sheet LONG_SHEET had already truncated. The day rail that replaced it sizes off its own content and needs no geometry token; the one measurement that IS load-bearing -- seven cells inside 296px at 320 -- is written at the top of §9 where the grid is, not here where nothing can see it. */ --g-box: 20px; /* a native checkbox, a radio, the filter's own dot */ --g-pad: 12px; /* the page gutter: 12 at 320, 16 from 360, 32 from 1024. It is a token because --g-shell is a CONTENT width and the shell has to add the gutters back — see .g-shell. Measured cost of getting that wrong: with max-width set to 1240 flat, the 1240 of grid inside it had only 1176 to live in and the page scrolled sideways at exactly 1280. */ --g-shell: 560px; /* CONTENT width. Below 1024: one column, capped so a tablet does not stretch a 5-cell row to 900px. 820 at 1024, 1240 at 1280 — see §6. The outgoing 46rem (736px) left 418px of dead margin each side of a 1512px screen. */ --g-rail: 320px; /* the desktop context rail */ --g-col: 460px; /* one day column: 460 at 1024–1279, 420 at 1280+ */ --g-gutter: 40px; /* rail-to-sheet and column-to-column. Off the spacing scale on purpose: 320 + 40 + 880 = 1240 and 420 + 40 + 420 = 880 is load-bearing arithmetic. */ --g-mark-gutter: 12px; /* reserved on EVERY row, used on ~1 in 40, so the marks stack into a column the eye can count without reading */ --g-mark-w: 3px; --g-mark-h: 24px; /* ---- the tee-row columns ---------------------------------------------- Numeric columns are FIXED px and right-aligned so the price and the spot count cannot move between row 1 and row 596; the flag channel is the only flexible track, so it absorbs every string-length difference. These are the 320px values, because 320 is the base. Measured against real strings in the system stack on 2026-08-06: "12:20p" at 20px/600 is 62.0px in SF Pro and 63.4px in Arial Bold, so a 78px time column clears the worst case with 8px of padding. "cancelled" at 15px/600 is 64.1px / 68.4px against the 82px the flexible track gets at 320 — it fits, which is the whole reason the word can be primary and the mark only an index. Fixed ink at 320 = 12+78+56+52+16 = 214 of 296. */ --g-c-time: 78px; --g-c-free: 56px; --g-c-price: 52px; --g-c-go: 16px; } /* -------------------------------------------------------------------------- §0.1 — the wider phone. At >=360px the gutters go 12 → 16 and the columns take the width back. 390 content = 358: 12+82+62+58+18 = 232 fixed, 126 flexible. -------------------------------------------------------------------------- */ @media (min-width: 360px) { :root { --g-pad: 16px; --g-c-time: 82px; --g-c-free: 62px; --g-c-price: 58px; --g-c-go: 18px; } } /* -------------------------------------------------------------------------- §0.2 — DARK, decided by measurement rather than taste. Both candidate surfaces were built with the IDENTICAL text hues and measured against each other on 2026-08-06: text hue navy #0B1A2E green-grey #101C16 #FFFFFF 17.48 17.50 ink #E6EDF6 14.82 14.84 dim #9FB2C9 8.06 8.07 word #4FCB8B 8.53 8.54 live #23A566 5.53 5.54 Green-grey is ahead on all four pairs by 0.01–0.02, which is rounding, not headroom. The stated tiebreak is "if they tie, take navy", and navy is what the brand sheet specifies. NAVY. For the record the shipped landing panel #0C2318 measures 16.55 / 14.03 / 7.63 / 5.24 on the same four pairs — worse than BOTH candidates on all four — and is replaced by this token. The in golf_base.html must come out, and .g-app declares `color-scheme: light dark` so native controls, form widgets and scrollbars follow the phone. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --paper: #0B1A2E; /* brand navy is the surface */ --panel: #12243C; /* 1.12:1 off paper. A whisper, as intended. */ --ink: #E6EDF6; /* 14.82:1 on paper, 13.26:1 on panel */ --dim: #9FB2C9; /* 8.06:1 on paper, 7.21:1 on panel — MORE headroom than light mode's 5.94, which is right: 6am in bed is the case this serves. */ --faint: #5C7085; /* 3.42:1. Still banned from text. */ --rule: #22374F; /* 1.44:1 — deliberately stronger than light mode's 1.37, because a hairline loses more on a dark surface than it does on white. */ --control: #6A8098; /* 4.29:1 on paper, 3.84:1 on panel. The dark half of the 3:1 control floor. Measured higher than light mode's 3.75 for the same reason --rule is: an edge loses more on a dark surface. */ --rule-hair: #17293E; /* 1.18:1 */ --live: #23A566; /* 5.53:1 on paper, 4.95:1 on panel. SAME HEX AS LIGHT. Gets stronger for free. */ --fairway: #4FCB8B; /* 8.53:1 on paper, 7.63:1 on panel. The green WORD, lifted so it clears 4.5:1 on navy; #1B6B45 measures 2.69:1 there and would be unreadable. This is the only token whose hex differs between schemes, and it differs because a letter has a 4.5:1 obligation that a mark does not. */ --clay: #E8875C; /* 6.70:1 on paper, 5.99:1 on panel */ } } /* -------------------------------------------------------------------------- §0.3 — THE ONE WEBFONT. Self-hosted, subset, one weight, one file, 6,340 bytes. Not fetched from Google's CDN: the privacy policy tells a golfer these pages make no third-party requests, so a CDN link would make that page a lie. The old shell asked Google for two families twice per page load, once in and again from an @import at the top of this stylesheet. SUBSET: printable ASCII U+0020–U+007E plus nine marks headings reach for (nbsp, ·, ½, – — ‘ ’ “ ”) = 104 codepoints, 116 glyphs, kern only. All 41 course names in the corpus today use only A–Z, 1–5, space, parens and a hyphen, so ASCII is already generous; the nine extras cost under 400 bytes and stop one curly apostrophe in a course name from falling back mid-word. Rebuild: teescout/web/static/fonts/build_subset.py, licence in OFL.txt. THE SWAP, measured rather than hoped: this face is a display face and sets at most four elements per page, so `swap` moves very little. Space Grotesk 600 against SF Pro 600 at the same size — "SAT 9 AUG" +2.1%, "MONTAUK DOWNS STATE PARK" +2.4%, cap height 0.700 vs 0.705 em — i.e. the uppercase strings that make up almost every heading on the sheet land within 2.4%. Mixed case is the wide end of the range: "TeeScout" is 78.7px in Space Grotesk and 72.8px in SF Pro at 17px, a 5.9px difference that shifts nothing, because the wordmark sits at the left of a flex header whose nav is pushed right with margin-left:auto. Every element that takes this face also takes an explicit line-height below, so a swap can never move a block VERTICALLY. The residual: a 34px h1 can change its wrap point at 320px. The fix is the preload in , not a second font file: -------------------------------------------------------------------------- */ @font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-600-subset.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; /* the wordmark is the brand and it should arrive; the face sets only headings, so a swap moves ~4 elements per page and never the sheet */ } /* Every numeral on every surface. Non-negotiable — the whole sheet is a column of numbers, and proportional figures make it un-scannable. */ .g-num, .g-tee__time, .g-tee__price, .g-tee__free, .g-day__count, .g-day__cancelled, .g-days__n, .g-bands__n, .g-bands__hours, .g-courses__n, .g-stat__n, .g-card__aside, .g-checklist__count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Motion: this file has exactly two transitions and both are feedback on a thing you just touched. Nothing loops, nothing pulses, nothing eases in on scroll. All the decorative motion in the product was on the landing page and comes out with this pass. */ @media (prefers-reduced-motion: reduce) { .g-app *, .g-app *::before, .g-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== §1 — SHELL ========================================================================== */ /* On . Carries the type, the surface and the sideways-scroll guard. `clip` rather than `hidden` because `hidden` would make this a scroll container and kill every position:sticky in the file. */ .g-app { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--g-ui); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; overflow-x: clip; color-scheme: light dark; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .g-app *, .g-app *::before, .g-app *::after { box-sizing: border-box; } /* Bare-element rules are wrapped in :where() so they carry NO specificity. A component class always wins over them — otherwise `.g-app a` would repaint the text on every row that happens to be a link, and the whole sheet is links. */ :where(.g-app) :where(img, svg, video) { max-width: 100%; height: auto; } /* The reading column. 12px gutters at 320 (content 296, which is what the row arithmetic in §0 is built on), 16 from 360, 32 from 1024. --g-shell is the CONTENT width, so the gutters are added back here — box-sizing is border-box everywhere inside .g-app, and without the calc the desktop grid is 64px wider than the box it has to fit in. */ .g-shell { width: 100%; max-width: calc(var(--g-shell) + var(--g-pad) * 2); margin: 0 auto; padding: 0 var(--g-pad); } /*
*/ .g-page { display: block; padding: var(--g-5) 0 var(--g-8); } /* The sheet opens on a control strip, not on a heading, so it starts at the top of the page: 24px of air between a ruled sticky header and a --panel strip carries no information and costs 24px of the 568px an iPhone SE has. Prose pages keep the air. */ .g-page--flush { padding-top: 0; } /* A titled run of content. Sections are separated by air, not by boxes. */ .g-section { margin: 0 0 var(--g-7); } .g-section:last-child { margin-bottom: 0; } .g-section__head { margin: 0 0 var(--g-4); } /* The skip link. Off screen until a keyboard finds it, then a real 44px control — it rendered at 27.2px and in green before this pass. */ .g-skip { position: absolute; left: -9999px; top: 0; } .g-skip:focus { position: fixed; left: var(--g-3); top: var(--g-3); z-index: 60; display: inline-flex; align-items: center; min-height: var(--g-tap); width: auto; padding: 0 var(--g-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--g-r-press); font-size: var(--t-body); font-weight: 500; color: var(--ink); text-decoration: none; } .g-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* One visible ring, everywhere, keyboard only. --ink, not --fairway: a focus ring is not a bookable tee time. On the page it measures 17.48:1; on an --ink button fill the 2px offset puts the ring on the page background, where it measures the same. */ .g-app :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--g-1); } /* ========================================================================== §2 — TYPE AND UTILITIES ========================================================================== */ /* The display face is allowed here and nowhere else. Every one of these sets an explicit line-height, so the webfont swap cannot move a block vertically — only its width can change, and only by the ~2.4% measured in §0.3. */ :where(.g-app) :where(h1, h2, h3, h4), .g-h1, .g-h2, .g-h3 { font-family: var(--g-display); letter-spacing: -0.022em; font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; } .g-h1 { font-size: var(--t-h1); line-height: var(--lh-tight); } .g-h2 { font-size: var(--t-lg); line-height: var(--lh-tight); } .g-h3 { font-size: var(--t-lead); line-height: var(--lh-tight); } /* The sentence under a heading that says what the page is for. System stack: it is body copy, and body copy is not set in a display face. */ .g-lede { margin: var(--g-2) 0 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--dim); max-width: 34em; } :where(.g-app) :where(p) { margin: 0 0 var(--g-3); } :where(.g-app) :where(p:last-child) { margin-bottom: 0; } /* Links are --ink and underlined. They were --fairway, which spent the product's one signal colour on navigation. Underline rather than colour is also the only version of "this is a link" that survives being colour-blind. */ :where(.g-app) :where(a) { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } :where(.g-app) :where(a):hover { text-decoration-thickness: 2px; } /* Long course names break instead of widening the page. */ :where(.g-app) :where(h1, h2, h3, p, li, td, th, label, summary) { overflow-wrap: break-word; } .g-dim { color: var(--dim); } .g-strong { font-weight: 600; color: var(--ink); } .g-fact { font-size: var(--t-fact); line-height: var(--lh-body); } /* Vertical rhythm helper for a run of cards or rows. */ .g-stack { display: flex; flex-direction: column; gap: var(--g-3); } .g-stack--tight { gap: var(--g-2); } .g-stack--loose { gap: var(--g-5); } /* Horizontal run that always wraps — never a sideways scroller. */ .g-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-2) var(--g-3); min-width: 0; } .g-hr { height: 1px; background: var(--rule); border: 0; margin: var(--g-5) 0; } /* ========================================================================== §3 — HEADER 52px on a phone, 56 from 1024. It carries the brand, at most three destinations and the account menu. NOTHING ELSE. It was 94px — 11.1% of a 390 viewport and 16.6% of a 320 one — to hold a 36px button and a status line about pollers, and that 42px is most of the 94px saved above the fold. ========================================================================== */ /* NAVY CHROME, WHITE SHEET, and this is the rule rather than a repaint. Header, rails and the day/band selectors are #0B1A2E; the tee sheet itself stays --paper because it is read outdoors in bright sun. Done by REDECLARING THE TOKENS inside the header rather than by writing literals on six selectors. Everything in here — the wordmark, the two nav links, aria-current, the account ring, the signed-out primary button — already draws itself from --ink / --dim / --panel / --paper, so one scoped block turns the whole component over and nothing inside it needs to know. THE HEXES ARE THE DARK SCHEME'S, EXACTLY, and that is what keeps them proved: §0.2 measured every one of these against #0B1A2E (ink 14.82:1, dim 8.06:1, control 4.29:1, clay 6.70:1, fairway 8.53:1) and ops/contrast.py re-checks that column on every run. In dark mode the page tokens already hold these values, so this block is a no-op there and the header is the same object in both schemes — which is the point: chrome that changes colour with the OS is not chrome, it is decoration. The one thing that inverts is .g-btn--primary, whose fill is --ink and whose label is --paper: on a navy bar the signed-out sign-in button becomes a pale button with navy letters, at the same 14.82:1 it had the other way round. */ .g-header { --paper: #0B1A2E; --panel: #12243C; --ink: #E6EDF6; --dim: #9FB2C9; --faint: #5C7085; --rule: #22374F; --rule-hair: #17293E; --control: #6A8098; --clay: #E8875C; /* No --fairway here. Nothing in the header prints the green WORD -- that is the sheet's, on a released row and in a day header -- and ops/contrast.py reads any mention of the token outside :root as a spend against the green budget, which is exactly the check that should fire if one ever appears. */ position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); } /* The bar shares the shell's measurements exactly, or the wordmark and the first tee time do not start at the same x. */ .g-header__bar { width: 100%; max-width: calc(var(--g-shell) + var(--g-pad) * 2); margin: 0 auto; padding: var(--g-head-pad) var(--g-pad); min-height: var(--g-head-h); display: flex; align-items: center; gap: var(--g-2); min-width: 0; } /* ---- the brand lockup --------------------------------------------------- THE MARK IS AN , never a background-image and never inline SVG, so swapping the owner's raster for his future vector is a one-file change with no template edit and no CSS edit. Its dimensions live on this one class and nowhere else. 22px is the brand sheet's stated minimum and also the ceiling for the placeholder: it ships as a 4x raster and it WILL go soft against live text above 24px. The pin is not in the repo yet (design/brand/ is empty). Until the owner's export lands the template renders the word alone — never a substitute glyph, never a flag emoji, never the old flagstick-disc macro. THE WORDMARK IS LIVE TEXT. Because the face is self-hosted for headings anyway, "TeeScout" costs nothing extra as real text and beats an SVG in every way that matters: crisp at any density, recolourable for dark mode, selectable, translatable. CLEAR SPACE is the brand sheet's rule — "equal to the height of the T" — and the number comes out of the font, not out of the air: Space Grotesk's sCapHeight is 700/1000 upem, so a "T" at 17px is 11.9px tall and the gap is 12px, which is --g-3. (The component spec's parenthetical called 8px the cap height of the T at 17px; the font file disagrees, and the font file wins.) -------------------------------------------------------------------------- */ .g-brand { display: inline-flex; align-items: center; gap: var(--g-3); min-height: var(--g-tap); flex: 0 0 auto; text-decoration: none; min-width: 0; } .g-brand__mark { width: 22px; height: 22px; flex: 0 0 auto; display: block; } .g-brand__word { font-family: var(--g-display); font-weight: 600; font-size: var(--t-lead); line-height: var(--lh-tight); letter-spacing: -0.022em; color: var(--ink); white-space: nowrap; } /* ---- destinations ------------------------------------------------------- Two, not three: two of the old three pointed at /texts. The lifetime alert odometer that rode in the header as a bare badge is deleted — a bare count next to a nav item reads as "unread", and it was neither unread nor recent. 44px min-height because the old footer links rendered at 16px and the header sign-in at 36px; both were floor violations. -------------------------------------------------------------------------- */ .g-nav { display: flex; align-items: center; gap: var(--g-1); margin-left: auto; min-width: 0; } .g-nav__link { display: inline-flex; align-items: center; min-height: var(--g-tap); padding: 0 var(--g-2); border-radius: var(--g-r-press); font-size: var(--t-fact); font-weight: 500; color: var(--dim); text-decoration: none; white-space: nowrap; } @media (min-width: 390px) { .g-nav__link { padding: 0 var(--g-3); font-size: var(--t-body); } } .g-nav__link:hover { background: var(--panel); color: var(--ink); } .g-nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--panel); } /* ---- the account menu --------------------------------------------------- A
. It opens on tap, on Enter and on Space and closes on Escape, and none of that needs script. -------------------------------------------------------------------------- */ .g-account { position: relative; flex: 0 0 auto; } .g-account__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--g-tap); height: var(--g-tap); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .g-account__btn::-webkit-details-marker { display: none; } .g-account__btn::marker { content: ""; } .g-account__btn:focus-visible { border-radius: 50%; } .g-account__ring { display: flex; align-items: center; justify-content: center; width: calc(var(--g-tap) - var(--g-2)); /* 36px inside a 44px tap target */ height: calc(var(--g-tap) - var(--g-2)); border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font-size: var(--t-fact); font-weight: 600; line-height: 1; transition: border-color 120ms ease, background-color 120ms ease; } .g-account__btn:hover .g-account__ring, .g-account[open] .g-account__ring { border-color: var(--dim); } .g-account__menu { position: absolute; right: 0; top: calc(100% + var(--g-1)); z-index: 40; width: max-content; min-width: 15rem; max-width: min(20rem, calc(100vw - var(--g-5))); padding: var(--g-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--g-r-card); } .g-account__who { margin: 0 0 var(--g-1); font-size: var(--t-fact); line-height: var(--lh-body); color: var(--dim); overflow-wrap: anywhere; } .g-account__who b { color: var(--ink); font-weight: 600; } .g-account__note { margin: 0 0 var(--g-3); font-size: var(--t-fact); line-height: var(--lh-body); color: var(--dim); } @media (min-width: 1024px) { :root { --g-head-h: 56px; --g-pad: 32px; } } /* ========================================================================== §4 — BUTTONS ONE SIZE. "Sign in with Google" shipped at 52 / 44 / 36px and two weights across one flow; .g-btn--sm is deleted and the header button is 44px like everything else. ========================================================================== */ .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--g-2); min-height: var(--g-tap); padding: 0 var(--g-5); border-radius: var(--g-r-press); border: 1px solid transparent; font-family: inherit; font-size: var(--t-body); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; background: var(--panel); color: var(--ink); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; -webkit-appearance: none; appearance: none; } .g-btn:hover { text-decoration: none; } /* One per screen. --ink fill, --paper label: 17.48:1 in light and 14.82:1 in dark. It was --fairway, and it moved for two reasons — a button is not a bookable tee time, and #1B6B45 measures 2.69:1 on the navy dark surface, so the primary action could not have survived dark mode in green. */ .g-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--paper); } .g-btn--primary:hover { background: var(--dim); border-color: var(--dim); } /* Everything else. Hairline, no fill — and the hairline is --control, not --rule, for the reason spelled out on the token: on an outlined button with no fill the border IS the control, and --rule pays 1.37:1 where 1.4.11 asks 3. Moved with the inputs rather than after them, because a 3.75:1 field sitting beside a 1.37:1 button is a worse screen than either alone. */ .g-btn--quiet { background: var(--paper); border-color: var(--control); color: var(--ink); } .g-btn--quiet:hover { background: var(--panel); border-color: var(--dim); } /* Turning something off, deleting a watch. Rare. */ .g-btn--danger { background: var(--paper); border-color: var(--control); color: var(--clay); } .g-btn--danger:hover { border-color: var(--clay); } /* A button that reads as a sentence — "not now", "start over". */ .g-btn--plain { min-height: var(--g-tap); padding: 0 var(--g-1); background: none; border-color: transparent; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; } .g-btn--plain:hover { color: var(--ink); background: none; } /* Full width: the default shape on a phone for the one real action. */ .g-btn--wide { width: 100%; } .g-btn[disabled], .g-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* A row of buttons: stacked and full width on a phone, inline once there is room. Mobile-first, so the stack is the base and 480 opts out. */ .g-btnrow { display: flex; flex-wrap: wrap; gap: var(--g-2); align-items: center; } .g-btnrow > .g-btn { flex: 1 1 100%; } .g-btnrow > .g-btn--plain { flex: 0 0 auto; } @media (min-width: 480px) { .g-btn--wide { width: auto; } .g-btn--wide-always { width: 100%; } .g-btnrow > .g-btn { flex: 0 0 auto; } } /* ========================================================================== §5 — FORMS A real
, so no JS. Measured at 320: "Sag Harbor, NY · 60 min · this week" is 234px in SF Pro and 256px in Arial at 16px, plus ~65px for "Change ›" — 299/321 against 296px of content. That is why .g-query__extra exists and why "this week" drops below 360, where the same line measures 227/249 and fits. */ .g-query { display: block; border-radius: var(--g-r-press); background: var(--panel); } .g-query__now { display: flex; align-items: center; gap: var(--g-3); min-height: var(--g-7); padding: 0 var(--g-3); font-size: var(--t-body); color: var(--ink); cursor: pointer; list-style: none; min-width: 0; } .g-query__now::-webkit-details-marker { display: none; } .g-query__now::marker { content: ""; } /* WHICH PART GIVES WAY. This was one nowrap-and-ellipsize box holding all three facts, which meant the longest fact — the address — ate the width and pushed the radius and the window past the right edge, clipped by an ancestor with no ellipsis to say they existed. Measured on 2026-08-06 at 390px with "225 Powell Ave, Newburgh, NY 12550" the summary read "225 Powell Ave, Newburgh, NY 1… Change ›" and .g-query__extra's right edge was at 445.1px against a 390px viewport — the one element in the whole audit whose box left the screen. It failed on every street address tried and passed on every town; at 375 it failed one address earlier, at "Hauppauge, New York 11788". So the row is a flex pair: the address shrinks and ellipsizes, the numbers are `flex: 0 0 auto` and cannot. He typed the address and recognises it from its first characters; the radius and the window are the two facts that say why these tee times and not others, and a clipped one is unrecoverable. THE ONE RESIDUAL, and it is the trade working rather than failing. Swept over six /play variants at 320 and 360 in both schemes, exactly one line still ellipsizes: "Sag Harbor, NY · 90 min · this week" at 360, which needs 333px against 304 in Chromium's widest fallback stack (it measures 249 in SF Pro and fits on a real phone). The address gives up three characters — "Sag Harbor, …" — and both numbers survive, which is the order this rule exists to fix. The old single box lost "this week" entirely on the same line. Widening the .g-query__extra breakpoint past 360 would take the window away from every phone that can in fact show it, to buy back seven pixels on one string. */ .g-query__what { display: flex; align-items: baseline; /* The word space between the address and the "·". A flex item starts its own line box, so the leading space inside .g-query__fixed is collapsed away and the line renders "Montauk, NY· 2 hr". 4px is the nearest step to a 16px word space (~4.4px) and it is inert at 1024, where .g-query__what goes back to display: block. */ gap: 0 var(--g-1); min-width: 0; overflow: hidden; } .g-query__where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-query__fixed { flex: 0 0 auto; white-space: nowrap; } /* The part of the sentence that only exists once there is room for it. Still dropped WHOLE below 360 rather than cut: "· thi…" is worse than silence. */ .g-query__extra { display: none; } @media (min-width: 360px) { .g-query__extra { display: inline; } } .g-query__change { margin-left: auto; flex: 0 0 auto; font-size: var(--t-fact); font-weight: 600; color: var(--dim); white-space: nowrap; } .g-query__now:hover .g-query__change { color: var(--ink); } .g-query__form { padding: 0 var(--g-3) var(--g-3); display: flex; flex-direction: column; gap: var(--g-4); } /* In the 320px rail the whole sentence plus "Change" needs ~300px and comes out as "Sag Harbor, NY · 60 min · thi…". A desktop rail has vertical room and no fold to defend, so the line wraps instead of truncating: an address you cannot read is not a summary of your search. */ @media (min-width: 1024px) { .g-query__now { align-items: flex-start; padding-top: var(--g-3); padding-bottom: var(--g-3); } /* Back to one wrapping run of text: `display: block` puts the two spans back inline so the line breaks between words instead of between boxes. */ .g-query__what { display: block; overflow: visible; } .g-query__where { white-space: normal; overflow: visible; } .g-query__fixed { white-space: normal; } } /* The cancellations filter. This is the highest-value control on the page: genuine releases measured 0.39%–2.54% of open rows across the next six days on 2026-08-06 (21–71 marked against 2,038–3,365 open), so every purely visual scheme is solving "find one needle in forty rows" with encoding when a WHERE clause solves it outright. It is a ?only=cancelled param over the same `released` set the marker uses — no new query, no new classification path, no legend to learn. IT IS A CHIP NOW, AND THAT IS A REPAIR RATHER THAN A RESTYLE. It was a full-width 44px row carrying its label on the left and a 20px unfilled ring pushed to the right edge by `margin-left: auto`. That is the shape of an unstyled radio button, at every width, sitting directly under two rows of controls that fill with --ink to say "on" — so the one control on the sheet that could not be read at a glance was the one the whole product is about. The ring is deleted (`.g-only__dot` with it) and the chip fills, exactly like `.g-days__cell--on` and `.g-bands__chip--on`. One selected-state idiom in the rail instead of two. Shrink-to-fit rather than full width: a 44px band across the pane read as a list row you could open, and there is nothing behind it. Still styled to work as an , a