* starts at y=1 while the header occupies 0-161. So the header costs the page * no height, and the hero's 250px top padding is mostly spent repaying that * overlap (live's H1 lands at y=261, i.e. 100px below the header's bottom). * The header must therefore sit above the hero in paint order. */ .site-header { position: relative; z-index: var(--layer-nav); background: transparent; border-bottom: var(--border-width-s) solid var(--tc-mid); /* live: 1px rgb(151,202,219) */ } .site-main { margin-top: calc(-1 * var(--header-h)); } :root { --header-h: 10.0625rem; } /* 161px */ .site-header__inner { display: flex; align-items: center; gap: var(--space-s); min-height: 10.0625rem; /* live 161px */ padding-block: var(--space-2xs); } .site-logo { flex: none; display: block; } .site-logo img { width: 16.25rem; height: auto; display: block; } /* 260px */ /* MEASURED: live's nav starts 50px after the logo (x=355) and is left-aligned; * the CTA takes the right edge. It is not centred between them. */ .site-nav { margin-inline: var(--space-m) auto; } .site-nav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } /* Live's separator is an accent hairline 18.6px tall, centred on the label, * with 5px of air either side -- not a full-height border. */ .site-nav li { position: relative; } .site-nav li + li { margin-left: var(--space-3xs); padding-left: var(--space-3xs); } .site-nav li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 1.125em; border-left: var(--border-width-s) solid var(--secondary-line); transform: translateY(-50%); } .site-nav a { display: block; /* Both ease toward the collapse and are untouched at 1440 (label 16.5, * padding 15; live 16.5 / 14-15). Padding 15 / 9.8 / 6.1 and label * 16.5 / 15.9 / 15.5 at 1440 / 1300 / 1200 -- the label follows live's own * fluid text (16.5 / 16.1 / 15.7) rather than staying at body size. */ padding-inline: calc(var(--space-2xs-xs) - var(--space-taper)); font-family: var(--font-heading); font-size: calc(var(--size-0) - var(--space-taper-s)); font-weight: var(--weight-heading); line-height: var(--leading-body); color: var(--text); text-decoration: none; /* A label never breaks inside the one-row bar: the row is swept at 1px * from the collapse to 1920 and fits everywhere, so a two-line label can * only mean the row ran short, which nowrap turns into a measurable * overflow rather than a quiet wrap. Centred all the same, so a label that * ever did wrap would sit centred between its two separators (the * separator air is symmetrical: padding + 3xs either side of the pipe). */ white-space: nowrap; text-align: center; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--secondary-on-soft); } .site-nav a.active, .site-nav a[aria-current="page"] { color: var(--secondary-on-soft); } .site-header .btn { flex: none; } /* Mobile nav. Live collapses to a hamburger below 1024; we collapse at 1199 * (see NAV COLLAPSE below) because our nav labels are wider at those widths * than live's. Live collapses to a panel of * Barlow 600 links at 20.624px. display:none while closed, deliberately: a * translateX(100%) drawer still contributes to document scroll width. */ .nav-toggle { display: none; flex: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; /* live: a filled deep-navy square with white bars, 4px radius */ background: var(--brand-solid); border: 0; border-radius: var(--radius-xs); color: var(--brand-on-solid); cursor: pointer; } .nav-toggle svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } /* NAV COLLAPSE at 1199, not live's 1024 (was 1299 until 2026-10-03; the * owner wants the full nav on 1280px laptops). MEASURED: the three header * blocks (260px logo, six Lato 700 links, the Call pill) leave the nav ~527px * at 1200, where the links at body size and 2xs-xs padding needed ~608. Live * fits by shrinking its logo and gutters; ours keeps both and instead eases * the link padding and label size on --space-taper / --space-taper-s, which * are 0 at 1440. Swept at 1px from 1200 to 1920 on every page: one row, no * label wrapped or clipped, the pill clear. 1081-1199 keeps the desktop * header's 161px bar and 260px logo. * OWNER'S CALL (2026-10-03): the menu button sits on the RIGHT beside the Call * pill, one group with the header's own scale gap between them (--space-s, * --space-xs from 1080 down) -- not centred between logo and pill as live * does at 1024. Its auto left margin takes all the free space. */ @media (max-width: 74.9375rem) { .site-nav { display: none; } .nav-toggle { display: inline-flex; order: 2; } .site-header .btn { order: 3; margin-left: 0; } .site-logo { order: 1; } } /* =========================================================================== * HERO — band 0. 1254px tall at 1440. * Ground rgb(242,244,246) under two radial gradients (transcribed verbatim * from live's computed background-image). Inner padding 250px top / 120px * bottom. Two columns: 700px copy, 570px arch photo with a 60px left margin. * ======================================================================== */ /* Four of live's six bands carry their own stack of radial gradients over the * ground -- a soft blue wash whose centres and radii differ per band. Copied * verbatim from live's computed background-image; this is decoration that * cannot be eyeballed, so it is transcribed rather than approximated. */ .hero { background: radial-gradient(1100px 800px at 85% 40%, color-mix(in srgb, var(--tc-vivid) 30%, transparent), transparent 48%), radial-gradient(1200px 900px at 70% 55%, color-mix(in srgb, var(--tc-mid) 22%, transparent), transparent 72%), radial-gradient(1300px 950px at 25% 50%, color-mix(in srgb, var(--tc-sky) 12%, transparent), transparent 78%), var(--surface); padding-block: 0; } .about { background: radial-gradient(900px 700px at 22% 22%, color-mix(in srgb, var(--tc-mid) 20%, transparent), transparent 50%), radial-gradient(1100px 850px at 45% 55%, color-mix(in srgb, var(--tc-vivid) 22%, transparent), transparent 50%), radial-gradient(1300px 950px at 28% 78%, color-mix(in srgb, var(--tc-sky) 14%, transparent), transparent 70%), var(--surface); } .why { background: radial-gradient(1000px 700px at 20% 25%, color-mix(in srgb, var(--tc-vivid) 28%, transparent), transparent 48%), radial-gradient(1100px 800px at 80% 40%, color-mix(in srgb, var(--tc-mid) 22%, transparent), transparent 72%), radial-gradient(1200px 850px at 30% 75%, color-mix(in srgb, var(--tc-sky) 14%, transparent), transparent 78%), var(--surface); } .services { background: radial-gradient(900px 700px at 22% 22%, color-mix(in srgb, var(--tc-mid) 20%, transparent), transparent 72%), radial-gradient(1100px 850px at 45% 55%, color-mix(in srgb, var(--tc-vivid) 22%, transparent), transparent 70%), radial-gradient(1200px 900px at 82% 50%, color-mix(in srgb, var(--tc-vivid) 28%, transparent), transparent 55%), radial-gradient(1300px 950px at 28% 78%, color-mix(in srgb, var(--tc-sky) 14%, transparent), transparent 80%), var(--surface); } .hero__inner { padding-block: var(--hero-pad-top) var(--hero-pad-bottom); display: flex; flex-direction: column; gap: var(--space-s); } /* MEASURED: live's hero pads 250px top / 120px bottom above 1024, and * 180px / 50px at 1024 and below. It is a breakpoint on live, not a curve, * so it is a breakpoint here. */ :root { --hero-pad-top: var(--space-hero-top); --hero-pad-bottom: var(--space-3xl); } /* 250 / 120 at 1440 */ .hero__cols { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 630fr); gap: var(--space-s); /* live 20px */ } .hero__copy { display: flex; flex-direction: column; align-items: flex-start; } /* stretch to the media column's height so margin-top:auto has room to work */ .hero__cols { align-items: stretch; } .hero__copy > * + * { margin-top: 0; } .hero .display { margin-top: var(--space-s); max-width: 100%; } /* live 19px */ .hero__lede { margin-top: var(--space-2xs); max-width: 39rem; } /* live 10px below the h1; 623px wide */ /* The two rule rows. Live: 500px wide, 1px top rule on the first and 1px * bottom rule on the second (so the pair reads as three hairlines), 10px * block padding, items separated by a Karla "/" at 18.1491px. */ .hero__facts { margin-top: var(--space-l); width: min(100%, 31.25rem); } .hero__fact-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); padding-block: var(--space-2xs); } /* live: row 1 is ruled top AND bottom, row 2 bottom only -- three hairlines */ .hero__fact-row { border-bottom: var(--border-width-s) solid var(--tc-mid); } .hero__fact-row:first-child { border-top: var(--border-width-s) solid var(--tc-mid); } .hero__fact { font-size: var(--size-0); font-weight: var(--weight-medium); line-height: var(--leading-body); color: var(--brand-on-soft); } .hero__sep { font-family: var(--font-accent); font-size: var(--size-1); font-weight: var(--weight-medium); line-height: 1; /* the larger glyph must not inflate the 46px row */ color: var(--secondary-on-soft); margin: 0; } .hero .btn { margin-top: var(--space-l); } /* live 40px */ /* --- The arch crops ---------------------------------------------------- * THE KEY DETAIL OF THIS PAGE. Live draws every arch as a CSS * background-image on a div wearing a FIXED-PIXEL border-radius — not a * clip-path, not an SVG mask, not a pre-cropped image. * * Because the radius is fixed px and the box is not, the shape's CHARACTER * changes with the viewport, and live lets it: * * hero portrait 1920 570x932 r 500px -> radius > half the width, so * the top clamps to a full semicircle * 1440 570x884 r 500px -> same, near-semicircular * 1024 964x849 r 500px -> a shallow, wide arc * 390 350x477 r 500px -> clamps to a semicircle again * * small cards 1440 165x200 r 100px -> a tall arch * 1024 231x116 r 100px -> radius > half the height, so * the whole top rounds off * 390 165x209 r 100px -> back to a tall arch * * Reproduced by stating the same fixed radii; the browser's own clamping * then produces live's shape at each width, because it is the same * mechanism. Measured against live at all three widths. */ .arch { background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; border-radius: 500px 500px 10px 10px; } .arch--sm { border-radius: 100px 100px 10px 10px; } .hero__media { position: relative; margin-left: var(--space-l-xl); /* live 60px, inside the 630 track */ padding-inline: var(--space-inset-m); /* live 50px */ /* No min-height above the stack breakpoint: live's arch is height:auto and * simply stretches to the copy column (856px at 1440, 932 at 1920). A * fixed 884px made the hero 28px taller than live's. */ background-image: url("/assets/images/hero-doctor-patient.a7fb1fd554.webp"); } .hero__badge { position: absolute; top: 1.875rem; /* 30px */ /* Live's badge overhangs the arch but NEVER the viewport: measured, it * clears by 95px at 1440 and 30-50px below that. The -100px offset is * relative to the arch, so once the shell stops growing the badge starts * eating the gutter and then the edge -- it overhung by 11-16px from * 1120 to 1440. Clamp the pull to whatever space is actually spare. */ right: clamp(0px, calc((100vw - var(--shell)) / 2 - var(--space-m)), var(--space-inset-m)); display: flex; flex-direction: row-reverse; align-items: center; gap: var(--space-xs); /* live 14px */ background: var(--tc-sky); border-radius: var(--radius-s); padding-left: var(--space-s); max-width: 100%; } .hero__badge-icon { flex: none; display: grid; place-items: center; width: 4.0625rem; /* 65px */ height: 4.0625rem; background: var(--secondary-solid); border-radius: 0 20px 20px 0; color: var(--secondary-on-solid); } .hero__badge-icon svg { width: 1.6875rem; height: 1.6875rem; fill: currentColor; } .hero__badge-title { font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heading); line-height: var(--leading-display); color: var(--brand-on-soft); margin: 0; } .hero__badge > div { text-align: center; } /* live centres both lines */ .hero__badge p:not(.hero__badge-title) { margin: 0; font-size: var(--size-0); line-height: var(--leading-body); } /* The row of three sits INSIDE the copy column, not below both columns -- * measured on live, where the copy column is 700x884 (the same height as the * media column) and the cards land on its bottom edge. Building it as a * sibling row below both columns made the hero 279px too tall. * * Within that 700px column live draws 165 + 165 + 330 with two 20px gaps, * which is 700 exactly. margin-top:auto pushes the row to the column's * bottom, which is what makes the two columns the same height. */ .hero__cards { width: 100%; margin-top: auto; padding-top: calc(var(--space-2xl) + var(--space-s)); /* 100; live 106px between the CTA and the cards */ display: grid; grid-template-columns: minmax(0, 165fr) minmax(0, 165fr) minmax(0, 330fr); gap: var(--space-s); /* live 20px */ align-items: stretch; } /* Live leaves the right half of this row empty: the two arch cards sit at * x=45 and x=230 and the hours card at x=415, ending at 745 within the 1350 * inner. The fourth track is that empty remainder -- stated so the three * blocks keep live's widths instead of stretching across the row. */ .hero__card-photo { position: relative; height: 12.5rem; /* live 200px, fixed */ display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--space-2xs); } /* Live's own inconsistency, reproduced: only the FIRST arch card is shadowed. */ .hero__card-photo:first-child { box-shadow: 4px 4px 26px -4px color-mix(in srgb, black 18%, transparent); } .hero__card-photo .chip { display: grid; place-items: center; width: 2.125rem; /* 34px */ height: 2.125rem; border-radius: var(--radius-round); background: var(--tc-sky); color: var(--secondary-on-soft); } .hero__card-photo .chip svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; } .hours-card { height: 12.5rem; /* live 200px, fixed */ background: var(--tc-sky); border-radius: var(--radius-s); padding: var(--space-s) var(--space-s) var(--space-s) var(--space-2xs); /* live 20px, 10px left */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); /* live 17px */ text-align: center; } .hours-card__icon { display: grid; place-items: center; width: 2.75rem; /* 44px */ height: 2.75rem; border-radius: 7px; background: var(--tc-mid); color: var(--secondary-on-solid); } .hours-card__icon svg { width: 1.375rem; height: 1.375rem; fill: currentColor; } .hours-card h2 { font-size: var(--size-2); font-weight: var(--weight-heading); line-height: var(--leading-display); color: var(--text); margin: 0; } .hours-card p { margin: 0; font-size: var(--size-0); line-height: var(--leading-body); } /* =========================================================================== * ACCREDITATION STRIP — band 1. 209px tall, sky ground, flush (no band * padding); a 1px mid hairline top and bottom. Copy left, AGPAL badge right * at its natural 250x94. * ======================================================================== */ .accred { background: var(--tc-sky); border-top: var(--border-width-s) solid var(--tc-mid); border-bottom: var(--border-width-s) solid var(--tc-mid); } .accred__inner { min-height: 8rem; /* live content is 128px tall */ } /* MEASURED: live holds the logo beside the copy to 1080 and folds at 1024. * `flex: 1 1 auto` takes its basis from the content, and the paragraph's * max-width made that basis 1000px -- so the row needed 1000 + 250 + gap and * wrapped at ~1300, growing the band from 210px to 294px. A percentage basis * shrinks; the max-width still caps it at live's width. */ .accred h2 { font-size: var(--size-2); font-weight: var(--weight-heavy); line-height: var(--leading-display); color: var(--tc-vivid); margin: 0 0 var(--space-2xs); } .accred p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); max-width: 62.5rem; } .accred img { width: 15.625rem; height: auto; flex: none; } /* MEASURED: live paints the AGPAL symbol 250x94, at its natural size. The old 19.9375rem/319px was the HEADER logo's width, mis-copied -- 28% too wide at every width >= 1024. */ /* RE-MEASURED 2026-09-18 from captures at 1024 and 768: live keeps the logo * BESIDE the copy through the whole tablet range, shrinking it 250 -> 165px, * and only folds it underneath on phones. (An earlier note had the fold at * 1024; the captures show otherwise.) `flex-wrap: wrap` only PERMITS a fold, * so the phone fold is forced by giving the copy the full row. */ /* Live shrinks the logo THROUGH the folded range -- 250px at 1024 down to * 165px at 768. One definition, used by both rules below. */ :root { --accred-logo-w: clamp(10.3125rem, 22vw, 15.625rem); } @media (max-width: 64rem) and (min-width: 48rem) { .accred img { width: var(--accred-logo-w); } /* live 165-250px */ } /* =========================================================================== * ABOUT — band 2. 1141px. Eyebrow, 57.7px title, a 700px copy column indented * to x=100 for the button, then a three-up row of feature panels 418px tall: * an outlined card, a translucent card holding an inner card, and a * dot-grid panel. * ======================================================================== */ .about__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); } .about__body { margin-top: var(--space-inset-m); margin-left: var(--space-indent); max-width: 62rem; } /* live 50px top, 55px indent, 992px wide */ .about__body p { font-size: var(--size-1); line-height: var(--leading-body); margin: 0; } .about__body p + p { margin-top: var(--space-xs); } .about .btn { margin-top: var(--space-m); margin-left: var(--space-indent); } /* live x=100 within a 45px gutter */ .about__panels { margin-top: var(--space-inset-m); /* live 50px */ min-height: 26.125rem; /* live 418px */ display: grid; grid-template-columns: minmax(0, 315fr) minmax(0, 314fr) minmax(0, 681fr); /* live, of 1350 */ gap: var(--space-s); align-items: stretch; } .panel { border-radius: var(--radius-l); padding: var(--space-m) var(--space-m); /* live 30px inline */ display: flex; flex-direction: column; justify-content: center; gap: var(--space-m); } .panel--outline { background: var(--surface); border: var(--border-width-s) solid var(--secondary-line); } .panel--tint { background: color-mix(in srgb, var(--tc-mid) 31%, transparent); justify-content: flex-start; } /* live: the card hangs 30px from the top, not centred */ /* Live: a 154deg gradient on the element, with the dot-grid texture on a * ::before at OPACITY 0.06 -- barely perceptible. Painting the texture * directly at full strength turns a whisper into a dominant pattern, which is * exactly what the first pass did. */ .panel--grid { position: relative; isolation: isolate; background-image: linear-gradient(154deg, var(--surface) 32%, color-mix(in srgb, var(--tc-mid) 72%, transparent) 100%); /* OWNER'S CALL (2026-09-18): brand row and copy sit as ONE block centred in * the panel, 80px apart (live's own gap is 75). space-between had pinned * them to opposite edges, which opened a hole in the middle -- ~95px on * desktop and ~160px on a phone, where the panel is 477px tall. */ justify-content: center; gap: var(--space-2xl); } .panel--grid h3 { font-size: var(--size-2); } .panel--grid .panel__item { gap: var(--space-xs); } /* /about: the same three panels, 466px tall, holding a Telephone Calls card * (406px) and the practice team. */ .about__panels--tall { min-height: 29.125rem; } .about__panels--tall .panel__card { min-height: 25.375rem; } /* These panels' copy is 18.56px (--step-1) like every other panel -- MEASURED * off live's DOM. A step-0 override sat here briefly, inferred from how the * text wrapped in a screenshot rather than measured; the owner spotted it. */ .panel__brand-text { display: flex; flex-direction: column; } .panel__brand-sub { font-size: var(--size-0); font-weight: var(--weight-body); line-height: var(--leading-body); text-transform: uppercase; color: var(--text); } /* live: Outfit 16.5 / 400 */ .panel--grid .panel__team { gap: 0; max-width: 33.75rem; } /* live 540px, so the nurses line wraps where live's does */ .panel__team .panel__note { max-width: 28rem; } /* live 447px */ /* on /about the team block follows the brand row ~85px down; it is NOT pinned * to the panel's bottom edge the way the homepage's copy is */ .about__panels--tall .panel--grid { justify-content: flex-start; gap: var(--space-2xl); } .panel__team .panel__note { margin-top: var(--space-xs); } /* live ~15px between the title and each paragraph */ /* live 24.75px, a step above the outline panel's */ .panel--grid::before { content: ""; position: absolute; inset: 0; z-index: var(--layer-behind); opacity: 0.06; border-radius: inherit; background-image: url("/assets/images/dot-grid.8e4544bf8b.png"); background-repeat: no-repeat; background-size: cover; background-position: 50% 100%; } .panel__item { display: flex; flex-direction: column; gap: var(--space-2xs); } .panel__icon { color: var(--tc-mid); } .panel__icon svg { width: 2.1875rem; height: 2.1875rem; fill: currentColor; } /* 35px */ .panel h3 { font-size: var(--size-1); font-weight: var(--weight-heading); line-height: var(--leading-display); color: var(--brand-on-soft); margin: 0; } .panel p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); } /* The inner card the tint panel holds — live 254x316, ground, 20px radius, * 20px padding, tag pinned to the top and the copy to the bottom. The shadow * is live's hard-edged "second sheet" (0 15px 0 -6px), not a soft drop. */ .panel__card { background: var(--surface); border-radius: var(--radius-l); padding: var(--space-s); min-height: 19.75rem; /* live 316px */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); box-shadow: 0 15px 0 -6px color-mix(in srgb, black 19%, transparent); } .panel__card .tag { margin-bottom: auto; } .panel__card h3 { font-size: var(--size-2); } .tag { display: inline-block; padding: var(--space-3xs) var(--space-2xs); /* live 4px 10px */ border: var(--border-width-s) solid var(--brand-line); border-radius: var(--radius-xs); font-family: var(--font-accent); font-size: var(--size-0); /* live 16.5px on a 1.2 leading: 30px tall with the 4px padding */ font-weight: var(--weight-medium); line-height: var(--leading-display); text-transform: uppercase; color: var(--brand-on-soft); } /* The dot-grid panel's brand row and its two ticked labels. */ .panel__brand { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } .panel__brand img { width: 4.375rem; height: 4.375rem; } /* 70px */ .panel__brand-name { font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heading); color: var(--brand-on-soft); } .panel__ticks { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-left: auto; } .panel__tick { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--size-0); } .panel__tick svg { width: 0.875rem; height: 0.875rem; fill: var(--secondary-on-soft); flex: none; } /* =========================================================================== * WHY — band 3. 1246px. Left: a 540x637 SKY ARCH with a 540x675 cut-out PNG * standing in front of it and overhanging the arch top by 38px. Right: three * 700x226 rows separated by 1px hairlines. * * The photo is a transparent-background cut-out, so it is an over the * arch rather than a background on it. Live hides the arch below 1024 * (elementor-hidden-tablet) and keeps the photo. * ======================================================================== */ .why__head { display: grid; grid-template-columns: minmax(0, 639fr) minmax(0, 691fr); /* live, of 1350 */ gap: var(--space-s); align-items: start; padding-bottom: var(--space-inset-m); /* live 50px */ min-height: 16.75rem; /* live head block is 268px */ } .why__head-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); } .why__head-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-m); text-align: right; padding: var(--space-inset-m) 0 0 var(--space-inset-head); /* live 50px top, 100px inset */ } .why__head-side p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); } .why__cols { margin-top: 0; display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 790fr); /* live, of 1350 */ gap: var(--space-s); align-items: start; } .why__media { position: relative; display: flex; align-items: flex-end; justify-content: center; } /* MEASURED on live: the arch is 637px behind a 675px photo, both bottom- * aligned -- so its top sits 38px BELOW the image top and the person's head * overhangs it. That 38px is the whole point of the composition. * * It was stated as a fixed 637px while the photo scales with the column, so * the relationship only held at 1440: by 1120 the photo was 521px and the * arch stood 116px ABOVE it, poking into the row above. Express the ratio * instead (637/675 = 94.4%), so the head-room scales with the image. */ .why__arch { position: absolute; left: 0; right: 0; bottom: 0; height: 94.4%; background: var(--tc-sky); border-radius: 500px 500px 10px 10px; } .why__photo { position: relative; display: block; width: 100%; height: auto; border-radius: var(--radius-l); } .why__list { display: flex; flex-direction: column; gap: var(--space-s); padding-left: var(--space-inset-list); } /* live 90px inset, 20px rows */ .why__item { min-height: 14.125rem; /* live 226px per row at 1440 */ justify-content: center; padding-block: var(--space-m); /* live rules every row top AND bottom, so the 20px gap reads as a pair of hairlines */ border-block: var(--border-width-s) solid var(--tc-mid); display: flex; flex-direction: column; gap: var(--space-2xs); } .why__item-icon { color: var(--tc-mid); } .why__item-icon svg { width: 2.1875rem; height: 2.1875rem; fill: currentColor; } .why__item h3 { font-size: var(--size-2); font-weight: var(--weight-heading); line-height: var(--leading-display); color: var(--brand-on-soft); margin: 0; } .why__item p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); } /* =========================================================================== * SERVICES — band 4. 1355px. A single 1340x1185 sky card with a 10px radius * inside a 1500px shell, holding a centred head and then a four-column row: * a ticked services list in a ground card, and three photo+copy columns. * ======================================================================== */ /* Live: the band pads 50px top and 120px bottom with a 50px inline gutter, * and holds one 1340x1185 sky card whose inner pads 80px on every side. */ .services { padding-block: var(--space-inset-m) var(--space-3xl); } .services .u-container { padding-inline: var(--space-inset-m); } /* live 50px */ .services__card { background: var(--tc-sky); border-radius: var(--radius-s); padding: var(--space-2xl); /* live 80px */ } /* RE-MEASURED 2026-09-18: live stacks tag / title / lede 20px apart and leaves * 45px between the lede and the cards. --space-s is the 20px token at 1440 * (--space-m is 30, the value that once made this head 20px too tall). */ .services__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); margin-block-end: var(--space-l); } /* Scoped to :not(.section-title) so this cannot outrank the title's own size * -- `.services__head p` and `.section-title` differ by one element in * specificity, and this rule is later, so an unscoped version silently wins. */ /* OWNER'S CALL (2026-09-18): two lines -- "Everything You Need / for Better * Health" -- as in the reference. Live's box is 43% of the card, so live itself * flips between two lines (1700, 2223) and three (1440, 1920) as the font and * the box scale at different rates. A cap in em tracks the title's own size, so * the break holds at every width: line one is ~9.3em, and adding "for" is ~11. */ .services__head .section-title { max-width: 10em; } .services__head p:not([class]), .services__head p.services__lede { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); max-width: 42.0625rem; /* live 673px */ } .services__grid { margin-top: var(--space-s); /* live 20px */ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); /* live 30px */ align-items: start; } .services__list { background: var(--surface); border-radius: var(--radius-s); padding: var(--space-l); /* live 40px */ list-style: none; margin: 0; display: flex; flex-direction: column; gap: calc(var(--space-3xs) * 1.5); /* live 7-8px: a 35.5px pitch on 27.8px lines */ } .services__list li { display: flex; gap: var(--space-2xs); font-size: var(--size-1); line-height: var(--leading-body); } .services__list svg { width: 0.9375rem; height: 0.9375rem; fill: var(--secondary-on-soft); flex: none; margin-top: var(--space-2xs); } /* live 0.45em, 8.4px at 1440 */ /* live: 40px from the photo to the title, then the copy tucked 5px under it */ .service { display: flex; flex-direction: column; gap: var(--space-3xs); text-align: center; } .service img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-l); /* live 20px... */ display: block; } .service:first-of-type img { border-radius: 10px; } /* ...except the first photo, which live leaves at 10px */ .service h3 { font-size: var(--size-1); font-weight: var(--weight-heading); line-height: var(--leading-snug); color: var(--brand-on-soft); margin: var(--space-l) 0 0; /* live 40px under the photo */ } .service p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); } /* =========================================================================== * CONTACT — band 5. 387px, 80px block padding (not 120 — measured). Left: * eyebrow, 33px bright-blue title, pill. Right: two 308x226 sky cards. * ======================================================================== */ .contact { padding-block: var(--space-2xl); /* live 80px */ background: var(--surface); border-top: var(--border-width-s) solid var(--tc-mid); } .contact__inner { display: grid; /* live: the first card starts flush at x=720, the second 60px after it * (720-1028, 1088-1396). The 60fr track IS that gap. */ grid-template-columns: minmax(0, 675fr) minmax(0, 308fr) minmax(0, 60fr) minmax(0, 308fr); gap: 0; align-items: center; } .contact__inner > .contact-card:last-child { grid-column: 4; } .contact__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .contact__copy .band-title { max-width: 42.1875rem; } /* live 675px, one line */ .contact-card { min-height: 14.125rem; /* live 226px */ background: var(--tc-sky); border-radius: var(--radius-s); padding: var(--space-l); /* live 40px */ display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%; justify-content: center; } .contact-card__icon { color: var(--tc-mid); } .contact-card__icon svg { width: 2.1875rem; height: 2.1875rem; fill: currentColor; } .contact-card h2 { font-size: var(--size-1); font-weight: var(--weight-heading); line-height: var(--leading-display); color: var(--brand-on-soft); margin: 0; } .contact-card p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); } /* =========================================================================== * FOOTER — 527px: a 462px ground panel in four columns (logo+blurb+social, * Quick Links, Working Hours, map) over a 65px navy bar. * ======================================================================== */ .site-footer { background: var(--surface); border-top: var(--border-width-s) solid var(--secondary-line); } .site-footer__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; /* live: four flush 338px columns (45 / 383 / 720 / 1058) */ padding-block: var(--space-2xl); /* live 80px */ align-items: start; } /* Live centres the Quick Links block inside its column (heading at x=498 of a * column starting at 383); the other three columns are left-aligned. */ .site-footer__inner > :nth-child(2) { justify-self: center; } /* Live's columns are a fixed 301px tall, which is what holds the panel at * 462px whatever the column contents come to. */ .site-footer__inner > * { min-height: 18.8125rem; } /* OWNER'S CALL (2026-09-18): the logo's visible top lines up with the column * headings and the map. The PNG carries 12px of transparent padding above the * mark (alpha bbox 12..88 of 101), which is 11.6px at this 338px width, so the * box was level with the map but the MARK sat visibly lower. Pulled up by * exactly that padding -- tied to the asset, so a literal rather than a token. */ .site-footer__logo { display: block; } .site-footer__logo img { width: 21.125rem; max-width: 100%; height: auto; display: block; margin-top: calc(-1 * var(--space-2xs)); } /* 338px wide; live pulls it up 11.6px */ .site-footer__blurb { margin: var(--space-m) 0 0; font-size: var(--size-0); line-height: var(--leading-body); } .site-footer__social { display: inline-flex; margin-top: var(--space-m); color: var(--brand-on-soft); } .site-footer__social svg { width: 1.875rem; height: 1.875rem; fill: currentColor; } /* 30px */ .site-footer h2 { font-family: var(--font-heading); font-size: var(--size-1); font-weight: var(--weight-heading); /* Leading 1 with the cap-height offset taken off the top, so the LETTERS * start on the column's top edge with the logo mark and the map. The bottom * margin gives back what the 1.5 leading used to occupy, so the links and * hours below have not moved. The trim (3xs) and the give-back (s + xs) * are on the space scale; live's were -0.14em and 20px + 0.64em. */ line-height: 1; color: var(--brand-on-soft); margin: calc(-1 * var(--space-3xs)) 0 calc(var(--space-s) + var(--space-xs)); } .site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } /* the 35px pitch is the line-height alone */ .site-footer__links a { font-size: var(--size-0); font-weight: var(--weight-medium); line-height: var(--leading-nav); /* live rows are 35px apart at 16.5px */ color: var(--tc-ink-soft); text-decoration: none; } .site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--secondary-on-soft); text-decoration: underline; } .site-footer__links a.active, .site-footer__links a[aria-current="page"] { color: var(--secondary-on-soft); } .site-footer__hours p { margin: 0; font-size: var(--size-0); line-height: var(--leading-body); } .site-footer__hours em { display: block; margin-top: var(--space-xs); } /* The hours come from Rails' opening_hours_html tag: a two-column table whose * day groupings (Mon–Fri, "Sat, Sun") Rails computes from the data. Laid out as * the two text lines it replaced -- bold label and colon, then the times -- with * none of the template's cell padding or row rules. The hero hours card centres * the block as it centred the old paragraph. */ .site-footer__hours .hours-table, .hours-card .hours-table { width: auto; margin-block: 0; font-size: var(--size-0); line-height: var(--leading-body); } .site-footer__hours .hours-table td, .hours-card .hours-table td { padding: 0; border: 0; } .site-footer__hours .hours-table td:first-child, .hours-card .hours-table td:first-child { padding-inline-end: var(--space-3xs); } .site-footer__hours .hours-table td:first-child::after, .hours-card .hours-table td:first-child::after { content: ":"; } .site-footer__hours .hours-table td:first-child { font-weight: var(--weight-heading); } .hours-card .hours-table { margin-inline: auto; } .site-footer__map { width: 100%; max-width: 21.125rem; /* live 338px */ aspect-ratio: 338 / 245; border: 0; border-radius: var(--radius-xs); display: block; } /* OWNER'S CALL (2026-09-18): more air than live's 20px bar. One 30px unit * (--space-l) is used for the bar's padding AND either side of the rule, so * copyright | credit reads as evenly spaced instead of three different gaps. */ .site-footer__bar { background: var(--tertiary-solid); color: var(--tertiary-on-solid); padding-block: var(--space-m); } .site-footer__bar-inner { display: flex; align-items: center; justify-content: flex-start; /* copyright | credit on the left; legal links pushed right by their own auto margin */ gap: var(--space-xs) var(--space-m); /* rows (when it wraps) / columns */ flex-wrap: wrap; } .site-footer__bar p, .site-footer__bar a { font-size: var(--size--1); line-height: var(--leading-body); margin: 0; color: var(--tertiary-on-solid); } /* Specificity: `.site-footer__bar p { margin: 0 }` is (0,1,1) and was beating a * bare `.site-footer__legal` (0,1,0), so the auto margin never applied and the * links sat on the LEFT after the credit. Two classes puts them back right. */ .site-footer__bar .site-footer__legal { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; } /* 17px either side of the divider; live has 24, ours had 10 */ .site-footer__legal a { text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } /* hover: the light brand blue (9.6:1 on the navy), with the underline kept so * the state never rests on colour alone */ .site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--tc-mid); text-decoration: underline; text-underline-offset: 0.2em; } .site-footer__legal span { color: var(--tc-mid); font-family: "Open Sans", var(--font-body); font-weight: var(--weight-medium); } /* Live runs the credit straight after the copyright, behind a 1px white rule -- * not centred in the bar. */ .powered-by { display: inline-flex; align-items: center; gap: var(--space-xs); padding-left: var(--space-m); border-left: var(--border-width-s) solid color-mix(in srgb, var(--tertiary-on-solid) 45%, transparent); } .powered-by span { font-size: var(--size--2); color: var(--tc-sky); } .powered-by a { display: block; transition: opacity var(--duration-fast) var(--ease-out); } .powered-by a:hover, .powered-by a:focus-visible { opacity: 0.8; } .powered-by img { width: 4.6875rem; height: auto; display: block; } /* 75px */ /* =========================================================================== * ENTRANCE REVEALS — one-way, IntersectionObserver, short directional travel. * NOT the template's scroll-linked .reveal, which plays backwards on scroll-up. * 26px vertical / 18px horizontal, 760ms ease-out. * ======================================================================== */ [data-reveal] { opacity: 0; transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal="up"] { transform: translateY(26px); } [data-reveal="down"] { transform: translateY(-26px); } [data-reveal="left"] { transform: translateX(-18px); } [data-reveal="right"] { transform: translateX(18px); } [data-reveal="fade"] { transform: none; } [data-reveal][data-revealed] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* =========================================================================== * RESPONSIVE * * Live switches to an Elementor tablet layout at 1024 and a mobile one at 767. * Transcribed from measurements at those widths — NOT scaled desktop. * * Every track above is stated in `fr`, never px, so nothing can refuse to * shrink between the breakpoints. The band-scoped collapses are restated at * the END of the stylesheet so they win on source order as well as * specificity. * ======================================================================== */ @media (min-width: 768px) and (max-width: 1080px) { /* Tablet-only floors: measured at 1024 and NOT true at 390, so they are * bounded rather than left to leak down through the mobile block. */ .about__panels .panel--grid { min-height: 27.25rem; } /* live 436px */ .about__panels .panel--outline, .about__panels .panel--tint { min-height: 26.125rem; } /* live 418px */ } @media (max-width: 1080px) { /* live: header 143px, hero pads 180/50 */ :root { --hero-pad-top: calc(var(--space-3xl) + var(--space-xl)); --hero-pad-bottom: var(--space-inset-m); --header-h: 8.9375rem; } .accred { padding-block: var(--space-inset-m); } /* live @1024 is 226px tall */ /* live @1024: logo left, the menu button CENTRED in the bar, CTA right. * Ours puts the menu button beside the CTA on the right (owner, 2026-10-03; * the nav collapse itself is the 1199 block above) */ .site-header__inner { min-height: 8.9375rem; gap: var(--space-xs); } /* live 143px */ .site-logo img { width: 20.4375rem; } /* live 327px */ /* Live stacks the hero at 1024: copy above, photo below at full width * (measured 964px wide, 849 tall — a wide shallow arch). */ .hero__cols { grid-template-columns: minmax(0, 1fr); } .hero__media { margin-left: 0; min-height: 53rem; } .hero__badge { right: 0; } /* see also the 1400px guard on the base rule */ /* Live's small cards go 231x116 here — squat, so the 100px radius rounds * the whole top. Reproduced by letting the row keep three columns while * the height drops. */ /* MEASURED at 1024: live's small cards are 231x116 -- squat enough that * the fixed 100px radius exceeds half the height, so the whole top rounds * off rather than reading as an arch. The shape change is live's own, and * it falls out of stating the same fixed radius on the same box size. * height, not min-height: the base rule sets a fixed 200px. */ /* Live holds ~193px here and only goes squat at 1024 -- see the 1024 * block below. Dropping to 116 at 1080 made them squat a breakpoint * early, which is what the owner saw as "very short". */ .hero__card-photo { height: 12.0625rem; } /* live 193px at 1080 */ /* live @1024: a 2-up with the dot-grid panel full width beneath it at * 964x436, and the copy column no longer indented. */ .about__panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; row-gap: var(--space-s); } .about__panels .panel--grid { grid-column: 1 / -1; } .about__body { margin-left: 0; } .about .btn { margin-left: 0; } .why__head, .why__cols { grid-template-columns: minmax(0, 1fr); } .why__head-side { align-items: flex-start; text-align: left; padding: 0; } /* MEASURED: live drops the whole media column below 1440 -- the sky arch * carries elementor-hidden-tablet, and the cut-out photo itself measures * 0x0 at both 1024 and 390. Keeping it made this band 672px too tall. */ .why__media { display: none; } .why__list { padding-left: 0; } /* MEASURED: live hides the Open Hours card at 1024 (0x0) and brings it * back at 390 (350x181). */ .hours-card { display: none; } /* RE-MEASURED 2026-09-18 at 1024: the two photo cards stay 231px wide at the * left; they do not stretch across the row. And the hero copy is CENTRED * from the tablet layout down, not only on phones. */ .hero__cards { grid-template-columns: repeat(2, minmax(0, 14.4375rem)); justify-content: start; } /* the tall heroes only: live keeps the SHORT heroes' copy left-aligned on tablet */ .hero:not(.hero--short) .hero__copy { align-items: center; text-align: center; } .hero__lede { max-width: 100%; } .hero__facts { width: 100%; } .hero__fact-row { justify-content: center; } .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .services__card { padding-inline: var(--space-m); } .contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-s); } .contact__inner > .contact-card:last-child { grid-column: auto; } .contact__copy { grid-column: 1 / -1; } /* live @1024: a 2x2 of 447px columns, 80px block padding, bar 96px */ .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-inset-m) var(--space-s); } .site-footer__inner > :nth-child(2) { justify-self: start; } .site-footer__inner > * { min-height: 0; } .site-footer__bar { padding-block: var(--space-l); } /* live's 96px bar */ } @media (max-width: 767px) { /* live: header 210px, STACKED -- a full-width logo row above, then the * hamburger and the CTA side by side below. One row here put the CTA * 107px off the right edge at 390. */ /* --hero-pad-top: live keeps 180px here against a 210px header, which slides * the hero's pill under the header's hairline. Cleared by 30px instead. */ :root { --header-h: 13.125rem; --hero-pad-top: calc(13.125rem + var(--space-s-l)); } /* live header 210px */ .site-header__inner { flex-wrap: wrap; min-height: 13.125rem; align-content: center; row-gap: var(--space-s); } /* OWNER'S CALLS, not live's: once the header stacks, the logo is CENTRED on * its own row and the menu button and the Call button sit CENTRED TOGETHER * beneath it at one height (44px, the touch-target floor; 2026-09-18, * re-confirmed 2026-10-03). Right-aligning the pair applies only to the * one-row bar above 767. Live parks the menu left and the CTA right, with * the CTA ~9px shorter than the menu button. */ .site-header__inner { justify-content: center; column-gap: var(--space-xs); } .site-logo { flex: 1 0 100%; } .site-logo img { width: 100%; max-width: 21.9375rem; margin-inline: auto; } /* live 351px */ .nav-toggle { margin-inline: 0; } .site-header .btn { margin-left: 0; } .btn--head { min-height: 2.75rem; padding: 0 calc(var(--space-s) + var(--space-3xs)); } /* live 1.6em, 21px at 390 */ /* MEASURED at 390: live centres the hero block and the accreditation copy * (text-align: center on the display, both ledes and both fact rows). */ .hero__copy { align-items: center; text-align: center; } .hero__lede { max-width: 100%; } .hero__facts { width: 100%; } .hero__fact-row { justify-content: center; } .accred__inner { text-align: center; } .accred__copy { text-align: center; } .hero__cols { grid-template-columns: minmax(0, 1fr); } .hero__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* live 350x181 at 390 -- hidden at 1024, back here */ .hours-card { display: flex; grid-column: 1 / -1; height: 11.3125rem; } .hero__card-photo { height: 13.0625rem; } /* live 209px at 390 */ .hero__media { min-height: 29.8125rem; } /* live 477px at 390 */ /* MEASURED at 390: live's badge is 225px wide, hugging its text, and sits at * the arch's top RIGHT, 20px in from the edge and 20px down. Ours had no * width, so as a block it stretched across the arch's whole content box * (270px) and sat centred. */ .hero__badge { position: static; width: fit-content; max-width: 100%; margin: var(--space-s-l) 0 0 auto; padding-left: var(--space-2xs); } .hero__media { padding-inline: var(--space-s-l); } /* 20px at 390: the badge's inset from the arch edge */ /* live @390: 346px tall, 40px block padding, badge stacked under the copy. * The desktop min-height and the 32rem copy basis together made ours 734. */ /* live @390: 40px block padding; a centred 242px copy block with 50px * beneath it; two 177px cards at 25px padding, 50px apart. */ .contact { padding-block: var(--space-l); } .contact__inner { row-gap: var(--space-inset-m); } .contact__copy { align-items: center; text-align: center; padding-bottom: var(--space-inset-m); } .contact__copy .band-title { max-width: 100%; } .contact-card { min-height: 11.0625rem; padding: var(--space-card-pad); } /* live 177px, 25px */ .accred__inner { flex-direction: column; align-items: flex-start; min-height: 0; } .accred__copy { flex: 1 1 auto; } .accred img { width: 15.625rem; } /* live @390: the three panels stack at 337 / 312 / 477 tall */ .about__panels { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: var(--space-s); } .panel { padding: var(--space-s-l); } .panel--outline { min-height: 21.0625rem; } /* live 337px */ .panel--tint { min-height: 19.5rem; } /* live 312px */ .panel--grid { min-height: 29.8125rem; } /* live 477px */ .services__grid { grid-template-columns: minmax(0, 1fr); } .contact__inner { grid-template-columns: minmax(0, 1fr); } /* live @390: the why rows grow to 251px as the copy wraps to more lines */ .why__item { min-height: 15.6875rem; } /* live @390: four stacked columns sized by their own content * (222/212/109/245) with 50px between them, 50px block padding, bar 141px */ .site-footer__inner { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-inset-m); row-gap: var(--space-inset-m); } .site-footer__inner > * { min-height: 0; } .site-footer__bar-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); } .site-footer__bar .site-footer__legal { margin-left: 0; } /* both classes, to match the base rule */ .powered-by { padding-left: 0; border-left: 0; } .site-footer__bar { padding-block: var(--space-l); } .site-footer__bar .site-footer__bar-inner { gap: var(--space-s); } .site-footer__bar .site-footer__legal { width: 100%; justify-content: center; padding-top: var(--space-s); border-top: var(--border-width-s) solid color-mix(in srgb, var(--tertiary-on-solid) 20%, transparent); } .site-footer__bar .site-footer__bar-inner { align-items: center; text-align: center; } /* live centres the whole bar on phones */ } /* --- Late collapse restatements ---------------------------------------- * Restated here, at the end of the stylesheet, so a band-scoped rule above * cannot beat them on source order. This is the fix for the class of bug * where a mobile collapse exists but loses to a later, more specific rule. */ @media (max-width: 767px) { .hero .hero__cols, .about .about__panels, .why .why__head, .why .why__cols, .services .services__grid, .contact .contact__inner, .site-footer .site-footer__inner { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== PHASE 2 -- /services, /about, /practice-policy, /contact, /health-info ========================================================================== */ /* Live paints three band grounds plus transparent. --ground already IS * rgb(242,244,246), so the default .band needs no modifier. */ .band--ash { background: var(--surface); } .band--bare { background: transparent; } /* --- Accreditation strip ------------------------------------------------- * MEASURED: 40px block padding, not the 120px band rhythm. The paragraph is * 1011px wide on /about and /health-info but 819px on /practice-policy -- * live's own per-page override, reproduced by .accred--narrow rather than * averaged away. */ .accred { padding-block: var(--space-l); } /* MEASURED 40px, both pages */ .accred__inner { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; justify-content: space-between; } /* Live puts the logo on the RIGHT (measured x=1145 of 1350). Reordered * visually only -- the DOM keeps heading -> prose -> logo, which is the * sensible reading order. */ .accred__inner img { order: 2; } .accred__copy { order: 1; } @media (max-width: 29.9375rem) { /* live keeps the logo at 250px even at 390 and lets it sit above */ .accred__inner { gap: var(--space-xs); } } .accred__inner img { flex: none; width: 15.625rem; height: auto; } /* live 250px */ /* Live shrinks the logo through the folded range (250px at 1024 -> 165px at * 768). This layer is appended after the base one, so the size has to be * restated here or the flat 250px above wins at equal specificity. */ @media (max-width: 64rem) and (min-width: 48rem) { .accred__inner img { width: var(--accred-logo-w); } } /* `flex: 1 1 30rem` sets the basis on the MAIN axis, so once .accred__inner * wraps to a column at narrow widths the 30rem became a 480px HEIGHT and the * band ran 676px against live's 368. Live stays row-direction all the way to * 390 with the logo at its natural 250x94, so keep the row and let the copy * take the remaining width. */ .accred__copy { flex: 1 1 60%; min-width: 0; max-width: 63.1875rem; } /* live 1011px; % basis so it shrinks before wrapping */ /* The inner pages' strip title is the homepage's

in a : live sets * both at Lato 24.75 / 800. It had drifted to Karla at 20.9px. / .accredtitle { display: block; font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heavy); line-height: var(--leading-display); margin-block-end: var(--space-2xs); } .accred--narrow .accredcopy { max-width: 51.1875rem; } / live 819px / / RE-MEASURED 2026-09-18 from captures at 1024 and 768: live keeps the logo * BESIDE the copy through the whole tablet range, shrinking it 250 -> 165px, * and only folds it underneath on phones. (An earlier note had the fold at * 1024; the captures show otherwise.) `flex-wrap: wrap` only PERMITS a fold, * so the phone fold is forced by giving the copy the full row. / @media (min-width: 48rem) { .accredinner { flex-wrap: nowrap; } } @media (max-width: 47.9375rem) { .accredinner { flex-wrap: wrap; } .accredcopy { flex: 1 1 100%; max-width: none; } } .accred--narrow .accredtitle { margin-block-end: var(--space-xs); } .accred--narrow .accredinner { align-items: flex-start; } / --- Hero variants ------------------------------------------------------- * /about and /practice-policy use a shorter hero with a plain (un-arched) * photo, unlike the homepage and /services which carry the arch crop. / / MEASURED: /about's hero content starts at y=251 under a 161px header, so * the band carries ~250px of top padding and ~119 bottom, and its height is * set by the 670px photo rather than by the copy. / / MEASURED: live's short hero pads 150px at 1440 and 60px at 390 -- it DOES * scale, unlike the band rhythm. Holding 250px to 390 cost band0 +241px. / .hero--short .heroinner { padding-block: var(--space-hero-top) var(--space-3xl); } / /about: live 250 / 119 / / RE-MEASURED 2026-09-18: the arch starts at y=271 and runs to the band's * bottom edge (271 + 680 = 951), so the band pads 270px top and NOTHING at the * bottom. * The ground carries the same three radial washes as /health-info's hero. / .band--ash.hero--short .heroinner { padding-block: calc(var(--space-hero-top) + var(--space-s)) 0; } / live 270 / / The copy centres on the arch LESS a 120px foot -- which is why it rides high * on /practice-policy (tag 32px below the arch top) and lower on /health-info, * where there is no CTA and the block is shorter. One rule gives both. / .band--ash.hero--short .herocols--about { align-items: center; } .band--ash.hero--short .herocopy { padding-bottom: var(--space-3xl); } .herocols--about .section-title.section-title--narrow { max-width: 31.625rem; } / /health-info: live wraps at 506px / .band--ash.hero--short { background-image: radial-gradient(1100px 800px at 85% 40%, color-mix(in srgb, var(--tc-vivid) 30%, transparent), transparent 48%), radial-gradient(1200px 900px at 70% 55%, color-mix(in srgb, var(--tc-mid) 22%, transparent), transparent 72%), radial-gradient(1300px 950px at 25% 50%, color-mix(in srgb, var(--tc-sky) 12%, transparent), transparent 78%); } @media (max-width: 47.9375rem) { / Both selectors restated: a media query does NOT raise specificity, so a * bare .hero--short (0,1,0) loses to .band--ash.hero--short (0,2,0) above * and practice-policy kept its desktop padding at 390. / / DELIBERATE DIVERGENCE (2026-09-18). Live pads these heroes 60px at 390 * while its transparent header is 210px tall, so on live's own phone * layout the tag and the first line of the title sit UNDERNEATH the logo * and the Call button -- unreadable. Reproducing that faithfully shipped * the same collision here. The copy now starts a clear 30px below the * header instead; the 60px bottom is live's. / .hero--short .heroinner, .band--ash.hero--short .heroinner { padding-block: calc(var(--header-h) + var(--space-s-l)) var(--space-block); } / bottom: live 60 at 390 / .band--ash.hero--short .herocopy { padding-bottom: 0; } } / MEASURED at 1440: /about and /practice-policy split their hero 595|595 * inside a 1290px inner -- NOT the homepage's 700|570. The copy column drives * how the title and lede wrap, so getting it wrong shortens the whole band. / .herocols--about { align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-inset-head); / live 100px between the two 595px columns / / width:100% is load-bearing: this is a flex item with auto margins, so * without it the grid shrink-wraps its (now capped) copy and the whole * hero narrows. / width: 100%; max-width: 80.625rem; margin-inline: auto; / live 1290px inner / } .herocols--about .herolede { max-width: 33.125rem; margin-top: var(--space-m); } / live 530px, 30px under the title / .herocols--about .section-title { margin-top: var(--space-l); max-width: 36.5625rem; } / live 40px under the tag, 585px / .herocols--about .herocta { margin-block-start: var(--space-2xs); } / + the button's own 40px = live's ~50px / .heromedia-plain { display: flex; justify-content: flex-end; } .heromedia-plain img { width: 100%; height: auto; max-width: 37.1875rem; border-radius: 500px 500px 0 0; } / live 595px wide, arched top / / --- /about hero --------------------------------------------------------- * MEASURED at 1440: 595px copy | 595px photo inside a 1290px inner, with a * 250x340 portrait overlapping the photo's right edge by 209px. The band * carries a radial gradient, not a flat ground. The portrait's radius is * asymmetric (flat on the left edge where it meets the photo). / .about-hero { background: radial-gradient(at 100% 50%, var(--tc-mid) 0%, color-mix(in srgb, var(--tc-mid) 20%, transparent) 40%); } .about-heromedia { position: relative; } / ONE rule: an earlier `height: 41.875rem` and a later `height: auto` sat at * equal specificity, so auto won and the photo rendered 714px against live's * 670 -- which is what closed up the space under the hero. / .about-herophoto { / RE-MEASURED 2026-09-18: the arch is 500x670 and sits hard LEFT in its * 595px column (x=770) -- it does not fill the column. / width: 84%; height: auto; aspect-ratio: 500 / 670; max-height: 41.875rem; object-fit: cover; / live 670px at 1440 / border-radius: 500px 500px 10px 10px; } / MEASURED across 390-1440: live keeps this flush to the CONTENT edge, never * hanging off it -- it clears the viewport by 1px at every width below 1440, * not by the 60px a negative offset gives. A -3.75rem `right` ran it 36px * off-screen from 1040 to 1400, which the geometry sweep caught. Live also * drops it 250px -> 150px below 1024. / / RE-MEASURED 2026-09-18 at 1440: the 250x300 portrait sits 330px down the * 670px column and hangs 41px off its right edge (x=1156-1406), overlapping the * arch by ~115px. The overhang is taken out of the gutter, less 5px, so it can * never reach the viewport edge however narrow the gutter gets. / .about-heroportrait { position: absolute; top: 49.25%; / 330 of 670 / right: calc(-1 (var(--space-gutter) - var(--space-3xs))); width: 42%; max-width: 15.625rem; height: auto; /* live 250px of 595 / border-radius: 20px 20px 20px 0; } / Below the two-column breakpoint the overlap has nothing to overlap, so the * portrait returns to the flow rather than hanging off the photo. / @media (max-width: 64rem) { .about-heroportrait { width: 9.375rem; } / live drops to 150px / } .herosep--wide { display: inline; } .herocta { margin-block-start: var(--space-m); } / --- /services ----------------------------------------------------------- * MEASURED at 1440: one four-track grid, 273px columns inside a 1180px inner. * Column 1 is the checklist, columns 2-4 the tiles. Tracks are fr-based, not * the literal 273px -- a px track is what broke eight pages between 1040 and * 1380 before, and the playbook bans them in the site layer. / / MEASURED: live's band carries 50px top + 120px bottom on the outer con AND * 80px block on the inner -- 130 top / 200 bottom in total, not the 120/120 * band rhythm. The gap this closed was -372px. / .svc-all { padding-block: calc(var(--space-3xl) + var(--space-2xs)) calc(var(--space-3xl) + var(--space-2xl)); } / 130 / 200 / / MEASURED: live caps the title at 507px so it wraps to THREE lines (198px * tall), and the aside at 673px. Left unconstrained they render one line and * the band comes up ~200px short -- the same trap as the homepage's services * title. Both are left-aligned, not centred. / .svc-grid { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } / MEASURED: live sets the checklist items and the aside prose at 18.56px * (--step-1), not the 16.5px body default. Across a four-track grid that one * step was most of a 264px band shortfall. The phone link stays at 16.5. / / MEASURED: the checklist column is a CARD -- rgb(242,244,246) ground, 10px * radius, 40px padding. Missing it left the column 213px short and the band * visibly wrong, not merely mismeasured. / .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); font-size: var(--size-1); } .check-list li { display: flex; gap: var(--space-2xs); align-items: flex-start; } .check-list svg { flex: none; width: 0.9375rem; height: 0.9375rem; fill: var(--tc-mid); margin-block-start: var(--space-3xs); } / live 15x15, 0.35em down / .svc-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); } .svc-tile h3 { margin-block: var(--space-xs) var(--space-3xs); font-size: var(--size-1); } .svc-tile p { font-size: var(--size-1); } / live 18.56px, not the 16.5 body default / / Live's own breakpoints: 4 -> 2 -> 1. Tracks collapse, they never squeeze. / @media (max-width: 64rem) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 39.9375rem) { .svc-grid { grid-template-columns: minmax(0, 1fr); } } / --- /about --------------------------------------------------------------/ .contact-notetitle { display: block; font-weight: var(--weight-heading); color: var(--brand-on-soft); margin-block-end: var(--space-3xs); } .team-card { background: var(--surface-raised); padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; } .team-card img { width: 100%; max-width: 15.625rem; height: auto; border-radius: var(--radius-m); } / MEASURED: the head block carries a 70px bottom gap before the card grid, * and the lede is 1122px wide (not the 960px a default max-width gives). / / live: the band's inner is 1290px (x=75), and the lede and CTA sit a further * 90px in -- the same inset the homepage's about body uses. / .doctors > .u-container { max-width: calc(80.625rem + 2 var(--space-gutter)); } .doctors .section-title { margin-block-start: var(--space-m); } .doctorslede { max-width: 70.125rem; margin-block-start: var(--space-m); margin-left: var(--space-inset-list); } .doctorslede p { font-size: var(--size-1); } .doctors .herocta { margin-block: var(--space-m) var(--space-block); margin-left: var(--space-inset-list); } /* live's 70px head gap / / MEASURED at 1440: live lays the five doctors out 3-up (410px tracks) then * 2-up (630px), each a WHITE card with 50px side padding -- not one uniform * auto-fit run. auto-fit would put 4 on the first row and orphan the fifth. * The 3/2 split is expressed in fr so no px track reaches the site layer. / .doctorsgrid { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); grid-template-columns: repeat(6, minmax(0, 1fr)); } .doctor { background: var(--surface-raised); border-radius: 10px; / live 10px / padding: var(--space-inset-m) var(--space-inset-m) var(--space-l); / live 50/50/40 / grid-column: span 2; text-align: center; / live centres every line / } .doctor:nth-child(4), .doctor:nth-child(5) { grid-column: span 3; } @media (max-width: 64rem) { .doctorsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doctor, .doctor:nth-child(4), .doctor:nth-child(5) { grid-column: auto; } } @media (max-width: 39.9375rem) { .doctorsgrid { grid-template-columns: minmax(0, 1fr); } } / Five doctors in two columns (640-1024) left the fifth beside an empty cell. * An odd last card spans the row and is centred at one column's width. / @media (min-width: 40rem) and (max-width: 64rem) { .doctor:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-m)) / 2); } } .doctor h3 { font-size: var(--size-1); color: var(--brand-on-soft); } / live sets the quals and the provider number alike: body ink, one size / .doctorquals, .doctorprovider { margin-block: 0; font-size: var(--size-1); line-height: var(--leading-snug); color: var(--text); } .doctor h3 { margin-block-end: var(--space-3xs); } / --- /practice-policy ----------------------------------------------------/ / MEASURED: 80px top / 120px bottom, a 70px gap under the head, and three * stacked radial gradients over the mist ground. / .tips { padding-block: var(--space-2xl) var(--space-3xl); / live 80/120 at 1440 / background-color: var(--surface); background-image: radial-gradient(900px 700px at 22% 22%, color-mix(in srgb, var(--tc-mid) 20%, transparent), transparent 50%), radial-gradient(1100px 850px at 45% 55%, color-mix(in srgb, var(--tc-vivid) 22%, transparent), transparent 50%), radial-gradient(1300px 950px at 28% 78%, color-mix(in srgb, var(--tc-sky) 14%, transparent), transparent 70%); } / live: title (810px) and lede (540px, from x=855) side by side over a 1px * accent rule, 64px under the title. / .tipshead { display: grid; grid-template-columns: minmax(0, 810fr) minmax(0, 540fr); align-items: start; padding-block-end: var(--space-inset-m); / live 50 at 1440 / border-bottom: var(--border-width-s) solid var(--secondary-line); } .tipslede { margin: var(--space-m) 0 0; font-size: var(--size-1); } / live sits 28px below the title's top / .tipsgrid { / live 100px between the 383px tracks; the row gap is its own token because * --space-inset-head falls to 0 at phone width, where rows still need air / display: grid; gap: var(--space-2xl) var(--space-inset-head); margin-block-start: var(--space-block); / live 70 / grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .policytitle { font-size: var(--size-1); line-height: var(--leading-body); color: var(--brand-on-soft); margin-block-end: var(--space-xs); } / live 20.6px, 14px above the copy / .policy p { font-size: var(--size-1); } .tipsphoto { width: 100%; aspect-ratio: 383 / 232; border-radius: var(--radius-m); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } @media (max-width: 64rem) { .tipsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tipshead { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 47.9375rem) { .tips { padding-block: var(--space-block) var(--space-3xl); } / live 60/120 at 390; the band rhythm scales now / .rights { padding-block: var(--space-block); } / live 60/60 at 390 / } @media (max-width: 39.9375rem) { .tipsgrid { grid-template-columns: minmax(0, 1fr); } } / MEASURED at 1440: 425px arch photo | 850px holding TWO 400px text columns, * inside the 1350px shell. The photo's radius is 350/350/15/15 -- the same * arch mechanism as the hero crops, at a third size. / .rightscols { display: grid; gap: calc(var(--space-xl) + var(--space-xs)); / live 75px: photo ends 470, text starts 545 / grid-template-columns: minmax(0, 425fr) minmax(0, 850fr); align-items: center; / live centres the text block on the photo / } .rightsphoto { width: 100%; height: 43.1875rem; object-fit: cover; / live 691px / border-radius: 350px 350px 15px 15px; } .rightstext { display: grid; gap: var(--space-inset-m); / live 50px between the columns, ~60 under the title / grid-template-columns: repeat(2, minmax(0, 1fr)); / live 400 + 400 / align-content: start; } .rightshead { grid-column: 1 / -1; margin-block-end: 0; } @media (max-width: 64rem) { .rightscols { grid-template-columns: minmax(0, 1fr); } .rightstext { grid-template-columns: minmax(0, 1fr); } .rightshead { grid-column: 1; } .rightsphoto { height: auto; aspect-ratio: 425 / 691; } } .rightstitle { font-size: var(--size-1); line-height: var(--leading-body); color: var(--brand-on-soft); margin-block-end: var(--space-s); } .rightscol p { font-size: var(--size-0); } / live sets this copy at body size / .rightscol p + p { margin-block-start: var(--space-s); } / --- /contact ------------------------------------------------------------/ / RE-BUILT 2026-09-18 from live at 1440. See the comment in contact.html. / .contact-page { background: radial-gradient(1100px 800px at 85% 40%, color-mix(in srgb, var(--tc-vivid) 30%, transparent), transparent 48%), radial-gradient(1200px 900px at 70% 55%, color-mix(in srgb, var(--tc-mid) 22%, transparent), transparent 72%), radial-gradient(1300px 950px at 25% 50%, color-mix(in srgb, var(--tc-sky) 12%, transparent), transparent 78%), var(--surface); padding-block: var(--hero-pad-top) var(--space-3xl); / live 250 / 120: it runs under the header like the hero / } .contact-pagecols { display: grid; align-items: start; grid-template-columns: minmax(0, 592fr) minmax(0, 90fr) minmax(0, 668fr); / the 90fr track IS live's gutter / } .contact-pagecols > .contact-form-wrap { grid-column: 3; } .contact-pagecopy { display: flex; flex-direction: column; align-items: flex-start; } .contact-pagecopy .section-title { margin-top: var(--space-m); } .contact-pagelede { max-width: 32.625rem; margin-block-start: var(--space-s); } / live 522px / .contact-pagelede p { margin: 0; font-size: var(--size-0); line-height: var(--leading-body); } .contact-pagelede p + p { margin-top: var(--space-xs); } / sky panel > white sheet (live's hard 0 15px 0 -6px shadow) > two gradient cards / .contact-cluster { width: 100%; margin-block-start: var(--space-inset-m); padding: var(--space-xs) var(--space-card-pad) var(--space-card-pad); / live 17 / 25 / 25 / background: var(--tc-sky); border-radius: var(--radius-l); } .contact-clustersheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); padding: var(--space-s); background: var(--surface-raised); border-radius: var(--radius-l); box-shadow: 0 15px 0 -6px color-mix(in srgb, black 19%, transparent); } .contact-mini { min-height: 11rem; / live 176px / padding: var(--space-s) var(--space-xs); display: flex; flex-direction: column; justify-content: center; gap: var(--space-3xs); border-radius: 10px; background-image: linear-gradient(var(--surface-raised) 0%, var(--tc-sky) 100%); } .contact-mini .contact-cardicon { margin-bottom: var(--space-xs); } .contact-mini h2 { margin: 0; font-size: var(--size-1); font-weight: var(--weight-heading); line-height: var(--leading-body); color: var(--brand-on-soft); } .contact-mini p { margin: 0; font-size: var(--size-1); line-height: var(--leading-body); } .contact-mini a { font-size: var(--size-0); } / the form card: white, 20px radius, 40px padding, live's soft blue drop / .contact-form-wrap { --field-bg: color-mix(in srgb, var(--tc-sky) 38%, transparent); / the fields' wells on the white card / padding: var(--space-l); background: var(--surface-raised); border-radius: var(--radius-l); box-shadow: 7px 21px 34px 0 color-mix(in srgb, var(--tc-mid) 33%, transparent); } .contact-form { display: grid; gap: var(--space-2xs); } .field { display: grid; gap: var(--space-3xs); } / colour stated: the base `label` rule uses --ink-strong, whose hue is rotated * +80deg off the brand and lands on a plum rgb(23,13,26) -- it read as pink on * the white card. Live's labels are body ink, rgb(54,59,64). / .field label { font-size: var(--size-0); font-weight: var(--weight-body); line-height: var(--leading-body); color: var(--text); } / Send is the site's standard .btn pill (owner, 2026-10-05; live's was a * full-width 3px-radius bar). Only its place in the form is stated here. / .contact-formsend { justify-self: start; margin-top: var(--space-3xs); border: 0; cursor: pointer; } .contact-note { margin-block-start: var(--space-s); padding: var(--space-xs); background: var(--tc-sky); border-left: 5px solid var(--tc-mid); } .contact-note p { margin: 0; font-size: var(--size--1); line-height: var(--leading-body); } .contact-note .contact-notetitle { font-family: var(--font-heading); font-size: var(--size-0); font-weight: var(--weight-heavy); color: var(--text); } @media (max-width: 64rem) { .contact-page { padding-block: var(--hero-pad-top) var(--space-2xl); } / --hero-pad-top is already 180px here / .contact-pagecols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-inset-m); } .contact-pagecols > .contact-form-wrap { grid-column: auto; } } @media (max-width: 29.9375rem) { .contact-clustersheet { grid-template-columns: minmax(0, 1fr); } .contact-form-wrap { padding: var(--space-s-l); } } / --- Closing CTA --------------------------------------------------------- * MEASURED: 80px block padding (not the 120px band rhythm), and two equal * columns -- 675px copy, 675px cards, inside the 1350px shell. / .closing { padding-block: var(--space-l); } / --- Narrow widths ------------------------------------------------------- * MEASURED: live drops the hero card row's hours card below 1024 on * /services, exactly as it does on the homepage. / @media (max-width: 64rem) { .heromedia-plain { justify-content: center; } } @media (max-width: 47.9375rem) { .herosep--wide { display: none; } } / The template sets `overflow-wrap: break-word` globally, which splits a long * word mid-glyph rather than pushing it to the next line. Live never does * this -- its headings wrap on word boundaries at every width. At 390 that * rendered "Comprehens / ive". Restore normal wrapping on display type; the * rest of the page keeps the template default. / .display, .section-title, h1, h2, h3 { overflow-wrap: normal; } / --- /health-info: curated resources + advice --------------------------- * Six national resources plus the practice's own after-hours service: static * health information in place of the Your Health hub, which only subscribers * get (Terrace is not one). Cards are link-led: the heading IS the link, so the whole card needs * no redundant "read more" and screen readers get one meaningful target. / .resourcesgrid { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); / Track count is stated explicitly below, not left to auto-fit: six cards * must read as 3x2, and auto-fit gave 4+2 at some widths. / } .resource-card { background: var(--surface-raised); border-radius: var(--radius-l); padding: var(--space-m); } .resource-card h3 { font-size: var(--size-1); margin-block-end: var(--space-2xs); } .resource-card h3 a { color: var(--brand-on-soft); text-decoration: underline; text-underline-offset: 0.15em; } .resource-card h3 a:hover { color: var(--tc-mid); } .adviceinner { display: grid; gap: var(--space-l); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } .adviceactions { display: flex; gap: var(--space-xs); flex-wrap: wrap; } .emergency-panel { background: var(--tertiary-solid); color: var(--tertiary-on-solid); border-radius: var(--radius-l); padding: var(--space-m); } .emergency-panel h3 { color: var(--tertiary-on-solid); font-size: var(--size-1); margin-block-end: var(--space-2xs); } .emergency-panel p + p { margin-block-start: var(--space-2xs); } .emergency-panel a { color: var(--tertiary-on-solid); text-decoration: underline; } / The resources and advice bands share one ground, so stacked they met with * 120 + 120px of nothing between them; the advice band gives its half back. / .resources + .advice { padding-block-start: 0; } .resource-card p:last-child { margin-block-end: 0; } .emergency-panelblock:last-child p:last-child { margin-block-end: 0; } .advicecopy .section-title + p { margin-block-start: var(--space-s); } .advicecopy .adviceactions { margin-block-start: var(--space-m); } / --- Corrections after owner review (2026-09-10) ------------------------- * The hero lede rendered rgb(79,86,91) against live's rgb(54,59,64) -- the * template's muted ink rather than live's body colour. It passed AA at * 6.84:1, which is exactly why the contrast gate did not catch it: the gate * asks "is this legible", not "is this live's colour". / .herolede .lede, .herolede p { color: var(--text); } / The team card's backdrop is a linear gradient on live, not a flat white * panel. Measured: linear-gradient(154deg, rgb(242,244,246) 32%, * rgba(151,202,219,0.72) 100%) on a 681x466 box with a 20px radius. / .team-card { background: linear-gradient(154deg, var(--surface) 32%, color-mix(in srgb, var(--tc-mid) 72%, transparent) 100%); border-radius: 20px; } / The trusted band carries the same three-stop radial wash as the tips band * on /practice-policy -- measured on live, and previously left flat. / .trusted { background-color: var(--surface); background-image: radial-gradient(900px 700px at 22% 22%, color-mix(in srgb, var(--tc-mid) 20%, transparent), transparent 50%), radial-gradient(1100px 850px at 45% 55%, color-mix(in srgb, var(--tc-vivid) 22%, transparent), transparent 50%), radial-gradient(1300px 950px at 28% 78%, color-mix(in srgb, var(--tc-sky) 14%, transparent), transparent 70%); } / Two colour bugs found by diffing every text colour against live (2026-09-10). * The other differences on those pages are the DOCUMENTED a11y divergence -- * live's accent rgb(2,138,190) fails AA on pale grounds, so --brand-bright is * deliberately rgb(2,107,159). These two were not that: * * - .svc-tile h3 set no colour at all and inherited rgb(23,13,26), a near * black that is in no palette here. Live uses its mid navy. * - The closing band's title rendered deep navy where live uses the accent. / .svc-tile h3 { color: var(--brand-on-soft); } .closing .section-title { color: var(--secondary-on-soft); } / Six curated resources, held at 3x2 so the rows balance -- auto-fit reflowed * them to 4+2 and 2+2+2 at intermediate widths, which reads as a mistake. / .resourcesgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 64rem) { .resourcesgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 39.9375rem) { .resourcesgrid { grid-template-columns: minmax(0, 1fr); } } / The panel now carries two headed blocks: emergency, and after hours. They * are different escalation paths and were reading as one paragraph. / .emergency-panelblock + .emergency-panelblock { margin-block-start: var(--space-s); padding-block-start: var(--space-s); border-top: var(--border-width-s) solid color-mix(in srgb, var(--tertiary-on-solid) 22%, transparent); } .emergency-panelblock h3 { margin-block-end: var(--space-3xs); } / Three more colour mismatches from the full text-colour diff (2026-09-10). * All three were MY choice of token, not live's colour: * - the accred strip's title is live's accent, not deep navy (it sits on the * sky band, where the accent still clears AA); * - the team-card tag pills carry body ink on live, not brand colour; * - "Patient Rights & Privacy" is the mid navy, not the display navy. / .accredtitle { color: var(--tc-vivid); } .rightshead { color: var(--brand-on-soft); } / ========================================================================== * PHONE ALIGNMENT — measured off live at 390 (2026-09-18). * Live's mobile layout CENTRES nearly every band's copy, and drops the section * titles from 3.5rem to 3rem (39.65px at 390). Ours had carried the desktop's * left alignment and the 46px title all the way down, so titles ran to three * lines where live's take two. At the end of the file so it wins on order. * The title SIZES need no rule here any more: the phone ratio (1.145) puts * step-7 at 41.3px and step-8 at 47.3 on a 390 screen. * ======================================================================== / @media (max-width: 47.9375rem) { .abouthead { align-items: center; text-align: center; } .aboutbody { margin-left: 0; text-align: center; } .about .btn { display: flex; width: fit-content; margin-inline: auto; } .panel--grid .panelitem { text-align: center; } .doctors .eyebrow { display: block; width: fit-content; margin-inline: auto; } .doctors .section-title, .doctorslede { text-align: center; margin-left: 0; } .doctors .herocta { margin-left: 0; display: flex; justify-content: center; } .whyhead-copy, .whyhead-side { align-items: center; text-align: center; } .whyitem { align-items: center; text-align: center; } .contactcopy { align-items: center; text-align: center; } .contact-card { align-items: center; text-align: center; } .contact-pagecopy { align-items: center; text-align: center; } .contact-mini { align-items: center; text-align: center; } / the privacy / telephone card is compact on a phone: tag, ~50px, copy -- * the desktop's 316px floor left a hole in the middle of it / .panelcard, .aboutpanels--tall .panelcard { min-height: 0; } .panelcard .tag { margin-bottom: var(--space-inset-m); } .panelticks { margin-inline: auto; } .panelbrand { justify-content: center; } / logo + name centred over the centred ticks and copy / / live's services card runs gutter to gutter at 390 (20px), not 40px in / .services .u-container { padding-inline: var(--space-gutter); } } / tablet: the /about panels drop their desktop floors, as live's do / @media (max-width: 1080px) { .aboutpanels--tall, .aboutpanels--tall .panelcard { min-height: 0; } .aboutpanels--tall .panelcard .tag { margin-bottom: var(--space-inset-m); } } / live's tablet layout (768-1024): the two hero photo cards go squat, 231x116, * so the fixed 100px radius rounds the whole top. A comment in the 1080 block * pointed at "the 1024 block below" for this, but the rule was never written. * Bounded below so it cannot reach the phone layout's 209px cards. / @media (min-width: 768px) and (max-width: 1024px) { .herocard-photo { height: 7.25rem; } / live 116px / } / Live's tablet layout takes effect AT 1024 (Elementor's breakpoint is <=1024), * and 1024 is an iPad in landscape. The inner pages' collapses were written as * max-width: 63.9375rem and so still showed the desktop layout at exactly 1024; * they are now max-width: 64rem throughout. / / /about on a phone: the team panel is sized by its content -- the homepage's * 477px floor left ~100px of empty gradient under the confidentiality line. / @media (max-width: 767px) { .aboutpanels--tall .panel--grid { min-height: 0; gap: var(--space-l); } } / ========================================================================== * LEGAL PAGES (/privacy-policy, /terms-and-conditions) -- shell measured off * live 2026-09-18. Live sizes the photo in VIEWPORT HEIGHT (its section is * 100vh, the card starts at 70vh: 1000/701 in a 1000px-tall window, 1128/790 * in the owner's), so the overlap is stated as 30% of the photo's height and * holds at any window size. Clamped so a very short or very tall window cannot * crush the photo or push the policy a screen and a half down. * ======================================================================== / .legal { --legal-photo-h: clamp(30rem, 100svh, 70rem); } .legalphoto { display: block; width: 100%; height: var(--legal-photo-h); / --legal-focus is set per page on the : both photos are landscape, so * a tall phone crop would otherwise show the blank wall between the people / object-fit: cover; object-position: var(--legal-focus, 50%) 0; } @media (max-width: 767px) { .legal { --legal-photo-h: clamp(24rem, 75svh, 36rem); } } .legalband { padding: 0 var(--space-gutter) var(--space-3xl); / live 120px under the card / } .legalcard { position: relative; max-width: 80.625rem; margin-inline: auto; / live 1290px / margin-top: calc(var(--legal-photo-h) -0.3); padding: max(var(--space-m), var(--space-inset-head)); /* live 100px; never less than 20-30 on a phone / background: var(--surface); border-radius: 10px; } / THE BAND MUST START AT THE PHOTO'S FOOT, NOT AT THE CARD'S TOP. The card's * negative margin-top is the first thing inside the band, so without a new * formatting context it COLLAPSES THROUGH the band: the whole gradient rode up * 30% with the card and sliced the photo off flat at the card's top edge -- no * straddle at all. flow-root stops the collapse, so only the card moves. * (First shipped broken: the check printed the card's position, which was * right, and never the band's, which was not.) / .legalband { position: relative; display: flow-root; } .legalcard h1 { margin: 0 0 var(--space-m); font-family: var(--font-body); font-size: var(--size-6); font-weight: var(--weight-strong); line-height: var(--leading-display); color: var(--brand-on-soft); } .legalcard h2 { margin: var(--space-m) 0 var(--space-xs); font-family: var(--font-heading); font-size: var(--size-5); font-weight: var(--weight-heading); line-height: var(--leading-display); color: var(--text); } .legalcard h3 { margin: var(--space-s) 0 var(--space-xs); font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heading); line-height: var(--leading-snug); color: var(--text); } .legalcard p, .legalcard li { font-size: var(--size-0); line-height: var(--leading-body); color: var(--text); } .legalcard p { margin: 0 0 var(--space-xs); } .legalcard .lede { font-size: var(--size-1); } .legalcard ul, .legalcard ol { margin: 0 0 var(--space-xs); padding-left: var(--space-l); } .legalcard li + li { margin-top: var(--space-3xs); } .legalcard a { color: var(--secondary-on-soft); text-decoration: underline; text-underline-offset: 0.15em; } .legalcard > :last-child { margin-bottom: 0; } / A line break that only exists on phones. OWNER'S CALL (2026-09-18): the band * title reads "Get in Touch / with Terrace Clinic" at phone width, rather than * breaking wherever the column happens to run out ("...with Terrace / Clinic"). / .br-mobile { display: none; } @media (max-width: 767px) { .br-mobile { display: inline; } } / ========================================================================== * MOBILE MENU PANEL. This had NO rules at all -- it rendered as a bare list of * blue underlined links in the page flow, pushing the hero down, with no close * icon. Built from live's (measured at 390): a full-width deep-navy panel hung * from the header's foot, OVER the page; centred white links in 51px rows * (14px 20px padding), weight 600; the menu button swaps to an X. * One departure: live leaves its inactive links dark grey on the navy, which * is close to unreadable. Every link here is white; the current page is marked * in the light brand blue with a bar, so the state is not colour alone. * No `display` on .mobile-nav itself -- that would defeat the [hidden] attribute * the script toggles. * ======================================================================== / .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--layer-nav); background: var(--brand-solid); box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--tertiary-solid) 35%, transparent); } .mobile-nav ul { list-style: none; margin: 0; padding: var(--space-2xs) 0; } .mobile-nav a { display: block; padding: var(--space-xs) var(--space-s); / live 14px 20px -> a 51px row / font-family: var(--font-heading); font-size: var(--size-1); font-weight: var(--weight-heading); line-height: var(--leading-body); text-align: center; text-decoration: none; color: var(--brand-on-solid); } .mobile-nav li + li { border-top: var(--border-width-s) solid color-mix(in srgb, var(--brand-on-solid) 12%, transparent); } .mobile-nav a:hover, .mobile-nav a:focus-visible { background: var(--tertiary-solid); } .mobile-nav a:focus-visible { outline-offset: -4px; } / inside the row: the menu clips an outset ring / .mobile-nav a.active, .mobile-nav a[aria-current="page"] { color: var(--tc-mid); box-shadow: inset 4px 0 0 var(--tc-mid); } / the button shows bars when closed, an X when open / .nav-toggleclose { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggleopen { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggleclose { display: block; } / never in the desktop header, whatever state the script left it in / @media (min-width: 75rem) { .mobile-nav { display: none; } } / 1200: the nav collapse, and partials/scripts.html / / a short drop-in; transform + opacity only, and not under reduced motion / @media (prefers-reduced-motion: no-preference) { .mobile-nav:not([hidden]) { animation: mobile-nav-in 0.22s var(--ease-out) both; transform-origin: top; } } @keyframes mobile-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } / ========================================================================== * SEAMLESS BANDS -- OWNER'S CALL (2026-09-18): "no hard cuts on the gradient * backgrounds". Each tinted band carries its own stack of radial washes (live's, * verbatim), and a wash that is still a few levels off the ground where the band * ends meets the next band's different wash as a faint straight line. Measured * before this block: 5-11 levels either side of /about's doctors band, 16 into * and 14 out of /practice-policy's WHITE rights band, 31 where the legal pages' * gradient met the footer, and a raw photo edge above it. * * Fix, once, for every band: a ::before that fades the band's top and bottom * edge to exactly --ground, so any two neighbours meet on the same colour. The * fade is one band-padding tall (120px), so it lives entirely in the padding * and never sits behind copy. z-index -1 inside an isolated band = above the * band's own washes, below its content. * The sky accreditation strip and the footer's accent rule are deliberate solid * edges (live's) and are left alone. * ======================================================================== / .hero, .about, .why, .services, .tips, .contact-page { position: relative; isolation: isolate; } .hero::before, .about::before, .why::before, .services::before, .tips::before, .contact-page::before { content: ""; position: absolute; inset: 0; z-index: var(--layer-behind); pointer-events: none; background: linear-gradient(to bottom, var(--surface) 0, transparent var(--space-3xl)), linear-gradient(to top, var(--surface) 0, transparent var(--space-3xl)); } / heroes and the contact band run UNDER the transparent header: their top wash * is the glow behind the nav, so only the foot is faded / .hero::before, .contact-page::before { background: linear-gradient(to top, var(--surface) 0, transparent var(--hero-pad-bottom, var(--space-3xl))); } / the short heroes end on a photo that sits flush on the accreditation strip -- * nothing to fade, and a fade there would wash out the arch's foot / .hero--short::before { content: none; } / flat bands that sat a few levels off the ground now share it exactly: * /about's doctors band was rgb(245,245,245) and /practice-policy's rights * band was white -- a 16-level step in and a 14-level step out / .doctors, .rights { background: var(--surface); } / legal pages: the photo's foot melts into the band's first colour instead of * ending on a raw edge, and the band's gradient lands on the ground so it runs * into the footer without a step / .legal { position: relative; } .legal::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--legal-photo-h) 0.62); height: calc(var(--legal-photo-h) * 0.38); pointer-events: none; background: linear-gradient(to bottom, transparent, var(--tc-mid)); } .legalband { background-image: linear-gradient(var(--tc-mid) 0%, var(--tc-sky) 55%, var(--surface) 100%); } /* ========================================================================== * PHONE SPACING PASS -- measured against live at 390 (2026-09-18). * accreditation strip: live runs title -> 22 -> copy -> 36 -> logo inside 40px * of padding; ours was 8 / 19 / 32 -- visibly cramped beside the airy hero. * about band: live is title -> ~22 -> body -> 34 -> CTA; ours 42 / 21 (the * desktop's 50px body offset carried down, and a tight CTA). * tint panel: its 312px floor left ~60px of empty panel under the now-compact * privacy card; it hugs the card instead. * ======================================================================== / @media (max-width: 767px) { .accred { padding-block: var(--space-inset-m); } .accred .accredinner { gap: var(--space-l); } .accred h2, .accred .accredtitle { margin-bottom: var(--space-s); } .aboutbody { margin-top: var(--space-s-l); } .about .btn { margin-top: var(--space-l); } .panel--tint, .aboutpanels .panel--tint { min-height: 0; } .herobadge { gap: var(--space-3xs); } / live keeps 3.5rem (46.3px) on the why title and the contact hero at 390; * the other section titles drop to 3rem, which plain step-7 already is. / .why .section-title, .contact-page .section-title { font-size: var(--size-8); } / live's doctor cards stay ~168px tall on phones; --space-xl is 48 here (a halved step once made ours 133) / .doctor { padding-block: var(--space-xl); } / /practice-policy on phones: live drops the tips photo, closes the items * up (147px pitch; ours ran 170) and puts the arch AFTER the rights copy. * Visual order only -- the photo is decorative to the reading order. / / Get in Touch band: live runs tag -> 30 -> title -> 30 -> button -> 50 -> * card -> 50 -> card. Ours had 17 / 17 / 80 / 40: the copy block's bottom * padding AND the row gap were both being spent under the button. / .contact .contactinner { row-gap: var(--space-xl); } .contact .contactcopy { padding-bottom: 0; gap: var(--space-l); } / Dot-grid panel: live's 477px floor left ~67px of empty panel above and * below the centred block on phones (owner: too much space). It hugs its * content now, on the same 30px the cards beside it use. / .aboutpanels .panel--grid, .panel--grid { min-height: 0; padding-block: var(--space-l); } / Stacked service tiles: live leaves ~60px from one tile's copy to the next * photo; the desktop column gutter (20px here) read as one run-on list. / .services .servicesgrid { row-gap: var(--space-xl); } .tipsphoto { display: none; } / with the photo gone, five tips in two columns (640-767) left the fifth * beside an empty cell: an odd last tip takes the whole row / .tipsgrid > .policy:nth-child(odd):nth-last-child(2) { grid-column: 1 / -1; } .tipsgrid { row-gap: var(--space-l); } .rightsmedia { order: 2; } } / =========================================================================== * SITE SEARCH * The platform component (mediflare.js) writes the box unstyled, with * mf-search* class hooks; every rule here is this site's, on its tokens. * Contract and the three placements: "Site search" in /srv/sites/CLAUDE.md. * * ONE search window at every width, the overlay mediflare.js builds: from * 768 up a centred card over a dimmed page, below 768 full screen. Two * buttons open it, one per width, swapping where the nav collapses * (1199/1200), so no width shows both and none shows neither: * 1200 and up .site-searchtrigger: the magnifier in the site's search * field (the --field-* tokens: white, the brand-mid edge, * the pill), 44px, beside the Call pill. Never wider: the * nav already needs the bar's whole middle (the links were * eased to fit at 1200), and measured 1200-1920 the bar has * at most ~30px beyond the last link's 32px clearance, so * there is no room for a word at any desktop width. * 1199 and down .site-searchopen: the magnifier beside the menu * button, on the menu button's navy square. On phones that * is the second row, with the pair; at 371 and below the * Call pill reads "Call" so the three still fit there. * * Shape: pills, like every button here (.btn, the Call pill), except the * phone and tablet trigger, which is the menu button's square. Search and * Close ARE the site's .btn: the .btn rules above list them. Focus is the * site's one ring (see the site :root under Form controls). * * The overlay and the popup are styled ONLY through :not([hidden]): a * display of their own would override [hidden] and they would never close. * ======================================================================== / :root { --target-min: 2.75rem; / 44px, the touch-target floor; the menu button's own size / --shadow-card-soft: 7px 21px 34px 0 color-mix(in srgb, var(--tc-mid) 33%, transparent); / the contact form card's drop, and the search card's / } / The desktop trigger, drawn as the field it opens: fill, edge, corner and * height are the --field-* tokens, with the glyph in the deep navy like a * nav label; the bright blue the nav hovers in, on a sky ground, when * hovered or open. The tablet and phone trigger is the menu button's twin * instead (see below). / .site-searchtrigger { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--target-min); block-size: var(--target-min); padding: 0; color: var(--brand-on-soft); background: var(--field-bg); border: var(--field-border-w) solid var(--field-border); border-radius: var(--field-radius); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } / Beside the menu button it matches it (owner, 2026-10-06): the same 44px * deep-navy square, 4px radius, white glyph, and like it no hover change. / .site-searchopen { display: none; flex: none; align-items: center; justify-content: center; inline-size: var(--target-min); block-size: var(--target-min); padding: 0; color: var(--brand-on-solid); background: var(--brand-solid); border: 0; border-radius: var(--radius-xs); cursor: pointer; } .site-searchtrigger svg, .site-searchopen svg { width: 1.375rem; height: 1.375rem; fill: currentColor; } .site-searchtrigger:hover, .site-searchtrigger[aria-expanded="true"] { color: var(--secondary-on-soft); background: var(--tc-sky); } / Which button shows where. / @media (max-width: 74.9375rem) { .site-searchtrigger { display: none; } / Beside the menu button, in its slot: the button gives up its auto * margin (it took the bar's free space) to the magnifier before it. / .site-searchopen { display: inline-flex; order: 2; margin-inline: auto 0; } .nav-toggle { margin-inline: 0; } } @media (max-width: 767px) { .site-searchopen { margin-inline: 0; } } / 371 and below the magnifier, the menu button and the full Call pill no * longer fit one row, so the pill reads "Call" and keeps the number in its * aria-label; the three stay together under the logo (owner, 2026-10-06). / @media (max-width: 23.1875rem) { .btn--headnumber { display: none; } } / Making room on the desktop bar. The magnifier is 44 plus the header's gap, * and at 1200 the bar had 27px to spare. Both the logo and the Call pill * ease on the site's existing --space-taper (0 at 1440 and up, so the wide * desktop is untouched): the logo to 227 at 1200, which is live's own logo * there (226), and the pill's inline padding by 18 each side. Measured from * 1200 to 1440 in 4px steps: the last link stays at least 32px clear of the * magnifier, and the pill stays flush with the container. / @media (min-width: 75rem) { .site-logo img { width: calc(16.25rem - 4.5 var(--space-taper)); } .btn--head { padding-inline: calc(var(--space-l) + var(--space-3xs) - 2.5 * var(--space-taper)); } } /* 768 to 775: the tablet bar is 4px short with the magnifier in it; the * logo gives up exactly what is needed, and nothing elsewhere. / @media (min-width: 768px) and (max-width: 74.9375rem) { .site-logo { flex-shrink: 1; min-width: 0; } .site-logo img { max-width: 100%; } } / The box, wherever it sits. / .mf-searchform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); align-items: center; } .mf-searchlabel, .mf-searchstatus, .mf-searchresults { grid-column: 1 / -1; } .mf-searchinput { grid-column: 1 / -1; } [data-mf-search-submit] .mf-searchinput { grid-column: auto; } / Read out, never shown: the magnifier and the placeholder say it. / .mf-searchlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } / TEXT CONTROLS: the shape, hairline and focus of every text field, the * search boxes and the contact form alike, are the --field-* tokens (Form * controls). / / Search and Close are the site's .btn (listed in its rules above); here only * the 44px floor. / .mf-searchsubmit, .mf-search-overlayclose { min-block-size: var(--target-min); white-space: nowrap; cursor: pointer; } .mf-searchstatus { margin: 0; padding-inline: var(--space-xs); font-size: var(--size--1); line-height: var(--leading-body); color: var(--text); } .mf-searchstatus:empty { display: none; } .mf-searchresults { margin: 0; padding: 0; list-style: none; } .mf-searchresults:not([hidden]) { display: flex; flex-direction: column; gap: var(--space-3xs); } .mf-searchresult { margin: 0; } .mf-searchlink { display: block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-m); color: var(--text); text-decoration: none; overflow-wrap: anywhere; transition: background var(--duration-fast) var(--ease-out); } .mf-searchlink:hover, .mf-searchlink:focus-visible { color: var(--text); background: var(--surface); } .mf-searchlink:focus-visible { outline-offset: calc(var(--focus-ring-w) -1); /* inset: a scrolling list clips an outset ring / border-radius: var(--radius-m); } / Titles are the site's card titles: Lato 700 in the deep navy, turning the * bright blue the nav and links hover in. / .mf-searchtitle { display: block; font-family: var(--font-heading); font-size: var(--size-0); font-weight: var(--weight-heading); line-height: var(--leading-snug); color: var(--brand-on-soft); transition: color var(--duration-fast) var(--ease-out); } .mf-searchlink:hover .mf-searchtitle, .mf-searchlink:focus-visible .mf-searchtitle { color: var(--secondary-on-soft); } .mf-searchexcerpt { display: block; margin-top: var(--space-3xs); font-size: var(--size--1); line-height: var(--leading-body); color: var(--text); } .mf-searchexcerpt mark { color: var(--text); background: color-mix(in oklch, var(--tc-mid) 60%, transparent); border-radius: var(--radius-xs); } / Phones: full screen, on the page's ground. Close sits alone on the * top row, at the right and above the box, so what is seen matches the * focus order (Close, the box, Search); the box and Search share the next * row at full width, and the results scroll below them, inside the overlay. * The page behind is locked by mediflare.js. Subgrid puts the box's own * children on the overlay's grid. / .mf-search-overlay:not([hidden]) { position: fixed; inset: 0; z-index: var(--layer-modal); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; / Close · box · Search on one row / grid-template-rows: auto auto minmax(0, 1fr); gap: var(--space-xs) var(--space-2xs); padding-block-start: max(var(--space-s), env(safe-area-inset-top)); padding-inline: max(var(--space-gutter), env(safe-area-inset-left)) max(var(--space-gutter), env(safe-area-inset-right)); background: var(--surface); } .mf-search-overlayheader { display: contents; } / Close is an icon, not the site's pill: a 44px × in the navy, left of the * box, as on the other sites' search windows (owner, 2026-10-06). / .mf-search-overlayclose { grid-column: 1; grid-row: 1; z-index: var(--layer-base); / above the box, which spans this row too / display: inline-flex; align-items: center; justify-content: center; inline-size: var(--target-min); block-size: var(--target-min); padding: 0; font-size: 0; color: var(--brand-on-soft); background: transparent; border: 0; border-radius: var(--radius-pill); transition: background var(--duration-fast) var(--ease-out); } .mf-search-overlayclose::before { content: ""; inline-size: 1.5rem; block-size: 1.5rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; } .mf-search-overlayclose:hover { background: color-mix(in oklch, var(--tc-mid) 45%, transparent); } .mf-search--overlay, .mf-search--overlay .mf-searchform { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: center; / the field is --field-h; Search is the .btn, up to 1.3px taller mid-range, so they centre on one line / } .mf-search--overlay .mf-searchinput { grid-column: 2; grid-row: 1; } .mf-search--overlay .mf-searchsubmit { grid-column: 3; grid-row: 1; block-size: var(--field-h); padding-block: 0; } / level with the box beside it / .mf-search--overlay .mf-searchstatus { grid-column: 1 / -1; grid-row: 2; } .mf-search--overlay .mf-searchresults { grid-column: 1 / -1; grid-row: 3; align-self: stretch; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: max(var(--space-s), env(safe-area-inset-bottom)); } .mf-search--overlay .mf-searchlink:hover, .mf-search--overlay .mf-searchlink:focus-visible { background: var(--surface-raised); } / From 768 up the same overlay is a centred card (the DocSearch pattern), * rounded like the contact form's card and on its soft blue drop, offset * from the top rather than vertically centred, so it grows downward with its * results up to the viewport, past which they scroll inside it. A press on * the dimmed page, Close or Esc closes it (mediflare.js, #249). It refines * the full-screen rules above at equal specificity, so it must stay after * them. Stacking: the backdrop is body::after at --layer-modal; the card * sits one above it, since body::after follows the overlay in tree order and * would paint over it at an equal z-index. / @media (min-width: 768px) { .mf-search-overlay:not([hidden]) { inset: var(--space-3xl) 0 auto; z-index: calc(var(--layer-modal) + 1); inline-size: calc(100% - 2 var(--space-gutter)); max-inline-size: calc(var(--measure-tight) + var(--space-3xl)); max-block-size: calc(100dvh - 2 * var(--space-3xl)); margin-inline: auto; padding: var(--space-s); border-radius: var(--radius-l); box-shadow: var(--shadow-card-soft); } .mf-search--overlay .mf-searchresults { padding-block-end: 0; } html[data-mf-search-overlay="open"] body::after { content: ""; position: fixed; inset: 0; z-index: var(--layer-modal); background: color-mix(in oklch, var(--text-strong) 50%, transparent); -webkit-backdrop-filter: blur(var(--space-3xs)); backdrop-filter: blur(var(--space-3xs)); } }

can look like an eyebrow without lying about the hierarchy: * *

Still the page's real heading, just smaller