@import url('/shared/brand-fonts.css?v=20260823-venue-card-tap');
:root {
/* ----- Type roles -----
Three faces, one job each. Two of them are expressive and are used as
accents; the sans is the wall they hang on.
--font-display The Seasons. Hero headlines and major section titles.
--font-script Beautifully Delicious. Handwritten accents and the
occasional emotional phrase — a line at a time, never
a paragraph.
--font-ui DM Sans. Body copy, navigation, buttons, forms,
captions and data. The default: it is set on
and inherited, so a new element gets it for free and
only a display/script element needs to say so.
--font-script falls back to the DISPLAY serif rather than to generic
`cursive`. The BD files are missing (see above), and `cursive` resolves
to Comic Sans on Windows and Android — a novelty face is a far worse
failure than simply looking like the rest of the brand. */
--font-display: 'The Seasons', Cochin, 'Cormorant Garamond', Georgia, serif;
--font-script: 'Beautifully Delicious', 'Snell Roundhand', 'The Seasons', Cochin, Georgia, serif;
/* The club's own sans, for a line of brand voice. Falls through to the UI
stack rather than a generic: if BD Sans fails, DM Sans is the right
substitute — the line stays a sans and stays legible. */
--font-accent: 'BD Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* ----- McDowell Caddie Club — Sandstone Brand Identity Kit -----
Warm desert palette: Adobe Red, Aged Bronze, Sand Beige on a
textured-stone backdrop. Variable NAMES are unchanged so every
existing selector re-themes automatically; only the values moved
from the old navy kit to the sandstone kit. */
/* Brand palette (from the kit) */
--adobe: #B87333; /* Adobe Red */
--bronze: #7F6A4F; /* Aged Bronze */
--sand-beige:#F5E8D1; /* Sand Beige */
/* LIGHT theme — sand-beige cards + dark bronze text on a sandstone
backdrop, per the brand kit's business-card surfaces. */
/* Surfaces */
--bg: #E7D6B8; /* light sand (page, behind stone) */
--panel: #FBF4E6; /* near-white cream card */
--panel-2: #F3E7D2; /* lifted sand */
--border: rgba(127,106,79,0.34); /* Aged Bronze @ 34% */
--border-2: rgba(127,106,79,0.62);
--divider: rgba(60,42,24,0.12);
/* Text — dark on light */
--text: #2E2114; /* dark espresso (primary text) */
--ink: #2E2114; /* alias for paper-aesthetic clarity */
--cream: #2E2114; /* primary text (was light; now dark) */
--on-accent: #F8EFDE; /* light text on dark/accent surfaces */
--muted: #6E5A40; /* bronze-taupe, readable on cream */
/* Brand accent */
--accent: #B87333; /* Adobe Red */
--accent-dark: #8A551F; /* Darker terracotta (hover) */
--accent-soft: rgba(184,115,51,0.14);
--link: #8A551F; /* darker adobe for links on light */
--sand: #E8DDC8; /* Desert Sand */
/* Status */
--forest: #5E5A3A; /* warm olive (success) */
--forest-2: #43401F;
--warn: #B98328; /* darker amber, readable on light */
--danger: #B5482E; /* terracotta-red, readable on light */
/* Radii (brandkit) */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
/* Shadows (soft warm) */
--shadow-card: 0 14px 34px rgba(120,85,50,0.18);
--shadow-elevated: 0 22px 50px rgba(120,85,50,0.26);
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--duration: 220ms;
/* Shared motion system — one vocabulary for every transition so the app
feels physically consistent. --ease-spring adds a gentle overshoot for
presses/pops; the duration scale keeps fast/base/slow in proportion. */
--ease-spring: cubic-bezier(0.34, 1.42, 0.5, 1);
--dur-1: 130ms;
--dur-2: 220ms;
--dur-3: 340ms;
/* Textured LIGHT sandstone backdrop. Layer order (top → bottom):
1. soft edge vignette
2. real photo — drop a tileable JPG at frontend/shared/sandstone.jpg
and it takes over automatically; until then it 404s and the CSS
layers below render
3. coarse cloud mottle (visible stone variation)
4. fine grain
5. warm light base gradient */
/* Copper texture — primary CTA surface (file picker, big buttons). */
--copper:
linear-gradient(180deg, rgba(255,238,200,0.20), rgba(0,0,0,0.18)),
url("/shared/copper.jpg");
--copper-size: 100% 100%, cover;
--hairline: rgba(60, 42, 24, 0.12);
--paper: #FBF4E6;
--paper-soft: #F3E7D2;
/* Soft inset field wells — form fields read as scooped OUT of the cream
card surface (a tone deeper, with a faint inner shadow) instead of
stark white boxes pasted ON it. No border; focus is a copper glow. */
--field-bg: rgba(58, 38, 20, 0.055);
--field-bg-hover: rgba(58, 38, 20, 0.08);
--field-bg-focus: rgba(58, 38, 20, 0.028);
--field-inset: inset 0 1px 3px rgba(58, 38, 20, 0.09);
--field-ring: rgba(184, 115, 51, 0.26);
--field-radius: 12px;
/* Cast-bronze plate palette — every card / panel / consent box is
a "548 house-number plate": dark burnished surface, polished
copper frame, raised copper text. */
--plate-dark: #2B1F14;
--plate-darker: #1C140C;
--plate-glow: rgba(255, 200, 140, 0.08);
--copper-bright: #E4A87E;
--copper-light: #D4986B;
--copper-mid: #B87333;
--copper-deep: #8A551F;
--copper-soft-on-dark: rgba(212, 152, 107, 0.65);
--stone:
url("/shared/sandstone.jpg"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.24'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.10'/%3E%3C/svg%3E"),
linear-gradient(#A88466, #A88466);
--stone-size: cover, 600px 600px, 160px 160px, cover;
}
/* The body.ios-interface experiment (iOS nav bar + bottom tab bar replacing
the topbar) was removed in 20260729-killios: the tab bar routed only
#locker, and hiding the topbar killed the working hamburger drawer. The
standard .topbar + .nav-drawer is the single navigation pattern again. */
/* No web-font import: the brand ships its own faces (The Seasons,
Beautifully Delicious, BD Sans, DM Sans) as local @font-face, declared in
brand-fonts.css and imported at the top of this file. Inter and Cormorant
Garamond were fetched here; neither is used now, so the render-blocking
third-party request goes with them. */
* { box-sizing: border-box; }
/* Snap to the screen: iOS Safari ignores overflow-x:hidden for touch
panning, so the page could still drift sideways toward any element that
poked past the edge. `clip` (Safari 16+) actually forbids the pan;
`hidden` stays as the fallback for older engines. touch-action on the
root limits background-originating gestures to vertical — inner
scrollers (maps, tab bars) keep their own touch behavior. */
/* The status-bar allowance, named once because four different top-bar rules
need it and they drifted apart the last time it was written out longhand.
The page is drawn under the status bar in both runtimes -- viewport-fit=cover
in a browser, and ios.contentInset "never" in the Capacitor shell -- so the
top bar holds itself clear, once, here.
It was briefly zeroed for the shell, when the shell used contentInset
"always". That setting insets the WKWebView's SCROLL CONTENT, which does
clear the page, but it also guarantees a scrollbar: a UIScrollView's
scrollable range is content + insets - bounds, and this page is exactly
bounds tall, so the inset IS the scroll. No CSS can reach that. The shell
moved to "never" and the allowance came back here where it can be seen. */
:root { --safe-top: env(safe-area-inset-top, 0px); }
html, body {
margin: 0; padding: 0; height: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
/* `manipulation`, NOT `pan-y`: a document-level pan-y can be intersected
into descendant gestures on iOS Safari and veto the decks' horizontal
paging. Sideways document scroll is already impossible (overflow-x: clip),
so all we actually want here is to kill double-tap zoom — which is exactly
what manipulation does, while leaving panning on both axes to the decks. */
touch-action: manipulation;
/* No document-level rubber-band / pull-to-refresh: the app owns its own
scrollers, so the page itself should never drag or bounce. */
overscroll-behavior: none;
}
/* Form controls do NOT inherit font-family from their ancestors — the UA
stylesheet gives button/input/select/textarea its own default (Arial on
most engines). Without this reset the brand font stops at the edge of every
control, so any button or field without an explicit rule silently renders a
third typeface. This is what makes "The Seasons and Beautifully Delicious
only" true rather than approximately true. */
button, input, select, textarea, optgroup {
font-family: inherit;
}
/* Same leak, different UA default: code/pre/kbd/samp are given a monospace
family by the browser, not by us. Note this trades away digit and column
alignment in the few places that showed keys and JSON config — the brand
has no monospace face, so tabular-nums is the closest substitute. */
code, pre, kbd, samp {
font-family: inherit;
font-variant-numeric: tabular-nums;
}
body {
font-family: var(--font-ui);
/* Bone limestone backdrop (warm cream solid). The MMR ridge is drawn by
THREE cascading, seamlessly-tiling silhouette rows in body::after (see
below): darkest in front, fading progressively lighter toward the back,
all swaying gently LEFT<->RIGHT in unison (front travels most for a soft
parallax). Horizontal only -- a calm, clean horizon, never a churn.
Color is copper-deep (#8A551F). Reduced-motion freezes it.
Landing and onboarding splashes still use the rich stone via
var(--stone); only the signed-in chrome gets this calm surface. */
background-color: #F2E8D4;
color: var(--text);
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.01em;
}
/* ---- Living MMR horizon: THREE cascading ridge rows in one fixed layer.
Front row is darkest and lowest; each row behind is lighter and its crest
sits a little higher, so the peaks recede up the horizon exactly like real
distant ranges. Every tile is authored seamless (left-edge height ==
right-edge height). One slow ease-in-out keyframe sways all three
horizontally in unison -- the front travels most, the back least, for a
gentle parallax -- and NOTHING moves vertically. Layer order in
background-image is front -> mid -> back (first paints on top), so a near
ridge correctly occludes the fainter one behind it. Fixed + pointer-events
none: it never intercepts input; reduced-motion freezes the sway. */
body::after {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 220px;
z-index: -1;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-x;
background-position: 0 bottom, 0 bottom, 0 bottom;
/* Render each seamless tile SCALED DOWN uniformly (~0.43× the authored
220px) so the whole ridge sits low — the tallest (back) crest lands ~72px
above the bottom, just under the top of the persona switcher FAB
(bottom:18px + 56px tall). Widths scale with the height (300→130 etc.) so
the peaks keep their original steepness instead of stretching into wide,
flat mesas. */
background-size: 130px 95px, 138px 95px, 155px 95px;
background-image:
/* front — darkest, lowest broad ridge (opacity 0.15). Each tile's left and
right edges sit on a short FLAT plateau at the same height, so the
repeat-x seam lands on a horizontal segment and never shows as a vertical
line cutting a slope. */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='220' viewBox='0 0 300 220' preserveAspectRatio='none'%3E%3Cpath d='M0,166 L8,166 L54,150 L104,174 L150,150 L200,170 L250,154 L292,166 L300,166 L300,220 L0,220 Z' fill='%238A551F' opacity='0.15'/%3E%3C/svg%3E"),
/* mid — copper at half strength (opacity 0.09) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220' preserveAspectRatio='none'%3E%3Cpath d='M0,116 L8,116 L44,100 L84,124 L120,98 L160,116 L200,102 L240,122 L280,104 L312,116 L320,116 L320,220 L0,220 Z' fill='%238A551F' opacity='0.09'/%3E%3C/svg%3E"),
/* back — faintest, highest crest (opacity 0.05) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220' preserveAspectRatio='none'%3E%3Cpath d='M0,70 L9,70 L49,55 L94,78 L135,52 L180,70 L225,56 L270,76 L315,58 L351,70 L360,70 L360,220 L0,220 Z' fill='%238A551F' opacity='0.05'/%3E%3C/svg%3E");
animation: mmr-sway 34s ease-in-out infinite;
}
/* Gentle left<->right sway. Front (first value) travels most; back least.
background-position-y stays `bottom` on every stop, so it is purely
horizontal. */
@keyframes mmr-sway {
0%, 100% { background-position: -15px bottom, -10px bottom, -5px bottom; }
50% { background-position: 15px bottom, 10px bottom, 5px bottom; }
}
@media (prefers-reduced-motion: reduce) {
body::after { animation: none; }
}
h1, h2, h3, .serif { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }
/* `dvh` matches the visible viewport on mobile as the URL bar shows/hides,
so the app shell snaps to the current screen instead of overflowing past
the address bar. `vh` is the fallback for older browsers. */
.app-shell { display: grid; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }
/* ---- Landing (pre-auth) ---- */
/* Landing — marketing splash over the warm sandstone backdrop.
Cinematic vignette via :before; stacked column composes shield,
wordmark, tagline, phone, CTA, and the secondary portal links. */
.landing {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
/* Cream limestone surface matching the in-app body. Stone texture
dropped so the landing reads as a single calm canvas under the
intro video and into the signed-in app. */
background-color: #F2E8D4;
background-image: none;
z-index: 50;
/* Tall content (long phone OTP error states, etc.) can scroll
instead of getting clipped by flex centering. */
overflow-y: auto;
box-sizing: border-box;
}
/* Top + bottom flex spacers: with .landing-inner naturally-sized
between them, the inner column centers vertically and the
.landing-copyright (a normal-flow flex child at the very bottom)
never gets overlapped. Replaces the older absolute-positioning +
padding-bottom reservation, which got fragile every time a new
form / error field added height to the inner. */
.landing::before,
.landing::after {
content: '';
flex: 1 1 auto;
min-height: 0;
pointer-events: none;
}
/* Somewhere for the keyboard scroll to go.
The member hero is taller than the space above a phone keyboard, so the
field sits under it and we let the browser scroll it into view. But
.landing is position: fixed; inset: 0, which is sized from the LAYOUT
viewport — and iOS doesn't shrink that when the keyboard opens. The card
still exactly fills it, scrollHeight == clientHeight, and there is no
scroll for the browser to perform, so Safari shifts the visual viewport
instead: the fixed layer slides and fights the composition.
Growing the bottom spacer while a field has focus gives the container
real scroll range. It extends the scrollable area BELOW the card rather
than touching the card itself, so nothing re-lays-out and the stack does
not jump — the page simply becomes scrollable at the moment it needs to
be. Browsers without :has() just keep today's behaviour.
Scoped to .member-landing deliberately. Only the member hero uses the
.landing-card layout, where the card already fills the container and
these spacers collapse to zero — so resizing one adds scroll range
without moving anything. On the staff landings the spacers are what
centres .landing-inner, and pinning the bottom one would shove their
content down the screen on focus. */
.member-landing:has(.landing-input:focus)::after {
flex: 0 0 auto;
height: 46vh;
}
/* Leaves the field clear of the keyboard's top edge once scrolled to,
rather than flush against it. */
.landing-field,
.auth-flip-mount {
scroll-margin-bottom: 24px;
}
.landing-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 380px;
padding: 32px 24px 28px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
/* Pinned-natural-height between the ::before / ::after flex spacers
above; no auto margin needed. flex-shrink: 0 keeps the column from
compressing into the spacers when content overflows. */
flex-shrink: 0;
}
.landing-lockup {
/* The full club lockup (crest + script McDowell + rule + Caddie Club caps)
as ink-on-transparent art on the cream landing. Roughly square
(~1727×1787), so width drives height: sized to fill the footprint the
old shield + text wordmark stack had. White-label tenants never see it —
tenant.js hides the art and unhides the text wordmark on their paint. */
width: 100%;
max-width: 460px;
height: auto;
display: block;
margin: 0 auto 26px;
/* No filter until the PNG is fully decoded: computing drop-shadow from a
partially-decoded alpha channel during the intro fade left "noise" in
the artwork's corners on first land (clean after refresh, when the image
comes decoded from cache). app.js adds .shadow-ready after
img.decode() resolves. */
}
/* ---- Member hero: centred on the wordmark ----------------------------
The two-line wordmark holds the optical centre of the card, and the rest
of the hero distributes around it: slogan + crest share the half above,
number + button share the half below. Both halves are `flex: 1 1 0`, so
they are always exactly equal and the wordmark lands dead centre whatever
the screen height — no magic offsets to go stale the next time something
is resized.
space-evenly inside each half rather than space-between: it puts equal air
at the outer edges too, so the crest doesn't ride up against the wordmark
while the slogan floats off the top of the card. */
.member-landing .landing-card[data-landing-card="hero"] .landing-inner {
flex: 1 1 auto;
justify-content: space-between;
min-height: 0;
}
.member-landing .hero-top,
.member-landing .hero-bottom {
/* `flex: 1 1 0` with `min-height: 0` made the halves exactly equal — and let
them shrink BELOW their own content, which on a short screen spilled the
crest down over the wordmark. Dead-centre is a nicety; a collision is a
defect. Growing from a content basis keeps the halves equal wherever there
is room and simply lets the taller one take what it needs, so the wordmark
drifts off centre instead of being overlapped. */
flex: 1 1 auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
/* Both carry .landing-lockup for the tenant hook, so both need to opt out of
its sizing.
EVERY rule for the crest sizes it by WIDTH and leaves height: auto. Never
set both: the cascade merges a width from one rule with a height from
another into a fixed box, and an ![]()
stretches to fill it. That is exactly
what shipped — a width here plus a height in the short-screen branch below
rendered the portrait shield at 1.6:1, squashed flat. */
.member-landing .landing-crest-link {
flex: 0 0 auto;
/* Scaled to 0.9 of the sizes that shipped (was clamp(132px, 46vw, 260px)).
Patrick, 2026-08-19: "can we also scale down slightly the crest and
mcdowell caddie club text?" — so BOTH marks take the same 0.9, here and on
.landing-wordmark-art below. The factor has to be shared: the note further
down pins crest:wordmark = 0.71 as the mock's defining proportion, and
shrinking one mark alone is precisely how that ratio drifts. */
width: clamp(119px, 41.4vw, 234px);
height: auto;
max-width: 88%;
margin: 0;
}
/* The crest is a link now (to /about), so the sizing above moved from the
![]()
to the that wraps it — the anchor is what hero-top lays out — and
the image simply fills whatever box the anchor gets. Width only, height
auto, exactly as the note above demands: the anchor and the image must never
each contribute one axis, or the portrait shield renders stretched. */
.landing-crest-link {
display: block;
line-height: 0; /* no descender gap under the image */
border-radius: var(--radius-md);
-webkit-tap-highlight-color: transparent;
}
.landing-crest {
width: 100%;
height: auto;
}
/* The only affordance a bare crest can carry: it answers a press. Kept to a
scale rather than an underline or a border — the crest is the brand mark
first and a control second, and anything drawn on top of it reads as damage
to the logo. */
@media (prefers-reduced-motion: no-preference) {
.landing-crest-link { transition: transform var(--dur-2) var(--ease-spring); }
}
.landing-crest-link:active { transform: scale(0.97); }
@media (hover: hover) {
.landing-crest-link:hover { transform: scale(1.02); }
}
/* Keyboard reach. focus-visible only, so a tap never paints a ring. */
.landing-crest-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 6px;
}
.member-landing .landing-wordmark-art {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
.landing-lockup.shadow-ready {
/* Lighter drop-shadow to match the cream surface (was rgba(20,10,4,
0.55) for the dark stone). */
filter: drop-shadow(0 10px 22px rgba(110, 66, 32, 0.25));
}
.landing-wordmark {
display: inline-block;
font-family: var(--font-display);
font-size: clamp(28px, 6.5vw, 42px);
font-weight: 600;
line-height: 1.04;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #3A2614;
margin: 0 auto 26px;
padding: 24px 12px 18px;
/* text-frame-landscape.png was a dark-on-stone ornament; on cream
it reads as a heavy plate. Drop it; let the typography breathe.
Subtle copper rule under the wordmark for the heritage cue. */
background: none;
border: 0;
border-bottom: 1px solid rgba(138, 85, 31, 0.45);
border-radius: 0;
text-shadow: none;
}
/* The 'c' in 'McDowell' rendered as a small lowercase letter with a
thin copper-textured bar underneath -- same copper as the
Continue button, just a fraction the height. Inherits color from
the wordmark but breaks out of the uppercase transform via
text-transform: lowercase. */
.landing-wordmark .mc-c {
position: relative;
text-transform: lowercase;
/* Sized + raised so the small c reads as a proper superior letter that fits
WITHIN the cap band — its top aligns with the M/D cap line instead of
poking above it, its foot a hair above the baseline. */
font-size: 0.72em;
letter-spacing: 0;
vertical-align: 0.34em;
margin: 0 0.06em 0 0.03em;
padding-bottom: 0;
line-height: 1;
}
/* Thin copper-textured hairline directly under the c — the ordinal-style
underline of the superior letter. */
.landing-wordmark .mc-c::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #8A551F;
background-image: var(--copper);
background-size: var(--copper-size);
background-position: center;
border-radius: 1px;
box-shadow: 0 1px 2px rgba(58, 38, 20, 0.30);
}
/* Overline above the crest on the Member landing — the positioning line,
set in The Seasons (the brand's display serif, same family as the
headings). Quiet but legible: it sits above the lockup and should read as
a whispered premise rather than a banner, so it stays well under the
wordmark — but The Seasons has a small x-height and fine strokes, and at
13px on cream it was genuinely hard to read. Sized up to 16/18px, which
is comfortable while still sitting clearly below the lockup.
Sentence case, no uppercase transform — the ellipsis is doing the work
and tracking it out would break the beat. */
.landing-overline {
font-family: var(--font-display);
/* Scales with the screen instead of sitting at a flat 16px. It was only
226px of a 393px phone — the line is the first thing read and had room
to spare. The ceiling is where it starts competing with the "Caddie
Club" caps in the art below it. Held just under the width that would
wrap "Uber…the second to last mile" onto a second line on a 390px
handset — the joke only lands as one line. */
/* Sized to fit the hero column on one line — the joke only lands unbroken.
The column is 72vw now and the line runs ~14.1x the font size, so it has
to sit under 72/14.1 = 5.1vw. Measured at 5.1 it still wrapped — that
coefficient is the wrap point, not a safe value — so 4.7vw with headroom. */
font-size: clamp(15px, 4.7vw, 24px);
/* 700 resolves to the real The Seasons Bold face (theseasons-bd.otf), not a
synthesised one — the same weight the Danny CTA uses, so the two pieces of
brand type on the landing now match.
This is the CEILING, not a choice. The Seasons ships exactly two faces —
theseasons-reg.otf at usWeightClass 400 and theseasons-bd.otf at 700.
There is no semibold. Asking for `font-weight: 600` would resolve, by the
CSS font-matching rules, straight back to the 700 file: identical pixels,
no change on screen. Anything that makes this line read heavier has to do
it some other way, which is what the two declarations below are for. */
font-weight: 700;
font-style: normal;
letter-spacing: 0.03em;
line-height: 1.4;
/* Near-black brown rather than the old #4A3220. The Seasons is a
high-contrast display serif: its hairlines are genuinely thin at 15–24px,
and on cream the eye reads thin strokes as light type. Contrast is the
lever the typeface leaves us — this is most of the perceived weight gain,
and it costs nothing. */
color: #2E1C0E;
/* And the rest of it. A hairline stroke in the same ink thickens every
stroke uniformly, which is precisely the thing a missing semibold would
have done. Kept at 0.3px deliberately: past ~0.5px the counters in the
'e' and 'a' start to close up at 15px and it reads muddy instead of
bold. Patrick, 2026-08-09: "a little too thin for that size." */
-webkit-text-stroke: 0.3px #2E1C0E;
margin: 0 0 16px;
text-shadow: none;
}
@media (min-width: 720px) {
.landing-overline { font-size: 18px; margin-bottom: 18px; }
}
.landing-tagline {
/* The one line on a sign-in screen set in the club's own script, so it
rhymes with the "McDowell" directly above it in the lockup art.
REWRITTEN 2026-08-20, when the licensed Beautifully Delicious cut landed.
Until then --font-script had no @font-face behind it and this fell through
to Snell Roundhand or Georgia, and the rule was tuned for THAT: 13px,
weight 500, 0.12em tracking, uppercase. Rendered with the real face those
four values fight it -- a script's legibility lives in connected lowercase
letterforms, and setting one in caps with a tenth of an em between the
letters takes the joins apart. Measured at 390px/DPR 3 the old values gave
"FILLED TABLES. BETTER NIGHTS." as a row of disconnected marks.
So: sentence case, tracking off, and up to 20px. Same reasoning as the
home greeting's subline -- this face has a very small x-height and needs
the size a serif would not.
Patrick, 2026-08-22: briefly moved to 700 on "make the script font
heavier still" -- reverted the same day once he clarified he meant the
GREETING subline (.home-greeting .greet-sub below), not this one. Back
to Regular; nothing here was actually asking to change. */
font-family: var(--font-script);
font-size: 20px;
font-style: normal;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1.4;
text-transform: none;
color: #3A2614;
margin: 0 0 26px;
text-shadow: none;
}
/* Desktop: still single column, just larger scale and tighter rhythm */
@media (min-width: 720px) {
.landing-inner { max-width: 460px; padding: 48px 32px; }
.landing-lockup { width: 420px; max-width: 72%; margin-bottom: 26px; }
.landing-tagline { font-size: 22px; margin-bottom: 30px; }
}
/* Caddie sign-in only. Patrick, 2026-08-22: "'drive the neighborhood' script
needs to match the same subtitle script font weight/size" -- the subtitle
script being .home-greeting .greet-sub, which he'd just had bumped to the
real shipped Bold plus a 0.4px stroke at a size that scales with the
viewport (see that rule, below). Copied verbatim rather than approximated,
for the same reason that rule's own comment gives: this face's weights
barely separate below the size where .greet-sub's own measurement pinned
the difference (~46.8px) -- reusing its exact clamp() is what actually
gets there, not a guess at a slightly-bigger fixed px.
Scoped to .caddie-body only -- the ask named the Caddie login specifically,
not the other three portals' sign-in taglines, and .caddie-body already
scopes per-portal overrides elsewhere in this file (see the topbar rules).
Overrides the desktop 22px bump above by specificity, at every width, on
purpose: a fixed 22px would undo the whole point of matching a clamp().
Verified in Chromium at 320/375/393/430px: "Drive the neighborhood."
stays on one line at every width, unlike .greet-sub's 24 rotating lines
which were measured against a wider column -- this one is safely shorter
than the widest of those, so no new wrap check was needed beyond this. */
.caddie-body .landing-tagline {
font-size: clamp(36px, 11.6vw, 48px);
font-weight: 700;
-webkit-text-stroke: 0.4px currentColor;
}
.landing-copyright {
/* In-flow flex child sitting after the ::after spacer, so it never
gets overlapped by .landing-inner — earlier absolute-positioning
plus padding-bottom reservation was fragile every time a new
form / error field grew the inner column. */
position: static;
flex-shrink: 0;
width: 100%;
margin-bottom: 12px;
padding: 0 8px;
font-family: var(--font-ui);
font-size: clamp(8px, 2.4vw, 11px);
letter-spacing: 0.02em;
color: rgba(58, 38, 20, 0.5);
text-align: center;
/* Must wrap: with nowrap the entity + email line overflowed the right
edge on phones, giving iOS a horizontal pan target (the page "drifted"
sideways). Normal wrapping keeps every pixel inside the viewport. */
white-space: normal;
overflow-wrap: break-word;
text-shadow: none;
}
.landing-copyright-mail {
white-space: nowrap; /* keep the email itself on one line when it wraps */
color: rgba(58, 38, 20, 0.68);
text-decoration: none;
border-bottom: 1px solid rgba(138, 85, 31, 0.3);
}
.landing-copyright-mail:hover {
color: #5C3F26;
border-bottom-color: rgba(138, 85, 31, 0.7);
}
.landing-inner .landing-other a { color: #5C3F26; }
.landing-inner .landing-other a:hover { color: #8A551F; }
.landing-inner .landing-other .dot { color: rgba(58, 38, 20, 0.45); }
.landing-inner .landing-hint { color: #5C3F26; }
.landing-inner .landing-error { color: #B0432D; }
/* First-visit consent screen — problem / solution / brand pitch + CTA.
Cast-bronze 548 plate: dark surface, polished copper frame, embossed
copper text. The "I'm in!" CTA stays full copper texture. */
#auth-step-consent {
max-width: 360px;
margin: 0 auto 22px;
text-align: left;
padding: 24px 24px 20px;
background-color: var(--panel);
background-image: none;
border: 1px solid rgba(184, 115, 51, 0.25);
border-left: 3px solid var(--copper);
border-radius: 10px;
color: var(--ink);
box-shadow: 0 14px 34px rgba(120, 85, 50, 0.12);
}
#auth-step-consent .landing-btn { margin-top: 10px; }
.consent-block { margin-bottom: 20px; }
.consent-block:last-of-type { margin-bottom: 22px; }
.consent-h {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--copper-dark);
margin: 0 0 6px;
text-shadow: none;
}
.consent-p {
font-family: var(--font-ui);
font-size: 19px;
line-height: 1.4;
color: var(--ink);
margin: 0;
}
/* iPhone-first compression: shrink the lockup, sub, and consent plate
so the entire consent screen fits inside the viewport without
scrolling or pinch-zoom on phones. */
@media (max-width: 480px), (max-height: 800px) {
.landing-inner { padding: 18px 16px 22px; }
.landing-lockup { max-width: 240px; margin-bottom: 12px; }
.landing-sub { font-size: 11px; letter-spacing: 0.32em; margin: 6px 0 14px; }
#auth-step-consent { padding: 18px 20px 16px; margin-bottom: 14px; }
.consent-block { margin-bottom: 14px; }
.consent-block:last-of-type { margin-bottom: 16px; }
.consent-h { font-size: 10px; letter-spacing: 0.22em; margin: 0 0 4px; }
.consent-p { font-size: 16px; line-height: 1.32; }
.landing-other { font-size: 11px; }
#auth-step-consent .landing-btn { padding: 12px; min-height: 44px; font-size: 14px; }
}
.landing-sub {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--muted);
margin: 14px 0 36px;
}
.landing-rule {
width: 28px;
height: 1px;
background: var(--accent);
margin: 0 auto 28px;
border: 0;
}
.landing-input {
width: 100%;
background: var(--plate-darker);
border: 1px solid var(--copper-mid);
color: var(--copper-light);
padding: 14px 16px;
font-size: 20px;
font-weight: 500;
text-align: center;
font-family: var(--font-ui);
letter-spacing: 0.06em;
margin-bottom: 20px;
border-radius: 4px;
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.landing-input:focus { outline: none; border-color: var(--copper-bright); box-shadow: 0 0 0 3px rgba(228, 168, 126, 0.20); }
.landing-input::placeholder { color: var(--copper-soft-on-dark); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
/* Unified landing — no field box at all. A bare copper hairline just wider
than a phone number, centered, with the typewriter Easter egg on page hit
(famous-numbers.js; types a rotating classic, deletes it) followed by the
caret cue blinking dead center — iOS shows no native caret without a tap,
so the fake one stands in. Underline warms + doubles on focus. */
.landing .landing-input {
width: 19ch;
max-width: calc(100vw - 96px);
margin: 0 auto 20px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(138, 85, 31, 0.55);
box-shadow: none;
border-radius: 0;
color: #3A2614;
-webkit-text-fill-color: #3A2614;
caret-color: var(--accent);
font-size: 18px;
font-weight: 400;
letter-spacing: 0.04em;
padding: 10px 4px 8px;
text-align: center;
}
.landing-demo-value {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #3A2614;
font: 400 18px/1 var(--font-ui);
letter-spacing: 0.04em;
white-space: nowrap;
pointer-events: none;
}
.landing .landing-input:hover { background: transparent; }
.landing .landing-input:focus {
background: transparent;
border-bottom-color: var(--copper-deep);
box-shadow: 0 1px 0 0 var(--copper-deep);
}
/* iOS/Chrome contact autofill paints a yellow rectangle over transparent
fields by default. Keep the bare underline and readable ink instead. */
.landing .landing-input:-webkit-autofill,
.landing .landing-input:-webkit-autofill:hover,
.landing .landing-input:-webkit-autofill:focus {
-webkit-text-fill-color: #3A2614;
caret-color: var(--accent);
-webkit-box-shadow: 0 0 0 1000px #F2E8D4 inset, 0 1px 0 var(--copper-deep);
box-shadow: 0 0 0 1000px #F2E8D4 inset, 0 1px 0 var(--copper-deep);
border-bottom-color: var(--copper-deep);
}
/* While the caret cue is blinking the placeholder would sit underneath it —
keep the field visually empty until the real caret takes over. */
.landing-field .landing-input.seed-hint::placeholder { color: transparent; }
.landing .landing-input::placeholder {
color: #8A7560;
letter-spacing: 0.16em;
font-size: 12px;
font-weight: 400;
}
/* Role picker on the unified landing — translucent plate (.landing
.landing-input above) with a soft-copper dropdown chevron. */
.landing select.landing-role {
font-size: 16px;
letter-spacing: 0.06em;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, rgba(212, 152, 107, 0.55) 50%),
linear-gradient(135deg, rgba(212, 152, 107, 0.55) 50%, transparent 50%),
linear-gradient(rgba(28, 20, 12, 0.38), rgba(28, 20, 12, 0.38));
background-position:
calc(100% - 18px) 50%,
calc(100% - 12px) 50%,
0 0;
background-size: 6px 6px, 6px 6px, 100% 100%;
background-repeat: no-repeat;
padding-right: 36px;
cursor: pointer;
}
.landing select.landing-role option { background: var(--plate-dark); color: var(--copper-light); }
/* Wrap around a seeded input so we can render a blinking caret cue that
draws the eye to the field — only visible while the seed-hint class
is still on the input (the JS strips it the moment the user focuses
or types, at which point the real native caret takes over). */
/* Wrap around the landing underline. The LABEL is the real tap target:
the visual field is a 17ch hairline (~170×40px — below the 44pt touch
minimum, and misses read as 'can't type'), so the wrapper stretches to a
forgiving 320×64 zone and tapping anywhere in it focuses the input. */
.landing-field {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 320px;
min-height: 64px;
margin: 0 auto 20px;
cursor: text;
-webkit-tap-highlight-color: transparent;
}
.landing-field .landing-input { margin-bottom: 0; flex: 0 0 auto; }
/* Twilio SMS opt-in — visible next to the phone field, never collapsed. */
.sms-consent {
margin: 12px auto 4px;
max-width: 420px;
text-align: left;
}
.sms-consent-notice {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.45;
color: #3A2614;
letter-spacing: 0;
text-transform: none;
}
.sms-consent-notice a {
color: #8A551F;
text-decoration: underline;
}
.sms-consent-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.4;
color: #3A2614;
cursor: pointer;
}
.sms-consent-check input {
accent-color: #8A551F;
width: 18px;
height: 18px;
margin-top: 2px;
flex: 0 0 auto;
}
.landing-card[data-landing-card="hero"] .sms-consent {
max-width: none;
width: 100%;
}
/* Standing prompt above the single auth field. Deliberately a real, always-
present line rather than a placeholder: a placeholder clipped at 17ch
("ENTER PHONE…") inside this centred field, and it would vanish the moment
the member started typing — which is exactly when they might still be
unsure what the field wants. UI role, because it is a form label. */
.landing-field-hint {
display: block;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(46, 33, 20, 0.52);
/* Sits UNDER the rule the number is typed on, so it reads as a caption for
that line rather than a label floating over an empty field. margin-TOP,
therefore — it needs to hug the rule above it, not the button below. */
margin-top: 8px;
margin-bottom: 0;
transition: opacity var(--duration, 0.2s) var(--ease, ease);
}
.landing-field .caret-cue {
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 24px;
margin: -12px 0 0 -1px;
background: var(--accent);
border-radius: 1px;
pointer-events: none;
display: none;
}
.landing-field .landing-input.seed-hint:not(.is-typing) ~ .caret-cue {
display: block;
animation: caret-blink 1.05s steps(2, end) infinite;
}
@keyframes caret-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
/* These members skip the typewriter (see runLandingEgg) but still get the
cue — shown, just not blinking. */
.landing-field .landing-input.seed-hint:not(.is-typing) ~ .caret-cue {
animation: none;
opacity: 1;
}
}
.landing-btn {
width: 100%;
max-width: 280px;
margin: 0 auto;
display: block;
background-image: var(--copper);
background-size: var(--copper-size);
background-repeat: no-repeat;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(40, 22, 6, 0.55);
border: 1px solid rgba(40, 22, 6, 0.55);
padding: 14px 22px;
border-radius: 4px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: filter var(--duration) var(--ease), background-image var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
min-height: 48px;
/* Clean copper: dropped the inset bevel highlights + heavy drop shadow that
read as a plasticky faux-3D button; a slim shadow keeps it lifted. */
box-shadow: 0 2px 6px rgba(40, 22, 6, 0.16);
}
.landing-btn:hover { filter: brightness(1.06); box-shadow: 0 3px 9px rgba(40, 22, 6, 0.22); }
.landing-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: saturate(0.55); }
.landing-hint {
margin-top: 20px;
font-size: 11px;
color: var(--muted);
letter-spacing: 0.05em;
}
.landing-error {
margin-top: 16px;
font-size: 12px;
color: var(--danger);
letter-spacing: 0.04em;
}
.landing-other {
display: flex;
justify-content: center;
align-items: baseline;
flex-wrap: nowrap;
gap: 12px;
margin-top: 40px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.landing-other a {
color: var(--muted);
text-decoration: none;
font-weight: 700;
white-space: nowrap;
margin: 0;
}
.landing-other .dot { color: var(--muted); opacity: 0.55; }
.landing-other a:hover { color: var(--accent); }
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 90;
padding: calc(10px + var(--safe-top)) calc(22px + env(safe-area-inset-right)) 10px calc(22px + env(safe-area-inset-left));
/* Espresso band: the header separates crisply from the cream page body, and
the reversed white-line crest (shield-white.png) reads at full contrast
against it — the bronze mark is a mid-tone metal that muddied here. Also a
frosted material: near-opaque gradient over a blur, so overscroll or
standalone-PWA gaps read as smoked glass instead of tearing. */
background: linear-gradient(180deg, rgba(36, 24, 17, 0.94) 0%, rgba(26, 16, 9, 0.96) 100%);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
/* No copper hairline under the bar. The espresso band already separates
from the cream page on its own, and the soft drop shadow below carries
the edge — a drawn rule on top of both read as a seam. */
box-shadow: 0 10px 30px rgba(10, 5, 2, 0.28);
}
.topbar .brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
/* Flex items floor at their content width by default, which would let a
long wordmark shove the nav off the bar. Allowing the lockup to shrink
puts the truncation in .name (below), where it degrades gracefully. */
min-width: 0;
}
/* The crest is the drawer trigger wherever the inline links are hidden (see
nav.js, which reads that same computed display rather than duplicating the
breakpoint). A hairline caret is the entire affordance — enough that the
lockup reads as tappable, well short of reinstating the icon we just
removed. Above 1000px the links row is visible, so there is nothing to
reveal and no caret is drawn. */
@media (max-width: 1000px) {
.topbar .brand::after {
content: '';
flex: 0 0 auto;
width: 6px;
height: 6px;
margin-left: 1px;
border-right: 1.5px solid rgba(201, 161, 94, 0.7);
border-bottom: 1.5px solid rgba(201, 161, 94, 0.7);
transform: translateY(-2px) rotate(45deg);
transition: transform var(--duration, 0.2s) var(--ease, ease);
}
.topbar .brand[aria-expanded='true']::after {
transform: translateY(1px) rotate(-135deg);
}
}
.topbar .brand .mark {
/* The crest now LEADS the lockup rather than matching the wordmark art
beside it (72-84px) — it is the mark people recognise at a glance on a
phone. The bar sizes to its tallest child, so this grows the band by the
difference rather than cropping the crest.
Height-driven with width:auto, not a square box. The crest art is
745x1038 (~0.72:1), so a square box left ~28% of its own width as dead
space that the .brand gap then widened further — the crest read smaller
than its box implied and sat further from the wordmark than intended. */
height: 92px;
width: auto;
display: block;
/* Soft lift so the reversed crest sits on the bar rather than in it. Lighter
than the bronze mark's shadow — white line art needs separation, not the
depth a mid-tone metal plaque wanted. */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.topbar .brand .wordmark {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1;
min-width: 0; /* see .brand — lets .name be the thing that truncates */
/* No copper rule: the underline belonged to the type-set wordmark. The
wordmark ART carries its own baseline and reads cleaner floating next
to the crest. */
}
.topbar .brand .wordmark .name {
font-family: var(--font-display);
/* Scales with the bar instead of sitting at a fixed 20px, so the club name
is as large as the width allows. Capped at 26px — past that it starts
competing with the page's own headings. */
font-size: clamp(22px, 2.4vw, 26px);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
/* The club name is a wordmark, not a sentence — it breaks across two lines
rather than shrinking, which reads as a layout bug. Cochin is Apple-only,
so a Windows/Android visitor gets Georgia or worse at up to ~15% wider;
on a narrow phone that lands as an ellipsis on one clean line instead of
the two-line wrap this used to produce. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Warm ivory on the espresso bar — high contrast, reads as engraved gold. */
color: #F1E4C9;
}
/* The club name as shipped art — the white script/serif wordmark on the
dark bar. Parked next to the text .name (hidden), which tenant.js swaps
back in when a licensee brand paints: they have no rights to the MCC
artwork. Sized near crest height so the brand reads as one engraved
lockup; aspect is ~5.1:1, so width follows. */
.topbar .brand .wordmark .name-img {
height: clamp(72px, 7.2vw, 84px);
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
/* Same soft lift the reversed crest gets — white line art needs
separation from the bar, not depth. */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.topbar .brand .wordmark .sub {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 600;
color: #C9A15E;
letter-spacing: 0.34em;
text-transform: uppercase;
margin-top: 5px;
}
.topbar .links {
display: flex;
align-items: center;
gap: 2px;
}
.topbar .links a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 10px;
border-radius: 8px;
color: #D9C7A6;
text-decoration: none;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: color 160ms ease, background-color 160ms ease;
}
.topbar .links a:hover { color: #EFC98F; background: rgba(184, 115, 51, 0.14); }
.topbar .links a:focus-visible,
.topbar .brand:focus-visible,
@media (prefers-reduced-motion: reduce) {
.topbar .links a { transition: none; }
}
.nav-drawer {
position: fixed;
/* Anchored to the bar's MEASURED height, published as --topbar-h by nav.js.
This was a hardcoded 64px, which silently stopped matching the moment the
bar changed size — the crest resize pushed the bar to 102px on a phone and
the drawer's first item ("Concierge desk") ended up behind it. The bar has
three heights (default, ride-active, desktop) and its padding already
includes the safe-area inset, so a literal here can only ever be right for
one of them. The fallback is the phone default, for the frame before JS
measures. */
top: calc(var(--topbar-h, 102px) + 6px);
right: calc(12px + env(safe-area-inset-right));
width: 220px;
max-width: calc(100vw - 24px);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
padding: 6px;
display: flex;
flex-direction: column;
z-index: 100;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.nav-drawer.open {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav-drawer a {
display: block;
padding: 12px 14px;
color: var(--cream);
text-decoration: none;
font-size: 13px;
letter-spacing: 0.06em;
border-radius: 10px;
}
.nav-drawer a:hover { background: rgba(255,255,255,0.04); color: var(--accent); }
.nav-drawer a + a { border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
.nav-drawer { transition: none; }
}
.layout { display: grid; grid-template-columns: 400px 1fr; height: 100%; }
.layout.full { grid-template-columns: 1fr; }
.sidebar { background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding: 20px; }
/* isolation:isolate is load-bearing, not tidiness. Without it .main is
position:relative with z-index:auto — no stacking context — so everything
inside it competes against page-level chrome directly. That is fine while
the contents are ours. It is not fine with Leaflet in there: its own
stylesheet plants .leaflet-pane at 400, .leaflet-control at 800 and
.leaflet-top/.leaflet-bottom at 1000, all of which beat the nav drawer's
100. Result, reported by Patrick 2026-08-16: "I can't access the concierge
desk menu because the map is covering it." Verified with the real
stylesheets in a browser — elementFromPoint over both drawer links returned
.leaflet-map-pane, so every tap went to the map.
Isolating makes Leaflet's numbers local to .main and unable to reach page
chrome at all. Chasing it the other way — raising the drawer above 1000 —
only holds until the next vendor z-index. */
.main { position: relative; overflow: hidden; isolation: isolate; }
/* Member portal: mobile-first single-column stack. No full-screen map —
the map only lives inside the active ride card. */
.member-stack {
/* One source of truth for the column's side gutter: the padding below uses
it, and .map-stage negates it to run a map edge-to-edge. Change it here
and the full-bleed breakout follows. */
/* Patrick, 2026-08-20: "scale the card sizes down so that they have more
padding on all sides that keeps the sides off the edge." 14px -> 20px.
One token does it: the padding below reads it and .map-stage negates it to
run a map edge-to-edge, so the full-bleed breakout follows automatically.
Costs the booking card 12px of width, which matters to exactly one thing:
the greeting subline is sized in vw and its longest string was already
inside the old column by 25px. Re-measured after the change rather than
assumed -- see the note on .greet-sub's font-size. */
--stack-gutter: 20px;
height: 100%;
overflow-y: auto;
padding: 12px var(--stack-gutter) 24px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 520px;
margin: 0 auto;
width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Home feed — vertical snap feed for the passenger home screen.
Matches Booked Out's Feed pattern: full-viewport cards with y-mandatory
snap, gesture arbiter prevents momentum chaining, swipe-down hint when
there's more below. */
.home-feed {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.home-feed::-webkit-scrollbar { display: none; }
.home-feed-card {
min-height: auto;
display: flex;
flex-direction: column;
}
.home-feed-hint {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
animation: mc-hint-bounce 1.4s ease-in-out infinite;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
}
.home-feed-hint.show { opacity: 0.6; }
@keyframes mc-hint-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* Time-of-day greeting above the booking card. The member-stack centers the
greeting+card group in the viewport; this breathing room below the greeting
lifts it up into the space between the top of the screen and the card, so it
reads as its own upper element rather than hugging the card. */
.home-greeting {
padding: 2px 4px 0;
/* Kept tight (main's "tighten gap" fix) so the booking card + Send Caddie
always land on one screen, complementing the compact estimate strip. */
margin-bottom: clamp(16px, 4vh, 32px);
}
.home-greeting .greet-line {
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.08;
color: #1a1410;
margin: 0 0 5px;
}
/* The rotating line under the greeting — the club's own script, the hand the
wordmark is cut from.
This line has been four faces in a day and the trail is worth keeping,
because the moves were not all the same kind of mistake:
display serif where it started
BDScript 26px Patrick: "match the font used in 'McDowell'" (PR #548)
BD Sans 16px Patrick: "BD sans should be used on the subheader of the
landing page below the salutation" (PR #549)
BDScript 26px Patrick: "It should be Beautifully Delicious Script"
The middle two were me acting on the words rather than checking the
intent -- both times the instruction was clear and both times it was not
what he meant. Restored verbatim to the PR #548 rule; the only surviving
change from the detour is that BD Sans stays wired but unused.
26px and #4A3A28 are measured, not chosen. BDScript is a hairline with a
very small x-height: at DPR 3 on the paper it is illegible at 15, poor at
19, and only reads cleanly from about 24 up. The colour moves off --muted
(5.4:1) to 9.0:1 for the same reason -- a monoline script at one stroke
weight needs contrast a serif does not.
Bigger than the 15px it replaced and still subordinate to the 30px greeting
above it, because the script's x-height does the hierarchy work the point
size normally would. */
.home-greeting .greet-sub {
font-family: var(--font-script);
font-style: normal;
/* Patrick, 2026-08-20: "make the font of that subheader biggger so it's
legible." 26px was my read off a screenshot; his was off a phone, and his
wins. Two things the measurement changed:
The BOLD cut is not a lever. Rendered side by side at 30 and 34, the
700 face is barely heavier than the 400 -- this is a monoline script
and its weights differ far less than a text face's do. Size is the only
axis that moves legibility here.
Wrapping was a non-issue, which is why this can go this far. Measured
every one of the 24 rotating sublines at each size: the widest ("Your
Caddie is standing by.") is 267px at 38px against 354px of column, so
nothing wraps with 87px to spare. The face reads wide and sets narrow.
Bumped a second time (Patrick: "Bigger still!"), and this time the wall
was measured rather than approached. Widest subline against the column:
320px screen 40px is the last that fits (3px spare); 42px wraps
390px screen 50px is the last that fits (3px spare); 52px wraps
430px screen 56px fits with 1px
320 is the binding constraint, so the clamp is built around it.
Re-fitted when --stack-gutter went 14px -> 20px: a wider gutter is 12px
off the column this line is measured against, and at 12vw that left a 320
screen 3px of margin -- fits today, wraps the first time a subline gains a
character. 11.6vw restores it to 12px there and costs 390 about 1.6px,
which is not a difference anyone can see. Now 37.1px at 320 with 12px
spare, 45.2 at 390 with 25, and the 48px ceiling leaves a 430 with 45. */
font-size: clamp(36px, 11.6vw, 48px);
/* 700, the shipped Bold. Patrick: "Add some weight to the script font now."
I had called this a dead lever earlier today, on a side-by-side at 30 and
34px where the two faces looked nearly identical. That was true at those
sizes and is not true here. Measured on identical element crops at 46.8px:
400 5978 ink pixels, mean ink value 94
700 7980 ink pixels, mean ink value 85
+33% ink and denser strokes. A monoline script's weights separate as the
stroke gets thick enough to see, so the size bump is what made the weight
worth having. Both faces are shipped, so this is the real Bold and not a
synthesised smear -- fontface.test.js enforces the pair. */
font-weight: 700;
/* Patrick, 2026-08-22: "heavier still" -- but 700 above is already the
shipped Bold, the heaviest REAL cut BDScript has. Past this, font-weight
has nothing left to give except a synthesised smear, which is exactly
the artifact the "not a synthesised smear" note above was written to
rule out, and which script-face-usage.test.js pins to {400, 700} for
that reason. font-weight itself is not the lever left to pull.
-webkit-text-stroke is: it thickens the actual painted strokes of the
real Bold glyphs rather than asking the browser to fake a heavier one.
0.4px at this element's 36-48px clamp reads as denser ink, not a halo --
verified in Chromium: at 1px it started looking outlined rather than
bold, at 0.4px it did not. script-face-usage.test.js constrains
font-weight, letter-spacing, size and line-height on every script
surface; it says nothing about this property, so it does not need
touching for this to be a legitimate answer on this one surface. */
-webkit-text-stroke: 0.4px currentColor;
/* currentColor, not a hardcoded hex: this rule's own color line below can
move (it already has once) and the stroke must track it, not fall back
to whatever shade happened to be current the day this was written. */
/* Stated, not inherited. The default is `none`, but this is the property
that took the landing tagline apart, and an ancestor picking up an
uppercase rule later must not be able to reach in here. */
text-transform: none;
letter-spacing: 0.01em;
/* 1.3, and it is a CORRECTNESS floor rather than taste. BDScript's own
metrics are 0.788em ascent + 0.412em descent = a 1.200em extent, so any
line-height under 1.2 leaves the glyphs taller than their line box. They
then overflow it by half the difference at each end -- and .home-greeting
sets overflow:hidden for the collapse, which turns that overflow into a
clip.
I shipped exactly that in PR #551 by tightening this to 1.1 on the theory
that the script "carries its own optical leading". Measured afterwards at
all three widths: the descenders were losing 1.6-2.0px off their tails at
320, 390 and 430 alike. It was small enough to miss in a screenshot and
it was wrong at every size.
1.3 leaves 0.1em of margin over the extent, so a taller glyph in some
future string still has room. */
line-height: 1.3;
color: #4A3A28;
margin: 0;
}
/* Subtle entrance: each top-level child of the home stack fades + lifts
in on first paint, in stagger. Keeps the surface from feeling like a
wall of cards landing all at once. Triggered on the .first-paint hook
that app.js adds to the stack once the API call settles. */
@keyframes mc-rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.member-stack.first-paint > * {
animation: mc-rise 280ms ease-out both;
}
.member-stack.first-paint > *:nth-child(1) { animation-delay: 0ms; }
.member-stack.first-paint > *:nth-child(2) { animation-delay: 40ms; }
.member-stack.first-paint > *:nth-child(3) { animation-delay: 80ms; }
.member-stack.first-paint > *:nth-child(4) { animation-delay: 120ms; }
.member-stack.first-paint > *:nth-child(5) { animation-delay: 160ms; }
.member-stack.first-paint > *:nth-child(n+6) { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
.member-stack.first-paint > * { animation: none; }
}
/* ---- Identity strip (slim replacement for the old credit-card-style
membership card) ---- */
.identity-strip {
display: flex;
align-items: baseline;
gap: 10px;
padding: 6px 4px 10px;
/* Flat ribbon, not a card. Sits as quiet identity context under
the topbar without competing with the booking hero for attention.
Bottom rule keeps the copper signal without the heavy panel chrome. */
border: 0;
border-bottom: 1px solid rgba(184, 115, 51, 0.25);
border-radius: 0;
background: transparent;
background-image: none;
color: var(--ink);
box-shadow: none;
flex-wrap: wrap;
}
.identity-strip .id-mark {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.identity-strip .id-text {
min-width: 0;
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
line-height: 1.2;
}
.identity-strip .id-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.1;
overflow-wrap: anywhere;
}
.identity-strip .id-meta {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 0;
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
align-items: baseline;
}
.identity-strip .id-tier { color: var(--copper-dark); font-weight: 700; }
.identity-strip .id-dot { opacity: 0.5; }
/* ---- Covers-delivered metric (Club House host + Concierge) ---- */
.covers-summary { display: flex; gap: 12px; margin: 4px 0 14px; }
.covers-kpi {
flex: 1;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
text-align: center;
}
.covers-kpi .n {
font-family: var(--font-ui);
font-size: 26px; font-weight: 600; color: var(--cream);
}
.covers-kpi:last-child .n { color: var(--accent); }
.covers-kpi .l {
font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--muted); margin-top: 2px;
}
.covers-bars { display: flex; flex-direction: column; gap: 8px; }
.covers-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.covers-row .day {
width: 34px; flex-shrink: 0; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
}
.covers-row .track {
flex: 1; height: 18px; background: rgba(255,255,255,0.03);
border-radius: 6px; overflow: hidden; display: flex;
}
.covers-row .fill { height: 100%; background: rgba(184,115,51,0.45); }
.covers-row .fill.program { background: var(--accent); }
.covers-row .val { width: 28px; text-align: right; color: var(--cream); flex-shrink: 0; }
.covers-row.slow .day { color: var(--accent); font-weight: 700; }
/* ---- Demand-engine "comp outing this week" banner ---- */
.featured-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 14px;
text-decoration: none;
background: linear-gradient(135deg, rgba(184,115,51,0.22), rgba(184,115,51,0.08));
border: 1px solid var(--accent);
box-shadow: var(--shadow-card);
}
.featured-banner .featured-tag {
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
flex-shrink: 0;
}
.featured-banner .featured-text {
flex: 1;
min-width: 0;
color: var(--cream);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.15;
}
.featured-banner .featured-go {
flex-shrink: 0;
color: var(--accent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
}
/* ---- Hero booking card ---- */
.hero-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
/* "View the menu ↗" — quiet copper link under the route card, shown only
when the picked Club House has a menu link on file. */
.dest-menu-link {
display: inline-block;
margin: 2px 0 10px 34px; /* aligns under the destination text, past the route icons */
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--copper-deep, #8A551F);
text-decoration: none;
border-bottom: 1px solid rgba(184, 115, 51, 0.4);
padding-bottom: 1px;
}
.dest-menu-link:hover { color: var(--copper-mid, #B87333); border-color: var(--copper-mid, #B87333); }
/* (The retired Locker button left no trace — the Locker is one swipe to the
right of the booking card; the menu links remain the accessible path.) */
.hero-card {
background-color: var(--panel);
background-image: none;
border: 1px solid rgba(184, 115, 51, 0.30);
border-left: 4px solid var(--copper);
border-radius: 14px;
/* Promoted: more padding and a stronger shadow than the secondary
sections so the booking action reads as the page's primary CTA. */
padding: 26px 22px 24px;
box-shadow: 0 18px 44px rgba(120, 85, 50, 0.18);
color: var(--ink);
position: relative;
transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.hero-card .hero-title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
letter-spacing: 0.005em;
margin: 0 0 10px;
color: var(--cream);
}
/* Direction control — "Going out" vs "Heading home". The old two-pill
segmented control was never rendered (no #dir-out/#dir-home markup ever
existed); this is the mount for the flip toggle that replaced it. */
.direction-row {
display: flex;
justify-content: flex-end;
margin: 0 0 6px;
}
.direction-row:empty { display: none; }
/* From address — styled exactly like the destination select-lg.
Tappable whole; opens the residence picker on tap. Sits above
the destination dropdown so the two read as a matching pair:
pick from, pick to. */
.from-select {
display: flex;
align-items: center;
gap: 10px;
height: 52px;
padding: 0 16px;
margin: 0 0 12px;
background: var(--field-bg);
border: 1px solid transparent;
box-shadow: var(--field-inset);
border-radius: 12px;
cursor: pointer;
transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
box-sizing: border-box;
}
.from-select:hover { background: var(--field-bg-hover); }
.from-select:focus-visible {
outline: none;
background: var(--field-bg-focus);
box-shadow: var(--field-inset), 0 0 0 3px var(--field-ring);
}
.from-select .muted {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 10px;
font-weight: 600;
font-family: var(--font-ui);
color: var(--muted);
flex: 0 0 auto;
line-height: 1;
margin-top: 1px;
}
.from-select #from-label {
flex: 1;
font-size: 15px;
font-weight: 500;
color: var(--ink);
font-family: var(--font-ui);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.from-select .from-chevron {
color: var(--muted);
flex: 0 0 auto;
display: block;
}
.hero-card .hero-step { margin-top: 0; }
.hero-card .select-lg {
height: 52px;
font-size: 15px;
font-family: var(--font-ui);
padding: 0 16px;
border-radius: 12px;
}
.hero-card .btn-hero {
width: 100%;
height: 52px;
font-size: 13px;
letter-spacing: 0.25em;
border-radius: 12px;
margin-top: 14px;
text-transform: uppercase;
}
.hero-card .btn-hero:disabled { opacity: 0.4; cursor: not-allowed; }
.hero-card #book-actions { display: block; margin-top: 0; }
/* Visually hidden, not removed: content stays in the accessibility tree
(screen readers, the field's accessible name) with zero footprint on
screen. The standard clip-based technique -- display:none takes it out of
the tree entirely, which is the wrong tool for a label that still names a
control. */
.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;
}
/* Riders — a flex ITEM inside .est-strip, on the same wrapped line as the
tier chip, not a row of its own. Nesting it in #estimate-card (one report)
still left every fact on its own line; folding it into the chip's line (a
second report, explicit about not adding words to explain the first fix)
removed a whole row instead. flex:0 0 auto so it neither grows to fill the
line nor shrinks the chip beside it -- .est-strip's own
justify-content:space-between then pushes the two to opposite ends of
whatever line they land on. */
/* ...and a flex CONTAINER in its own right, because it holds two fields now.
As a plain block the guests picker sat UNDER the rider count -- reported
2026-08-29 with the two boxed and an arrow pointing sideways. The pair reads
as one fact ("two people, no guests"), so they belong on one line; the gap
is what keeps them legible as two controls rather than a single wide one. */
.est-riders {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
/* Both selectors, because shared/wheel-picker.js progressively enhances every