elements, and because a band that deliberately runs flush * to its neighbour needs to say so out loud via --flush. * * Do not hand-roll the padding. --space-l-2xl is the site-wide "40px phone / * 80px desktop" step, already a clamp; a bespoke value breaks the rhythm. * * Verify with bandpad.mjs, which measures the real rendered ink gap between * adjacent bands and fails under 40px. */ .section { padding-block: var(--space-l-2xl); } .section--tight { padding-block: var(--space-l); } .section--flush { padding-block: 0; } /* A centred intro (eyebrow + heading + standfirst) above a band's content. */ .section__head { max-width: 46rem; margin-inline: auto; text-align: center; } /* * 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); } } /* * Doctor avatar fallback * Shows a gradient + person silhouette when no photo exists. The gradient * is Dials' band pattern (tokens.md, "Gradients are patterns"): from one * fill to another, decoration only, so no text is ever set on it. * The has onerror="this.style.display='none'" which hides * the broken image, revealing this CSS background underneath. * * Derived from the site's own brand fill so a missing photo reads as part of * this practice rather than as a stray swatch. */ :root, [data-dials], .is-light, .is-dark { --avatar-shade: color-mix(in oklab, var(--brand-solid) 85%, black); /* the avatar gradient's darker end: the brand fill, a step darker. color-mix() rather than relative colour, so Dials' fallback browsers draw it too */ } .doctor-avatar { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-s); background: linear-gradient(135deg, var(--avatar-shade), var(--brand-solid)); display: flex; align-items: center; justify-content: center; } /* The silhouette is an icon on the brand fill, so it is drawn in the fill's * own text colour, --brand-on-solid, through a mask (the shape only), and * keeps 3:1 in light and dark. A white silhouette fell to 2.8:1 on a dark * page, where the fill is lifted (mf-websites#431). */ .doctor-avatar::after { content: ""; position: absolute; width: 40%; height: 40%; background-color: var(--brand-on-solid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E") center / contain no-repeat; } .doctor-avatar img { position: relative; z-index: var(--layer-base); width: 100%; height: 100%; object-fit: cover; display: block; } /* 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; } /* ── 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-6); /* this site's display step: live's 60px titles */ font-weight: var(--weight-heading); line-height: var(--leading); letter-spacing: var(--tracking); 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); letter-spacing: var(--tracking); 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); /* capitals */ 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); font-weight: var(--weight-strong); } /* =================================================================== * Kareela Family Practice — site layer * * Built on Dials' fluid scale (--size-*, --space-*), never on literal px: * the last three migrations hard-coded type and spacing and broke at * awkward widths. Colours, type and space come from the dials above. * =================================================================== */ :root { /* Named composition, a sum of steps: live pads its bands 80px at * desktop, a step past --space-l-2xl's 64. px at 390 / 1440: 38 / 80. */ --space-band: calc(var(--space-l-2xl) + var(--space-s)); /* Buttons AND fields: one corner, live's 8px, between Dials' --radius-s * (6.25px) and --radius-m (12.5px), so it follows --radius-base. The * search box takes it by construction; see Form controls & focus. */ --control-radius: calc(var(--radius-base) * 0.64px); /* The fields keep the 1.3 line they always had (a textarea's lines); * the Form controls section's default is Dials' --leading (1.5 here). */ --field-leading: var(--leading-snug); /* Colours the site composes from the dials, each declared once: * --navy-deep live's copyright bar (#1B2A49) and the quick-link tiles' * hover: the navy a step darker. color-mix() rather than * relative colour, so older browsers draw it too. * --kfp-gold the gold as LETTERING AND RULES on the navy: every * button's capitals and frame, the footer headings, the * search panel's top rule. Dials' own rule would put the * navy's text colour (white) there; the gold on the navy * is the practice's button, at 7.1:1, so it is kept, by * name. Older browsers darken Dials' gold fill to an olive * for white text, which would fail on the navy, so there * it is the gold dial itself (below). * --kfp-mark a search match's highlight: the gold at half strength * behind navy text. */ --navy-deep: color-mix(in oklab, var(--brand-solid) 92%, black); --kfp-gold: var(--secondary-solid); --kfp-mark: color-mix(in oklab, var(--secondary-solid) 50%, transparent); } /* The gold lettering in older browsers (no relative colour: iOS 16 and 17, * Safari before 18, Chrome and Edge before 123, Firefox before 128), under * Dials' own fallback condition: the gold dial as set, since Dials' fallback * gold fill is pulled towards black for white text. */ @supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) { :root { --kfp-gold: var(--secondary); } } /* Navy grounds (the footer and its darker copyright bar, the photo heroes * under their navy scrim): a navy ring would vanish, so it is white there. */ .site-footer, .hero--home, .page-hero { --focus-ring: var(--brand-on-solid); } /* Every band takes live's 80px rhythm. :where() keeps this at the template * rule's specificity, so the per-band rules below still win, and leaves * .section--tight / --flush alone. */ .section:where(:not(.section--tight, .section--flush)) { padding-block: var(--space-band); } /* --- Type, as measured on live -------------------------------------- * Body copy #595959 (Dials' --text, from the ink in the dials) on a 2.0 * line (16/32), list items 1.75 (16/28); headings Amiko in the navy, on * one 1.18 line and -0.02em at every size, as live sets them (Dials' size * curve would loosen the smaller ones); bold runs at 700, the heading * weight, not Dials' body + 200. */ main p { line-height: var(--leading-copy); } main li { line-height: var(--leading-copy); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: var(--leading-display); letter-spacing: var(--tracking-heading); color: var(--brand-on-soft); } strong, b { font-weight: var(--weight-heading); } /* --- Announcement strip ------------------------------------------- */ .alertbar { background: var(--secondary-solid); color: var(--secondary-on-solid); /* black on the gold (Dials' rule: text on a fill is its on- colour); live: navy, 16px bold on a 32px line */ font-size: var(--size-0); font-weight: var(--weight-heading); } .alertbar__inner { padding-block: var(--space-2xs); display: grid; gap: 0; text-align: center; } .alertbar p { margin: 0; line-height: var(--leading-copy); } .alertbar a { color: inherit; text-decoration: underline; } /* Hidden on phones, where three lines of notices push the page below the fold. */ @media (max-width: 600px) { .alertbar { display: none; } } /* --- Header ------------------------------------------------------- */ .site-header { background: var(--surface); border-bottom: var(--border-width-s) solid var(--border); } /* Logo left, Book Appointment hard right, nav between them. When the nav * needs more room than the row has it wraps to its own full-width line and * centres there -- the button stays up on the logo's row rather than being * pushed down, because `order` puts it before the nav in the flex flow while * `margin-inline-start: auto` on the brand's sibling holds it to the right. */ /* space-between spreads logo | nav | button across the row without any * auto margin. An auto margin on the CTA claimed every spare pixel, which * left no room for the button itself and wrapped it onto its own line -- * twice, in two different arrangements, before this was the actual cause. */ /* Logo | menu | button, ALWAYS one row at desktop. When space runs short it * is the menu ITEMS that wrap onto a second line inside the middle column -- * the menu block itself never drops below the logo and button. */ .site-header__inner { display: flex; align-items: center; gap: var(--space-s); padding-block: var(--space-2xs); flex-wrap: nowrap; } .brand { flex: 0 0 auto; line-height: 0; } .brand img { height: 9rem; width: auto; } /* live: 188x144; smaller in the mobile block */ /* Last on the row and hard right. `order: 3` keeps it after the nav * visually even though it comes before it in the markup -- the markup order * is what guarantees it stays on the FIRST flex line when the nav wraps. */ /* Live: 282x48, 18px gold caps. Two classes, so it outranks .btn--kfp's size. */ .nav-cta { flex: 0 0 auto; order: 3; } /* Header CTA: the one button that should be noticed on every page, so a * touch larger than the rest and lifted off the white header by a shadow. */ .btn--kfp.nav-cta { font-size: var(--size-0); letter-spacing: var(--tracking-cta); padding: var(--space-xs) var(--space-m); min-height: 3rem; box-shadow: var(--shadow-s); } .btn--kfp.nav-cta:hover { box-shadow: var(--shadow-m); } /* Nav sits between the logo and the button while it fits, then takes a full * row of its own and centres. `order: 2` puts it BEFORE the button in the * flow, so when it wraps it is the nav that moves, not the CTA. * * flex: 0 1 auto, never 1 1 auto: growing it to fill the row made it 1160px * in a 1240px container and forced a wrap at every width, including ones * where the three items genuinely fit (90 + 193 + 846 = 1129). */ /* Inline between the logo and the button while there is room. `flex-basis: * auto` so it sizes to its content and stays on the row; it only wraps when * the three genuinely do not fit, and the rule below centres it when that * happens. Not `flex: 1 1 100%`, which forced its own row at every width. */ /* flex: 1 1 0 + min-width: 0 lets the middle column shrink below its * content width, which is what makes the list inside it wrap. */ .primary-nav { order: 2; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } /* The nav centres on its own row only ONCE IT HAS WRAPPED. `margin-inline: * auto` unconditionally would eat all the free space on the shared row and * push the CTA off it -- which is exactly what happened. Giving the wrapped * state its own breakpoint keeps the three items together while they fit, * and centres the nav only when it genuinely needs the full width. * * 1200px is measured, not guessed: brand 90 + nav 846 + cta 193 + two 20px * gaps = 1169 inside a container that is viewport minus 2x40 gutters. */ /* Measured: logo 90 + nav 846 + button 193 + 2x20 gap = 1169 in a 1160 * content box -- 9px over, which is why all three could not share the row. * Tightening the nav's own gap and item padding recovers ~60px. */ .nav-list { font-family: var(--font-accent, var(--font-body)); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-3xs); list-style: none; margin: 0; padding: 0; align-items: center; } /* Top level, as measured on live: uppercase 16px bold, 0.03em tracking, * grey #646464. Parents are real links; the chevron beside them is a * separate button that opens the submenu for touch and keyboard users. */ .nav-list > li { display: flex; align-items: center; } .nav-list > li > a { display: block; padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-2xs); color: var(--text-muted); text-decoration: none; font-size: var(--size-0); font-weight: var(--weight-heading); letter-spacing: var(--tracking-caps-total); text-transform: uppercase; } .nav-list > li:not(.has-sub) > a { padding-inline-end: var(--space-2xs); } .nav-list > li > a:hover { color: var(--brand-on-soft); } .nav-list a[aria-current="page"] { color: var(--brand-on-soft); } .nav-sub-toggle { display: inline-flex; align-items: center; justify-content: center; /* 44px tall for the tap target; the negative block margins give the * extra height back, so the nav row is no taller than it was. */ width: 1.5rem; min-block-size: var(--target-min); margin-block: calc(var(--target-min) / -4); padding: 0; margin-inline-end: var(--space-3xs); background: none; border: 0; cursor: pointer; color: var(--text-muted); } .nav-sub-toggle svg { width: 0.75rem; height: 0.75rem; transition: transform var(--duration-fast); } .nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* Dropdowns, as on live: plain white square panel, uppercase items at * weight 400, 15px 60px 15px 15px padding, navy highlight on hover. Opened * by hover/focus at desktop and by the chevron button on touch. Only the * DIRECT child submenu opens (the > matters: without it, hovering Services * would also open Women's Health). display:none while closed, never a * transform, which would still add to scroll width. */ .has-sub { position: relative; } .nav-sub { display: none; position: absolute; top: 100%; inset-inline-start: 0; min-width: 17rem; background: var(--surface-raised); border: var(--border-width-s) solid var(--border); border-radius: var(--radius-s); list-style: none; margin: 0; padding: 0; z-index: var(--layer-raised); } .has-sub:hover > .nav-sub, .has-sub:focus-within > .nav-sub, .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: block; } .nav-sub > li { position: relative; display: flex; align-items: center; } .nav-sub a { flex: 1 1 auto; display: block; padding: var(--space-s) var(--space-2xl) var(--space-s) var(--space-s); color: var(--text-muted); text-decoration: none; font-size: var(--size-0); font-weight: var(--weight-body); text-transform: uppercase; white-space: nowrap; } .nav-sub > li:hover > a, .nav-sub a:focus-visible { background: var(--brand-solid); color: var(--brand-on-solid); } .nav-sub .nav-sub-toggle { position: absolute; inset-inline-end: var(--space-xs); } .nav-sub .nav-sub-toggle svg { transform: rotate(-90deg); } .nav-sub > li:hover > .nav-sub-toggle { color: var(--brand-on-solid); } /* Third level (Women's Health) flies out to the right of its row -- or to * the LEFT when nav.js measures that the right would run off-screen (it did * at every width below 1600). Items may wrap so the flyout stays narrow. */ .nav-sub .nav-sub { top: 0; inset-inline-start: 100%; min-width: 0; width: max-content; max-width: 19rem; } .nav-sub .nav-sub a { white-space: normal; padding-inline-end: var(--space-s); } .nav-sub .has-sub.opens-left > .nav-sub { inset-inline-start: auto; inset-inline-end: 100%; } .nav-sub .has-sub.opens-left > .nav-sub-toggle svg { transform: rotate(90deg); } /* The last top-level submenu opens leftwards so it cannot run off-screen. */ .nav-list > li.has-sub:last-of-type > .nav-sub { inset-inline-start: auto; inset-inline-end: 0; } .nav-toggle { display: none; } /* --- Hero --------------------------------------------------------- */ .hero--home { position: relative; background: url("/assets/images/25410362_happy-boy-at-the-doctor-1920w.5eab5ca9b7.jpg") center / cover no-repeat; color: var(--brand-on-solid); isolation: isolate; } /* Live tints the hero with its NAVY at 0.8 on a ::before, not a neutral * scrim -- measured off the live element, which reports * background-color rgb(31,48,84) / opacity 0.8. */ .hero--home::before { content: ""; position: absolute; inset: 0; background: var(--brand-solid); opacity: 0.8; z-index: var(--layer-behind); } .hero__inner { padding-block: var(--space-3xl-4xl); max-width: 55rem; } /* live: ~129px above and below; title one line at 60px */ .hero__eyebrow { margin: 0; font-size: var(--size-1); opacity: 0.9; } .hero__title { margin: var(--space-3xs) 0 var(--space-xs); color: var(--brand-on-solid); font-size: var(--size-6); font-weight: var(--weight-body); line-height: var(--leading-body); } /* live: 60px in an 88px box */ .hero__lede { font-size: var(--size-0); line-height: var(--leading-copy); margin: 0; max-width: none; } /* live: 16/32, one line */ /* --- Quick links -------------------------------------------------- */ /* Live: ~100px under the hero, then only ~40px to the About band, and * ~230px from About down to the map. */ .section.quicklinks { padding-block: var(--space-2xl-3xl) 0; } .section.about-band { padding-block: var(--space-l) calc(var(--space-3xl-4xl) + var(--space-xl)); } .quicklinks__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-s); } /* Four tiles never split three-and-one: four across, then two by two, then * one column on a phone. (auto-fit left the fourth alone on its row from * 700 to 920px.) */ @media (max-width: 920px) { .quicklinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .quicklinks__grid { grid-template-columns: minmax(0, 1fr); } } /* Live: 285x220 with 40px 20px padding. */ .quicklinks__grid a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 13.75rem; padding: var(--space-l) var(--space-s); background: var(--brand-solid); color: var(--brand-on-solid); text-decoration: none; border-radius: var(--radius-l); font-size: var(--size-1); transition: background var(--duration-fast); } .quicklinks__grid a:hover { background: var(--navy-deep); } .quicklinks__grid a { flex-direction: column; gap: var(--space-2xs); } .quicklinks__icon { display: block; width: 3.75rem; height: 3.75rem; } .quicklinks__icon svg { width: 100%; height: 100%; display: block; } .quicklinks__label { font-size: var(--size-1); } /* --- About band --------------------------------------------------- */ /* Photo left, gold copy panel right -- live measures the image at x=120 w=491 * and the panel at x=631 w=689, i.e. roughly 5:7, not equal columns. */ .about-band__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 0; align-items: stretch; } /* Photo + panel read as one rounded card. The radius goes on the two halves, * not the grid: the grid is also the u-container, so its box is wider than * what shows. */ .about-band__media { border-radius: var(--radius-l) 0 0 var(--radius-l); overflow: hidden; } .about-band__panel { border-radius: 0 var(--radius-l) var(--radius-l) 0; } .about-band__media { display: flex; } .about-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Live's About panel is a slightly warmer gold than the alert bar (#E2B855), * so it is the TERTIARY role, set on the dials in :root. */ .about-band__panel { background: var(--tertiary-solid); color: var(--tertiary-on-solid); padding: var(--space-l) var(--space-xl); display: flex; flex-direction: column; justify-content: center; } .about-band__panel h2 { margin-block-start: 0; font-size: var(--size-5); font-weight: var(--weight-body); line-height: var(--leading-body); } /* Live sets the panel copy in the navy, not the body grey. */ .about-band__panel :is(h2, p) { color: var(--tertiary-on-solid); } /* black on the gold (live: navy) */ .about-band__panel p { margin: 0; } @media (max-width: 760px) { .about-band__grid { grid-template-columns: minmax(0, 1fr); } .about-band__media { border-radius: var(--radius-l) var(--radius-l) 0 0; } .about-band__panel { border-radius: 0 0 var(--radius-l) var(--radius-l); } } /* --- Find us ------------------------------------------------------ */ /* 350px to match live's Mapbox canvas exactly. */ .find-us__map { display: block; width: 100%; height: 350px; border: 0; border-radius: var(--radius-l); } /* --- Footer ------------------------------------------------------- */ .site-footer { background: var(--brand-solid); color: var(--brand-on-solid); } /* Four columns: the brand column a little wider for the blurb, the three * information columns equal. Two-up on tablet, stacked on phone. */ .footer-grid { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: var(--space-l) var(--space-xl); padding-block: var(--space-2xl); /* live: 64px above and below */ } @media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } } .footer-logo { height: 6rem; width: auto; display: block; margin-block-end: var(--space-s); } .footer-blurb { font-size: var(--size--1); line-height: var(--leading-body); margin: 0; max-width: 32ch; } /* Live: labels regular weight, values white. */ .footer-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3xs) var(--space-s); margin: 0; font-size: var(--size--1); line-height: var(--leading-body); } .footer-dl dt { font-weight: var(--weight-body); opacity: .8; } .footer-dl dd { margin: 0; } /* Live's footer headings are GOLD and bold on the navy, not white -- * measured #E3BA3D w700. The body copy beneath them stays white. One size * for every column so the tops line up. */ .footer-col__title { font-size: var(--size-0); margin: 0 0 var(--space-s); color: var(--kfp-gold); font-weight: var(--weight-heading); } .footer-afterhours ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); font-size: var(--size--1); line-height: var(--leading-body); } /* Service name on one line, its number beneath in bold -- scannable, and no * long "Name: number" lines wrapping mid-phrase. */ .footer-afterhours li { display: flex; flex-direction: column; } .footer-afterhours a { font-weight: var(--weight-heading); } .footer-note { margin: var(--space-xs) 0 0; font-size: var(--size--1); opacity: .8; } .site-footer a { color: var(--brand-on-solid); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* {{opening_hours_html}} -- the grouped table from Rails. */ .site-footer .hours-table { width: auto; margin: 0; border-collapse: collapse; font-size: var(--size--1); line-height: var(--leading-body); } .site-footer .hours-table td { padding: 0 var(--space-s) var(--space-3xs) 0; vertical-align: top; border: 0; background: none; } .site-footer .hours-table td:first-child { opacity: .8; white-space: nowrap; } .footer-copy { background: var(--navy-deep); /* live #1B2A49, one step darker than the footer navy */ color: var(--brand-on-solid); font-family: var(--font-accent, var(--font-body)); font-size: var(--size--1); line-height: var(--leading-body); padding-block: var(--space-m); } /* Copyright left, Mediflare credit centred, legal links right. */ .footer-copy__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-s) var(--space-l); } .footer-copy p { margin: 0; } .footer-copy .powered-by { justify-self: center; } .footer-copy__links { list-style: none; margin: 0; padding: 0; justify-self: end; display: flex; flex-wrap: wrap; align-items: center; } .footer-copy__links li + li::before { content: "|"; margin-inline: var(--space-s); opacity: .6; } .footer-copy a { color: var(--brand-on-solid); } @media (max-width: 760px) { .footer-copy__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .footer-copy__links { justify-self: center; justify-content: center; } } /* Live credited its web agency here; it is Mediflare's credit now, with the * template's inverted logo (the default on a dark footer). */ .footer-copy .powered-by { display: inline-flex; align-items: center; gap: var(--space-2xs); } .footer-copy .powered-by img { height: 1.375rem; width: auto; vertical-align: middle; } /* no display here: the template's .mf-logo-* rules pick the variant */ /* fixed logo size, 22px as on the other sites */ @media (max-width: 600px) { /* Stacked on a phone there is room to spare, so the footer reads at body * size rather than the small size the four-column desktop row needs. */ .footer-grid { gap: var(--space-xl); } .footer-logo { height: 7rem; } .footer-col__title { font-size: var(--size-1); } .footer-blurb, .footer-dl, .footer-afterhours ul, .footer-note, .site-footer .hours-table, .footer-copy { font-size: var(--size-0); } .footer-afterhours ul { gap: var(--space-s); } .footer-copy .powered-by img { height: 1.75rem; } } /* --- Buttons ------------------------------------------------------ * * Every button on live is the same object: navy ground, GOLD bold text and * a 2px gold border. Measured on 45 buttons across the site, not assumed. */ /* The search box's Search and the overlay's Close are buttons the platform * component writes (it takes no classes), so they join this rule rather * than copying it: one button object, as on live. */ .btn--kfp, .mf-search__submit, .mf-search-overlay__close { background: var(--brand-solid); color: var(--kfp-gold); border: var(--border-width-m) solid var(--kfp-gold); font-weight: var(--weight-heading); font-size: var(--size--1); line-height: var(--leading-display); text-transform: uppercase; letter-spacing: var(--tracking-caps-total); /* every button is set in capitals */ min-height: var(--target-min); /* 44px touch target */ transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .btn--kfp:hover, .btn--kfp:focus-visible, .mf-search__submit:hover, .mf-search__submit:focus-visible, .mf-search-overlay__close:hover, .mf-search-overlay__close:focus-visible { background: var(--secondary-solid); color: var(--secondary-on-solid); transform: translateY(-1px); } .btn--kfp:hover, .mf-search__submit:hover, .mf-search-overlay__close:hover { box-shadow: var(--shadow-s); } /* the lift is a hover; focus is the ring */ @media (prefers-reduced-motion: reduce) { .btn--kfp:hover, .btn--kfp:focus-visible, .mf-search__submit:hover, .mf-search__submit:focus-visible, .mf-search-overlay__close:hover, .mf-search-overlay__close:focus-visible { transform: none; } } /* --- Inner-page hero ---------------------------------------------- * * Live: full-bleed photo, navy ::before at 0.8, centred white Amiko 700 * title at 60px on an 84px line. 264px tall for one line, 348 for two, * i.e. 90px above and below the text. The photo is set per page through * --hero-img, so the overlay is written once. */ .page-hero { position: relative; isolation: isolate; color: var(--brand-on-solid); text-align: center; background: var(--hero-img, none) center / cover no-repeat, var(--brand-solid); } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: var(--layer-behind); background: var(--brand-solid); opacity: 0.8; } .page-hero__inner { padding-block: var(--space-2xl-3xl); } .page-hero__title { margin: 0; color: var(--brand-on-solid); font-weight: var(--weight-heading); font-size: var(--size-6); line-height: var(--leading-snug); text-wrap: balance; } .page-hero__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin-block-start: var(--space-l); } /* Contact's hero buttons: transparent with a heavy white frame. */ .btn--frame { background: transparent; color: var(--kfp-gold); border: var(--border-width-l) solid var(--brand-on-solid); min-width: 13.75rem; min-height: 3.4375rem; display: inline-flex; align-items: center; justify-content: center; /* live: 220x55 */ font-weight: var(--weight-heading); font-size: var(--size--1); line-height: var(--leading-display); text-transform: uppercase; letter-spacing: var(--tracking-caps-total); } .btn--frame:hover, .btn--frame:focus-visible { background: var(--surface-raised); color: var(--brand-on-soft); } /* --- Inner-page body ---------------------------------------------- * * Live's rich-text pages sit hard under the hero and run the full 1200px. * Spacing is carried by blank paragraphs in the source (one 32px line * each); the generator turns each into .sp on the block that follows. */ .page-body { padding-block: var(--space-2xs) var(--space-3xl-4xl); } .page-body--narrow { padding-block-start: var(--space-2xl-3xl); } .page-body--narrow .u-container { max-width: calc(60rem + 2 * var(--grid-gutter)); } .page-body--spaced { padding-block-start: var(--space-2xl); } .prose > * { margin-block: 0; } .prose > .sp { margin-block-start: var(--blank-lines); } /* Blank paragraphs in the source become margin: --gaps whole blank body * lines at the leading those lines had on live. */ .sp { --blank-lines: calc(var(--gaps, 1) * var(--gap-lead, var(--leading-copy)) * var(--size-0)); } .sp-s { --gap-lead: var(--leading-display); } .sp-m { --gap-lead: var(--leading-snug); } .sp-2xl { --gap-lead: var(--leading-list); } /* Per-block leading, measured on live (Duda sets it paragraph by paragraph). */ main .lh-s, main .lh-s > li { line-height: var(--leading-display); } main .lh-m, main .lh-m > li { line-height: var(--leading-snug); } main .lh-2xl, main .lh-2xl > li { line-height: var(--leading-list); } main .lh-3xl, main .lh-3xl > li { line-height: var(--leading-copy); } .prose h2 { font-size: var(--size-2); font-weight: var(--weight-heading); line-height: var(--leading-body); } .prose h3 { font-size: var(--size-1); font-weight: var(--weight-heading); line-height: var(--leading-body); } .prose ul, .prose ol { padding-inline-start: var(--space-l); } .prose ul ul { list-style-type: circle; padding-inline-start: var(--space-m); margin: 0; } /* Live packs list items on the line alone (16/28), no gap between them. */ .prose li, .prose li + li { margin: 0; } .hl { color: var(--brand-on-soft); } .u-center { text-align: center; } .page-cta { text-align: center; margin-block-start: var(--space-xl) !important; } .page-cta .btn { min-width: 17.5rem; font-size: var(--size-1); text-transform: uppercase; letter-spacing: var(--tracking-caps-total); } /* --- FAQ accordion ------------------------------------------------ * * Live: "FAQs ?" 30px navy, then question rows with a hairline under * each, question text 16px navy regular, +/- at the right edge, the * first item open.

gives the behaviour without script. */ .prose > h2:has(+ .faq) { font-size: var(--size-3); margin-block-start: var(--space-xl); padding-inline: var(--space-s); } .prose > .faq { margin-block-start: var(--space-xl); } .faq__item { border-bottom: var(--border-width-s) solid var(--border); } .faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-m) var(--space-s); cursor: pointer; list-style: none; } .faq__item > summary::-webkit-details-marker { display: none; } .faq__item > summary::after { content: "+"; font-size: var(--size-2); line-height: 1; color: var(--text-muted); font-weight: var(--weight-body); } .faq__item[open] > summary::after { content: "\2212"; } .prose .faq__q { margin: 0; font-size: var(--size-0); font-weight: var(--weight-body); line-height: var(--leading-loose); } .faq__a { padding: 0 var(--space-s) var(--space-m); } .faq__a > * { margin-block: 0; } .faq__a > .sp { margin-block-start: var(--blank-lines); } .faq__item > summary:focus-visible { outline-offset: calc(-1 * var(--focus-ring-w)); } /* inset: the ring sits inside the row */ /* --- Emphasis ----------------------------------------------------- * * Bold is navy on live almost everywhere; the few grey/black bold runs are * marked .ink by the generator and take the surrounding colour instead. */ main strong { color: var(--brand-on-soft); } main strong.ink { color: inherit; } .prose .ink:is(h2, h3) { color: var(--text-strong); } .prose .h-display, .h-display { font-size: var(--size-5); line-height: var(--leading-display); } .prose p.lg { font-size: var(--size-2); line-height: var(--leading-body); } /* --- Card grids (Services, Women's Health, Fees) ------------------ * * Live: grey cards (#F2F2F2) with 20px corners, rows 120px apart, the * button pinned to the card foot. Services runs wider than the 1200px * column (four 325px cards across 1360). */ .u-container--wide { max-width: calc(85rem + 2 * var(--grid-gutter)); } .section--cards { padding-block: var(--space-3xl-4xl); } .section--after-intro { padding-block-start: var(--space-xl); } .card-grid { display: grid; gap: var(--space-3xl-4xl) var(--space-s); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1100px) { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid { row-gap: var(--space-l); } } @media (max-width: 760px) { .card-grid--4, .card-grid--3 { grid-template-columns: minmax(0, 1fr); } } .svc-card, .fee-card { display: flex; flex-direction: column; background: var(--surface-lowered); border-radius: var(--radius-l); padding: var(--space-xl) var(--space-m) var(--space-m); /* live: 46px above the title */ } .svc-card__title, .fee-card__title { margin: 0 0 var(--space-s); font-size: var(--size-2); line-height: var(--leading-body); font-weight: var(--weight-heading); color: var(--brand-on-soft); } .svc-card__body { flex: 1 1 auto; } .svc-card__body > *, .fee-card__body > * { margin: 0; } .svc-card__body > .sp, .fee-card__body > .sp { margin-block-start: var(--blank-lines); } .sp-tail { display: block; } .svc-card__cta { margin: var(--space-m) 0 0; } .svc-card__cta .btn { display: block; width: 100%; text-align: center; padding-block: var(--space-s); } /* live: 273x50 */ .btn--outline-kfp { background: transparent; color: var(--brand-on-soft); border-color: var(--brand-line); } /* Fees: white-lifted cards on the neutral ground, shadowed, 35px inset. */ .fee-card { padding: var(--space-xl) var(--space-l) var(--space-l); box-shadow: var(--shadow-m); } /* live: 55px above, 35px beside */ .fee-card__body p.lg { font-size: var(--size-2); } /* Centred intro block under a hero (Women's Health, Fees). */ .page-intro { padding-block: var(--space-s) 0; } .page-intro__inner { max-width: 45rem; margin-inline: auto; } .page-intro__inner--fees { text-align: center; } /* --- Our team -------------------------------------------------------- * * Live: one #F0F0F0 band holding the heading and a three-up grid of white * cards -- photo left in a white frame, name/role/buttons right. The doctors * are a {{#each practitioners}} loop; staff and vacancies follow it. */ .team-band { background: var(--surface-lowered); margin-block-end: var(--space-3xl-4xl); } /* live leaves 130px of white before the footer */ .team-band__head { text-align: center; max-width: 60rem; margin: 0 auto var(--space-xl); } .team-band__title { margin: 0; font-size: var(--size-6); font-weight: var(--weight-body); line-height: var(--leading-display); } .team-band__lede { margin: var(--space-2xs) 0 0; font-size: var(--size-2); line-height: var(--leading-snug); color: var(--brand-on-soft); } .team-band__group { margin: var(--space-xl) 0 var(--space-m); text-align: center; font-size: var(--size-4); font-weight: var(--weight-body); line-height: var(--leading-display); scroll-margin-top: var(--space-xl); } /* doctors and staff each under their own heading (owner rule, 2026-10-08) */ .team-band__head + .team-band__group { margin-block-start: 0; } .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); max-width: 69rem; margin-inline: auto; } @media (max-width: 1140px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* three-up is too narrow for the button labels below this */ @media (max-width: 640px) { .team-grid { grid-template-columns: minmax(0, 1fr); } } /* Three-up only: centre a short last row instead of leaving it flush left (owner, 2026-10-03; 10 cards left one alone). Six half-columns with every card spanning two keeps each card exactly as wide as a third (2 x (W - 5g)/6 + g = (W - 2g)/3); a lone last card starts at column 3, a last pair at 2 and 4. */ @media (min-width: 1141px) { .team-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .team-grid > * { grid-column: span 2; } .team-grid > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; } .team-grid > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; } .team-grid > :last-child:nth-child(3n + 2) { grid-column: 4 / span 2; } } .team-card { display: flex; gap: var(--space-s); align-items: flex-start; background: var(--surface-raised); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: var(--space-xs); } .team-card__photo { flex: 0 0 auto; width: 8rem; aspect-ratio: 147 / 213; border: var(--border-width-l) solid var(--surface-raised); box-shadow: var(--shadow-s); overflow: hidden; border-radius: var(--radius-m); /* one step in from the card's radius-l */ } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-card__photo--staff { width: 8.5rem; aspect-ratio: 155 / 160; } .team-card__body { flex: 1 1 auto; min-width: 0; } .team-card__name { margin: 0; font-size: var(--size-2); line-height: var(--leading-snug); font-weight: var(--weight-body); color: var(--text-strong); } .team-card__name.hl { color: var(--brand-on-soft); } .team-card__role { margin: var(--space-2xs) 0 var(--space-s); font-size: var(--size-0); line-height: var(--leading-body); } .team-card--vacancy p { margin: var(--space-xs) 0 0; line-height: var(--leading-body); } .team-card__actions { display: grid; gap: var(--space-xs); margin: 0; } /* Dr Marina Wahsh: on maternity leave, so no Book button and a short note instead. Remove these two rules when she returns. */ .team-card[data-doctor="dr-marina-wahsh"] .team-card__actions .btn[data-booking-trigger] { display: none; } .team-card[data-doctor="dr-marina-wahsh"] .team-card__actions::before { content: "Currently on maternity leave"; font-style: italic; text-align: center; } .team-card__actions .btn { display: flex; width: 100%; text-align: center; padding: var(--space-xs) var(--space-2xs); letter-spacing: var(--tracking-card-button); white-space: normal; line-height: var(--leading-display); } /* tighter tracking so the capitals fit beside the photo; wraps rather than overflowing when the card is narrow */ /* --- Doctor profile ---------------------------------------------------- * * Live: two 600px columns -- Book Appointment centred above a large photo * on the left, name (48px) and details on the right. No hero. */ .doctor-profile { padding-block-start: var(--space-m); } /* Photo and name share a top edge; the booking button sits under the photo. */ .doctor-profile__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); align-items: start; } .doctor-profile__media { display: flex; flex-direction: column; } @media (max-width: 760px) { .doctor-profile__grid { grid-template-columns: minmax(0, 1fr); } } .doctor-profile__book { text-align: center; margin: var(--space-m) 0 0; } /* under the photo */ .doctor-profile__book .btn { min-width: 17.5rem; font-size: var(--size-0); padding: var(--space-s) var(--space-l); } .doctor-profile__photo { display: block; border-radius: var(--radius-l); overflow: hidden; background: none; } /* The whole photo at its own shape, never cropped. */ .doctor-profile__photo img { width: 100%; height: auto; display: block; } .doctor-profile__name { margin: 0; font-size: var(--size-5); line-height: var(--leading-body); } /* The app's photo at its own shape (#307); the fallback avatar only when there is none. */ .doctor-profile__photo.doctor-avatar:has(img) { aspect-ratio: auto; background: none; border-radius: var(--radius-l); } .doctor-profile__photo.doctor-avatar:has(img)::after { content: none; } .doctor-profile__photo.doctor-avatar img { height: auto; object-fit: initial; } /* Consulting days and bio are plain text from the app: one line per line break. */ .doctor-profile__lines { white-space: pre-line; } /* --- Contact ----------------------------------------------------------- */ .contact-band { padding-block-start: var(--space-3xl-4xl); } .contact-band__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-l); align-items: start; } @media (max-width: 760px) { .contact-band__grid { grid-template-columns: minmax(0, 1fr); } } .contact-band__details h2 { margin: 0 0 var(--space-s); } .contact-band__details { max-width: 31rem; } /* live: 482px, so the 48px heading wraps */ .contact-band__details p { margin: 0; } .contact-lines { margin-block-start: var(--blank-lines, 2rem) !important; --blank-lines: calc(var(--leading-copy) * var(--size-0)); } .contact-band__map { display: block; width: 100%; height: 13.6rem; border: 0; border-radius: var(--radius-l); } /* live: 682x218 */ .contact-band__notes { margin-block-start: var(--space-2xl); } /* communication_policy arrives as bare

s: one blank body line between * them (what .sp gave the typed copy), and bold in the running ink (.ink). */ .contact-band__notes > p + p { margin-block-start: calc(var(--leading-copy) * var(--size-0)); } .contact-band__notes strong { color: inherit; } /* Contact form: layout only. The fields are the Form controls section's, * the button is the site's one .btn--kfp. Three single-line fields side by * side, the message and the button full width; one column on phones. */ .contact-form { margin-block-start: var(--space-2xl); } .contact-form h2 { margin: 0 0 var(--space-s); } .contact-form__note { margin: 0 0 var(--space-m); max-width: 60ch; } .contact-form__note a { white-space: nowrap; } /* keep the phone number on one line */ .contact-form__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s) var(--space-m); } .contact-form__wide, .contact-form__grid altcha-widget { grid-column: 1 / -1; } @media (max-width: 760px) { .contact-form__grid { grid-template-columns: minmax(0, 1fr); } } .contact-form__feedback { margin-block-start: var(--space-s); padding: var(--space-xs) var(--space-s); border-radius: var(--radius-s); } .contact-form__feedback[data-status="success"] { background: var(--success-soft); color: var(--text-strong); } .contact-form__feedback[data-status="error"] { background: var(--danger-soft); color: var(--text-strong); } /* --- Pathology panel ------------------------------------------------------ * * Live: a #F0F0F0 panel with a navy icon disc straddling its top edge. The * disc stays in flow with a negative margin rather than being positioned. */ .info-panel { background: var(--surface-lowered); text-align: center; border-radius: var(--radius-l); margin-block-start: var(--space-l); padding: 0 var(--space-l) var(--space-s); } .info-panel__icon { display: inline-flex; align-items: center; justify-content: center; --info-disc: 5rem; /* a fixed 80px disc: a dimension, not spacing */ width: var(--info-disc); height: var(--info-disc); margin-block-start: calc(var(--info-disc) / -2); /* half of it above the panel edge, whatever its size */ background: var(--brand-solid); color: var(--brand-on-solid); border-radius: var(--radius-round); border: var(--border-width-l) solid var(--surface-raised); } .info-panel__icon svg { width: 2.5rem; height: 2.5rem; } .info-panel__title { margin: var(--space-m) auto var(--space-s); max-width: 54rem; font-size: var(--size-2); line-height: var(--leading-body); } .info-panel__map { display: block; width: 100%; max-width: 54rem; height: 15.6rem; margin-inline: auto; border: 0; border-radius: var(--radius-l); } /* live: 860x250 */ /* --- About page: live runs the copy in the left 541px only. */ .about-copy { max-width: 34rem; } .about-page { padding-block: var(--space-3xl-4xl); } .page-hero__title--regular { font-weight: var(--weight-body); } /* --- Terms of use: hand-written prose, so it carries its own rhythm. */ .legal { max-width: var(--measure); } .legal > * + * { margin-block-start: var(--space-s); } .legal > h2 { margin-block-start: var(--space-xl); font-size: var(--size-2); } .legal .lede { font-size: var(--size-1); line-height: var(--leading-loose); color: var(--text); } /* body grey, as before (the template's .lede is --text-muted) */ .terms-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-m); } .terms-dl dt { font-weight: var(--weight-heading); color: var(--brand-on-soft); } .terms-dl dd { margin: 0; } .terms-dl address { font-style: normal; } /* --- Site search -------------------------------------------------- * * The platform component (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). The overlay is a * centred card over a dimmed page above the menu's own 960px, and full * screen at 960px and under (the Mobile block below). The trigger is drawn * as a search field between the menu and Book Appointment on desktop, and * as a bare magnifier beside the menu button on phones. 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]): * giving them a display of their own overrides [hidden] and they never * close. Search and Close are .btn--kfp (they join that rule above). */ /* The trigger, drawn as a field: border, ground, corner and height are the * --field-* tokens (Form controls), so it matches the search box it opens. * After the menu, before the button: the button is order 3 too and comes * after this in the markup. */ .site-search__trigger { order: 3; flex: 0 0 auto; 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: inherit; 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); cursor: pointer; 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); } /* Drawn as a field, so the ring sits on its border as the field's does. */ .site-search__trigger:focus-visible { outline-offset: calc(-1 * var(--field-border-w)); border-radius: var(--field-radius); } /* The header's tight bands. The menu folds to two rows below 1111px * whatever the trigger does, and a full-width trigger would fold it sooner, * so the trigger shortens instead (measured on 961-1440, every 20px and +-1 * at each edge): the magnifier alone in its field outline, a 44px square * and so the width the old icon took, up to 1199px; magnifier and * "Search", without the ellipsis, up to 1259px; the full trigger above. */ @media (min-width: 961px) and (max-width: 1199px) { .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: 1200px) and (max-width: 1259px) { .site-search__trigger { padding-inline: var(--field-pad-inline); } .site-search__text::after { content: none; } } /* The box, wherever it sits: the field and Search on one row, the status * and results beneath. */ .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 magnifier and the placeholder say what it is. */ .mf-search__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The search field's look is the --field-* tokens (Form controls), never a * rule here. */ .mf-search__status { margin: 0; padding-inline: var(--space-xs); font-size: var(--size--1); line-height: var(--leading-snug); color: var(--text); } .mf-search__status:empty { display: none; } /* Results: the title in the headings' navy Amiko, the excerpt in body grey, * matches marked in the alert bar's gold. */ .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(--secondary-soft); } .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-heading); line-height: var(--leading-display); 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(--kfp-mark); border-radius: var(--radius-xs); } /* Phones: full screen, white, under the alert bar's gold rule. 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); border-block-start: var(--border-width-l) solid var(--kfp-gold); } .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)); } /* The card: above the menu's breakpoint the overlay is a centred panel * under a dimmed, lightly blurred page (body::after, in the ink), and grows * 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. */ @media (min-width: 961px) { .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-s); 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: var(--surface-overlay); backdrop-filter: blur(var(--space-3xs)); } } /* --- Mobile ------------------------------------------------------- */ @media (max-width: 960px) { /* Search: the trigger becomes a bare 44px magnifier beside the menu * button, in the menu button's ink, and takes the auto margin. */ .site-search__trigger { order: 0; justify-content: center; inline-size: var(--target-min); block-size: var(--target-min); margin-inline-start: auto; padding: 0; color: var(--text-strong); background: none; border-color: transparent; } .site-search__trigger:hover, .site-search__trigger[aria-expanded="true"] { color: var(--brand-on-soft); border-color: transparent; } .site-search__text { display: none; } /* the name is the aria-label */ /* Mobile: the drawer opens on its own line below the bar. */ .site-header__inner { flex-wrap: wrap; } .primary-nav { flex: 0 0 100%; order: 4; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); /* the 44px tap target */ background: none; border: 0; /* the search icon before it takes the auto margin */ padding: var(--space-2xs); cursor: pointer; } .brand img { height: 5.75rem; } /* the "kareela family practice" line under the mark needs this to be legible */ .nav-toggle__bar { display: block; width: 26px; height: 2px; background: var(--text-strong); margin: var(--space-3xs) 0; } .primary-nav { display: none; } .primary-nav.is-open { display: block; } .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-list > li, .nav-sub > li { flex-wrap: wrap; } .nav-list > li > a, .nav-sub a { flex: 1 1 auto; } /* Every drawer row is a 44px target, and the chevron is a full-height 44px * square at the row's end. The desktop chevron borrows its height through * negative margins; stacked in the drawer, that made it overlap the rows * above and below (31px rows, 44px chevrons). */ .nav-list > li > a { display: flex; align-items: center; min-block-size: var(--target-min); } .nav-sub-toggle { inline-size: var(--target-min); margin: 0; } .nav-sub, .nav-sub .nav-sub { position: static; display: none; flex: 0 0 100%; border: 0; min-width: 0; padding-inline-start: var(--space-s); } .has-sub:hover > .nav-sub, .has-sub:focus-within > .nav-sub { display: none; } .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: block; } .nav-sub .nav-sub-toggle { position: static; } .nav-sub .nav-sub-toggle svg { transform: none; } .nav-sub a { white-space: normal; padding-inline-end: var(--space-2xs); } .nav-cta { width: 100%; text-align: center; margin-block-start: var(--space-2xs); } }

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

Still the page's real heading, just smaller