/* =========================================================================
RocketClass — parent-facing UI, v2 (built to the /renders design comps).
Mobile-app feel: warm coral accents over a lavender canvas, chunky rounded
cards, activity-initial tiles, status chips, a bottom tab bar. --primary is
the per-provider brand (the comps use coral); greens/ambers are fixed.
========================================================================= */
/* Webfonts are self-hosted and declared in fonts.css, which every page links
directly. Do NOT reintroduce an @import here: an @import is only discovered
after THIS file has downloaded and parsed, which pushed the fonts three hops
down the critical path and blocked render for ~1.2s on mobile. */
:root {
/* v4: the cr-* tokens ARE the warm palette now, so every legacy page
(enrol sheet, auth, policies…) matches the .dir/.xp/.club surfaces. */
--cr-bg: #fbf6f2; /* warm paper canvas */
--cr-card: #ffffff;
--cr-ink: #231a1c;
--cr-slate: #6e6366; /* 5.4:1 on --cr-bg */
--cr-line: #efe4dd;
--cr-green: #17a34a;
--cr-green-ink: #166f38;
--cr-green-bg: #e3f4e9;
--cr-amber-ink: #9a6208;
--cr-amber-bg: #fdf1d4;
--cr-red: #d92c20;
--cr-primary-bg: color-mix(in srgb, var(--primary) 11%, #fff);
--cr-r-card: 10px;
--cr-r-tile: 8px;
--cr-shadow: 0 1px 2px rgba(20,20,30,.05);
--cr-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
--cr-mono: 'Hanken Grotesk', system-ui, sans-serif;
}
body.surface-player { background: var(--cr-bg); }
/* ---- App shell: phone-width column + room for the tab bar ---- */
.cr-app { max-width: 480px; margin: 0 auto; padding: 14px 16px 110px; color: var(--cr-ink); }
@media (min-width: 720px) {
.cr-app { max-width: 560px; }
}
/* ---- Header: provider identity + account avatar ---- */
.cr-head { display: flex; align-items: center; gap: 12px; padding: 6px 0 16px; }
.cr-head__logo { width: 46px; height: 46px; border-radius: 10px; background: var(--primary);
color: #fff; display: grid; place-items: center; font-family: var(--cr-display);
font-weight: 800; font-size: 1.25rem; flex-shrink: 0; }
.cr-head__logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cr-head__name { font-family: var(--cr-display); font-weight: 800; font-size: 1.25rem;
line-height: 1.15; letter-spacing: -.01em; }
.cr-head__spacer { flex: 1; }
.cr-avatar { width: 42px; height: 42px; border-radius: 50%; background: #b4509e; color: #fff;
display: grid; place-items: center; font-family: var(--cr-display); font-weight: 700;
text-decoration: none; font-size: 1.05rem; flex-shrink: 0; }
.cr-avatar--ghost { background: var(--cr-card); color: var(--cr-slate); border: 1.5px solid var(--cr-line); }
/* ---- Type helpers ---- */
.cr-eyebrow { font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .14em;
font-size: .72rem; font-weight: 700; color: var(--cr-slate); }
h1.cr-head__name, h2.cr-eyebrow { margin: 0; }
.cr-headline { font-family: var(--cr-display); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.1rem);
line-height: 1.12; letter-spacing: -.01em; margin: 6px 0 16px; }
.cr-headline .hl { color: var(--primary); }
.cr-h2 { font-family: var(--cr-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 10px; }
.cr-muted { color: var(--cr-slate); font-size: .95rem; }
.cr-back { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
background: var(--cr-card); color: var(--cr-ink); text-decoration: none; font-size: 1.15rem;
box-shadow: var(--cr-shadow); font-weight: 700; position: relative; }
/* 44px+ hit area (WCAG 2.5.8) — invisible halo, visual size unchanged. */
.cr-back::after, .cr-fav::after, .xp .rc__save::after {
content: ""; position: absolute; inset: -7px; border-radius: 50%; }
/* ---- Filter chips ---- */
.cr-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.cr-filters::-webkit-scrollbar { display: none; }
.cr-filter { font-family: var(--cr-display); font-weight: 700; font-size: .95rem; white-space: nowrap;
padding: 10px 18px; border-radius: 6px; border: 1.5px solid var(--cr-line);
background: var(--cr-card); color: var(--cr-ink); cursor: pointer; }
.cr-filter.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink, #fff); }
/* ---- Class cards (timetable) ---- */
.cr-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cr-offer { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--cr-line);
background: var(--cr-card); border-radius: var(--cr-r-card); box-shadow: var(--cr-shadow);
padding: 16px; text-decoration: none; color: inherit; }
a.cr-offer:active { transform: scale(.99); }
.cr-tile { width: 64px; height: 64px; border-radius: var(--cr-r-tile); display: grid; place-items: center;
color: #fff; font-family: var(--cr-mono); font-weight: 800; font-size: 1.15rem;
letter-spacing: .06em; flex-shrink: 0; }
.cr-tile--sm { width: 46px; height: 46px; border-radius: 8px; font-size: .95rem; }
/* One brand-tinted tile treatment (the old 5-colour hash read as a rainbow).
The c0–c4 classes remain in templates; they all resolve to the same look. */
.cr-tile.c0, .cr-tile.c1, .cr-tile.c2, .cr-tile.c3, .cr-tile.c4 {
background: color-mix(in srgb, var(--primary) 10%, #fff);
color: var(--primary);
}
.cr-offer__main { min-width: 0; }
.cr-offer__eyebrow { font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .12em;
font-size: .68rem; font-weight: 700; color: var(--cr-slate); margin-bottom: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-offer__name { display: block; font-family: var(--cr-display); font-weight: 800; font-size: 1.18rem; line-height: 1.2;
margin: 0 0 6px; }
.cr-offer__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-offer__price { font-weight: 700; font-size: .92rem; color: var(--cr-ink); }
.cr-offer__side { display: grid; justify-items: end; gap: 10px; }
.cr-offer__chev { color: #c9c4d8; font-size: 1.3rem; font-weight: 700; line-height: 1; }
/* ---- Chips ---- */
.cr-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cr-mono);
font-weight: 700; font-size: .78rem; padding: 6px 12px; border-radius: 4px;
background: var(--cr-green-bg); color: var(--cr-green-ink); white-space: nowrap; }
.cr-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cr-green); }
.cr-chip--wait { background: var(--cr-amber-bg); color: var(--cr-amber-ink); }
.cr-chip--wait::before { background: #e9a23b; }
.cr-chip--plain::before { display: none; }
.cr-chip--ages { background: #f0f0f3; color: var(--cr-slate); }
.cr-chip--ages::before { display: none; }
.cr-chip--cat { background: #f0f0f3; color: var(--cr-slate); }
.cr-chip--cat::before { display: none; }
.cr-chip--med { background: var(--cr-amber-bg); color: var(--cr-amber-ink); text-transform: uppercase;
letter-spacing: .08em; font-size: .68rem; }
.cr-chip--med::before { background: #e9a23b; }
/* A medical note too long for the chip becomes a disclosure — the caret says
there is more to read, and flips when the full note is showing. */
button.cr-chip--tap { border: 0; appearance: none; cursor: pointer; text-align: left; }
.cr-chip--tap::after { content: "▾"; font-size: .85em; line-height: 1; opacity: .75; margin-left: 2px; }
.cr-chip--tap[aria-expanded="true"]::after { content: "▴"; }
.cr-chip--tap:hover { background: color-mix(in srgb, var(--cr-amber-ink) 16%, var(--cr-amber-bg)); }
.cr-chip--tap:focus-visible { outline: 2px solid var(--cr-amber-ink); outline-offset: 2px; }
/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--cr-display); font-weight: 700; font-size: .98rem; line-height: 1;
padding: 13px 20px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
white-space: nowrap;
text-decoration: none; transition: transform .06s ease, filter .15s ease; }
.btn:active { transform: translateY(1px) scale(.995); }
/* The trailing arrow is its own flex item so the button's gap separates it
from the label: as a bare "→" in the text run it sat flush against the
last word ("free→") in the display face. */
.btn__arrow { display: inline-block; transition: transform .15s ease; }
.btn:hover .btn__arrow { transform: translateX(2px); }
.btn--primary { background: var(--primary); color: var(--primary-ink, #fff); }
.btn--primary:hover { filter: brightness(1.05); }
.btn--green { background: var(--cr-green); color: #fff; }
.btn--dark { background: #221c35; color: #fff; }
.btn--ghost { background: var(--cr-card); color: var(--cr-ink); border-color: var(--cr-line); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 13px; font-size: .86rem; border-radius: 6px; }
/* Touch devices: small buttons still get a 44px tap height (WCAG 2.5.8). */
@media (pointer: coarse) {
.btn--sm, .xp .btn--sm { min-height: 44px; }
}
/* ---- Cards / notes ---- */
.cr-card { background: var(--cr-card); border-radius: var(--cr-r-card); box-shadow: var(--cr-shadow); border: 1px solid var(--cr-line);
padding: 18px; margin-bottom: 14px; }
.cr-note { display: flex; gap: 10px; align-items: flex-start; background: var(--cr-green-bg);
color: var(--cr-green-ink); border-radius: 10px; padding: 13px 15px; font-size: .92rem;
font-weight: 600; }
.cr-note::before { content: "✓"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--cr-green); color: #fff; display: grid; place-items: center;
font-size: .8rem; }
.cr-error { background: color-mix(in srgb, var(--cr-red) 9%, #fff);
border: 1.5px solid color-mix(in srgb, var(--cr-red) 35%, #fff); color: #a01919;
padding: 12px 14px; border-radius: 8px; font-size: .92rem; font-weight: 600; margin-bottom: 14px; }
.cr-empty { text-align: center; padding: 44px 16px; }
/* ---- Class detail (enrol page) ---- */
.cr-hero { height: 190px; border-radius: var(--cr-r-card); margin-bottom: 16px; position: relative;
display: grid; place-items: center; overflow: hidden;
border: 1px solid color-mix(in srgb, var(--primary) 16%, #fff);
background:
radial-gradient(130% 170% at 85% -30%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 60%),
color-mix(in srgb, var(--primary) 10%, #fff); }
.cr-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-hero__label { font-family: var(--cr-display); font-weight: 800; font-size: 5.5rem; line-height: 1;
letter-spacing: -.02em; color: color-mix(in srgb, var(--primary) 38%, #fff);
user-select: none; }
.cr-hero .cr-back { position: absolute; top: 14px; left: 14px; z-index: 2; }
.cr-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cr-title { font-family: var(--cr-display); font-weight: 800; font-size: 1.75rem; line-height: 1.1;
letter-spacing: -.01em; margin: 0; }
.cr-chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cr-inforows { margin: 0 0 20px; }
.cr-inforow { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center;
padding: 13px 0; border-bottom: 1px solid var(--cr-line); }
.cr-inforow:last-child { border-bottom: 0; }
.cr-inforow__ic { width: 46px; height: 46px; border-radius: 8px;
background: color-mix(in srgb, var(--primary) 9%, #fff);
display: grid; place-items: center; color: var(--primary); }
.cr-inforow__ic svg { width: 22px; height: 22px; }
.cr-inforow__label { font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .12em;
font-size: .68rem; font-weight: 700; color: var(--cr-slate); }
.cr-inforow__value { font-weight: 700; font-size: 1.05rem; }
/* ---- Plan cards (Full term / Trial / Drop-in) ---- */
.cr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px;
margin-bottom: 20px; }
.cr-plan { position: relative; display: block; cursor: pointer; }
.cr-plan input { position: absolute; opacity: 0; pointer-events: none; }
.cr-plan__box { display: flex; flex-direction: column; box-sizing: border-box; height: 100%;
border: 1px solid var(--cr-line); border-radius: 8px; background: var(--cr-card);
text-align: center; padding: 14px 8px; transition: border-color .12s, background .12s; }
.cr-plan input:checked + .cr-plan__box { border-color: var(--primary); background: var(--cr-primary-bg);
box-shadow: 0 0 0 1px var(--primary) inset; }
.cr-plan__label { display: block; font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .12em;
font-size: .64rem; font-weight: 700; color: var(--cr-slate); margin-bottom: 4px; }
.cr-plan input:checked + .cr-plan__box .cr-plan__label { color: color-mix(in srgb, var(--primary) 85%, #000); }
/* margin-top:auto bottom-aligns prices when a sibling card's label wraps */
.cr-plan__price { display: block; font-family: var(--cr-display); font-weight: 800; font-size: 1.3rem;
margin-top: auto; }
/* ---- Child picker ("Who's this class for?") ---- */
.cr-kids { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cr-kid { position: relative; display: block; cursor: pointer; }
.cr-kid input { position: absolute; opacity: 0; pointer-events: none; }
.cr-kid__box { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 13px; align-items: center;
min-width: 0;
background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: 8px;
padding: 13px 15px; transition: border-color .12s; }
.cr-kid input:checked + .cr-kid__box { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cr-kid.is-disabled { opacity: .55; cursor: not-allowed; }
.cr-kid__av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
color: var(--primary); font-family: var(--cr-display); font-weight: 800; font-size: 1.2rem; }
.cr-kid__name { font-family: var(--cr-display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
/* Age, the medical chip and "Outside age range" can all land on one child.
Chips are nowrap by design, so without wrapping here the third one ran under
the tick circle and squeezed "Age 6" onto two lines. */
.cr-kid__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px;
font-family: var(--cr-mono); font-size: .8rem; color: var(--cr-slate); }
.cr-kid__sub > span { flex: none; }
.cr-kid__sub > span:not(.cr-chip) { white-space: nowrap; }
/* The full note, revealed under the row. Prose, so body font and sentence case
rather than the chip's uppercase mono. */
.cr-kid__med { display: block; margin-top: 7px; padding: 8px 11px; border-radius: 6px;
background: var(--cr-amber-bg); color: var(--cr-amber-ink);
font-family: var(--cr-mono); font-size: .82rem; font-weight: 600;
line-height: 1.45; overflow-wrap: anywhere; }
.cr-kid__radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cr-line);
display: grid; place-items: center; color: transparent; font-size: .8rem; }
.cr-kid input:checked + .cr-kid__box .cr-kid__radio { background: var(--primary); border-color: var(--primary); color: var(--primary-ink, #fff); }
/* Inline "+ Add a child" (dashed, per the comp) */
.cr-addkid { border: 1px dashed color-mix(in srgb, var(--primary) 45%, #fff); border-radius: 8px;
background: color-mix(in srgb, var(--primary) 5%, #fff); padding: 15px; margin-bottom: 14px; }
.cr-addkid__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
font-family: var(--cr-display); font-weight: 800; color: var(--primary);
cursor: pointer; font-size: 1.02rem; }
.cr-addkid__hint { font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .1em;
font-size: .62rem; font-weight: 700; color: var(--cr-slate); }
.cr-addkid__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cr-addkid__grid .full { grid-column: 1 / -1; }
@media (max-width: 420px) {
.cr-addkid__grid { grid-template-columns: 1fr; }
}
.cr-label { display: block; font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .1em;
font-size: .72rem; font-weight: 700; color: var(--cr-slate); margin: 0 0 5px 2px; }
.cr-input { width: 100%; font-family: var(--cr-mono); font-size: 1rem; padding: 12px 14px;
border: 1px solid var(--cr-line); border-radius: 8px; background: var(--cr-card);
color: var(--cr-ink); }
.cr-input:focus { outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
/* ---- Sticky CTA bar ---- */
.cr-ctabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
background: rgba(251,246,242,.96); /* --cr-bg, solid enough to read over anything */
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid var(--cr-line);
padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.cr-ctabar__inner { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
@media (min-width: 720px) {
.cr-ctabar__inner { max-width: 560px; }
}
.cr-ctabar__total { line-height: 1.15; }
.cr-ctabar__total .cr-eyebrow { font-size: .62rem; }
.cr-ctabar__amount { font-family: var(--cr-display); font-weight: 800; font-size: 1.45rem; }
.cr-ctabar .btn { flex: 1; }
/* ---- Bottom tab bar ---- */
/* Near-opaque rgba, NOT color-mix + blur alone: iOS Safari needs the -webkit-
blur prefix and older versions drop color-mix entirely — either way a
see-through bar over the page reads as broken. */
.cr-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid var(--cr-line);
padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
.cr-tabbar__inner { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.cr-tab { display: grid; justify-items: center; gap: 3px; text-decoration: none;
color: var(--cr-slate); font-family: var(--cr-mono); font-size: .74rem; font-weight: 700; }
.cr-tab svg { width: 24px; height: 24px; }
.cr-tab.is-on { color: var(--primary); }
/* ---- Confirmation ---- */
.cr-confirm { text-align: center; padding-top: 26px; }
.cr-confirm__ring { width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 50%;
background: var(--cr-green-bg); display: grid; place-items: center; }
.cr-confirm__check { width: 78px; height: 78px; border-radius: 50%; background: var(--cr-green);
color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
.cr-confirm.is-pending .cr-confirm__ring { background: var(--cr-amber-bg); }
.cr-confirm.is-pending .cr-confirm__check { background: #e9a23b; color: var(--cr-ink); }
.cr-confirm__title { font-family: var(--cr-display); font-weight: 800; font-size: 2rem;
letter-spacing: -.01em; margin: 0 0 6px; }
.cr-classcard { text-align: left; background: var(--cr-card); border-radius: var(--cr-r-card); border: 1px solid var(--cr-line);
box-shadow: var(--cr-shadow); overflow: hidden; margin: 22px 0 14px; }
.cr-classcard__head { display: flex; align-items: center; gap: 13px; padding: 15px 17px;
background: var(--cr-primary-bg); border-bottom: 1.5px dashed
color-mix(in srgb, var(--primary) 25%, #fff); }
.cr-classcard__body { padding: 15px 17px; display: grid; gap: 9px; }
.cr-classcard__row { display: flex; justify-content: space-between; gap: 14px; font-size: .95rem; }
.cr-classcard__row dt { color: var(--cr-slate); font-weight: 600; margin: 0; }
.cr-classcard__row dd { margin: 0; font-weight: 700; text-align: right; }
.cr-actions { display: grid; gap: 10px; margin-top: 6px; }
.cr-actions--row { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---- Enrolment rows on the account page ---- */
.cr-booking { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; border: 1px solid var(--cr-line);
background: var(--cr-card); border-radius: var(--cr-r-card); box-shadow: var(--cr-shadow);
padding: 14px 16px; }
.cr-booking__side { display: grid; justify-items: end; gap: 8px; }
.cr-booking__price { font-family: var(--cr-display); font-weight: 800; font-size: 1.1rem; }
/* ---- v2.1 polish: auth screens, portal, interaction states ---- */
/* Desktop hover + keyboard focus (professional feel on non-touch) */
@media (hover: hover) {
a.cr-offer { transition: transform .12s ease, box-shadow .12s ease; }
a.cr-offer:hover { transform: translateY(-1px); border-color: #d5d5dc;
box-shadow: 0 3px 10px rgba(20,20,30,.07); }
}
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-visible {
outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px;
}
/* Amber informational note (waitlist etc.) */
.cr-note--wait { background: var(--cr-amber-bg); color: var(--cr-amber-ink); }
.cr-note--wait::before { content: "!"; background: #e9a23b; }
/* Auth (sign in / onboarding): centered single card */
.cr-auth { min-height: 92vh; display: grid; grid-template-rows: auto 1fr auto;
max-width: 480px; margin: 0 auto; padding: 18px 16px 20px; color: var(--cr-ink); }
.cr-auth__brand { display: flex; align-items: center; gap: 11px; justify-content: center; padding: 10px 0 26px; }
.cr-auth__brand .cr-head__logo { width: 40px; height: 40px; font-size: 1.05rem; }
.cr-auth__wordmark { font-family: var(--cr-display); font-weight: 800; font-size: 1.15rem; }
.cr-auth__card { align-self: start; background: var(--cr-card); border-radius: 10px; border: 1px solid var(--cr-line);
box-shadow: var(--cr-shadow); padding: 28px 22px; text-align: center; }
.cr-auth__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 10px;
background: var(--cr-primary-bg); color: var(--primary);
display: grid; place-items: center; }
.cr-auth__icon svg { width: 30px; height: 30px; }
.cr-auth__title { font-family: var(--cr-display); font-weight: 800; font-size: 1.65rem;
letter-spacing: -.01em; margin: 0 0 6px; }
.cr-auth__sub { color: var(--cr-slate); font-size: .95rem; margin: 0 0 20px; line-height: 1.55; }
.cr-auth__form { display: grid; gap: 12px; text-align: left; }
.cr-auth__foot { text-align: center; color: var(--cr-slate); font-size: .86rem; padding-top: 18px; }
.cr-auth__foot a { color: var(--primary); font-weight: 700; text-decoration: none; }
.cr-code { text-align: center; font-family: var(--cr-display); font-weight: 700;
font-size: 1.6rem; letter-spacing: .45em; text-indent: .45em; padding: 14px; }
/* Busy state for submit buttons (magic-link send) */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn .cr-spin { display: none; width: 16px; height: 16px; border-radius: 50%;
border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
animation: crspin .7s linear infinite; }
.btn.is-busy .cr-spin { display: inline-block; }
@keyframes crspin { to { transform: rotate(360deg); } }
/* Central portal: provider group cards */
.cr-provider { background: var(--cr-card); border-radius: var(--cr-r-card); border: 1px solid var(--cr-line);
box-shadow: var(--cr-shadow); overflow: hidden; margin-bottom: 14px; }
.cr-provider__head { display: flex; align-items: center; gap: 12px; padding: 15px 17px;
border-bottom: 1px solid var(--cr-line); }
.cr-provider__name { font-family: var(--cr-display); font-weight: 800; font-size: 1.1rem; flex: 1; min-width: 0; }
.cr-provider__rows { padding: 6px 17px 12px; }
.cr-provider__row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
padding: 11px 0; border-bottom: 1px solid var(--cr-line); }
.cr-provider__row:last-child { border-bottom: 0; }
/* ---- v2.2: favourites, central homepage search ---- */
.cr-fav { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
background: var(--cr-card); border: 1.5px solid var(--cr-line); color: var(--cr-slate);
cursor: pointer; flex-shrink: 0; position: relative;
transition: color .12s, border-color .12s, transform .1s; }
.cr-fav svg { width: 21px; height: 21px; }
.cr-fav:hover { color: var(--primary); border-color: var(--primary); }
.cr-fav.is-on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, #fff);
background: color-mix(in srgb, var(--primary) 8%, #fff); }
.cr-fav:active { transform: scale(.92); }
/* ---- Signup funnel step indicator ---- */
.cr-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cr-steps__bar { display: block; height: 5px; border-radius: 2px; background: var(--cr-line); }
.cr-steps__nm { display: block; margin-top: 6px; font-family: var(--cr-mono); text-transform: uppercase;
letter-spacing: .08em; font-size: .6rem; font-weight: 700; color: var(--cr-slate);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-steps__step.is-done .cr-steps__bar { background: color-mix(in srgb, var(--primary) 45%, #fff); }
.cr-steps__step.is-now .cr-steps__bar { background: var(--primary); }
.cr-steps__step.is-now .cr-steps__nm { color: var(--primary); }
/* Platform brand mark (SVG carries its own rounded tile) */
.cr-head__logo--img { background: transparent; box-shadow: none; }
.cr-head__logo--img img { border-radius: 8px; }
/* ---- Shared wide shell (timetable, enrol sheet) ---- */
.cr-app--wide { max-width: 520px; }
@media (min-width: 900px) {
.cr-app--wide { max-width: 960px; }
}
/* Footer */
.cr-foot { margin-top: clamp(34px, 5vw, 60px); padding: 22px 0 10px; border-top: 1px solid var(--cr-line);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
color: var(--cr-slate); font-size: .84rem; }
.cr-foot a { color: var(--cr-slate); text-decoration: none; font-weight: 600; }
.cr-foot a:hover { color: var(--primary); }
.cr-foot__spacer { flex: 1; }
/* ---- Club homepage hero: light, typographic, no decoration ---- */
.cr-clubhero { display: grid; gap: 20px; margin: 6px 0 26px; align-items: center; }
@media (min-width: 900px) {
.cr-clubhero--photo { grid-template-columns: 1.1fr 1fr; }
}
.cr-clubhero__title { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.015em;
font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.06; margin: 10px 0 10px; }
.cr-clubhero__title::after { content: ""; display: block; width: 52px; height: 5px;
border-radius: 2px; background: var(--primary); margin-top: 14px; }
.cr-clubhero__sub { color: var(--cr-slate); font-size: 1.02rem; line-height: 1.6;
max-width: 560px; margin: 0 0 14px; }
.cr-clubhero__meta { color: var(--cr-slate); font-size: .92rem; margin: 0 0 18px; }
.cr-clubhero__meta strong { color: var(--cr-ink); }
.cr-clubhero__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
border-radius: var(--cr-r-card); box-shadow: var(--cr-shadow); }
/* Class list: two columns on desktop */
@media (min-width: 900px) {
.cr-offers { grid-template-columns: 1fr 1fr; }
.cr-biz { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.cr-biz > * { margin: 0 !important; }
}
/* ---- Club page info band (flat, editorial) ---- */
.cr-info { margin-top: clamp(34px, 5vw, 60px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--cr-line);
display: grid; gap: 28px; }
@media (min-width: 900px) {
.cr-info { grid-template-columns: 1fr 1.2fr; gap: 48px; }
}
.cr-info h3 { font-family: var(--cr-display); font-weight: 800; font-size: 1.05rem; margin: 0 0 12px; }
.cr-info__addr { font-weight: 700; line-height: 1.5; margin: 0 0 4px; }
.cr-info__area { color: var(--cr-slate); margin: 0 0 12px; }
.cr-linkrow { display: flex; gap: 18px; flex-wrap: wrap; font-size: .94rem; }
.cr-linkrow a { color: var(--primary); font-weight: 700; text-decoration: none; }
.cr-linkrow a:hover { text-decoration: underline; }
.cr-ratingline { margin: 0 0 14px; color: var(--cr-slate); font-size: .94rem; }
.cr-ratingline strong { color: var(--cr-ink); font-family: var(--cr-display); font-size: 1.05rem; }
.cr-ratingline .stars { color: #e9a23b; letter-spacing: 1px; margin-right: 6px; }
.cr-quote { margin: 0 0 18px; padding: 4px 0 0 36px; border-left: none; position: relative; }
.cr-quote::before { content: "\201C"; position: absolute; left: 0; top: -4px;
font-family: var(--cr-display); font-weight: 800; font-size: 2.7rem;
line-height: 1; color: var(--primary); }
.cr-quote p { margin: 0 0 6px; line-height: 1.55; font-size: 1.02rem; }
.cr-quote cite { font-style: normal; color: var(--cr-slate); font-size: .85rem; }
.cr-quote cite .stars { color: #e9a23b; letter-spacing: 1px; }
/* =====================================================================
Desktop layer (≥900px): the mobile app patterns swap for web patterns.
===================================================================== */
@media (min-width: 900px) {
/* Bottom tab bar is a phone pattern — desktop uses the header top-nav. */
.cr-tabbar { display: none; }
.cr-app { padding-bottom: 40px; }
/* Wider content tiers */
.cr-app--md { max-width: 760px; }
}
/* Header top-nav (desktop only) */
.cr-topnav { display: none; }
@media (min-width: 900px) {
.cr-topnav { display: flex; gap: 24px; align-items: center; margin-right: 18px;
font-family: var(--cr-display); font-weight: 700; font-size: .98rem; }
.cr-topnav a { color: var(--cr-slate); text-decoration: none; }
.cr-topnav a:hover { color: var(--cr-ink); }
.cr-topnav a.is-on { color: var(--primary); }
}
/* Class page: two columns — details left, sticky booking panel right */
@media (min-width: 900px) {
.cr-enrol-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
align-items: start; }
.cr-enrol-panel { position: sticky; top: 18px; background: var(--cr-card); border: 1px solid var(--cr-line);
border-radius: var(--cr-r-card); box-shadow: var(--cr-shadow);
padding: 22px 22px 18px; }
/* the fixed thumb bar becomes an inline total row inside the panel */
.cr-enrol-panel .cr-ctabar { position: static; background: transparent;
backdrop-filter: none; border-top: 1px solid var(--cr-line);
padding: 16px 0 0; margin-top: 14px; }
.cr-enrol-panel .cr-ctabar__inner { max-width: none; padding: 0; }
}
/* ---- Premium interaction details ---- */
html { scroll-behavior: smooth; }
:root { accent-color: var(--primary); }
::selection { background: color-mix(in srgb, var(--primary) 22%, #fff); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.btn { transition: transform .06s ease, filter .12s ease, background .12s ease; }
.btn:hover { filter: brightness(.96); }
.btn:active { transform: translateY(1px); }
a { transition: color .12s ease; }
#classes { scroll-margin-top: 22px; }
/* Avatars follow the single-accent system */
.cr-avatar { background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
color: var(--primary) !important; }
.cr-avatar--ghost { background: var(--cr-card) !important; color: var(--cr-slate) !important; }
/* Class-page placeholder hero: the giant monogram is a phone treatment —
desktop swaps it for the collage-style category icon (see enrol v2). */
.cr-hero__icon { display: none; color: color-mix(in srgb, var(--primary) 55%, #fff); }
.cr-hero__icon svg { width: 84px; height: 84px; }
@media (min-width: 900px) {
.cr-hero--placeholder .cr-hero__label { display: none; }
.cr-hero--placeholder .cr-hero__icon { display: block; }
/* Desktop navigates via the header; the thumb back-chip is a phone control. */
.cr-hero .cr-back { display: none; }
}
/* Portal booking rows: actions inline on desktop (was a 200px tall stack) */
@media (min-width: 900px) {
.cr-booking__side { display: flex; align-items: center; gap: 10px; }
.cr-booking__side .cr-booking__price { margin-right: 4px; }
}
/* Add-a-child card: neutral surface (the peach block was loud) */
.cr-addkid { background: var(--cr-card); border-color: #d9d9e0; }
/* ---- Page entrance: one staggered rise on load (the only scripted motion) ---- */
@media (prefers-reduced-motion: no-preference) {
@keyframes cr-rise { from { opacity: 0; transform: translateY(10px); } }
.cr-app > *:nth-child(-n+7):not(.cr-tabbar) {
animation: cr-rise .55s cubic-bezier(.22, 1, .36, 1) backwards;
}
.cr-app > *:nth-child(1) { animation-delay: .02s; }
.cr-app > *:nth-child(2) { animation-delay: .07s; }
.cr-app > *:nth-child(3) { animation-delay: .12s; }
.cr-app > *:nth-child(4) { animation-delay: .17s; }
.cr-app > *:nth-child(5) { animation-delay: .22s; }
.cr-app > *:nth-child(6) { animation-delay: .27s; }
.cr-app > *:nth-child(7) { animation-delay: .32s; }
/* iOS Safari keeps an animated-transform ancestor as the containing block
for position:fixed children even after the animation ends, which un-pins
the enrol sheet's CTA bar from the viewport. Fade this one, no translate. */
@keyframes cr-fade { from { opacity: 0; } }
/* Specificity must beat the nth-child rule above or the transform wins. */
.cr-app > .cr-enrol-grid.cr-enrol-grid:not(.cr-tabbar) { animation-name: cr-fade; }
}
/* =========================================================================
Directory homepage v4 — the marketplace front door (app.).
Warm-paper full-bleed bands (its own palette, scoped to .dir so the app
screens stay on the neutral system): gradient hero with the What/Where
console and a photo collage, the week photo strip, category tiles,
provider-card grid with covers, real social proof, steps, and a dark
providers band that carries the footer. Namespaced .dir- (used only by
central_home.html + partials/provider_results.html).
========================================================================= */
.dir {
/* Clean, professional palette (was warm cream): white base, cool light
bands, navy ink; coral stays the accent. Public marketing + homepage. */
--d-ink: #17203a; --d-ink2: #2b3652; --d-slate: #5b6478;
/* slate2 carries small print (.mkt-hero__note, .cmp-note): 5.06:1 on white,
4.63:1 on the --d-warm band (the old #8791a6 sat at 3.17:1). */
--d-slate2: #626f88;
--d-bg: #ffffff; --d-warm: #f1f5fb; --d-line: #e6eaf1; --d-line2: #f1f5fb;
--d-p050: #eef3ff; --d-p100: #fbdcd3; --d-pink: #c23c25;
--d-star: #f5a623; --d-green: #1b9a5f; --d-green050: #e8f6ee; --d-greenline: #bde6cd;
--d-sh-sm: 0 1px 2px rgba(20,30,60,.05), 0 2px 6px rgba(20,30,60,.04);
--d-sh-md: 0 12px 32px -14px rgba(20,30,60,.2);
--d-sh-lg: 0 30px 70px -30px rgba(20,30,60,.28);
--d-r: 16px; --d-r-lg: 24px; --d-r-xl: 32px;
font-family: var(--cr-mono); color: var(--d-ink); background: var(--d-bg); line-height: 1.5;
}
.dir-wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
.dir-band { padding-block: clamp(40px, 5vw, 72px); }
.dir .cr-muted { color: var(--d-slate); }
/* Buttons go pill on this page only */
.dir .btn { font-family: var(--cr-display); font-weight: 700; font-size: 15px; gap: 9px;
border-radius: 8px; padding: 12px 20px; border: 1.5px solid transparent;
transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
white-space: nowrap; }
.dir .btn svg { width: 16px; height: 16px; }
/* A flat fill with a hairline shadow. The coral glow this used to carry
(0 10px 24px -10px var(--primary)) smeared an orange halo under every
button on a white page, most visibly on phones where the button sits alone. */
.dir .btn--primary { background: var(--primary); color: var(--primary-ink, #fff);
box-shadow: 0 1px 2px rgba(15, 22, 41, .18); }
.dir .btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px);
box-shadow: 0 4px 10px -4px rgba(15, 22, 41, .35); }
.dir .btn--ghost { background: rgba(255,255,255,.7); color: var(--d-ink); border-color: var(--d-line); }
.dir .btn--ghost:hover { background: #fff; border-color: var(--d-p100); }
.dir .btn--sm { padding: 9px 16px; font-size: 13.5px; }
/* Section head */
.dir-kicker { margin: 0 0 26px; }
.dir-kicker h2 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.02em;
font-size: clamp(28px, 3.6vw, 42px); margin: 0; }
.dir-kicker p { margin: 8px 0 0; color: var(--d-slate); font-size: 16px; }
/* ---- Hero band: one faint cool wash, nothing else — decoration reads as
template, flat paper reads as a company. No overflow:hidden here: the
Where dropdown must escape the band. ---- */
.dir-hero-band { position: relative;
background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 72%); }
.dir-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 20px 0; }
.dir-nav__mark { width: 34px; height: 34px; flex-shrink: 0; }
.dir-nav__name { font-family: var(--cr-display); font-weight: 800; font-size: 20px; color: var(--d-ink); }
.dir-nav__spacer { flex: 1; }
.dir-nav__links { display: none; }
@media (min-width: 900px) {
.dir-nav__links { display: flex; gap: 24px; align-items: center; margin-right: 8px; }
.dir-nav__links a { color: var(--d-ink2); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.dir-nav__links a:hover { color: var(--primary); }
}
.dir-hero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr);
gap: 32px; align-items: center;
padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); }
.dir-hero > * { min-width: 0; }
@media (min-width: 900px) {
.dir-hero { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}
.dir-hero__eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 13px;
letter-spacing: .08em; text-transform: uppercase;
color: var(--primary-text, var(--primary));
margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; }
.dir-hero__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--primary); border-radius: 2px; }
.dir-hero h1 { font-family: var(--cr-display); font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02;
font-weight: 800; letter-spacing: -.02em; color: var(--d-ink); margin: 0; }
.dir-hero__sub { font-size: clamp(16px, 1.5vw, 18px); color: var(--d-ink2); max-width: 34ch;
margin: 20px 0 0; text-wrap: pretty; }
/* ---- The What + Where console: one pill, two inputs, hairline divider ---- */
.dir-search { margin-top: 30px; display: flex; align-items: center; gap: 8px; background: #fff;
border: 1px solid var(--d-line); border-radius: 6px; padding: 8px;
box-shadow: var(--d-sh-md); max-width: 620px;
transition: border-color .15s ease, box-shadow .15s ease; }
.dir-search:focus-within { border-color: var(--d-p100);
box-shadow: var(--d-sh-md), 0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent); }
.dir-search__seg { display: flex; align-items: center; gap: 8px; min-width: 0;
flex: 1 1 0; padding-left: 14px; position: relative; }
.dir-search__seg > svg { width: 20px; height: 20px; color: var(--d-slate2); flex-shrink: 0; }
.dir-search__seg--where { border-left: 1px solid var(--d-line); flex: 0 1 34%; min-width: 140px; }
.dir-search__input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
font-family: var(--cr-mono); font-size: 16px; padding: 12px 6px 12px 0;
color: var(--d-ink); }
.dir-search__input::placeholder { color: var(--d-slate2); }
/* the console draws its own focus ring — no second outline on the input */
.dir-search__input:focus-visible { outline: none; }
.dir-search .btn { flex-shrink: 0; padding: 13px 20px; }
.dir-search .btn span { display: none; }
@media (min-width: 560px) {
.dir-search .btn span { display: inline; }
}
/* The Where dropdown: "use my location" first, then every UK county. */
.dir-where { position: absolute; z-index: 30; top: calc(100% + 12px); left: 0;
min-width: min(300px, 78vw); max-height: 320px; overflow: auto;
background: #fff; border: 1px solid var(--d-line);
border-radius: 10px; padding: 6px; box-shadow: var(--d-sh-lg); }
.dir-where__opt { display: flex; align-items: center; gap: 10px; width: 100%;
padding: 11px 12px; border: 0; border-radius: 8px; background: none;
font: inherit; font-size: 14.5px; color: var(--d-ink);
text-align: left; cursor: pointer; }
.dir-where__opt:hover, .dir-where__opt:focus-visible,
.dir-where__opt.is-hi { background: var(--d-p050); }
.dir-where__opt--me { color: var(--d-pink); font-weight: 700; }
.dir-where__opt--me svg { width: 17px; height: 17px; flex-shrink: 0; }
[x-cloak] { display: none !important; }
/* Narrow screens: the console stacks — What, then Where, then the button. */
@media (max-width: 639px) {
.dir-search { flex-wrap: wrap; border-radius: 10px; padding: 10px; }
.dir-search__seg { flex-basis: 100%; }
.dir-search__seg--where { border-left: 0; border-top: 1px solid var(--d-line); }
.dir-search__seg--where .dir-where { left: 0; right: 0; min-width: 0; }
.dir-search .btn { width: 100%; justify-content: center; margin-top: 4px; }
.dir-search .btn span { display: inline; }
}
.dir-refine { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.dir-refine__label { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase; color: var(--d-slate); }
.dir-select { font-family: var(--cr-mono); font-size: 14px; font-weight: 600; color: var(--d-ink);
background: #fff; border: 1px solid var(--d-line); border-radius: 6px;
padding: 9px 34px 9px 16px; cursor: pointer; transition: border-color .15s;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237a6f72' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; }
.dir-select:hover { border-color: var(--d-p100); }
.dir-select[data-empty="1"] { color: var(--d-slate); }
.dir-select:not([data-empty="1"]) { border-color: var(--primary); color: var(--d-pink); }
/* ---- Hero collage: real class photos, tinted category panels otherwise ---- */
.dir-hero__art { position: relative; display: grid; grid-template-columns: 1.35fr 1fr;
grid-template-rows: 1fr 1fr; gap: 12px; height: clamp(300px, 42vw, 470px); }
.dir-hero__art-main { grid-column: 1; grid-row: 1 / span 2; border-radius: var(--d-r-xl);
overflow: hidden; background: var(--d-warm); box-shadow: var(--d-sh-lg); }
.dir-hero__art-s { border-radius: var(--d-r-lg); overflow: hidden; background: var(--d-warm);
box-shadow: var(--d-sh-md); }
.dir-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.dir-tile { display: grid; place-items: center; width: 100%; height: 100%;
background: color-mix(in srgb, var(--primary) 9%, #fff7f2); color: color-mix(in srgb, var(--primary) 55%, #fff); }
.dir-tile svg { width: clamp(40px, 5vw, 64px); height: clamp(40px, 5vw, 64px); }
.dir-hero__chip { position: absolute; left: -16px; bottom: 26px; display: flex; align-items: center;
gap: 9px; background: #fff; border: 1px solid var(--d-line); border-radius: 10px;
padding: 11px 15px; box-shadow: var(--d-sh-lg); font-size: 13px; font-weight: 600;
color: var(--d-ink); max-width: 230px; }
.dir-hero__chip .stars { color: var(--d-star); font-size: 17px; flex: none; }
.dir-hero__chip b { font-family: var(--cr-display); font-weight: 800; }
@media (max-width: 899px) {
.dir-hero__chip { left: auto; right: 16px; }
}
/* ---- This week: photo strip straight off the registers ---- */
.dir-week-band { padding-top: 0; }
.dir-weekhead { display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
font-family: var(--cr-display); font-weight: 700; font-size: 19px; color: var(--d-ink); }
.dir-week__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-green); flex: none; }
.dir-weekhead a { margin-left: auto; font-family: var(--cr-mono); font-weight: 600; font-size: 14px;
color: var(--d-pink); text-decoration: none; }
.dir-weekhead a:hover { color: var(--primary); }
.dir-weekstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dir-wk { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--d-line);
border-radius: var(--d-r-lg); overflow: hidden; box-shadow: var(--d-sh-sm);
text-decoration: none; color: inherit; transition: .18s; }
.dir-wk:hover { transform: translateY(-3px); box-shadow: var(--d-sh-md); border-color: var(--d-p100); }
.dir-wk__img { position: relative; height: 108px; background: var(--d-warm); }
.dir-wk__img .dir-tile svg { width: 34px; height: 34px; }
.dir-wk__badge { position: absolute; top: 9px; left: 9px; background: rgba(255,255,255,.94);
border-radius: 8px; padding: 4px 9px; font-family: var(--cr-display);
font-weight: 800; font-size: 10.5px; line-height: 1.15; color: var(--d-ink);
text-align: center; box-shadow: var(--d-sh-sm); }
.dir-wk__body { display: flex; flex-direction: column; flex: 1; padding: 12px 13px 14px; }
.dir-wk__name { font-family: var(--cr-display); font-weight: 700; font-size: 14px; color: var(--d-ink);
line-height: 1.2; }
.dir-wk__meta { font-size: 11.5px; color: var(--d-slate); margin-top: 4px; text-wrap: pretty; }
.dir-wk__price { margin-top: auto; padding-top: 11px; font-family: var(--cr-display);
font-weight: 800; font-size: 14px; color: var(--d-pink); }
.dir-wk__price span { color: var(--d-slate); font-weight: 500; font-size: 11px; font-family: var(--cr-mono); }
@media (max-width: 899px) {
.dir-weekstrip { grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 6px; scrollbar-width: none; }
.dir-weekstrip::-webkit-scrollbar { display: none; }
.dir-wk { scroll-snap-align: start; }
}
/* ---- Browse by activity ---- */
.dir-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dir-cat { display: flex; align-items: center; gap: 13px; text-align: left; background: #fff;
border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 15px 16px;
cursor: pointer; transition: .15s; font-family: var(--cr-mono); color: var(--d-ink); }
.dir-cat:hover { border-color: var(--d-p100); box-shadow: var(--d-sh-md); transform: translateY(-2px); }
.dir-cat.is-on { border-color: var(--primary); background: var(--d-p050); }
.dir-cat__ic { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--d-warm);
color: var(--d-pink); display: grid; place-items: center; }
.dir-cat.is-on .dir-cat__ic { background: var(--primary); color: #fff; }
.dir-cat__ic svg { width: 23px; height: 23px; }
.dir-cat__name { display: block; font-family: var(--cr-display); font-weight: 700; font-size: 15px;
color: var(--d-ink); }
.dir-cat__n { display: block; font-size: 12px; color: var(--d-slate); margin-top: 1px; }
@media (max-width: 899px) {
.dir-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 559px) {
.dir-cats { grid-template-columns: 1fr; }
}
/* ---- Favourites rail (signed-in) ---- */
.dir-favs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dir-favs::-webkit-scrollbar { display: none; }
.dir-fav { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px;
border: 1px solid var(--d-line); background: #fff; border-radius: 999px;
text-decoration: none; color: var(--d-ink); white-space: nowrap;
font-family: var(--cr-display); font-weight: 700; font-size: .92rem;
transition: border-color .12s ease, box-shadow .12s ease; }
.dir-fav:hover { border-color: var(--d-p100); box-shadow: var(--d-sh-sm); }
.dir-fav .cr-head__logo { width: 30px; height: 30px; border-radius: 8px; font-size: .85rem; }
.dir-fav .cr-head__logo img { border-radius: 8px; }
/* ---- Provider cards: the marketplace grid ---- */
.dir-provgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 899px) {
.dir-provgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 559px) {
.dir-provgrid { grid-template-columns: 1fr; }
}
.dir-provcard { display: flex; flex-direction: column; background: #fff;
border: 1px solid var(--d-line);
border-top: 3px solid var(--primary, #c8442c);
border-radius: var(--d-r-lg); transition: border-color .15s;
position: relative; overflow: hidden;
color: inherit; text-decoration: none; }
.dir-provcard:hover { border-color: color-mix(in srgb, var(--d-ink) 30%, transparent);
border-top-color: var(--primary, #c8442c); }
.dir-provcard__cover { height: 150px; position: relative; display: grid; place-items: center;
background: color-mix(in srgb, var(--primary) 9%, #fff7f2); }
.dir-provcard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dir-provcard__coverlogo { width: 60px; height: 60px; border-radius: 8px; object-fit: cover;
box-shadow: var(--d-sh-md); }
.dir-provcard__mono { display: grid; place-items: center; width: 60px; height: 60px;
border-radius: 8px; background: var(--primary); color: #fff;
font-family: var(--cr-display); font-weight: 800; font-size: 26px; }
.dir-provcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.dir-provcard__name { font-family: var(--cr-display); font-weight: 700; font-size: 18px;
color: var(--d-ink); margin: 0 0 3px; line-height: 1.15; }
.dir-provcard__meta { margin: 0; font-size: 13px; line-height: 1.5; color: var(--d-slate); }
.dir-provcard__foot { display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-top: auto; padding-top: 16px; font-size: 13.5px; }
.dir-provcard__rating { color: var(--d-slate); }
.dir-provcard__rating .stars { color: var(--d-star); }
.dir-provcard__rating b { color: var(--d-ink); }
.dir-provcard__go { font-family: var(--cr-display); font-weight: 700; font-size: 13.5px;
color: var(--d-ink); white-space: nowrap; }
.dir-provcard:hover .dir-provcard__go { color: var(--d-pink); }
.dir-empty { border: 1px dashed var(--d-line); border-radius: var(--d-r-lg);
padding: 34px 20px; text-align: center; color: var(--d-slate); background: #fff; }
/* ---- Social proof: real numbers, real reviews ---- */
.dir-statstrip { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.dir-stat { flex: 1; min-width: 130px; background: #fff; border: 1px solid var(--d-line);
border-radius: var(--d-r); padding: 18px; text-align: center; box-shadow: var(--d-sh-sm); }
.dir-stat b { display: block; font-family: var(--cr-display); font-weight: 800; font-size: 28px;
color: var(--d-ink); letter-spacing: -.02em; }
.dir-stat span { font-size: 13px; color: var(--d-slate); }
.dir-reviewgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 899px) {
.dir-reviewgrid { grid-template-columns: 1fr; }
}
.dir-review { display: flex; flex-direction: column; gap: 14px; background: #fff;
border: 1px solid var(--d-line); border-radius: 16px; padding: 22px 22px 20px;
box-shadow: 0 16px 36px -24px rgba(20, 30, 60, .2); }
.dir-review__stars { color: var(--d-star); font-size: 15px; letter-spacing: 3px; }
.dir-review__q { margin: 0; font-size: 15.5px; color: var(--d-ink2); line-height: 1.5;
text-wrap: pretty; flex: 1; }
.dir-review__who { display: flex; align-items: center; gap: 11px; }
.dir-review__av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid;
place-items: center; color: #fff; font-family: var(--cr-display);
font-weight: 800; font-size: 15px; }
.dir-review__name { display: block; font-family: var(--cr-display); font-weight: 700;
font-size: 14px; color: var(--d-ink); }
.dir-review__meta { display: block; font-size: 12px; color: var(--d-slate); margin-top: 1px; }
/* ---- The promise band ---- */
.dir-steps-band { background: linear-gradient(180deg, var(--d-warm) 0%, #fff 100%); }
.dir-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 899px) {
.dir-steps { grid-template-columns: 1fr; }
}
/* Steps: plain type (no card boxes) led by a coral circle numeral chip. The
chip sits ON the title line, with the copy hanging under the title rather
than under the chip: stacked, the chip read as a heading of its own and the
three steps became six things on a phone. */
.dir-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center;
background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.dir-step__n { display: grid; place-items: center; width: 40px; height: 40px;
border-radius: 50%; background: var(--primary); color: var(--primary-ink, #fff);
font-family: var(--cr-display); font-weight: 800; font-size: 17px;
line-height: 1; }
.dir-step__t { font-family: var(--cr-display); font-size: 19px; font-weight: 700;
color: var(--d-ink); margin: 0; }
.dir-step__s { grid-column: 2; margin: 6px 0 0; color: var(--d-slate); font-size: 14.5px;
text-wrap: pretty; }
/* ---- Providers band: the page's one dark moment, footer included ---- */
.dir-pro { background: #241a1c; color: #fff; padding-top: clamp(44px, 5vw, 72px); }
/* On the dark band the paper ghost reads as a muddy grey slab; go outlined. */
.dir-pro .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.dir-pro .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.dir-pro__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
padding-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) {
.dir-pro__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.dir-pro__eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 13px;
letter-spacing: .08em; text-transform: uppercase; color: #ffb59f; margin: 0 0 12px; }
.dir-pro h2 { font-family: var(--cr-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800;
color: #fff; line-height: 1.05; margin: 0; letter-spacing: -.02em; }
.dir-pro__sub { color: #d8ccc8; font-size: 17px; margin: 16px 0 26px; max-width: 40ch; text-wrap: pretty; }
.dir-pro__benefits { display: flex; flex-direction: column; }
.dir-pro__benefit { border-top: 1px solid rgba(255,255,255,.14); padding: 15px 2px; }
.dir-pro__benefit:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.dir-pro__benefit b { display: block; font-family: var(--cr-display); font-weight: 700;
font-size: 16px; color: #fff; margin-bottom: 4px; }
.dir-pro__benefit span { color: #c9bcb8; font-size: 14px; }
.dir-pro__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0;
border-top: 1px solid rgba(255,255,255,.12); }
.dir-pro__foot img { border-radius: 6px; }
.dir-pro__foot .brand { font-family: var(--cr-display); font-weight: 800; font-size: 17px; color: #fff; }
.dir-pro__foot .tagline { color: #a99e9a; font-size: 14px; }
.dir-pro__foot .spacer { flex: 1; }
.dir-pro__foot a { color: #e7dcd8; font-weight: 600; font-size: 14px; text-decoration: none;
padding: 5px 0; display: inline-block; }
.dir-pro__foot a:hover { color: #fff; }
/* Signed-in mobile keeps the tab bar clear */
@media (max-width: 899px) {
.dir--tabbar { padding-bottom: 84px; }
}
/* One orchestrated entrance: the hero rises, everything else just is */
@media (prefers-reduced-motion: no-preference) {
.dir-hero > div > * { animation: cr-rise .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.dir-hero > div > *:nth-child(1) { animation-delay: .03s; }
.dir-hero > div > *:nth-child(2) { animation-delay: .09s; }
.dir-hero > div > *:nth-child(3) { animation-delay: .15s; }
.dir-hero > div > *:nth-child(4) { animation-delay: .21s; }
.dir-hero__art { animation: cr-rise .6s cubic-bezier(.22, 1, .36, 1) .2s backwards; }
}
/* =========================================================================
/explore — the search results page (central host). Split layout: sticky
header + filter bar, class-result cards left, a live Leaflet map with
price pins right. Shares the .dir warm tokens; namespaced .xp- for the
chrome, comp names (.rc, .fsel, .fchip, .pin__dot) scoped under .xp.
========================================================================= */
.xp {
--d-ink: #231a1c; --d-ink2: #4a3f42; --d-slate: #6e6366; --d-slate2: #736a6d;
--d-bg: #fbf6f2; --d-warm: #f6ece5; --d-line: #efe4dd;
--d-p050: #fff3f0; --d-p100: #fbdcd3; --d-pink: #c23c25;
--d-star: #f5a623; --d-green: #1b9a5f; --d-green050: #e8f6ee; --d-greenline: #bde6cd;
--d-amber: #e08a1e; --d-amber050: #fdf1da; --d-amberline: #f2d59a; --d-amberink: #8a5a00;
--d-sh-sm: 0 1px 2px rgba(35,26,28,.05), 0 2px 6px rgba(35,26,28,.04);
--d-sh-md: 0 10px 30px -12px rgba(35,26,28,.18);
--d-sh-lg: 0 30px 70px -30px rgba(35,26,28,.34);
--d-r: 14px; --d-r-lg: 20px;
font-family: var(--cr-mono); color: var(--d-ink); background: var(--d-bg);
line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh;
}
.xp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; width: 100%; }
/* Mobile: every .xp page carries the bottom tab bar — keep content clear of it. */
@media (max-width: 899px) {
.xp { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}
.xp .btn { font-family: var(--cr-display); font-weight: 700; font-size: 13.5px; gap: 7px;
border-radius: 6px; padding: 10px 16px; border: 1.5px solid transparent;
transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
white-space: nowrap; }
.xp .btn svg { width: 14px; height: 14px; }
.xp .btn--primary { background: var(--primary); color: var(--primary-ink, #fff);
box-shadow: 0 8px 18px -10px var(--primary); }
.xp .btn--primary:hover { filter: none; transform: translateY(-1px); }
.xp .btn--ghost { background: #fff; color: var(--d-ink); border-color: var(--d-line); }
.xp .btn--ghost:hover { border-color: var(--d-p100); }
.xp .btn--sm { padding: 8px 13px; font-size: 12.5px; }
.xp .av { flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff;
font-family: var(--cr-display); font-weight: 800; }
/* header */
/* The blur lives on a pseudo, not on the header: backdrop-filter makes an
element the containing block for its fixed descendants, and the nav's
mobile sheet is one of them: on the element it was trapped inside the
header's own 62px box. */
.xp-hdr { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--d-line); }
.xp-hdr::before { content: ""; position: absolute; inset: 0; z-index: -1;
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.xp-hdr__in { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.xp-hdr a { text-decoration: none; }
.xp-hdr__mark { width: 30px; height: 30px; flex: none; display: block; }
.xp-hdr__name { font-family: var(--cr-display); font-weight: 800; font-size: 18px; color: var(--d-ink); }
.xp-hdr__spacer { flex: 1; }
.xp-hdr__link { color: var(--d-ink2); font-weight: 600; font-size: 14px; text-decoration: none; }
.xp-hdr__link.is-on, .xp-hdr__link:hover { color: var(--primary); }
.xp-hdr__acct { display: flex; align-items: center; gap: 8px; background: #fff;
border: 1px solid var(--d-line); border-radius: 6px; padding: 5px 12px 5px 6px;
text-decoration: none; }
.xp-hdr__acct .av { width: 28px; height: 28px; font-size: 12px; background: var(--primary); }
.xp-hdr__acct span:last-child { font-weight: 600; font-size: 13px; color: var(--d-ink); }
/* filter bar */
.xp-filters { position: sticky; top: 55px; z-index: 20; background: #fff;
border-bottom: 1px solid var(--d-line); }
.xp-filters__row { display: flex; align-items: center; gap: 10px; padding: 12px 0; flex-wrap: wrap; }
.xp .fsearch { position: relative; display: flex; align-items: center; gap: 9px; background: var(--d-bg);
border: 1px solid var(--d-line); border-radius: 6px; padding: 9px 9px 9px 15px;
min-width: 220px; flex: 1; max-width: 340px; }
.xp .fsearch:focus-within { border-color: var(--d-p100); background: #fff; box-shadow: var(--d-sh-sm); }
.xp .fsearch svg { width: 17px; height: 17px; color: var(--d-slate2); flex: none; }
.xp .fsearch input { flex: 1; border: 0; background: transparent; outline: 0;
font-family: var(--cr-mono); font-size: 14px; color: var(--d-ink); min-width: 0; }
.xp .fsel { font-family: var(--cr-mono); font-size: 13.5px; font-weight: 600; color: var(--d-ink);
background-color: #fff; border: 1px solid var(--d-line); border-radius: 6px;
padding: 9px 32px 9px 15px; cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237a6f72' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 13px center; }
.xp .fsel:hover { border-color: var(--d-p100); }
/* position:relative contains the visually-hidden checkbox below; without it
the absolute input lands at DOCUMENT coordinates inside the horizontally
scrolled filter row and stretches the whole page sideways on phones. */
.xp .ftoggle { position: relative; display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
font-size: 13.5px; color: var(--d-ink); cursor: pointer; padding: 8px 6px; }
.xp .ftoggle input { position: absolute; opacity: 0; pointer-events: none; }
.xp .ftoggle__sw { width: 38px; height: 22px; border-radius: 999px; background: var(--d-slate2);
position: relative; flex: none; transition: background .15s; }
.xp .ftoggle__sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px;
height: 18px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.xp .ftoggle input:checked + .ftoggle__sw { background: var(--d-green); }
.xp .ftoggle input:checked + .ftoggle__sw::after { left: 18px; }
.xp .fchips { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; flex-wrap: wrap; }
.xp .fchips__lbl { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
letter-spacing: .05em; text-transform: uppercase; color: var(--d-slate2);
margin-right: 2px; }
.xp .fchip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--d-line);
background: #fff; border-radius: 6px; padding: 5px 12px 5px 5px;
font-family: var(--cr-display); font-weight: 700; font-size: 12.5px;
color: var(--d-slate); cursor: pointer; }
.xp .fchip .av { width: 24px; height: 24px; font-size: 10px; }
.xp .fchip.is-on { border-color: var(--primary); background: var(--d-p050); color: var(--d-pink); }
.xp .fchip--plain { padding: 7px 13px; }
/* split layout */
.xp-split { flex: 1; display: grid; grid-template-columns: 1fr 44%; align-items: start; }
.xp-results-col { padding: 18px 0 40px; }
.xp-results-wrap { padding: 0 20px 0 max(20px, calc((100vw - 1320px) / 2 + 20px)); }
.xp-results__head { display: flex; align-items: center; justify-content: space-between;
gap: 14px; margin-bottom: 16px; }
.xp-results__count { font-family: var(--cr-display); font-weight: 800; font-size: 20px;
color: var(--d-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.xp-results__count span { color: var(--d-slate); font-weight: 600; font-size: 14px;
font-family: var(--cr-mono); }
.xp .reslist { display: flex; flex-direction: column; gap: 14px; }
/* result card (horizontal) */
.xp .rc { display: flex; gap: 16px; background: #fff; border: 1px solid var(--d-line);
border-radius: var(--d-r-lg); padding: 14px; box-shadow: var(--d-sh-sm);
transition: border-color .15s, box-shadow .15s, transform .15s; }
.xp .rc:hover, .xp .rc.is-hot { border-color: var(--primary); box-shadow: var(--d-sh-md);
transform: translateY(-2px); }
.xp .rc__img { flex: none; width: 150px; height: 130px; border-radius: var(--d-r);
overflow: hidden; background: var(--d-warm); position: relative; }
.xp .rc__pin { position: absolute; top: 9px; left: 9px; background: rgba(255,255,255,.94);
border-radius: 999px; width: 24px; height: 24px; display: grid; place-items: center;
font-family: var(--cr-display); font-weight: 800; font-size: 12px;
color: var(--d-pink); box-shadow: var(--d-sh-sm); }
.xp .rc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xp .rc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.xp .rc__name { display: block; font-family: var(--cr-display); font-weight: 700; font-size: 17px;
color: var(--d-ink); line-height: 1.15; text-decoration: none; }
.xp .rc__name:hover { color: var(--d-pink); }
.xp .rc__club { font-size: 13px; color: var(--d-slate); margin-top: 3px; }
.xp .rc__club a { color: inherit; text-decoration: none; }
.xp .rc__club a:hover { color: var(--d-pink); }
.xp .rc__spaces { flex: none; display: inline-flex; align-items: center; gap: 5px;
font-family: var(--cr-display); font-weight: 700; font-size: 11px;
border-radius: 4px; padding: 4px 10px; background: var(--d-green050);
color: var(--d-green); border: 1px solid var(--d-greenline); }
.xp .rc__spaces::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--d-green); }
.xp .rc__spaces.hot { background: var(--d-amber050); color: var(--d-amberink);
border-color: var(--d-amberline); }
.xp .rc__spaces.hot::before { background: var(--d-amber); }
.xp .rc__spaces.full { background: var(--d-warm); color: var(--d-slate); border-color: var(--d-line); }
.xp .rc__spaces.full::before { background: var(--d-slate2); }
.xp .rc__rating { display: flex; align-items: center; gap: 5px; font-size: 12.5px;
color: var(--d-slate); margin-top: 9px; flex-wrap: wrap; }
.xp .rc__rating .stars { color: var(--d-star); font-size: 13px; }
.xp .rc__rating strong { color: var(--d-ink); font-weight: 700; }
.xp .rc__match { display: inline-flex; align-items: center; gap: 5px; width: max-content;
font-family: var(--cr-display); font-weight: 700; font-size: 10.5px;
letter-spacing: .02em; color: var(--d-pink); background: var(--d-p050);
border: 1px solid var(--d-p100); border-radius: 4px; padding: 4px 10px;
margin-top: 9px; }
.xp .rc__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.xp .rc__tag { font-size: 11.5px; font-weight: 600; color: var(--d-ink2); background: var(--d-warm);
border: 1px solid var(--d-line); border-radius: 4px; padding: 3px 10px;
white-space: nowrap; }
.xp .rc__save { position: absolute; top: 9px; right: 9px; z-index: 2; width: 30px; height: 30px;
border-radius: 50%; background: rgba(255,255,255,.94); border: 0; display: grid;
place-items: center; box-shadow: var(--d-sh-sm); cursor: pointer; transition: transform .12s; }
/* The heart stays 30px visually; the tap target reaches ~44px. */
.rc__save::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.xp .rc__save svg { width: 16px; height: 16px; color: var(--d-slate); }
.xp .rc__save:hover { transform: scale(1.1); }
.xp .rc__save.is-saved { background: var(--d-p050); }
.xp .rc__save.is-saved svg { color: var(--primary); }
.xp .rc__foot { display: flex; align-items: center; justify-content: space-between;
margin-top: auto; padding-top: 12px; }
.xp .rc__price { font-family: var(--cr-display); font-weight: 800; font-size: 16px; color: var(--d-ink); }
.xp .rc__price span { font-weight: 500; font-size: 11.5px; color: var(--d-slate);
font-family: var(--cr-mono); }
.xp .rc__img .dir-tile svg { width: 40px; height: 40px; }
/* map panel */
.xp-mapwrap { position: sticky; top: 112px; height: calc(100vh - 112px); }
.xp-map { position: relative; width: 100%; height: 100%; background: var(--d-warm);
border-left: 1px solid var(--d-line); z-index: 1; }
.xp-map__bar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; }
.xp-map__search { display: inline-flex; align-items: center; gap: 8px; background: #fff;
border: 1px solid var(--d-line); border-radius: 6px; padding: 9px 16px;
box-shadow: var(--d-sh-md); font-family: var(--cr-display); font-weight: 700;
font-size: 12.5px; color: var(--d-ink); cursor: pointer; }
.xp-map__search svg { width: 14px; height: 14px; color: var(--primary); }
.xp-pinwrap { background: none; border: 0; }
.xp .pin__dot { position: relative; transform: translate(-50%, -100%); width: max-content;
background: #fff; border: 1.5px solid var(--d-line); border-radius: 999px;
padding: 6px 11px; font-family: var(--cr-display); font-weight: 800;
font-size: 12.5px; color: var(--d-ink); box-shadow: var(--d-sh-md);
white-space: nowrap; cursor: pointer;
transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, transform .12s; }
.xp .pin__dot::after { content: ""; position: absolute; left: 50%; bottom: -5px;
transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px;
background: #fff; border-right: 1.5px solid var(--d-line);
border-bottom: 1.5px solid var(--d-line); }
.xp .pin__dot.is-on, .xp .pin__dot:hover { background: var(--primary); color: #fff;
border-color: var(--primary); }
.xp .pin__dot.is-on::after, .xp .pin__dot:hover::after { background: var(--primary);
border-color: var(--primary); }
/* mobile map toggle */
.xp-mapfab { display: none; }
@media (max-width: 1000px) {
.xp-split { grid-template-columns: 1fr; }
.xp-mapwrap { display: none; }
.xp-results-wrap { padding: 0 20px; }
.xp-mapfab { display: inline-flex; position: fixed; left: 50%;
bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
z-index: 40; box-shadow: var(--d-sh-lg); }
.xp-mapfab[hidden] { display: none; }
/* Room under the last thing on the page so the fixed FAB never parks on the
footer links when the list is scrolled to the end. */
.xp-foot__in { padding-bottom: 84px; }
/* under 900px the tab bar is visible — float the FAB above it */
@media (max-width: 899px) {
.xp-mapfab { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* ...but in map mode the overlay (z 25) buries the tab bar (z 20), so the
84px clearance is for nothing: the button strands mid-map. Hug the
bottom of the map instead, like every map app's list toggle. */
.xp.is-map .xp-mapfab { bottom: calc(18px + env(safe-area-inset-bottom)); }
}
/* FAB flips the page into map mode: the panel becomes a full overlay */
.xp.is-map .xp-mapwrap { display: block; position: fixed; inset: 55px 0 0 0; height: auto;
z-index: 25; }
.xp.is-map .xp-map { border-left: 0; }
.xp-filters__row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* No scrollbar, so the fade is the only hint the row goes on. */
mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.xp-filters__row.is-end { mask-image: none; -webkit-mask-image: none; }
.xp-filters__row::-webkit-scrollbar { display: none; }
.xp-filters__row .fsel, .xp-filters__row .ftoggle { flex: none; }
.xp .fsearch { flex: none; width: 210px; min-width: 0; }
.xp .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.xp .fchips::-webkit-scrollbar { display: none; }
.xp .fchip, .xp .fchips__lbl { flex: none; }
}
@media (max-width: 640px) {
.xp-wrap { padding: 0 14px; }
.xp-results-wrap { padding: 0 14px; }
.xp .rc { flex-direction: column; gap: 12px; }
.xp .rc__img { width: 100%; height: 160px; }
.xp-hdr__link { display: none; }
.xp-hdr__in { gap: 10px; }
.xp-results__head { flex-wrap: wrap; gap: 10px; }
.xp-results__count { font-size: 18px; }
}
/* footer (compact dark) */
.xp-foot { background: radial-gradient(120% 120% at 100% 0%, #3a2723, #241a1c 60%); color: #fff; }
.xp-foot__in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px; }
.xp-foot img { border-radius: 6px; }
.xp-foot .brand { font-family: var(--cr-display); font-weight: 800; font-size: 16px; color: #fff; }
.xp-foot .tag { color: #a99e9a; font-size: 13.5px; }
.xp-foot .sp { flex: 1; }
.xp-foot a { color: #e7dcd8; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.xp-foot a:hover { color: #fff; }
/* =========================================================================
/account — Account & family merged (central portal). One 640px column on
the warm palette: profile, child cards with consent/medical chips, current
bookings with cancel, and settings rows. Rides the .xp token scope.
========================================================================= */
.xp--acct .xp-hdr__in { max-width: 640px; padding: 12px 20px; }
.acct { max-width: 640px; margin: 0 auto; padding: 26px 20px 40px; width: 100%; flex: 1; }
.acct__eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
letter-spacing: .07em; text-transform: uppercase; color: var(--d-pink);
margin: 0 0 6px; }
.acct__h1 { font-family: var(--cr-display); font-size: clamp(26px, 5vw, 34px);
font-weight: 800; color: var(--d-ink); letter-spacing: -.02em; }
.acct .sec { margin-top: 28px; }
.acct .sec__head { display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 12px; }
.acct .sec__head h2 { font-family: var(--cr-display); font-weight: 800; font-size: 17px;
color: var(--d-ink); }
.acct .lbl { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
letter-spacing: .05em; text-transform: uppercase; color: var(--d-slate2); }
.acct .card { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r-lg);
box-shadow: var(--d-sh-sm); }
/* profile */
.acct .profile { display: flex; align-items: center; gap: 14px; padding: 18px; }
.acct .profile__body { flex: 1; min-width: 0; }
.acct .profile__name { font-family: var(--cr-display); font-weight: 800; font-size: 19px;
color: var(--d-ink); }
.acct .profile__meta { font-size: 13.5px; color: var(--d-slate); margin-top: 3px;
overflow-wrap: anywhere; }
.acct .profile__meta b { color: var(--d-ink2); font-weight: 600; }
/* expandable forms */
.acct details { border-top: 1px solid var(--d-line2); }
.acct details > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
gap: 8px; padding: 13px 18px; font-family: var(--cr-display);
font-weight: 700; font-size: 13.5px; color: var(--d-pink); }
.acct details > summary::-webkit-details-marker { display: none; }
.acct details > summary .chev { margin-left: auto; transition: transform .2s;
color: var(--d-slate2); display: grid; }
.acct details > summary .chev svg { width: 12px; height: 12px; }
.acct details[open] > summary .chev { transform: rotate(180deg); }
.acct .form { padding: 4px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct .form .full { grid-column: 1 / -1; }
.acct .label { display: block; font-family: var(--cr-display); font-weight: 700; font-size: 11px;
letter-spacing: .04em; text-transform: uppercase; color: var(--d-slate);
margin-bottom: 5px; }
.acct .input { width: 100%; border: 1px solid var(--d-line); background: var(--d-bg);
border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--d-ink);
outline: 0; font-family: var(--cr-mono); }
.acct .input:focus { border-color: var(--d-p100); background: #fff; box-shadow: var(--d-sh-sm); }
.acct .input:disabled { color: var(--d-slate); }
.acct .check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px;
font-weight: 600; color: var(--d-ink); cursor: pointer; }
.acct .check input { width: 18px; height: 18px; accent-color: var(--primary); }
.acct .btn--block { width: 100%; }
/* child cards */
.acct .kids { display: flex; flex-direction: column; gap: 14px; }
.acct .kid { overflow: hidden; }
.acct .kid__top { display: flex; align-items: center; gap: 13px; padding: 16px 18px; }
.acct .kid__id { flex: 1; min-width: 0; }
.acct .kid__name { font-family: var(--cr-display); font-weight: 800; font-size: 17px;
color: var(--d-ink); }
.acct .kid__age { font-size: 13px; color: var(--d-slate); margin-top: 1px; }
.acct .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 14px; }
.acct .chip, .xp .chip { display: inline-flex; align-items: center; gap: 5px;
font-family: var(--cr-display); font-weight: 700; font-size: 11px;
border-radius: 4px; padding: 4px 10px; border: 1px solid; }
.acct .chip--ok, .xp .chip--ok { background: var(--d-green050); color: var(--d-green);
border-color: var(--d-greenline); }
.acct .chip--ok svg, .xp .chip--ok svg { width: 11px; height: 11px; }
.acct .chip--med, .xp .chip--med { background: var(--d-amber050); color: var(--d-amberink);
border-color: var(--d-amberline); }
.acct .chip--med::before, .xp .chip--med::before { content: ""; width: 7px; height: 7px;
border-radius: 2px; background: var(--d-amber); }
.acct .chip--info, .xp .chip--info { background: var(--d-warm); color: var(--d-ink2);
border-color: var(--d-line); }
/* add-child dashed card */
.acct .addkid { border: 1.5px dashed var(--d-p100); background: var(--d-p050);
border-radius: var(--d-r-lg); }
.acct .addkid > summary { color: var(--d-pink); }
.acct .addkid .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--primary);
display: grid; place-items: center; flex: none; }
.acct .addkid .plus svg { width: 12px; height: 12px; color: #fff; }
/* booking rows */
.acct .bk { display: flex; align-items: center; gap: 13px; padding: 14px 18px; }
.acct .bk + .bk { border-top: 1px solid var(--d-line2); }
.acct .bk--venue { background: var(--d-bg); border-radius: var(--d-r-lg) var(--d-r-lg) 0 0; }
.acct .bk__body { flex: 1; min-width: 0; }
.acct .bk__cls { font-family: var(--cr-display); font-weight: 700; font-size: 15px;
color: var(--d-ink); }
.acct .bk__meta { font-size: 12.5px; color: var(--d-slate); margin-top: 2px; }
.acct .bk__confirm { flex-basis: 100%; background: var(--d-p050); border: 1px solid var(--d-p100);
border-radius: 8px; padding: 12px 14px; margin-top: 4px; }
/* settings rows */
.acct .rows { overflow: hidden; }
.acct .row { display: flex; align-items: center; gap: 13px; padding: 15px 18px; cursor: pointer;
width: 100%; background: none; border: 0; font: inherit; text-align: left;
text-decoration: none; color: inherit; }
.acct .row + .row { border-top: 1px solid var(--d-line2); }
.acct .row:hover { background: var(--d-bg); }
.acct .row__ic { flex: none; width: 38px; height: 38px; border-radius: 8px;
background: var(--d-warm); display: grid; place-items: center;
color: var(--d-pink); }
.acct .row__ic svg { width: 19px; height: 19px; }
.acct .row__body { flex: 1; min-width: 0; }
.acct .row__t { display: block; font-family: var(--cr-display); font-weight: 700;
font-size: 14.5px; color: var(--d-ink); }
.acct .row__s { display: block; font-size: 12.5px; color: var(--d-slate); margin-top: 1px; }
.acct .row__end { flex: none; color: var(--d-slate2); font-weight: 600; font-size: 13px;
display: flex; align-items: center; gap: 8px; }
.acct .row__end svg { width: 13px; height: 13px; }
@media (max-width: 720px) {
.acct .form { grid-template-columns: 1fr; }
}
/* =========================================================================
Provider landing v4 (venue host, timetable.html). Wrapper is `.xp.club` so
it inherits the warm tokens + header/button styles; these rules add the
club hero/collage, trust chips, day-grouped offer rows and info panels.
========================================================================= */
.club-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; width: 100%; }
.club .xp-hdr__in { max-width: 1080px; padding: 12px 22px; }
.club-hdr__logo { width: 34px; height: 34px; border-radius: 8px; background: var(--primary);
color: #fff; display: grid; place-items: center; font-family: var(--cr-display);
font-weight: 800; font-size: 17px; flex: none;
box-shadow: 0 6px 14px -6px var(--primary); overflow: hidden; }
.club-hdr__logo img { width: 100%; height: 100%; object-fit: cover; }
.club .cr-fav { width: 38px; height: 38px; background: #fff; border: 1px solid var(--d-line); }
/* hero */
.club-hero { position: relative; padding: 34px 0 30px;
background:
radial-gradient(120% 130% at 92% -20%, color-mix(in srgb, var(--primary) 16%, #fff8f3) 0, transparent 48%),
radial-gradient(90% 90% at -8% 0, color-mix(in srgb, var(--primary) 13%, #fff8f3) 0, transparent 42%),
linear-gradient(180deg, #fff7f2, var(--d-bg)); }
.club-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
background-image: radial-gradient(color-mix(in srgb, var(--primary) 22%, #fff) 1.3px, transparent 1.3px);
background-size: 26px 26px;
-webkit-mask-image: linear-gradient(180deg, #000, transparent 62%);
mask-image: linear-gradient(180deg, #000, transparent 62%); }
.club-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr;
gap: 26px; align-items: center; }
@media (min-width: 861px) {
.club-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }
}
.club-eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
letter-spacing: .07em; text-transform: uppercase; color: var(--d-pink);
margin: 0 0 10px; display: inline-flex; align-items: center; gap: 7px; }
.club-eyebrow svg { width: 14px; height: 14px; }
.club-hero h1 { font-family: var(--cr-display); font-size: clamp(30px, 4.4vw, 46px);
line-height: 1.03; font-weight: 800; color: var(--d-ink); letter-spacing: -.02em; }
.club-hero__sub { font-size: 16.5px; color: var(--d-ink2); margin: 16px 0 0; max-width: 44ch;
text-wrap: pretty; }
.club-hero__meta { display: flex; align-items: center; gap: 6px; margin: 16px 0 0;
font-size: 14px; color: var(--d-slate); flex-wrap: wrap; }
.club-hero__meta .stars { color: var(--d-star); }
.club-hero__meta strong { color: var(--d-ink); font-weight: 700; }
.club-hero__cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.collage { position: relative; display: grid; grid-template-columns: 1.3fr 1fr;
grid-template-rows: 1fr 1fr; gap: 11px; height: clamp(280px, 34vw, 380px); }
.collage__a { grid-column: 1; grid-row: 1 / span 2; border-radius: 10px; overflow: hidden;
background: var(--d-warm); box-shadow: var(--d-sh-lg); }
.collage__b { border-radius: var(--d-r-lg); overflow: hidden; background: var(--d-warm);
box-shadow: var(--d-sh-md); }
/* trust chips — real settings only, rendered server-side */
.trust { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px;
padding: 22px 0 0; }
.trust__item { display: inline-flex; align-items: center; gap: 8px; background: #fff;
border: 1px solid var(--d-line); border-radius: 4px; padding: 8px 14px;
font-family: var(--cr-display); font-weight: 700; font-size: 12.5px;
color: var(--d-ink2); box-shadow: var(--d-sh-sm); }
.trust__item svg { width: 15px; height: 15px; color: #2fa876; flex: none; }
/* sections */
.club-sec { padding: 26px 0; }
.club-sec__eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase; color: var(--d-slate2);
margin: 0 0 4px; }
.club-sec__title { font-family: var(--cr-display); font-weight: 800; font-size: 24px;
color: var(--d-ink); }
/* category filters */
.club .filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.club .filter { border: 1.5px solid var(--d-line); background: #fff; border-radius: 6px;
padding: 9px 16px; font-family: var(--cr-display); font-weight: 700;
font-size: 13.5px; color: var(--d-slate); cursor: pointer;
transition: color .14s, background-color .14s, border-color .14s; }
.club .filter:hover { border-color: var(--d-p100); }
.club .filter.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* day group headers */
.dayhdr { display: flex; align-items: center; gap: 11px; margin: 22px 0 13px; }
.dayhdr__d { font-family: var(--cr-display); font-weight: 800; font-size: 16px; color: var(--d-ink); }
.dayhdr__n { font-family: var(--cr-display); font-weight: 700; font-size: 11.5px;
color: var(--d-slate); background: var(--d-warm); border: 1px solid var(--d-line);
border-radius: 6px; padding: 2px 9px; }
.dayhdr__line { flex: 1; height: 1px; background: var(--d-line); }
/* offer rows */
.offers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.offer { display: flex; align-items: center; gap: 16px; background: #fff;
border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: 14px 16px;
box-shadow: var(--d-sh-sm); transition: border-color .15s, box-shadow .15s, transform .15s;
text-decoration: none; color: inherit; }
.offer:hover { border-color: var(--primary); box-shadow: var(--d-sh-md); transform: translateY(-2px); }
.offer.sold { opacity: .72; }
.offer.sold:hover { transform: none; border-color: var(--d-line); box-shadow: var(--d-sh-sm); }
.offer__coin { flex: none; width: 60px; height: 60px; border-radius: 10px; display: grid;
place-items: center; color: #fff; box-shadow: var(--d-sh-sm); }
.offer__coin svg { width: 26px; height: 26px; }
.offer__thumb { position: relative; flex: none; width: 96px; height: 80px; border-radius: 10px;
overflow: hidden; background: var(--d-warm); }
.offer__main { flex: 1; min-width: 0; }
.offer__name { display: block; font-family: var(--cr-display); font-weight: 700; font-size: 17px;
color: var(--d-ink); letter-spacing: -.01em; }
.offer__when { display: flex; align-items: center; gap: 6px; font-family: var(--cr-display);
font-weight: 700; font-size: 13.5px; color: var(--d-ink); margin: 3px 0 8px;
flex-wrap: wrap; }
.offer__when svg { width: 14px; height: 14px; color: var(--d-pink); flex: none; }
.offer__when .muted { font-family: var(--cr-mono); font-weight: 500; font-size: 12.5px;
color: var(--d-slate); }
.offer__chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.club .chip { font-family: var(--cr-display); font-weight: 700; font-size: 11px;
border-radius: 4px; padding: 4px 10px; border: 1px solid var(--d-line);
background: var(--d-warm); color: var(--d-ink2); white-space: nowrap; }
.offer__price { font-family: var(--cr-display); font-weight: 800; font-size: 13.5px;
color: var(--d-ink); }
.offer__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.spaces { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cr-display);
font-weight: 700; font-size: 11px; border-radius: 4px; padding: 4px 10px;
background: var(--d-green050); color: var(--d-green); border: 1px solid var(--d-greenline);
white-space: nowrap; }
.spaces::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--d-green); }
.spaces.low { background: var(--d-amber050); color: var(--d-amberink); border-color: var(--d-amberline); }
.spaces.low::before { background: var(--d-amber); }
.spaces.out { background: #f6eceb; color: var(--d-slate); border-color: var(--d-line); }
.spaces.out::before { background: var(--d-slate2); }
/* info panels */
.club-info { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 14px; }
@media (min-width: 861px) {
.club-info { grid-template-columns: 1fr 1fr; }
}
.panel { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r-lg);
padding: 22px; box-shadow: var(--d-sh-sm); }
.panel h3 { font-family: var(--cr-display); font-weight: 800; font-size: 16px;
color: var(--d-ink); margin: 0 0 12px; }
.club-info__addr { font-size: 14.5px; color: var(--d-ink2); margin: 0 0 6px; }
.club-info__map { height: 170px; border-radius: var(--d-r); overflow: hidden; margin: 12px 0;
border: 1px solid var(--d-line); position: relative; z-index: 1; }
.linkrow { display: flex; flex-wrap: wrap; gap: 16px; }
.linkrow a { font-weight: 600; font-size: 13.5px; color: var(--d-pink); text-decoration: none; }
.linkrow a:hover { color: var(--primary); }
.ratingline { display: flex; align-items: center; gap: 8px; font-size: 14px;
color: var(--d-slate); margin: 0 0 14px; }
.ratingline .stars { color: var(--d-star); font-size: 15px; }
.ratingline strong { color: var(--d-ink); font-weight: 700; }
.quote { margin: 0 0 14px; padding: 14px 16px; background: var(--d-bg); border-radius: var(--d-r);
border: 1px solid var(--d-line2); }
.quote p { margin: 0; font-size: 14.5px; color: var(--d-ink2); line-height: 1.5; }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px;
font-weight: 600; color: var(--d-slate); }
.quote cite .stars { color: var(--d-star); }
/* footer */
.club-foot { margin-top: 34px; border-top: 1px solid var(--d-line); }
.club-foot__in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 22px; }
.club-foot__in > span:first-child { font-family: var(--cr-display); font-weight: 800;
font-size: 15px; color: var(--d-ink); }
.club-foot__sp { flex: 1; }
.club-foot__in a { color: var(--d-slate); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.club-foot__in a:hover { color: var(--primary); }
.powered { font-size: 12.5px; color: var(--d-slate2); text-decoration: none; }
.powered:hover { color: var(--primary); }
@media (max-width: 560px) {
.offer { flex-wrap: wrap; }
.offer__side { flex-direction: row; align-items: center; width: 100%;
justify-content: space-between; padding-top: 10px;
border-top: 1px solid var(--d-line2); margin-top: 2px; }
}
/* =====================================================================
Enrol sheet v2 — masthead, facts grid, term-date strip, good-to-know.
Mobile keeps the approved sheet; ≥900px reads like the club landing.
===================================================================== */
.cr-app--enrol { padding-bottom: 130px; } /* room for the fixed thumb CTA bar */
/* Breadcrumb back to the club timetable — desktop only (phones keep the
thumb back-chip on the hero). */
.cr-crumb { display: none; }
@media (min-width: 900px) {
.cr-crumb { display: inline-block; font-family: var(--cr-mono); font-weight: 700;
font-size: .85rem; color: var(--cr-slate); text-decoration: none;
margin: 0 0 14px; }
.cr-crumb:hover { color: var(--primary); }
}
.cr-mast__eyebrow { font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .14em;
font-size: .72rem; font-weight: 700; color: var(--primary); margin: 0 0 8px; }
.cr-lede { color: var(--cr-ink); font-size: 1.02rem; line-height: 1.65; margin: 0 0 16px;
max-width: 58ch; }
/* Term dates: the block's real sessions as a strip — what you're buying. */
.cr-dates { margin: 4px 0 24px; }
.cr-dates__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.cr-dates__note { font-family: var(--cr-mono); font-size: .8rem; color: var(--cr-slate); font-weight: 600; }
.cr-dates__grid { list-style: none; margin: 0; padding: 9px 2px 2px; display: flex; gap: 8px;
overflow-x: auto; scrollbar-width: none; }
.cr-dates__grid::-webkit-scrollbar { display: none; }
.cr-date { position: relative; flex: 0 0 62px; text-align: center; padding: 9px 4px 8px;
background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: 8px;
display: grid; gap: 1px; }
.cr-date__dow { font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .1em;
font-size: .6rem; font-weight: 700; color: var(--cr-slate); }
.cr-date__num { font-family: var(--cr-display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.cr-date__mon { font-family: var(--cr-mono); font-size: .68rem; font-weight: 600; color: var(--cr-slate); }
.cr-date.is-past, .cr-date.is-off { opacity: .45; }
.cr-date.is-off .cr-date__num { text-decoration: line-through; }
.cr-date.is-next { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset;
background: var(--cr-primary-bg); }
.cr-date__flag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
font-family: var(--cr-mono); text-transform: uppercase; letter-spacing: .08em;
font-size: .56rem; font-weight: 800; color: #fff; background: var(--primary);
padding: 2px 7px; border-radius: 4px; }
.cr-date__flag--off { background: var(--cr-slate); }
.cr-dates__prorata { margin: 10px 0 0; font-size: .88rem; color: var(--cr-slate); }
/* Good to know: honest, settings-backed facts + the policy link. */
.cr-know { margin: 0 0 8px; padding-top: 18px; border-top: 1px solid var(--cr-line); }
.cr-know .cr-eyebrow { display: block; margin-bottom: 11px; }
.cr-know__list { list-style: none; margin: 0 0 13px; padding: 0; display: grid; gap: 9px; }
.cr-know__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem;
font-weight: 600; line-height: 1.45; }
.cr-know__list svg { width: 17px; height: 17px; color: #2fa876; flex: none; margin-top: 2px; }
.cr-know__link { color: var(--primary); font-weight: 700; font-size: .92rem; text-decoration: none; }
.cr-know__link:hover { text-decoration: underline; }
/* Signed-out hint in the panel (the one CTA lives in the total row). */
.cr-signhint { background: var(--cr-primary-bg);
border: 1px dashed color-mix(in srgb, var(--primary) 35%, #fff);
border-radius: 8px; padding: 13px 15px; margin-bottom: 12px;
font-size: .9rem; line-height: 1.55; color: var(--cr-ink); }
@media (min-width: 900px) {
.cr-app--enrol { padding-bottom: 40px; }
/* Masthead: full shell width — title block left, media panel right. */
.cr-mast { display: grid; grid-template-columns: 1fr 400px; gap: 44px; align-items: center;
margin: 6px 0 30px; }
.cr-mast .cr-hero { order: 2; height: auto; aspect-ratio: 16 / 10; margin-bottom: 0; }
.cr-mast__body { order: 1; }
.cr-mast .cr-title { font-size: 2.4rem; letter-spacing: -.015em; }
.cr-mast .cr-titlerow { align-items: center; justify-content: flex-start; gap: 16px; }
/* Facts: the icon rows become a quiet bordered 2×2 grid. */
.cr-inforows { display: grid; grid-template-columns: 1fr 1fr; background: var(--cr-card);
border: 1px solid var(--cr-line); border-radius: var(--cr-r-card);
overflow: hidden; margin-bottom: 26px; }
.cr-inforow { grid-template-columns: 1fr; gap: 3px; padding: 15px 18px;
border-bottom: 1px solid var(--cr-line); }
.cr-inforow:nth-child(odd) { border-right: 1px solid var(--cr-line); }
.cr-inforow:last-child,
.cr-inforow:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
/* An odd number of facts (no venue set, say) left the 4th quadrant blank with
a divider running down beside it. The last one spans the full width. */
.cr-inforow:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.cr-inforow__ic { display: none; }
.cr-inforow__value { font-size: 1rem; }
.cr-dates__grid { flex-wrap: wrap; overflow: visible; }
.cr-know__list { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
}
/* Explore Where combobox: anchored under the input on desktop; on phones the
filter row scrolls horizontally (overflow clips absolute children), so the
dropdown goes position:fixed — fixed escapes ancestor overflow clipping. */
.xp-where { top: calc(100% + 8px); }
@media (max-width: 899px) {
.xp-where { position: fixed; top: 64px; left: 12px; right: 12px;
z-index: 40; min-width: 0; max-height: 56vh; }
}
/* ---- Homepage professional pass: quiet trust, brand rules, calmer chrome ---- */
.dir-hero__rating { margin: 16px 2px 0; font-size: .9rem; color: var(--d-slate); }
.dir-hero__rating .stars { color: var(--d-star); }
.dir-hero__rating b { color: var(--d-ink); font-size: 1rem; }
.dir-nav__cta { font-family: var(--cr-display); font-weight: 700; font-size: .92rem;
padding: 8px 14px; border: 1.5px solid var(--primary, #c8442c);
border-radius: 6px; color: #b8371f; text-decoration: none; }
.dir-nav__cta:hover { background: color-mix(in srgb, #c8442c 7%, transparent); }
@media (max-width: 700px) {
.dir-nav__cta { display: none; }
}
/* Each club's own colour as a 3px rule — their brand, our frame. */
.dir-provcard { border-top: 3px solid var(--primary, #c8442c); }
.dir-trustline { margin: 26px 0 0; font-size: .86rem; color: var(--d-slate); }
/* ---- Typing headline ---- */
.dir-hero__typedline { display: block; min-height: 1.06em; white-space: nowrap; }
@media (max-width: 479px) {
.dir-hero h1 { font-size: clamp(24px, 8vw, 38px); }
.dir-hero__typedline { white-space: normal; }
}
.dir-caret { display: inline-block; width: 4px; height: .74em; margin-left: 7px;
background: var(--d-pink); vertical-align: -.02em;
animation: dir-blink 1.05s steps(1) infinite; }
@keyframes dir-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.dir-caret { display: none; }
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.acct .sec__link { font-family: var(--cr-mono); font-weight: 600; font-size: 13.5px;
color: var(--d-slate); text-decoration: none; }
.acct .sec__link:hover { color: var(--d-pink); }
/* ---- Emergency contacts (account portal; mirrors the My-children grammar) ---- */
.acct .ec-card { margin-bottom: 12px; }
.acct .ec { padding: 0 18px; }
.acct .ec + .ec { border-top: 1px solid var(--d-line2); }
.acct .ec__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.acct .ec__body { flex: 1; min-width: 0; }
.acct .ec__name { display: block; font-family: var(--cr-display); font-weight: 700;
font-size: 15.5px; color: var(--d-ink); overflow-wrap: anywhere; }
.acct .ec__rel { font-family: var(--cr-mono); font-weight: 400; font-size: 13.5px;
color: var(--d-slate); }
.acct .ec__phone { display: block; margin-top: 1px; font-size: 13.5px;
color: var(--d-slate); text-decoration: none; }
.acct .ec__phone:hover { color: var(--d-pink); }
.acct .ec__act { flex: none; border: 0; background: none; font-family: var(--cr-display);
font-weight: 700; font-size: 13px; color: var(--d-slate);
cursor: pointer; padding: 6px 4px; }
.acct .ec__act:hover { color: var(--d-ink); }
.acct .ec__act--del:hover { color: var(--cr-red, #d92c20); }
.acct .ec__editform { padding: 2px 0 16px; }
.acct .ec-empty { margin: 0; padding: 18px; font-size: 14px; line-height: 1.55;
color: var(--d-slate); }
/* ---- Provider share consent screen ---- */
.consent-fields { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.consent-fields li { font-weight: 700; font-size: .98rem; padding-left: 22px; position: relative; }
.consent-fields li::before { content: ""; position: absolute; left: 2px; top: .42em;
width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.consent-why { border: 1px solid var(--cr-line); border-radius: 8px; padding: 11px 14px; }
.consent-why summary { cursor: pointer; font-weight: 700; font-size: .92rem;
color: var(--primary); list-style: none; }
.consent-why summary::-webkit-details-marker { display: none; }
.consent-why ul { margin: 10px 0 2px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.consent-why li { font-size: .88rem; color: var(--cr-slate); line-height: 1.5; }
.consent-why li strong { color: var(--cr-ink); }
/* ---- Signup: activity chips (checkbox chips, no JS) ---- */
.cr-actchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-actchip input { position: absolute; opacity: 0; pointer-events: none; }
.cr-actchip span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--cr-line);
border-radius: 6px; font-size: .9rem; font-weight: 700; cursor: pointer;
background: var(--cr-card); user-select: none; }
.cr-actchip input:checked + span { border-color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 7%, #fff); }
.cr-actchip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* ---- Platform legal pages (/privacy, /terms on the central host) ---- */
.cr-legal { padding: 10px 2px 30px; line-height: 1.65; }
.cr-legal h1 { font-family: var(--cr-display); font-weight: 800; font-size: 1.9rem;
letter-spacing: -.02em; margin: 14px 0 4px; }
.cr-legal h2 { font-family: var(--cr-display); font-weight: 800; font-size: 1.15rem;
margin: 26px 0 8px; }
.cr-legal p, .cr-legal li { font-size: .96rem; color: var(--cr-ink); }
.cr-legal ul { padding-left: 20px; margin: 8px 0 14px; display: flex;
flex-direction: column; gap: 8px; }
.cr-legal a { color: var(--primary); font-weight: 700; }
/* =========================================================================
Marketing pages for clubs (/for-clubs, /features, /pricing, /about,
/contact). Same discipline as the homepage: hairline rows instead of card
grids, one dark moment, left-aligned type; step numerals are coral circle
chips and reviews soft white cards (the shipped Option C treatment).
========================================================================= */
@media (min-width: 760px) {
/* Match the homepage nav links exactly (Bricolage display, 700, .98rem)
so the marketing pages read as the same site. */
}
/* Hero: editorial two-column — copy left, a REAL product artifact right. */
/* The artifact: an own-licence photo with the booking card floating over it.
On phones it stacks under the copy (visitors must still see the product);
the floating card tucks inside the photo instead of hanging off its edge. */
/* Sections lead with the homepage's kicker, not a centred heading. */
/* Editorial hairline rows: term left, definition right. The anti-card. */
/* Plan cards: pricing is the one place cards are the convention. */
/* FAQ: hairline rows, no boxes. */
/* Closing line: quiet, typographic. */
/* About prose. */
/* Homepage nav: "For clubs" must be reachable on phones too — show the links
and drop the long create-account CTA (Sign in + tab bar cover the parent
path). Everything is nowrap and compact so the row never breaks onto two
lines. Marketing pages keep their own nav behaviour. */
@media (max-width: 899px) {
.dir-nav--home { gap: 8px; }
.dir-nav--home .dir-nav__name { font-size: 17.5px; white-space: nowrap; }
.dir-nav--home .dir-nav__links { display: flex; align-items: center; gap: 13px; margin-right: 2px; }
.dir-nav--home .dir-nav__links a { text-decoration: none; color: var(--d-ink2);
font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.dir-nav--home .dir-nav__cta { display: none; }
.dir-nav--home .btn { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
}
/* The narrowest phones keep the mark, links and Sign in; the wordmark goes. */
@media (max-width: 374px) {
.dir-nav--home .dir-nav__name { display: none; }
}
/* ---- Launch homepage: activity photo tiles + one-login artifact band ---- */
.dir-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 900px) {
.dir-acts { grid-template-columns: repeat(6, 1fr); gap: 14px; }
}
.dir-act { position: relative; display: block; border-radius: 16px; overflow: hidden;
aspect-ratio: 4 / 5; box-shadow: 0 14px 30px -18px rgba(20, 30, 60, .22);
transition: transform .18s ease, box-shadow .18s ease; }
.dir-act:hover { transform: translateY(-3px); box-shadow: var(--d-sh-md); }
.dir-act img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .35s ease; }
.dir-act:hover img { transform: scale(1.06); }
.dir-act::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(26,12,7,.66), rgba(26,12,7,0) 52%); }
.dir-act b { position: absolute; left: 13px; bottom: 11px; z-index: 1; color: #fff;
font-family: var(--cr-display); font-weight: 700; font-size: 16.5px;
letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
/* Three across on a phone leaves a 106px tile: "Gymnastics" at 16.5px is wider
than that and was clipped by the tile's overflow:hidden. */
@media (max-width: 899px) {
.dir-act b { left: 10px; right: 8px; bottom: 9px; font-size: 13.5px; letter-spacing: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.dir-why { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) {
.dir-why { grid-template-columns: 1.04fr .96fr; gap: 56px; }
}
.dir-why__art { position: relative; }
@media (max-width: 899px) {
.dir-why__art { max-width: 480px; }
}
/* The photo is wrapped in , so the direct-child form needs both paths;
the combinator is kept (rather than a descendant selector) so the floating
.dir-artcard overlays can never be caught by this rule. */
.dir-why__art > img,
.dir-why__art > picture > img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 12px;
box-shadow: var(--d-sh-lg, 0 24px 60px -24px rgba(35,26,28,.35)); display: block; }
.dir-artcard { position: absolute; background: #fff; border: 1px solid var(--d-line);
border-radius: 12px; padding: 12px 14px;
box-shadow: 0 18px 44px -18px rgba(35,26,28,.45); }
.dir-artcard--kids { top: 20px; right: -18px; display: flex; flex-direction: column; gap: 8px; }
.dir-artcard--kids > b { font-family: var(--cr-display); font-size: 13px; color: var(--d-slate2);
text-transform: uppercase; letter-spacing: .08em; }
.dir-kid { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
font-weight: 600; color: var(--d-ink); }
.dir-kid i { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-style: normal;
font-weight: 700; font-size: 12px; display: grid; place-items: center;
font-family: var(--cr-display); }
.dir-artcard--confirm { left: -24px; bottom: 26px; display: flex; gap: 10px;
align-items: flex-start; width: min(330px, 92%); }
.dir-artcard__tick { width: 26px; height: 26px; border-radius: 50%; background: #2fa876;
color: #fff; display: grid; place-items: center; font-weight: 800;
font-size: 14px; flex: none; }
.dir-artcard--confirm b { display: block; font-family: var(--cr-display); font-size: 14.5px;
color: var(--d-ink); }
.dir-artcard--confirm small { color: var(--d-slate); font-size: 12.5px; line-height: 1.45;
display: block; margin-top: 2px; }
/* Stacked under the copy on phones, the floating cards tuck inside the photo.
This MUST follow the base rules above: same specificity, so source order is
what decides, and an earlier copy of this block lost to the desktop offsets
and hung the "Booking confirmed" card off the left edge of the screen. */
@media (max-width: 899px) {
.dir-artcard--kids { top: 12px; right: 12px; }
.dir-artcard--confirm { left: 12px; bottom: 14px; }
}
/* ---- Launch homepage v2 polish ---- */
/* Band rhythm: the one-login spread sits on paper between warm bands. */
.dir-band--paper { background: #fff; border-block: 1px solid var(--d-line); }
/* Icon-chip variant is plain links here (no hx swap, no counts). */
a.dir-cat { text-decoration: none; color: inherit; }
/* ---- Launch homepage v3: character in the details ---- */
/* Hand-drawn underline on the payoff word. */
.dir-squiggle { position: relative; display: inline-block; }
.dir-squiggle svg { position: absolute; left: 2px; right: 2px; bottom: -12px; width: calc(100% - 4px); height: 12px; }
/* Product-moment chip on the collage (style existed, now in use). */
.dir-hero__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2fa876;
color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
/* Activity marquee: slow display type in a light slate — quiet texture on
the cool blue-white ground. */
.dir-marquee { overflow: hidden; padding: 10px 0 26px; }
.dir-marquee__track { display: flex; align-items: center; gap: 26px; width: max-content;
animation: dir-marquee 36s linear infinite; }
.dir-marquee__track span { font-family: var(--cr-display); font-weight: 800; white-space: nowrap;
font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -.01em;
color: #ccd5e4; }
.dir-marquee__track i { color: var(--d-p100); font-style: normal; font-size: 15px; }
@keyframes dir-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.dir-marquee__track { animation: none; }
}
/* Dark-band CTAs: a wrapping flex row so the pair stays left-aligned when
stacked on phones (the old inline margin indented the second button). */
.dir-pro__cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
/* Footer links: transparent wrapper on desktop (children stay flex items of
the foot row); on phones the brand keeps its row and the links align in a
three-column grid instead of a ragged wrap. */
.dir-pro__links { display: contents; }
@media (max-width: 719px) {
.dir-pro__foot { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.dir-pro__foot .tagline { flex-basis: 100%; margin-top: -4px; }
.dir-pro__foot .spacer { display: none; }
.dir-pro__links { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, auto);
justify-content: start; gap: 14px 26px; margin-top: 4px; }
}
/* Marketing pages on phones: the section links become a horizontally
scrollable row under the brand line, and the Get started pill stays
(compact) instead of disappearing with the links. */
/* The marketing footer sits on the warm page, not the dark band: ink text,
hairline divider, same grid behaviour on phones via .dir-pro__links. */
/* ==== Marketing: how-it-works steps + screenshots ==== */
/* Screenshot in a faux-browser frame */
/* ==== Marketing: comparison table ==== */
/* ==== Marketing: savings calculator ==== */
.calc__inputs { display: grid; gap: 14px; }
.calc__field { display: grid; gap: 6px; }
.calc__field span { font-family: var(--cr-display); font-weight: 700; font-size: 13.5px; color: var(--d-ink2); }
.calc__field input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--d-line);
border-radius: 9px; background: #fff; color: var(--d-ink); width: 100%; }
.calc__field input:focus { outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.calc__out { background: #fff; border: 1px solid var(--d-line); border-radius: 14px; padding: 22px;
box-shadow: var(--d-sh-md); }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 9px 0; font-size: 15px; color: var(--d-slate); }
.calc__row b { font-family: var(--cr-display); font-weight: 800; color: var(--d-ink); font-size: 17px; }
.calc__row--bad b { color: #d0432b; }
.calc__row--good b { color: #2fa876; }
.calc__out hr { border: 0; border-top: 1px solid var(--d-line); margin: 12px 0; }
.calc__hero { text-align: center; padding: 6px 0 18px; }
.calc__hero span { display: block; color: var(--d-slate); font-size: 14px; }
.calc__hero strong { display: block; font-family: var(--cr-display); font-weight: 800;
font-size: clamp(38px, 6vw, 52px); line-height: 1.05; color: var(--d-pink); margin: 4px 0; }
/* Homepage nav: the marketing links (For clubs / Pricing) must match the
tab-nav links (Home / Find classes) — same Bricolage display face, weight
and size — so the four don't read as two different styles side by side. */
@media (min-width: 900px) {
.dir-nav--home .dir-nav__links { gap: 24px; margin-right: 18px; }
.dir-nav--home .dir-nav__links a {
font-family: var(--cr-display); font-weight: 700; font-size: .98rem;
color: var(--cr-slate);
}
.dir-nav--home .dir-nav__links a:hover { color: var(--cr-ink); }
}
/* ==== Pricing page ==== */
/* Wide comparison (5 competitors): narrower cells, our column always
highlighted. Scrolls horizontally on small screens with a sticky first
column so the row labels keep their meaning mid-scroll. */
/* Pricing is a centered column — its blocks are narrow, so left-aligning them
strands everything on the left of a wide screen. Center the blocks, headings
and CTAs; keep card/row/FAQ internals left-aligned for readability. */
/* ==== Features page: two-column groups (rows + image), alternating ==== */
.ft-band { padding: clamp(26px, 4vw, 48px) 0; }
.ft-group { display: grid; gap: 28px; align-items: center; }
@media (min-width: 880px) {
.ft-group { grid-template-columns: 1.05fr .95fr; gap: 52px; }
.ft-group--flip .ft-group__text { order: 2; }
}
.ft-figure { margin: 0; }
.ft-figure.gs-shot { border-radius: 14px; overflow: hidden; }
.ft-photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--d-line);
box-shadow: var(--d-sh-lg, 0 26px 60px -30px rgba(35,26,28,.4)); }
.ft-photo img { display: block; width: 100%; height: 100%; max-height: 380px; object-fit: cover; }
/* Pricing: warm activity-photo band so the page isn't all cards + text. */
/* ==== The public bar (partials/pro_nav.html) ==============================
A fixed-height row: brand, the menu, the account door, one filled button.
Everything in it is sized off --nav-h, including the surface painted behind
it (see the MEGA MENU block below), so the bar has one height to change.
======================================================================== */
.pro-nav { --nav-h: 74px;
position: relative; z-index: 200; align-items: center; gap: 10px;
height: var(--nav-h); padding: 0; }
.pro-nav__brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.pro-nav .dir-nav__mark { width: 32px; height: 32px; }
.pro-nav .dir-nav__name { font-size: 19px; letter-spacing: -.02em; }
/* A hairline between the menu and the account cluster: two groups of controls
sharing one row need to look like two groups. */
.pro-nav__rule { display: none; }
/* The site tints avatars with the accent (a !important rule up in the shared
layer). At bar size that left a coral letter on a pale coral disc at 4.1:1,
so the initial goes ink and a hairline gives the disc an edge. */
.pro-nav .cr-avatar { width: 34px; height: 34px; font-size: 13.5px;
color: var(--d-ink) !important; box-shadow: inset 0 0 0 1px var(--d-p100); }
/* The account door is a text control, not a second button. One filled thing
in the bar and there is no question which one to press. */
.pro-nav__signin { display: none; }
.pro-nav__cta {
font-family: var(--cr-display); font-weight: 700; font-size: 14.5px; line-height: 1;
display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 6px;
background: var(--primary); color: var(--primary-ink, #fff) !important;
border: 1px solid transparent; text-decoration: none; white-space: nowrap;
box-shadow: 0 6px 16px -9px var(--primary);
transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.pro-nav__cta:hover { background: #b23c27; transform: translateY(-1px);
box-shadow: 0 12px 22px -10px var(--primary); }
.pro-nav__cta:active { transform: translateY(0); }
@media (min-width: 1080px) {
.pro-nav__rule { display: block; width: 1px; height: 22px; margin: 0 8px 0 4px;
background: var(--d-line); }
.pro-nav__signin { display: inline-flex; align-items: center; gap: 5px;
font-family: var(--cr-display); font-weight: 600; font-size: 14.5px;
white-space: nowrap;
color: var(--d-ink2); background: none; border: 0; cursor: pointer;
padding: 9px 12px; border-radius: 8px; text-decoration: none;
transition: color .12s ease, background-color .12s ease; }
.pro-nav__signin:hover,
.pro-nav__signin[aria-expanded="true"] { color: var(--d-ink); background: var(--d-line2); }
.pro-nav__signin:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pro-nav__signin svg { color: var(--d-slate2); transition: transform .18s ease; }
.pro-nav__signin[aria-expanded="true"] svg { transform: rotate(180deg); }
}
@media (max-width: 1079px) {
.pro-nav { --nav-h: 62px; }
.pro-nav .dir-nav__mark { width: 28px; height: 28px; }
.pro-nav .dir-nav__name { font-size: 17px; }
.pro-nav__cta { padding: 10px 14px; font-size: 13.5px; box-shadow: none; }
}
@media (max-width: 380px) {
/* The mark carries the brand on a narrow phone; the CTA is worth more than
the wordmark next to it. */
.pro-nav .dir-nav__name { display: none; }
}
/* ==== Option C white palette (the shipped default) — what wasn't folded
into the base .dir declarations above: the search console's deeper shadow
and the cool band tint behind activities + reviews. ==== */
.dir-search { box-shadow: 0 18px 44px -26px rgba(20, 30, 60, .28); }
#activities, .dir-reviews { background: var(--d-warm); }
/* ==== Directory provider profile (/p/{slug}): desktop chrome ==== */
/* The phone-app column is right on phones but reads as broken on a desktop
landing ("[club] reviews"): >=900px adds the shared marketing nav + footer
and widens the column; <900px is exactly the mobile page it always was. */
.dir-profile__chrome { display: none; background: transparent; }
@media (min-width: 900px) {
.dir-profile__chrome { display: block; }
.dir-profile__mobhead { display: none; }
.dir-profile { max-width: 680px; padding-top: 30px; }
.dir-profile__chrome .mkt-foot { margin-top: 8px; }
}
/* ==== Marketing footer: photo credits (CC BY attribution) ==== */
/* Explore (public directory search) gets the same clean palette, SCOPED to #xp
so the parent account pages (.xp--acct) and club booking sites (.xp.club)
keep their existing theme. */
#xp {
/* --d-slate2 darkened from the .dir value (#8791a6, 3.2:1): explore renders
it as small text (fchips label etc.), so it must clear 4.5:1 on white. */
--d-ink: #17203a; --d-ink2: #2b3652; --d-slate: #5b6478; --d-slate2: #68728e;
--d-bg: #ffffff; --d-warm: #f1f5fb; --d-line: #e6eaf1; --d-p050: #eef3ff;
}
/* =========================================================================
MEGA MENU (partials/pro_nav.html)
Panels, not a flat dropdown: ten verticals, twelve comparisons and the
guides all need a door, and a single list of twenty links is not a menu.
One panel open at a time (Alpine owns `open`), hoverable on pointer
devices, keyboard-operable via the real