in ; nav, buttons (.btn) and card links (not inside a ) keep the board's own styling. */ main p a:not(.btn) { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--beige); text-underline-offset: 3px; transition: text-decoration-color .25s var(--ease), text-decoration-thickness .25s var(--ease); } main p a:not(.btn):hover, main p a:not(.btn):focus-visible { text-decoration-thickness: 2px; text-decoration-color: var(--clay); } .on-dark p a:not(.btn):hover, .on-dark p a:not(.btn):focus-visible { text-decoration-color: var(--beige-lo); } /* M5 · long markdown bodies: an H2/H3 sat flush (0px) on the paragraph above on 47 pages. The board's own section-heading rhythm (the V7 #detail value clamp(2.2rem,3.4vw,2.9rem) for H2; two thirds of it for H3). */ :is(.svc-article, #detail) :is(p, ul, ol, blockquote) + h2 { margin-top: clamp(2.2rem, 3.4vw, 2.9rem); } :is(.svc-article, #detail) :is(p, ul, ol, blockquote) + h3 { margin-top: clamp(1.5rem, 2.3vw, 1.95rem); } /* M14 · the no-JS booking line is for no-JS only. BaseLayout sets html.js synchronously in , so with JavaScript on it never paints. */ html.js .fhost-fallback { display: none; } /* mapEmbed · /contact/ and /locations/: the GBP map, lazy, in a reserved box (no shift when the iframe arrives). */ .map-embed { margin-block: clamp(1.6rem, 2.6vw, 2.2rem); border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 10; background: var(--gray); max-width: 60rem; } .map-embed iframe { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 5; } } /* D1c footer links (About Us, All Treatments, All Conditions, Journal) join the legal links in the bottom row; the board's row does not wrap, so seven links overflowed 390px. Wrap it, keeping the board's gap as the column gap. */ .foot-bot .links { flex-wrap: wrap; row-gap: .6rem; } /* M5 (city pages): "Neighborhoods we see patients from" sat flush on the drive-route line; the list/landmark sub-heads take the same H3 rhythm. */ #route .drive-route + h3, #route ul + h3 { margin-top: clamp(1.5rem, 2.3vw, 1.95rem); } /* ═══════════════════════════════════════════════════════════════════════════ BUILD-POLISH (2026-09-25) — POLISH-AUDIT.md B1–B24, rulings R-28 / R-29. Every card grid carries a faded topic image (≈ .22–.30) under a wash that keeps the copy AA; the canon-added blocks get the board's own rhythm. Board tokens only. Selectors are new to this build unless marked. ═══════════════════════════════════════════════════════════════════════════ */ /* ── B6 · the checklist tick was an EMPTY span (0x0): every item sat 21px behind a blank gutter. It is now the w5 "Who this care helps" tile: a 20px beige-lo square with the clay check. 45 lists. ─────────────────────────── */ .cond-checklist li .tick:empty { width: 20px; height: 20px; border-radius: 6px; flex: none; background: var(--beige-lo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23975537' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center / 13px no-repeat; } /* the board fills 4 rows per column, so a 4-item list sat in ONE column with the right half empty (sciatica cost). Rows = ceil(n/2) gives a true 2-column flow at every length. Desktop only; the board's <=640 stack is kept. */ @media (min-width: 641px) { .cond-checklist[style*="--rows"] { grid-template-rows: repeat(var(--rows), auto); } } /* ── B4 · common causes: 155 cards, each with its generated scene faded on the right (the images were composed with quiet space on the left), a white wash under the copy, an italic index, and the odd last card spanning the row instead of leaving a blank half. ─────────────────────────────────── */ .cause-panel.has-bg { position: relative; isolation: isolate; overflow: hidden; background: var(--white); } .cause-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: 78% 38%; } .cause-num { display: block; margin-bottom: .9rem; font-family: var(--f-d); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--clay); } .cause-panels { gap: clamp(1rem, 1.6vw, 1.3rem); } @media (min-width: 860px) { .cause-panels > .cause-panel:last-child:nth-child(odd) { grid-column: 1 / -1; } } .cause-panel p { color: var(--ink-72); } /* ── B13 / B14 · evaluation + timeline rows in the board's vb-steps vocabulary: 01/02/03 in the .n column, hairline dividers. ─────────────── */ .eval-steps { margin-top: clamp(1.2rem, 2vw, 1.6rem); } .eval-steps .eval-row { margin-top: 0; } .vb-steps li > div > h3 { margin: 0 0 .45rem; } #timeline .tl-window { margin: 0 0 .5rem; } /* ── B1 · city #focus: the condition page's treat-card--r5, two to a row, an odd last card spans the row (no orphan); the second grid's sub-head gets the section rhythm instead of sitting flush on the first grid. ───── */ @media (min-width: 860px) { .treat-row--city > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; } } .treat-row--city .treat-card-bg { background-position: 70% 35%; } /* (R-31, 2026-09-26: the BUILD-POLISH whole-card white wash is retired; AA over the art is now held by the shared .art-wash recipe + its text scrims.) */ .treat-row--city .treat-card--r5 .treat-body { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem) clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); } .focus-sub { margin-top: clamp(2.4rem, 4vw, 3rem); } #focus h2, #treat h2, .svc-h2-left, .svc-h2-center { text-wrap: balance; } /* ── B12 · city: the town window after the drive section (R5 duotone pattern, as a figure) and the landmark list as hairline rows. ────────── */ .city-fig .la-duo.city-duo { position: relative; inset: auto; display: block; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); } .city-fig .la-duo img { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; } .city-fig:hover .la-duo img { filter: grayscale(0) contrast(1); } .city-fig:hover .la-duo::after { opacity: .2; } .landmark-list { margin-top: .4rem; border-top: 1px solid var(--ink-09); } .landmark-list li { display: flex; align-items: flex-start; gap: .85rem; margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--ink-09); } .lm-t { flex: 1; } .lm-t strong { display: block; margin-bottom: .15rem; font-family: var(--f-d); font-weight: 500; font-size: 1.08rem; line-height: 1.3; color: var(--ink); } .lm-note { font-size: .95rem; font-weight: 300; line-height: 1.65; color: var(--ink-72); } /* ── B2 · service "Conditions we address": 3 columns from 9 cards up. ───── */ @media (min-width: 1100px) { .svc-cond-grid--r5:has(> :nth-child(9)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── B7 / B8 · hub treatment cards and the /services/ hub cards: the same faded-art card (.cond-card-bg.has-art at .24 under a warm wash). ──────── */ .svc-cond-grid--hub, .svc-cond-grid--hubs { grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2vw, 1.6rem); } @media (min-width: 720px) { .svc-cond-grid--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .svc-cond-grid--hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .svc-cond-grid--hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } :is(.svc-cond-grid--hub, .svc-cond-grid--hubs) .svc-cond-card { padding: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); } :is(.svc-cond-grid--hub, .svc-cond-grid--hubs) .cond-card-bg.has-art { background-position: 60% 40%; } /* no orphan: 7 treatments = 3 + 3 + one full-width card; 4 = 3 + 1 wide */ @media (min-width: 720px) and (max-width: 1099px) { .svc-cond-grid--hub > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 1100px) { .svc-cond-grid--hub > :last-child:nth-child(3n+1) { grid-column: 1 / -1; } } .svc-cond-grid--hub .hub-svc-h { margin: 0 0 .6em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; } .svc-cond-grid--hub .svc-cond-card p + p { margin-top: .8rem; } .svc-h2-left + .svc-lede { margin-bottom: clamp(1.6rem, 2.6vw, 2rem); } .svc-h2-left + .region-groups, .svc-lede + .region-groups, .svc-h2-left + .svc-cond-grid { margin-top: clamp(1.6rem, 2.6vw, 2rem); } .svc-cond-grid--hubs .svc-cond-card h3 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); margin: 0 0 .7rem; } .hub-svc-list { margin: 1.2rem 0 1rem; border-top: 1px solid var(--ink-09); } .hub-svc-list li { margin: 0; border-bottom: 1px solid var(--ink-09); } .hub-svc-list a { display: block; padding: .62rem 0; font-size: .93rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: color .3s var(--ease), padding-left .3s var(--ease); } .hub-svc-list a:hover { color: var(--clay); padding-left: .35rem; } /* ── B15 · hub "What the … Does" at section H2 scale. ─────────────────────── */ #what-we-do .svc-h2-wwd { font-family: var(--f-d); font-size: clamp(1.9rem, 1.5rem + 1.9vw, 2.6rem); line-height: 1.1; } /* ── B16 · body-region groups as cards, faded art from each group's first condition (hub #conditions, /conditions/ #groups). ────────────────────── */ .region-groups--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: clamp(.9rem, 1.6vw, 1.2rem); } .region-groups--cards .region-group { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); background: var(--white); border: 1px solid var(--ink-09); border-radius: var(--r-l); box-shadow: var(--sh-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .region-groups--cards .region-group:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .region-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; } .region-groups--cards .region-group h3 { margin: 0 0 .8rem; font-family: var(--f-b); font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--clay); line-height: 1.4; } .region-groups--cards .region-group li { margin: 0; border-top: 1px solid var(--ink-09); } .region-groups--cards .region-group li a { display: block; padding: .5rem 0; font-size: .95rem; font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none; transition: color .3s var(--ease); } .region-groups--cards .region-group li a:hover { color: var(--clay); } /* ── B5 · /locations/ #area-detail: pills, directions beside sorted drive times, the city pages as town windows, section rhythm on every h3/p. ─── */ .area-chips { margin-top: clamp(1.2rem, 2vw, 1.6rem); } .area-chips li { background: var(--white); } .area-cols { display: grid; gap: clamp(1.8rem, 3vw, 3rem); margin-top: clamp(2rem, 3.4vw, 2.8rem); align-items: start; } @media (min-width: 900px) { .area-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } #area-detail h3 { margin: 0 0 .9rem; font-family: var(--f-d); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; color: var(--ink); } .area-dir p { color: var(--ink-72); font-weight: 300; line-height: 1.85; max-width: 60ch; } .area-dir p + p { margin-top: 1rem; } .area-drive { min-width: 0; } .drive-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .drive-list li { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: .95rem 1.1rem; background: var(--white); border: 1px solid var(--ink-09); border-radius: var(--r-m); box-shadow: var(--sh-1); } .drive-from { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); line-height: 1.4; } .drive-min { font-size: .88rem; font-weight: 300; color: var(--ink-72); line-height: 1.3; } .drive-num { margin: 0 .12em; font-family: var(--f-d); font-weight: 400; font-size: 1.85rem; line-height: 1; color: var(--ink); } #area-detail .area-cities-h { margin-top: clamp(2.4rem, 4vw, 3.2rem); } .city-windows { margin-top: 1.2rem; } @media (min-width: 720px) { .city-windows { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .la-grid.city-windows > li:last-child { grid-column: auto; } .city-windows .la-go { text-transform: none; letter-spacing: .02em; font-size: .8rem; font-weight: 500; line-height: 1.4; } /* ── B9 · IndexTemplate #intro / #detail: the V7 article rhythm, a 68ch measure, on the container edge; the authority line closes the band. ─── */ .idx-article { max-width: 68ch; } .idx-article p { color: var(--ink-72); font-weight: 300; line-height: 1.85; } .idx-article > * + * { margin-top: 1.1rem; } .idx-article h2 { margin: clamp(2.2rem, 3.4vw, 2.9rem) 0 .9rem; font-family: var(--f-d); font-weight: 500; color: var(--ink); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.01em; } .idx-article h2::before { content: ""; display: block; width: 32px; height: 1px; margin-bottom: 1.1rem; background: var(--beige); } .idx-article h2:first-child { margin-top: 0; } .idx-article h3 { margin: 1.8rem 0 .6rem; font-family: var(--f-d); font-weight: 500; font-size: 1.28rem; line-height: 1.25; color: var(--ink); } .idx-article ul, .idx-article ol { padding-left: 1.2rem; color: var(--ink-72); font-weight: 300; line-height: 1.8; } .idx-article li + li { margin-top: .4rem; } .idx-article .authority-link { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-09); } .idx-prose + .idx-prose { padding-top: 0; } /* /contact/: with the second map gone (B20) the "What happens after you send the form" H3 met the parking line directly; the section rhythm restored. */ #contact-detail p + p { margin-top: 1rem; } #contact-detail :is(p, .parking-note) + h3 { margin-top: clamp(1.8rem, 3vw, 2.4rem); } /* ── B17 · the "What is" block: steps, lists, note and callout share ONE right edge (the board's .svc-center shrank each to its content). ─────── */ :is(#understanding, #what-we-do) :is(.w5, .w5__lists, .w5__note, .w5__callout) { align-self: stretch; width: 100%; box-sizing: border-box; } /* ── B21 · mobile: a grid of more than 6 cards becomes a horizontal snap rail with a count, like the compare chart's swipe affordance. ────────── */ .snap-hint { display: none; align-items: center; gap: .5rem; margin: .9rem 0 0; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-62); } .snap-hint svg { width: 14px; height: 14px; } .snap-n { font-variant-numeric: tabular-nums; color: var(--ink); } @media (max-width: 640px) { .svc-cond-grid[data-snap] { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .2rem .1rem 1rem; scrollbar-width: thin; scrollbar-color: var(--ink-16) transparent; } .svc-cond-grid[data-snap] > * { scroll-snap-align: start; } html.js .snap-hint { display: flex; } } /* ── B22 · About: air under the H1; a one-line bio as a compact card. ──── */ .apg-hero h1 + .about-capsule { margin-top: clamp(1.1rem, 1.6vw, 1.5rem); } .team-member--compact { margin-top: clamp(1.6rem, 2.6vw, 2.2rem); padding: clamp(1.1rem, 1rem + .6vw, 1.5rem) clamp(1.2rem, 1rem + .8vw, 1.7rem); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-l); background: rgba(255, 255, 255, .04); } /* ── B23 · 404 on the board's dark hero at a short height, chips below; the long CTA label gives way to the short one at <=400px. ────────────────── */ .nf-page .cond-hero { min-height: 0; padding-bottom: clamp(2.4rem, 4vw, 3.4rem); } .nf .nf-links { margin: 1rem 0 1.6rem; } .nf .nf-links li a { color: inherit; text-decoration: none; } .lbl-s { display: none; } @media (max-width: 400px) { .lbl-l { display: none; } .lbl-s { display: inline; } } /* ── B19 · footer: one rule (the .foot-top border; the oversight line's own half-width rule is dropped), ONE column-head style (the board's .64rem beige; a head that is a link inherits it instead of the list-link face, and About's skin no longer enlarges it), times right-aligned, and legal separators drawn by CSS so no "|" is ever left at the end of a line. ─── */ .foot-oversight { border-top: 0; padding-top: 0; } .footer .foot-col h4 { font-family: var(--f-b); font-size: .64rem; font-weight: 600; letter-spacing: .24em; line-height: 1.4; text-transform: uppercase; color: var(--beige); margin: 0 0 1.4rem; } .footer .foot-col h4 a { display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; opacity: 1; } .footer .foot-col h4 a:hover { color: var(--white); } .foot-hours .fh-t { text-align: right; } .foot-all .nw { white-space: nowrap; } .foot-all a:hover .nw { transform: none; } .foot-all a:hover .nw > span { transform: translateX(4px); } @media (min-width: 1024px) { .foot-bot .links { flex-shrink: 0; max-width: 100%; column-gap: .9rem; } .foot-bot .links a + a::before { content: "|"; display: inline-block; margin-right: .9rem; color: rgba(255, 255, 255, .28); pointer-events: none; } } /* ═══════════════════════════════════════════════════════════════════════════ R11 (2026-09-26) — owner rulings R-30 + R-31. ═══════════════════════════════════════════════════════════════════════════ */ /* ── R-30 · service + condition heroes ~22% taller at 1440 and 390 ───────── The board hero is content-sized (min-height clamp(360px,42vw,500px) is below the content on every service/condition page), so the lift is added as equal padding above and below: the board composition (centred content, dark overlay, per-page object-position, R-18 crumb clearance) is kept and the photo simply shows more. Measured before: 665px @1440 on both pages; 789 / 723px @390 (spinal-decompression / back-pain). +2 x 4.6rem @1440, +2 x 5.2rem below 900px. Hub, city, index and 404 heroes share InteriorHero but do NOT carry data-hero="tall": they are unchanged. ──────────────── */ [data-hero="tall"].cond-hero { --hero-lift: 5.2rem; padding-top: calc(var(--nav-h, 76px) + clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) + var(--hero-lift)); padding-bottom: calc(clamp(2.6rem, 1.8rem + 3.6vw, 4rem) + var(--hero-lift)); } @media (min-width: 900px) { [data-hero="tall"].cond-hero { --hero-lift: 4.6rem; } } /* ── R-31 · ONE card-art recipe for every faded-image card grid ───────────── Measured off the Home hub-explorer card (#service-hub .hub-card.has-r6bg, the owner's reference): ground = white; the image full colour, no filter, at opacity .30 (.36 on hover/focus, scale 1.045); NO wash layer over it; a mask that clears the image out of the bottom 4.75rem (ramp to .45 at 8rem, full above). The old per-grid warm/white ::after washes are deleted above. Applies to: condition causes, condition treatment options, service "conditions we address", hub treatments, hub + /conditions/ region groups, city focus, /services/ hub cards. Not applied: Home hub cards (the source), Home #elevated specimen grid (own design), Local Access / town windows (dark duotone photo windows with white type), cost tiles (icons, no art). */ :root { --art-wash-ground: var(--white); --art-wash-op: .3; --art-wash-op-hover: .36; --art-wash-mask: linear-gradient(0deg, transparent 0, transparent 4.75rem, rgba(0, 0, 0, .45) 8rem, #000 100%); } .art-wash { position: relative; isolation: isolate; overflow: hidden; background-color: var(--art-wash-ground); } .art-wash .art-wash-bg { opacity: var(--art-wash-op); filter: none; -webkit-mask-image: var(--art-wash-mask); mask-image: var(--art-wash-mask); transition: transform 1.2s var(--eout), opacity .5s var(--ease); } .art-wash:hover .art-wash-bg, .art-wash:focus-within .art-wash-bg { opacity: var(--art-wash-op-hover); transform: scale(1.045); } /* ── R-33 · service "Conditions we address": 6 cards max, then the board's section link (the hub's .hub-all) to /conditions/, on the grid rhythm. ─── */ .svc-cond-all { margin-top: clamp(1.4rem, 2.4vw, 2rem); } /* ── R-31 · AA text scrims (measured, r11 aa-probe + aa.py, 1440 + 390) ───── With the lighter recipe, two text blocks fell under 4.5:1 over the art: the clay .66rem region-group label (2.9 to 4.1:1) and the ink-62 body paragraphs on the hub / services-index cards (4.3:1); at hover opacity the large italic 01-05 index numerals touched 2.9:1 (need 3:1). Per the ruling, ONLY the scrim under those text blocks is strengthened (a soft white patch behind the block, painted above the art, below the text), never the card. */ :root { --art-wash-scrim: rgba(255, 255, 255, .72); } .region-group.art-wash > h3, :is(.svc-cond-grid--hub, .svc-cond-grid--hubs) .art-wash p, .art-wash :is(.treat-num, .cause-num) { position: relative; } .art-wash .cause-num { width: fit-content; } .region-group.art-wash > h3::before, :is(.svc-cond-grid--hub, .svc-cond-grid--hubs) .art-wash p::before, .art-wash :is(.treat-num, .cause-num)::before { content: ""; position: absolute; inset: -.35rem -.6rem; z-index: -1; pointer-events: none; border-radius: .6rem; background: var(--art-wash-scrim); filter: blur(6px); } /* ── CATCHUP-BUILD · the pinned rail keeps its CTA in view ────────────────── At 1440x900 the condition rail (TOC 10 links + "Treated with" + the contact card, ~1,045 px) exceeded its pinned height (100vh - 7.5rem = 780 px) and the board's rule scrolled the WHOLE rail, so the phone and the Book button sat below an inner scroll on 31/31 condition pages. Now only the navigation part (.rail-scroll) scrolls; the black contact card is flex:none at the bottom of the pinned rail, so phone + Book are in view at 1440x900, 1366x768 and 1280x720 without scrolling anything. Below 1025 px the rail is static and .rail-scroll is a plain block (the board's mobile rules hide the TOC). */ .rail-scroll { display: flex; flex-direction: column; gap: 1.1rem; } @media (min-width: 1025px) { .svc-sticky-rail { overflow: hidden; } .svc-sticky-rail > .rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-l); padding-right: 3px; scrollbar-width: thin; scrollbar-color: var(--gray) transparent; } .svc-sticky-rail > .rail-scroll::-webkit-scrollbar { width: 8px; } .svc-sticky-rail > .rail-scroll::-webkit-scrollbar-track { background: transparent; } .svc-sticky-rail > .rail-scroll::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 99px; } .svc-sticky-rail > .side-contact { flex: none; } } /* ── CATCHUP-BUILD · city #route: the drive as labelled facts (was a template-composed sentence, copy-lint A3). The landmark-list's ruled-row vocabulary; the label is the board's eyebrow type. ────────────────────── */ .drive-facts { margin: .4rem 0 0; padding: 0; border-top: 1px solid var(--ink-09); } .drive-facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .25rem 1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--ink-09); } .drive-facts dt { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); } .drive-facts dd { margin: 0; color: var(--ink-72); font-weight: 300; line-height: 1.7; } .drive-facts dd::first-letter { text-transform: uppercase; } @media (max-width: 640px) { .drive-facts > div { grid-template-columns: minmax(0, 1fr); } } #route .drive-facts + h3 { margin-top: clamp(1.5rem, 2.3vw, 1.95rem); } /* ── GATE3-FIX D1 (2026-09-26) · LAZY CARD ART + LAZY REVIEWS BACKGROUND ── LAUNCH-QA measured 390 LCP at 4.7-5.4 s (Lighthouse-mobile profile) on the hub, city and conditions-index pages because every card-art background on the page downloaded ahead of the hero: CSS backgrounds have no lazy loading. bgArt() (src/lib/rimg.ts) now puts the image in --art / --art1 only; it is painted here once BaseLayout's observer marks the span `data-art-in` (after the window load event, section by section as each nears the viewport). Without JavaScript (no html.js) the image paints at once, as before. The reviews band's photo (a board ::before background, board CSS is frozen) is held back the same way until its section is marked. */ .art-wash-bg { background-image: var(--art1); } @supports (background-image: image-set(url("x.webp") 1x)) { .art-wash-bg { background-image: var(--art); } } html.js .art-wash-bg:not([data-art-in]) { background-image: none; } html.js .reviews:not([data-art-in])::before { background-image: none; } /* ── GATE3-FIX D3 (2026-09-26) · the declarative WebMCP search form (components/chrome/WebMCP.astro): reachable, but visually out of the way. */ .wmcp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── GATE3-FIX D1 (2026-09-26) · DEFERRED RENDERING OF BELOW-THE-FOLD BANDS ON PHONES AND TABLETS. After the image fixes, the 390 LCP on the Lighthouse-mobile profile (CPU x4) was bound by the MAIN THREAD, not the network: the first layout of a whole page took 0.8-0.9 s and the font-swap relayout another 0.3-0.45 s, and the hero could not paint until both were done (trace: scratch/waves/2026-09-26-p6/logs/fix). `content-visibility: auto` lets the browser skip layout and paint of the bands below the first content band until they approach the viewport (first layout 916 -> 166 ms). Excluded: the hero and first band (above the fold), Home #approach and the CTA band (they paint outside their own box, which paint containment would clip) and Home #scrollExpand (sticky pin). Desktop (>1024 px) is untouched: its sticky rails and map column stay exactly as before, and it was never slow. public/scripts/lazy-media.js releases every band section by section in idle time after `load` (data-cv-done), and releases them ALL at once (html.cv-off) before any in-page #anchor jump, so #book / #faq land on target; a page opened with a #hash starts released (inline in ). No JavaScript = no deferral. */ @media (max-width: 1024px) { html.js:not(.cv-off) main > section:nth-of-type(n+3):not(#scrollExpand):not(#approach):not(.cta-band):not([data-cv-done]) { content-visibility: auto; contain-intrinsic-size: auto 800px; } } /* ── GATE3-FIX anchor check (2026-09-26): only .cond-sec and .book-band had the board's 6.5rem scroll margin, so "#faq" (condition TOC, service rail "Questions"), "#reviews", "#visit" and the other band anchors parked the band's top under the sticky header. Every id'd band gets the same 6.5rem. */ main > section[id] { scroll-margin-top: 6.5rem; } /* ── CONSENT CARD (R-42, 2026-09-27; src/components/ConsentGate.astro) ───── The footer's own chrome: --black ground, --line-dark hairline, --mist body copy at the footer blurb's size (.9rem / 300), the heading in the display face, Accept = the board's own .btn.btn-bronze (unchanged sizes, R-03). Fixed position, so it can never shift layout. z-index 130: above the nav (100/120), under the mobile CTA bar (140) and the mobile menu (150). At 768px and below it sits 16px above the sticky .mcta bar: the gate measures the bar on show() and sets --consent-offset on the card; the :root value below is only the fallback (the bar's 1-line height). ⛔ Class prefix `cgate`, NOT the kit's `consent`: the frozen board already owns `.consent` (the booking form's consent line: display:flex, margin .2rem 0 1.5rem, .86rem), and on the first staging deploy it leaked onto the card (flex layout, +24px bottom margin). */ @media (max-width: 768px) { :root { --consent-offset: calc(65px + env(safe-area-inset-bottom, 0px)); } } .cgate { position: fixed; z-index: 130; left: 16px; right: 16px; bottom: calc(16px + var(--consent-offset, 0px)); max-width: 380px; margin-left: auto; padding: 1.25rem 3.1rem 1.2rem 1.3rem; background: var(--black); color: var(--mist); border: 1px solid var(--line-dark); border-radius: var(--r-l, 18px); box-shadow: 0 24px 56px -20px rgba(0, 0, 0, .55); font-family: var(--f-b); font-size: .9rem; font-weight: 300; line-height: 1.7; } .cgate[hidden] { display: none; } .cgate:focus { outline: none; } .cgate__h { margin: 0 0 .4rem; font-family: var(--f-d); font-weight: 400; font-size: var(--s-1); letter-spacing: -.012em; line-height: 1.2; color: var(--white); } .cgate__p { margin: 0; } .cgate__p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .cgate__p a:hover { color: var(--beige); } .cgate__stack { display: grid; margin: 1rem -1.8rem 0 0; } .cgate__accept { width: 100%; } .cgate__x { position: absolute; top: .55rem; right: .55rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--white); opacity: .8; } .cgate__x svg { width: 14px; height: 14px; } .cgate__x:hover { opacity: 1; background: rgba(255, 255, 255, .08); } .cgate__x:focus-visible, .cgate__accept:focus-visible, .cgate__p a:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; opacity: 1; } @media (max-width: 520px) { .cgate { left: 16px; right: 16px; max-width: none; } } @media print { .cgate { display: none !important; } } @media (prefers-reduced-motion: no-preference) { .cgate:not([hidden]) { animation: cgate-in .28s var(--eout, ease-out) both; } @keyframes cgate-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } /* the policy's #choices heading (R-42): the footer "Privacy choices" link without JS lands here, clear of the sticky header */ .idx-article h2[id] { scroll-margin-top: 6.5rem; } /* ── P8 MOBILE BOOKING FIX (2026-09-27, owner phone report, Android ~412px) ── Mobile only (<=768px); desktop and the board's type are untouched. 1. Home #contact: the board pulls .fhost full-bleed (margin-inline:-gut) and hands the gutter back only to .fhost-head/.fhost-alt/.fhost-fallback. The Core30 booking rail (.book-rail: steps, assurances, reassurance) sits in the same full-bleed box and got no gutter, so its copy ran to x=0. 2. The board's .book-steps li is display:flex, which laid the home rail's three spans out as three squeezed columns (num | title | body): titles wrapped a word per line and step 03's body started at another x. At mobile it is a 2-column grid: numeral | title over body. 3. Service/condition/hub/city/about .book-band: the numerals "01" "02" "03" are different widths, so the step bodies started 2px apart. Fixed numeral column. 4. Poptin (CORE30-POPTIN-PLAYBOOK §3): Poptin draws the form at 500x500 and applies transform:scale(min(box width, box height)/500). At mobile the WIDTH is the binding side, so every px of host padding shrinks fields and type. The 16px box padding is dropped (Integra's full-bleed pattern: 412px phone = scale .824, was .76); Poptin's own inner padding keeps the labels ~17px off the screen edge. HEIGHT CONTRACT UNCHANGED (560). */ @media (max-width: 768px) { #contact .book-rail { padding-inline: var(--gut); } #contact .book-steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .75rem; row-gap: .25rem; align-items: baseline; } #contact .book-steps .bs-n { grid-column: 1; grid-row: 1 / span 2; min-width: 0; } #contact .book-steps .bs-t, #contact .book-steps .bs-b { grid-column: 2; min-width: 0; } .book-band .book-steps .n { width: 1.5rem; } .fhost-box, .book-band .fhost-box { padding-inline: 0; } }
) keep the board's own styling. */ main p a:not(.btn) { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--beige); text-underline-offset: 3px; transition: text-decoration-color .25s var(--ease), text-decoration-thickness .25s var(--ease); } main p a:not(.btn):hover, main p a:not(.btn):focus-visible { text-decoration-thickness: 2px; text-decoration-color: var(--clay); } .on-dark p a:not(.btn):hover, .on-dark p a:not(.btn):focus-visible { text-decoration-color: var(--beige-lo); } /* M5 · long markdown bodies: an H2/H3 sat flush (0px) on the paragraph above on 47 pages. The board's own section-heading rhythm (the V7 #detail value clamp(2.2rem,3.4vw,2.9rem) for H2; two thirds of it for H3). */ :is(.svc-article, #detail) :is(p, ul, ol, blockquote) + h2 { margin-top: clamp(2.2rem, 3.4vw, 2.9rem); } :is(.svc-article, #detail) :is(p, ul, ol, blockquote) + h3 { margin-top: clamp(1.5rem, 2.3vw, 1.95rem); } /* M14 · the no-JS booking line is for no-JS only. BaseLayout sets html.js synchronously in