. */
.btn--primary:hover { background: color-mix(in oklch, var(--solid), var(--mix-hover)); color: var(--on-solid); }
.btn--primary:active { background: color-mix(in oklch, var(--solid), var(--mix-active)); color: var(--on-solid); }
.btn--secondary {
background: transparent;
border-color: var(--solid);
color: var(--on-soft);
}
.btn--secondary:hover { background: var(--soft); color: var(--on-soft); }
.btn--ghost {
background: transparent;
color: var(--text-muted);
}
.btn--ghost:hover { background: var(--soft); color: var(--on-soft); }
.btn--sm { padding: var(--space-3xs) var(--space-xs); font-size: var(--size--2); }
.btn--lg { padding: var(--space-xs) var(--space-m); font-size: var(--size-0); }
/*
* ON A BRAND-COLOURED GROUND
*
* A dark band is class="is-dark" on the section: Dials works every token out
* again in the dark scheme, so the buttons above need nothing more. On a band
* painted with a brand fill (background: var(--solid)) they invert instead:
* the solid button goes to the raised surface, the outline picks up a
* translucent edge in the fill's text colour. Put .on-dark on the button or
* any ancestor.
*/
.on-dark .btn--primary,
.btn--primary.on-dark {
background: var(--surface-raised);
color: var(--on-soft);
}
.on-dark .btn--primary:hover,
.btn--primary.on-dark:hover {
background: var(--soft);
color: var(--on-soft);
}
.on-dark .btn--secondary,
.btn--secondary.on-dark {
color: var(--on-solid);
border-color: color-mix(in oklab, var(--on-solid) 40%, transparent);
}
.on-dark .btn--secondary:hover,
.btn--secondary.on-dark:hover {
background: color-mix(in oklab, var(--on-solid) 12%, transparent);
color: var(--on-solid);
}
.btn[disabled], .btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
/* Media frames ────────────────────────────────────────────────────────
* A frame for an embed — map, video or photo — so the child fills a box of
* known proportion instead of the element's natural size.
*
* The ratio, radius and any framing are DEFAULTS. Change them in this file
* to suit the design; they are here so a frame is never unstyled, not to
* fix how it should look. */
.media-frame {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-m);
background: var(--surface-raised);
}
.media-frame > :where(iframe, img, video) {
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: cover;
border-radius: 0;
}
.media-frame--square { aspect-ratio: 1; }
.media-frame--wide { aspect-ratio: 16 / 9; }
/* Cards ────────────────────────────────────────────────────────────────
* Deliberately minimal — a surface with a radius. Sites compose their own
* card variants on top; modelling every one here would be guesswork. */
.card {
padding: var(--space-m);
background: var(--surface-raised);
border: var(--border-width-s) solid var(--border);
border-radius: var(--radius-m);
}
/* Utility ──────────────────────────────────────────────────────────── */
.visually-hidden, .sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/*
* Grid utilities. .u-container centres and pads; .u-grid lays out. Placement
* within the grid is each layout's business — see refs/design/layouts.md.
*/
/* The gutter goes OUTSIDE the max-width, matching how the source is built.
*
* --grid-max-width is transcribed as the width of the container ITSELF: the live
* site's inner container is max-width:1290px with zero padding, and its gutter
* sits on an outer wrapper. Putting the gutter on the same element (border-box)
* left only 1210px of content and shrank every photo and grid track by ~6%;
* switching that element to content-box instead made it 1370px wide, wider than
* the source. Margin-inline gives the gutter without touching the width, so the
* container is 1290 at wide viewports and shrinks with the gutter below that. */
.u-container {
width: 100%;
max-width: var(--grid-max-width);
margin-inline: auto;
padding-inline: 0;
}
/* Below 48rem the footer stacks into one column, and left-aligned blocks
* under a left-aligned logo read as a ragged pile. Centre the lot - logo,
* contact, address, hours - and the legal bar with them. */
@media (max-width: 47.999rem) {
.site-footer__inner,
.site-footer__inner section,
.site-footer__inner address,
.site-footer__logo { text-align: center; }
.site-footer__logo img { margin-inline: auto; }
.site-footer__legal-inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2xs);
}
.site-footer__legal-links { justify-content: center; }
/* The hours table is a day/rule/time row; centring the block would leave
* the rows lopsided, so keep it aligned but centre the block itself. */
.site-footer__inner .hours-table { max-width: 20rem; margin-inline: auto; }
}
/* The gutter, applied as an outer margin so it never eats the container width.
* min() keeps it from consuming the viewport on a phone. */
@media (max-width: 86.625rem) {
.u-container {
max-width: calc(100% - 2 * var(--grid-gutter));
}
}
.u-grid {
display: grid;
gap: var(--grid-gutter);
}
/*
* Scroll entrance.
*
* Native scroll-driven animation — no library, no IntersectionObserver, no
* JS. Add .reveal for a plain fade, or one of the directional modifiers.
*
* WHY THE WHOLE BLOCK IS INSIDE prefers-reduced-motion: a reveal implemented
* as `opacity: 0` plus an animation leaves reduced-motion users staring at
* invisible content when the animation never runs. Scoping the rule means
* they simply get the content, with no trap to fall into.
*
* Safari and Firefox do not support animation-timeline yet, so content there
* is simply visible. That is the correct failure for a practice site: no
* entrance effect is always better than content that never arrives.
*/
@media (prefers-reduced-motion: no-preference) {
.reveal {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
.reveal--up { --reveal-from: translateY(var(--reveal-distance)); }
.reveal--down { --reveal-from: translateY(calc(var(--reveal-distance) * -1)); }
.reveal--left { --reveal-from: translateX(var(--reveal-distance)); }
.reveal--right { --reveal-from: translateX(calc(var(--reveal-distance) * -1)); }
}
@keyframes reveal {
from {
opacity: 0;
transform: var(--reveal-from, none);
}
}
/* Images ───────────────────────────────────────────────────────────────
* This site rounds photos by default, as it always has: the source's photos
* all carry a corner. No background plate: the source renders every photo
* on a transparent ground. Logos, icons and inline SVG are not photographs
* and keep square corners; .is-flush opts a photo out. */
img { border-radius: var(--radius-m); }
img[class*="logo"], img[class*="icon"], svg {
border-radius: 0;
background: none;
}
img.is-flush, .is-flush img { border-radius: 0; background: none; }
/* The "Powered by Mediflare" logo in the footer: the footer is navy, so it
* is the white (inverted) logo; the dark one stays hidden. */
.mf-logo-light { display: none; }
.mf-logo-dark { display: inline; }
/* Hours: prevent time strings from breaking between number and am/pm */
.hours-table td:last-child,
.footer__hours-row span {
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════
* EASTGARDENS MEDICAL CENTRE — site layer
*
* Everything below composes on Dials' tokens and the base layer above. No
* raw colour, no bespoke clamp(): sizes come from --size-*, spacing from
* --space-*, type from the type dials and this site's own type tokens (its
* dials block), and raw px appears only for genuinely fixed dimensions
* (hairlines, icon boxes, the 44px touch floor).
* ═══════════════════════════════════════════════════════════════════════ */
/* The site's own shades and measures, each derived from a token. */
:root {
/* The navy's hover, a step lighter: the navy is already near-black, so
* hover LIGHTENS it (#0E1245 before Dials). The white mixed in is the
* navy's own on-solid. */
--navy-hover: color-mix(in oklab, var(--brand-solid) 91%, var(--brand-on-solid));
/* The red's hover, a step darker: #A52B18 (#AC1B02 before Dials, which
* kept the full chroma). color-mix(), so older browsers draw it too. */
--red-hover: color-mix(in oklab, var(--tertiary-solid) 89%, black);
/* The light blue, a step lighter (#A6C5E9): the phone number in the
* contact bar, on navy. Relative colour, so older browsers (Dials'
* fallback) drop it and the number takes the bar's white. */
--blue-light: oklch(from var(--secondary-solid) calc(l + 0.11) c h);
/* The source's wide column gutter, 100px at 1440 (2xl + s), used by every
* two- and three-column band on the inner pages. */
--gutter-wide: calc(var(--space-2xl) + var(--space-s));
/* The contact page's square photo is capped at 700px on the source; the
* card row lifts over it by fractions of that cap. A dimension, not a
* space step. */
--contact-photo-cap: 700px;
/* The search button in the header is drawn as a field; its label keeps
* the 1.3 leading it had (the section's default is Dials' --leading). */
--field-leading: var(--leading-lede);
}
/* Headings are Roboto 600 — the same face as buttons, eyebrows and nav
* labels, so the site runs on two families rather than three, and the same
* weight the brand kit set on Poppins. Roboto is a variable font, so 600 is
* a real face here rather than the old static family's 500/700 jump. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: var(--weight-heading);
line-height: var(--leading-heading); /* this site's heading leading, at every size */
letter-spacing: var(--tracking-heading);
color: var(--brand-on-soft); /* the navy */
}
th { color: var(--brand-on-soft); }
/* Bold within text is Bold (700), as the source sets it, not Dials'
* --weight-strong (600). */
strong, b { font-weight: var(--weight-bold); }
/* Links lighten on hover, as they always have: the navy is near-black. */
a:hover { color: var(--navy-hover); }
/* The hero display line, a step above the section headings. */
.display {
font-size: var(--size-5);
line-height: var(--leading); /* --leading-display, 1.05, at this size */
letter-spacing: var(--tracking-heading);
}
/* Eyebrows are red, uppercase and tracked — the site's most repeated
* signal, above nearly every section heading. */
.eyebrow {
font-family: var(--font-accent);
/* --size-1 (21.6px) against the source's 20.6px; --size--1 rendered it
* at 13.4px, a third too small. One line at the body's leading (a
* heading used as an eyebrow keeps the heading leading, below). */
font-size: var(--size-1);
line-height: var(--leading-body);
/* 600, as the source: 500 read too light once the size went up. */
font-weight: var(--weight-strong);
letter-spacing: var(--tracking-caps-total);
color: var(--tertiary-on-soft);
}
/* The source sets 21px between an eyebrow and its heading; ours ran to 40px
* because the heading's own top margin stacked on the eyebrow's bottom one. */
:is(h1, h2, h3, h4, h5, h6).eyebrow { line-height: var(--leading-heading); }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3,
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .h3 { margin-top: 0; }
.lede { line-height: var(--leading-lede); color: var(--text-muted); }
/* Buttons ────────────────────────────────────────────────────────────
* The site's CTA is a red pill in Roboto 500 caps. .btn--primary is
* repointed at the red because on this site the red IS the call to
* action; the navy is a surface colour, not a button. */
.btn,
.mf-search__submit,
.mf-search-overlay__close {
font-family: var(--font-accent);
font-weight: var(--weight-label);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-button);
text-transform: uppercase;
/* The source pads its button 15px top and bottom; the base .btn's 10px
* read cramped. Site-wide, so every CTA picks it up. */
padding-block: var(--space-xs);
/* 44px touch floor, applied to every button on the site. */
min-block-size: var(--target-min);
padding-inline: var(--space-m);
}
.btn--primary,
.mf-search__submit {
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
}
.btn--primary:hover,
.mf-search__submit:hover { background: var(--red-hover); color: var(--tertiary-on-solid); }
.btn--secondary,
.mf-search-overlay__close {
border-color: var(--tertiary-line);
color: var(--tertiary-on-soft);
}
.btn--secondary:hover,
.mf-search-overlay__close:hover { background: var(--tertiary-soft); color: var(--red-hover); }
/* On a navy ground the solid button stays red — it is the accent, and
* inverting it to white would lose the one signal the section carries. */
.on-dark .btn--primary,
.btn--primary.on-dark {
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
}
.on-dark .btn--primary:hover,
.btn--primary.on-dark:hover { background: var(--red-hover); color: var(--tertiary-on-solid); }
.on-dark .btn--secondary,
.btn--secondary.on-dark {
color: var(--brand-on-solid);
border-color: color-mix(in oklab, var(--brand-on-solid) 45%, transparent);
}
/* Sections ───────────────────────────────────────────────────────────
* One rhythm token for every band, so the vertical spacing is a single
* decision rather than a per-section guess. */
.section { padding-block: var(--space-l-2xl); }
.section--tight { padding-block: var(--space-xl-2xl); }
.section--band { background: var(--surface-lowered); }
.section--navy {
background: var(--brand-solid);
color: var(--brand-on-solid);
}
.section--navy :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
color: var(--brand-on-solid);
}
.section--navy .lede { color: color-mix(in oklab, var(--brand-on-solid) 80%, transparent); }
.section__head { max-width: var(--measure); margin-bottom: var(--space-l); }
.section__head--centre {
margin-inline: auto;
text-align: center;
}
/* Layout helpers ─────────────────────────────────────────────────────
* auto-fit grids rather than fixed column counts, so a row reflows on its
* own instead of needing a media query per breakpoint. */
.grid-2, .grid-3, .grid-4 {
display: grid;
gap: var(--grid-gutter);
/* Single column is the floor. A grid that can always reach one full-width
* track can never overflow, whatever its content's intrinsic width. */
grid-template-columns: minmax(0, 1fr);
}
/* Explicit column counts rather than auto-fit. auto-fit left a lone item on
* its own row at tablet widths (the four pillars 3+1 from 768 to 900, the
* homepage tiles 2+1, the four features 3+1 just under 960), and an auto-fit
* row cannot be centred. A short last row is centred instead (owner,
* 2026-10-03): the column count is doubled, every item spans two, and the
* short row's items start one column in, so card widths stay identical. */
@media (min-width: 48rem) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 > * { grid-column: span 2; }
.grid-3 > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Three across from where auto-fit used to reach three (820px). */
@media (min-width: 51.25rem) {
.grid-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-3 > :last-child:nth-child(2n + 1) { grid-column: span 2; }
.grid-3 > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.grid-3 > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
/* Four across once the pillar row is wider than the 62rem stacked break. */
@media (min-width: 62.0625rem) {
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A content column beside a media column. The media side is given a
* slightly smaller share so the prose keeps a comfortable measure. */
.split {
display: grid;
gap: var(--space-l-xl);
align-items: center;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
.split { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}
.split--media-first > :first-child { order: -1; }
.flow-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-m);
}
/* Header ─────────────────────────────────────────────────────────────
* Navy bar, logo left, nav right, red CTA last. Sticky so the booking
* button stays reachable; the navy is opaque, so no blur is needed. */
.skip-link {
position: absolute;
display: inline-flex;
align-items: center;
/* 44px touch floor — it is off-screen until focused, but a keyboard
* user who tabs to it gets a target the same size as every other. */
min-height: 44px;
left: var(--space-s);
top: var(--space-s);
z-index: var(--layer-top);
padding: var(--space-2xs) var(--space-s);
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
border-radius: var(--radius-s);
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); color: var(--tertiary-on-solid); }
.site-header {
position: sticky;
top: 0;
z-index: var(--layer-nav);
background: var(--brand-solid);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-m);
min-height: 88px;
/* A step up from --space-2xs: the bar read tight against the logo. */
padding-block: var(--space-xs);
}
.site-logo {
display: inline-flex;
align-items: center;
/* 44px touch floor. */
min-height: 44px;
margin-right: auto;
color: var(--brand-on-solid);
text-decoration: none;
font-family: var(--font-heading);
font-weight: var(--weight-heading);
font-size: var(--size-1);
letter-spacing: var(--tracking);
}
.site-logo:hover { color: var(--brand-on-solid); }
/* The source header renders the mark at 216x85 (a 600x300 SVG). 40px was
sized for the text placeholder this replaced; 54px matches the source's
proportion against the header height without crowding the nav.
background:none and radius 0 are REQUIRED, not tidiness: the global
`img { background: var(--surface); border-radius: var(--radius-m) }`
placeholder-tint for photos paints a white rounded box behind this
transparent SVG, and since the logo's lettering is itself white, the
wordmark vanishes and only the red cross survives. */
.site-logo img { height: 64px; width: auto; display: block;
background: none; border-radius: 0; }
@media (max-width: 767px) { .site-logo img { height: 52px; } }
.nav { display: flex; align-items: center; gap: var(--space-s); }
.nav__list {
display: flex;
align-items: center;
gap: var(--space-3xs);
}
.nav__list a,
.nav__toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
/* 44px touch floor on every nav item. */
min-height: 44px;
padding: var(--space-2xs) var(--space-xs);
font-family: var(--font-accent);
font-size: var(--size--1);
font-weight: var(--weight-label);
letter-spacing: var(--tracking-button);
text-transform: uppercase;
text-decoration: none;
color: var(--brand-on-solid);
border-radius: var(--radius-s);
white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out);
}
.nav__list a:hover,
.nav__toggle:hover { background: var(--navy-hover); color: var(--brand-on-solid); }
/* The active page gets ONE signal — the red fill — not a fill plus a rule. */
.nav__list a.active { background: var(--tertiary-solid); color: var(--tertiary-on-solid); }
.nav__item { position: relative; }
.nav__toggle svg { width: 12px; height: 12px; }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__menu {
position: absolute;
top: 100%;
left: 0;
z-index: var(--layer-overlay);
min-width: 14rem;
padding: var(--space-2xs);
background: var(--surface-raised);
border-radius: var(--radius-m);
box-shadow: var(--shadow-l);
display: none;
}
.nav__item:where(:hover, :focus-within) .nav__menu,
.nav__menu[data-open] { display: block; }
.nav__menu a {
display: flex;
width: 100%;
color: var(--text);
text-transform: none;
letter-spacing: var(--tracking);
font-size: var(--size--1);
}
.nav__menu a:hover { background: var(--tertiary-soft); color: var(--tertiary-on-soft); }
.nav__menu a.active { background: var(--tertiary-solid); color: var(--tertiary-on-solid); }
.nav__burger {
display: none;
align-items: center;
justify-content: center;
/* 44px touch floor. */
width: 44px;
height: 44px;
color: var(--brand-on-solid);
border-radius: var(--radius-s);
}
.nav__burger:hover { background: var(--navy-hover); }
.nav__burger svg { width: 24px; height: 24px; }
/* Must stay ABOVE the mobile query: same specificity, so whichever comes last
* wins, and below it this hid the in-menu CTA at every width. */
.nav__cta-mobile { display: none; }
@media (max-width: 62rem) {
.nav__burger { display: inline-flex; }
.nav > .btn { display: none; }
.nav__list {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--layer-overlay);
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-s) var(--grid-gutter) var(--space-m);
background: var(--brand-solid);
border-top: var(--border-width-s) solid var(--navy-hover);
max-height: calc(100dvh - 72px);
overflow-y: auto;
}
.nav__list[data-open] { display: flex; }
.nav__list > li > a,
.nav__toggle { width: 100%; }
.nav__menu {
position: static;
display: none;
min-width: 0;
padding: 0 0 var(--space-2xs) var(--space-s);
background: none;
box-shadow: none;
}
.nav__item:where(:hover, :focus-within) .nav__menu { display: none; }
.nav__menu[data-open] { display: block; }
.nav__menu a { color: var(--brand-on-solid); }
.nav__menu a:hover { background: var(--navy-hover); color: var(--brand-on-solid); }
/* Full-width CTA closing the menu, separated from the links above it. */
.nav__cta-mobile {
display: flex;
margin-top: var(--space-s);
padding-top: var(--space-s);
border-top: var(--border-width-s) solid var(--navy-hover);
}
.nav__cta-mobile .btn { width: 100%; justify-content: center; }
}
/* Site search ────────────────────────────────────────────────────────
* mediflare.js writes the box unstyled; every rule here is this site's, on
* its tokens. One placement at every width: one button
* (.site-search__trigger, data-mf-search-open) opens the one overlay
* mediflare.js builds (.mf-search-overlay). From 768px up the trigger is
* drawn as a search field (the --field-* tokens) and the overlay is a
* centred card over a dimmed page; on phones (767px and under) the trigger
* is a bare magnifier beside the menu button and the overlay fills the
* screen. Never inside the menu: search behind the hamburger is search most
* patients never find. The overlay and the results list are styled ONLY
* through :not([hidden]): a display of their own would override [hidden]
* and they would never close. Search and Close join the .btn rules above
* (Search is the red .btn--primary, Close the outlined .btn--secondary). */
/* The trigger, drawn as a field so it matches the box it opens. In the
* header's nav, between the menu and Book Appointment; at 992px and under
* the menu folds away and it sits beside the menu button. */
.site-search__trigger {
flex: none;
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-block-size: var(--field-h);
padding-block: 0;
padding-inline: var(--field-pad-inline) var(--space-xl);
font-size: var(--field-font-size);
font-weight: var(--field-weight);
line-height: var(--field-leading);
white-space: nowrap;
color: var(--field-placeholder);
background: var(--field-bg);
border: var(--field-border-w) solid var(--field-border);
border-radius: var(--field-radius);
transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.site-search__trigger svg { flex: none; }
/* The ellipsis is drawn, not spoken: the name stays "Search this site". */
.site-search__text::after { content: "\2026" / ""; }
.site-search__trigger:hover,
.site-search__trigger[aria-expanded="true"] { color: var(--brand-on-soft); border-color: var(--field-border-hover); }
/* The header's tight bands, where the desktop menu shares the bar with the
* trigger (measured from 993 to 1440, every 20px and +-1 at each edge, for
* about 20px to spare): the magnifier alone in its field outline, a 44px
* square, up to 1179px; magnifier and "Search", without the ellipsis, up to
* 1259px; the full trigger above. From 993 to 1119px even the square does
* not fit as the bar stands, so the gaps, the menu items' and the Book
* button's side padding close up a step there instead: nothing wraps, the
* logo keeps its size and the bar its height. */
@media (min-width: 993px) and (max-width: 1179px) {
.site-search__trigger { justify-content: center; inline-size: var(--field-h); padding-inline: 0; }
.site-search__text { display: none; } /* the name is the aria-label */
}
@media (min-width: 993px) and (max-width: 1119px) {
.site-header__inner { gap: var(--space-s); }
.nav { gap: var(--space-2xs); }
.nav__list a,
.nav__toggle { padding-inline: var(--space-2xs); }
.nav > .btn { padding-inline: var(--space-s); }
}
@media (min-width: 1180px) and (max-width: 1259px) {
.site-search__trigger { padding-inline: var(--field-pad-inline); }
.site-search__text::after { content: none; }
}
/* The box: the field and Search on one row, the status and results below. */
.mf-search__form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-2xs);
align-items: stretch;
}
.mf-search__label,
.mf-search__status,
.mf-search__results { grid-column: 1 / -1; }
/* Read out, not shown: the placeholder says what the field is. */
.mf-search__label {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mf-search__status {
margin: 0;
padding-inline: var(--space-xs);
font-size: var(--size--1);
line-height: var(--leading-lede);
color: var(--text-muted);
}
.mf-search__status:empty { display: none; }
/* Results: titles in the headings' navy Roboto, excerpts in the body ink,
* matches marked in the pale red. */
.mf-search__results { margin: 0; padding: 0; list-style: none; }
.mf-search__results:not([hidden]) { display: flex; flex-direction: column; gap: var(--space-3xs); }
.mf-search__link {
display: block;
padding: var(--space-2xs) var(--space-xs);
border-radius: var(--radius-s);
color: var(--text);
text-decoration: none;
overflow-wrap: anywhere;
transition: background var(--duration-fast) var(--ease-out);
}
.mf-search__link:hover,
.mf-search__link:focus-visible { color: var(--text); background: var(--surface-lowered); }
.mf-search__link:hover .mf-search__title { text-decoration: underline; }
/* Inside a scrolling list an outset ring is clipped, so it sits inset. */
.mf-search__link:focus-visible { outline-offset: calc(-1 * var(--focus-ring-w)); border-radius: var(--radius-s); }
.mf-search__title {
display: block;
font-family: var(--font-heading);
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
color: var(--brand-on-soft);
}
.mf-search__excerpt {
display: block;
margin-top: var(--space-3xs);
font-size: var(--size--1);
line-height: var(--leading-body);
color: var(--text);
}
.mf-search__excerpt mark {
color: var(--brand-on-soft);
background: var(--tertiary-soft);
border-radius: var(--radius-xs);
}
/* Phones: full screen, white. One row holds Close, the field and Search
* (Close first, matching the focus order); the results scroll below it,
* inside the overlay. mediflare.js locks the page behind. Subgrid puts the
* box's own children on the overlay's grid, so the results run the full
* width. */
.mf-search-overlay:not([hidden]) {
position: fixed;
inset: 0;
z-index: var(--layer-modal);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
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(--grid-gutter), env(safe-area-inset-left)) max(var(--grid-gutter), env(safe-area-inset-right));
background: var(--surface-raised);
border-block-start: var(--border-width-l) solid var(--tertiary-line);
}
.mf-search-overlay__header { display: contents; }
.mf-search-overlay__close {
grid-column: 1;
grid-row: 1;
position: relative;
z-index: var(--layer-base); /* above the box, which spans this cell too */
}
.mf-search--overlay,
.mf-search--overlay .mf-search__form {
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
align-items: stretch; /* Close, the field and Search share one height */
}
.mf-search--overlay .mf-search__input { grid-column: 2; grid-row: 1; }
.mf-search--overlay .mf-search__submit { grid-column: 3; grid-row: 1; }
.mf-search--overlay .mf-search__status { grid-column: 1 / -1; grid-row: 2; }
.mf-search--overlay .mf-search__results {
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));
}
/* From 768px the overlay is a centred card under a dimmed, lightly blurred
* page (body::after, in the navy ink), growing with its results up to the
* viewport, past which they scroll inside it. It refines the full-screen
* rules above at equal specificity, so it must stay after them. The card
* sits one layer above its backdrop: body::after comes after the overlay
* in the tree, so at an equal z-index it would paint over it. Both sit
* above the sticky header (--layer-nav) and the menu (--layer-overlay). */
@media (min-width: 48rem) {
.mf-search-overlay:not([hidden]) {
inset: var(--space-3xl) 0 auto;
z-index: calc(var(--layer-modal) + 1);
inline-size: calc(100% - 2 * var(--grid-gutter));
max-inline-size: var(--measure);
max-block-size: calc(100dvh - 2 * var(--space-3xl));
margin-inline: auto;
padding: var(--space-s);
border-radius: var(--radius-m);
box-shadow: var(--shadow-l);
}
.mf-search--overlay .mf-search__results { 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 oklab, var(--brand-solid) 50%, transparent);
backdrop-filter: blur(var(--space-3xs));
}
}
/* Phones: the trigger is a bare 44px magnifier beside the menu button, in
* the menu button's white, with its hover. */
@media (max-width: 47.999rem) {
.site-search__trigger {
justify-content: center;
inline-size: var(--target-min);
block-size: var(--target-min);
padding: 0;
color: var(--brand-on-solid);
background: none;
border-color: transparent;
border-radius: var(--radius-s);
}
.site-search__trigger:hover,
.site-search__trigger[aria-expanded="true"] { color: var(--brand-on-solid); background: var(--navy-hover); border-color: transparent; }
.site-search__text { display: none; } /* the name is the aria-label */
}
/* Hero ───────────────────────────────────────────────────────────────
* A photo ground with a light wash over it so the navy headline holds
* contrast wherever the image happens to be bright. */
.hero {
position: relative;
display: grid;
align-items: center;
min-height: 30rem;
background: var(--border) center / cover no-repeat;
isolation: isolate;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: var(--layer-behind);
/* The source carries NO overlay - the hero photo runs clean. Ours was
* 92%/78% white and left the subjects washed out and opaque. This keeps
* just enough scrim behind the copy on the left for legibility and clears
* to nothing well before the subjects. */
background: linear-gradient(
100deg,
color-mix(in oklab, var(--surface-raised) 62%, transparent) 0%,
color-mix(in oklab, var(--surface-raised) 30%, transparent) 30%,
color-mix(in oklab, var(--surface-raised) 0%, transparent) 62%);
}
.hero__inner { padding-block: var(--space-2xl-3xl); }
.hero__content { max-width: 34rem; }
/* :not(.eyebrow) - the eyebrow is a , so .hero__content p (0,1,1) beat the
* .eyebrow rule (0,1,0) and painted it --ink instead of the brand red. */
.hero__content p:not(.eyebrow) { color: var(--text); }
/* The inner-page hero carries no photo — a plain band with the eyebrow,
* heading and lede, matching the original's inner pages. */
.hero--plain {
min-height: 0;
background: var(--surface-raised);
}
.hero--plain::after { display: none; }
/* Contact bar ────────────────────────────────────────────────────────
* The navy card that overlaps the hero on the homepage: phone, blurb,
* CTA. It lifts into the section above by a negative margin, which is the
* one place this site uses one. */
.contact-bar {
position: relative;
z-index: var(--layer-raised);
margin-top: calc(var(--space-xl) * -1);
/* A step up on the block padding: --space-m read tight around the phone
* number and the button. Inline padding unchanged. */
padding: var(--space-l) var(--space-l);
background: var(--brand-solid);
color: var(--brand-on-solid);
border-radius: var(--radius-l);
display: grid;
gap: var(--space-m);
align-items: center;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
.contact-bar { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* The CTA sits hard right of the bar once the row is multi-column, so it
* anchors the navy panel's right edge instead of floating at the left of
* its track. Only above the breakpoint - stacked on a phone it stays
* left-aligned with the copy above it. */
.contact-bar > :last-child { justify-self: end; }
}
.contact-bar__phone {
display: flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
color: var(--brand-on-solid);
/* 44px touch floor on the tel: link. */
min-height: 44px;
}
.contact-bar__phone:hover { color: var(--brand-on-solid); }
.contact-bar__icon {
display: grid;
place-items: center;
/* Fixed icon box. */
width: 48px;
height: 48px;
flex: none;
background: var(--tertiary-solid);
border-radius: var(--radius-round);
}
.contact-bar__icon svg { width: 22px; height: 22px; }
.contact-bar__label {
display: block;
font-family: var(--font-accent);
font-size: var(--size--1);
letter-spacing: var(--tracking-caps-total);
text-transform: uppercase;
color: color-mix(in oklab, var(--brand-on-solid) 72%, transparent);
}
.contact-bar__number {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
font-size: var(--size-1);
/* The light blue reads as a link against the navy card, where the white
* of the label beside it does not. Set on the number rather than the
* whole .contact-bar__phone so the "Call us now" label stays white.
* --secondary-light, not --secondary-pale: the pale tints deliberately
* drop to 25% chroma, which against navy reads as off-white rather than
* blue and so fails to differentiate at all. */
color: var(--blue-light);
}
.contact-bar__phone:hover .contact-bar__number,
.contact-bar__phone:focus-visible .contact-bar__number { color: var(--brand-on-solid); }
/* Pillars ────────────────────────────────────────────────────────────
* The four brand promises. Rendered as a card row on the homepage and as
* a red strip on the inner pages — same content, two treatments. */
.pillar {
text-align: center;
padding: var(--space-m) var(--space-s);
}
/* Hairline dividers between pillars rather than four boxed cards: the
* original separates them with a rule, and boxing them would add three
* competing elevations to a row that carries no interaction. */
/* Vertical rules only - no top or bottom on the row - and a rule on the far
* left and right as well as between, so the four read as a bounded set of
* columns rather than a floating group. */
.pillars {
border-block: 0;
}
.pillars .pillar {
border-right: var(--border-width-s) solid var(--border);
}
.pillars .pillar:first-child {
border-left: var(--border-width-s) solid var(--border);
}
@media (max-width: 62rem) {
/* Stacked: the verticals become meaningless, so rule between rows instead
* and drop the outer edges. :first-child too - .pillars .pillar:first-child
* (0,2,1) beats .pillars .pillar (0,2,0), so clearing the generic rule
* alone left a stray left border on the first item. */
.pillars .pillar,
.pillars .pillar:first-child { border-right: 0; border-left: 0; }
.pillars .pillar:not(:first-child) { border-top: var(--border-width-s) solid var(--border); }
}
/* 2x2 between 48rem and 62rem: a rule left of the right-hand column and above
* the second row, as the strip and the contact details already do. */
@media (min-width: 48rem) and (max-width: 62rem) {
.pillars .pillar:nth-child(2n) { border-left: var(--border-width-s) solid var(--border); }
.pillars .pillar:nth-child(-n + 2) { border-top: 0; }
}
.pillar__icon {
display: grid;
place-items: center;
/* Fixed icon box. */
width: 56px;
height: 56px;
margin: 0 auto var(--space-s);
/* Dark blue disc, lighter blue glyph. */
background: var(--secondary-solid);
border-radius: var(--radius-round);
color: var(--secondary-soft);
}
.pillar__icon svg { width: 26px; height: 26px; }
.pillar h3 {
font-size: var(--size-0);
color: var(--tertiary-on-soft);
margin-bottom: var(--space-2xs);
}
.pillar p { font-size: var(--size-0); margin: 0; }
/* The red strip variant used on inner pages. */
/* 135px on the source, every page it appears on; ours came out at 60px because
* the height was left to the items. min-height rather than padding so the
* homepage's stacked variant, which is taller again, is unaffected. */
.strip {
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
}
/* 135px on the source, every page it appears on; ours came out 60px because
* the height was left to the items. Above 48rem only, so the phone stack and
* the homepage's taller variant are unaffected. */
@media (min-width: 48rem) {
.strip__list { min-height: 135px; align-items: center; }
}
.strip__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
/* Four across / 2x2 / one column, matching the contact page's navy strip -
* auto-fit produced an awkward 3+1 in between. */
@media (min-width: 36rem) {
.strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
.strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* In the 2x2 band the rules follow the GRID, not the source order: left of the
* right-hand column, above the second row. */
@media (min-width: 36rem) and (max-width: 61.999rem) {
.strip__item + .strip__item { border-left: 0; }
.strip__item:nth-child(2n) {
border-left: var(--border-width-s) solid color-mix(in oklab, var(--tertiary-on-solid) 25%, transparent);
}
.strip__item:nth-child(n + 3) {
border-top: var(--border-width-s) solid color-mix(in oklab, var(--tertiary-on-solid) 25%, transparent);
}
}
.strip__item {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
padding: var(--space-s) var(--space-xs);
font-family: var(--font-accent);
font-weight: var(--weight-label);
/* 17px against the source's 16.5px; --step--1 rendered 13.4px. */
font-size: var(--size-0);
text-align: center;
}
.strip__item + .strip__item {
border-left: var(--border-width-s) solid color-mix(in oklab, var(--tertiary-on-solid) 25%, transparent);
}
/* 30px on the source. */
.strip__item svg { width: 30px; height: 30px; flex: none; }
@media (max-width: 48rem) {
.strip__item + .strip__item {
border-left: 0;
border-top: var(--border-width-s) solid color-mix(in oklab, var(--tertiary-on-solid) 25%, transparent);
}
}
/* Cards ──────────────────────────────────────────────────────────────
* One card shape for the whole site. Shadow on hover only — depth means
* "this is interactive", not "this is a box". */
.card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
border: var(--border-width-s) solid var(--border);
transition: box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.card__body { padding: var(--space-m); }
.card__body > :last-child { margin-bottom: 0; }
.card img { border-radius: 0; }
.card--link:hover {
box-shadow: var(--shadow-m);
transform: translateY(-2px);
}
.card h3 { font-size: var(--size-1); margin-bottom: var(--space-2xs); }
/* Service and feature cards lead with a red heading, matching the site's
* treatment of every card title. */
.card--service h3 { color: var(--tertiary-on-soft); }
.card--service h3 a {
display: inline-flex;
align-items: center;
/* 44px touch floor. */
min-height: 44px;
color: inherit;
}
.card--service h3 a:hover { color: var(--red-hover); }
.card--service p { font-size: var(--size-0); margin-bottom: 0; }
/* Doctor cards ───────────────────────────────────────────────────── */
.doctor-card {
padding: var(--space-m);
text-align: center;
background: var(--surface-raised);
border: var(--border-width-s) solid var(--border);
border-radius: var(--radius-m);
}
.doctor-card h3 {
font-size: var(--size-0);
color: var(--tertiary-on-soft);
text-transform: uppercase;
letter-spacing: var(--tracking-button);
margin-bottom: var(--space-2xs);
}
.doctor-card p { margin-bottom: var(--space-3xs); font-size: var(--size-0); }
.doctor-card p:last-child { margin-bottom: 0; color: var(--text-quiet); }
/* Feature list ───────────────────────────────────────────────────────
* The icon-plus-text pairs beside the services image on the homepage. */
.feature {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-xs);
align-items: start;
}
.feature__icon {
display: grid;
place-items: center;
/* Fixed icon box. */
width: 44px;
height: 44px;
/* Same treatment as .pillar__icon: dark blue disc, lighter blue glyph.
* Not the accent - these are informational icons, not calls to action. */
background: var(--secondary-solid);
border-radius: var(--radius-round);
color: var(--secondary-soft);
}
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 {
font-size: var(--size-0);
color: var(--tertiary-on-soft);
margin: 0 0 var(--space-3xs);
}
.feature p { font-size: var(--size-0); margin: 0; }
/* Hours panel ────────────────────────────────────────────────────────
* The navy hours card. The dotted leader between day and time is a
* border on a flex spacer, which keeps it out of the text content. */
.hours-panel {
padding: var(--space-m);
background: var(--brand-solid);
color: var(--brand-on-solid);
border-radius: var(--radius-m);
}
.hours-panel h2, .hours-panel h3 { color: var(--brand-on-solid); }
/* The times are painted --ink-strong by the generic .hours-table rule, which
* is the same navy as this card's ground - they rendered invisible. Recolour
* both cells and the connector rule for the dark panel, the same treatment
* .contact-cards__hours already carries. */
.hours-panel .hours-table td:first-child,
.hours-panel .hours-table td:last-child {
color: var(--brand-on-solid);
}
.hours-panel .hours-table td:first-child::after {
border-top-color: color-mix(in oklab, var(--brand-on-solid) 45%, transparent);
}
.hours-panel .hours-table { margin: 0; }
.hours-panel .hours-table :where(th, td) {
border-bottom-color: color-mix(in oklab, var(--brand-on-solid) 18%, transparent);
color: var(--brand-on-solid);
padding-inline: 0;
}
.hours-panel .hours-table td:last-child {
text-align: right;
font-weight: var(--weight-strong);
}
/* The same table on a light ground. */
.hours-table td:last-child {
text-align: right;
font-weight: var(--weight-strong);
color: var(--brand-on-soft);
}
/* Definition rows ────────────────────────────────────────────────────
* The fees and appointment-type lists: a label, an optional note, and a
* value pinned right. Used wherever the original shows a priced row. */
.deflist { display: grid; gap: var(--space-xs); }
.defrow {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-xs);
align-items: baseline;
padding-bottom: var(--space-xs);
border-bottom: var(--border-width-s) solid var(--border);
}
.defrow:last-child { border-bottom: 0; padding-bottom: 0; }
.defrow__label {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
color: var(--brand-on-soft);
}
.defrow__note {
display: block;
margin-top: var(--space-3xs);
font-size: var(--size-0);
color: var(--text-muted);
font-family: var(--font-body);
font-weight: var(--weight-body);
}
.defrow__value {
font-family: var(--font-accent);
font-weight: var(--weight-label);
color: var(--tertiary-on-soft);
white-space: nowrap;
}
/* Accordion (FAQ) ────────────────────────────────────────────────────
* Native , so it is keyboard-operable and searchable with no JS. */
.faq { display: grid; gap: var(--space-2xs); }
.faq details {
background: var(--surface-raised);
border: var(--border-width-s) solid var(--border);
border-radius: var(--radius-m);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
/* 44px touch floor on the summary row. */
min-height: 44px;
padding: var(--space-s) var(--space-m);
font-family: var(--font-heading);
font-weight: var(--weight-heading);
color: var(--brand-on-soft);
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
flex: none;
/* Fixed chevron box. */
width: 10px;
height: 10px;
border-right: var(--border-width-m) solid var(--tertiary-line);
border-bottom: var(--border-width-m) solid var(--tertiary-line);
transform: rotate(45deg) translate(-25%, -25%);
transition: transform var(--duration-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) {
padding: 0 var(--space-m) var(--space-m);
margin: 0;
}
/* Policy list ────────────────────────────────────────────────────────
* The practice-policies and legal pages: a heading and prose per item,
* no card chrome, separated by a rule. */
.policy + .policy {
margin-top: var(--space-l);
padding-top: var(--space-l);
border-top: var(--border-width-s) solid var(--border);
}
/* Brand red, matching the fees-page note headings and the doctor cards. */
.policy h3 { margin-top: 0; font-size: var(--size-1); color: var(--tertiary-on-soft); }
.policy > :last-child { margin-bottom: 0; }
/* Inline links in long-form prose are tap targets too. inline-flex with a
* min-height keeps them in the text flow while meeting the 44px floor. */
.prose p a,
.policy p a,
.policy li a,
.prose li a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Legal pages hold long prose — cap the measure so it stays readable. */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--size-2); }
.prose h3 { font-size: var(--size-1); }
/* Contact ────────────────────────────────────────────────────────────
* The navy detail strip under the contact hero: four labelled facts. */
/* The four facts run wider than the site container. At 1290 the columns
* land around 300px each and "Phone Number" / "Fax" crowd their dividers;
* 1350 is enough to unpick that without the strip reading as a different
* width from the bands above and below - it sits on its own full-bleed
* navy ground, so nothing else has to move. Below 1350 + gutters the
* .u-container rule clamps it to the viewport as before. */
.detail-strip {
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: 84.375rem; /* 1350px */
}
/* Four across when there is room; a 2x2 grid in between, which is where
* auto-fit previously produced an awkward 3+1; one column on a phone. */
@media (min-width: 36rem) {
.detail-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
.detail-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.detail {
padding: var(--space-m) var(--space-s);
text-align: center;
}
.detail + .detail {
border-left: var(--border-width-s) solid color-mix(in oklab, var(--brand-on-solid) 20%, transparent);
}
/* In the 2x2 band the borders have to follow the grid, not the source order:
* a rule to the LEFT of the right-hand column, and above the second row. */
@media (min-width: 36rem) and (max-width: 61.999rem) {
.detail + .detail { border-left: 0; border-top: 0; }
.detail:nth-child(2n) {
border-left: var(--border-width-s) solid color-mix(in oklab, var(--brand-on-solid) 20%, transparent);
}
.detail:nth-child(n + 3) {
border-top: var(--border-width-s) solid color-mix(in oklab, var(--brand-on-solid) 20%, transparent);
}
}
@media (max-width: 35.999rem) {
.detail + .detail {
border-left: 0;
border-top: var(--border-width-s) solid color-mix(in oklab, var(--brand-on-solid) 20%, transparent);
}
}
.detail h3 {
font-size: var(--size-0);
color: var(--brand-on-solid);
margin: 0 0 var(--space-2xs);
}
.detail p, .detail address {
margin: 0;
font-style: normal;
font-size: var(--size-0);
color: color-mix(in oklab, var(--brand-on-solid) 85%, transparent);
}
.detail a { color: var(--brand-on-solid); }
.detail a:hover { color: var(--secondary-solid); }
/* Form ───────────────────────────────────────────────────────────── */
.form {
display: grid;
gap: var(--space-s);
/* Field tokens only; the look is Form controls'. */
--field-pad-inline: var(--space-s);
--field-textarea-h: 9rem;
}
.form label { font-family: var(--font-accent); }
.form .required { color: var(--tertiary-on-soft); }
[data-mf-feedback] {
margin-top: var(--space-s);
padding: var(--space-s);
border-radius: var(--radius-s);
background: var(--success-soft);
}
/* A red panel used for the feedback callout on the contact page. */
.panel-red {
padding: var(--space-l);
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
border-radius: var(--radius-m);
}
.panel-red h2, .panel-red h3 { color: var(--tertiary-on-solid); }
.panel-red p { color: color-mix(in oklab, var(--tertiary-on-solid) 88%, transparent); }
.panel-red .btn--primary {
background: var(--surface-raised);
color: var(--tertiary-on-soft);
}
.panel-red .btn--primary:hover { background: var(--surface-raised); color: var(--red-hover); }
/* A navy panel, same shape. */
.panel-navy {
padding: var(--space-l);
background: var(--brand-solid);
color: var(--brand-on-solid);
border-radius: var(--radius-m);
}
.panel-navy h2, .panel-navy h3 { color: var(--brand-on-solid); }
.panel-navy p { color: color-mix(in oklab, var(--brand-on-solid) 85%, transparent); }
.panel-navy a { color: var(--secondary-solid); }
/* Footer ─────────────────────────────────────────────────────────── */
.site-footer {
background: var(--brand-solid);
color: var(--brand-on-solid);
}
.site-footer__inner {
display: grid;
gap: var(--space-l);
padding-block: var(--space-xl);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Four across once four 15rem columns fit; below that a 2x2, never 3+1. */
@media (min-width: 72.5rem) {
.site-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.site-footer h2 {
margin: 0 0 var(--space-s);
font-size: var(--size-0);
color: var(--brand-on-solid);
}
/* Tappable contact links in the footer and contact strip. A phone number
* is the single most-tapped thing on a practice site; it gets the floor
* even though it sits inside a paragraph. */
.site-footer a,
.detail a,
.contact-bar__phone,
a[href^="tel:"],
a[href^="mailto:"],
.mf-email {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.site-footer p, .site-footer address {
font-style: normal;
font-size: var(--size-0);
color: color-mix(in oklab, var(--brand-on-solid) 85%, transparent);
margin-bottom: var(--space-2xs);
}
.site-footer a { color: var(--brand-on-solid); }
.site-footer a:hover { color: var(--secondary-solid); }
.site-footer .hours-table :where(th, td) {
padding-inline: 0;
font-size: var(--size-0);
color: color-mix(in oklab, var(--brand-on-solid) 85%, transparent);
border-bottom-color: color-mix(in oklab, var(--brand-on-solid) 15%, transparent);
}
.site-footer .hours-table td:last-child { color: var(--brand-on-solid); }
/* The footer uses a DIFFERENT asset on the source: a wider horizontal
lockup (262x75) rather than the header's stacked 600x300 mark. Both are
the white-lettering variant, which is why both sit on the navy ground. */
/* The source's footer logo box is 280x80. Ours is an SVG with more internal
* padding than that raster, so the visible mark sits smaller inside the same
* box height - 96px matches it by eye. */
.site-footer__logo img { height: 96px; width: auto; display: block;
background: none; border-radius: 0; }
/* The red legal bar across the bottom, as on the original. */
.site-footer__legal {
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
}
.site-footer__legal-inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-m);
align-items: center;
justify-content: space-between;
padding-block: var(--space-2xs);
}
/* 14px on the source; --step-0 (17px) read too large in the red band. */
.site-footer__legal p { margin: 0; font-size: var(--size--1); color: var(--tertiary-on-solid); }
.site-footer__legal a { color: var(--tertiary-on-solid); }
.site-footer__legal a:hover { color: var(--tertiary-on-solid); }
.site-footer__legal-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
}
.site-footer__legal-links a {
/* 14px on the source; --step-0 read too large in the red band. */
font-size: var(--size--1);
/* 44px touch floor on the legal links. */
min-height: 44px;
display: inline-flex;
align-items: center;
}
.powered-by {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
padding-block: var(--space-2xs);
margin: 0;
font-size: var(--size-0);
color: var(--text-quiet);
}
/* 12.4px on the source. .site-footer p (0,1,1) sets --step-0 and beats a bare
* .powered-by (0,1,0), so this has to match that specificity to win - the
* child anchor was picking up the smaller size while the itself stayed
* 17px, which is the tell for a specificity miss rather than a cascade one. */
.site-footer p.powered-by,
.powered-by a,
.powered-by span { font-size: var(--size--1); }
/* .site-footer p also sets a bottom margin, which escaped past the footer and
* left 10px of blank page below it. Needs the same specificity to clear. */
.site-footer p.powered-by { margin-bottom: 0; }
/* An inline tel: link INSIDE a paragraph must not carry the 44px tap-target
* floor - it makes the anchor a tall box mid-sentence and pushes the line
* apart. The floor is for standalone links (the footer's contact rows, a card
* action), not for a phone number quoted in running copy. */
p a[href^="tel:"],
li a[href^="tel:"],
address a[href^="tel:"] {
min-height: 0;
padding-block: 0;
display: inline;
}
/* The contact links carry the 44px minimum tap target, which stacks into very
* airy rows in the footer's narrow column. Keep the full target on touch
* pointers, where it matters, and let the rows close up on a mouse. */
@media (pointer: fine) {
.site-footer__inner a[href^="tel:"] { min-height: 0; padding-block: 0; }
/* A step of air between the contact rows: the 44px tap target made them
* far too airy, and removing it entirely closed them up too far. */
.site-footer__inner section p { margin-block: 0 var(--space-2xs); }
}
/* The Mediflare mark scales with the label beside it; 20px left it tiny once
* the text came down from 17px. */
.powered-by img { height: 28px; width: auto; }
.powered-by a {
display: inline-flex;
align-items: center;
/* No 44px floor here. It is a small logo credit, not a primary action, and
* the floor inflated a 20px line into a 64px block of mostly blank space.
* The 28px mark is still an easy target. */
min-height: 0;
}
/* Map ────────────────────────────────────────────────────────────── */
/* Utilities ──────────────────────────────────────────────────────── */
.mb-0 { margin-bottom: 0; }
/* Specialist panel ───────────────────────────────────────────────────
* The source pairs a white copy panel with a photo and two solid-red
* cards in the opposite column. The red cards are FILLED, not outlined:
* white icon, white heading, white body. Transcribed from the live DOM
* (630x747 white panel r20px; 300x358 red cards r20px, 50px padding). */
.panel {
background: var(--surface-raised);
border-radius: var(--radius-l);
padding: var(--space-xl);
}
.panel > :last-child { margin-bottom: 0; }
.card-solid {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-l);
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
border-radius: var(--radius-l);
}
.card-solid h3 {
color: var(--tertiary-on-solid);
font-size: var(--size-2);
margin: 0;
}
.card-solid p {
color: var(--tertiary-on-solid);
margin: 0;
font-size: var(--size-0);
}
.card-solid__icon {
width: 50px;
height: 50px;
color: var(--tertiary-on-solid);
}
.card-solid__icon svg {
width: 100%;
height: 100%;
display: block;
/* The icons are filled glyphs on the source, not strokes. */
fill: currentColor;
stroke: none;
/* Defeat the global img/svg surface paint. */
background: none;
}
/* A media block that fills its grid cell at a fixed ratio, matching the
* source's 630x358 photo above the two red cards. */
.media-fill {
border-radius: var(--radius-l);
overflow: hidden;
/* No placeholder tint: the source frames its photos with a radius and
* nothing behind them, so a band-coloured ground reads as a card. */
background: none;
}
.media-fill img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
background: none;
}
/* The visiting-specialists band. Source at 1440: two 630px columns, the
* white panel left; right column stacks a 630x358 photo over two 300x358
* red cards. Single column below 60rem so nothing is forced narrow. */
.specialists {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.specialists__aside {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: minmax(0, 1fr);
align-content: start;
}
.specialists__media { aspect-ratio: 16 / 9; }
.specialists__cards {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
.specialists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.specialists__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Appointment hero ───────────────────────────────────────────────────
* The source leads with copy beside a wide reception photo (1290x450 at
* 1440), not a bare text block. */
/* A list whose markers are the site's red tick rather than a disc. */
.ticklist { list-style: none; padding-left: 0; margin-bottom: var(--space-m); }
.ticklist li {
position: relative;
padding-left: var(--space-l);
margin-bottom: var(--space-s);
}
.ticklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 0.7em;
height: 0.35em;
border-left: var(--border-width-m) solid var(--tertiary-line);
border-bottom: var(--border-width-m) solid var(--tertiary-line);
transform: rotate(-45deg);
}
.ticklist li:last-child { margin-bottom: 0; }
/* Services hero ──────────────────────────────────────────────────────
* The source splits eyebrow+H1 from lede+CTA across two columns, then
* runs a full-width 1290x700 photo beneath (not beside) them. */
.hero__split {
display: grid;
gap: var(--space-l-xl);
grid-template-columns: minmax(0, 1fr);
align-items: center;
margin-bottom: var(--space-xl);
}
@media (min-width: 60rem) {
.hero__split { grid-template-columns: 1.4fr 1fr; }
}
.hero__aside > :last-child { margin-bottom: 0; }
.hero__banner { aspect-ratio: 1290 / 700; }
/* Service cards ──────────────────────────────────────────────────────
* The source does NOT box these. Each is a rounded 410x308 photo, then
* a RED PILL holding the white title, then body copy on the page ground
* — no border, no card surface. Transcribed from the live DOM
* (img r20px; title wrapper bg #c1341e r100px, 20px vertical padding). */
/* The row gap must exceed the gap between a card's pill and its own body text,
* or the description reads as belonging to the card BELOW it - which is what
* happened once the pill was pulled up to straddle its photo. Column gap stays
* on the grid gutter; only the rows need the extra air. */
.svc-grid {
display: grid;
column-gap: var(--grid-gutter);
row-gap: var(--space-3xl);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
.svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-grid > * { grid-column: span 2; }
.svc-grid > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}
/* A short last row is centred, card widths unchanged (owner, 2026-10-03). */
@media (min-width: 64rem) {
.svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svc-grid > :last-child:nth-child(2n + 1) { grid-column: span 2; }
.svc-grid > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.svc-grid > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
.svc { display: flex; flex-direction: column; text-align: center; }
/* No bottom margin: the title pill is pulled up to straddle this edge, so
* the gap below the photo is the pill's own overhang instead. */
.svc__media { aspect-ratio: 410 / 308; margin-bottom: 0; }
.svc__title {
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
border-radius: var(--radius-pill);
padding: var(--space-xs) var(--space-m);
/* Straddle the photo's bottom edge - the top half of the pill sits over the
* image, the bottom half below it. -50% of the pill's own height keeps that
* true whatever the label wraps to, where a fixed px offset would not.
* position:relative so it paints above the photo. */
position: relative;
transform: translateY(-50%);
/* The pill is pulled up by half its height, so the flow below needs that
* height back plus the gap the layout had. NOT a percentage: a percentage
* margin resolves against the CONTAINER'S WIDTH, not the element's height,
* which pulled the body text 154px up over the pill. 0.5lh is half a line
* box, which is what half this single-line pill actually is. */
margin: 0 auto calc(0.5lh + var(--space-3xs));
font-size: var(--size-1);
/* The pill hugs its label on the source rather than filling the column. */
width: fit-content;
max-width: 100%;
}
/* Below 48rem the panel stacks, so the eyebrow, heading, copy and button sit
* left-aligned under a full-width photo and read as a ragged column. Centre
* the block there; the two-column desktop layout is unaffected. */
@media (max-width: 47.999rem) {
.feature-panel__body { text-align: center; }
.feature-panel__body .btn { margin-inline: auto; }
}
.svc__body {
margin: 0;
padding-inline: var(--space-s);
font-size: var(--size-0);
}
/* Feature panel ──────────────────────────────────────────────────────
* The source's closing band is a single white r15px card holding a tall
* photo beside the copy — not a bare split on the page ground.
* Live: card 1290x673, photo 520x573, copy column 520 wide. */
.feature-panel {
display: grid;
gap: var(--space-l-xl);
grid-template-columns: minmax(0, 1fr);
align-items: center;
background: var(--surface-raised);
border-radius: var(--radius-l);
padding: var(--space-xl);
box-shadow: var(--shadow-s);
}
@media (min-width: 60rem) {
.feature-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feature-panel__media { aspect-ratio: 520 / 573; }
.feature-panel__body > :last-child { margin-bottom: 0; }
/* The source sets its lead-in labels in the accent red. */
.text-red { color: var(--tertiary-on-soft); }
/* Fees panels ────────────────────────────────────────────────────────
* The source holds the fee tables in two white r15px cards side by side
* (516 and 774 wide at 1440), not loose on the band. */
.fees-panels {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.fees-panels { grid-template-columns: 2fr 3fr; }
}
/* Practice policies ──────────────────────────────────────────────────
* The source presents each policy as a white r15px card in a two-column
* grid (630px each at 1440), not as a divider-separated list, and opens
* with a row of three square photos. */
.policy-gallery {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: minmax(0, 1fr);
margin-top: var(--space-xl);
}
@media (min-width: 48rem) {
.policy-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.policy-gallery .media-fill { aspect-ratio: 1; }
.policy-grid {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.policy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.policy-grid > * { grid-column: span 2; }
.policy-grid > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}
/* Inside the grid each policy is its own card, so the divider rule that
* separated them as a single column no longer applies. */
.policy-grid .policy {
background: var(--surface-raised);
border-radius: var(--radius-l);
padding: var(--space-l);
height: 100%;
}
.policy-grid .policy + .policy {
margin-top: 0;
padding-top: var(--space-l);
border-top: 0;
}
/* The source's article feed sits in one white r15px card. We do not
* reproduce that feed (it is third-party syndicated content hosted on
* yourhealth.net.au), but the substitute links keep its single-card
* shape rather than reading as six competing cards. */
.resources-panel .card {
border: 0;
background: none;
}
.resources-panel .card__body { padding: 0; }
/* Homepage tiles ─────────────────────────────────────────────────────
* The source's first two columns in this row are NOT boxed: photo, then
* text and button directly on the band. Only the third (practice hours)
* is a filled navy card. */
.home-tile { display: flex; flex-direction: column; }
.home-tile__media { aspect-ratio: 410 / 277; margin-bottom: var(--space-m); }
.home-tile__body > :last-child { margin-bottom: 0; }
.home-tile h3 { font-size: var(--size-1); margin-bottom: var(--space-2xs); }
/* ═══════════════════════════════════════════════════════════════════════
* APPOINTMENT PAGE
*
* Transcribed from the source's five bands at 1440px, not re-authored. The
* source's track widths are what these rules reproduce; the colours, type
* and spacing come from the tokens above. Measured source geometry:
*
* band 0 2 cols 645 + 645, gap 0 + a full-width 1290x450 photo below
* band 1 the rust strip (.strip), no content
* band 2 3 cols 383 + 383 + 383, gap 70 photo in col 3 at 383x431
* band 3 2 cols 595 + 595, gap 100 left column empty, content right
* band 4 2 cols 595 + 595, gap 100 accordion left, 595x669 photo right
*
* The gaps are compositions of the scale that land on the measured px at
* 1440 (70 = xl + 2xs, 100 = --gutter-wide) and tighten with it below.
* Single column below 60rem so nothing is forced narrow.
* ═══════════════════════════════════════════════════════════════════════ */
/* The source measures every band on this page at x=75 w=1290 - that is 1290px
* of CONTENT, not a 1290px border box with a gutter inside it. .u-container
* pads by --grid-gutter, which would leave each track 40px short and shrink
* every photo with it, so on this page the container carries its padding
* OUTSIDE the max-width once the viewport can afford the full 1290 + gutters.
* Below that the normal padded behaviour returns and nothing can overflow. */
/* Band 0. The two columns are equal on the source (645/645) and the photo
* is NOT beside them — it runs the full 1290 container beneath. */
.appt-hero__row {
display: grid;
gap: var(--space-l-xl);
grid-template-columns: minmax(0, 1fr);
align-items: start;
margin-bottom: var(--space-xl);
}
@media (min-width: 60rem) {
.appt-hero__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* The source sets no gap between these two columns; the eye reads
* them as one spread. Keep a gutter so the measure does not run
* into the second column on our fluid container. */
gap: var(--grid-gutter);
}
}
.appt-hero__lead > :last-child,
.appt-hero__aside > :last-child { margin-bottom: 0; }
/* The source pads this band 119px top and 120px bottom; ours had none, so the
* hero ran into the header above and the strip below. --space-3xl is 120px. */
.appt-hero { padding-block: var(--space-3xl); }
/* The navy detail strip's icons: 62px rust circles with a white glyph, as the
* source has. Ours shipped without them. */
.detail__icon {
display: grid;
place-items: center;
width: 62px;
height: 62px;
margin: 0 auto var(--space-s);
border-radius: 50%;
background: var(--tertiary-solid);
color: var(--tertiary-on-solid);
}
.detail__icon svg { width: 26px; height: 26px; }
/* The email address is one long unbroken token and overflowed its column at
* 1024, where the strip is four narrow tracks. Break it at a sensible point
* rather than letting it push past the container. */
/* The span AND the the mf-email script builds inside it at runtime - the
* anchor is what actually carries the text and overflowed. */
.detail .mf-email,
.detail .mf-email a,
.detail p a {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Every page's hero gets the same 120px band padding. /contact, /services and
* /practice-policies had none at all, so their heroes ran straight into the
* header and into whatever followed, while /about and /appointment had 120px -
* the inconsistency read as a mistake rather than a variation. Applied to the
* shared .hero--plain so a new page inherits it; the pages that already set
* their own (.about-hero, .appt-hero, the /fees hero) are unaffected because
* their own rule follows this one. */
.hero--plain { padding-block: var(--space-3xl); }
/* ...except where a lead image follows immediately: there the copy and the
* image belong together, and a full band's padding between them reads as two
* unrelated blocks. */
.hero--plain:has(+ .resources-lead) { padding-block: var(--space-xl) 0; }
/* .hero__inner carries its own 120px of block padding on top of the hero's,
* which is where most of the gap actually came from - the hero's own padding
* was less than half of it. */
.hero--plain:has(+ .resources-lead) .hero__inner { padding-bottom: 0; }
/* "Appointments Made Simple" is 24.7px w500 in the brand red on the source - a
* lead-in to the list, not a section heading. As an it was inheriting the
* 44.2px navy heading treatment. */
.appt-hero__aside h2 {
margin-top: 0;
font-size: var(--size-2);
font-weight: var(--weight-strong);
color: var(--tertiary-on-soft);
}
/* A 1px rule between the two hero columns, as the source has (a right border
* on its first 645px column). Only once the row is genuinely two columns. */
@media (min-width: 60rem) {
.appt-hero__lead {
border-right: var(--border-width-s) solid var(--border);
padding-right: var(--grid-gutter);
}
/* The aside sits against the title, not the eyebrow above it. A fixed
* offset was wrong: it assumed the H1 wraps to two lines as it does on the
* source, where "Appointments Made Simple" lands near the middle of a
* 119px two-line title. Our H1 fits on one line at this width, so the same
* offset left the aside riding high. Centring the two columns against each
* other holds however the title wraps. */
.appt-hero__row { align-items: end; }
}
/* 1290 x 450 on the source — a 2.87:1 crop of a 3:2 original. */
.appt-hero__banner { aspect-ratio: 1290 / 450; }
/* Band 2. Three equal columns with the source's 70px gutter; the photo is
* the third column, not a full-width banner. */
.appt-reminders {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 48rem) {
.appt-reminders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
.appt-reminders {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(var(--space-xl) + var(--space-2xs)); /* 70px at 1440 */
}
}
.appt-reminders > * > :last-child { margin-bottom: 0; }
/* 383 x 431 on the source. */
.appt-reminders__media { aspect-ratio: 383 / 431; }
/* Below 60rem the photo has no third column to sit in, so it spans the row
* rather than being squeezed to half width beside a text column. */
@media (min-width: 48rem) and (max-width: 59.999rem) {
.appt-reminders__media { grid-column: 1 / -1; aspect-ratio: 1290 / 431; }
}
/* The hours block inside column two. The source runs it as plain lines on
* the band, not as the navy panel used elsewhere on the site. */
.appt-hours { margin-bottom: var(--space-m); }
/* Day ———— time: a rule connecting the pair, spanning exactly the gap between
* them so it grows and shrinks with the labels either side.
*
* The platform emits {{opening_hours_html}} as
with
* a day cell and an hours cell per row (verified against the live
* wellbrook-medical and victoria-road-medical-centre tag files - our own tag
* file had a hand-written +
blob, which Rails would overwrite).
*
* Each row is a flex line. The day cell grows and lays its text out beside the
* rule, so the rule takes exactly the space the text leaves; a border on either
* cell would underline its own text rather than connect the two. */
.appt-hours .hours-table,
.appt-hours .hours-table tbody { display: block; width: 100%; }
.appt-hours .hours-table tr {
display: flex;
align-items: center;
padding-block: var(--space-xs);
}
/* The base .hours-table underlines each row; here the connector is the rule,
* so the inherited border has to go or every row gets two. */
.appt-hours .hours-table td { padding: 0; border: 0; }
.appt-hours .hours-table td:first-child {
display: flex;
align-items: center;
flex: 1;
gap: var(--space-s);
color: var(--brand-on-soft);
font-weight: var(--weight-bold);
white-space: nowrap;
}
.appt-hours .hours-table td:first-child::after {
content: "";
flex: 1;
min-width: var(--space-l);
border-top: var(--border-width-s) solid var(--brand-line);
}
.appt-hours .hours-table td:last-child {
flex: none;
padding-left: var(--space-s);
text-align: right;
color: var(--tertiary-on-soft);
font-weight: var(--weight-bold);
white-space: nowrap;
}
/* Band 3. Two equal columns, 100px gutter, content in the RIGHT one — the
* source leaves the left column empty and we reproduce that rather than
* filling it with a photo the source does not have. */
.appt-types {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
/* stretch, not start: the source's empty left column is a real 595x874
* box holding the track open to the row's full height, and a zero-height
* spacer would not reproduce that. */
align-items: stretch;
}
@media (min-width: 60rem) {
.appt-types {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gutter-wide);
}
}
/* The empty left column exists only to hold the track open on wide
* viewports; below 60rem it would be a blank row, so it is removed. */
/* The left column carries a 595x874 photo, cover-cropped with a 15px radius.
* The source sets it as a CSS background-image on the column container rather
* than an ![]()
, which is why an ![]()
-only sweep reported this column empty -
* measure background-image too, or a photo like this goes missing. */
.appt-types__media { display: none; }
@media (min-width: 60rem) {
.appt-types__media { display: block; aspect-ratio: 595 / 874; }
}
.appt-types h2 { margin-top: 0; }
/* Band 3's rows deliberately keep the shared .defrow treatment rather than the
* source's heavier 20.6px w700 pair: the lighter label with the value on the
* baseline reads better here. Reverted on request after the rebuild. */
/* Band 4. Accordion left, photo right, heading left-aligned — the source
* does not centre it. */
.appt-faq {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.appt-faq {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gutter-wide);
}
}
/* The source left-aligns this heading; ours would inherit the same, but
* .section__head--centre is the site's habit for a lone FAQ heading and it
* is explicitly NOT wanted here. "start" rather than "left" so the rule
* stays direction-agnostic and matches the computed value elsewhere. */
.appt-faq h2 { margin-top: 0; text-align: start; }
/* 595 x 669 on the source. */
.appt-faq__media { aspect-ratio: 595 / 669; }
/* Flat accordion ─────────────────────────────────────────────────────
* The source's FAQ rows are NOT cards: no fill, no radius, no shadow, and
* no gap between items. Each row is a hairline rule with a +/- glyph, and
* an open row turns rust. .faq keeps its card treatment for the homepage;
* this modifier is the appointment page's flat variant. */
.faq--flat { gap: 0; }
.faq--flat details {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.faq--flat summary {
padding: var(--space-s) 0;
border-bottom: var(--border-width-s) solid var(--border);
font-family: var(--font-body);
/* A step above the source's 16.5px, and 600 not 400: the questions are the
* scannable part of the band and read too quiet at body weight. */
font-size: var(--size-1);
font-weight: var(--weight-strong);
color: var(--brand-on-soft);
}
.faq--flat details[open] summary { color: var(--tertiary-on-soft); }
/* A plus that becomes a minus, as the source does, rather than a chevron
* that rotates. Two bars: the vertical one is hidden when open. */
.faq--flat summary::after {
content: "";
width: 0.75em;
height: 0.75em;
border: 0;
transform: none;
background:
linear-gradient(currentColor, currentColor) center / 100% var(--border-width-m) no-repeat,
linear-gradient(currentColor, currentColor) center / var(--border-width-m) 100% no-repeat;
}
.faq--flat details[open] summary::after {
transform: none;
background: linear-gradient(currentColor, currentColor) center / 100% var(--border-width-m) no-repeat;
}
.faq--flat details > :not(summary) {
padding: var(--space-s) 0;
color: var(--text);
}
/* The eyebrow is rust site-wide; band 2's is navy on the source. */
.eyebrow--navy { color: var(--brand-on-soft); }
/* ═══════════════════════════════════════════════════════════════════════
* /about ─────────────────────────────────────────────────────────────
* Source at 1440 (container 1290) band by band:
* 0 hero 793 + 397, gap 100; the copy column splits 347 + 347, gap 100
* 2 doctors head 379 + 632 + 278 — THREE tracks, the CTA is its own
* 3-5 doctor cards three-up, white r10, 50px padding, 30px gap
* 6 closing 619 + 621, gap 50; left stacks copy over a 599x399 photo,
* right is one 541x766 photo
* ═══════════════════════════════════════════════════════════════════════ */
/* Hero. 793/397 is 2fr/1fr to within 3px at 1290, so the ratio is the
* token rather than two magic widths. */
.about-hero { padding-block: var(--space-3xl); }
.about-hero__row {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.about-hero__row {
grid-template-columns: 2fr 1fr;
gap: var(--gutter-wide);
}
}
/* The two prose columns inside the copy track. One column below 48rem so
* the measure never collapses to something unreadable. */
.about-hero__cols {
display: grid;
gap: var(--space-m);
grid-template-columns: minmax(0, 1fr);
margin-top: var(--space-l);
}
@media (min-width: 48rem) {
.about-hero__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-wide); }
}
.about-hero__cols > * > :last-child { margin-bottom: 0; }
/* 397 x 645 on the source. */
.about-hero__media { aspect-ratio: 397 / 645; }
/* Doctors intro. The third track holds only the CTA and is sized to it,
* which is what the source's 278px column amounts to. */
.about-doctors__head {
display: grid;
gap: var(--space-m);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.about-doctors__head {
grid-template-columns: minmax(0, 379fr) minmax(0, 632fr) auto;
gap: var(--space-l);
align-items: center;
}
/* The source's three columns are each 112px tall — the eyebrow+heading
* stack sets the height and the other two centre against it. Stretching
* all three to that common height is what makes this read as one row
* rather than three loose blocks. */
.about-doctors__head > * {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 112px;
}
}
/* The CTA sits to the right of its track on the source. */
@media (min-width: 60rem) {
.about-doctors__cta { justify-self: end; }
}
/* The source keeps the doctors heading in its own band, separate from the
* cards, so the padding lives per band rather than on one section. Its
* three card bands are a single grid here, so that grid's row carries the
* run-out below the last card. */
.about-doctors--head { padding-block: var(--space-3xl); }
/* 120px of run-out below the last doctor card, before the closing band.
* This sits on the class, NOT on :last-of-type - the row is the 4th of five
* s on the page, so :last-of-type never matched it and the padding
* silently did nothing. */
.about-doctors--row { padding-block: 0 var(--space-3xl); }
/* Doctor cards, three-up. .grid-3 would land on four tracks at 1290; the
* source holds three, so this band states the count. The cards come from
* Rails, so the count can change: a short last row (a lone card, or a lone
* pair at three-up) is centred rather than left in the first track (owner,
* 2026-10-03), with every card spanning two of doubled columns. */
.doctor-grid {
display: grid;
gap: var(--space-m);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
.doctor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doctor-grid > * { grid-column: span 2; }
.doctor-grid > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}
@media (min-width: 60rem) {
.doctor-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.doctor-grid > :last-child:nth-child(2n + 1) { grid-column: span 2; }
.doctor-grid > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.doctor-grid > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
/* The source's cards carry 50px of padding and no border — the white sits
* on the band's grey, which is the whole separation. Ours keeps a hairline
* for the case where a card lands on white. */
.about-doctors .doctor-card {
padding: var(--space-xl);
/* centre, not start: the base .doctor-card centres and this was overriding
* it. Names and qualifications read better centred in a card this wide. */
text-align: center;
}
/* The cards stretch to a common height per row, as the source's do. */
.doctor-grid > .doctor-card { height: 100%; }
/* Closing band. 619/621 is even, so 1fr/1fr. */
.about-close__row {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.about-close__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--space-l) + var(--space-2xs)); }
}
.about-close__lead > :last-child { margin-bottom: 0; }
.about-close__lead h2 { margin-top: 0; }
/* The source puts a full-width hairline between the heading and the copy —
* an Elementor divider widget, not a border on the heading. */
.rule {
height: 0;
margin: var(--space-m) 0;
border: 0;
/* Brand red, not the neutral border token: this divider is a deliberate
* accent under the closing heading, not a structural hairline. */
border-top: var(--border-width-s) solid var(--tertiary-line);
}
/* 599 x 399 on the source. */
.about-close__media {
aspect-ratio: 599 / 399;
margin-top: var(--space-m);
}
/* 541 x 766 on the source. */
.about-close__survey { aspect-ratio: 541 / 766; }
/* ═══════════════════════════════════════════════════════════════════════
* /contact ───────────────────────────────────────────────────────────
* Source at 1440 (container 1290), band by band:
* 1 hero 784 + 436, gap 70; copy centred against a 436x871 photo (r15)
* 2 navy detail strip, four 360px tracks, 20px icons
* 3 centred head, then a 700x700 photo centred full-width, then a
* 3x430 row: navy Open Hours card | spacer | rust feedback card,
* both cards r15 with 70px padding
* ═══════════════════════════════════════════════════════════════════ */
.contact-hero {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
@media (min-width: 60rem) {
.contact-hero {
/* 784/436 at 1290 with a 70px gap. */
grid-template-columns: 784fr 436fr;
column-gap: var(--space-xl);
}
}
.contact-hero__lead > :last-child { margin-bottom: 0; }
/* 436 x 871 on the source. */
.contact-hero__media { aspect-ratio: 436 / 871; }
/* The 700x700 photo is centred on the page, not stretched to the
* container — the source caps it at 700 and centres. */
.contact-photo {
width: min(100%, var(--contact-photo-cap));
margin-inline: auto;
aspect-ratio: 1;
}
/* The card row. Source is three 430px tracks with the middle one empty and
* the rust card raised 240px so it overlaps the photo above. We put the
* form in the middle track (the source's form is the same fields, behind a
* popup) so the row reads as three columns as the source does. */
.contact-cards {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
margin-top: var(--space-xl);
align-items: start;
}
@media (min-width: 60rem) {
/* Two 430px cards flanking the photo, both raised over it as the source
* has them: the rust feedback card starts 26% down the 700px photo on the
* right, the navy hours card 60% down on the left - so they sit at
* different heights rather than as a tidy pair. The negative top margin is
* what lifts the row over the photo above it. */
.contact-cards {
/* Widened from the source's 430 against a 580 photo: at laptop
* widths that left the hours card ~370px, where the intro copy
* wrapped to four lines and the day/time rows ran out of room
* between the day and the time. The photo gives up the difference -
* it is a soft background element behind both cards, so losing a
* little width costs nothing, and the cards stop reading cramped. */
grid-template-columns: minmax(0, 520fr) minmax(0, 400fr) minmax(0, 520fr);
align-items: start;
position: relative;
/* Lift the whole row so the FEEDBACK card starts 26% down the photo,
* as measured on the source. The photo is square and capped at 700px,
* so 74% of its height is what has to be pulled back - expressed
* against the photo's own width so it tracks if the cap changes. */
margin-top: calc(-0.74 * min(100%, var(--contact-photo-cap)));
}
/* The two cards sit at DIFFERENT heights on the source rather than as a
* tidy pair: feedback 26% down the photo, hours 60% down. The 34%
* difference is this offset. */
.contact-cards__hours { grid-column: 1; margin-top: calc(0.58 * min(100%, var(--contact-photo-cap))); }
.contact-cards__feedback { grid-column: 3; margin-top: 0; }
}
/* A hairline under the feedback copy, above its button - the source has an
* Elementor divider there. On the rust ground it needs its own colour rather
* than the neutral --border. */
.rule--on-red {
border-top-color: color-mix(in oklab, var(--tertiary-on-solid) 45%, transparent);
margin-block: var(--space-m);
}
/* The source's button on the rust card is inverted: white ground, rust label. */
.btn--on-red {
background: var(--tertiary-on-solid);
color: var(--tertiary-on-soft);
}
.btn--on-red:hover {
background: var(--tertiary-on-solid);
color: var(--red-hover);
}
/* Both cards carry 70px of padding and a 15px radius on the source. */
.contact-cards__hours,
.contact-cards__feedback {
border-radius: var(--radius-l);
padding: var(--space-xl);
/* No height:100% - the two cards are staggered over the photo, so
* stretching them to the grid row made both run far past their content
* and past the photo's bottom edge. They size to their own copy, as the
* source's 420px and 461px cards do. */
align-self: start;
}
.contact-cards__hours > :last-child,
.contact-cards__feedback > :last-child { margin-bottom: 0; }
/* The hours read as day ———— time on the source, the same connector
* treatment /appointment already uses. .appt-hours supplies it; these two
* rules only recolour it for the navy ground it sits on here. */
.contact-cards__hours .appt-hours .hours-table td:first-child,
.contact-cards__hours .appt-hours .hours-table td:last-child {
color: var(--brand-on-solid);
}
.contact-cards__hours .appt-hours .hours-table td:first-child::after {
border-top-color: color-mix(in oklab, var(--brand-on-solid) 45%, transparent);
}
/* Hero. The source stretches both tracks to the band height (copy centred
* inside its own column against the 871px photo); we were centring the
* COLUMNS, which left the two tops 356px apart at 1440 and read as one
* column to a top-alignment probe. Same correction as /services' panel. */
@media (min-width: 60rem) {
.contact-hero { align-items: stretch; }
.contact-hero__lead {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* ═══════════════════════════════════════════════════════════════════════
* /fees ──────────────────────────────────────────────────────────────
* Source at 1440 (container 1290) band by band:
* 0 hero + billing summary IN ONE BAND — top row 486 + 729, gap 75,
* photo right at 729x547 r20; below it three 363px tracks, gap 100
* 1 rust strip
* 2 fee tables: two white r15 panels, 516 + 774, gap 30. The NARROW
* panel holds Private Patients AND Other Fees; the wide one holds
* Medical Examinations. (.fees-panels is already 2fr/3fr = 516/774.)
* 3 three billing notes, 363px tracks, gap 100, 50px left inset
* ═══════════════════════════════════════════════════════════════════════ */
/* The hero and the billing summary are one band on the source, so the
* padding belongs to the section and the two rows sit inside it. */
.fees-hero { padding-block: var(--space-3xl) var(--space-2xl); }
.fees-hero__row {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
@media (min-width: 60rem) {
/* 486 + 729 at a 75px gap. */
.fees-hero__row { grid-template-columns: minmax(0, 486fr) minmax(0, 729fr); gap: calc(var(--space-xl) + var(--space-xs)); }
}
.fees-hero__lead > :last-child { margin-bottom: 0; }
/* 729 x 547 on the source. */
.fees-hero__media { aspect-ratio: 729 / 547; }
/* Legal pages (privacy, terms) ───────────────────────────────────────
* Same shape as the fees hero: a copy track beside an image, so the two
* legal pages open on something other than a wall of text. Their bodies
* are long .prose blocks, so the hero carries the only image on the page
* and the row is sized to a landscape crop rather than the fees ratio. */
.legal-hero { padding-block: var(--space-3xl) var(--space-2xl); }
.legal-hero__row {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
@media (min-width: 60rem) {
.legal-hero__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--space-xl) + var(--space-xs)); }
}
.legal-hero__lead > :last-child { margin-bottom: 0; }
.legal-hero__media { aspect-ratio: 3 / 2; }
/* The three summary tracks below the hero row. */
.fees-summary {
display: grid;
gap: var(--space-m);
grid-template-columns: minmax(0, 1fr);
margin-top: var(--space-xl);
}
@media (min-width: 48rem) and (max-width: 59.999rem) {
.fees-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fees-summary > * { grid-column: span 2; }
.fees-summary > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}
@media (min-width: 60rem) {
.fees-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter-wide); }
}
.fees-summary > * > :last-child { margin-bottom: 0; }
/* The hero summary's ticklists ran with the default list rhythm, which is set
* for running copy; these are short scannable qualifiers and read tighter. */
.fees-summary .ticklist li { margin-bottom: var(--space-3xs); }
.fees-summary .ticklist li:last-child { margin-bottom: 0; }
/* The second heading inside a panel needs air above it — the source runs
* Private Patients and Other Fees down one panel with 40px between. */
.fees-tables .panel h2 + .deflist { margin-top: var(--space-m); }
.fees-tables .panel .deflist + h2 { margin-top: var(--space-l); }
/* The billing notes. Three tracks with the source's left inset; plain
* blocks, not cards. */
.fees-notes__grid {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
.fees-notes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter-wide); }
/* 50px of left padding on each track, as the source sets. */
.fees-notes__grid > * { padding-left: var(--space-xl); }
}
/* Brand red, as the other section headings on this page carry. */
.fees-notes__grid h3 {
margin-top: 0;
font-size: var(--size-1);
color: var(--tertiary-on-soft);
}
/* A rule between the three notes. Drawn as a left border on the 2nd and 3rd
* tracks rather than a divider element, so it appears only where two columns
* actually sit side by side - below 60rem the blocks stack and a vertical
* rule would be meaningless, so it becomes a horizontal one between them. */
@media (min-width: 60rem) {
.fees-notes__grid > * + * {
border-left: var(--border-width-s) solid var(--border);
/* The wide gap plus the track's own inset would leave the rule hard
* against the text; split the gap so it sits centred. */
margin-left: calc(var(--gutter-wide) / -2);
padding-left: calc(var(--space-xl) + var(--gutter-wide) / 2);
}
}
@media (max-width: 59.999rem) {
.fees-notes__grid > * + * {
border-top: var(--border-width-s) solid var(--border);
padding-top: var(--space-l);
}
}
/* The source sets 30px between the two fee panels, not the 40px grid
* gutter; at 1290 that is what makes the tracks 516 + 774 rather than
* 500 + 750. Scoped to this page so .fees-panels stays reusable. */
@media (min-width: 60rem) {
.fees-tables .fees-panels { gap: var(--space-m); }
}
/* ═══════════════════════════════════════════════════════════════════════
* /practice-policies ─────────────────────────────────────────────────
* Source at 1440 (container 1290) band by band:
* 0 hero: stacked eyebrow/H1/lede/CTA, then three 410px photos r20 in a
* row at a 30px gap (the middle one 410x359, the outer two square)
* 1 rust strip
* 2 eleven policy cards, white r15, 50px padding, two 630px columns,
* 30px gap — masonry-ish: 6 cards left, 5 right
* 3 HCCC: a 774 + 516 heading row, then four 323px contact tracks
* ═══════════════════════════════════════════════════════════════════════ */
/* The source CENTRES the hero block — eyebrow, H1, lede and CTA all sit on
* the container's centre line, unlike the other inner pages which start
* them. Scoped to this page so .section__head stays start-aligned. */
.pp-hero .section__head {
max-width: none;
text-align: center;
}
.pp-hero .section__head .btn { margin-inline: auto; }
/* The source sets 30px between the three hero photos and between the
* policy cards, not the 40px grid gutter. */
@media (min-width: 48rem) {
.policy-gallery { gap: var(--space-m); }
}
@media (min-width: 60rem) {
.policy-grid { gap: var(--space-m); }
}
/* 50px of padding on the source's cards. */
@media (min-width: 60rem) {
.policy-grid .policy { padding: var(--space-xl); }
}
/* The HCCC heading row: the title takes 774 and the note 516, side by
* side, rather than stacking as a section head. */
.hccc__head {
display: grid;
gap: var(--space-m);
grid-template-columns: minmax(0, 1fr);
align-items: center;
margin-bottom: var(--space-xl);
}
@media (min-width: 60rem) {
.hccc__head { grid-template-columns: minmax(0, 774fr) minmax(0, 516fr); }
}
/* Four contact facts, 323px each on the source. Ours keeps the site's
* .feature icon-and-text pair — the source has no icon, but adding one is
* an enhancement to the row rather than a loss of content, and .feature is
* the established treatment for a labelled fact elsewhere on this site. */
.hccc__facts {
display: grid;
gap: var(--space-m);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
.hccc__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
.hccc__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The source insets the first track by 50px and leaves the rest flush. */
.hccc__facts > :first-child { padding-left: var(--space-xl); }
}
/* The source gives each fact 20px of vertical padding, which is what makes
* these read as a row of blocks rather than four cramped lines. */
.hccc__facts > * { padding-block: var(--space-s); }
/* .feature h3 (0,1,1) already sets --step-0 and the red; restating it here
* would be a second rule doing the same job. Only the top margin needs
* clearing, which .feature h3 does not set. */
.hccc__facts .feature h3 { margin-top: 0; }
/* The icon sits centred ABOVE its heading at every width here, not beside it -
* these are four short contact facts, and the stacked form reads as a row of
* equal items rather than a ragged list. */
.hccc__facts .feature {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
gap: var(--space-2xs);
}
@media (max-width: 47.999rem) {
.hccc__facts > * + * {
border-top: var(--border-width-s) solid var(--border);
padding-top: var(--space-m);
}
/* The first-track inset is a wide-viewport rule; centred blocks must not
* carry it or they sit off-centre. */
.hccc__facts > :first-child { padding-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
* / (homepage) ───────────────────────────────────────────────────────
* Re-measured 2026-09-03. The source has EIGHT top-level content bands,
* not one tall band: the earlier reading collapsed them because this page
* (like /services) uses Elementor's canvas template and emits no ,
* so a `querySelector('main') || body` sweep saw header/content/footer.
* Source geometry at 1440 (container 1290):
* 1 hero full-bleed bg photo 1440x798, navy bar INSIDE the band
* (369 + 493 + 308, r15) overlapping its lower edge
* 2 pillars four 263px tracks
* 3 tiles two 410x277 photos + a navy Practice Hours panel
* 4 about 283x283 imgs + a 283x595 bg photo
* 5 services 595x967 photo beside a 2x2 service grid
* 6 safety 595 + 595, gap 100
* 7 FAQ 297 + 893, gap 100 - photo LEFT of heading + accordion
* 8 visit 397 + 793, gap 100; the 793x445 "photo" on the source is a
* flat grey placeholder PNG (1-bit, 543 bytes), so our navy
* panel is the faithful equivalent - there is no photo to keep
* ═══════════════════════════════════════════════════════════════════════ */
/* The navy bar belongs to the hero band on the source, not to a band of its
* own. .hero is already a grid, so this is simply its second row; the bar's
* own negative margin still lifts it over the photo. */
/* The navy call-us bar straddles the hero's bottom edge: half of it over the
* photo, half below. translateY(50%) puts its own midpoint on the edge, and
* the hero gains that half back as padding so the bar does not collide with
* whatever follows. */
.hero__bar { align-self: end; position: relative; z-index: var(--layer-base); }
@media (min-width: 48rem) {
/* Half the BAR's height, not the wrapper's: .contact-bar carries a -60px
* top margin of its own, so translating the wrapper by 50% left the split
* at 108/48 rather than even. Adding that margin back centres it. */
.hero__bar { transform: translateY(calc(50% + var(--space-m))); }
/* A little more room above the copy than the band had; the source runs
* taller here. padding-bottom stays 0 because the bar straddles the edge
* and supplies its own space below. */
.hero { padding-top: var(--space-2xl); padding-bottom: 0; }
.hero + * { margin-top: var(--space-2xl); }
}
/* The third about-section image is a TALL 283x595 on the source (set there as
* a CSS background, which is why an ![]()
-only sweep missed it). Spanning both
* grid columns would make it landscape, so it takes the full height beside the
* two square photos. */
.home-about__media { align-items: start; }
.home-about__tall {
grid-column: 1 / -1;
width: min(100%, 283px);
aspect-ratio: 283 / 595;
object-fit: cover;
border-radius: var(--radius-l);
justify-self: center;
}
@media (min-width: 48rem) {
/* Beside the pair rather than under it: two squares stacked left, the tall
* photo spanning both rows on the right, as the source lays it out. */
.home-about__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-about__tall {
grid-column: 2;
grid-row: 1 / span 2;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
}
/* Visit us: the map fills the right column at the source's 793x445, with the
* navy Find Us card overlapping its bottom edge and offset to the left, rather
* than sitting as a plain panel. */
.home-visit__map { position: relative; }
.home-visit__map .media-frame {
aspect-ratio: 793 / 445;
border-radius: var(--radius-l);
overflow: hidden;
}
.home-visit__map .media-frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.home-visit__card { border-radius: var(--radius-l); }
@media (min-width: 60rem) {
.home-visit__card {
position: relative;
z-index: var(--layer-base);
/* Overlap the map's bottom edge, inset equally on both sides so the
* card is centred on the map rather than hanging off its left. */
margin-top: calc(-1 * var(--space-2xl));
margin-inline: var(--space-l);
}
}
/* The resources lead image sat a full section's padding below the hero copy
* and carried .is-flush, which explicitly zeroes the radius. It now takes the
* site's image radius and sits close under the copy it belongs to. */
/* Close under the hero copy rather than a full section's padding below it.
* The hero's own 120px bottom padding is what actually held the image away;
* that is overridden below, next to the rule that sets it, so source order
* does not undo this. */
.resources-lead { margin-top: 0; padding-block: 0 var(--space-xl); }
.resources-lead .section__head { margin-bottom: var(--space-s); }
/* Two-line headings otherwise push their accent rule and body copy down, so
* the six cards read as ragged. Reserve two lines for every heading. */
.resources-panel .card--link h3 { min-height: calc(2 * 1.25em); }
.resources-lead .u-container { padding-top: 0; }
.resources-lead__media {
/* Taller than the 1290x350 strip it was - the band reads as a token
* gesture at that height and the photo has room to be a real image. */
aspect-ratio: 1290 / 480;
border-radius: var(--radius-l);
overflow: hidden;
}
/* Trusted health information: six items read better as a balanced 3x2 than as
* a 3-wide grid that reflows unevenly, and the cards needed some weight - a
* surface, a hairline, and an accent rule that fills in on hover so the row
* reads as a set of links rather than plain text. */
@media (min-width: 51.25rem) and (max-width: 61.999rem) {
.resources-panel .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.resources-panel .card--link {
position: relative;
/* Equal heights across the row, and real padding - the cards inherited
* none, so the copy sat hard against all four edges. */
height: 100%;
background: var(--surface-raised);
border: var(--border-width-s) solid var(--border);
border-radius: var(--radius-m);
overflow: hidden;
transition: border-color 120ms ease, transform 120ms ease;
}
.resources-panel .card--link .card__body { padding: var(--space-l); }
.resources-panel .card--link p:last-child { margin-bottom: 0; }
/* An accent rule UNDER the heading rather than in the card's top-left corner,
* where a square-ended bar sat awkwardly inside the border radius. It grows on
* hover or keyboard focus. */
.resources-panel .card--link h3::after {
content: "";
display: block;
height: 3px;
width: var(--space-2xl);
margin-top: var(--space-2xs);
border-radius: 2px;
background: var(--tertiary-solid);
transition: width 160ms ease;
}
.resources-panel .card--link:hover,
.resources-panel .card--link:focus-within {
border-color: var(--tertiary-line);
transform: translateY(-2px);
}
.resources-panel .card--link:hover h3::after,
.resources-panel .card--link:focus-within h3::after { width: 100%; }
.resources-panel .card--link h3 { margin-top: 0; }
.resources-panel .card--link h3 a {
color: var(--brand-on-soft);
text-decoration: none;
}
.resources-panel .card--link:hover h3 a { color: var(--tertiary-on-soft); }
/* The whole card is the target, not just the heading text. */
.resources-panel .card--link h3 a::after { content: ""; position: absolute; inset: 0; }
/* Red bullets in the safety list - the marker is the one part of a list that
* can carry the accent without shouting. */
.home-safety ul li::marker { color: var(--tertiary-on-soft); }
/* Safety band. 595 + 595 with a 100px gap, and both columns stretched — the
* generic .split centres them, which offsets the two tops far enough that a
* top-alignment probe reads one column. */
@media (min-width: 60rem) {
.home-safety {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-2xl);
align-items: stretch;
}
.home-safety > * { align-self: center; }
}
/* FAQ band. 297 + 893, gap 100. The photo is a column of its own. */
.home-faq {
display: grid;
gap: var(--space-l);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 60rem) {
.home-faq {
grid-template-columns: minmax(0, 297fr) minmax(0, 893fr);
column-gap: var(--space-2xl);
}
}
/* 297 x 397 on the source. */
.home-faq__media { aspect-ratio: 297 / 397; }
.home-faq__body > :first-child { margin-top: 0; }
/* Visit band. 397 + 793, gap 100, both columns stretched for the same
* reason as the safety band above. */
@media (min-width: 60rem) {
.home-visit {
grid-template-columns: minmax(0, 397fr) minmax(0, 793fr);
column-gap: var(--space-2xl);
align-items: stretch;
}
.home-visit > * { align-self: center; }
}
/* Scroll entrance animations ──────────────────────────────────────────
* A fade with a small directional offset, matching the live site's
* restraint: it is almost entirely a plain fade there, with two
* slide-ups, so the travel here is deliberately short (18px, 26px for
* the up/down pair) rather than the 40-100px a stock library uses.
*
* Elements are hidden by [data-reveal] and shown when the observer adds
* [data-revealed]. The hiding rule is gated on .js so that a visitor
* without JavaScript - or if the script fails - sees the page fully,
* rather than a blank one. Same reason the observer falls back to
* revealing everything if IntersectionObserver is missing.
*/
.js [data-reveal] {
opacity: 0;
transition:
opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.js [data-reveal="up"] { transform: translateY(26px); }
.js [data-reveal="down"] { transform: translateY(-26px); }
.js [data-reveal="left"] { transform: translateX(-18px); }
.js [data-reveal="right"] { transform: translateX(18px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal][data-revealed] {
opacity: 1;
transform: none;
}
/* Once it has played, drop the compositor hint and the transform so the
* element cannot interfere with position:fixed or sticky descendants. */
.js [data-reveal][data-reveal-done] {
will-change: auto;
transition: none;
}
/* Motion is decoration here - honour the OS setting exactly. */
@media (prefers-reduced-motion: reduce) {
.js [data-reveal],
.js [data-reveal="up"],
.js [data-reveal="down"],
.js [data-reveal="left"],
.js [data-reveal="right"] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── 404 ──────────────────────────────────────────────────────────────
* Served for any unmatched path, so it stands alone: say what happened, then
* offer the way back rather than leaving a dead end.
*
* Deliberately written against fallbacks rather than this site's own token
* names - every site in the fleet has a different vocabulary, and a 404 that
* silently loses its layout because one variable is spelt differently is
* worse than one that is slightly plainer. */
.notfound {
padding-block: var(--space-3xl) var(--space-2xl);
text-align: center;
}
.notfound__inner { max-width: 46rem; margin-inline: auto; }
.notfound__code {
font-size: var(--size-5);
font-weight: var(--weight-bold);
line-height: var(--leading);
margin: 0 0 var(--space-2xs);
opacity: 0.55;
}
.notfound h1 { margin-top: 0; }
.notfound__lede { font-size: var(--size-1); line-height: var(--leading-body); margin-inline: auto; max-width: 40rem; }
.notfound__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
justify-content: center;
margin-top: var(--space-l);
}
.notfound__links {
margin-top: var(--space-xl);
padding-top: var(--space-l);
border-top: var(--border-width-s) solid currentColor;
border-color: color-mix(in oklab, currentColor 22%, transparent);
}
.notfound__links-title {
font-size: var(--size-0);
text-transform: uppercase;
letter-spacing: var(--tracking-caps-total);
margin: 0 0 var(--space-s);
}
.notfound__links ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-l);
justify-content: center;
}
.notfound__links a {
display: inline-block;
min-height: 24px; /* WCAG 2.5.8 target size */
line-height: var(--leading-body);
font-weight: var(--weight-strong);
}