/* * Site styles. There is no CSS framework and no build step — this file is * served exactly as written, so everything the site needs is here or in the * site's own additions below. * * --------------------------------------------------------------------------- * FLUID TYPE & SPACE SCALE * * Every size below is derived from the six anchor numbers in --u-*. Change an * anchor and the whole scale moves with it, in proportion. That is the point: * retuning a site is editing six numbers, not auditing every value in the file. * * Each step is a clamp() between its value at the minimum viewport and its * value at the maximum, so text and spacing scale smoothly with the viewport * instead of jumping at breakpoints. No media queries are needed for sizing. * * TO RETUNE FOR THIS SITE (see refs/design/DESIGN.md): * --u-min-ratio / --u-max-ratio how dramatic the jump between sizes is. * 1.2 (minor third) reads calm and even; * 1.333 (perfect fourth) reads confident; * above ~1.4 gets shouty for a practice site. * --u-min-font / --u-max-font base body size at each end, in px. * --u-min-vw / --u-max-vw the viewport range the scale spans. * * A larger max-ratio with the same min-ratio gives a site that is restrained on * a phone and expressive on a desktop, which usually suits a hero-led page. */ :root { /* --- Anchors: the dial for this site ------------------------------- */ --u-min-vw: 320; --u-max-vw: 1240; --u-min-font: 16; --u-max-font: 18; --u-min-ratio: 1.2; --u-max-ratio: 1.25; /* Space unit (rem) at each end. Every --space-* step and pair is a fixed * multiple of it, so these two knobs move the whole spacing rhythm at once. */ --u-space-min: 1; --u-space-max: 1.25; /* --- Derivation. Not usually edited by hand. ----------------------- */ /* Slope and intercept of the line between the two anchor viewports, * expressed so each step can be written as clamp(min, calc(...), max). */ --u-vw-range: calc(var(--u-max-vw) - var(--u-min-vw)); /* Type steps, in rem at each anchor. Each step multiplies the previous * one by the ratio, so the relationship between sizes is fixed even as the * absolute values move. */ --u-min-0: calc(var(--u-min-font) / 16); --u-max-0: calc(var(--u-max-font) / 16); --u-min--2: calc(var(--u-min-0) / var(--u-min-ratio) / var(--u-min-ratio)); --u-max--2: calc(var(--u-max-0) / var(--u-max-ratio) / var(--u-max-ratio)); --u-min--1: calc(var(--u-min-0) / var(--u-min-ratio)); --u-max--1: calc(var(--u-max-0) / var(--u-max-ratio)); --u-min-1: calc(var(--u-min-0) * var(--u-min-ratio)); --u-max-1: calc(var(--u-max-0) * var(--u-max-ratio)); --u-min-2: calc(var(--u-min-1) * var(--u-min-ratio)); --u-max-2: calc(var(--u-max-1) * var(--u-max-ratio)); --u-min-3: calc(var(--u-min-2) * var(--u-min-ratio)); --u-max-3: calc(var(--u-max-2) * var(--u-max-ratio)); --u-min-4: calc(var(--u-min-3) * var(--u-min-ratio)); --u-max-4: calc(var(--u-max-3) * var(--u-max-ratio)); --u-min-5: calc(var(--u-min-4) * var(--u-min-ratio)); --u-max-5: calc(var(--u-max-4) * var(--u-max-ratio)); /* Display extensions, still the same geometric chain: a site never needs * to invent a bigger heading step. */ --u-min-6: calc(var(--u-min-5) * var(--u-min-ratio)); --u-max-6: calc(var(--u-max-5) * var(--u-max-ratio)); --u-min-7: calc(var(--u-min-6) * var(--u-min-ratio)); --u-max-7: calc(var(--u-max-6) * var(--u-max-ratio)); --u-min-8: calc(var(--u-min-7) * var(--u-min-ratio)); --u-max-8: calc(var(--u-max-7) * var(--u-max-ratio)); /* --- Type scale ---------------------------------------------------- */ /* step--2 fine print · step-0 body · step-2/3 section headings · * step-4/5 hero display. Use these, not raw px. */ --step--2: clamp(calc(var(--u-min--2) * 1rem), calc(var(--u-min--2) * 1rem + (var(--u-max--2) - var(--u-min--2)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max--2) * 1rem)); --step--1: clamp(calc(var(--u-min--1) * 1rem), calc(var(--u-min--1) * 1rem + (var(--u-max--1) - var(--u-min--1)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max--1) * 1rem)); --step-0: clamp(calc(var(--u-min-0) * 1rem), calc(var(--u-min-0) * 1rem + (var(--u-max-0) - var(--u-min-0)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-0) * 1rem)); --step-1: clamp(calc(var(--u-min-1) * 1rem), calc(var(--u-min-1) * 1rem + (var(--u-max-1) - var(--u-min-1)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-1) * 1rem)); --step-2: clamp(calc(var(--u-min-2) * 1rem), calc(var(--u-min-2) * 1rem + (var(--u-max-2) - var(--u-min-2)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-2) * 1rem)); --step-3: clamp(calc(var(--u-min-3) * 1rem), calc(var(--u-min-3) * 1rem + (var(--u-max-3) - var(--u-min-3)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-3) * 1rem)); --step-4: clamp(calc(var(--u-min-4) * 1rem), calc(var(--u-min-4) * 1rem + (var(--u-max-4) - var(--u-min-4)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-4) * 1rem)); --step-5: clamp(calc(var(--u-min-5) * 1rem), calc(var(--u-min-5) * 1rem + (var(--u-max-5) - var(--u-min-5)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-5) * 1rem)); --step-6: clamp(calc(var(--u-min-6) * 1rem), calc(var(--u-min-6) * 1rem + (var(--u-max-6) - var(--u-min-6)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-6) * 1rem)); --step-7: clamp(calc(var(--u-min-7) * 1rem), calc(var(--u-min-7) * 1rem + (var(--u-max-7) - var(--u-min-7)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-7) * 1rem)); --step-8: clamp(calc(var(--u-min-8) * 1rem), calc(var(--u-min-8) * 1rem + (var(--u-max-8) - var(--u-min-8)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-8) * 1rem)); /* --- Weight -------------------------------------------------------- */ /* Named by the CSS value, not by a word. "bold" is a claim about how a * typeface renders; 700 is what you actually asked for, and two faces * disagree about which of their cuts reads as bold. * * THREE WEIGHTS, DELIBERATELY. Body, emphasis, headline — that is the * whole system, and it is expressed by which tokens exist rather than by * a rule asking politely. Adding --weight-800 needs a reason: the face * has a visibly distinct heavy cut AND 700 alone is not creating enough * contrast. If 700 and 800 render identically on screen, that is not one. * A flat hierarchy is almost always a spacing or size problem, not a * weight problem. */ --weight-400: 400; /* body */ --weight-600: 600; /* nav, card emphasis, eyebrows */ --weight-700: 700; /* headlines, CTAs */ /* --- Leading ------------------------------------------------------- */ /* A ladder rather than a derived scale, so it is t-shirt sized like * --space-* rather than numbered like --step-*. Tightest to loosest. * * The relationship worth holding: line-height falls as type size rises. * Display type at body leading looks unset; body copy at display leading * is unreadable. Pair --leading-xs with --step-4/5 and --leading-l with * --step-0. */ --leading-xs: 1.05; /* display, very large headlines */ --leading-s: 1.18; /* headings */ --leading-m: 1.3; /* subheadings, ledes, card copy */ --leading-l: 1.5; /* body copy */ --leading-xl: 1.6; /* long-form and small print, which need more air */ /* --- Tracking ------------------------------------------------------ */ /* Same shape: a ladder, tightest to loosest, in em so it scales with * whatever size it is applied to. * * The relationship: tracking tightens as size grows, and ALL-CAPS always * needs opening up — uppercase at 0 tracking reads cramped at any size. * Pair --tracking-xs with --step-4/5, --tracking-m with body, and * --tracking-l or --tracking-xl with any text-transform: uppercase. */ --tracking-xs: -0.02em; /* large display */ --tracking-s: -0.01em; /* headings */ --tracking-m: 0; /* body — the default, stated so it can be reset to */ --tracking-l: 0.04em; /* small caps-ish, buttons */ --tracking-xl: 0.08em; /* eyebrows and other all-caps runs */ /* --- Space scale --------------------------------------------------- */ /* Multiples of the space unit (--u-space-min / --u-space-max) rather than * the type ratio, so spacing stays predictable while type can be as * dramatic as the site needs. DO NOT redeclare these per site: tune the * --u-* knobs above and every step and pair follows. */ --space-3xs: clamp(calc(var(--u-space-min) * 0.25rem), calc(var(--u-space-min) * 0.25rem + (var(--u-space-max) * 0.3 - var(--u-space-min) * 0.25) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.3rem)); --space-2xs: clamp(calc(var(--u-space-min) * 0.5rem), calc(var(--u-space-min) * 0.5rem + (var(--u-space-max) * 0.5 - var(--u-space-min) * 0.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.5rem)); --space-xs: clamp(calc(var(--u-space-min) * 0.75rem), calc(var(--u-space-min) * 0.75rem + (var(--u-space-max) * 0.75 - var(--u-space-min) * 0.75) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.75rem)); --space-s: clamp(calc(var(--u-space-min) * 1rem), calc(var(--u-space-min) * 1rem + (var(--u-space-max) * 1 - var(--u-space-min) * 1) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1rem)); --space-m: clamp(calc(var(--u-space-min) * 1.5rem), calc(var(--u-space-min) * 1.5rem + (var(--u-space-max) * 1.5 - var(--u-space-min) * 1.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1.5rem)); --space-l: clamp(calc(var(--u-space-min) * 2rem), calc(var(--u-space-min) * 2rem + (var(--u-space-max) * 2 - var(--u-space-min) * 2) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 2rem)); --space-xl: clamp(calc(var(--u-space-min) * 3rem), calc(var(--u-space-min) * 3rem + (var(--u-space-max) * 3 - var(--u-space-min) * 3) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 3rem)); --space-2xl: clamp(calc(var(--u-space-min) * 4rem), calc(var(--u-space-min) * 4rem + (var(--u-space-max) * 4 - var(--u-space-min) * 4) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 4rem)); --space-3xl: clamp(calc(var(--u-space-min) * 6rem), calc(var(--u-space-min) * 6rem + (var(--u-space-max) * 6 - var(--u-space-min) * 6) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 6rem)); --space-4xl: clamp(calc(var(--u-space-min) * 8rem), calc(var(--u-space-min) * 8rem + (var(--u-space-max) * 8 - var(--u-space-min) * 8) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 8rem)); /* --- Space pairs --------------------------------------------------- */ /* A pair moves from the SMALLER step on a phone to the LARGER one on a * desktop, so the gap changes step rather than merely scaling. This is what * replaces per-breakpoint section padding: --space-l-2xl is roughly the old * "40-48px mobile, 80-96px desktop" rule, expressed once. */ --space-2xs-xs: clamp(calc(var(--u-space-min) * 0.5rem), calc(var(--u-space-min) * 0.5rem + (var(--u-space-max) * 0.75 - var(--u-space-min) * 0.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.75rem)); --space-xs-s: clamp(calc(var(--u-space-min) * 0.75rem), calc(var(--u-space-min) * 0.75rem + (var(--u-space-max) * 1 - var(--u-space-min) * 0.75) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1rem)); --space-s-m: clamp(calc(var(--u-space-min) * 1rem), calc(var(--u-space-min) * 1rem + (var(--u-space-max) * 1.5 - var(--u-space-min) * 1) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1.5rem)); --space-m-l: clamp(calc(var(--u-space-min) * 1.5rem), calc(var(--u-space-min) * 1.5rem + (var(--u-space-max) * 2 - var(--u-space-min) * 1.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 2rem)); --space-l-xl: clamp(calc(var(--u-space-min) * 2rem), calc(var(--u-space-min) * 2rem + (var(--u-space-max) * 3 - var(--u-space-min) * 2) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 3rem)); --space-xl-2xl: clamp(calc(var(--u-space-min) * 3rem), calc(var(--u-space-min) * 3rem + (var(--u-space-max) * 4 - var(--u-space-min) * 3) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 4rem)); --space-l-2xl: clamp(calc(var(--u-space-min) * 2rem), calc(var(--u-space-min) * 2rem + (var(--u-space-max) * 4 - var(--u-space-min) * 2) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 4rem)); --space-s-l: clamp(calc(var(--u-space-min) * 1.125rem), calc(var(--u-space-min) * 1.125rem + (var(--u-space-max) * 2 - var(--u-space-min) * 1.125) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 2rem)); /* skip-a-step: grid gutter */ --space-2xl-3xl: clamp(calc(var(--u-space-min) * 4rem), calc(var(--u-space-min) * 4rem + (var(--u-space-max) * 6 - var(--u-space-min) * 4) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 6rem)); --space-3xl-4xl: clamp(calc(var(--u-space-min) * 6rem), calc(var(--u-space-min) * 6rem + (var(--u-space-max) * 8 - var(--u-space-min) * 6) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 8rem)); /* --- Measure ------------------------------------------------------- */ --measure: 65ch; /* body copy */ --measure-tight: 45ch; /* card and caption copy */ /* ===================================================================== * COLOUR * * Three anchors drive the whole palette. Change them to match the * practice; everything else follows. See refs/design/DESIGN.md. * * That is the default path, and most sites never go past it. Underneath, * the palette is layered so a site can take more control WITHOUT hand- * writing hex values, which is what a migrated site needs: * * 1. Anchors the three below. Tune these first. * 2. Per-role --chroma-secondary, --l-tertiary and friends. A * brand's second colour is a designer's pick, not a * rotation of the first, so each role carries its own * hue, chroma and lightness, defaulting to the anchors. * 3. Neutrals --hue-neutral, --chroma-ink, --chroma-ground. Greys * are their own decision -- see the block below. * 4. Polarity --scheme. One number flips light/dark. * * Derive WITHIN a role, declare ACROSS roles. This is the same split * Bootstrap 5.3 makes (mix() generates each scale; the base of each theme * colour is declared) and the opposite of deriving everything from one * hue, which cannot express a real brand pair. * * --palette-hue the practice's brand hue, 0-360. * Roughly: 25 terracotta · 60 ochre · 145 green * · 195 teal · 240 blue · 275 violet · 340 rose * --palette-chroma how saturated the brand reads. OKLCH chroma is * NOT 0-1 — it runs about 0-0.37 in sRGB, and * above ~0.15 a surface colour starts to shout. * 0.04 muted · 0.09 confident · 0.14 vivid * --palette-secondary-shift * degrees from the primary to the secondary. * 150-180 gives a complement; 30-60 an analogous * neighbour that reads calmer. * ===================================================================== */ --palette-hue: 195; --palette-chroma: 0.09; --palette-secondary-shift: 150; --hue-primary: var(--palette-hue); --hue-secondary: calc(var(--palette-hue) + var(--palette-secondary-shift)); /* Secondary and tertiary each carry their OWN chroma and lightness, not * the primary's. They default to it, so a site built from this template * still tunes with the three numbers above and renders identically. * * The override exists because a brand's second colour is often a designer's * choice rather than a systematic partner: on a migrated site the secondary * was measured at 3.6x the primary's chroma and 0.26 lighter in OKLCH * (deep forest green against warm terracotta). One shared chroma and one * shared lightness cannot express that pair, and forcing it produced a * washed-out grey-green beside a dusty mauve. * * This is the same concession the feedback colours below already make -- * each of those carries its own chroma because "yellows need more to read * as yellow, reds less before they turn fluorescent". Brand colours want * the same latitude. */ --chroma-secondary: var(--palette-chroma); --l-secondary: var(--l-solid); /* Tertiary: a third brand colour, typically doing button/CTA work, that is * neither a tint of the primary nor semantic. Practices routinely have one * ("Button Brown", "Morning Orange"). Defaults to an analogous neighbour of * the primary so it is harmless when unused. */ --palette-tertiary-shift: 30; --hue-tertiary: calc(var(--palette-hue) + var(--palette-tertiary-shift)); --chroma-tertiary: var(--palette-chroma); --l-tertiary: var(--l-solid); /* --- Neutrals: their own hue, not the brand's --------------------- * * --hue-neutral defaults to the brand hue, so a site that sets nothing * keeps the "greys feel of a piece with the accent" behaviour. But it is * a SEPARATE dial, because tying greys to the brand hue is not what any * mature system does and not what real practices choose: * * - Tailwind ships five grey families (slate/gray/zinc/neutral/stone) * precisely so the temperature of the greys is a decision. * - Bootstrap keeps $gray independent of $theme-colors. * - daisyUI declares base-100/200/300 per theme. * * And measured on our own migrated sites: both chose warm grounds at hue * 80-94 despite green brands at 145 and 166 -- roughly 80 degrees off the * brand. A green practice does not want green text, and at the default * hue 195 the old derivation gave --ink-strong an R-to-B spread of 17, * i.e. a visibly blue-black rather than a black. * * Set --hue-neutral to taste: the brand hue for a tinted-grey scheme, a * warm 70-90 for a settled off-black, or leave chroma at 0 for a true * neutral. --chroma-ink and --chroma-ground are separate because ink * carries tint better than a large ground does -- the same chroma that * reads as "warm grey" in a heading reads as "the wrong white" across a * full-bleed background. */ /* +80 deg off the brand, which is what the previous code already did for * --ink-strong alone, and what both migrated practices independently * chose for their grounds (warm 80-94 against green brands at 145/166). * It defaults to the brand hue so that adding this dial changes nothing on * an existing site; the interesting values are elsewhere: * * var(--palette-hue) greys tinted toward the brand (default) * calc(var(--palette-hue) + 80) the offset real practices tend to pick * 70-90 a warm, settled off-black * with --chroma-ink: 0 a true neutral, no hue at all */ --hue-neutral: var(--palette-hue); --chroma-ink: 0.012; /* text. 0 = true grey; 0.03 = clearly tinted */ --chroma-ground: calc(0.004 + 0.008 * (1 - var(--scheme))); /* page background */ --chroma-surface: calc(0.000 + 0.014 * (1 - var(--scheme))); /* raised surfaces */ --chroma-border: calc(0.008 + 0.007 * (1 - var(--scheme))); /* rules and outlines */ /* Grounds carry MORE tint when dark and less when light: 0.014 across a * near-black reads as a warm dark, the same 0.014 across a near-white * reads as a colour cast. The old code expressed this by declaring the * light and dark neutrals separately; here it rides on --scheme. */ /* Feedback hues are FIXED and do not follow the brand. A danger colour * that rotates with the practice's hue stops reading as danger — the * entire value of a semantic colour is that it means the same thing on * every site. Only the brand colours above derive from --palette-hue. */ --hue-success: 145; --hue-warning: 75; --hue-danger: 27; --hue-info: 240; /* Lightness ramp. Dark mode overrides these below rather than declaring a * second palette — in OKLCH, dark mode is largely an inversion of these * four numbers. */ --l-solid: 0.55; /* solid fills: buttons, badges */ --l-hover: 0.48; /* one step darker for hover */ --l-light: 0.66; /* one step lighter: gradient partner for --primary */ --l-muted: 0.92; /* a touch stronger than pale, for wash gradients */ --l-pale: 0.96; /* tinted backgrounds */ --l-on-solid: 0.99;/* text on a solid fill */ /* --- Polarity ----------------------------------------------------- * * --scheme is the one number that says which way round the site runs: * 1 = dark ink on a light ground (the norm), 0 = light ink on a dark * ground. Every neutral below is written as "light value, plus the * distance to its dark counterpart, times (1 - scheme)", so flipping the * one number inverts the whole set consistently. * * This is why the dark-mode block further down only sets --scheme and the * three brand-lightness values, instead of re-declaring eight neutrals * with a second set of hand-picked literals. Two hand-maintained sets * drift: the old block never declared --ink-strong at all, so headings * stayed at lightness 0.18 -- dark text on a dark ground. * * A site that should ALWAYS render dark sets --scheme: 0 here and deletes * the media query. A site that should never flip deletes the query alone. */ --scheme: 1; /* Neutral lightness, light-mode value first, dark-mode value second. * Edit these to shift contrast; they are dials, not literals buried in * the colour definitions. */ --l-ink-strong: calc(0.18 + 0.79 * (1 - var(--scheme))); --l-ink: calc(0.25 + 0.70 * (1 - var(--scheme))); --l-ink-mid: calc(0.45 + 0.35 * (1 - var(--scheme))); --l-ink-soft: calc(0.54 + 0.12 * (1 - var(--scheme))); --l-bg: calc(0.99 - 0.81 * (1 - var(--scheme))); --l-surface: calc(1.00 - 0.78 * (1 - var(--scheme))); --l-border: calc(0.90 - 0.58 * (1 - var(--scheme))); --l-border-strong: calc(0.82 - 0.40 * (1 - var(--scheme))); /* Brand */ --primary: oklch(var(--l-primary, var(--l-solid)) var(--palette-chroma) var(--hue-primary)); --primary-hover: oklch(var(--l-hover) var(--palette-chroma) var(--hue-primary)); --primary-light: oklch(var(--l-light) var(--palette-chroma) var(--hue-primary)); --primary-muted: oklch(var(--l-muted) calc(var(--palette-chroma) * 0.35) var(--hue-primary)); /* Chroma falls as lightness rises — a pale tint at full chroma reads * muddy rather than tinted. */ --primary-pale: oklch(var(--l-pale) calc(var(--palette-chroma) * 0.25) var(--hue-primary)); --on-primary: oklch(var(--l-on-solid) 0 0); --secondary: oklch(var(--l-secondary) var(--chroma-secondary) var(--hue-secondary)); --secondary-hover: oklch(calc(var(--l-secondary) - 0.07) var(--chroma-secondary) var(--hue-secondary)); --secondary-light: oklch(calc(var(--l-secondary) + 0.11) var(--chroma-secondary) var(--hue-secondary)); --secondary-pale: oklch(var(--l-pale) calc(var(--chroma-secondary) * 0.25) var(--hue-secondary)); --on-secondary: oklch(var(--l-on-solid) 0 0); /* Tertiary, same shape as the two above. */ --tertiary: oklch(var(--l-tertiary) var(--chroma-tertiary) var(--hue-tertiary)); --tertiary-hover: oklch(calc(var(--l-tertiary) - 0.07) var(--chroma-tertiary) var(--hue-tertiary)); --tertiary-pale: oklch(var(--l-pale) calc(var(--chroma-tertiary) * 0.25) var(--hue-tertiary)); --on-tertiary: oklch(var(--l-on-solid) 0 0); /* Aliases for the older names in DESIGN.md, so existing markup and any * site copied from an earlier template keep working. */ --accent: var(--primary); --accent-dark: var(--primary-hover); --accent-pale: var(--primary-pale); /* Feedback. Chroma is per-hue: yellows need more to read as yellow, reds * less before they turn fluorescent. */ --success: oklch(calc(var(--l-solid) - 0.03) 0.13 var(--hue-success)); --success-pale: oklch(var(--l-pale) 0.03 var(--hue-success)); --warning: oklch(0.75 0.14 var(--hue-warning)); --warning-pale: oklch(var(--l-pale) 0.04 var(--hue-warning)); --danger: oklch(var(--l-solid) 0.17 var(--hue-danger)); --danger-pale: oklch(var(--l-pale) 0.03 var(--hue-danger)); --info: oklch(var(--l-solid) 0.11 var(--hue-info)); --info-pale: oklch(var(--l-pale) 0.03 var(--hue-info)); /* Neutrals. DESIGN.md asked in prose for "a teal practice and a navy * practice want different --ink warmth"; --hue-neutral is that, made a * dial instead of a fixed derivation from the brand. * * Hue and chroma come from the --hue-neutral / --chroma-* * dials above, lightness from the --l-* dials, so all three are tunable * without editing any of these lines. Ink chroma tapers as text gets * lighter, and grounds use the lower --chroma-ground throughout. */ --ink-strong: oklch(var(--l-ink-strong) calc(var(--chroma-ink) * 2.5) calc(var(--hue-neutral) + 80)); /* headings, dark surfaces */ --ink: oklch(var(--l-ink) calc(var(--chroma-ink) * 1.25) var(--hue-neutral)); --ink-mid: oklch(var(--l-ink-mid) var(--chroma-ink) var(--hue-neutral)); --ink-soft: oklch(var(--l-ink-soft) calc(var(--chroma-ink) * 0.833) var(--hue-neutral)); --bg: oklch(var(--l-bg) var(--chroma-ground) var(--hue-ground, var(--hue-neutral))); --surface: oklch(var(--l-surface) var(--chroma-surface) var(--hue-neutral)); --border: oklch(var(--l-border) var(--chroma-border) var(--hue-neutral)); --border-strong: oklch(var(--l-border-strong) calc(var(--chroma-border) * 1.25) var(--hue-neutral)); /* Paired foreground for each ground, the way daisyUI's -content and * Bootstrap's -emphasis work. Use --on-bg rather than reaching for --ink * directly when the ground itself might be flipped. */ --on-bg: var(--ink); --on-surface: var(--ink); /* --- Grid ---------------------------------------------------------- */ /* Deliberately minimal: the container and gutter are fluid, placement is * left to each layout. Use .u-container and .u-grid below. */ --grid-max-width: 77.5rem; --grid-gutter: var(--space-s-l); --grid-columns: 12; /* --- Radius -------------------------------------------------------- */ /* Named by intent rather than by number, so a change of scale does not * mean auditing every --radius-3 in the stylesheet. */ --radius-xs: 0.25rem; /* tags, inline chips */ --radius-s: 0.5rem; /* buttons, inputs */ --radius-m: 0.75rem; /* cards */ --radius-l: 1.25rem; /* panels, modals, hero media */ --radius-round: 50%; /* avatars */ --radius-pill: 999px; /* pills, badges */ /* --- Border widths ------------------------------------------------- */ --border-thin: 1px; --border-medium: 2px; --border-thick: 4px; /* accent rules, active states */ /* --- Shadows ------------------------------------------------------- */ /* Two knobs drive every shadow. --shadow-color takes the brand hue so a * raised card reads as part of this practice rather than as generic grey; * --shadow-strength is what dark mode adjusts, because a shadow on a dark * background needs MORE opacity to be seen, not less. */ --shadow-color: var(--hue-primary, 220) 20% 15%; --shadow-strength: 1%; --shadow-s: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --shadow-m: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)); --shadow-l: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 6px 12px -3px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 15px 30px -6px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)); --shadow-inner-s: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)); --shadow-inner-m: inset 0 2px 6px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); /* --- Layers -------------------------------------------------------- */ /* Six values, so z-index is never invented at the call site. */ --layer-behind: -1; /* decorative washes sitting behind content */ --layer-base: 1; --layer-raised: 2; /* hover cards, sticky rows */ --layer-nav: 3; /* sticky header */ --layer-overlay: 4; /* dropdowns, popovers */ --layer-modal: 5; /* dialogs and their backdrop */ --layer-top: 2147483647;/* skip links, live-region alerts */ /* --- Motion -------------------------------------------------------- */ --duration-fast: 120ms; /* hover, focus */ --duration-base: 220ms; /* most transitions */ --duration-slow: 400ms; /* entrances */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-distance: 1.5rem; /* Typefaces. Set these per site; everything else references them. */ --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-heading: var(--font-body); /* override for a display face */ } /* ═══════════════════════════════════════════════════════════════════════ * SITE DIALS — Victoria Road Medical Centre * * Everything above is the template's token layer, unedited apart from two * per-site hooks (--l-primary on --primary, --hue-ground on --bg). This block * sets the dials; the site layer below uses only the resulting tokens. * * This site was built bespoke, before the template existed, so it carries * the template's TOKENS only — not its reset or element base layer, which * would restyle every heading, paragraph and list the site already styles. * ═══════════════════════════════════════════════════════════════════════ */ :root { /* --- Scale knobs (fleet range 390-1440; fitted to the published site) -- * Type: body 16px at both ends. At 1440 steps -1..8 generate * 13.3 / 16 / 19.2 / 23 / 27.6 / 33.2 / 39.8 / 47.8 / 57.3 / 68.8px for the * site's 13-14 / 15-17 / 18-20 / 22-24 / 28 / 34 / 40 / 48-52 / 56 / 66px. * The phone ratio is fitted to its section headings (34px at 390 for the * 48px desktop h2 -> step-6 gives 33.3) and hero title (40 -> 42.5). * Space: a 20px unit at 1440 (10 / 15 / 20 / 30 / 40 / 60 / 80 / 120 for * the site's 4px-grid 8-120px rhythm), 0.8 of it on a phone. */ --u-min-vw: 390; --u-max-vw: 1440; --u-min-font: 16; --u-max-font: 16; --u-min-ratio: 1.13; --u-max-ratio: 1.2; --u-space-min: 1; --u-space-max: 1.25; /* Light only: the site was designed for a cream ground, and the template's * dark-mode block is deliberately not carried. */ --scheme: 1; color-scheme: light; /* --- Palette: the site's measured sRGB, converted precisely ------------ */ /* primary = amber #a4630f (164,99,15) -> oklch(0.5599 0.1209 64.8738) */ --palette-hue: 64.8738; --palette-chroma: 0.1209; --l-primary: 0.5599; /* secondary = gold #d78700 (215,135,0) -> oklch(0.6908 0.1510 68.6212) */ --palette-secondary-shift: 3.7474; --chroma-secondary: 0.1510; --l-secondary: 0.6908; /* tertiary = light gold #f5e3b2 (245,227,178) -> oklch(0.9185 0.0664 90.2618), * the panel and card ground */ --palette-tertiary-shift: 25.388; --chroma-tertiary: 0.0664; --l-tertiary: 0.9185; /* --- Neutrals ------------------------------------------------------------ */ /* ink = dark brown #3d2812 (61,40,18) -> oklch(0.2971 0.0467 65.5733); * --ink takes chroma-ink x 1.25 */ --hue-neutral: 65.5733; --chroma-ink: 0.03736; --l-ink: 0.2971; /* Headings are set in the same dark brown as body text. */ --ink-strong: var(--ink); /* ground = cream #fef9ef (254,249,239) -> oklch(0.9832 0.0142 84.5827): * a warmer hue than the ink, hence its own --hue-ground */ --hue-ground: 84.5827; --chroma-ground: 0.0142; --l-bg: 0.9832; /* --- Extension colours: values no role derives ------------------------- */ --tan: oklch(0.8614 0.0712 86.4888); /* #e6cf9c (230,207,156): image placeholders, rules */ --hero-fallback: oklch(0.662 0.0936 74.1549); /* #b58a4e (181,138,78): hero ground before its photo loads */ --form-success: oklch(0.6271 0.1699 149.2138); /* (22,163,74): form success tint */ --form-success-ink: oklch(0.4318 0.0865 166.9128); /* (6,95,70): form success text */ --form-error: oklch(0.6368 0.2078 25.3313); /* (239,68,68): form error tint */ --form-error-ink: oklch(0.4437 0.1613 26.8994); /* (153,27,27): form error text */ /* Masks read alpha only; any opaque colour cuts the same shape. */ --mask-opaque: oklch(0 0 0); /* Ink at reduced strength: secondary and tertiary text on cream. */ --ink-alpha-82: color-mix(in srgb, var(--ink) 82%, transparent); --ink-alpha-78: color-mix(in srgb, var(--ink) 78%, transparent); --ink-alpha-72: color-mix(in srgb, var(--ink) 72%, transparent); --ink-alpha-62: color-mix(in srgb, var(--ink) 62%, transparent); --ink-alpha-6: color-mix(in srgb, var(--ink) 60%, transparent); /* --- Type, motion, shape ------------------------------------------------ */ --font-heading: 'Rethink Sans', sans-serif; --font-body: 'Mulish', sans-serif; --ease: cubic-bezier(.23, 1, .32, 1); --radius: 14px; --radius-sm: 12px; --radius-pill: 999px; /* Two weights beyond the template's three, each already in the design: * Rethink Sans's 800 cut on display numerals and badges, visibly heavier * than 700, and Mulish 500 on the lead paragraphs. */ --weight-800: 800; --weight-500: 500; /* Leading ladder, redefined to the site's own line-heights (headings * 1.07-1.15, subheads 1.18-1.35, copy 1.5-1.72); each declaration took the * nearest rung, none moved more than 0.05. --leading-2xl extends the * ladder for the long-form copy the site sets looser than 1.6. */ --leading-xs: 1.12; --leading-s: 1.22; --leading-m: 1.32; --leading-l: 1.5; --leading-xl: 1.62; --leading-2xl: 1.7; /* A flat layer for stacking contexts the site resets to 0. */ --layer-ground: 0; } *, *::before, *::after { box-sizing: border-box; } .hero, .hero-simple__container, .about__image-inner, .service-card__image-inner, .doctor__image, .team-card__image-inner, .step-card__image-inner, .about-page-story__image, .about-page-story__image-inner, .about-page-standards__image, .about-page-standards__image-inner, .contact-map__embed, .contact-main__map-col, .doctors-intro__image, .doctor-card, .doctor-avatar, .new-patients__card, .new-patients__doctor-photo, .contact-extra__map, .contact-info-card { isolation: isolate; } body { margin: 0; background: var(--bg); font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--ink); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-700); letter-spacing: -.025em; line-height: var(--leading-xs); margin: 0; } p { margin: 0; } /* Headings and small text that no class sizes fell back to the browser's em defaults (an h2 at 24px); put them on the nearest steps instead. :where() keeps every classed rule in charge. */ :where(h1) { font-size: var(--step-4); } :where(h2) { font-size: var(--step-2); } :where(h3) { font-size: var(--step-1); } :where(h4) { font-size: var(--step-0); } :where(small) { font-size: var(--step--1); } ul, ol { margin: 0; padding: 0; list-style: none; } li { border: none; } /* ---------------------------------------------------------------- Skip link ---------------------------------------------------------------- */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: var(--layer-top); background: var(--primary); color: var(--bg); padding: calc(var(--space-3xs) * 2) var(--space-s); border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: var(--weight-700); font-size: var(--step--1); } .skip-link:focus { top: 16px; color: var(--bg); } /* ---------------------------------------------------------------- Top bar ---------------------------------------------------------------- */ .top-bar { background: var(--ink); color: var(--bg); font-family: var(--font-heading); font-size: var(--step--1); letter-spacing: .04em; padding: var(--space-2xs) var(--space-l); display: flex; justify-content: space-between; gap: var(--space-s); border: none; } .top-bar strong { font-weight: var(--weight-700); } .top-bar > span:first-child { display: inline-flex; align-items: center; gap: var(--space-3xs); } .top-bar a { color: var(--bg); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3xs); } .top-bar a:hover { color: var(--secondary); } .top-bar__contact { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-700); } .top-bar__sep { opacity: .5; } /* ---------------------------------------------------------------- Section badge (label pill) ---------------------------------------------------------------- */ .section-badge { display: inline-flex; padding: 0; font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); } .section-badge--cream { background: transparent; } .section-badge--gold { background: transparent; } /* ---------------------------------------------------------------- Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-weight: var(--weight-700); letter-spacing: .05em; border-radius: var(--radius-pill); white-space: nowrap; border: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn--primary { background: var(--primary); color: var(--bg); font-size: var(--step--1); padding: var(--space-xs) var(--space-m); } .btn--primary:hover { background: var(--secondary); color: var(--bg); } .btn--outline { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; color: var(--ink); font-size: var(--step--1); padding: var(--space-xs) var(--space-m); } .btn--outline:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); } .btn--small { font-size: var(--step--2); padding: var(--space-xs) calc(var(--space-xs) + var(--space-2xs)); } .btn--hero-primary { background: var(--primary); color: var(--bg); font-size: var(--step--1); padding: var(--space-xs) var(--space-m); } .btn--hero-primary:hover { background: var(--secondary); color: var(--bg); } .btn--hero-outline { border: 1px solid color-mix(in srgb, var(--bg) 50%, transparent); background: transparent; color: var(--bg); font-size: var(--step--1); padding: var(--space-xs) var(--space-m); } .btn--hero-outline:hover { background: var(--secondary); color: var(--bg); border-color: var(--secondary); } /* ---------------------------------------------------------------- Hero ---------------------------------------------------------------- */ .hero-wrapper { padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m) 0; } .hero { position: relative; /* flow-root contains the child margins (the hours card's bottom margin on mobile/tablet) without clipping, which overflow: hidden used to do here before it was removed to fix the corner hairline. */ display: flow-root; border-radius: var(--radius); /* No overflow: hidden here. Clipping the hero at a rounded corner leaves a 1px anti-aliased seam where the cream panels meet the curve (the hairline). The media layers below round themselves instead, and the cream panels round their own outer corners, so nothing needs clipping at this level. */ background: var(--hero-fallback) center/cover no-repeat; min-height: 780px; } .hero__slides { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; } .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease-in-out; } .hero__slide--active { opacity: 1; } .hero--slideshow { background: var(--hero-fallback); } @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } } .hero__overlay { position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 78%, transparent) 40%, color-mix(in srgb, var(--ink) 34%, transparent) 78%, color-mix(in srgb, var(--ink) 20%, transparent) 100%); } .hero__top { position: absolute; left: -1px; top: -1px; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--space-3xs) * 2); z-index: var(--layer-raised); } .hero__logo-nav { display: flex; align-items: flex-end; gap: var(--space-xs-s); min-width: 0; flex-shrink: 3; position: relative; background: var(--bg); border-radius: var(--radius) 0 24px 0; padding: var(--space-s) var(--space-s) var(--space-m) var(--space-xs-s); } /* Corner cutout curves */ .hero__logo-nav::before { content: ''; position: absolute; right: -24px; top: 0; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--bg) 24.5px); } .hero__logo-nav::after { content: ''; position: absolute; left: 0; bottom: -24px; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--bg) 24.5px); } /* Decorative corner patch: rounds the hero image's top-left where it meets the logo band at <=1024px. Hidden on desktop, where the band's own corners and the concave cutouts already do this. See the mobile rules further down. */ .hero__corner { display: none; } .hero__logo { height: clamp(34px, 3.1vw, 46px); width: auto; max-width: none; flex-shrink: 0; object-fit: contain; } .hero__nav { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-600); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; list-style: none; padding: 0; margin: 0; } .hero__nav a { position: relative; color: var(--ink-alpha-72); padding: var(--space-3xs) var(--space-2xs); border-radius: 8px; transition: background .15s ease, color .15s ease; background: transparent; } /* Between the desktop layout's narrowest point and the mobile menu (1025-1200px) the cream bar narrows faster than the nav, and the last link ran up to 71px past its rounded end onto the photo. Tighten the gaps rather than the type. */ @media (min-width: 1025px) and (max-width: 1200px) { .hero__nav { gap: 0; } .hero__nav a { padding-inline: var(--space-3xs); } } .hero__nav a:hover { background: var(--tertiary); color: var(--ink); } .hero__nav a.active, .hero__nav a[aria-current="page"] { background: transparent; color: var(--secondary); font-weight: var(--weight-700); } .hero__actions { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-s) var(--space-s); flex-shrink: 0; } .hero__phone { display: flex; align-items: center; gap: var(--space-2xs); background: color-mix(in srgb, var(--bg) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); color: var(--bg); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-pill); white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; } .hero__phone:hover { background: var(--secondary); color: var(--ink); border-color: var(--secondary); } .hero__book-btn { background: var(--primary); color: var(--bg); font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .05em; padding: var(--space-xs) calc(var(--space-xs) + var(--space-2xs)); border-radius: var(--radius-pill); white-space: nowrap; transition: background .15s ease, color .15s ease; } .hero__book-btn:hover { background: var(--secondary); color: var(--bg); } .hero__content { position: relative; max-width: 1448px; margin: 0 auto; padding: calc(var(--space-4xl) + var(--space-s)) calc(var(--space-xs) + var(--space-2xs)) var(--space-2xl); z-index: var(--layer-base); } .hero__content-inner { max-width: 840px; } .hero__locale-badge { display: inline-flex; align-items: center; gap: var(--space-3xs); background: color-mix(in srgb, var(--bg) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-xs); font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .09em; color: var(--bg); } .hero__title { font-size: var(--step-8); line-height: var(--leading-xs); font-weight: var(--weight-700); letter-spacing: -.028em; margin: var(--space-s) 0 0; color: var(--bg); } .hero__subtitle { font-family: var(--font-heading); font-size: var(--step-2); font-weight: var(--weight-600); line-height: var(--leading-m); margin: var(--space-s) 0 0; color: var(--tertiary); } .hero__desc { font-size: var(--step-1); line-height: var(--leading-xl); color: color-mix(in srgb, var(--bg) 88%, transparent); margin: var(--space-xs) 0 0; max-width: 600px; } .hero__desc-lead { font-family: var(--font-heading); font-weight: var(--weight-500); font-size: var(--step-1); } .hero__languages { display: flex; align-items: center; gap: var(--space-xs); margin-top: calc(var(--space-s) + var(--space-3xs)); flex-wrap: wrap; } .hero__lang-tags { display: flex; gap: var(--space-3xs); } .hero__lang-tag { background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-800); letter-spacing: .06em; padding: var(--space-3xs) calc(var(--space-3xs) * 2); border-radius: var(--radius-pill); } .hero__lang-text { font-size: var(--step--1); line-height: var(--leading-l); color: color-mix(in srgb, var(--bg) 75%, transparent); } .hero__ctas { display: flex; gap: calc(var(--space-3xs) * 2); align-items: center; margin-top: var(--space-l); flex-wrap: wrap; } /* Hero avatar cluster */ .hero__avatars { display: flex; align-items: center; margin-top: var(--space-s); } .hero__avatars img, .hero__avatars .hero__avatar-initial { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; /* Same upward bias as the team cards — at 44px a centred crop on a portrait source lands on the chin rather than the face. */ object-position: 50% 20%; border: 2px solid color-mix(in srgb, var(--bg) 40%, transparent); margin-left: calc(-1 * var(--space-2xs)); } /* Initial in place of a headshot, matching the team card monogram. */ .hero__avatars .hero__avatar-initial { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--tertiary); color: var(--primary); font-family: var(--font-heading); font-weight: var(--weight-700); font-size: var(--step-1); line-height: 1; user-select: none; } .hero__avatars img:first-child, .hero__avatars .hero__avatar-initial:first-child { margin-left: 0; } /* Hero after-hours floating bar */ .hero__after-hours { display: inline-block; margin-top: calc(var(--space-xs) + var(--space-2xs)); padding: var(--space-xs) var(--space-s); background: var(--tertiary); border-radius: var(--radius-sm); color: var(--ink); } .hero__after-hours-title { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-800); letter-spacing: .06em; margin-bottom: var(--space-3xs); } .hero__after-hours p { font-size: var(--step--1); line-height: var(--leading-l); margin: 0 0 calc(var(--space-3xs) / 3); } .hero__after-hours p:last-child { margin-bottom: 0; } /* Hero info cards (floating yellow boxes) */ .hero__info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); margin-top: var(--space-m); } .hero__info-card { background: var(--tertiary); border-radius: var(--radius-sm); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m); } .hero__info-card h3 { font-size: var(--step-0); font-weight: var(--weight-700); color: var(--ink); margin: 0 0 var(--space-3xs); } .hero__info-card p { font-size: var(--step--1); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: 0; } /* Hero hours card (bottom-right) */ .hero__hours { position: absolute; right: -1px; bottom: -1px; background: var(--bg); border-radius: 24px 0 var(--radius) 0; padding: var(--space-s) var(--space-m) calc(var(--space-xs) + var(--space-2xs)) var(--space-m); min-width: 344px; z-index: var(--layer-raised); } .hero__hours::before { content: ''; position: absolute; left: -24px; bottom: 0; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--bg) 24.5px); } .hero__hours::after { content: ''; position: absolute; right: 0; top: -24px; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--bg) 24.5px); } .hero__hours-label { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .12em; color: var(--primary); } .hero__hours-list { margin-top: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--step--1); } .hero__hours-row { display: flex; justify-content: space-between; gap: var(--space-s); } .hero__hours-row strong { font-weight: var(--weight-700); } .hero__hours-row span { color: var(--ink-alpha-78); text-align: right; } .hero__hours-divider { height: 1px; background: var(--tan); } .hero__hours-note { font-size: var(--step--1); line-height: var(--leading-l); color: var(--ink-alpha-62); font-style: italic; margin: calc(var(--space-3xs) * 2) 0 0; } /* Subpage hero — shorter, smaller title */ .hero__content-inner--sub { max-width: 780px; } .hero__title--sub { font-size: var(--step-6); } .hero__content-inner--right { padding-top: calc(var(--space-4xl) * 2 + var(--space-l)); } /* Contact hero — floating form card */ .hero__content-inner--contact { max-width: 980px; } .hero__contact-form { margin-top: var(--space-m); background: var(--tertiary); border-radius: var(--radius); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m) var(--space-m); } .hero__contact-form h2 { font-size: var(--step-0); font-weight: var(--weight-700); letter-spacing: .06em; color: var(--primary); margin: 0 0 var(--space-xs); text-transform: uppercase; } .hero__contact-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xs); } .hero__contact-form-grid .contact-field { margin-top: 0; min-width: 0; } .hero__contact-form-grid .contact-field--message { grid-column: 1 / -1; } .hero__contact-form-grid .contact-field--submit { grid-column: 1 / -1; justify-self: start; } .hero__contact-form-grid .contact-field label { font-size: var(--step--2); margin-bottom: var(--space-3xs); color: var(--ink); } .hero__contact-form-grid .contact-field input, .hero__contact-form-grid .contact-field textarea { padding: var(--space-2xs) var(--space-xs); font-size: var(--step--1); background: var(--bg); } .hero__contact-form-grid .contact-field textarea { min-height: 70px; resize: vertical; } .hero__contact-form-grid .contact-submit { margin-top: calc(var(--space-3xs) / 2); } .contact-submit-row { display: flex; align-items: center; gap: var(--space-xs); } .contact-form-disclaimer { font-size: var(--step--2); line-height: var(--leading-l); color: var(--ink-alpha-62); flex: 1; } /* ---------------------------------------------------------------- Contact — Map + Details info section ---------------------------------------------------------------- */ .contact-info { padding: var(--space-3xl) var(--space-m) var(--space-2xl); } .contact-info__inner { max-width: 1350px; margin: 0 auto; display: grid; grid-template-columns: 7fr 3fr; gap: var(--space-m); align-items: stretch; } .contact-info__cards { display: flex; flex-direction: column; gap: var(--space-xs); } .contact-info__map { border-radius: var(--radius); overflow: hidden; min-height: 400px; -webkit-mask-image: -webkit-radial-gradient(var(--mask-opaque), var(--mask-opaque)); } .contact-info__map .contact-map__embed { height: 100%; } .contact-info__map .contact-map__embed iframe { display: block; width: 100%; height: 100%; min-height: 400px; } .contact-info__cards-header { margin-bottom: calc(var(--space-3xs) / 2); } .contact-info__cards-header h3 { font-size: var(--step-5); margin: 0 0 calc(var(--space-3xs) * 2); } .contact-info__cards-header p { font-size: var(--step-1); line-height: var(--leading-xl); color: var(--ink-alpha-78); max-width: 600px; } .contact-info-card { position: relative; border-radius: var(--radius); } .contact-info-card__bg { position: absolute; inset: 0; background: var(--tertiary); border-radius: var(--radius); } .contact-info-card__icon { position: absolute; right: 0; top: 0; width: 52px; height: 42px; background: var(--primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--bg); z-index: var(--layer-base); } .contact-info-card__body { position: relative; z-index: var(--layer-base); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m); } .contact-info-card__body h3 { font-size: var(--step-0); font-weight: var(--weight-700); margin: 0 0 var(--space-3xs); } .contact-info-card__body address, .contact-info-card__body p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-82); font-style: normal; } .contact-info-card__body a { color: var(--primary); } .notch-tr-sm { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="86" height="76"%3E%3Cpath d="M86 64 A12 12 0 0 0 74 52 H32 A12 12 0 0 1 20 40 V12 A12 12 0 0 0 8 0 H86 V64 Z" fill="black"/%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right top, 0 0; mask-size: 86px 76px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="86" height="76"%3E%3Cpath d="M86 64 A12 12 0 0 0 74 52 H32 A12 12 0 0 1 20 40 V12 A12 12 0 0 0 8 0 H86 V64 Z" fill="black"/%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right top, 0 0; -webkit-mask-size: 86px 76px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } /* Contact — After hours + FAQ */ .contact-extra { padding: 0 var(--space-m) var(--space-2xl); } .contact-extra__grid { max-width: 1350px; margin: 0 auto; display: grid; grid-template-columns: 3fr 7fr; gap: var(--space-l); align-items: stretch; } .contact-extra__image { display: flex; flex-direction: column; gap: var(--space-xs); } .contact-extra__image-main { flex: 1; min-height: 240px; border-radius: var(--radius); overflow: hidden; transition: flex-basis .35s var(--ease); } .contact-extra__image-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-extra__image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); } .contact-extra__image-thumb { border-radius: var(--radius); overflow: hidden; height: 160px; } .contact-extra__image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-extra__after-hours-inner { margin-top: var(--space-s); background: var(--tertiary); border-radius: var(--radius); padding: calc(var(--space-m) + var(--space-3xs)) var(--space-l); } .contact-extra__after-hours-icon { color: var(--primary); margin-bottom: var(--space-xs); } .contact-extra__after-hours h2 { font-size: var(--step-2); margin: 0 0 calc(var(--space-3xs) * 2); } .contact-extra__after-hours { display: flex; flex-direction: column; } .contact-extra__map { min-height: 200px; flex: 1; border-radius: var(--radius); overflow: hidden; transition: flex-basis .35s var(--ease), min-height .35s var(--ease); -webkit-mask-image: -webkit-radial-gradient(var(--mask-opaque), var(--mask-opaque)); } .contact-extra__map .contact-map__embed { height: 100%; } .contact-extra__map .contact-map__embed iframe { display: block; width: 100%; height: 100%; min-height: 200px; } .contact-extra__faq h2 { font-size: var(--step-4); margin: var(--space-xs) 0 0; } .contact-extra__faq-desc { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: calc(var(--space-3xs) * 2) 0 0; max-width: 560px; } .faq-accordion { margin-top: calc(var(--space-xs) + var(--space-2xs)); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-l); } .faq-item { border-top: 2px solid var(--tertiary); } .faq-item:last-child { border-bottom: 2px solid var(--tertiary); } .faq-item--full { grid-column: 1 / -1; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-s) 0; font-family: var(--font-heading); font-size: var(--step-1); font-weight: var(--weight-600); color: var(--ink); cursor: pointer; list-style: none; transition: color .15s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ''; width: 20px; height: 20px; flex: 0 0 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233d2812' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: transform .2s var(--ease); } .faq-item[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a4630f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .faq-item[open] summary { color: var(--primary); } .faq-item summary:hover { color: var(--primary); } .faq-item__content { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); } .faq-item > p, .faq-item__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); padding: 0 0 var(--space-s); } .faq-item > p a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------- Mobile menu ---------------------------------------------------------------- */ .mobile-menu-toggle { display: none; background: none; border: none; padding: var(--space-2xs); cursor: pointer; color: var(--ink); z-index: var(--layer-overlay); } .mobile-nav-overlay { display: none; } /* ---------------------------------------------------------------- Features strip ---------------------------------------------------------------- */ .features { max-width: 1504px; margin: 0 auto; padding: var(--space-2xl) calc(var(--space-l) + var(--space-2xs)) var(--space-2xl); } .features__grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; max-width: 1400px; margin: 0 auto; } .features__item { padding: 0 calc(var(--space-s) + var(--space-xs)); border-right: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent); } .features__item:first-child { padding-left: 0; } .features__item:last-child { padding-right: 0; border-right: none; } .features__item:nth-child(even) { padding-top: 0; } .features__icon { display: block; margin-bottom: var(--space-s); color: var(--secondary); } .features__item h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); letter-spacing: normal; } .features__item p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: calc(var(--space-3xs) * 2) 0 0; } /* ---------------------------------------------------------------- About section ---------------------------------------------------------------- */ .about { padding: var(--space-s) var(--space-l) calc(var(--space-2xl) + var(--space-xs)); } .about__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--space-xl) + var(--space-2xs)); align-items: center; } .about__image-wrap { position: relative; } .about__image { position: relative; height: 540px; border-radius: var(--radius-sm); } .about__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-sm); overflow: hidden; } .about__image img { width: 100%; height: 100%; object-fit: cover; } .about__badge.corner-badge { width: 130px; height: 130px; padding: calc(var(--space-3xs) * 2); background: none; border-radius: var(--radius-sm); box-shadow: none; } .about__badge img { width: 100%; height: 100%; object-fit: contain; } .about__content { max-width: 620px; } .about__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .about__content h2 span { color: inherit; } .about__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; } .about__stats { margin-top: var(--space-m); background: var(--tertiary); border-radius: var(--radius-sm); padding: calc(var(--space-s) + var(--space-3xs)) var(--space-m); display: grid; grid-template-columns: repeat(3, 1fr); } .about__stat { padding: 0 calc(var(--space-xs) + var(--space-2xs)); } .about__stat:first-child { padding-left: 0; } .about__stat:last-child { padding-right: 0; } .about__stat + .about__stat { border-left: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent); } .about__stat-number { font-family: var(--font-heading); font-size: var(--step-4); font-weight: var(--weight-800); letter-spacing: -.03em; color: var(--primary); line-height: 1; } .about__stat-label { font-size: var(--step--1); color: var(--ink-alpha-78); margin-top: var(--space-3xs); } /* ---------------------------------------------------------------- Services section ---------------------------------------------------------------- */ .services-section { padding: 0 var(--space-m); } .services-section__inner { background: var(--tertiary); border-radius: var(--radius); padding: var(--space-2xl) var(--space-xl) calc(var(--space-2xl) + var(--space-s)); } .services-section__wrap { max-width: 1500px; margin: 0 auto; } .services-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l); } .services-section__header > div { max-width: 780px; } .services-section__header h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .services-section__header h2 span { color: inherit; } .services-section__intro { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; max-width: 520px; } .services__grid { margin-top: calc(var(--space-l) + var(--space-3xs)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-m) + var(--space-3xs)); } /* -- Reusable corner-badge notch pattern -- The image gets a CSS mask that scoops out the corner where the badge sits. The badge overlaps into the scooped area so the two shapes interlock. Mask SVG encodes: rounded-rect minus the badge corner with a concave curve. */ .notch-tl { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cg transform="translate(130,0) scale(-1,1)"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: left top, 0 0; mask-size: 130px 104px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cg transform="translate(130,0) scale(-1,1)"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: left top, 0 0; -webkit-mask-size: 130px 104px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .notch-tr { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right top, 0 0; mask-size: 130px 104px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right top, 0 0; -webkit-mask-size: 130px 104px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } /* Services page category cards only - .notch-tr is shared, so it is left alone and this class is added beside it on services.html. Same defect as the team cards, rotated: the SVG mask layer is anchored to the element's top-right corner, so its own antialiased boundary sits on those two edges and leaves a pale strip down the right side of the photo, below the badge. Pulling the layer 1px up and right moves that soft boundary outside the painted area; the gradient layer keeps the edges crisp. 1px is enough here because this mask is 88x76, smaller than the team cards' 130x104. */ .notch-tr--crisp { mask-position: right -1px top -1px, 0 0; -webkit-mask-position: right -1px top -1px, 0 0; } .notch-bl { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: left bottom, 0 0; mask-size: 298px 100px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: left bottom, 0 0; -webkit-mask-size: 298px 100px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .notch-br { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="94" height="74"%3E%3Cg transform="translate(0,74) scale(1,-1)"%3E%3Cpath d="M94 68 A12 12 0 0 0 82 56 H32 A14 14 0 0 1 18 42 V12 A12 12 0 0 0 6 0 H94 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right bottom, 0 0; mask-size: 94px 74px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="94" height="74"%3E%3Cg transform="translate(0,74) scale(1,-1)"%3E%3Cpath d="M94 68 A12 12 0 0 0 82 56 H32 A14 14 0 0 1 18 42 V12 A12 12 0 0 0 6 0 H94 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right bottom, 0 0; -webkit-mask-size: 94px 74px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } /* Team-card notch, the base .notch-br shape scaled 1.25x. The team cards became square (~402px) when the fixed 230px height was dropped, so the badge went from 3.5% of the card to 2% and read as undersized against the larger photo. Scaling the whole shape - box, arcs and badge together - keeps the 8px channels on both sides and the notch's proportions. */ .notch-br-team { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="118" height="92"%3E%3Cg transform="translate(0,92) scale(1,-1)"%3E%3Cpath d="M118 85 A15 15 0 0 0 102 70 H40 A18 18 0 0 1 22 52 V15 A15 15 0 0 0 8 0 H118 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right bottom, 0 0; mask-size: 118px 92px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="118" height="92"%3E%3Cg transform="translate(0,92) scale(1,-1)"%3E%3Cpath d="M118 85 A15 15 0 0 0 102 70 H40 A18 18 0 0 1 22 52 V15 A15 15 0 0 0 8 0 H118 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right bottom, 0 0; -webkit-mask-size: 118px 92px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } /* Staff section of the doctors & staff page only - .notch-br-team is shared with the homepage, so it is left alone and this class is added beside it on doctors-and-staff.html. The notch mask has two layers: the SVG that carves the corner, and a linear-gradient that covers the rest of the box. The SVG layer is anchored to the element's bottom edge, and its own antialiased boundary sits right on that edge - so the photo's bottom fades out over ~2.8px instead of ending cleanly, which reads as a grey hairline running left from the badge. Dropping that layer 2px below the element puts its soft boundary outside the painted area; the gradient layer then defines a crisp bottom edge. Measured at 8x zoom the fade falls from 2.75px to 1.38px, the same as an unmasked edge. Past -2px the fade stops improving and only eats into the channel. */ .notch-br-team--crisp { mask-position: right bottom -2px, 0 0; -webkit-mask-position: right bottom -2px, 0 0; } .notch-br-badge { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="340" height="240"%3E%3Cg transform="translate(0,240) scale(1,-1)"%3E%3Cpath d="M340 226 A14 14 0 0 0 326 212 H32 A18 18 0 0 1 14 194 V14 A14 14 0 0 0 0 0 H340 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right bottom, 0 0; mask-size: 340px 240px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="340" height="240"%3E%3Cg transform="translate(0,240) scale(1,-1)"%3E%3Cpath d="M340 226 A14 14 0 0 0 326 212 H32 A18 18 0 0 1 14 194 V14 A14 14 0 0 0 0 0 H340 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right bottom, 0 0; -webkit-mask-size: 340px 240px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .notch-bl-badge { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,156) scale(-1,-1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: left bottom, 0 0; mask-size: 156px 156px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,156) scale(-1,-1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: left bottom, 0 0; -webkit-mask-size: 156px 156px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .notch-tl-badge { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,0) scale(-1,1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: left top, 0 0; mask-size: 156px 156px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,0) scale(-1,1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: left top, 0 0; -webkit-mask-size: 156px 156px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .notch-tr-bl { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="78" height="70"%3E%3Cpath d="M78 70 A14 14 0 0 0 64 56 H32 A18 18 0 0 1 14 38 V14 A14 14 0 0 0 0 0 H78 Z" fill="black"/%3E%3C/svg%3E'), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right top, left bottom, 0 0; mask-size: 78px 70px, 298px 100px, 100% 100%; mask-repeat: no-repeat, no-repeat, no-repeat; mask-composite: exclude, exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="78" height="70"%3E%3Cpath d="M78 70 A14 14 0 0 0 64 56 H32 A18 18 0 0 1 14 38 V14 A14 14 0 0 0 0 0 H78 Z" fill="black"/%3E%3C/svg%3E'), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right top, left bottom, 0 0; -webkit-mask-size: 78px 70px, 298px 100px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat, no-repeat; -webkit-mask-composite: xor, xor; } .notch-br-lg { mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="258"%3E%3Cg transform="translate(0,258) scale(1,-1)"%3E%3Cpath d="M300 258 A14 14 0 0 0 286 244 H32 A18 18 0 0 1 14 226 V14 A14 14 0 0 0 0 0 H300 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right bottom, 0 0; mask-size: 300px 258px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="258"%3E%3Cg transform="translate(0,258) scale(1,-1)"%3E%3Cpath d="M300 258 A14 14 0 0 0 286 244 H32 A18 18 0 0 1 14 226 V14 A14 14 0 0 0 0 0 H300 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right bottom, 0 0; -webkit-mask-size: 300px 258px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .notch-br-cta { /* The SVG layer is pulled 1px past the corner so its antialiased boundary falls outside the painted area. Anchored flush, that soft edge let the gold card fade into the cream over ~6.5px along the notch, which read as a faint yellow line beside the emergency box. With the offset it is 1px. Only CTA cards use this class, so every page's CTA gets the fix. */ mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="370" height="234"%3E%3Cg transform="translate(0,234) scale(1,-1)"%3E%3Cpath d="M370 234 A14 14 0 0 0 356 220 H32 A18 18 0 0 1 14 202 V14 A14 14 0 0 0 0 0 H370 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); mask-position: right -1px bottom -1px, 0 0; mask-size: 370px 234px, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="370" height="234"%3E%3Cg transform="translate(0,234) scale(1,-1)"%3E%3Cpath d="M370 234 A14 14 0 0 0 356 220 H32 A18 18 0 0 1 14 202 V14 A14 14 0 0 0 0 0 H370 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'), linear-gradient(var(--mask-opaque), var(--mask-opaque)); -webkit-mask-position: right -1px bottom -1px, 0 0; -webkit-mask-size: 370px 234px, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; } .corner-badge { position: absolute; background: var(--primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--bg); z-index: var(--layer-base); } .corner-badge--tl { left: 0; top: 0; } .corner-badge--tr { right: 0; top: 0; } .corner-badge--br { right: 0; bottom: 0; } .corner-badge--bl { left: 0; bottom: 0; } .service-card__image { position: relative; height: 250px; border-radius: var(--radius-sm); } .service-card__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-sm); overflow: hidden; } .service-card__image img { width: 100%; height: 100%; object-fit: cover; } .service-card__icon { width: 90px; height: 64px; } .service-card__heading { display: flex; align-items: baseline; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-s); padding-top: var(--space-xs); border-top: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent); } .service-card__number { font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); } .service-card__heading h3 { font-size: var(--step-2); font-weight: var(--weight-700); line-height: var(--leading-s); letter-spacing: -.015em; } .service-card p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-2xs) 0 0; } /* ---------------------------------------------------------------- Doctor profile section ---------------------------------------------------------------- */ .doctor { padding: calc(var(--space-2xl) + var(--space-2xs)) var(--space-l); } .doctor__wrap { max-width: 1504px; margin: 0 auto; } .doctor__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-xl); align-items: start; } .doctor__image-wrap { position: relative; } .doctor__image { height: 560px; background: var(--tan); border-radius: var(--radius); overflow: hidden; } .doctor__image img { width: 100%; height: 100%; object-fit: cover; } /* Team page only - the homepage shares .doctor__image but uses a different photo (a consultation scene) that wants the existing fixed height and centring. Here the photo matches the copy column: the grid stretches both, and the photo takes its height from the row so the two end level. */ .doctor--team .doctor__grid { align-items: stretch; } .doctor--team .doctor__image-wrap { display: flex; flex-direction: column; /* A stretched grid item's height is definite, but only if its own content is not allowed to push it out. */ min-height: 0; } .doctor--team .doctor__image { background: var(--tertiary); width: 100%; /* flex-basis 0 + min-height 0 is what makes this track the copy column: with height:auto the inner img's height:100% resolves against an indefinite parent, falls back to its intrinsic height and pushes the box taller than the row. Basis 0 gives the box a definite height from the flex line, so the img fills it instead of driving it. */ flex: 1 1 0; min-height: 0; height: auto; } .doctor--team .doctor__image img { /* The frame is now taller than the portrait's aspect at most widths, so the crop is vertical. Anchored high: it takes from the background above his head first and keeps his head and shoulders in frame. */ object-position: 50% 4%; } .doctor__quote { position: absolute; right: 0; bottom: 0; width: 280px; background: var(--bg); border-radius: 16px 0 var(--radius) 0; padding: var(--space-3xs) 0 0 var(--space-3xs); z-index: var(--layer-base); } .doctor__quote-inner { background: var(--tertiary); border-radius: var(--radius-sm); padding: var(--space-s) calc(var(--space-xs) + var(--space-2xs)) var(--space-s); display: flex; flex-direction: column; height: 100%; } .doctor__quote::before { content: ''; position: absolute; left: -16px; bottom: 0; width: 16px; height: 16px; background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--bg) 15.5px); } .doctor__quote::after { content: ''; position: absolute; right: 0; top: -16px; width: 16px; height: 16px; background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--bg) 15.5px); } .doctor__quote-mark { font-family: var(--font-heading); font-size: var(--step-3); font-weight: var(--weight-800); color: var(--secondary); line-height: .5; } .doctor__quote p { font-family: var(--font-heading); font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); letter-spacing: -.015em; color: var(--ink); margin: var(--space-xs) 0 0; } .doctor__quote-divider { width: 40px; height: 1px; background: color-mix(in srgb, var(--ink) 28%, transparent); margin: var(--space-s) 0 calc(var(--space-3xs) * 2); } .doctor__quote-name { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); color: var(--ink); } .doctor__quote-creds { font-size: var(--step--2); color: var(--ink-alpha-62); margin: calc(var(--space-3xs) / 2) 0 0; } .doctor__content { padding-top: var(--space-3xs); } .doctor__label { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .1em; color: var(--primary); } .doctor__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-xs) 0 0; } .doctor__creds { font-family: var(--font-heading); font-size: var(--step-0); font-weight: var(--weight-600); letter-spacing: .02em; color: var(--primary); margin: var(--space-3xs) 0 0; } .doctor__intro { font-family: var(--font-heading); font-size: var(--step-1); font-weight: var(--weight-600); line-height: var(--leading-l); margin: var(--space-s) 0 0; } .doctor__bio { font-size: var(--step-0); line-height: var(--leading-2xl); color: color-mix(in srgb, var(--ink) 84%, transparent); margin: var(--space-xs) 0 0; } .doctor__interests { margin-top: var(--space-m); } .doctor__interests-label { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .1em; color: var(--primary); } .doctor__interests-grid { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-2xs) calc(var(--space-xs) + var(--space-2xs)); margin-top: var(--space-s); justify-content: start; } .doctor__interest { display: flex; align-items: center; gap: calc(var(--space-3xs) * 2); } .doctor__interest-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); } .doctor__interest span:last-child { font-family: var(--font-heading); font-size: var(--step-0); font-weight: var(--weight-600); } /* Team page: the interests list takes the overlay card on the portrait, and the quote sits in the copy column unboxed. Same shapes as the homepage arrangement, contents swapped. */ .doctor__interests--panel { position: absolute; right: 0; bottom: 0; width: 280px; margin-top: 0; background: var(--bg); border-radius: 16px 0 var(--radius) 0; padding: var(--space-3xs) 0 0 var(--space-3xs); z-index: var(--layer-base); } .doctor__interests--panel::before { content: ''; position: absolute; left: -16px; bottom: 0; width: 16px; height: 16px; background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--bg) 15.5px); } .doctor__interests--panel::after { content: ''; position: absolute; right: 0; top: -16px; width: 16px; height: 16px; background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--bg) 15.5px); } .doctor__interests-inner { background: var(--tertiary); border-radius: var(--radius-sm); padding: var(--space-s) calc(var(--space-xs) + var(--space-2xs)) var(--space-s); height: 100%; } .doctor__interests--panel .doctor__interests-grid { grid-template-columns: 1fr; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-xs); } .doctor__interests--panel .doctor__interest span:last-child { font-size: var(--step--1); line-height: var(--leading-m); } .doctor__quote--plain { position: static; width: auto; background: none; border-radius: 0; padding: 0; margin-top: var(--space-m); } .doctor__quote--plain::before, .doctor__quote--plain::after { display: none; } .doctor__quote--plain .doctor__quote-inner { background: none; border-radius: 0; padding: 0; } /* Team page: the quote is a plain card under Particular Interests rather than a notched overlay on the portrait, so the photo stays whole. Keeps the gold fill and all the quote typography; drops the cutout geometry. */ .doctor__quote--card { position: static; width: auto; background: none; border-radius: 0; padding: 0; margin-top: var(--space-m); } .doctor__quote--card::before, .doctor__quote--card::after { display: none; } .doctor__quote--card .doctor__quote-inner { background: var(--tertiary); border-radius: var(--radius); padding: var(--space-s) var(--space-s) calc(var(--space-xs) + var(--space-2xs)); } .doctor__quote--card .doctor__quote-divider { display: block; } .doctor__after-hours { margin-top: var(--space-m); padding-top: calc(var(--space-xs) + var(--space-2xs)); border-top: 1px solid var(--tan); } .doctor__after-hours-label { font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .1em; color: var(--primary); margin-bottom: var(--space-2xs); } .doctor__after-hours p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: 0; } /* ---------------------------------------------------------------- Team section ---------------------------------------------------------------- */ .team { margin-top: var(--space-xl); max-width: 1750px; margin-left: auto; margin-right: auto; padding: 0 var(--space-l); } .team__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-m); } .team__header h3 { font-size: var(--step-5); letter-spacing: -.025em; margin: calc(var(--space-3xs) * 2) 0 0; } .team__desc { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: calc(var(--space-3xs) * 2) 0 0; max-width: 820px; } .team__grid { margin-top: var(--space-m); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-s); } .team-card__image { position: relative; /* The 4-column grid runs up to a 1750px container, so a card is ~400px wide on a desktop. A fixed 230px height made that a 1.75 letterbox that cropped ~43% of the headshot and cut into foreheads. Tying the box to the source's square ratio keeps the crop consistent at every width instead of worsening as the viewport grows. */ aspect-ratio: 1 / 1; } .team-card__image-inner { width: 100%; height: 100%; /* Matches the backdrop baked into the headshots (#f5e3b2), so the loading placeholder resolves into the photo instead of shifting colour underneath it. */ background: var(--tertiary); border-radius: var(--radius-sm); overflow: hidden; /* The card can land on a half pixel (a 4-column grid inside a 1750px container gives 402.5px at desktop widths). The mask and the element edge then round in opposite directions and leave a pale hairline along the notch. Snapping to the pixel grid removes the seam. */ transform: translateZ(0); } .team-card__image img { width: 100%; height: 100%; object-fit: cover; /* Slight upward bias so the face sits on the upper third rather than dead centre; the box is square now, so this is framing, not rescue. */ object-position: 50% 40%; } /* Stands in for a headshot where we have no photo of the staff member. The brochure uses the same device: the light-gold tile with a single amber initial, so the card reads as deliberate rather than as a failed image. */ .team-card__initial { /* Centring a single glyph by flex alone puts it high: flex centres the line box, and the font's ascent and descent are not symmetric about the cap height. Positioning the text node and translating it off its own measured centre sidesteps the line box entirely. */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-heading); font-weight: var(--weight-700); /* The tile is square and tracks the column width, so the glyph is sized against the viewport with a clamp - roughly 40% of the tile across the range, held to sane bounds at the extremes. */ font-size: clamp(52px, 9.6vw, 132px); line-height: 1; color: var(--primary); /* The glyph is decorative - the name is already in the h4 underneath. */ user-select: none; } .team-card__icon { /* Paired with .notch-br-team (118x92). Both are the base shape scaled 1.25x, which holds the 8px channel on the left and top. */ width: 88px; height: 62px; } /* Team page only - the homepage cards stop at the role. Cards stretch to a shared height so a description that wraps to a second line does not leave the row ragged. */ .team__grid { align-items: stretch; } .team-card { display: flex; flex-direction: column; } .team-card__desc { font-size: var(--step--1); line-height: var(--leading-l); color: var(--ink-alpha-62); margin: var(--space-3xs) 0 0; } .team-card h4 { font-size: var(--step-0); font-weight: var(--weight-700); line-height: var(--leading-s); margin: var(--space-xs) 0 0; letter-spacing: normal; } .team-card p { font-size: var(--step--1); color: color-mix(in srgb, var(--ink) 70%, transparent); margin: calc(var(--space-3xs) / 2) 0 0; } .team__languages-note { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-m) 0 0; max-width: 700px; } /* ---------------------------------------------------------------- New patients CTA ---------------------------------------------------------------- */ .new-patients { padding: var(--space-3xl) 0 calc(var(--space-2xl) + var(--space-xs)); } .new-patients__inner { max-width: 1750px; margin: 0 auto; padding: 0 var(--space-m); position: relative; } .new-patients__doctor-photo { position: absolute; right: 440px; top: -100px; bottom: 0; z-index: var(--layer-nav); border-radius: var(--radius); overflow: hidden; } .new-patients__doctor-photo img { height: 100%; width: auto; display: block; } .new-patients__card { position: relative; } .new-patients__card-border { position: absolute; inset: 0; border-radius: 16px; background: var(--secondary); } .new-patients__card-border.notch-br-cta { z-index: var(--layer-ground); } .new-patients__card-fill { position: absolute; inset: 2px; border-radius: 14px; background: var(--bg); } .new-patients__card-fill.notch-br-cta { z-index: var(--layer-ground); } .new-patients__agpal { position: absolute; top: 48px; /* Centred on the same 344px column the emergency panel below it occupies. Pinning by `right` instead left it sitting slightly off to one side of the text underneath. Centring on the column's midpoint keeps the two aligned whatever width the badge scales to. */ right: 172px; transform: translateX(50%); /* Scales with the card rather than sitting at a fixed size, so it keeps its proportion to the emergency panel as the viewport narrows. */ width: clamp(190px, 19vw, 286px); height: auto; z-index: var(--layer-base); } .new-patients__content { position: relative; max-width: 1448px; margin: 0 auto; padding: var(--space-xl) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl) var(--space-l); z-index: var(--layer-base); } .new-patients__content-inner { max-width: min(920px, calc(100% - 380px)); } .new-patients__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); letter-spacing: -.03em; margin: var(--space-s) 0 0; padding-bottom: var(--space-2xs); text-wrap: pretty; } .new-patients__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: color-mix(in srgb, var(--ink) 84%, transparent); margin: calc(var(--space-m) + var(--space-3xs)) 0 0; text-wrap: pretty; } .new-patients__ctas { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); flex-wrap: wrap; } .new-patients--highlight { padding-top: var(--space-xl); padding-bottom: calc(var(--space-3xl) + var(--space-s)); } .new-patients--highlight .new-patients__card-border { display: none; } .new-patients--highlight .new-patients__card-fill { inset: 0; border-radius: 16px; background: var(--tertiary); } .new-patients__emergency { position: absolute; right: 0; bottom: 0; width: 344px; background: transparent; border-radius: var(--radius-sm); padding: 0; } .new-patients__emergency-inner { padding: calc(var(--space-xs) + var(--space-2xs)) calc(var(--space-s) + var(--space-3xs)); } .new-patients__emergency-inner svg { color: var(--secondary); margin-bottom: calc(var(--space-3xs) * 2); } .new-patients__emergency-inner p { font-size: var(--step--1); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: 0; } .new-patients__emergency-inner p + p { margin-top: var(--space-3xs); } .new-patients__emergency-inner strong { color: var(--ink); font-weight: var(--weight-700); } .new-patients__emergency-inner a { color: var(--primary); font-weight: var(--weight-600); } /* Bolded phone links (locum) keep the link colour at full strong weight — the nested would otherwise override with its own 600. */ .new-patients__emergency-inner strong a, .contact-info-card__body strong a, .hero__after-hours strong a { font-weight: var(--weight-700); } /* On the light-gold hero card, amber links fall to 3.78:1 — below AA for 14px body text. Dark brown keeps the number legible; the bold weight and underline carry the affordance instead of colour. */ .hero__after-hours a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* Same 3.78:1 problem on the light-gold patient-info panels: keep bolded phone links dark, and at full strong weight over the nested . */ .patient-info-section .rich-text strong a { color: var(--ink); font-weight: var(--weight-700); } .new-patients__emergency-inner a:hover { color: var(--ink); } /* ---------------------------------------------------------------- Steps section ---------------------------------------------------------------- */ .steps { max-width: 1504px; margin: 0 auto; padding: var(--space-xl) calc(var(--space-l) + var(--space-2xs)) calc(var(--space-xs) + var(--space-2xs)); } .steps h3 { font-size: var(--step-4); letter-spacing: -.025em; margin: var(--space-xs) 0 0; } .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); margin-top: calc(var(--space-s) + var(--space-3xs)); } .step-card__image { position: relative; height: 300px; border-radius: var(--radius-sm); } .step-card__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-sm); overflow: hidden; } .step-card__image img { width: 100%; height: 100%; object-fit: cover; } .step-card__icon-badge { width: 54px; height: 46px; } .step-card__label { position: absolute; left: 0; bottom: 0; width: 272px; height: 74px; background: var(--tertiary); border-radius: var(--radius-sm); padding: 0 var(--space-s); display: flex; align-items: center; gap: var(--space-2xs); z-index: var(--layer-base); } .step-card__label span { font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-800); color: var(--primary); letter-spacing: .06em; } .step-card__label h4 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); letter-spacing: normal; } .step-card > p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-s) 0 0; } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ .site-footer { background: var(--ink); padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-l) var(--space-m); } .site-footer a { color: color-mix(in srgb, var(--bg) 78%, transparent); transition: color .15s ease; } .site-footer a:hover { color: var(--bg); } .footer__grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-xl); } .footer__brand-logo { height: 52px; width: auto; } .footer__brand p { font-size: var(--step-0); line-height: var(--leading-xl); color: color-mix(in srgb, var(--bg) 70%, transparent); margin: var(--space-s) 0 0; max-width: 340px; } .footer__brand .booking-button { display: inline-flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .05em; text-transform: uppercase; color: var(--bg); background: var(--primary); padding: var(--space-xs) var(--space-m); border-radius: var(--radius-pill); transition: background .15s ease; } .footer__brand .booking-button:hover { background: var(--secondary); } .footer__heading { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .1em; color: var(--secondary); margin: 0; } .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); margin-top: var(--space-xs); font-size: var(--step-0); list-style: none; padding: 0; } .footer__links a:hover { color: var(--secondary); } .footer__hours { margin-top: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-2xs); } .footer__hours-row { display: flex; justify-content: space-between; gap: var(--space-s); font-size: var(--step--1); } .footer__hours-row strong { font-weight: var(--weight-700); color: var(--bg); } .footer__hours-row span { color: color-mix(in srgb, var(--bg) 75%, transparent); text-align: right; white-space: nowrap; } .footer__hours-divider { height: 1px; background: color-mix(in srgb, var(--bg) 14%, transparent); } .footer__hours-note { font-size: var(--step--1); line-height: var(--leading-xl); color: color-mix(in srgb, var(--bg) 55%, transparent); font-style: italic; margin: var(--space-xs) 0 0; } .footer__contact { margin-top: var(--space-xs); display: flex; flex-direction: column; gap: calc(var(--space-3xs) * 2); } .footer__contact-item { display: flex; gap: var(--space-2xs); font-size: var(--step-0); line-height: var(--leading-xl); color: color-mix(in srgb, var(--bg) 78%, transparent); } .footer__contact-item a:hover { color: var(--secondary); } .footer__contact-item svg { flex: 0 0 auto; margin-top: calc(var(--space-3xs) / 2); color: var(--secondary); } .footer__bottom { max-width: 1360px; margin: var(--space-l) auto 0; padding-top: var(--space-s); border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent); display: flex; justify-content: space-between; gap: calc(var(--space-xs) + var(--space-2xs)); font-size: var(--step--1); color: color-mix(in srgb, var(--bg) 60%, transparent); flex-wrap: wrap; } .footer__bottom-left { display: flex; align-items: center; gap: calc(var(--space-xs) + var(--space-2xs)); flex-wrap: wrap; } .footer__powered-by { display: flex; align-items: center; gap: var(--space-3xs); font-size: var(--step--2); color: color-mix(in srgb, var(--bg) 50%, transparent); } .footer__powered-by img { height: 24px; width: auto; } .footer__bottom-right { display: flex; align-items: center; gap: var(--space-s); } .footer__bottom-right a { color: color-mix(in srgb, var(--bg) 70%, transparent); } .footer__bottom-right a:hover { color: var(--secondary); } /* ---------------------------------------------------------------- Card hover lifts ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- Hero stagger entrance ---------------------------------------------------------------- */ .hero__content-inner > * { opacity: 0; transform: translateY(16px); animation: heroFadeIn .6s var(--ease) forwards; } .hero__content-inner > *:nth-child(1) { animation-delay: .1s; } .hero__content-inner > *:nth-child(2) { animation-delay: .25s; } .hero__content-inner > *:nth-child(3) { animation-delay: .4s; } .hero__content-inner > *:nth-child(4) { animation-delay: .52s; } .hero__content-inner > *:nth-child(5) { animation-delay: .62s; } .hero__content-inner > *:nth-child(6) { animation-delay: .72s; } @keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------- Scroll reveals ---------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .32s; } .reveal-delay-4 { transition-delay: .44s; } .reveal-delay-5 { transition-delay: .56s; } .reveal-badge { opacity: 0; transform: scale(.7); transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s; } .is-visible .reveal-badge { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-badge { opacity: 1; transform: none; transition: none; } .hero__content-inner > * { opacity: 1; transform: none; animation: none; } .flip-card__back { transition: none; } } /* ---------------------------------------------------------------- Responsive — Narrow laptop (≤ 1495px) ---------------------------------------------------------------- */ @media (max-width: 1495px) { /* Dr Berera's cutout is anchored 440px from the right edge, so as the card narrows he tracks left across the headline. Below this width there is no longer clear space between the text column and the emergency panel for him to stand in, so he is dropped rather than left overlapping the copy. */ .new-patients__doctor-photo { display: none; } /* With the photo gone the text column no longer has to clear it, but the reserve for the AGPAL badge and emergency panel on the right stays. */ .new-patients__content-inner { max-width: calc(100% - 360px); } } /* ---------------------------------------------------------------- Responsive — Tablet (≤ 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .new-patients__content br, .new-patients__emergency br, .services-page-allied-full__overlay br, .patient-info-policies__header br { display: none; } .features__item:nth-child(odd) { border-right: none; } .about__stat + .about__stat { border-left: none; } .about__stats--enclosed .about__stat + .about__stat { border-left: none; } .service-card__heading { border-top: none; } .doctor__after-hours { border-top: none; } .doctor__quote-divider { display: none; } .first-visit__step { border-right: none; } .doctor-card__detail { border-top: none; } .hero__hours-divider { display: none; } .footer__hours-divider { display: none; } .footer__bottom { border-top: none; } .top-bar { padding: calc(var(--space-3xs) * 2) var(--space-s); gap: var(--space-2xs); } .hero__nav { display: none; } .hero__actions { display: none; } .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--primary); border: none; border-radius: var(--radius-sm); color: var(--bg); padding: 0; cursor: pointer; position: absolute; right: 18px; top: 18px; } .hero__logo-nav { padding: var(--space-xs) var(--space-s); position: static; /* Same shape as desktop: rounds into the hero's top-left corner, square on the inner (right) edge where the concave cutout takes over. A rounded top-right here bulges the cream OUTWARD (convex), tapering the image into a wedge - the cutouts below must do this work instead, so the curve reads concave. Notch radii are 15px here - the desktop 24px reads too heavy against a 58px-tall band, so this is scaled down to stay proportionate to it. */ border-radius: var(--radius) 0 15px 0; margin: 0; } /* Keep the concave notch on mobile/tablet so the panel meets the hero the same polished way it does on desktop. */ .hero__logo-nav::before { display: block; right: -15px; top: 0; width: 15px; height: 15px; background: radial-gradient(circle 16px at 100% 100%, transparent 14px, var(--bg) 16px); } /* The panel is a band across the hero's top here, so the image below it starts at an interior edge that border-radius cannot round. This cutout curves the panel's bottom-left into the image, the same way it does on desktop, instead of leaving a hard 90-degree junction. */ .hero__logo-nav::after { display: block; left: 0; bottom: -15px; width: 15px; height: 15px; background: radial-gradient(circle 16px at 100% 100%, transparent 14px, var(--bg) 16px); } /* Sits immediately after .hero__logo-nav in the flex row, so it tracks the band's right edge at any width - no hardcoded offset. margin-left cancels the row's gap (--space-3xs x 2) and overlaps 1px to avoid a seam, independent of the radius; margin-right: auto keeps the remaining items (hamburger) pushed to the far right. */ .hero__top { justify-content: flex-start; } .hero__corner { display: block; flex: 0 0 15px; align-self: flex-start; height: 15px; margin-left: calc(-1 * var(--space-3xs) * 2 - 1px); margin-right: auto; background: var(--bg); -webkit-mask-image: radial-gradient(circle 15px at 100% 100%, transparent 14px, var(--mask-opaque) 16px); mask-image: radial-gradient(circle 15px at 100% 100%, transparent 14px, var(--mask-opaque) 16px); } .hero-simple__links { display: none; } .hero-simple__actions { display: none; } .hero-simple .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--primary); border: none; border-radius: var(--radius-sm); color: var(--bg); padding: 0; position: absolute; right: 18px; top: 18px; } .hero-simple__logo-nav { padding: var(--space-xs) var(--space-s); position: static; border-radius: var(--radius) 0 14px 0; margin: 0; } .hero-simple__logo-nav::before { display: block; right: -14px; top: 0; width: 14px; height: 14px; background: radial-gradient(circle 14.5px at 100% 100%, transparent 13.5px, var(--bg) 14.5px); } .hero-simple__logo-nav::after { display: block; left: 0; bottom: -14px; width: 14px; height: 14px; background: radial-gradient(circle 14.5px at 100% 100%, transparent 13.5px, var(--bg) 14.5px); } .hero-simple__inner { padding: var(--space-2xl) var(--space-l) var(--space-xl); } .hero-simple__hours { position: relative; right: auto; bottom: auto; margin: 0 var(--space-m) var(--space-m); border-radius: var(--radius-sm); min-width: 0; } .hero-simple__hours::before, .hero-simple__hours::after { display: none; } .hero-simple__container--has-image { min-height: auto; } .hero__content { padding: var(--space-4xl) var(--space-m) var(--space-2xl); } .hero__title { font-size: var(--step-6); } .hero__hours { position: relative; right: auto; bottom: auto; left: auto; margin: calc(var(--space-m) + var(--space-xs)) var(--space-m) var(--space-m); border-radius: var(--radius-sm); } .hero__hours::before, .hero__hours::after { display: none; } .hero__ctas { flex-direction: column; align-items: flex-start; } .hero__ctas .btn { text-align: left; } .hero__after-hours { padding: calc(var(--space-m) + var(--space-xs)); } .hero__contact-form-grid { grid-template-columns: 1fr; } .hero__contact-form { padding: var(--space-s) var(--space-m) var(--space-m); } .hero { min-height: auto; } .features__grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-m) + var(--space-xs)) 0; } .features__item { border-right: none; padding: 0; } .features__item:nth-child(even) { padding-top: 0; padding-left: var(--space-l); } .features__item:nth-child(odd) { padding-right: var(--space-l); border-right: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent); } .features { padding: calc(var(--space-xl) + var(--space-3xs)) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-3xs)); } .about__grid { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-xs)); } .about__image { height: 400px; } .about { padding: var(--space-s) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-2xs)); } .services-section__inner { padding: calc(var(--space-xl) + var(--space-3xs)) var(--space-l) var(--space-2xl); } .services-section__header { flex-direction: column; align-items: flex-start; gap: var(--space-s); } .services__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--space-m); } .doctor__grid { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-xs)); } .doctor__image { height: 480px; } .doctor--team .doctor__image { height: 620px; } .doctor { padding: calc(var(--space-xl) + var(--space-3xs)) calc(var(--space-m) + var(--space-3xs)); } .team__grid { /* 3 + 2 at tablet. With five cards a 2-column track leaves a single card alone on a third row; three across fills the first row and pairs the rest. */ grid-template-columns: repeat(3, 1fr); max-width: 720px; } .new-patients { padding: calc(var(--space-xl) + var(--space-3xs)) 0 calc(var(--space-xl) + var(--space-2xs)); } .new-patients__content-inner { max-width: 100%; } .new-patients__doctor-photo { display: none !important; } .new-patients__card { display: flex; flex-direction: column; } .new-patients__card-border.notch-br-cta, .new-patients__card-fill.notch-br-cta { mask-image: none; -webkit-mask-image: none; } .new-patients__emergency { position: relative; right: auto; bottom: auto; width: auto; margin: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); order: 10; text-align: center; } .new-patients__agpal { display: none; } .new-patients__content h2 { font-size: var(--step-5); } .new-patients__content { padding: calc(var(--space-m) + var(--space-xs)); text-align: center; } .new-patients__content-inner { max-width: 540px; margin: 0 auto; align-items: center; } .new-patients__ctas { flex-direction: column; align-items: center; width: 100%; } .new-patients__ctas .btn { text-align: center; justify-content: center; width: 100%; max-width: 320px; } .steps { padding: calc(var(--space-m) + var(--space-xs)) calc(var(--space-m) + var(--space-3xs)) var(--space-m); } .steps__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-m) + var(--space-xs)); } .footer__brand .booking-button { text-align: left; } .site-footer { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) var(--space-m); } } /* ---------------------------------------------------------------- Responsive — Mobile nav overlay ---------------------------------------------------------------- */ @media (max-width: 1024px) { .mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: var(--layer-overlay); background: color-mix(in srgb, var(--ink) 60%, transparent); opacity: 0; transition: opacity .25s ease; } .mobile-nav-overlay.is-open { display: block; opacity: 1; } .mobile-nav { position: fixed; top: 0; right: 0; width: min(340px, 85vw); height: 100%; background: var(--bg); z-index: var(--layer-modal); padding: var(--space-m); transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto; } .mobile-nav-overlay.is-open .mobile-nav { transform: translateX(0); } .mobile-nav__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--ink); margin-left: auto; } .mobile-nav__links { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: flex; flex-direction: column; gap: var(--space-3xs); } .mobile-nav__links a { display: block; padding: var(--space-xs) var(--space-s); font-family: var(--font-heading); font-size: var(--step-0); font-weight: var(--weight-600); text-transform: uppercase; color: var(--ink); border-radius: var(--radius-sm); transition: background .15s ease; } .mobile-nav__links a:hover, .mobile-nav__links a.active { background: var(--tertiary); } .mobile-nav__cta { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent); } .mobile-nav__cta .booking-button { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--primary); color: var(--bg); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .05em; padding: var(--space-s) var(--space-m); border-radius: var(--radius-pill); text-transform: uppercase; } } /* ---------------------------------------------------------------- Responsive — Mobile (≤ 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .top-bar { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3xs); } .hero-wrapper { padding: var(--space-xs) var(--space-xs) 0; } .hero { border-radius: var(--radius); } .hero__content { padding: calc(var(--space-3xl) + var(--space-s)) calc(var(--space-xs) + var(--space-2xs)) calc(var(--space-l) + var(--space-3xs)); } .hero__title { font-size: var(--step-7); } .hero__subtitle { font-size: var(--step-1); } .hero__desc { font-size: var(--step-0); } .hero__hours { min-width: 0; } .hero__info-cards { grid-template-columns: 1fr; } .features__grid { grid-template-columns: 1fr; gap: var(--space-l); } .features__item { padding: 0 !important; border-right: none !important; } .features { padding: var(--space-xl) var(--space-m); } .about { padding: calc(var(--space-xs) + var(--space-2xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .about__grid { gap: var(--space-l); } .about__image { height: 300px; } .about__stats { padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-s); } .about__stat { padding: 0 var(--space-s); } .about__stats--enclosed .about__stat { padding: 0 var(--space-s); } .services-section { padding: 0 var(--space-s); } .services-section__inner { padding: var(--space-xl) var(--space-m) var(--space-xl); } .services__grid { grid-template-columns: 1fr; gap: var(--space-l); } .doctor { padding: var(--space-xl) calc(var(--space-xs) + var(--space-2xs)); } .doctor__interests-grid { grid-template-columns: repeat(2, auto); } .doctor__grid { gap: var(--space-m); } .doctor__image-wrap { display: flex; flex-direction: column; } .doctor__content { order: -1; } .doctor__image { height: 380px; } .doctor__quote { position: static; width: auto; background: none; border-radius: 0; padding: 0; margin-top: var(--space-s); } .doctor__quote::before, .doctor__quote::after { display: none; } .doctor__quote-inner { border-radius: var(--radius-sm); } /* The card keeps its own padding and radius here - it is not the notched overlay, so it has no cutout geometry to unwind. */ .doctor__quote--card { margin-top: calc(var(--space-s) + var(--space-3xs)); } .doctor__quote--card .doctor__quote-inner { border-radius: var(--radius); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-s) calc(var(--space-s) + var(--space-3xs)); } .doctor--team .doctor__image { height: 420px; } .team { padding: 0 calc(var(--space-xs) + var(--space-2xs)); } .team__grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-xs) + var(--space-2xs)); } /* The corner badge is a fixed 88x62, so on a ~155px mobile tile it covers the lower right outright and would sit on top of a centred glyph. Shift the initial into the clear upper-left area at this width only. */ .team-card__initial { top: 38%; left: 40%; } .team__header { flex-direction: column; align-items: flex-start; } .new-patients__inner { padding: 0 var(--space-s); } .new-patients__content { padding: var(--space-l) calc(var(--space-xs) + var(--space-2xs)); } .new-patients__agpal { width: 160px; } .steps { padding: var(--space-l) calc(var(--space-xs) + var(--space-2xs)) calc(var(--space-xs) + var(--space-2xs)); } .steps__grid { grid-template-columns: 1fr; } .step-card__label { width: auto; max-width: 272px; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-l); } .site-footer { padding: var(--space-xl) var(--space-m) var(--space-m); } .footer__bottom { flex-direction: column; gap: var(--space-s); } } /* ---------------------------------------------------------------- Responsive — Small mobile (≤ 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .hero__logo { height: 30px; } .hero__ctas { flex-direction: column; align-items: flex-start; } .hero__ctas .btn { text-align: left; } .new-patients__ctas { flex-direction: column; } .new-patients__ctas .btn { text-align: center; justify-content: center; } } /* ---------------------------------------------------------------- Doctor avatar fallback ---------------------------------------------------------------- */ .doctor-avatar { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0.5rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; } .doctor-avatar::after { content: ""; position: absolute; width: 40%; height: 40%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' 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"); background-repeat: no-repeat; background-position: center; background-size: contain; } .doctor-avatar img { position: relative; z-index: var(--layer-base); width: 100%; height: 100%; object-fit: cover; display: block; } .mf-logo-light { display: none; } .mf-logo-dark { display: inline; } .footer-light .mf-logo-light { display: inline; } .footer-light .mf-logo-dark { display: none; } /* ---------------------------------------------------------------- About page — Hero simple (subpage) ---------------------------------------------------------------- */ .hero-simple { padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m) 0; } .hero-simple__container { position: relative; display: flow-root; background: var(--tertiary); border-radius: var(--radius); /* See .hero above - no overflow: hidden, to avoid the 1px corner seam. The placeholder image rounds itself; the cream panels round their own outer corners. */ } .hero-simple__top { position: absolute; left: -1px; top: -1px; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--space-3xs) * 2); z-index: var(--layer-raised); } .hero-simple__logo-nav { display: flex; align-items: flex-end; gap: var(--space-xs-s); min-width: 0; flex-shrink: 3; position: relative; background: var(--bg); border-radius: var(--radius) 0 24px 0; padding: var(--space-s) var(--space-xs-s) var(--space-m) var(--space-xs-s); } .hero-simple__logo-nav::before { content: ''; position: absolute; right: -24px; top: 0; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--bg) 24.5px); } .hero-simple__logo-nav::after { content: ''; position: absolute; left: 0; bottom: -24px; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--bg) 24.5px); } .hero-simple__logo { height: clamp(34px, 3.1vw, 46px); width: auto; max-width: none; flex-shrink: 0; object-fit: contain; } .hero-simple__links { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-600); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; list-style: none; padding: 0; margin: 0; } .hero-simple__links a { position: relative; color: var(--ink-alpha-72); padding: var(--space-3xs) var(--space-2xs); border-radius: 8px; transition: background .15s ease, color .15s ease; background: transparent; } .hero-simple__links a:hover, .hero-simple__links a.active, .hero-simple__links a[aria-current="page"] { background: var(--tertiary); color: var(--ink); } .hero-simple__actions { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-s) var(--space-s); flex-shrink: 0; } .hero-simple__phone { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-600); color: var(--ink); padding: var(--space-2xs) var(--space-xs); border-radius: 999px; background: var(--bg); transition: background .15s ease; white-space: nowrap; } .hero-simple__phone:hover { background: var(--tan); } .hero-simple__book-btn { display: inline-block; font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .04em; color: var(--bg); background: var(--primary); padding: var(--space-2xs) var(--space-s); border-radius: 999px; transition: background .15s ease; white-space: nowrap; } .hero-simple__book-btn:hover { background: var(--secondary); color: var(--bg); } .hero-simple__container--has-image { min-height: 520px; } .hero-simple__placeholder { position: absolute; inset: 0; background: var(--tan); border-radius: var(--radius); overflow: hidden; z-index: var(--layer-ground); } .hero-simple__placeholder img { width: 100%; height: 100%; object-fit: cover; } .hero-simple__container--has-image .hero-simple__inner { position: relative; z-index: var(--layer-base); } .hero-simple__inner { padding: calc(var(--space-2xl) + var(--space-s)) var(--space-xl) calc(var(--space-xl) + var(--space-3xs)); max-width: 1500px; margin: 0 auto; } .hero-simple h1 { font-size: var(--step-7); line-height: var(--leading-xs); letter-spacing: -.028em; margin: var(--space-s) 0 0; } .hero-simple h1 span { color: inherit; } .hero-simple__inner > p { font-size: var(--step-1); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; max-width: 560px; } .hero-simple__hours { position: absolute; right: -1px; bottom: -1px; background: var(--bg); border-radius: 24px 0 var(--radius) 0; padding: var(--space-s) var(--space-m) calc(var(--space-xs) + var(--space-2xs)) var(--space-m); min-width: 344px; z-index: var(--layer-raised); } .hero-simple__hours::before { content: ''; position: absolute; left: -24px; bottom: 0; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--bg) 24.5px); } .hero-simple__hours::after { content: ''; position: absolute; right: 0; top: -24px; width: 24px; height: 24px; background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--bg) 24.5px); } /* ---------------------------------------------------------------- About page — Practice Values ---------------------------------------------------------------- */ .practice-values { padding: var(--space-2xl) var(--space-l) var(--space-2xl); } .practice-values__inner { max-width: 1200px; margin: 0 auto; } .practice-values__header { text-align: center; max-width: 600px; margin: 0 auto calc(var(--space-l) + var(--space-3xs)); } .practice-values__header h2 { font-size: var(--step-5); font-weight: var(--weight-700); line-height: var(--leading-xs); letter-spacing: -.025em; margin: var(--space-xs) 0 0; } .practice-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } .practice-values__item { padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; } .practice-values__number { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--bg); font-family: var(--font-heading); font-size: var(--step-1); font-weight: var(--weight-800); border-radius: 10px; margin-bottom: var(--space-s); } .practice-values__item h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); margin: 0 0 var(--space-3xs); } .practice-values__item p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: 0; } /* ---------------------------------------------------------------- About page — Practice story ---------------------------------------------------------------- */ .about-page-story { padding: var(--space-2xl) var(--space-l) var(--space-2xl); } .about-page-story__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--space-xl) + var(--space-2xs)); align-items: center; } .about-page-story__image-wrap { position: relative; } .about-page-story__image { position: relative; height: 480px; border-radius: var(--radius-sm); overflow: hidden; } .about-page-story__image img { width: 100%; height: 100%; object-fit: cover; } .about-page-story__since { position: absolute; left: 0; bottom: 0; width: 150px; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-right: var(--space-s); text-align: center; background: var(--bg); border-radius: 0 var(--radius-sm) 0 0; } .about-page-story__since-year { font-family: var(--font-heading); font-size: var(--step-5); font-weight: var(--weight-800); letter-spacing: -.03em; color: var(--ink); line-height: 1; } .about-page-story__since-label { font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .1em; color: var(--primary); margin-top: var(--space-3xs); } .about-page-story__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-sm); overflow: hidden; } .about-page-story__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: 0 0 var(--space-s); } .about-page-story__lead { font-family: var(--font-heading); font-size: var(--step-1); font-weight: var(--weight-500); line-height: var(--leading-l); color: var(--ink); margin-bottom: var(--space-xs); } .about-page-story__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); } .about-page-story__content > p + p { margin-top: var(--space-xs); } .about-page-story .about__stats { background: transparent; padding: calc(var(--space-s) + var(--space-3xs)) 0; } .about__stats--enclosed { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; } .about__stats--enclosed .about__stat { border-left: none; border-right: none; padding: 0 calc(var(--space-xs) + var(--space-2xs)); } .about__stats--enclosed .about__stat + .about__stat { border-left: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent); } /* ---------------------------------------------------------------- Rich text — descendant styles for Rails HTML merge tags ---------------------------------------------------------------- */ .rich-text p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); } .rich-text p + p { margin-top: var(--space-xs); } .rich-text strong { font-weight: var(--weight-700); color: var(--ink); } .rich-text ul, .rich-text ol { padding-left: var(--space-s); margin: var(--space-xs) 0 0; } .rich-text li { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); } .rich-text li + li { margin-top: var(--space-3xs); } .rich-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .rich-text a:hover { color: var(--ink); } /* ---------------------------------------------------------------- About page — Appointments section ---------------------------------------------------------------- */ .about-page-appts { padding: 0 var(--space-m); } .about-page-appts__inner { background: var(--tertiary); border-radius: var(--radius); padding: var(--space-2xl) var(--space-xl) var(--space-2xl); } .about-page-appts__wrap { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); align-items: start; } .about-page-appts__header h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .about-page-appts__header h2 span { color: inherit; } .about-page-appts__cta { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); flex-wrap: wrap; align-items: center; } .about-page-appts__cta .booking-button { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-weight: var(--weight-700); font-size: var(--step--1); letter-spacing: .05em; border-radius: var(--radius-pill); white-space: nowrap; background: var(--primary); color: var(--bg); padding: var(--space-xs) var(--space-m); transition: background .15s ease, color .15s ease; text-transform: uppercase; } .about-page-appts__cta .booking-button:hover { background: var(--secondary); color: var(--ink); } /* ---------------------------------------------------------------- About page — Fees & billing ---------------------------------------------------------------- */ .about-page-fees { padding: var(--space-2xl) var(--space-l) var(--space-2xl); } .about-page-fees__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); align-items: start; } .about-page-fees__header h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .about-page-fees__header h2 span { color: inherit; } .about-page-fees__badge { display: flex; align-items: center; gap: var(--space-xs); margin-top: calc(var(--space-xs) + var(--space-2xs)); padding: var(--space-s) calc(var(--space-xs) + var(--space-2xs)); background: var(--tertiary); border-radius: var(--radius-sm); } .about-page-fees__icon { flex-shrink: 0; color: var(--primary); } .about-page-fees__badge span { font-family: var(--font-heading); font-size: var(--step-0); font-weight: var(--weight-700); color: var(--ink); } /* ---------------------------------------------------------------- About page — Accreditation ---------------------------------------------------------------- */ .about-page-accred { padding: 0 var(--space-m) var(--space-2xl); } .about-page-accred__inner { max-width: 1300px; margin: 0 auto; background: var(--bg); border: 1px solid var(--secondary); border-radius: var(--radius); padding: calc(var(--space-l) + var(--space-3xs)) var(--space-xl); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-l) + var(--space-3xs)); } .about-page-accred__content { display: flex; align-items: flex-start; gap: var(--space-s); } .about-page-accred__icon { flex-shrink: 0; color: var(--secondary); margin-top: calc(var(--space-3xs) / 2); } .about-page-accred__content h2 { font-size: var(--step-4); line-height: var(--leading-s); letter-spacing: -.02em; } .about-page-accred__content p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-2xs) 0 0; max-width: 560px; } .about-page-accred__badge { flex-shrink: 0; } .about-page-accred__badge .accreditation-badge { height: 80px; width: auto; } /* ---------------------------------------------------------------- About page — How Standards Stay High ---------------------------------------------------------------- */ .about-page-standards { margin: 0 var(--space-m) var(--space-2xl); background: var(--tertiary); border-radius: var(--radius); padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-xl); } .about-page-standards__inner { max-width: 1500px; margin: 0 auto; } .about-page-standards__top { display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-l); align-items: stretch; } .about-page-standards__image { position: relative; border-radius: var(--radius-sm); } .about-page-standards__image-inner { width: 100%; height: 100%; border-radius: var(--radius-sm); overflow: hidden; background: var(--tan); } .about-page-standards__image-inner img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; } .about-page-standards__image-inner.notch-bl-badge { mask-size: 340px 240px, 100% 100%; -webkit-mask-size: 340px 240px, 100% 100%; } .about-page-standards__notch-content { position: absolute; right: 0; bottom: 0; width: 310px; padding: var(--space-s) var(--space-s); } .about-page-standards__notch-content--left { right: auto; left: 0; } .about-page-standards__notch-content h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); margin: 0; } .about-page-standards__notch-content p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-3xs) 0 0; } .about-page-standards__lead { font-weight: var(--weight-500); } .about-page-standards__header h2 { font-size: var(--step-5); line-height: var(--leading-xs); letter-spacing: -.025em; margin: var(--space-s) 0 0; } .about-page-standards__header > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; } .about-page-standards__header > p:first-of-type { margin-top: calc(var(--space-xs) + var(--space-2xs)); } .about-page-standards__header > .btn { margin-top: var(--space-m); } .about-page-standards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); margin-top: calc(var(--space-m) + var(--space-3xs)); align-items: start; } .about-page-standards__item { display: flex; flex-direction: column; align-items: flex-start; } .about-page-standards__item--mobile-only { display: none; } .about-page-standards__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--primary); border-radius: 10px; color: var(--bg); margin-bottom: var(--space-s); } .about-page-standards__item h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); margin: 0; } .about-page-standards__item p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: var(--space-3xs) 0 0; } /* ---------------------------------------------------------------- About page — Booking CTA strip ---------------------------------------------------------------- */ .about-page-cta { padding: 0 var(--space-m) calc(var(--space-2xl) + var(--space-xs)); } .about-page-cta__inner { max-width: 1504px; margin: 0 auto; } .about-page-cta__card { position: relative; overflow: hidden; border-radius: 16px; } .about-page-cta__card-border { position: absolute; inset: 0; border-radius: 16px; background: var(--secondary); } .about-page-cta__card-border.notch-br-cta { z-index: var(--layer-ground); } .about-page-cta__card-fill { position: absolute; inset: 2px; border-radius: 14px; background: var(--bg); } .about-page-cta__card-fill.notch-br-cta { z-index: var(--layer-ground); } .about-page-cta__content { position: relative; z-index: var(--layer-base); padding: var(--space-xl); max-width: min(920px, calc(100% - 380px)); } .about-page-cta__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); letter-spacing: -.03em; margin: var(--space-s) 0 0; text-wrap: pretty; } .about-page-cta__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; text-wrap: pretty; } .about-page-cta__buttons { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); flex-wrap: wrap; } .about-page-cta__buttons .btn { max-width: 100%; box-sizing: border-box; } /* ---------------------------------------------------------------- About page — Responsive (Tablet ≤ 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .hero-simple { padding: var(--space-s) var(--space-s) 0; } .practice-values { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) 0; } .practice-values__grid { grid-template-columns: 1fr; } .about-page-story { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-2xs)); } .about-page-story__grid { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-xs)); } .about-page-story__image { height: 380px; } .about-page-appts__inner { padding: var(--space-xl) var(--space-l) calc(var(--space-xl) + var(--space-3xs)); } .about-page-appts__wrap { grid-template-columns: 1fr; gap: var(--space-m); } .about-page-fees { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-2xs)); } .about-page-fees__grid { grid-template-columns: 1fr; gap: var(--space-m); } .about-page-accred__inner { flex-direction: column; align-items: flex-start; padding: calc(var(--space-m) + var(--space-xs)) var(--space-l); } .about-page-standards { margin: 0 var(--space-s) calc(var(--space-xl) + var(--space-2xs)); padding: var(--space-xl) var(--space-l); } .about-page-standards__top { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-3xs)); } .about-page-standards__image-inner img { min-height: 240px; } .about-page-cta__content { padding: calc(var(--space-l) + var(--space-xs)) var(--space-l); max-width: 100%; } .about-page-cta__card-border.notch-br-cta, .about-page-cta__card-fill.notch-br-cta { mask-image: none; -webkit-mask-image: none; } .about-page-cta__buttons { flex-direction: column; } .about-page-cta__buttons .btn { text-align: center; justify-content: center; } } /* ---------------------------------------------------------------- About page — Responsive (Mobile ≤ 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .hero-simple { padding: var(--space-s) var(--space-s) 0; } .hero-simple__inner { padding: calc(var(--space-l) + var(--space-2xs)) var(--space-m) calc(var(--space-l) + var(--space-3xs)); } .about-page-story { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .about-page-story__image { height: 280px; } .about-page-appts { padding: 0 var(--space-s); } .about-page-appts__inner { padding: calc(var(--space-l) + var(--space-2xs)) var(--space-m) var(--space-xl); } .about-page-fees { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .about-page-accred { padding: 0 var(--space-s) var(--space-xl); } .about-page-accred__inner { padding: var(--space-l) var(--space-m); gap: var(--space-m); } .about-page-accred__content { flex-direction: column; } .about-page-standards { margin: 0 var(--space-s) var(--space-xl); padding: calc(var(--space-l) + var(--space-2xs)) var(--space-m); } .about-page-standards__top { gap: var(--space-m); } .about-page-standards__grid { grid-template-columns: 1fr; gap: calc(var(--space-xs) + var(--space-2xs)); margin-top: var(--space-m); } .about-page-standards__image-inner.notch-bl-badge { mask-image: none; -webkit-mask-image: none; } .about-page-standards__notch-content { display: none; } .about-page-standards__item--mobile-only { display: flex; } .about-page-cta { padding: 0 var(--space-s) var(--space-2xl); } .about-page-cta__content { padding: var(--space-l) var(--space-m); max-width: 100%; } } /* ---------------------------------------------------------------- About page — Responsive (Small mobile ≤ 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .about-page-appts__cta { flex-direction: column; } .about-page-appts__cta .btn, .about-page-appts__cta .booking-button { text-align: center; justify-content: center; width: 100%; } .about-page-cta__buttons .btn { text-align: center; justify-content: center; } } /* ================================================================ Contact page ================================================================ */ /* ---------------------------------------------------------------- Contact — Main grid (form + details) ---------------------------------------------------------------- */ .contact-main { padding: var(--space-2xl) var(--space-l) var(--space-2xl); } .contact-main__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--space-xl) + var(--space-2xs)); align-items: start; } /* ---------------------------------------------------------------- Contact — Form column ---------------------------------------------------------------- */ .contact-main__form-col h2 { font-size: var(--step-5); line-height: var(--leading-xs); } .contact-main__form-intro { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; max-width: 520px; } .contact-field { margin-top: var(--space-s); } .contact-field label { display: block; font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .02em; color: var(--ink); margin-bottom: var(--space-3xs); } .contact-field label span { color: var(--primary); } .contact-field input, .contact-field textarea { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-l); color: var(--ink); background: var(--bg); border: 1px solid var(--tan); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-s); transition: border-color .15s ease, box-shadow .15s ease; } .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } .contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--ink-alpha-6); } .contact-field textarea { resize: vertical; min-height: 140px; } .contact-submit { margin-top: var(--space-m); max-width: 100%; box-sizing: border-box; } [data-mf-feedback] { margin-top: var(--space-s); padding: var(--space-xs) var(--space-s); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-l); } [data-mf-feedback][data-status="success"] { background: color-mix(in srgb, var(--form-success) 8%, transparent); color: var(--form-success-ink); border: 1px solid color-mix(in srgb, var(--form-success) 25%, transparent); } [data-mf-feedback][data-status="error"] { background: color-mix(in srgb, var(--form-error) 6%, transparent); color: var(--form-error-ink); border: 1px solid color-mix(in srgb, var(--form-error) 20%, transparent); } /* ---------------------------------------------------------------- Contact — Details column ---------------------------------------------------------------- */ .contact-details-card { background: var(--tertiary); border-radius: var(--radius); padding: var(--space-l) calc(var(--space-m) + var(--space-3xs)); } .contact-details-card__heading { font-size: var(--step-2); font-weight: var(--weight-700); line-height: var(--leading-s); letter-spacing: -.01em; } .contact-details-list { margin: var(--space-m) 0 0; padding: 0; } .contact-details-list__item { display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-s) 0; border-top: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); } .contact-details-list__item:last-child { padding-bottom: 0; } .contact-details-list__item dt { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); text-transform: uppercase; } .contact-details-list__item dt svg { flex-shrink: 0; color: var(--primary); } .contact-details-list__item dd { margin: 0; padding-left: var(--space-m); font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink); } .contact-details-list__item dd address { font-style: normal; } .contact-details-list__item dd a { color: var(--ink); font-weight: var(--weight-600); text-decoration: none; transition: color .15s ease; } .contact-details-list__item dd a:hover { color: var(--primary); } /* ---------------------------------------------------------------- Contact — Hours card ---------------------------------------------------------------- */ .contact-hours-card { margin-top: calc(var(--space-xs) + var(--space-2xs)); background: var(--bg); border: 1px solid var(--secondary); border-radius: var(--radius); padding: var(--space-m) calc(var(--space-m) + var(--space-3xs)); } .contact-hours-card__heading { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--step-1); font-weight: var(--weight-700); letter-spacing: -.01em; line-height: var(--leading-m); } .contact-hours-card__heading svg { flex-shrink: 0; color: var(--primary); } .contact-hours-card__table { margin-top: var(--space-s); } .contact-hours-card .hours-table { width: 100%; border-collapse: collapse; } .contact-hours-card .hours-table td { padding: var(--space-3xs) 0; font-size: var(--step-0); line-height: var(--leading-l); border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, transparent); vertical-align: top; } .contact-hours-card .hours-table td:first-child { font-family: var(--font-heading); font-weight: var(--weight-700); color: var(--ink); white-space: nowrap; padding-right: calc(var(--space-xs) + var(--space-2xs)); } .contact-hours-card .hours-table td:last-child { color: var(--ink-alpha-78); text-align: right; font-variant-numeric: tabular-nums; } .contact-hours-card .hours-table tr:last-child td { border-bottom: none; } .contact-hours-card__note { font-size: var(--step--1); line-height: var(--leading-xl); color: var(--ink-alpha-62); font-style: italic; margin: var(--space-xs) 0 0; } /* ---------------------------------------------------------------- Contact — Map section ---------------------------------------------------------------- */ .contact-map { padding: 0 var(--space-m); } .contact-map__inner { max-width: 1504px; margin: 0 auto; } .contact-map__embed { border-radius: var(--radius); overflow: hidden; background: var(--tan); } .contact-map__embed iframe { display: block; width: 100%; height: 400px; } /* ---------------------------------------------------------------- Contact — Booking CTA strip ---------------------------------------------------------------- */ .contact-cta { margin: 0 var(--space-m); padding: var(--space-2xl) var(--space-xl) calc(var(--space-2xl) + var(--space-xs)); background: var(--tertiary); border-radius: var(--radius); } .contact-cta__inner { max-width: 1500px; margin: 0 auto; text-align: center; } .contact-cta__content h2 { font-size: var(--step-5); line-height: var(--leading-xs); letter-spacing: -.025em; margin: var(--space-s) 0 0; } .contact-cta__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) auto 0; max-width: 520px; } .contact-cta__buttons { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); justify-content: center; flex-wrap: wrap; align-items: center; } .contact-cta__buttons .btn { max-width: 100%; box-sizing: border-box; } .contact-cta__buttons .booking-button { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-weight: var(--weight-700); font-size: var(--step--1); letter-spacing: .05em; border-radius: var(--radius-pill); white-space: nowrap; background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); padding: var(--space-xs) var(--space-m); transition: background .15s ease, color .15s ease, border-color .15s ease; text-transform: uppercase; } .contact-cta__buttons .booking-button:hover { background: var(--secondary); color: var(--ink); border-color: var(--secondary); } /* ---------------------------------------------------------------- Screen-reader only utility ---------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- Contact page — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .contact-main { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-2xs)); } .contact-main__grid { grid-template-columns: 1fr; gap: calc(var(--space-l) + var(--space-xs)); } .contact-info { padding: 0 var(--space-s) calc(var(--space-xl) + var(--space-2xs)); } .contact-info__inner { grid-template-columns: 1fr; } .contact-info__map { min-height: 300px; } .contact-extra { padding: 0 var(--space-s) calc(var(--space-xl) + var(--space-2xs)); } .contact-extra__grid { grid-template-columns: 1fr; } .contact-extra__image { display: none; } .faq-accordion { grid-template-columns: 1fr; } .contact-cta { margin: 0 var(--space-s); padding: var(--space-xl) var(--space-l) var(--space-2xl); } .contact-cta__inner { padding: calc(var(--space-l) + var(--space-xs)) var(--space-l); } .contact-cta__buttons { flex-direction: column; } .contact-cta__buttons .btn, .contact-cta__buttons .booking-button { text-align: center; justify-content: center; width: 100%; max-width: 320px; } } /* ---------------------------------------------------------------- Contact page — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .hero__contact-form { padding: var(--space-s) var(--space-s) calc(var(--space-s) + var(--space-3xs)); } .contact-submit-row { flex-direction: column; align-items: flex-start; } .contact-main { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .contact-main__grid { gap: calc(var(--space-l) + var(--space-3xs)); } .contact-info { padding: calc(var(--space-2xl) + var(--space-xs)) var(--space-s) var(--space-xl); } .contact-info-card__body { padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m); } .contact-info-card__icon { width: 48px; height: 38px; } .notch-tr-sm { mask-size: 72px 62px, 100% 100%; -webkit-mask-size: 72px 62px, 100% 100%; } .contact-info__map { min-height: 250px; } .contact-extra { padding: 0 var(--space-s) var(--space-xl); } .contact-extra__after-hours-inner { padding: var(--space-m) var(--space-m); } .contact-cta { margin: 0 var(--space-s); padding: calc(var(--space-l) + var(--space-3xs)) var(--space-m) var(--space-2xl); } .contact-cta__inner { padding: var(--space-l) var(--space-m); } } /* ---------------------------------------------------------------- Contact page — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .contact-cta__buttons { flex-direction: column; align-items: stretch; } .contact-cta__buttons .btn, .contact-cta__buttons .booking-button { max-width: 100%; } .contact-submit { width: 100%; justify-content: center; } } /* ================================================================ Services page ================================================================ */ /* ---------------------------------------------------------------- Services — First Visit ---------------------------------------------------------------- */ .first-visit { padding: var(--space-2xl) var(--space-l) 0; } .first-visit__inner { max-width: 1350px; margin: 0 auto; } .first-visit__inner > .section-badge { margin-bottom: var(--space-xs); } .first-visit__inner > h2 { font-size: var(--step-4); font-weight: var(--weight-800); line-height: var(--leading-s); margin: 0 0 var(--space-l); } .first-visit__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .first-visit__step { background: transparent; border: none; border-radius: var(--radius); padding: var(--space-m) var(--space-m); border-right: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent); } .first-visit__step:last-child { border-right: none; } .first-visit__number { background: transparent; color: var(--primary); font-family: var(--font-heading); font-size: var(--step-1); font-weight: var(--weight-800); margin-bottom: calc(var(--space-3xs) * 2); } .first-visit__step h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); margin: 0 0 var(--space-3xs); } .first-visit__step p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: 0; } /* ---------------------------------------------------------------- Services — Content section ---------------------------------------------------------------- */ .services-page-content { padding: var(--space-2xl) var(--space-l) var(--space-2xl); max-width: 1500px; margin: 0 auto; } .services-page-content__wrap { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); align-items: start; } .services-page-content__header h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .services-page-content__header h2 span { color: inherit; } .services-page-content__intro { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; max-width: 480px; } /* ---------------------------------------------------------------- Services — Category cards ---------------------------------------------------------------- */ .services-page-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-l) + var(--space-2xs)); } .flip-card { position: relative; border-radius: var(--radius); overflow: hidden; } .flip-card__inner { position: relative; height: 100%; display: flex; flex-direction: column; } .flip-card__front, .flip-card__back { border-radius: var(--radius); overflow: hidden; } .flip-card__front { background: var(--bg); display: flex; flex-direction: column; height: 100%; } .flip-card__back { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(100%); background: var(--tertiary); display: flex; flex-direction: column; overflow-y: auto; transition: transform 1.1s var(--ease); border-radius: var(--radius); } .flip-card.is-flipped .flip-card__back { transform: translateY(0); } @media (hover: hover) { .flip-card:hover .flip-card__back { transform: translateY(0); } } .flip-card__text { padding: var(--space-m) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-m) + var(--space-3xs)); flex: 1; display: flex; flex-direction: column; } .flip-card__front .flip-card__text { background: var(--tertiary); } .services-page-category__number { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); color: var(--secondary); letter-spacing: .04em; margin-bottom: var(--space-xs); } .flip-card__text h3 { font-size: var(--step-2); font-weight: var(--weight-700); line-height: var(--leading-s); letter-spacing: -.015em; } .flip-card__list { list-style: none; padding: 0; margin: var(--space-s) 0 0; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--space-xs) + var(--space-2xs)); grid-auto-rows: min-content; } .flip-card__list li { display: flex; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-3xs) 0; font-size: var(--step-0); line-height: var(--leading-l); color: var(--ink-alpha-82); } .flip-card__list li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: calc(var(--space-3xs) / 3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm5 7.4-6 6.4a1 1 0 0 1-1.5 0L6.8 13l1.5-1.4 2 2.1 5.1-5.5L17 9.4Z' fill='%23a4630f'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } .flip-card__list li strong { color: var(--ink); } .flip-card__list--detailed { display: flex; flex-direction: column; grid-template-columns: none; } .flip-card__list--detailed li { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: calc(var(--space-3xs) / 3) var(--space-2xs); } .flip-card__list--detailed li > strong, .flip-card__list--detailed li > span { grid-column: 2; } .flip-card__list--detailed li > span { display: block; color: var(--ink-alpha-72); font-size: var(--step--1); margin-top: calc(var(--space-3xs) / 3); } .flip-card__book { margin-top: auto; align-self: flex-start; } .flip-card__trigger { display: none; align-items: center; gap: var(--space-3xs); margin-top: var(--space-s); padding: 0; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .06em; color: var(--primary); text-transform: uppercase; transition: color .15s ease; } .flip-card__trigger:hover { color: var(--secondary); } .services-page-category__image-wrap { position: relative; } .services-page-category__image-inner { border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; } .services-page-category__icon { width: 60px; height: 48px; } .services-page-category__image-inner.notch-tr, .flip-card__back.notch-tr { mask-size: 88px 76px, 100% 100%; -webkit-mask-size: 88px 76px, 100% 100%; } .services-page-category__image-inner img { width: 100%; height: 290px; object-fit: cover; display: block; } .services-page-category__image-placeholder { width: 100%; height: 290px; background: var(--tan); } .services-page-category__badge { width: 80px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--space-3xs); } .services-page-category__badge img { width: 100%; height: auto; } /* ---------------------------------------------------------------- Services — Allied health (full section) ---------------------------------------------------------------- */ .services-page-allied-full { margin: 0 var(--space-m) var(--space-2xl); padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-xl); } .services-page-allied-full__inner { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-l) + var(--space-3xs)); /* stretch, not start: the image column has no intrinsic height cap, so with align-items:start it ran past the bottom of the content column and its lower corners fell outside the section - rendering square because the parent's rounded clip never reached them. */ align-items: stretch; } .services-page-allied-full__right > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: 0 0 var(--space-m); } .services-page-allied-full__left { /* min-height:0 lets this grid item shrink below the photo's intrinsic height, so the row is sized by the content column and the photo is cropped to match - rather than the photo forcing the row taller. */ min-height: 0; position: relative; } .services-page-allied-full__image { /* Absolutely filling the column means the photo never contributes its own height to the grid row - the content column on the right sets the height and object-fit:cover crops the photo to it. */ position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; } .services-page-allied-full__image-inner { width: 100%; height: 100%; border-radius: var(--radius); /* The notch mask's second layer is a plain rectangle, so it overrides border-radius and leaves every corner the notch doesn't scoop square. clip-path applies to the same element and composes with the mask, so it restores the radius the mask flattened. */ clip-path: inset(0 round var(--radius)); overflow: hidden; } .services-page-allied-full__image-inner img { width: 100%; height: 100%; display: block; object-fit: cover; } .services-page-allied-full__image-placeholder { width: 100%; height: 380px; background: var(--tan); } .services-page-allied-full__overlay { position: absolute; left: 0; top: 0; z-index: var(--layer-base); padding: var(--space-s) calc(var(--space-xs) + var(--space-2xs)); background: var(--bg); /* top-left : sits in the image's own corner, follows its radius top-right : square, the ::before draws the concave turn there bottom-right: convex - this is the corner the photo wraps around bottom-left: square, the ::after draws the concave turn there A convex radius on the two concave corners pinches them into a spike, which is why they are 0 rather than var(--radius). */ border-radius: var(--radius) 0 var(--radius) 0; } /* Concave corners where the panel meets the photo. The .notch-tl-badge mask is meant to scoop these, but its 152x138 scoop is smaller than the panel (up to 238x187), so the panel covers the curve entirely and the photo meets it at a hard 90 degrees. Two pseudo-elements in the panel's own colour draw the inverted radius instead, and they track the panel's size automatically rather than needing a mask box kept in sync. */ .services-page-allied-full__overlay::before, .services-page-allied-full__overlay::after { content: ""; position: absolute; width: var(--radius); height: var(--radius); background: var(--bg); pointer-events: none; z-index: var(--layer-base); } /* Both sit just inside the panel: the parent .._image has overflow:hidden and a clip-path, so anything placed outside the panel's own box is clipped away before it paints. */ /* concave turn at the panel's top-right, curving up into the photo */ .services-page-allied-full__overlay::before { top: 0; right: calc(var(--radius) * -1); -webkit-mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), var(--mask-opaque) calc(var(--radius) + .5px)); mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), var(--mask-opaque) calc(var(--radius) + .5px)); } /* concave turn at the panel's bottom-left, curving down into the photo */ .services-page-allied-full__overlay::after { left: 0; bottom: calc(var(--radius) * -1); -webkit-mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), var(--mask-opaque) calc(var(--radius) + .5px)); mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), var(--mask-opaque) calc(var(--radius) + .5px)); } .services-page-allied-full__overlay h2 { font-size: var(--step-4); line-height: var(--leading-xs); letter-spacing: -.025em; margin: var(--space-2xs) 0 0; } .services-page-allied-full__overlay h2 span { color: inherit; } .services-page-allied-full__right { display: flex; flex-direction: column; gap: var(--space-m); /* The image column matches THIS column's height, not the reverse - see .services-page-allied-full__image. */ } .allied-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); } .allied-card__image { position: relative; height: 200px; border-radius: var(--radius-sm); } .allied-card__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-sm); overflow: hidden; } .allied-card__image-placeholder { width: 100%; height: 100%; background: var(--tan); } .allied-card__image-inner img { width: 100%; height: 100%; object-fit: cover; display: block; } .allied-card__icon { width: 56px; height: 46px; } .allied-card__image-inner.notch-tl { mask-size: 84px 74px, 100% 100%; -webkit-mask-size: 84px 74px, 100% 100%; } .allied-card h3 { font-size: var(--step-1); font-weight: var(--weight-700); margin: calc(var(--space-3xs) * 2) 0 calc(var(--space-3xs) / 2); } .allied-card p { font-size: var(--step--1); line-height: var(--leading-xl); color: var(--ink-alpha-78); margin: 0; } /* ---------------------------------------------------------------- Services — Booking CTA strip ---------------------------------------------------------------- */ .services-page-cta { padding: var(--space-2xl) var(--space-m) calc(var(--space-2xl) + var(--space-xs)); } .services-page-cta__inner { max-width: 1504px; margin: 0 auto; } .services-page-cta__card { position: relative; overflow: hidden; border-radius: 16px; } .services-page-cta__card-border { position: absolute; inset: 0; border-radius: 16px; background: var(--secondary); } .services-page-cta__card-border.notch-br-cta { z-index: var(--layer-ground); } .services-page-cta__card-fill { position: absolute; inset: 2px; border-radius: 14px; background: var(--bg); } .services-page-cta__card-fill.notch-br-cta { z-index: var(--layer-ground); } .services-page-cta__content { position: relative; z-index: var(--layer-base); padding: var(--space-xl); max-width: min(920px, calc(100% - 380px)); } .services-page-cta__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); letter-spacing: -.03em; margin: var(--space-s) 0 0; text-wrap: pretty; } .services-page-cta__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; text-wrap: pretty; } .services-page-cta__buttons { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); flex-wrap: wrap; } .services-page-cta__buttons .btn { max-width: 100%; box-sizing: border-box; } /* ---------------------------------------------------------------- Services page — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .first-visit { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) 0; } .first-visit__steps { grid-template-columns: 1fr 1fr; } .first-visit__step:nth-child(even) { border-right: none; } .services-page-content { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-2xs)); } .services-page-content__wrap { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-3xs)); } .services-page-categories { gap: var(--space-s); } .flip-card__text { padding: var(--space-m) var(--space-m) var(--space-l); } .services-page-allied-full { margin: 0 var(--space-s) calc(var(--space-xl) + var(--space-2xs)); padding: var(--space-xl) var(--space-l); } .services-page-allied-full__inner { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-3xs)); } .services-page-allied-full__right { text-align: left; } .services-page-allied-full__overlay { text-align: left; } /* Stacked: back to normal flow with an explicit height, since there is no neighbouring column to take the height from. */ .services-page-allied-full__left { min-height: 0; } .services-page-allied-full__image { position: relative; inset: auto; height: 340px; } .services-page-allied-full__image-placeholder { min-height: 340px; height: 340px; } .services-page-allied-full__image-inner img { height: 340px; } .services-page-cta { padding: var(--space-xl) var(--space-s) var(--space-2xl); } .services-page-cta__content { padding: calc(var(--space-l) + var(--space-xs)) var(--space-l); max-width: 100%; } .services-page-cta__card-border.notch-br-cta, .services-page-cta__card-fill.notch-br-cta { mask-image: none; -webkit-mask-image: none; } .services-page-cta__buttons { flex-direction: column; } .services-page-cta__buttons .btn { text-align: center; justify-content: center; } } /* ---------------------------------------------------------------- Services page — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .first-visit { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) 0; } .first-visit__steps { grid-template-columns: 1fr; } .first-visit__step { border-right: none !important; } .services-page-content { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .services-page-categories { grid-template-columns: 1fr; gap: var(--space-s); } .flip-card__text { padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m) var(--space-l); } .services-page-allied-full { margin: 0 var(--space-s) var(--space-xl); padding: calc(var(--space-l) + var(--space-2xs)) var(--space-m); } .services-page-allied-full__inner { gap: var(--space-m); } .services-page-allied-full__image-placeholder { height: 320px; } .services-page-allied-full__image-inner img { height: 320px; } .services-page-allied-full__right { text-align: left; } .services-page-allied-full__right p { text-align: left; } .services-page-allied-full__overlay { text-align: left; } .allied-cards-grid { grid-template-columns: 1fr; } .allied-card { text-align: left; } .allied-card__image { height: 220px; } .services-page-cta { padding: calc(var(--space-l) + var(--space-3xs)) var(--space-s) var(--space-2xl); } .services-page-cta__content { padding: var(--space-l) var(--space-m); max-width: 100%; } } /* ---------------------------------------------------------------- Services page — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .services-page-cta__buttons .btn { text-align: center; justify-content: center; } } /* ================================================================ Doctors page ================================================================ */ /* ---------------------------------------------------------------- Doctors page — Intro section ---------------------------------------------------------------- */ .doctors-intro { padding: var(--space-2xl) var(--space-l) 0; } .doctors-intro__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .doctors-intro__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .doctors-intro__content h2 span { color: inherit; } .doctors-intro__text { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; max-width: 520px; } .doctors-intro__highlights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-m); } .doctors-intro__highlight { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-s) var(--space-s); background: var(--tertiary); border-radius: var(--radius-sm); } .doctors-intro__highlight-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--primary); } .doctors-intro__highlight span:last-child { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-600); line-height: var(--leading-m); } .doctors-intro__image-wrap { position: relative; } .doctors-intro__image { height: 460px; border-radius: var(--radius-sm); overflow: hidden; } .doctors-intro__image img { width: 100%; height: 100%; object-fit: cover; } .doctors-intro__badge { position: absolute; left: 0; bottom: 0; background: var(--bg); border-radius: 0 var(--radius-sm) 0 0; padding: var(--space-3xs) var(--space-3xs) 0 0; } .doctors-intro__badge-inner { background: var(--tertiary); border-radius: var(--radius-sm); padding: var(--space-s) calc(var(--space-xs) + var(--space-2xs)); display: flex; align-items: center; gap: calc(var(--space-3xs) * 2); } .doctors-intro__badge-icon { color: var(--primary); flex-shrink: 0; } .doctors-intro__badge-text { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); color: var(--ink); } /* ---------------------------------------------------------------- Doctors page — Cards section ---------------------------------------------------------------- */ .doctors-section { padding: var(--space-2xl) var(--space-l) calc(var(--space-2xl) + var(--space-xs)); } .doctors-section__wrap { max-width: 1300px; margin: 0 auto; } .doctors-section__header { text-align: center; max-width: 620px; margin: 0 auto calc(var(--space-l) + var(--space-3xs)); } .doctors-section__header h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .doctors-section__header h2 span { color: inherit; } .doctors-section__header > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; } .doctors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: var(--space-l); } .doctor-card { background: var(--bg); border: 1px solid var(--secondary); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 260px 1fr; } .doctor-card .doctor-avatar { border-radius: 0; aspect-ratio: auto; min-height: 100%; background: url('../images/dr-virendra-berera-general-practitioner.webp') center/cover no-repeat var(--tan); } .doctor-card .doctor-avatar::after { display: none; } .doctor-card__body { padding: var(--space-m) calc(var(--space-m) + var(--space-3xs)); display: flex; flex-direction: column; } .doctor-card__name { font-size: var(--step-3); line-height: var(--leading-xs); letter-spacing: -.02em; } .doctor-card__profession { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-600); letter-spacing: .02em; color: var(--primary); margin: var(--space-3xs) 0 0; } .doctor-card__bio { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; } .doctor-card__details { margin: calc(var(--space-xs) + var(--space-2xs)) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex-grow: 1; } .doctor-card__detail { padding-top: var(--space-xs); border-top: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent); } .doctor-card__detail dt { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--step--2); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); text-transform: uppercase; } .doctor-card__detail dt svg { flex-shrink: 0; color: var(--primary); } .doctor-card__detail dd { margin: var(--space-3xs) 0 0; padding-left: var(--space-m); font-size: var(--step-0); line-height: var(--leading-l); color: var(--ink-alpha-78); } .doctor-card__cta { margin-top: var(--space-m); display: flex; gap: calc(var(--space-3xs) * 2); flex-wrap: wrap; align-items: center; } /* ---------------------------------------------------------------- Doctors page — Booking CTA strip ---------------------------------------------------------------- */ .doctors-cta { padding: 0 var(--space-m) calc(var(--space-2xl) + var(--space-xs)); } .doctors-cta__inner { max-width: 1504px; margin: 0 auto; } .doctors-cta__card { position: relative; } .doctors-cta__card-border { position: absolute; inset: 0; border-radius: 16px; background: var(--secondary); } .doctors-cta__card-border.notch-br-cta { z-index: var(--layer-ground); } .doctors-cta__card-fill { position: absolute; inset: 2px; border-radius: 14px; background: var(--bg); } .doctors-cta__card-fill.notch-br-cta { z-index: var(--layer-ground); } .doctors-cta__content { position: relative; z-index: var(--layer-base); padding: var(--space-xl); max-width: min(920px, calc(100% - 380px)); } .doctors-cta__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); letter-spacing: -.03em; margin: var(--space-s) 0 0; text-wrap: pretty; } .doctors-cta__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; text-wrap: pretty; } .doctors-cta__buttons { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); flex-wrap: wrap; } .doctors-cta__buttons .btn { max-width: 100%; box-sizing: border-box; } /* ---------------------------------------------------------------- Doctors page — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .doctors-intro { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) 0; } .doctors-intro__grid { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-xs)); } .doctors-intro__image { height: 380px; } .doctors-section { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) var(--space-2xl); } .doctor-card { grid-template-columns: 220px 1fr; } .doctors-cta { padding: 0 var(--space-s) var(--space-2xl); } .doctors-cta__content { padding: calc(var(--space-l) + var(--space-xs)) var(--space-l); max-width: 100%; } .doctors-cta__card-border.notch-br-cta, .doctors-cta__card-fill.notch-br-cta { mask-image: none; -webkit-mask-image: none; } .doctors-cta__buttons { flex-direction: column; } .doctors-cta__buttons .btn { text-align: center; justify-content: center; } } /* ---------------------------------------------------------------- Doctors page — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .doctors-intro { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) 0; } .doctors-intro__image { height: 280px; } .doctors-intro__highlights { grid-template-columns: 1fr; } .doctors-section { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .doctors-section__header { margin-bottom: var(--space-l); } .doctor-card { /* minmax(0, ...): the avatar's 16/9 ratio under its 220px min-height asks for a 391px-wide track, which pushed the photo past a phone. */ grid-template-columns: minmax(0, 1fr); } .doctor-card .doctor-avatar { width: 100%; /* a ratio box does not stretch: its 220px min-height made it 391px wide */ aspect-ratio: 16 / 9; min-height: 220px; max-height: 280px; } .doctor-card__body { padding: var(--space-m) var(--space-m); } .doctors-cta { padding: 0 var(--space-s) var(--space-2xl); } .doctors-cta__content { padding: var(--space-l) var(--space-m); } } /* ---------------------------------------------------------------- Doctors page — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .doctors-cta__buttons { flex-direction: column; align-items: stretch; } .doctors-cta__buttons .btn { max-width: 100%; text-align: center; justify-content: center; } .doctor-card__cta { flex-direction: column; } .doctor-card__cta .btn { text-align: center; justify-content: center; width: 100%; } } /* ================================================================ Team page ================================================================ */ /* ---------------------------------------------------------------- Team page — Team intro section ---------------------------------------------------------------- */ .team-page-intro { padding: var(--space-2xl) var(--space-l) var(--space-2xl); } .team-page-intro__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); align-items: start; } .team-page-intro__content h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .team-page-intro__content h2 span { color: inherit; } .team-page-intro__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-s) 0 0; } .team-page-intro__doctor-note { display: flex; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-m); padding: var(--space-s) calc(var(--space-xs) + var(--space-2xs)); background: var(--tertiary); border-radius: var(--radius-sm); } .team-page-intro__doctor-note svg { flex-shrink: 0; color: var(--primary); margin-top: calc(var(--space-3xs) / 3); } .team-page-intro__doctor-note p { font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink-alpha-78); } .team-page-intro__doctor-note a { font-weight: var(--weight-700); } /* ---------------------------------------------------------------- Team page — Staff members (rich-text merge tag wrapper) ---------------------------------------------------------------- */ .team-page-members { padding: 0 var(--space-m); } .team-page-members__inner { background: var(--tertiary); border-radius: var(--radius); padding: var(--space-2xl) var(--space-xl) var(--space-2xl); } .team-page-members__wrap { max-width: 1300px; margin: 0 auto; } .team-page-members__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l); } .team-page-members__header > div { max-width: 620px; } .team-page-members__header h2 { font-size: var(--step-6); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .team-page-members__header h2 span { color: inherit; } .team-page-members__content { margin-top: var(--space-l); } /* Grid of staff cards generated from the rich-text merge tag */ .team-page-members__content .rich-text ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } .team-page-members__content .rich-text li { background: var(--bg); border-radius: var(--radius-sm); padding: var(--space-m) var(--space-m); font-size: var(--step-0); line-height: var(--leading-xl); } .team-page-members__content .rich-text li p { font-size: var(--step-0); line-height: var(--leading-xl); } .team-page-members__content .rich-text li strong { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); display: block; margin-bottom: calc(var(--space-3xs) / 2); } /* ---------------------------------------------------------------- Team page — Staff cards (bespoke, with photos from homepage) ---------------------------------------------------------------- */ .team-page-cards { padding: var(--space-2xl) var(--space-l) 0; } .team-page-cards__wrap { max-width: 1300px; margin: 0 auto; } .team-page-cards__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--space-xs) + var(--space-2xs)); margin-top: var(--space-m); } /* Reuses .team-card from homepage — same notch-br image, corner badge pattern */ /* ---------------------------------------------------------------- Team page — Booking CTA strip ---------------------------------------------------------------- */ .team-page-cta { padding: var(--space-2xl) var(--space-m) calc(var(--space-2xl) + var(--space-xs)); } .team-page-cta__inner { max-width: 1300px; margin: 0 auto; background: var(--tertiary); border-radius: var(--radius); padding: var(--space-xl); text-align: center; } .team-page-cta__content h2 { font-size: var(--step-5); line-height: var(--leading-xs); letter-spacing: -.025em; margin: var(--space-s) 0 0; } .team-page-cta__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) auto 0; max-width: 520px; } .team-page-cta__buttons { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); justify-content: center; flex-wrap: wrap; align-items: center; } .team-page-cta__buttons .btn { max-width: 100%; box-sizing: border-box; } /* ---------------------------------------------------------------- Team page — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .team-page-intro { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) calc(var(--space-xl) + var(--space-2xs)); } .team-page-intro__grid { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-3xs)); } .team-page-members__inner { padding: var(--space-xl) var(--space-l) calc(var(--space-xl) + var(--space-3xs)); } .team-page-members__header { flex-direction: column; align-items: flex-start; gap: var(--space-s); } .team-page-members__content .rich-text ul { grid-template-columns: repeat(2, 1fr); } .team-page-cards { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) 0; } .team-page-cards__grid { grid-template-columns: repeat(3, 1fr); } .team-page-cta { padding: var(--space-xl) var(--space-s) var(--space-2xl); } .team-page-cta__inner { padding: calc(var(--space-l) + var(--space-xs)) var(--space-l); } .team-page-cta__buttons { flex-direction: column; } .team-page-cta__buttons .btn { text-align: center; justify-content: center; width: 100%; max-width: 320px; } } /* ---------------------------------------------------------------- Team page — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .team-page-intro { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .team-page-members { padding: 0 var(--space-s); } .team-page-members__inner { padding: calc(var(--space-l) + var(--space-2xs)) var(--space-m) var(--space-xl); } .team-page-members__content .rich-text ul { grid-template-columns: 1fr; } .team-page-cards { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) 0; } .team-page-cards__grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-xs) + var(--space-2xs)); } .team-page-cta { padding: calc(var(--space-l) + var(--space-3xs)) var(--space-s) var(--space-2xl); } .team-page-cta__inner { padding: var(--space-l) var(--space-m); } } /* ---------------------------------------------------------------- Team page — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .team-page-cta__buttons { flex-direction: column; align-items: stretch; } .team-page-cta__buttons .btn { max-width: 100%; } } /* ================================================================ Appointments page ================================================================ */ .appointments-booking { padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-l); } .appointments-booking__inner { max-width: 900px; margin: 0 auto; text-align: center; } .appointments-booking__inner h2 { font-size: var(--step-5); margin: var(--space-xs) 0 calc(var(--space-3xs) * 2); } .appointments-booking__inner > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); max-width: 600px; margin: 0 auto; } .appointments-booking__widget { margin-top: var(--space-l); min-height: 400px; } .appointments-booking__fallback { margin-top: calc(var(--space-xs) + var(--space-2xs)); font-size: var(--step-0); color: var(--ink-alpha-72); } .appointments-info { padding: 0 var(--space-l) calc(var(--space-xl) + var(--space-2xs)); } .appointments-info__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-xs) + var(--space-2xs)); } .appointments-info__card { background: transparent; border-radius: var(--radius); padding: var(--space-m) var(--space-m); } .appointments-info__card h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); } .appointments-info__card p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); } @media (max-width: 768px) { .appointments-booking { padding: var(--space-xl) calc(var(--space-xs) + var(--space-2xs)); } .appointments-info { padding: 0 calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .appointments-info__grid { grid-template-columns: 1fr; } } /* ================================================================ Patient Info page ================================================================ */ /* ---------------------------------------------------------------- Patient Info — Intro banner (new patients + appts quick-ref) ---------------------------------------------------------------- */ .patient-info-intro { padding: var(--space-xl) var(--space-l) var(--space-l); } .patient-info-intro__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); } .patient-info-intro__card { background: transparent; border-radius: var(--radius); padding: calc(var(--space-m) + var(--space-3xs)) calc(var(--space-m) + var(--space-3xs)) var(--space-l); display: flex; flex-direction: column; } .patient-info-intro__card-label { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); text-transform: uppercase; } .patient-info-intro__card-label svg { flex-shrink: 0; color: var(--primary); } .patient-info-intro__card h2 { font-size: var(--step-4); line-height: var(--leading-s); letter-spacing: -.02em; margin: var(--space-xs) 0 0; } .patient-info-intro__card .rich-text { margin-top: var(--space-xs); } .patient-info-intro__card-cta { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-s); flex-wrap: wrap; align-items: center; } .patient-info-intro__card-cta .booking-button { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-weight: var(--weight-700); font-size: var(--step--1); letter-spacing: .05em; border-radius: var(--radius-pill); white-space: nowrap; background: var(--primary); color: var(--bg); padding: var(--space-xs) var(--space-m); transition: background .15s ease, color .15s ease; text-transform: uppercase; } .patient-info-intro__card-cta .booking-button:hover { background: var(--secondary); color: var(--ink); } /* ---------------------------------------------------------------- Patient Info — Content sections ---------------------------------------------------------------- */ .patient-info-section { padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-l) calc(var(--space-xl) + var(--space-2xs)); margin: 0 var(--space-m) var(--space-3xl); background: var(--tertiary); border-radius: var(--radius); } .patient-info-section:last-of-type { margin-bottom: 0; } .patient-info-section__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: var(--space-xl); align-items: start; } .patient-info-section__label { } .patient-info-section__label-eyebrow { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); text-transform: uppercase; } .patient-info-section__label-eyebrow svg { flex-shrink: 0; color: var(--primary); } .patient-info-section__label h2 { font-size: var(--step-4); line-height: var(--leading-s); letter-spacing: -.02em; margin: var(--space-xs) 0 0; } .patient-info-section__body { padding-top: calc(var(--space-3xs) / 2); } .patient-info-section__body .rich-text { max-width: 720px; } .patient-info-section__inner--with-image { grid-template-columns: 1fr 1fr; gap: calc(var(--space-2xl) + var(--space-s)); align-items: center; } .patient-info-section__content h2 { font-size: var(--step-4); line-height: var(--leading-s); letter-spacing: -.02em; margin: var(--space-xs) 0 var(--space-xs); } .patient-info-section__image-wrap { position: relative; margin-bottom: calc(-1 * var(--space-3xl)); } .patient-info-section__image-inner { border-radius: var(--radius); overflow: hidden; border: 20px solid var(--bg); box-sizing: border-box; } .patient-info-section__image-placeholder { width: 100%; height: 300px; background: var(--tan); } .patient-info-section__image-inner img { width: 100%; height: 300px; object-fit: cover; display: block; border-radius: calc(var(--radius) - 6px); } /* ---------------------------------------------------------------- Patient Info — Policies grid (cards) ---------------------------------------------------------------- */ .patient-info-policies { margin: 0 var(--space-m) var(--space-2xl); padding: var(--space-2xl) var(--space-xl) var(--space-2xl); } .patient-info-policies__inner { max-width: 1500px; margin: 0 auto; } .patient-info-policies__header { max-width: 920px; margin: 0 auto; text-align: center; } .patient-info-policies__header h2 { font-size: var(--step-5); line-height: var(--leading-xs); margin: var(--space-s) 0 0; } .patient-info-policies__header h2 span { color: inherit; } .patient-info-policies__header > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; } .patient-info-policies__grid { margin-top: var(--space-l); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } .policy-card { background: var(--bg); border-radius: var(--radius-sm); padding: var(--space-m) var(--space-m) calc(var(--space-m) + var(--space-3xs)); display: flex; flex-direction: column; } .policy-card__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--tertiary); display: flex; align-items: center; justify-content: center; color: var(--primary); } .policy-card h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); letter-spacing: -.01em; margin: var(--space-s) 0 0; } .policy-card .rich-text { margin-top: calc(var(--space-3xs) * 2); } .policy-card .rich-text p { font-size: var(--step-0); line-height: var(--leading-xl); } /* ---------------------------------------------------------------- Patient Info — FAQs ---------------------------------------------------------------- */ .patient-info-faq { padding: var(--space-2xl) var(--space-l); max-width: 1500px; margin: 0 auto; } .patient-info-faq__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; } .patient-info-faq__content h2 { font-size: var(--step-5); line-height: var(--leading-xs); letter-spacing: -.02em; margin: var(--space-s) 0 0; } .patient-info-faq__desc { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: calc(var(--space-3xs) * 2) 0 calc(var(--space-m) + var(--space-3xs)); } .patient-info-faq .faq-accordion { grid-template-columns: 1fr; } .patient-info-faq__image { border-radius: var(--radius); overflow: hidden; } .patient-info-faq__image-placeholder { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius); } .patient-info-faq__image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); } /* ---------------------------------------------------------------- Patient Info — Booking CTA strip ---------------------------------------------------------------- */ .patient-info-cta { padding: var(--space-2xl) var(--space-m) calc(var(--space-2xl) + var(--space-xs)); } .patient-info-cta__inner { max-width: 1300px; margin: 0 auto; background: var(--bg); border: 2px solid var(--secondary); border-radius: var(--radius); padding: var(--space-xl) var(--space-xl); text-align: center; } .patient-info-cta__content h2 { font-size: var(--step-5); line-height: var(--leading-xs); letter-spacing: -.025em; } .patient-info-cta__content > p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) auto 0; max-width: 520px; } .patient-info-cta__buttons { display: flex; gap: calc(var(--space-3xs) * 2); margin-top: var(--space-m); justify-content: center; flex-wrap: wrap; align-items: center; } .patient-info-cta__buttons .btn { max-width: 100%; box-sizing: border-box; } /* ---------------------------------------------------------------- Patient Info — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .patient-info-intro { padding: calc(var(--space-l) + var(--space-xs)) calc(var(--space-m) + var(--space-3xs)) 0; } .patient-info-intro__grid { grid-template-columns: 1fr; gap: var(--space-m); } .patient-info-section { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) var(--space-xl); margin: 0 var(--space-s) var(--space-s); } .patient-info-section__inner { grid-template-columns: 1fr; gap: var(--space-2xs); } .patient-info-section__label { position: static; } .patient-info-section__inner--with-image { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-3xs)); } .patient-info-section__inner--reversed .patient-info-section__image-wrap { order: 2; } .patient-info-faq { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)); margin-top: calc(var(--space-2xl) + var(--space-2xs)); } .patient-info-faq__inner { grid-template-columns: 1fr; gap: calc(var(--space-m) + var(--space-3xs)); } .patient-info-faq__image { position: static; } .patient-info-policies { margin: 0 var(--space-s); padding: var(--space-xl) var(--space-l) var(--space-xl); } .patient-info-policies__inner { padding: var(--space-xl) var(--space-l) calc(var(--space-xl) + var(--space-3xs)); } .patient-info-policies__header { text-align: left; margin: 0; } .patient-info-policies__grid { grid-template-columns: repeat(2, 1fr); } .patient-info-cta { padding: var(--space-xl) var(--space-s) var(--space-2xl); } .patient-info-cta__inner { padding: calc(var(--space-l) + var(--space-xs)) var(--space-l); } .patient-info-cta__buttons { flex-direction: column; } .patient-info-cta__buttons .btn { text-align: center; justify-content: center; width: 100%; max-width: 320px; } } /* ---------------------------------------------------------------- Patient Info — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .patient-info-intro { padding: var(--space-l) calc(var(--space-xs) + var(--space-2xs)) calc(var(--space-l) + var(--space-3xs)); } .patient-info-intro__grid { grid-template-columns: 1fr; } .patient-info-intro__card { padding: var(--space-m) var(--space-m) var(--space-l); } .patient-info-section { padding: calc(var(--space-l) + var(--space-2xs)) calc(var(--space-xs) + var(--space-2xs)) calc(var(--space-l) + var(--space-2xs)); margin: 0 var(--space-s) calc(var(--space-l) + var(--space-3xs)); } .patient-info-section:last-of-type { margin-bottom: calc(var(--space-3xl) + var(--space-s)); } .patient-info-section__inner { gap: var(--space-3xs); } .patient-info-section__image-wrap { margin-top: calc(var(--space-l) + var(--space-3xs)); margin-bottom: calc(-1 * calc(var(--space-2xl) + var(--space-xs))); } .patient-info-policies { margin: 0 var(--space-s) calc(var(--space-2xl) + var(--space-xs)); padding: calc(var(--space-l) + var(--space-2xs)) var(--space-s) calc(var(--space-l) + var(--space-2xs)); } .patient-info-policies__inner { padding: calc(var(--space-l) + var(--space-3xs)) 0 var(--space-xl); } .patient-info-policies__header { text-align: left; margin: 0; } .patient-info-policies__grid { grid-template-columns: 1fr; } .patient-info-faq { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)); } .patient-info-cta { padding: calc(var(--space-l) + var(--space-3xs)) var(--space-s) var(--space-2xl); } .patient-info-cta__inner { padding: var(--space-l) var(--space-m); } } /* ---------------------------------------------------------------- Patient Info — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .patient-info-intro__card-cta { flex-direction: column; } .patient-info-intro__card-cta .btn, .patient-info-intro__card-cta .booking-button { text-align: center; justify-content: center; width: 100%; } .patient-info-cta__buttons .btn { max-width: 100%; } } /* ================================================================ Privacy Policy page ================================================================ */ /* ---------------------------------------------------------------- Privacy — Legal content wrapper ---------------------------------------------------------------- */ .privacy-content { padding: var(--space-2xl) var(--space-l) calc(var(--space-2xl) + var(--space-xs)); } .privacy-content__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: var(--space-xl); align-items: start; } /* ---------------------------------------------------------------- Privacy — Sidebar (sticky nav) ---------------------------------------------------------------- */ .privacy-content__sidebar { position: sticky; top: 40px; } .privacy-content__sidebar-label { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .08em; color: var(--primary); text-transform: uppercase; } .privacy-content__sidebar-label svg { flex-shrink: 0; color: var(--primary); } .privacy-content__updated { font-size: var(--step--1); color: var(--ink-alpha-62); margin: var(--space-xs) 0 0; } .privacy-content__nav { margin: calc(var(--space-xs) + var(--space-2xs)) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--space-3xs) / 3); } .privacy-content__nav a { display: block; padding: var(--space-2xs) var(--space-xs); font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-600); color: var(--ink-alpha-72); border-radius: 8px; transition: background .15s ease, color .15s ease; } .privacy-content__nav a:hover { background: var(--tertiary); color: var(--ink); } /* ---------------------------------------------------------------- Privacy — Legal text body ---------------------------------------------------------------- */ .privacy-content__body { max-width: 65ch; } .privacy-content__intro { font-size: var(--step-1); line-height: var(--leading-2xl); color: var(--ink-alpha-82); padding-bottom: var(--space-l); border-bottom: 1px solid var(--tan); } .privacy-content__intro a { text-decoration: underline; text-underline-offset: 3px; } .privacy-section { padding: var(--space-l) 0; border-bottom: 1px solid var(--tan); } .privacy-section:last-child { border-bottom: none; padding-bottom: 0; } .privacy-section h2 { font-size: var(--step-3); line-height: var(--leading-s); letter-spacing: -.015em; } .privacy-section h3 { font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m); letter-spacing: -.01em; margin: var(--space-m) 0 0; } .privacy-section p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-xs) 0 0; } .privacy-section ul, .privacy-section ol { padding-left: var(--space-s); margin: var(--space-xs) 0 0; } .privacy-section li { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); } .privacy-section li + li { margin-top: var(--space-3xs); } .privacy-section li strong { font-weight: var(--weight-700); color: var(--ink); } .privacy-section a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .privacy-section a:hover { color: var(--ink); } .privacy-section em { font-style: italic; } /* ---------------------------------------------------------------- Privacy — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .privacy-content { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) var(--space-2xl); } .privacy-content__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } .privacy-content__sidebar { position: static; } .privacy-content__nav { display: none; } } /* ---------------------------------------------------------------- Privacy — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .privacy-content { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-2xl); } .privacy-content__body { max-width: 100%; } .hero-simple { padding: var(--space-s) var(--space-s) 0; } .hero-simple__inner { padding: calc(var(--space-l) + var(--space-2xs)) var(--space-m) calc(var(--space-l) + var(--space-3xs)); } } /* ================================================================ Legal content pages (Terms, Privacy) ================================================================ */ /* ---------------------------------------------------------------- Legal content — Article wrapper ---------------------------------------------------------------- */ .legal-content { padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-l) calc(var(--space-2xl) + var(--space-xs)); } .legal-content__inner { max-width: 820px; margin: 0 auto; } .legal-content__intro { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: 0 0 var(--space-l); padding-bottom: var(--space-m); border-bottom: 1px solid var(--tan); } .legal-content__intro a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .legal-content__intro a:hover { color: var(--ink); } /* ---------------------------------------------------------------- Legal content — Section headings ---------------------------------------------------------------- */ .legal-content h2 { font-size: var(--step-3); line-height: var(--leading-s); letter-spacing: -.015em; margin: var(--space-l) 0 0; } .legal-content h2:first-of-type { margin-top: 0; } /* ---------------------------------------------------------------- Legal content — Body text ---------------------------------------------------------------- */ .legal-content p { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); margin: var(--space-xs) 0 0; } .legal-content strong { font-weight: var(--weight-700); color: var(--ink); } .legal-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .legal-content a:hover { color: var(--ink); } /* ---------------------------------------------------------------- Legal content — Lists ---------------------------------------------------------------- */ .legal-content ul, .legal-content ol { padding-left: var(--space-s); margin: var(--space-xs) 0 0; } .legal-content li { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-82); } .legal-content li + li { margin-top: var(--space-3xs); } /* ---------------------------------------------------------------- Legal content — Definition list (contact details) ---------------------------------------------------------------- */ .legal-content dl { margin: var(--space-s) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3xs) var(--space-s); align-items: baseline; } .legal-content dt { font-family: var(--font-heading); font-size: var(--step--1); font-weight: var(--weight-700); letter-spacing: .04em; color: var(--primary); } .legal-content dd { margin: 0; font-size: var(--step-0); line-height: var(--leading-xl); color: var(--ink); } .legal-content dd address { font-style: normal; } /* ---------------------------------------------------------------- Legal content — Last updated + small text ---------------------------------------------------------------- */ .legal-content__updated { margin-top: calc(var(--space-l) + var(--space-3xs)); padding-top: var(--space-m); border-top: 1px solid var(--tan); font-size: var(--step--1); color: var(--ink-alpha-62); } /* ---------------------------------------------------------------- Legal content — Responsive (Tablet <= 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .legal-content { padding: var(--space-xl) calc(var(--space-m) + var(--space-3xs)) var(--space-2xl); } } /* ---------------------------------------------------------------- Legal content — Responsive (Mobile <= 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .legal-content { padding: calc(var(--space-l) + var(--space-3xs)) calc(var(--space-xs) + var(--space-2xs)) var(--space-xl); } .legal-content h2 { margin-top: var(--space-l); } .legal-content dl { grid-template-columns: 1fr; gap: var(--space-3xs); } .legal-content dt { margin-top: var(--space-xs); } .legal-content dt:first-of-type { margin-top: 0; } } /* ---------------------------------------------------------------- 404 page ---------------------------------------------------------------- */ .error-page { display: flex; align-items: center; justify-content: center; min-height: 50vh; padding: var(--space-2xl) var(--space-m); } .error-page__inner { max-width: 620px; text-align: center; } .error-page__code { font-family: var(--font-heading); font-size: var(--step-8); font-weight: var(--weight-800); letter-spacing: -.04em; line-height: 1; color: var(--tertiary); } .error-page__heading { font-size: var(--step-5); line-height: var(--leading-xs); letter-spacing: -.025em; margin: var(--space-xs) 0 0; } .error-page__message { font-size: var(--step-0); line-height: var(--leading-2xl); color: var(--ink-alpha-78); margin: var(--space-xs) 0 0; max-width: 480px; margin-left: auto; margin-right: auto; } .error-page__divider { width: 48px; height: 2px; background: var(--secondary); margin: var(--space-m) auto; border-radius: 1px; } .error-page__phone { display: inline-flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--step-0); font-weight: var(--weight-600); color: var(--primary); margin-bottom: var(--space-m); } .error-page__phone:hover { color: var(--ink); } .error-page__phone svg { flex-shrink: 0; } .error-page__ctas { display: flex; gap: calc(var(--space-3xs) * 2); justify-content: center; flex-wrap: wrap; } @media (max-width: 480px) { .error-page { padding: calc(var(--space-xl) + var(--space-2xs)) calc(var(--space-xs) + var(--space-2xs)); } .error-page__ctas { flex-direction: column; } .error-page__ctas .btn { text-align: center; justify-content: center; } } /* ── 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-4xl) var(--space-2xl-3xl); text-align: center; } .notfound__inner { max-width: 46rem; margin-inline: auto; } /* Decorative, aria-hidden in the markup - the

carries the meaning. Sized * large but kept at a legible contrast: a very pale numeral fails WCAG even * when it is ornamental. */ .notfound__code { font-size: var(--step-8); font-weight: var(--weight-700); line-height: 0.9; margin: 0 0 calc(var(--space-3xs) / 2); opacity: 0.55; } .notfound h1 { margin-top: 0; } .notfound__lede { font-size: var(--step-1); line-height: var(--leading-l); margin-inline: auto; max-width: 40rem; } .notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-top: var(--space-m); } .notfound__links { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid currentColor; /* The rule is a hairline of the surrounding ink rather than a named border * token, so it works whatever the site's palette is. */ border-color: color-mix(in oklab, currentColor 22%, transparent); } .notfound__links-title { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-xs); } .notfound__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-m); justify-content: center; } .notfound__links a { display: inline-block; /* WCAG 2.2 target size. */ min-height: 24px; line-height: 24px; font-weight: var(--weight-600); } /* ---------------------------------------------------------------- Doctors & staff page — Staff section The staff grid (.team) is reused here from the homepage, where it sat nested inside the doctor block and leaned on a 64px top margin for its spacing. As its own top-level section it needs real section padding instead, so .team--staff-page drops that margin and .staff-section supplies the rhythm — matched to .doctors-section above it so the two groups read as equal-weight siblings rather than one subordinate to the other. ---------------------------------------------------------------- */ .staff-section { padding: 0 0 calc(var(--space-2xl) + var(--space-xs)); } .team--staff-page { margin-top: 0; } .team--staff-page .team__header { display: block; text-align: center; } .team--staff-page .team__header h2 { font-size: var(--step-5); letter-spacing: -.025em; margin: calc(var(--space-3xs) * 2) 0 0; } .team--staff-page .team__header h2 span { color: var(--primary); } .team--staff-page .team__desc { margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- Layout fixes from the both-edge overflow sweep (320-1600) ---------------------------------------------------------------- */ /* The site's own URL printed in the legal pages' opening paragraph is one unbreakable word, wider than a phone; let it break rather than scroll. */ .legal-content__inner, .privacy-content__body { overflow-wrap: anywhere; } @media (max-width: 1024px) { /* The band is position: static here, so this cutout anchored to .hero__top instead and sat 15px outside the hero, cream on cream: invisible, but 3px past the viewport on every phone page. .hero__corner does the job. */ .hero__logo-nav::before { display: none; } } /* ---------------------------------------------------------------- Short last rows are centred (doubled tracks, every card spans two) ---------------------------------------------------------------- */ @media (min-width: 769px) and (max-width: 1024px) { /* five staff cards, three across: centre the pair */ .team__grid { grid-template-columns: repeat(6, 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; } /* three policy cards, two across: centre the third */ .patient-info-policies__grid { grid-template-columns: repeat(4, 1fr); } .patient-info-policies__grid > * { grid-column: span 2; } .patient-info-policies__grid > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; } } @media (max-width: 768px) { /* five staff cards, two across: centre the fifth */ .team__grid { grid-template-columns: repeat(4, 1fr); } .team__grid > * { grid-column: span 2; } .team__grid > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; } } /* ---------------------------------------------------------------- Opening hours from Rails ({{opening_hours_html}}) Rails renders with the days already grouped ("Mon–Fri", "Sat", "Sun"), so a change of hours in the practice profile reaches the hero card and the footer with no edit here. Styled to read as the label/time rows these cards had when the hours were typed. ---------------------------------------------------------------- */ .hero__hours-list .hours-table, .footer__hours .hours-table { width: 100%; border-collapse: collapse; } .hero__hours-list .hours-table td, .footer__hours .hours-table td { padding: 0 0 var(--space-2xs); vertical-align: top; } .hero__hours-list .hours-table tr + tr td, .footer__hours .hours-table tr + tr td { padding-top: var(--space-2xs); } .hero__hours-list .hours-table tr:last-child td, .footer__hours .hours-table tr:last-child td { padding-bottom: 0; } .hero__hours-list .hours-table td:first-child, .footer__hours .hours-table td:first-child { font-weight: var(--weight-700); padding-right: var(--space-s); white-space: nowrap; } .hero__hours-list .hours-table td:last-child, .footer__hours .hours-table td:last-child { text-align: right; /* a split session wraps at its comma, not inside a time range */ text-wrap: balance; } .hero__hours-list .hours-table tr + tr td { border-top: 1px solid var(--tan); } .hero__hours-list .hours-table td:last-child { color: var(--ink-alpha-78); } .footer__hours .hours-table { font-size: var(--step--1); } .footer__hours .hours-table tr + tr td { border-top: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); } .footer__hours .hours-table td:first-child { color: var(--bg); } .footer__hours .hours-table td:last-child { color: color-mix(in srgb, var(--bg) 75%, transparent); } /* The typed rows dropped their dividers at tablet and below, leaving one gap between rows; keep that. */ @media (max-width: 1024px) { .hero__hours-list .hours-table tr + tr td, .footer__hours .hours-table tr + tr td { border-top: 0; padding-top: 0; } } /* Rails' bio is plain text with blank lines between paragraphs. */ .doctor-card__bio { white-space: pre-line; }