/* * Victoria Road Medical Centre: warm amber and gold on a cream page, dark * brown text, a dark-brown top bar and footer, light-gold panels. Light only. * Moved onto Dials v0.4 from the template's pre-Dials token layer: the * colours are the same hex values, written as colour dials below, and the * type and space scale is the same Utopia scale on Dials' own dials. */ /* * Site styles. There is 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. * * COLOUR, TYPE AND SPACE ARE DIALS (#426). The first section is Dials * (github.com/joops/dials), copied verbatim between its begin and end * markers. It works out every colour, text size, space size and * corner from a few values called dials. This site sets its own dials in ONE * short block straight after the section, "This site's dials", and that block * is the only place in the file where a colour or a scale value is typed. * * - Change the look by changing a dial: --brand for the brand colour, * --size-min/--size-max and --ratio-min/--ratio-max for the type scale, * --leading-body for line height, --space-min/--space-max and * --space-density for spacing, --radius-base for corners, * --font-body/--font-heading for faces. * - Everything else reads a token: --surface*, --text*, --border*, --link, * --focus, --solid/--on-solid/--soft/--on-soft/--line (and the named * groups --brand-*, --secondary-*, --tertiary-*, --success-* ...), --size-*, * --leading, --space-*, --radius-*, --border-width-*. Never a hex, rgb(), * hsl() or named colour, never a px/rem length, and never a typed line * height, anywhere else. Weights and letter spacing are the site's own: * a weight is a unitless number, letter spacing is in em. * - The rules are in refs/design/DESIGN.md ("Dials"). Every dial, token * and class is listed in the reference for the version in the section's * first line: github.com/joops/dials/blob/v0.4.0/docs/tokens.md. A * gradient, a wash or a quiet coloured border is a pattern built from * tokens (that reference, "Patterns"), never a token of its own. * check-system.sh holds the section to _template's copy word for word, * and fails a raw colour outside the dials block. */ /* ═══ Dials ═══ dials:begin ═════════════════════════════════════════════ * Dials v0.4.0, VERBATIM. Never edit anything between this marker and the * end marker: check-system.sh fails the site if its copy differs from * _template's by a word. Each marker appears once; never write either in * prose. Set dials in "This site's dials" below; an upgrade * of Dials is a template change plus a migration of every site. * ═══════════════════════════════════════════════════════════════════════ */ /*! Dials v0.4.0 | MIT | https://github.com/joops/dials */ /* Dials: an AI-first CSS framework. This file is dials-colour.css, then dials-scale.css, then the fallback for older browsers; dials-base.css is optional. Its defaults are the Default theme: the device's own faces, nothing to load. The Dials house theme is themes/dials.css. */ /* ============================================================ Dials: colour (dials-colour.css) Dials: seven colours and a few numbers, the only typed values. Derived: surfaces, text, lines and groups, worked out live with color-mix() and relative colour, in light and dark. Groups: .is-{group} points the ungrouped tokens at a group. Dials live on :root (and :host); the derived chain is declared on :root, [data-dials] and :host, so setting a dial on any [data-dials] element re-derives every token inside it. Needs color-mix(), light-dark() and relative colour. Don't register these with @property: they must resolve where they're used, which is what makes .is-dark bands work. ============================================================ */ :root, :host { /* ---- Colour dials: any CSS colour, preferably HSL ---- */ --brand: hsl(221 83% 53%); /* the main colour: links, focus, primary buttons */ --secondary: hsl(262 52% 55%); /* a second colour: highlights and secondary actions (was --accent) */ --success: hsl(142 64% 38%); /* status: done, saved, live */ --warning: hsl(38 92% 50%); /* status: check this */ --danger: hsl(0 72% 51%); /* status: errors and destructive actions */ --info: hsl(199 89% 42%); /* status: neutral news */ --grey: hsl(220 9% 50%); /* the hue and strength of the tint in paper and ink */ /* ---- Number dials ---- */ --balance: 0; /* 1: every fill at --fill-lightness, so they carry equal weight. 0: exactly as set */ --fill-lightness: 0.52; /* the shared OKLCH lightness used when --balance is 1 */ --dark-lift: 0.06; /* how much lighter the fills are in dark */ --tint-strength: 10%; /* how much colour goes into a soft tint */ --tint-vividness: 1; /* 1-3: how saturated soft tints are, for crisper pastels */ --text-contrast: 0; /* 0-30: strengthens body, muted and quiet text and strong borders, for paper and ink that sit close together */ --white-text-until: 0.179; /* fills below this luminance get white text, above it black. 0.179 gives each fill whichever contrasts more; held between 0.175 and 0.18333, where both still give 4.5:1: black needs (L + 0.05) / 0.05 >= 4.5, so L >= 0.175; white needs 1.05 / (L + 0.05) >= 4.5, so L <= 1.05 / 4.5 - 0.05 = 0.18333 */ /* ---- Paper and ink: near-white and near-black, tinted by --grey at these OKLCH lightnesses. To use exact colours instead, set --paper-light, --paper-dark, --ink-light and/or --ink-dark (unset by default) to any colour. ---- */ --paper-lightness: 0.985; /* page background in light */ --paper-dark-lightness: 0.17; /* page background in dark */ --ink-lightness: 0.2; /* strongest text in light */ --ink-dark-lightness: 0.95; /* strongest text in dark */ } /* Follow the visitor's light or dark setting. To force one, set :root { color-scheme: light; } (or dark) after dials.css. */ :root { color-scheme: light dark; } :root, [data-dials], :host { /* ---- Internal: paper, ink and the six fills, worked out from the dials ---- */ --dl-paper-light: var(--paper-light, oklch(from var(--grey) var(--paper-lightness) calc(c * 0.12) h)); --dl-paper-dark: var(--paper-dark, oklch(from var(--grey) var(--paper-dark-lightness) calc(c * 0.15) h)); --dl-ink-light: var(--ink-light, oklch(from var(--grey) var(--ink-lightness) calc(c * 0.25) h)); --dl-ink-dark: var(--ink-dark, oklch(from var(--grey) var(--ink-dark-lightness) calc(c * 0.12) h)); --dl-paper: light-dark(var(--dl-paper-light), var(--dl-paper-dark)); --dl-ink: light-dark(var(--dl-ink-light), var(--dl-ink-dark)); --dl-paper-grey: oklch(from var(--dl-paper) l 0 h); /* paper without its tint: soft tints mix into this, so they keep their own hue */ --dl-secondary-dial: var(--accent, var(--secondary)); /* --accent is --secondary's old name: while a site still sets it, it wins */ --dl-brand-base: oklch(from var(--brand) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --dl-secondary-base: oklch(from var(--dl-secondary-dial) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --dl-success-base: oklch(from var(--success) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --dl-warning-base: oklch(from var(--warning) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --dl-danger-base: oklch(from var(--danger) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --dl-info-base: oklch(from var(--info) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --dl-brand: light-dark(var(--dl-brand-base), oklch(from var(--dl-brand-base) calc(l + var(--dark-lift)) c h)); --dl-secondary: light-dark(var(--dl-secondary-base), oklch(from var(--dl-secondary-base) calc(l + var(--dark-lift)) c h)); --dl-success: light-dark(var(--dl-success-base), oklch(from var(--dl-success-base) calc(l + var(--dark-lift)) c h)); --dl-warning: light-dark(var(--dl-warning-base), oklch(from var(--dl-warning-base) calc(l + var(--dark-lift)) c h)); --dl-danger: light-dark(var(--dl-danger-base), oklch(from var(--dl-danger-base) calc(l + var(--dark-lift)) c h)); --dl-info: light-dark(var(--dl-info-base), oklch(from var(--dl-info-base) calc(l + var(--dark-lift)) c h)); /* ---- Surfaces ---- */ --surface: var(--dl-paper); /* the page background */ --surface-raised: oklch(from var(--dl-paper) calc(l + 0.03) calc(c * 0.5) h); /* cards, fields, popovers */ --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper)); /* wells, table headers, quiet panels */ --surface-sunken: color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper)); /* code, inset areas, disabled fills */ --surface-overlay: color-mix(in oklab, black 45%, transparent); /* the scrim behind a dialog */ /* ---- Text ---- */ --text-strong: var(--dl-ink); /* headings, labels, emphasis */ --text: color-mix(in oklab, var(--dl-ink) calc(86% + var(--text-contrast) * 0.4%), var(--dl-paper)); /* body text */ --text-muted: color-mix(in oklab, var(--dl-ink) calc(70% + var(--text-contrast) * 1%), var(--dl-paper)); /* secondary text */ --text-quiet: color-mix(in oklab, var(--dl-ink) calc(64% + var(--text-contrast) * 1.2%), var(--dl-paper)); /* captions, dates, placeholders */ --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper)); /* disabled controls: exempt from contrast rules */ --link: var(--brand-on-soft); /* links: 4.5:1 on every surface */ --link-hover: light-dark(color(from var(--dl-brand-hover) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-hover) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); /* links on hover: a step stronger (the link 0.08 darker in OKLCH lightness in light, lighter in dark), and on to 7:1 if that's short */ /* ---- Lines and effects ---- */ --border-quiet: color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper)); /* dividers that should barely show */ --border: color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper)); /* card and table borders: decorative */ --border-strong: color-mix(in oklab, var(--dl-ink) calc(46% + var(--text-contrast) * 1%), var(--dl-paper)); /* field and control borders: 3:1 on surfaces */ --focus: var(--brand-on-soft); /* the focus ring: opaque, 4.5:1 on surfaces */ --selection: color-mix(in oklab, var(--dl-brand) 22%, var(--dl-paper)); /* selected text background */ --shadow-color: light-dark(color-mix(in oklab, black 10%, transparent), color-mix(in oklab, black 45%, transparent)); /* the colour of shadows */ --shadow-s: 0 1px 3px var(--shadow-color); /* a slight lift: buttons, chips */ --shadow-m: 0 4px 14px var(--shadow-color); /* cards */ --shadow-l: 0 12px 32px var(--shadow-color); /* popovers, menus, dialogs */ /* ---- Hover and pressed: the second half of a color-mix(), from Web Awesome. Use as color-mix(in oklch, var(--solid), var(--mix-hover)). ---- */ --mix-hover: oklch(from currentColor calc(1 - l) c h) 12%; /* hover: away from the text colour */ --mix-active: oklch(from currentColor calc(1 - l) c h) 22%; /* pressed: further still */ /* ---- Groups: brand, secondary, neutral, success, warning, danger, info. Five roles each: solid a solid fill on-solid text on it: white or black, whichever contrasts more (its sRGB luminance, as painted, vs --white-text-until) soft a tinted background: the colour, held at L 0.7 or lighter in light (0.6 or darker in dark), mixed in OKLab into paper with its own tint taken out, so a blue soft stays blue on cream paper on-soft text on soft, and coloured text on the page: the fill, moved only as far as 4.5:1 needs line borders, icons and large text (24px, or 18.66px bold, and up): the dial, moved only as far as 3:1 needs Coloured text and lines follow one rule: keep the colour, and move it only as far as its contrast target needs, on the least contrasting background it sits on: its own soft tint, --surface-lowered or --surface-raised (--surface always lies between them). Only its linear-light RGB is scaled, which keeps the channels' ratios, so hue and saturation stay (in dark, until a channel reaches 1). --link-hover is the same rule at 7:1, starting from the link a step stronger. Y the colour's luminance, 0.2126 r + 0.7152 g + 0.0722 b in linear sRGB (clipped to sRGB first) Yb that background's luminance, as painted (clipped to sRGB) T the target, plus 0.1 headroom so painting in 8 bits can't round it under the line light: Yt = (Yb + 0.05) / (T + 0.1) - 0.05; scale r, g and b by min(1, Yt / Y) dark: Yt = (T + 0.1) * (Yb + 0.05) - 0.05; scale r, g and b by max(1, Yt / Y), each capped at 1; if a capped channel leaves it short, mix towards white only as far as Yt needs: by (Yt - Y1) / (1 - Y1), where Y1 is the luminance after scaling A colour that already passes keeps its exact value. CSS works out a relative colour from one colour's channels only, so the steps carry their numbers in colours: --dl-surfaces-y the luminance of --surface-lowered in green, of --surface-raised in blue --dl-{group}-under plus the soft tint's in red, mixed 50/50: Yb is min(2r, 4g, 4b) in light, max in dark --dl-{group}-text, the colour, mixed 50/50 with a black whose alpha is s Yt, where s is 3 in --dl-{group}-line, light (Yt is at most 0.29 there) and 1 in dark: scaling it up means Firefox --dl-brand-hover rounding a mix's alpha to three decimals costs a third as much. Mixing premultiplies, so the mix has alpha a = (1 + s Yt) / 2 and channels c / 2a: the colour's channels are r * 2a, and Yt is (2a - 1) / s on-soft, line, hover unpack both and scale, as above ---- */ --dl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)))); --dl-brand-under: color-mix(in srgb-linear, color(from var(--brand-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-brand-text: color-mix(in srgb-linear, color(from var(--dl-brand-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-brand-line: color-mix(in srgb-linear, color(from var(--brand) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --brand-solid: var(--dl-brand); --brand-on-solid: color(from var(--dl-brand) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --brand-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-brand) max(l, 0.7) c h), oklch(from var(--dl-brand) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h); --brand-on-soft: light-dark(color(from var(--dl-brand-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --brand-line: light-dark(color(from var(--dl-brand-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-secondary-under: color-mix(in srgb-linear, color(from var(--secondary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-secondary-text: color-mix(in srgb-linear, color(from var(--dl-secondary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-secondary-line: color-mix(in srgb-linear, color(from var(--dl-secondary-dial) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --secondary-solid: var(--dl-secondary); --secondary-on-solid: color(from var(--dl-secondary) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --secondary-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-secondary) max(l, 0.7) c h), oklch(from var(--dl-secondary) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h); --secondary-on-soft: light-dark(color(from var(--dl-secondary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --secondary-line: light-dark(color(from var(--dl-secondary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --neutral-solid: var(--dl-ink); --neutral-on-solid: var(--dl-paper); --neutral-soft: var(--surface-lowered); --neutral-on-soft: var(--text); --neutral-line: var(--border); --dl-success-under: color-mix(in srgb-linear, color(from var(--success-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-success-text: color-mix(in srgb-linear, color(from var(--dl-success-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-success-line: color-mix(in srgb-linear, color(from var(--success) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --success-solid: var(--dl-success); --success-on-solid: color(from var(--dl-success) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --success-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-success) max(l, 0.7) c h), oklch(from var(--dl-success) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h); --success-on-soft: light-dark(color(from var(--dl-success-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --success-line: light-dark(color(from var(--dl-success-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-warning-under: color-mix(in srgb-linear, color(from var(--warning-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-warning-text: color-mix(in srgb-linear, color(from var(--dl-warning-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-warning-line: color-mix(in srgb-linear, color(from var(--warning) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --warning-solid: var(--dl-warning); --warning-on-solid: color(from var(--dl-warning) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --warning-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-warning) max(l, 0.7) c h), oklch(from var(--dl-warning) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h); --warning-on-soft: light-dark(color(from var(--dl-warning-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --warning-line: light-dark(color(from var(--dl-warning-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-danger-under: color-mix(in srgb-linear, color(from var(--danger-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-danger-text: color-mix(in srgb-linear, color(from var(--dl-danger-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-danger-line: color-mix(in srgb-linear, color(from var(--danger) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --danger-solid: var(--dl-danger); --danger-on-solid: color(from var(--dl-danger) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --danger-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-danger) max(l, 0.7) c h), oklch(from var(--dl-danger) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h); --danger-on-soft: light-dark(color(from var(--dl-danger-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --danger-line: light-dark(color(from var(--dl-danger-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-info-under: color-mix(in srgb-linear, color(from var(--info-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-info-text: color-mix(in srgb-linear, color(from var(--dl-info-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-info-line: color-mix(in srgb-linear, color(from var(--info) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --info-solid: var(--dl-info); --info-on-solid: color(from var(--dl-info) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --info-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-info) max(l, 0.7) c h), oklch(from var(--dl-info) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h); --info-on-soft: light-dark(color(from var(--dl-info-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --info-line: light-dark(color(from var(--dl-info-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-brand-hover: color-mix(in srgb-linear, color(from light-dark(oklch(from var(--brand-on-soft) calc(l - 0.08) c h), oklch(from var(--brand-on-soft) calc(l + 0.08) c h)) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (7 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (7 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); /* ---- Ungrouped: components use these; .is-{group} points them at a group ---- */ --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); /* ---- Deprecated: --accent's tokens, renamed --secondary-*. They still work; rename them ---- */ --accent-solid: var(--secondary-solid); /* deprecated: use --secondary-solid */ --accent-on-solid: var(--secondary-on-solid); /* deprecated: use --secondary-on-solid */ --accent-soft: var(--secondary-soft); /* deprecated: use --secondary-soft */ --accent-on-soft: var(--secondary-on-soft); /* deprecated: use --secondary-on-soft */ --accent-line: var(--secondary-line); /* deprecated: use --secondary-line */ } .is-brand { --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); } .is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } .is-neutral { --solid: var(--neutral-solid); --on-solid: var(--neutral-on-solid); --soft: var(--neutral-soft); --on-soft: var(--neutral-on-soft); --line: var(--neutral-line); } .is-success { --solid: var(--success-solid); --on-solid: var(--success-on-solid); --soft: var(--success-soft); --on-soft: var(--success-on-soft); --line: var(--success-line); } .is-warning { --solid: var(--warning-solid); --on-solid: var(--warning-on-solid); --soft: var(--warning-soft); --on-soft: var(--warning-on-soft); --line: var(--warning-line); } .is-danger { --solid: var(--danger-solid); --on-solid: var(--danger-on-solid); --soft: var(--danger-soft); --on-soft: var(--danger-on-soft); --line: var(--danger-line); } .is-info { --solid: var(--info-solid); --on-solid: var(--info-on-solid); --soft: var(--info-soft); --on-soft: var(--info-on-soft); --line: var(--info-line); } .is-accent { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } /* deprecated: use .is-secondary */ /* A light or dark band: its own scheme, and its own background and text worked out in it */ .is-light { color-scheme: light; background-color: var(--surface); color: var(--text); } .is-dark { color-scheme: dark; background-color: var(--surface); color: var(--text); } /* ============================================================ Dials: type and space (dials-scale.css) A few dials set every text size and every space size, the way Utopia (utopia.fyi) works them out, but the maths runs in the browser: change a dial and the whole scale follows. Leading is worked out the same way, for whatever size it's used at. This file sets no type on any element: only dials-base.css does that. Dials live on :root (and :host); the derived scale is declared on :root, [data-dials] and :host, so a dial set on a [data-dials] element re-derives the sizes inside it. ============================================================ */ :root, :host { /* ---- Dials ---- */ --screen-min: 360; /* the screen widths the scale runs between, in px */ --screen-max: 1240; --size-min: 16; /* body text at the narrowest and widest screens, in px */ --size-max: 18; --ratio-min: 1.2; /* each step is this much bigger than the last: 1.2 minor third, */ --ratio-max: 1.25; /* 1.25 major third, 1.333 perfect fourth, 1.5 fifth, 1.618 golden */ --space-min: var(--size-min); /* --space-s at each end, in px: follows body text */ --space-max: var(--size-max); /* size unless you set a number */ --space-density: 1; /* scales every space size: 0.8 compact, 1.25 roomy */ --radius-base: 10; /* corner radius of cards and fields, in px (a number, not a length) */ /* Faces: set per site, and load them yourself (each theme file names its Google Fonts link) */ --font-body: ui-sans-serif, system-ui, sans-serif; /* body text and controls */ --font-heading: ui-sans-serif, system-ui, sans-serif; /* headings */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code, kbd, samp, pre */ /* Border widths: every border and outline uses one of these */ --border-width-s: 1px; /* hairlines: cards, fields, tables */ --border-width-m: 2px; /* emphasis; outline offsets */ --border-width-l: 3px; /* focus rings, quote bars, active tabs */ /* ---- Leading: one dial for the rhythm of the type ---- */ /* --leading-body: 1.5; line height at body size (--size-0), unitless. Every larger size keeps the same gap between lines, so it gets proportionally tighter; the space after paragraphs is one body line */ /* --font-accent: var(--font-body); a third face, for ledes, pull quotes or buttons; read it as var(--font-accent, var(--font-body)) */ } :root, [data-dials], :host { /* ---- Internal: worked out from the dials, never edited by hand ---- */ --dl-screen-range: calc(var(--screen-max) - var(--screen-min)); --dl-fluid: calc((100vw - var(--screen-min) * 1px) / var(--dl-screen-range) * 16); /* 0 at the narrowest, 16px at the widest */ --dl-min-0: calc(var(--size-min) / 16); --dl-max-0: calc(var(--size-max) / 16); --dl-min--1: calc(var(--dl-min-0) / var(--ratio-min)); --dl-max--1: calc(var(--dl-max-0) / var(--ratio-max)); --dl-min--2: calc(var(--dl-min--1) / var(--ratio-min)); --dl-max--2: calc(var(--dl-max--1) / var(--ratio-max)); --dl-min-1: calc(var(--dl-min-0) * var(--ratio-min)); --dl-max-1: calc(var(--dl-max-0) * var(--ratio-max)); --dl-min-2: calc(var(--dl-min-1) * var(--ratio-min)); --dl-max-2: calc(var(--dl-max-1) * var(--ratio-max)); --dl-min-3: calc(var(--dl-min-2) * var(--ratio-min)); --dl-max-3: calc(var(--dl-max-2) * var(--ratio-max)); --dl-min-4: calc(var(--dl-min-3) * var(--ratio-min)); --dl-max-4: calc(var(--dl-max-3) * var(--ratio-max)); --dl-min-5: calc(var(--dl-min-4) * var(--ratio-min)); --dl-max-5: calc(var(--dl-max-4) * var(--ratio-max)); --dl-min-6: calc(var(--dl-min-5) * var(--ratio-min)); --dl-max-6: calc(var(--dl-max-5) * var(--ratio-max)); --dl-min-7: calc(var(--dl-min-6) * var(--ratio-min)); --dl-max-7: calc(var(--dl-max-6) * var(--ratio-max)); --dl-min-8: calc(var(--dl-min-7) * var(--ratio-min)); --dl-max-8: calc(var(--dl-max-7) * var(--ratio-max)); /* ---- Font sizes: --size-0 is body text; each number up or down is one step of the ratio, running in a straight line between its two ends ---- */ --size--2: clamp(min(var(--dl-min--2), var(--dl-max--2)) * 1rem, var(--dl-min--2) * 1rem + (var(--dl-max--2) - var(--dl-min--2)) * var(--dl-fluid), max(var(--dl-min--2), var(--dl-max--2)) * 1rem); --size--1: clamp(min(var(--dl-min--1), var(--dl-max--1)) * 1rem, var(--dl-min--1) * 1rem + (var(--dl-max--1) - var(--dl-min--1)) * var(--dl-fluid), max(var(--dl-min--1), var(--dl-max--1)) * 1rem); --size-0: clamp(min(var(--dl-min-0), var(--dl-max-0)) * 1rem, var(--dl-min-0) * 1rem + (var(--dl-max-0) - var(--dl-min-0)) * var(--dl-fluid), max(var(--dl-min-0), var(--dl-max-0)) * 1rem); --size-1: clamp(min(var(--dl-min-1), var(--dl-max-1)) * 1rem, var(--dl-min-1) * 1rem + (var(--dl-max-1) - var(--dl-min-1)) * var(--dl-fluid), max(var(--dl-min-1), var(--dl-max-1)) * 1rem); --size-2: clamp(min(var(--dl-min-2), var(--dl-max-2)) * 1rem, var(--dl-min-2) * 1rem + (var(--dl-max-2) - var(--dl-min-2)) * var(--dl-fluid), max(var(--dl-min-2), var(--dl-max-2)) * 1rem); --size-3: clamp(min(var(--dl-min-3), var(--dl-max-3)) * 1rem, var(--dl-min-3) * 1rem + (var(--dl-max-3) - var(--dl-min-3)) * var(--dl-fluid), max(var(--dl-min-3), var(--dl-max-3)) * 1rem); --size-4: clamp(min(var(--dl-min-4), var(--dl-max-4)) * 1rem, var(--dl-min-4) * 1rem + (var(--dl-max-4) - var(--dl-min-4)) * var(--dl-fluid), max(var(--dl-min-4), var(--dl-max-4)) * 1rem); --size-5: clamp(min(var(--dl-min-5), var(--dl-max-5)) * 1rem, var(--dl-min-5) * 1rem + (var(--dl-max-5) - var(--dl-min-5)) * var(--dl-fluid), max(var(--dl-min-5), var(--dl-max-5)) * 1rem); --size-6: clamp(min(var(--dl-min-6), var(--dl-max-6)) * 1rem, var(--dl-min-6) * 1rem + (var(--dl-max-6) - var(--dl-min-6)) * var(--dl-fluid), max(var(--dl-min-6), var(--dl-max-6)) * 1rem); --size-7: clamp(min(var(--dl-min-7), var(--dl-max-7)) * 1rem, var(--dl-min-7) * 1rem + (var(--dl-max-7) - var(--dl-min-7)) * var(--dl-fluid), max(var(--dl-min-7), var(--dl-max-7)) * 1rem); /* display type */ --size-8: clamp(min(var(--dl-min-8), var(--dl-max-8)) * 1rem, var(--dl-min-8) * 1rem + (var(--dl-max-8) - var(--dl-min-8)) * var(--dl-fluid), max(var(--dl-min-8), var(--dl-max-8)) * 1rem); /* display type: the top of the scale */ /* ---- Leading: worked out for the size of the element it's used on ---- */ /* --leading is a length: apply it on each element that sets a font size (dials-base.css applies it to every element), never on a wrapper for its children to inherit, where it would pass on one fixed length. */ --dl-leading-body: var(--leading-body, 1.5); /* the body's gap between lines at every larger size (1em + the body gap), so bigger text gets proportionally tighter lines; smaller text keeps the body ratio; no size goes below 1.05 */ --leading: max(1.05em, min(var(--dl-leading-body) * 1em, 1em + (var(--dl-leading-body) - 1) * var(--size-0))); /* line height for the size it's on: the same gap between lines as body text at every larger size */ --space-paragraph: calc(var(--dl-leading-body) * var(--size-0)); /* one body line: the space after paragraphs and other blocks; headings take two above and half below */ /* ---- Space: multiples of the space base (Utopia's t-shirt sizes), times the density ---- */ --dl-space-min: calc(var(--space-min) / 16 * var(--space-density)); --dl-space-max: calc(var(--space-max) / 16 * var(--space-density)); --space-3xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.25 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.25rem)); --space-2xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem)); --space-xs: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem)); --space-s: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem)); --space-m: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem)); --space-l: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem)); --space-xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem)); --space-2xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem)); --space-3xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem)); --space-4xl: clamp(calc(var(--dl-space-min) * 8rem), calc(var(--dl-space-min) * 8rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 8) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem)); /* One-up pairs: small on phones, the next size up on desktops */ --space-3xs-2xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem)); --space-2xs-xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem)); --space-xs-s: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem)); --space-s-m: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem)); --space-m-l: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem)); --space-l-xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem)); --space-xl-2xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem)); --space-2xl-3xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem)); --space-3xl-4xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem)); /* Skip pairs, for gutters and section padding that need a bigger swing */ --space-s-l: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem)); --space-m-xl: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem)); --space-l-2xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem)); /* ---- Corners ---- */ --radius-s: calc(var(--radius-base) * 0.5px); --radius-m: calc(var(--radius-base) * 1px); --radius-l: calc(var(--radius-base) * 1.6px); --radius-pill: 999px; } /* ============================================================ Dials: the fallback (src/fallback.css, built into the end of dials.css) For browsers with color-mix() but without relative colour or light-dark(): Chrome and Edge 111-122, Safari 16.2-17, Firefox 113-127. They can't work out the derived chain above, so this block works every public colour token out again from the same dials, with color-mix() alone. It comes after the chain and uses the same selectors, so it wins there; a site's own file, loaded after dials.css, still wins over it. It never sets a dial. Approximations, held to the same contrast as the chain (the contrast check's --fallback mode): - The page is light. .is-dark bands are dark, .is-light bands light. - Paper and ink come from --grey at fixed mixes, so the four lightness dials, --balance, --dark-lift, --tint-vividness and --text-contrast have no effect. --paper-light and friends do. - on-solid text can't follow the fill's luminance: each group has a fixed choice, and its fill is pulled a fixed amount towards the other end so the text keeps 4.5:1 in every Dials theme. White on brand, secondary, danger and info, whose fills are darkened; black on success, whose fill is lightened, and warning, as set. - Coloured text and lines can't move only as far as their target needs: on-soft is the dial mixed a fixed amount into ink (so --link and --focus too), line a smaller amount, and --link-hover further still. The amounts hold 4.5:1 and 3:1 on every surface and soft tint, for every theme and for extreme dials, so they over-shoot for most colours. Ink is near-black on a light page and near-white in an .is-dark band, so the same mix works in both. - No calc() and no percentages computed inside color-mix(): only literal percentages and dials that are one (--tint-strength). ============================================================ */ @supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) { /* ---- Internal: the scheme switches, literal percentages a band can flip ---- */ :root, :host, .is-light { color-scheme: light; --dl-fb-dark: 0%; /* how much of the dark paper and ink to use */ --dl-fb-raise: 38%; /* how much white lifts --surface-raised */ --dl-fb-shadow: 10%; /* the strength of shadows */ } .is-dark { color-scheme: dark; --dl-fb-dark: 100%; --dl-fb-raise: 4%; --dl-fb-shadow: 45%; } /* Bands are declared here too, so every token is worked out again in a band's own scheme */ :root, [data-dials], :host, .is-light, .is-dark { /* ---- Internal: paper, ink and the six fills ---- */ --dl-paper-light: var(--paper-light, color-mix(in oklab, var(--grey) 20%, white)); --dl-paper-dark: var(--paper-dark, color-mix(in oklab, var(--grey) 30%, black)); --dl-ink-light: var(--ink-light, color-mix(in oklab, var(--grey) 34%, black)); --dl-ink-dark: var(--ink-dark, color-mix(in oklab, var(--grey) 17%, white)); --dl-paper: color-mix(in oklab, var(--dl-paper-dark) var(--dl-fb-dark), var(--dl-paper-light)); --dl-ink: color-mix(in oklab, var(--dl-ink-dark) var(--dl-fb-dark), var(--dl-ink-light)); --dl-brand: color-mix(in oklab, var(--brand) 72%, black); --dl-secondary: color-mix(in oklab, var(--accent, var(--secondary)) 67%, black); --dl-success: color-mix(in oklab, var(--success) 85%, white); --dl-warning: var(--warning); --dl-danger: color-mix(in oklab, var(--danger) 78%, black); --dl-info: color-mix(in oklab, var(--info) 61%, black); /* ---- Surfaces ---- */ --surface: var(--dl-paper); --surface-raised: color-mix(in oklab, white var(--dl-fb-raise), var(--dl-paper)); --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper)); --surface-sunken: color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper)); --surface-overlay: color-mix(in oklab, black 45%, transparent); /* ---- Text: a step stronger than the chain's defaults, to cover --text-contrast ---- */ --text-strong: var(--dl-ink); --text: color-mix(in oklab, var(--dl-ink) 94%, var(--dl-paper)); --text-muted: color-mix(in oklab, var(--dl-ink) 89%, var(--dl-paper)); --text-quiet: color-mix(in oklab, var(--dl-ink) 86%, var(--dl-paper)); --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper)); --link: var(--brand-on-soft); --link-hover: color-mix(in oklab, var(--brand) 20%, var(--dl-ink)); /* ---- Lines and effects ---- */ --border-quiet: color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper)); --border: color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper)); --border-strong: color-mix(in oklab, var(--dl-ink) 64%, var(--dl-paper)); --focus: var(--brand-on-soft); --selection: color-mix(in oklab, var(--brand) 22%, var(--dl-paper)); --shadow-color: color-mix(in oklab, black var(--dl-fb-shadow), transparent); --shadow-s: 0 1px 3px var(--shadow-color); --shadow-m: 0 4px 14px var(--shadow-color); --shadow-l: 0 12px 32px var(--shadow-color); --mix-hover: black 12%; --mix-active: black 22%; /* ---- Groups: soft mixed into paper, on-soft and line mixed towards ink ---- */ --brand-solid: var(--dl-brand); --brand-on-solid: white; --brand-soft: color-mix(in oklab, var(--brand) var(--tint-strength), var(--dl-paper)); --brand-on-soft: color-mix(in oklab, var(--brand) 26%, var(--dl-ink)); --brand-line: color-mix(in oklab, var(--brand) 40%, var(--dl-ink)); --secondary-solid: var(--dl-secondary); --secondary-on-solid: white; --secondary-soft: color-mix(in oklab, var(--accent, var(--secondary)) var(--tint-strength), var(--dl-paper)); --secondary-on-soft: color-mix(in oklab, var(--accent, var(--secondary)) 26%, var(--dl-ink)); --secondary-line: color-mix(in oklab, var(--accent, var(--secondary)) 40%, var(--dl-ink)); --neutral-solid: var(--dl-ink); --neutral-on-solid: var(--dl-paper); --neutral-soft: var(--surface-lowered); --neutral-on-soft: var(--text); --neutral-line: var(--border); --success-solid: var(--dl-success); --success-on-solid: black; --success-soft: color-mix(in oklab, var(--success) var(--tint-strength), var(--dl-paper)); --success-on-soft: color-mix(in oklab, var(--success) 26%, var(--dl-ink)); --success-line: color-mix(in oklab, var(--success) 40%, var(--dl-ink)); --warning-solid: var(--dl-warning); --warning-on-solid: black; --warning-soft: color-mix(in oklab, var(--warning) var(--tint-strength), var(--dl-paper)); --warning-on-soft: color-mix(in oklab, var(--warning) 26%, var(--dl-ink)); --warning-line: color-mix(in oklab, var(--warning) 40%, var(--dl-ink)); --danger-solid: var(--dl-danger); --danger-on-solid: white; --danger-soft: color-mix(in oklab, var(--danger) var(--tint-strength), var(--dl-paper)); --danger-on-soft: color-mix(in oklab, var(--danger) 26%, var(--dl-ink)); --danger-line: color-mix(in oklab, var(--danger) 40%, var(--dl-ink)); --info-solid: var(--dl-info); --info-on-solid: white; --info-soft: color-mix(in oklab, var(--info) var(--tint-strength), var(--dl-paper)); --info-on-soft: color-mix(in oklab, var(--info) 26%, var(--dl-ink)); --info-line: color-mix(in oklab, var(--info) 40%, var(--dl-ink)); /* ---- Ungrouped ---- */ --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); /* ---- Deprecated: the old names for the secondary group ---- */ --accent-solid: var(--secondary-solid); --accent-on-solid: var(--secondary-on-solid); --accent-soft: var(--secondary-soft); --accent-on-soft: var(--secondary-on-soft); --accent-line: var(--secondary-line); } /* the group classes again, so they still win on a [data-dials] element or a band */ .is-brand { --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); } .is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } .is-neutral { --solid: var(--neutral-solid); --on-solid: var(--neutral-on-solid); --soft: var(--neutral-soft); --on-soft: var(--neutral-on-soft); --line: var(--neutral-line); } .is-success { --solid: var(--success-solid); --on-solid: var(--success-on-solid); --soft: var(--success-soft); --on-soft: var(--success-on-soft); --line: var(--success-line); } .is-warning { --solid: var(--warning-solid); --on-solid: var(--warning-on-solid); --soft: var(--warning-soft); --on-soft: var(--warning-on-soft); --line: var(--warning-line); } .is-danger { --solid: var(--danger-solid); --on-solid: var(--danger-on-solid); --soft: var(--danger-soft); --on-soft: var(--danger-on-soft); --line: var(--danger-line); } .is-info { --solid: var(--info-solid); --on-solid: var(--info-on-solid); --soft: var(--info-soft); --on-soft: var(--info-on-soft); --line: var(--info-line); } .is-accent { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } } /* Generated by tools/fallback.mjs from dials.css (src/colour.css 8cab4e67a684f482): the defaults in the light scheme. Don't edit. The last resort, for browsers without color-mix() (Chrome and Edge before 111, Safari before 16.2, Firefox before 113, all 2022 or older): they can't work anything out, so every colour token is flat and they get the house colours, light only. Colour dials have no effect there; type and space work as normal. */ @supports not (color: color-mix(in srgb, red, blue)) { :root, [data-dials], :host, .is-light, .is-dark { color-scheme: light; --surface: #f9fafc; --surface-raised: #feffff; --surface-lowered: #eef0f2; --surface-sunken: #e4e5e7; --surface-overlay: rgb(0 0 0 / 45%); --text-strong: #151619; --text: #2f3033; --text-muted: #505154; --text-quiet: #5d5e61; --text-disabled: #999a9d; --link: #2362e9; --link-hover: #0743c2; --border-quiet: #e7e8ea; --border: #d7d8db; --border-strong: #86878a; --focus: #2362e9; --selection: #c9dbfc; --shadow-color: rgb(0 0 0 / 10%); --shadow-s: 0 1px 3px rgb(0 0 0 / 10%); --shadow-m: 0 4px 14px rgb(0 0 0 / 10%); --shadow-l: 0 12px 32px rgb(0 0 0 / 10%); --mix-hover: black 12%; --mix-active: black 22%; --brand-solid: #2463eb; --brand-on-solid: #ffffff; --brand-soft: #e9f1ff; --brand-on-soft: #2362e9; --brand-line: #2463eb; --secondary-solid: #7c51c8; --secondary-on-solid: #ffffff; --secondary-soft: #f1eefc; --secondary-on-soft: #7c51c8; --secondary-line: #7c51c8; --neutral-solid: #151619; --neutral-on-solid: #f9fafc; --neutral-soft: #eef0f2; --neutral-on-soft: #2f3033; --neutral-line: #d7d8db; --success-solid: #239f50; --success-on-solid: #000000; --success-soft: #eaf4eb; --success-on-soft: #197c3d; --success-line: #229c4f; --warning-solid: #f59f0a; --warning-on-solid: #000000; --warning-soft: #faf1e7; --warning-on-soft: #976003; --warning-line: #bd7906; --danger-solid: #dc2828; --danger-on-solid: #ffffff; --danger-soft: #ffece9; --danger-on-soft: #d02525; --danger-line: #dc2828; --info-solid: #0c8eca; --info-on-solid: #000000; --info-soft: #e9f2f9; --info-on-soft: #0773a4; --info-line: #0c8eca; --accent-solid: #7c51c8; --accent-on-solid: #ffffff; --accent-soft: #f1eefc; --accent-on-soft: #7c51c8; --accent-line: #7c51c8; } } /* ═══ dials:end (Dials) ═════════════════════════════════════════════════ */ /* ═══ This site's dials ═════════════════════════════════════════════════ * The ONLY place a colour or a scale value is typed. The values reproduce * Victoria Road's look before Dials: the amber, the gold and the light gold, * the cream page and the dark-brown text, and its type and space knobs. * ═══════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* light only: the site is designed for its cream page, and has no dark palette */ /* Colour dials, each the site's own hex written as HSL to one decimal * place, which paints that hex exactly. Each is a group with five roles: * --brand-solid, --brand-on-solid, --brand-soft, --brand-on-soft and * --brand-line. */ --brand: hsl(33.8 83.2% 35.1%); /* #A4630F, the amber: buttons, links, labels, the focus ring. Dark enough for white text (4.8:1) */ --secondary: hsl(37.7 100% 42.2%); /* #D78700, the gold: button hovers (black text on it, 7.4:1), headings and icons on the dark brown */ --tertiary: hsl(43.9 77% 82.9%); /* #F5E3B2, the light gold: panel and card grounds, with dark-brown text */ --success: hsl(142.1 76.2% 36.3%); /* the contact form's sent message: the green it had */ --warning: hsl(37 74% 54%); /* not used on this site: the template's */ --danger: hsl(0 84.2% 60.2%); /* the contact form's error message: the red it had */ --info: hsl(202 64% 41%); /* not used on this site: the template's */ --grey: hsl(30.7 54.4% 15.5%); /* the dark brown's hue: paper and ink are exact below */ /* Paper and ink, exact: the cream page, and the dark brown that every * heading, the body text, the top bar and the footer are set in. */ --paper-light: hsl(40 88.2% 96.7%); /* #FEF9EF, cream */ --ink-light: hsl(30.7 54.4% 15.5%); /* #3D2812, dark brown */ /* A warm brown ink on a warm cream sits a little closer than Dials' * mixes assume: at 0 the field and control border measured 2.89:1 and * the quietest text 4.43:1 on the lowered surface. 2 strengthens body, * muted and quiet text and strong borders just past 3:1 and 4.5:1. */ --text-contrast: 2; /* Type and space, the same scale as before: body text 16px from a 390px * phone to 1440, each step 1.13x (phone) to 1.2x (desktop) the last, so * the 48px section headings are --size-6 and the 66px hero title * --size-8 at 1440. --space-s 16px to 20px: the site's 10/15/20/30/40/ * 60/80/120 rhythm at 1440. */ --screen-min: 390; --screen-max: 1440; --size-min: 16; --size-max: 16; --ratio-min: 1.13; --ratio-max: 1.2; --space-min: 16; --space-max: 20; --space-density: 1; /* Line height (Dials v0.4): --leading-body, body text at 1.5. The site * sets line height by role, not by size, so its rules read the role * tokens below rather than Dials' size curve (--leading), which would * loosen every heading and tighten every paragraph. Weights and letter * spacing are plain values on the rules: Mulish 400 for body and 500 for * the ledes; Rethink Sans 600 for the nav and labels, 700 for headings * and buttons, 800 for the display numerals. Letter spacing is one of * four: -0.025em on large headings (--size-4 and up), -0.015em on * smaller ones, 0.05em on buttons and the top bar, 0.08em on labels in * capitals. */ --leading-body: 1.5; --leading-headline: 1.12; /* headings: the h1-h4 base rule, the hero title, section and card titles */ --leading-title: 1.22; /* sub-headings and short headed lines */ --leading-snug: 1.32; /* ledes, card copy, labels */ --leading-copy: 1.62; /* running copy */ --leading-relaxed: 1.7; /* long-form copy: the legal and policy pages, the doctor's bio */ --leading-mark: 0.5; /* the doctor's quote mark, a large glyph hung above its line */ /* Corners: --radius-m 14px (panels, the hero, cards), --radius-s 7px, * --radius-l 22.4px; the 12px photo and card corner is --radius-card * below. */ --radius-base: 14; /* Accent rules and active states are 4px, as before, not Dials' 3px */ --border-width-l: 4px; /* Faces, loaded in each page's head from Google Fonts */ --font-body: 'Mulish', sans-serif; --font-heading: 'Rethink Sans', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── The tertiary group ─────────────────────────────────────────────────── * A third brand colour, typically doing button and CTA work, that is neither * a tint of the brand nor a status colour (practices routinely have one: * "Button Brown", "Morning Orange"). Dials has no third brand group, so the * template adds one with the same five roles, worked out the way Dials v0.2.0 * works out its own groups (each formula is Dials' brand formula with the * tertiary colour in it), from public tokens only. Set --tertiary above; * never set these. class="is-tertiary" points --solid and friends at it, * like .is-secondary. Declared on bands too, so a band's group follows the * band's own scheme. * * --tertiary-on-soft the fill, moved only as far as 4.5:1 needs on the * least contrasting of its soft tint, --surface-lowered * and --surface-raised; a colour that passes is kept * --tertiary-line the dial, moved only as far as 3:1 needs, the same way * * Dials carries the numbers those two need in its internal --dl-* plumbing, * which nothing outside Dials may read, so the template works the same * numbers out again from public tokens in its own --tpl-* properties: the * luminance of --surface-lowered and --surface-raised (Dials' --dl-surfaces-y) * and of the soft tint, and the colour carrying its target. They are the * template's plumbing: never use or set a --tpl-* property anywhere else. */ :root, [data-dials], .is-light, .is-dark { --tpl-tertiary-base: oklch(from var(--tertiary) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h); --tertiary-solid: light-dark(var(--tpl-tertiary-base), oklch(from var(--tpl-tertiary-base) calc(l + var(--dark-lift)) c h)); --tertiary-on-solid: color(from var(--tertiary-solid) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --tertiary-soft: oklch(from color-mix(in oklab, light-dark(oklch(from var(--tertiary-solid) max(l, 0.7) c h), oklch(from var(--tertiary-solid) min(l, 0.6) c h)) var(--tint-strength), oklch(from var(--surface) l 0 h)) l calc(c * var(--tint-vividness)) h); --tpl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)))); --tpl-tertiary-under: color-mix(in srgb-linear, color(from var(--tertiary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--tpl-surfaces-y)); --tpl-tertiary-text: color-mix(in srgb-linear, color(from var(--tpl-tertiary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --tpl-tertiary-line: color-mix(in srgb-linear, color(from var(--tertiary) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --tertiary-on-soft: light-dark(color(from var(--tpl-tertiary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --tertiary-line: light-dark(color(from var(--tpl-tertiary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); } .is-tertiary { --solid: var(--tertiary-solid); --on-solid: var(--tertiary-on-solid); --soft: var(--tertiary-soft); --on-soft: var(--tertiary-on-soft); --line: var(--tertiary-line); } /* The tertiary group in older browsers: without relative colour or * light-dark() (iOS 16 and 17, Safari before 18, Chrome and Edge before 123, * Firefox before 128) the derivation above cannot be worked out, and Dials' * own fallback covers only Dials' groups. So, the way Dials' fallback does * its groups, under the same condition and with the same selectors as the * derivation: the five roles again with color-mix(in oklab, ...) alone, from * --tertiary and the paper (--surface) and ink (--text-strong) Dials' * fallback has already worked out. As in Dials v0.2.0's fallback, on-soft is * the colour mixed 26% into ink and the line 40% into ink; neither can move * only as far as it needs there, so both over-shoot for most colours. Text * on the fill is a fixed white, with the fill pulled towards black as Dials * pulls --brand (72%), so it keeps 4.5:1. A site with a very light * --tertiary checks it: check-contrast.mjs --fallback. */ @supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) { :root, [data-dials], .is-light, .is-dark { --tertiary-solid: color-mix(in oklab, var(--tertiary) 72%, black); --tertiary-on-solid: white; --tertiary-soft: color-mix(in oklab, var(--tertiary) var(--tint-strength), var(--surface)); --tertiary-on-soft: color-mix(in oklab, var(--tertiary) 26%, var(--text-strong)); --tertiary-line: color-mix(in oklab, var(--tertiary) 40%, var(--text-strong)); } } /* The light gold in older browsers. The template's tertiary fallback pulls * the fill 72% towards black and puts white on it, which suits a dark third * colour; this one is a pale panel ground (mf-websites#438). Here the fill * stays the light gold with black on it, as the modern browsers paint it * (Dials' own fallback rule: a fixed white or black on-solid). The site's * panels set dark-brown text on it, which passes there too. */ @supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) { :root, [data-dials], .is-light, .is-dark { --tertiary-solid: var(--tertiary); --tertiary-on-solid: black; } } /* ── The site's own tokens ──────────────────────────────────────────────── * What Dials does not cover: the measure, the grid, the corners beyond * Dials' three, the tap target, layers and motion, and the few shades this * site derives from its dials. None of them is a typed colour, a text size * or a space size. */ :root { /* --- Measure ------------------------------------------------------- */ --measure: 65ch; /* body copy, where a container asks for it */ --measure-tight: 45ch; /* card and caption copy */ /* --- Grid ---------------------------------------------------------- */ --grid-max-width: 77.5rem; --grid-gutter: var(--space-s-l); --grid-columns: 12; /* --- Corners beyond Dials' three ----------------------------------- */ --radius-xs: calc(var(--radius-base) * 0.333px); /* tags, inline chips, the focus ring: a third of --radius-m, so it follows --radius-base */ --radius-card: calc(var(--radius-base) * 0.857px); /* 12px: photos, cards and buttons-in-cards, a step inside the 14px panels */ --radius-round: 50%; /* avatars */ --control-radius: var(--radius-pill); /* buttons AND fields: every button here is a pill */ /* --- Touch targets ------------------------------------------------- */ --target-min: 2.75rem; /* 44px (WCAG 2.5.5): a fixed dimension, not spacing */ /* --- Layers -------------------------------------------------------- */ --layer-ground: 0; /* a flat layer for stacking contexts the site resets to 0 */ --layer-behind: -1; --layer-base: 1; --layer-raised: 2; --layer-nav: 3; --layer-overlay: 4; --layer-modal: 5; --layer-top: 2147483647; /* --- Motion -------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 220ms; --duration-slow: 400ms; --ease: cubic-bezier(.23, 1, .32, 1); /* the site's own ease, on its reveals and hovers */ --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; /* --- Shades derived from the dials ----------------------------------- */ /* The tan of image placeholders and hairline rules (#E6CF9C before): * the light gold a step towards the amber (#E8CE9A). Decoration, no text on it. */ --tan: color-mix(in oklab, var(--tertiary-solid) 84%, var(--brand-solid)); /* The hero's ground before its photo loads (#B58A4E before): the amber * lifted towards the light gold (#BC8748). Decoration: the photo covers it. */ --hero-fallback: color-mix(in oklab, var(--brand-solid) 71%, var(--tertiary-solid)); /* The doctor's avatar when there is no photo: amber into gold, under a * white outline figure. Decoration only, no text on it. */ --avatar-band: linear-gradient(in oklab 135deg, var(--brand-solid), var(--secondary-solid)); /* Coloured text: the amber as Dials deepens it for the page * (--brand-on-soft, #9C5E0E). On a light-gold panel that is 4.1:1, so * the panels re-set --amber-text to the same amber 15% towards the dark * brown (4.8:1 on the light gold, 5.8:1 on cream). */ --amber-text: var(--brand-on-soft); --amber-on-gold: color-mix(in oklab, var(--brand-on-soft) 85%, var(--text-strong)); /* Masks read alpha only: any opaque token cuts the same shape. */ --mask-opaque: var(--text-strong); } /* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════ * A text field's look, and every focus ring on the site, are set ONCE, * here: by the --field-* and --focus-ring* tokens and a few base rules. * Every text-like control on the site (contact, search, careers, booking, * anything mediflare.js or Connect writes) inherits it, so they match by * construction. * * - This section is copied VERBATIM from _template and never edited in a * site: check-system.sh fails the site if its copy differs by a character. * A site differs only in TOKEN VALUES, set in the site layer's own :root, * below this section (a later :root wins over the defaults here). * - Never restyle a control inside a component. A component rule may place * a field (grid, margin, width) but never sets its border, radius, * background or height -- check-system.sh fails the site if one does. * - Fields and buttons share ONE corner, --control-radius: set it in the * site layer's :root and both follow. Never set --field-radius * (check-system.sh fails it), except to 0px in underline mode below; * pill buttons mean pill fields. * - The base rules are at zero specificity (:where), so any token change * reaches every field and nothing here outranks a deliberate override. * - ONE focus ring per site, on links, buttons and fields alike: an outline * in --focus-ring at --focus-ring-w. No other rule sets a focus outline, * colour or box-shadow (check-system.sh fails one); outline-offset may be * adjusted where a ring would be clipped. * - Underline-only fields: set --field-border-w: 0, * --field-border-bottom: var(--border-width-s) solid and * --field-radius: 0px (an underline has no corners to share; a rounded * one curves at its ends, and buttons keep --control-radius); optionally * --field-focus-border-bottom: var(--focus-ring-w) solid var(--focus-ring) * so the underline thickens with the ring. No extra rules. Underline * mode is the only time a site sets --field-radius, and check-system.sh * then requires the 0px. * - Colours follow the band. The colour tokens are declared on the page * AND on every .is-light/.is-dark band and [data-dials] scope, as Dials * declares its own: a browser on Dials' fallback (no relative colour) * works a token out once per scope, so declared on :root alone a field * in a dark band kept the light page's border and ring. A site that * changes a field COLOUR sets it on the same four selectors, after this * section (:root, [data-dials], .is-light, .is-dark { --field-...: ... }), * or a band keeps the default. Sizes are set on :root only. * - A panel on a ground that is not a Dials surface (a brand fill) re-sets * the leaf colour tokens on the container, never the rules: * .brand-panel { * --focus-ring: var(--brand-on-solid); * --field-border: var(--brand-on-solid); * } * --focus-ring must reach >= 3:1 against every ground it is drawn on. * The guard finds this section by the begin/end markers; keep both. * ═══════════════════════════════════════════════════════════════════════ */ :root { --field-h: var(--target-min); /* the single-line height: exact, never below the 44px target */ --field-textarea-h: calc(var(--field-h) * 3); /* the textarea's minimum height */ --field-pad-block: var(--space-2xs); /* textarea only; a one-line field centres its text in --field-h */ --field-pad-inline: var(--space-xs); --field-font-size: max(var(--size-0), 1rem); /* never below 16px, or iOS zooms the page on focus */ --field-leading: var(--leading); /* Dials' leading, worked out at the field's own size */ --field-weight: 400; /* one weight wherever the field sits */ --field-label-weight: 600; /* the label's weight: the site's emphasis weight */ --field-radius: var(--control-radius); /* = the .btn radius, by construction; never set it */ --field-textarea-radius: min(var(--field-radius), var(--radius-l)); /* a pill textarea is a capsule; cap it */ --field-border-w: var(--border-width-s); /* Unset by default, so they follow --field-border-w/--field-border: * --field-border-bottom the resting bottom edge (underline mode) * --field-focus-border-bottom the bottom edge while focused * --field-focus-outline the field's ring; leave it to the default */ --focus-ring-w: var(--border-width-m); /* >= --field-border-w, so the ring covers the border */ } /* The colours, on the bands too (see above). */ :root, [data-dials], .is-light, .is-dark { --field-bg: var(--surface-raised); /* fields sit on the raised surface, as cards do */ --field-ink: var(--text); --field-border: var(--border-strong); /* Dials' control border: 3:1 on every surface */ --field-border-hover: var(--text-quiet); --field-placeholder: var(--text-quiet); --focus-ring: var(--focus); /* Dials' focus ring: >= 3:1 on every surface, light and dark */ } /* THE focus ring: every interactive element, always. Fields refine the * offset and radius below; nothing else sets a focus outline. */ :focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } label { display: block; margin-bottom: var(--space-3xs); font-size: var(--size--1); font-weight: var(--field-label-weight); line-height: var(--leading); color: var(--text-strong); } /* THE base rule. Every text-like control: text, email, tel, search, number, * date, url, password, select and textarea -- not checkboxes, radios, * ranges, files or button-type inputs. */ :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea) { --_field-radius: var(--field-radius); appearance: none; box-sizing: border-box; width: 100%; height: var(--field-h); min-height: var(--field-h); padding: 0 var(--field-pad-inline); font: inherit; font-size: var(--field-font-size); font-weight: var(--field-weight); line-height: var(--field-leading); color: var(--field-ink); background-color: var(--field-bg); border: var(--field-border-w) solid var(--field-border); border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border)); border-radius: var(--_field-radius); box-shadow: none; transition: border-color var(--duration-fast) var(--ease-out); } :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):hover { border-color: var(--field-border-hover); } /* One edge on focus. The offset pulls the ring in by the border's width, so * it is drawn ON the border (covering it) rather than outside it; the border * and shadow are held at rest so nothing draws a second edge. Specificity * 0,1,0 and later than the global :focus-visible, so it wins over that one * (whose offset and radius suit links, not fields). In underline mode the * bottom edge may take --field-focus-border-bottom as well. */ :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus { border-color: var(--field-border); border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border)); box-shadow: none; outline: none; } :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus-visible { outline: var(--field-focus-outline, var(--focus-ring-w) solid var(--focus-ring)); outline-offset: calc(var(--field-border-w) * -1); border-bottom: var(--field-focus-border-bottom, var(--field-border-bottom, var(--field-border-w) solid var(--field-border))); border-radius: var(--_field-radius); } :where(textarea) { --_field-radius: var(--field-textarea-radius); height: auto; min-height: var(--field-textarea-h); padding-block: var(--field-pad-block); resize: vertical; } /* The chevron is one conic-gradient wedge in --field-ink: tokens only, no * image, so it recolours with the palette and the scheme. (Two half-square * linear gradients leave a seam where they meet.) */ :where(select) { padding-inline-end: calc(var(--field-pad-inline) * 2 + var(--space-xs)); background-image: conic-gradient(from -45deg at 50% 100%, var(--field-ink) 90deg, transparent 0); background-position: calc(100% - var(--field-pad-inline)) 50%; background-size: calc(var(--space-3xs) * 2.5) calc(var(--space-3xs) * 1.25); background-repeat: no-repeat; cursor: pointer; } :where(select[multiple], select[size]) { height: auto; padding-block: var(--field-pad-block); padding-inline-end: var(--field-pad-inline); background-image: none; } :where(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; } /* The browser's own clear (x) in a search box, redrawn as a mask so it takes * --field-ink instead of the browser's grey. */ :where(input[type=search])::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; inline-size: 1em; block-size: 1em; cursor: pointer; background-color: var(--field-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-solid); } fieldset { margin: 0 0 var(--space-m); padding: 0; border: 0; } /* ═══ form-controls:end (Form controls & focus) ═════════════════════════ */ /* Victoria Road's field look and focus ring, set here (after the section's * defaults, so these win); never restyle a control in a component. Cream * fields with the buttons' pill corner (--control-radius, shared by both) * and Dials' control border, a visible 3:1 edge (the old tan hairline was * 1.45:1). Focus is ONE ring on links, buttons and fields alike, Dials' * focus colour (the amber, deepened only as far as it needs); the * dark-brown bars and the hero re-set it to cream (below). */ :root { --field-pad-block: var(--space-xs); --field-pad-inline: var(--space-s); --field-leading: var(--leading-body); } :root, [data-dials], .is-light, .is-dark { --field-bg: var(--surface); --field-ink: var(--text-strong); --field-border: var(--border-strong); --field-border-hover: var(--border-strong); /* the fields never changed on hover */ --field-placeholder: var(--text-quiet); } /* Dark grounds: the amber ring measures 2.89:1 on the dark-brown top bar and * footer, and the hero's calls to action sit on its darkened photo. Cream * there, the site's own light ground. */ .top-bar, .site-footer, .hero__ctas, .hero__actions { --focus-ring: var(--surface); } *, *::before, *::after { box-sizing: border-box; } .hero, .about__image-inner, .service-card__image-inner, .doctor__image, .team-card__image-inner, .about-page-story__image, .about-page-story__image-inner, .about-page-standards__image, .about-page-standards__image-inner, .contact-map__embed, .doctors-intro__image, .doctor-card, .doctor-avatar, .new-patients__card, .new-patients__doctor-photo, .contact-info-card { isolation: isolate; } body { margin: 0; background: var(--surface); font-family: var(--font-body); color: var(--text-strong); -webkit-font-smoothing: antialiased; } a { color: var(--amber-text); text-decoration: none; } a:hover { color: var(--text-strong); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.025em; line-height: var(--leading-headline); 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(--size-4); } :where(h2) { font-size: var(--size-2); } :where(h3) { font-size: var(--size-1); } :where(h4) { font-size: var(--size-0); } :where(small) { font-size: var(--size--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(--brand-solid); color: var(--brand-on-solid); padding: calc(var(--space-3xs) * 2) var(--space-s); border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 700; font-size: var(--size--1); } .skip-link:focus { top: 16px; color: var(--brand-on-solid); } /* ---------------------------------------------------------------- Top bar ---------------------------------------------------------------- */ .top-bar { background: var(--neutral-solid); color: var(--neutral-on-solid); font-family: var(--font-heading); font-size: var(--size--1); letter-spacing: 0.05em; padding: var(--space-2xs) var(--space-l); display: flex; justify-content: space-between; gap: var(--space-s); border: none; } .top-bar > span:first-child { display: inline-flex; align-items: center; gap: var(--space-3xs); } .top-bar a { color: var(--neutral-on-solid); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3xs); } .top-bar a:hover { color: var(--secondary-solid); } .top-bar__contact { display: inline-flex; align-items: center; gap: var(--space-2xs); font-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(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); } /* ---------------------------------------------------------------- Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target-min); /* 44px tap target, every size and variant */ gap: var(--space-2xs); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; border-radius: var(--control-radius); white-space: nowrap; border: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn--primary { background: var(--brand-solid); color: var(--brand-on-solid); font-size: var(--size--1); padding: var(--space-xs) var(--space-m); } .btn--primary:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); } .btn--outline { border: 1px solid color-mix(in srgb, var(--text-strong) 30%, transparent); background: transparent; color: var(--text-strong); font-size: var(--size--1); padding: var(--space-xs) var(--space-m); } .btn--outline:hover { background: var(--brand-solid); color: var(--brand-on-solid); border-color: var(--brand-line); } /* The booking button is a .btn in all but name: the same 44px floor. */ .booking-button { min-block-size: var(--target-min); } .btn--small { font-size: var(--size--2); padding: var(--space-xs) calc(var(--space-xs) + var(--space-2xs)); } .btn--hero-primary { background: var(--brand-solid); color: var(--brand-on-solid); font-size: var(--size--1); padding: var(--space-xs) var(--space-m); } .btn--hero-primary:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); } .btn--hero-outline { border: 1px solid color-mix(in srgb, var(--surface) 50%, transparent); background: transparent; color: var(--surface); font-size: var(--size--1); padding: var(--space-xs) var(--space-m); } .btn--hero-outline:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); border-color: var(--secondary-solid); } /* ---------------------------------------------------------------- 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-m); /* 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-m); 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-m); background: linear-gradient(100deg, color-mix(in srgb, var(--neutral-solid) 92%, transparent) 0%, color-mix(in srgb, var(--neutral-solid) 78%, transparent) 40%, color-mix(in srgb, var(--neutral-solid) 34%, transparent) 78%, color-mix(in srgb, var(--neutral-solid) 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(--surface); border-radius: var(--radius-m) 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(--surface) 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(--surface) 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(--size--1); font-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(--text-muted); 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-solid); --amber-text: var(--amber-on-gold); color: var(--text-strong); } .hero__nav a.active, .hero__nav a[aria-current="page"] { background: transparent; color: var(--secondary-solid); font-weight: 700; } .hero__actions { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-s) var(--space-s); flex-shrink: 0; } .hero__book-btn { background: var(--brand-solid); color: var(--brand-on-solid); font-family: var(--font-heading); font-size: var(--size--2); font-weight: 700; letter-spacing: 0.05em; padding: var(--space-xs) calc(var(--space-xs) + var(--space-2xs)); border-radius: var(--control-radius); white-space: nowrap; transition: background .15s ease, color .15s ease; } .hero__book-btn:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); } .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(--surface) 16%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 35%, transparent); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-xs); font-family: var(--font-heading); font-size: var(--size--2); font-weight: 700; letter-spacing: 0.08em; color: var(--surface); } .hero__title { font-size: var(--size-8); line-height: var(--leading-headline); font-weight: 700; letter-spacing: -0.025em; margin: var(--space-s) 0 0; color: var(--surface); } .hero__subtitle { font-family: var(--font-heading); font-size: var(--size-2); font-weight: 600; line-height: var(--leading-snug); margin: var(--space-s) 0 0; color: var(--tertiary-solid); } .hero__desc { font-size: var(--size-1); line-height: var(--leading-copy); color: color-mix(in srgb, var(--surface) 88%, transparent); margin: var(--space-xs) 0 0; max-width: 600px; } .hero__desc-lead { font-family: var(--font-heading); font-weight: 500; font-size: var(--size-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(--surface) 16%, transparent); color: var(--surface); font-family: var(--font-heading); font-size: var(--size--2); font-weight: 800; letter-spacing: 0.08em; padding: var(--space-3xs) calc(var(--space-3xs) * 2); border-radius: var(--radius-pill); } .hero__lang-text { font-size: var(--size--1); line-height: var(--leading-body); color: color-mix(in srgb, var(--surface) 75%, transparent); } .hero__ctas { display: flex; gap: calc(var(--space-3xs) * 2); align-items: center; margin-top: var(--space-l); flex-wrap: wrap; } /* 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-solid); --amber-text: var(--amber-on-gold); border-radius: var(--radius-card); color: var(--text-strong); } .hero__after-hours-title { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--size--1); font-weight: 800; letter-spacing: 0.08em; margin-bottom: var(--space-3xs); } .hero__after-hours p { font-size: var(--size--1); line-height: var(--leading-body); 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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-card); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m); } .hero__info-card p { font-size: var(--size--1); line-height: var(--leading-copy); color: var(--text); margin: 0; } /* Hero hours card (bottom-right) */ .hero__hours { position: absolute; right: -1px; bottom: -1px; background: var(--surface); border-radius: 24px 0 var(--radius-m) 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(--surface) 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(--surface) 24.5px); } .hero__hours-label { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--size--2); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); } .hero__hours-list { margin-top: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--size--1); } .hero__hours-note { font-size: var(--size--1); line-height: var(--leading-body); color: var(--text-muted); /* on the light gold: --text-quiet is 4.2:1 there */ 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(--size-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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-m); padding: calc(var(--space-xs) + var(--space-2xs)) var(--space-m) var(--space-m); } .hero__contact-form h2 { font-size: var(--size-0); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); 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(--size--2); margin-bottom: var(--space-3xs); color: var(--text-strong); } /* The hero form is the compact one: tighter padding and a two-line * message box. Tokens only; the look itself is Form controls'. */ .hero__contact-form-grid { --field-pad-block: var(--space-2xs); --field-pad-inline: var(--space-xs); --field-textarea-h: 70px; } .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(--size--2); line-height: var(--leading-body); color: var(--text-muted); /* on the light gold: --text-quiet is 4.2:1 there */ 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-m); 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 p { font-size: var(--size-1); line-height: var(--leading-copy); color: var(--text); max-width: 600px; } .contact-info-card { position: relative; border-radius: var(--radius-m); } .contact-info-card__bg { position: absolute; inset: 0; background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-m); } .contact-info-card__icon { position: absolute; right: 0; top: 0; width: 52px; height: 42px; background: var(--brand-solid); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; color: var(--brand-on-solid); 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(--size-0); font-weight: 700; margin: 0 0 var(--space-3xs); } .contact-info-card__body address, .contact-info-card__body p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); font-style: normal; } .contact-info-card__body a { color: var(--amber-text); } .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-m); 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-m); overflow: hidden; height: 160px; } .contact-extra__image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-extra__faq h2 { font-size: var(--size-4); margin: var(--space-xs) 0 0; } .contact-extra__faq-desc { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-solid); } .faq-item:last-child { border-bottom: 2px solid var(--tertiary-solid); } .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(--size-1); font-weight: 600; color: var(--text-strong); 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(--amber-text); } .faq-item summary:hover { color: var(--amber-text); } .faq-item__content { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); } .faq-item__content > p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); padding: 0 0 var(--space-s); } /* ---------------------------------------------------------------- Mobile menu ---------------------------------------------------------------- */ .mobile-menu-toggle { display: none; background: none; border: none; padding: var(--space-2xs); cursor: pointer; color: var(--text-strong); 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-solid) 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-solid); } .features__item p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-card); } .about__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-card); 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-card); box-shadow: none; } .about__badge img { width: 100%; height: 100%; object-fit: contain; } .about__content { max-width: 620px; } .about__content h2 { font-size: var(--size-6); line-height: var(--leading-headline); margin: var(--space-s) 0 0; } .about__content h2 span { color: inherit; } .about__content > p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); margin: var(--space-s) 0 0; } .about__stats { margin-top: var(--space-m); background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-card); 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-solid) 55%, transparent); } .about__stat-number { font-family: var(--font-heading); font-size: var(--size-4); font-weight: 800; letter-spacing: -0.025em; color: var(--amber-text); line-height: 1; } .about__stat-label { font-size: var(--size--1); color: var(--text); margin-top: var(--space-3xs); } /* ---------------------------------------------------------------- Services section ---------------------------------------------------------------- */ .services-section { padding: 0 var(--space-m); } .services-section__inner { background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-m); 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(--size-6); line-height: var(--leading-headline); margin: var(--space-s) 0 0; } .services-section__header h2 span { color: inherit; } .services-section__intro { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-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-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-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(--brand-solid); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; color: var(--brand-on-solid); 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-card); } .service-card__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-card); 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-solid) 55%, transparent); } .service-card__number { font-family: var(--font-heading); font-size: var(--size--2); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); } .service-card__heading h3 { font-size: var(--size-2); font-weight: 700; line-height: var(--leading-title); letter-spacing: -0.015em; } .service-card p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-m); 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__quote { position: absolute; right: 0; bottom: 0; width: 280px; background: var(--surface); border-radius: 16px 0 var(--radius-m) 0; padding: var(--space-3xs) 0 0 var(--space-3xs); z-index: var(--layer-base); } .doctor__quote-inner { background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-card); 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(--surface) 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(--surface) 15.5px); } .doctor__quote-mark { font-family: var(--font-heading); font-size: var(--size-3); font-weight: 800; color: var(--secondary-solid); line-height: var(--leading-mark); } .doctor__quote p { font-family: var(--font-heading); font-size: var(--size-1); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.015em; color: var(--text-strong); margin: var(--space-xs) 0 0; } .doctor__quote-divider { width: 40px; height: 1px; background: color-mix(in srgb, var(--neutral-solid) 28%, transparent); margin: var(--space-s) 0 calc(var(--space-3xs) * 2); } .doctor__quote-name { font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; color: var(--text-strong); } .doctor__quote-creds { font-size: var(--size--2); color: var(--text-muted); /* on the light gold: --text-quiet is 4.2:1 there */ 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(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); } .doctor__content h2 { font-size: var(--size-6); line-height: var(--leading-headline); margin: var(--space-xs) 0 0; } .doctor__creds { font-family: var(--font-heading); font-size: var(--size-0); font-weight: 600; color: var(--amber-text); margin: var(--space-3xs) 0 0; } .doctor__bio { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); margin: var(--space-s) 0 0; } .doctor__interests { margin-top: var(--space-m); } .doctor__interests-label { font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); } .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(--amber-text); } .doctor__interest span:last-child { font-family: var(--font-heading); font-size: var(--size-0); font-weight: 600; } /* 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__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(--size--2); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); margin-bottom: var(--space-2xs); } .doctor__after-hours p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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(--size-5); letter-spacing: -0.025em; margin: calc(var(--space-3xs) * 2) 0 0; } .team__desc { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-card); 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: 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(--amber-text); /* 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(--size--1); line-height: var(--leading-body); color: var(--text-quiet); margin: var(--space-3xs) 0 0; } .team-card h4 { font-size: var(--size-0); font-weight: 700; line-height: var(--leading-title); margin: var(--space-xs) 0 0; letter-spacing: normal; } .team-card p { font-size: var(--size--1); color: var(--text-muted); margin: calc(var(--space-3xs) / 2) 0 0; } /* ---------------------------------------------------------------- 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-m); 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-solid); } .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(--surface); } .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(--size-6); line-height: var(--leading-headline); letter-spacing: -0.025em; margin: var(--space-s) 0 0; padding-bottom: var(--space-2xs); 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; } /* The light gold is drawn by the absolute .new-patients__card-fill and * .contact-info-card__bg layers, which the text is not inside, so the deeper * amber is set on the cards themselves. */ .new-patients--highlight, .contact-info-card { --amber-text: var(--amber-on-gold); } .new-patients--highlight .new-patients__card-fill { inset: 0; border-radius: 16px; background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); } .new-patients__emergency { position: absolute; right: 0; bottom: 0; width: 344px; background: transparent; border-radius: var(--radius-card); 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-solid); margin-bottom: calc(var(--space-3xs) * 2); } .new-patients__emergency-inner p { font-size: var(--size--1); line-height: var(--leading-copy); color: var(--text); margin: 0; } .new-patients__emergency-inner p + p { margin-top: var(--space-3xs); } .new-patients__emergency-inner strong { color: var(--text-strong); font-weight: 700; } .new-patients__emergency-inner a { color: var(--amber-text); font-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: 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(--text-strong); 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(--text-strong); font-weight: 700; } .new-patients__emergency-inner a:hover { color: var(--text-strong); } /* ---------------------------------------------------------------- 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(--size-4); letter-spacing: -0.025em; margin: var(--space-xs) 0 0; } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ .site-footer { background: var(--neutral-solid); color: var(--neutral-on-solid); padding: calc(var(--space-xl) + var(--space-2xs)) var(--space-l) var(--space-m); } .site-footer a { color: color-mix(in srgb, var(--surface) 78%, transparent); transition: color .15s ease; } .site-footer a:hover { color: var(--neutral-on-solid); } .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(--size-0); line-height: var(--leading-copy); color: color-mix(in srgb, var(--surface) 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(--size--1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-on-solid); background: var(--brand-solid); padding: var(--space-xs) var(--space-m); border-radius: var(--control-radius); transition: background .15s ease; } .footer__brand .booking-button:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); } .footer__heading { font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--secondary-solid); margin: 0; } .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); margin-top: var(--space-xs); font-size: var(--size-0); list-style: none; padding: 0; } .footer__links a:hover { color: var(--secondary-solid); } .footer__hours { margin-top: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-2xs); } .footer__hours-note { font-size: var(--size--1); line-height: var(--leading-copy); color: color-mix(in srgb, var(--surface) 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(--size-0); line-height: var(--leading-copy); color: color-mix(in srgb, var(--surface) 78%, transparent); } .footer__contact-item a:hover { color: var(--secondary-solid); } .footer__contact-item svg { flex: 0 0 auto; margin-top: calc(var(--space-3xs) / 2); color: var(--secondary-solid); } .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(--surface) 16%, transparent); display: flex; justify-content: space-between; gap: calc(var(--space-xs) + var(--space-2xs)); font-size: var(--size--1); color: color-mix(in srgb, var(--surface) 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(--size--2); color: color-mix(in srgb, var(--surface) 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(--surface) 70%, transparent); } .footer__bottom-right a:hover { color: var(--secondary-solid); } /* ---------------------------------------------------------------- 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, .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; } .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(--brand-solid); border: none; border-radius: var(--radius-card); color: var(--brand-on-solid); 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-m) 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(--surface) 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(--surface) 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(--surface); -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__content { padding: var(--space-4xl) var(--space-m) var(--space-2xl); } .hero__title { font-size: var(--size-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-card); } .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-solid) 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 { 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-card) var(--radius-card); order: 10; text-align: center; } .new-patients__agpal { display: none; } .new-patients__content h2 { font-size: var(--size-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); } .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(--neutral-solid) 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(--surface); 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(--text-strong); 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(--size-0); font-weight: 600; text-transform: uppercase; color: var(--text-strong); border-radius: var(--radius-card); transition: background .15s ease; } .mobile-nav__links a:hover, .mobile-nav__links a.active { background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); } .mobile-nav__cta { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid color-mix(in srgb, var(--secondary-solid) 30%, transparent); } .mobile-nav__cta .booking-button { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--brand-solid); color: var(--brand-on-solid); font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; letter-spacing: 0.05em; padding: var(--space-s) var(--space-m); border-radius: var(--control-radius); 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-m); } .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(--size-7); } .hero__subtitle { font-size: var(--size-1); } .hero__desc { font-size: var(--size-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-card); } /* The card keeps its own padding and radius here - it is not the notched overlay, so it has no cutout geometry to unwind. */ .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)); } .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: var(--avatar-band); 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; } /* ---------------------------------------------------------------- About page — Hero simple (subpage) ---------------------------------------------------------------- */ .hero-simple__links { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--size--1); font-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(--text-muted); 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-solid); --amber-text: var(--amber-on-gold); color: var(--text-strong); } /* ---------------------------------------------------------------- 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(--size-5); font-weight: 700; line-height: var(--leading-headline); letter-spacing: -0.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(--brand-solid); color: var(--brand-on-solid); font-family: var(--font-heading); font-size: var(--size-1); font-weight: 800; border-radius: 10px; margin-bottom: var(--space-s); } .practice-values__item h3 { font-size: var(--size-1); font-weight: 700; line-height: var(--leading-snug); margin: 0 0 var(--space-3xs); } .practice-values__item p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-card); overflow: hidden; } .about-page-story__image img { width: 100%; height: 100%; object-fit: cover; } .about-page-story__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-card); overflow: hidden; } .about-page-story__content h2 { font-size: var(--size-6); line-height: var(--leading-headline); margin: 0 0 var(--space-s); } .about-page-story__lead { font-family: var(--font-heading); font-size: var(--size-1); font-weight: 500; line-height: var(--leading-body); color: var(--text-strong); margin-bottom: var(--space-xs); } .about-page-story__content > p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); } .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-solid) 55%, transparent); } /* ---------------------------------------------------------------- Rich text — descendant styles for Rails HTML merge tags ---------------------------------------------------------------- */ .rich-text p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); } .rich-text p + p { margin-top: var(--space-xs); } .rich-text strong { font-weight: 700; color: var(--text-strong); } .rich-text ul, .rich-text ol { padding-left: var(--space-s); margin: var(--space-xs) 0 0; } .rich-text li { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); } .rich-text li + li { margin-top: var(--space-3xs); } .rich-text a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 3px; } .rich-text a:hover { color: var(--text-strong); } /* ---------------------------------------------------------------- About page — How Standards Stay High ---------------------------------------------------------------- */ .about-page-standards { margin: 0 var(--space-m) var(--space-2xl); background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-m); 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-card); } .about-page-standards__image-inner { width: 100%; height: 100%; border-radius: var(--radius-card); 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(--size-1); font-weight: 700; line-height: var(--leading-snug); margin: 0; } .about-page-standards__notch-content p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); margin: var(--space-3xs) 0 0; } .about-page-standards__lead { font-weight: 500; } .about-page-standards__header h2 { font-size: var(--size-5); line-height: var(--leading-headline); letter-spacing: -0.025em; margin: var(--space-s) 0 0; } .about-page-standards__header > p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); 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(--brand-solid); border-radius: 10px; color: var(--brand-on-solid); margin-bottom: var(--space-s); } .about-page-standards__item h3 { font-size: var(--size-1); font-weight: 700; line-height: var(--leading-snug); margin: 0; } .about-page-standards__item p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); margin: var(--space-3xs) 0 0; } /* ---------------------------------------------------------------- About page — Responsive (Tablet ≤ 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { .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-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 — Responsive (Mobile ≤ 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { .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-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; } } /* ================================================================ Contact page ================================================================ */ /* ---------------------------------------------------------------- Contact — Form column ---------------------------------------------------------------- */ .contact-field { margin-top: var(--space-s); } .contact-field label { display: block; font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; color: var(--text-strong); margin-bottom: var(--space-3xs); } .contact-field label span { color: var(--amber-text); } /* The fields' look (and their focus) is Form controls' and the tokens * in :root above. */ .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-card); font-family: var(--font-body); font-size: var(--size-0); line-height: var(--leading-body); } [data-mf-feedback][data-status="success"] { /* A quiet border in the group's colour (tokens.md, "A subtle border in a * group's colour"): decoration, the text carries the message. */ --message-border: color-mix(in oklab, var(--success-line) 40%, var(--border)); background: var(--success-soft); color: var(--success-on-soft); border: var(--border-width-s) solid var(--message-border); } [data-mf-feedback][data-status="error"] { --message-border: color-mix(in oklab, var(--danger-line) 40%, var(--border)); background: var(--danger-soft); color: var(--danger-on-soft); border: var(--border-width-s) solid var(--message-border); } /* ---------------------------------------------------------------- Contact — Map section ---------------------------------------------------------------- */ .contact-map__embed { border-radius: var(--radius-m); overflow: hidden; background: var(--tan); } .contact-map__embed iframe { display: block; width: 100%; height: 400px; } /* ---------------------------------------------------------------- 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-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 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-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 page — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .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(--size-4); font-weight: 800; line-height: var(--leading-title); 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-m); padding: var(--space-m) var(--space-m); border-right: 1px solid color-mix(in srgb, var(--secondary-solid) 30%, transparent); } .first-visit__step:last-child { border-right: none; } .first-visit__number { background: transparent; color: var(--amber-text); font-family: var(--font-heading); font-size: var(--size-1); font-weight: 800; margin-bottom: calc(var(--space-3xs) * 2); } .first-visit__step h3 { font-size: var(--size-1); font-weight: 700; line-height: var(--leading-snug); margin: 0 0 var(--space-3xs); } .first-visit__step p { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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 — 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-m); overflow: hidden; } .flip-card__inner { position: relative; height: 100%; display: flex; flex-direction: column; } .flip-card__front, .flip-card__back { border-radius: var(--radius-m); overflow: hidden; } .flip-card__front { background: var(--surface); 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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); display: flex; flex-direction: column; overflow-y: auto; transition: transform 1.1s var(--ease); border-radius: var(--radius-m); } .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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); } .services-page-category__number { font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; color: var(--secondary-solid); letter-spacing: 0.05em; margin-bottom: var(--space-xs); } .flip-card__text h3 { font-size: var(--size-2); font-weight: 700; line-height: var(--leading-title); letter-spacing: -0.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(--size-0); line-height: var(--leading-body); color: var(--text); } .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(--text-strong); } .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(--text-muted); font-size: var(--size--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(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); text-transform: uppercase; transition: color .15s ease; } .flip-card__trigger:hover { color: var(--secondary-solid); } .services-page-category__image-wrap { position: relative; } .services-page-category__image-inner { border-radius: var(--radius-card) var(--radius-card) 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 — 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(--size-0); line-height: var(--leading-relaxed); color: var(--text); 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-m); overflow: hidden; } .services-page-allied-full__image-inner { width: 100%; height: 100%; border-radius: var(--radius-m); /* 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-m)); overflow: hidden; } .services-page-allied-full__image-inner img { width: 100%; height: 100%; display: block; object-fit: cover; } .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(--surface); /* 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-m). */ border-radius: var(--radius-m) 0 var(--radius-m) 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-m); height: var(--radius-m); background: var(--surface); 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-m) * -1); -webkit-mask-image: radial-gradient(circle var(--radius-m) at 100% 100%, transparent 0 var(--radius-m), var(--mask-opaque) calc(var(--radius-m) + .5px)); mask-image: radial-gradient(circle var(--radius-m) at 100% 100%, transparent 0 var(--radius-m), var(--mask-opaque) calc(var(--radius-m) + .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-m) * -1); -webkit-mask-image: radial-gradient(circle var(--radius-m) at 100% 100%, transparent 0 var(--radius-m), var(--mask-opaque) calc(var(--radius-m) + .5px)); mask-image: radial-gradient(circle var(--radius-m) at 100% 100%, transparent 0 var(--radius-m), var(--mask-opaque) calc(var(--radius-m) + .5px)); } .services-page-allied-full__overlay h2 { font-size: var(--size-4); line-height: var(--leading-headline); letter-spacing: -0.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-card); } .allied-card__image-inner { width: 100%; height: 100%; background: var(--tan); border-radius: var(--radius-card); overflow: hidden; } .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(--size-1); font-weight: 700; margin: calc(var(--space-3xs) * 2) 0 calc(var(--space-3xs) / 2); } .allied-card p { font-size: var(--size--1); line-height: var(--leading-copy); color: var(--text); margin: 0; } /* ---------------------------------------------------------------- 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-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-inner img { height: 340px; } } /* ---------------------------------------------------------------- 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-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; } } /* ================================================================ 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(--size-6); line-height: var(--leading-headline); margin: var(--space-s) 0 0; } .doctors-intro__content h2 span { color: inherit; } .doctors-intro__text { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); 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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-card); } .doctors-intro__highlight-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--amber-text); } .doctors-intro__highlight span:last-child { font-family: var(--font-heading); font-size: var(--size--1); font-weight: 600; line-height: var(--leading-snug); } .doctors-intro__image-wrap { position: relative; } .doctors-intro__image { height: 460px; border-radius: var(--radius-card); overflow: hidden; } .doctors-intro__image img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------- 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(--size-6); line-height: var(--leading-headline); margin: var(--space-s) 0 0; } .doctors-section__header h2 span { color: inherit; } .doctors-section__header > p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); 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(--surface); border: 1px solid var(--secondary-solid); border-radius: var(--radius-m); 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.9d97b826a6.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(--size-3); line-height: var(--leading-headline); letter-spacing: -0.015em; } .doctor-card__profession { font-family: var(--font-heading); font-size: var(--size--1); font-weight: 600; color: var(--amber-text); margin: var(--space-3xs) 0 0; } .doctor-card__bio { font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text); 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-solid) 30%, transparent); } .doctor-card__detail dt { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-heading); font-size: var(--size--2); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); text-transform: uppercase; } .doctor-card__detail dt svg { flex-shrink: 0; color: var(--amber-text); } .doctor-card__detail dd { margin: var(--space-3xs) 0 0; padding-left: var(--space-m); font-size: var(--size-0); line-height: var(--leading-body); color: var(--text); } .doctor-card__cta { margin-top: var(--space-m); display: flex; gap: calc(var(--space-3xs) * 2); flex-wrap: wrap; align-items: center; } /* ---------------------------------------------------------------- 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 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 page — Responsive (Small mobile <= 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .doctor-card__cta { flex-direction: column; } .doctor-card__cta .btn { text-align: center; justify-content: center; width: 100%; } } /* ================================================================ Team page ================================================================ */ /* Reuses .team-card from homepage — same notch-br image, corner badge pattern */ /* ================================================================ 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-m); 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(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); text-transform: uppercase; } .patient-info-intro__card-label svg { flex-shrink: 0; color: var(--amber-text); } .patient-info-intro__card h2 { font-size: var(--size-4); line-height: var(--leading-title); letter-spacing: -0.025em; margin: var(--space-xs) 0 0; } .patient-info-intro__card .rich-text { margin-top: var(--space-xs); } /* ---------------------------------------------------------------- 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-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); border-radius: var(--radius-m); } .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-eyebrow { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); text-transform: uppercase; } .patient-info-section__label-eyebrow svg { flex-shrink: 0; color: var(--amber-text); } .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(--size-4); line-height: var(--leading-title); letter-spacing: -0.025em; 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-m); overflow: hidden; border: 20px solid var(--surface); box-sizing: border-box; } .patient-info-section__image-inner img { width: 100%; height: 300px; object-fit: cover; display: block; border-radius: calc(var(--radius-m) - 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(--size-5); line-height: var(--leading-headline); margin: var(--space-s) 0 0; } .patient-info-policies__header h2 span { color: inherit; } .patient-info-policies__header > p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); 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(--surface); border-radius: var(--radius-card); 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-solid); display: flex; align-items: center; justify-content: center; color: var(--amber-text); } .policy-card h3 { font-size: var(--size-1); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.015em; 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(--size-0); line-height: var(--leading-copy); } /* ---------------------------------------------------------------- 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(--size-5); line-height: var(--leading-headline); letter-spacing: -0.025em; margin: var(--space-s) 0 0; } .patient-info-faq__desc { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); 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-m); overflow: hidden; } .patient-info-faq__image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-m); } /* ---------------------------------------------------------------- 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__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 — 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__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)); } } /* ================================================================ 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(--size--1); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-text); text-transform: uppercase; } .privacy-content__sidebar-label svg { flex-shrink: 0; color: var(--amber-text); } .privacy-content__updated { font-size: var(--size--1); color: var(--text-quiet); 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(--size--1); font-weight: 600; color: var(--text-muted); border-radius: 8px; transition: background .15s ease, color .15s ease; } .privacy-content__nav a:hover { background: var(--tertiary-solid); --amber-text: var(--amber-on-gold); color: var(--text-strong); } /* ---------------------------------------------------------------- Privacy — Legal text body ---------------------------------------------------------------- */ .privacy-content__body { max-width: 65ch; } .privacy-content__intro { font-size: var(--size-1); line-height: var(--leading-relaxed); color: var(--text); 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(--size-3); line-height: var(--leading-title); letter-spacing: -0.015em; } .privacy-section p { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); margin: var(--space-xs) 0 0; } .privacy-section ul { padding-left: var(--space-s); margin: var(--space-xs) 0 0; } .privacy-section li { font-size: var(--size-0); line-height: var(--leading-relaxed); color: var(--text); } .privacy-section li + li { margin-top: var(--space-3xs); } .privacy-section li strong { font-weight: 700; color: var(--text-strong); } .privacy-section a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 3px; } .privacy-section a:hover { color: var(--text-strong); } .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%; } } /* ================================================================ 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 — Section headings ---------------------------------------------------------------- */ .legal-content h2 { font-size: var(--size-3); line-height: var(--leading-title); letter-spacing: -0.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(--size-0); line-height: var(--leading-relaxed); color: var(--text); margin: var(--space-xs) 0 0; } .legal-content strong { font-weight: 700; color: var(--text-strong); } .legal-content a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 3px; } .legal-content a:hover { color: var(--text-strong); } /* ---------------------------------------------------------------- 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(--size--1); font-weight: 700; letter-spacing: 0.05em; color: var(--amber-text); } .legal-content dd { margin: 0; font-size: var(--size-0); line-height: var(--leading-copy); color: var(--text-strong); } .legal-content dd address { font-style: normal; } /* ---------------------------------------------------------------- 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 ---------------------------------------------------------------- */ /* ── 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(--size-8); font-weight: 700; line-height: 1; margin: 0 0 calc(var(--space-3xs) / 2); opacity: 0.55; } .notfound h1 { margin-top: 0; } .notfound__lede { font-size: var(--size-1); line-height: var(--leading-body); margin-inline: auto; max-width: 40rem; } .notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-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(--size-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: var(--leading); /* 24px at body size, the WCAG 2.2 target */ font-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(--size-5); letter-spacing: -0.025em; margin: calc(var(--space-3xs) * 2) 0 0; } .team--staff-page .team__header h2 span { color: var(--amber-text); } .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: 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(--text); } .footer__hours .hours-table { font-size: var(--size--1); } .footer__hours .hours-table tr + tr td { border-top: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); } .footer__hours .hours-table td:first-child { color: var(--neutral-on-solid); } .footer__hours .hours-table td:last-child { color: color-mix(in srgb, var(--surface) 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; } /* Heading-level preservation (SEO outline fix). These headings changed tag level so the page outline has no skipped levels; each class re-applies the exact declarations the old tag had, so the rendering is unchanged. Repeated class = specificity above every element-based rule. */ .hl-3a.hl-3a.hl-3a.hl-3a{box-sizing:border-box;color: var(--text-strong);font-family:var(--font-heading);font-size:var(--size-0);font-weight:700;letter-spacing:-0.015em;line-height:var(--leading-headline);margin-bottom:var(--space-3xs);margin-left:0;margin-right:0;margin-top:0} .hl-4a.hl-4a.hl-4a.hl-4a{box-sizing:border-box;font-family:var(--font-heading);font-size:var(--size-0);font-weight:700;letter-spacing:normal;line-height:var(--leading-title);margin-bottom:0;margin-left:0;margin-right:0;margin-top:var(--space-xs)} .hl-3b.hl-3b.hl-3b.hl-3b{box-sizing:border-box;font-family:var(--font-heading);font-size:var(--size-1);font-weight:700;letter-spacing:normal;line-height:var(--leading-snug);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px} /* ---------------------------------------------------------------- Site search One search window at every width (mediflare.js builds it as .mf-search-overlay): a centred card over the dimmed page above 768px, full screen at 768px and below. Two triggers, never both visible: - above 1024px, .search-trigger at the start of .hero__actions, on the photo beside Book Appointment: a button drawn as a search field (the --field-* tokens), "Search…" where the row has room, a 44px magnifier square in the tight bands (below); - at 1024px and below, .hero__search-open, a 44px magnifier beside the hamburger, the same shape and colours. Never inside the mobile menu. Style the overlay only through :not([hidden]), or it never closes. The box's field look is the Form controls section; nothing here sets it. ---------------------------------------------------------------- */ .hero__actions { padding-inline-start: 0; } /* empty photo; the trigger needs the room */ .search-trigger { display: inline-flex; flex: none; align-items: center; gap: var(--space-2xs); inline-size: 10rem; min-block-size: var(--field-h); padding: 0 var(--space-s) 0 var(--field-pad-inline); font-family: var(--font-heading); font-size: var(--size--1); font-weight: 600; line-height: var(--leading-title); white-space: nowrap; color: var(--text-muted); background: var(--field-bg); border: var(--field-border-w) solid var(--field-border); border-radius: var(--field-radius); cursor: pointer; transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .search-trigger svg { flex: none; color: var(--amber-text); } /* The ellipsis is drawn, not spoken: the name stays "Search this site". */ .search-trigger__text::after { content: "…" / ""; } .search-trigger:hover { color: var(--text-strong); background: var(--tertiary-solid); --amber-text: var(--amber-on-gold); } /* TIGHT BANDS. The row is logo band + trigger + Book Appointment, and the band (logo and six links) barely fits beside Book alone just above 1024px. Measured clearance from the band, so no link, the logo or Book ever wraps or moves: "Search…" from 1320px; magnifier + "Search" at 1110-1200 and 1240-1319; a 44px magnifier square at 1025-1109 and 1201-1239 (1201 is where the nav's gaps open up again, see the 1025-1200 nav rule); and at 1025-1049 the logo is also drawn a little narrower (inside its own box, so the band keeps its height). */ @media (min-width: 1025px) and (max-width: 1319px) { .search-trigger { inline-size: auto; padding-inline: var(--space-2xs) var(--space-xs); } .search-trigger__text::after { content: none; } } @media (min-width: 1025px) and (max-width: 1109px), (min-width: 1201px) and (max-width: 1239px) { .search-trigger { inline-size: var(--target-min); justify-content: center; padding: 0; } .search-trigger__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (min-width: 1025px) and (max-width: 1049px) { .hero__logo { width: 145px; } } .hero__search-open { display: none; } @media (max-width: 1024px) { .hero__search-open { display: flex; align-items: center; justify-content: center; position: absolute; right: calc(18px + 44px + var(--space-2xs)); /* beside the hamburger: its inset + its width + a gap */ top: 18px; width: 44px; height: 44px; padding: 0; color: var(--brand-on-solid); background: var(--brand-solid); border: none; border-radius: var(--radius-card); cursor: pointer; z-index: var(--layer-overlay); transition: background var(--duration-fast) var(--ease-out); } .hero__search-open:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); } } /* The box, wherever it sits: layout only. */ .mf-search__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); align-items: center; } .mf-search__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mf-search__submit { min-block-size: var(--field-h); padding: 0 var(--space-s); font-family: var(--font-heading); font-size: var(--size--1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-on-solid); background: var(--brand-solid); border: none; border-radius: var(--control-radius); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .mf-search__submit:hover { background: var(--secondary-solid); color: var(--secondary-on-solid); } .mf-search__status { margin: 0; font-size: var(--size--1); line-height: var(--leading-snug); color: var(--text-muted); } .mf-search__status:empty { display: none; } .mf-search__results:not([hidden]) { display: flex; flex-direction: column; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; } .mf-search__link { display: block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-card); color: var(--text-strong); text-decoration: none; overflow-wrap: anywhere; transition: background var(--duration-fast) var(--ease-out); } .mf-search__link:hover, .mf-search__link:focus-visible { background: var(--tertiary-solid); color: var(--text-strong); --amber-text: var(--amber-on-gold); } /* Inside a scrolling list an outset ring is clipped, so it sits inset. */ .mf-search__link:focus-visible { outline-offset: calc(var(--focus-ring-w) * -1); } .mf-search__title { display: block; font-family: var(--font-heading); font-weight: 700; line-height: var(--leading-title); color: var(--text-strong); } .mf-search__excerpt { display: block; margin-top: var(--space-3xs); font-size: var(--size--1); line-height: var(--leading-snug); color: var(--text-muted); } .mf-search__excerpt mark { color: var(--text-strong); background: color-mix(in oklab, var(--secondary-solid) 30%, transparent); border-radius: var(--radius-xs); } /* The overlay. At 768px and below: full screen, one row holding Close, the field and Search (Close first, matching the focus order), the results scrolling beneath. Subgrid puts the box's children on the overlay's grid, so the results run the full width. mediflare.js locks the page behind. */ .mf-search-overlay:not([hidden]) { position: fixed; inset: 0; z-index: var(--layer-modal); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--space-xs) var(--space-2xs); padding-block-start: max(var(--space-xs), env(safe-area-inset-top)); padding-inline: max(var(--space-s), env(safe-area-inset-left)) max(var(--space-s), env(safe-area-inset-right)); background: var(--surface); } .mf-search-overlay__header { display: contents; } .mf-search-overlay__close { grid-column: 1; grid-row: 1; align-self: stretch; position: relative; z-index: var(--layer-base); /* above the box, which spans this cell too */ min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: 0 var(--space-2xs); font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-card); cursor: pointer; } .mf-search-overlay__close:hover { color: var(--text-strong); background: var(--tertiary-solid); --amber-text: var(--amber-on-gold); } .mf-search--overlay, .mf-search--overlay .mf-search__form { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: normal; align-items: stretch; } .mf-search--overlay .mf-search__input { grid-column: 2; grid-row: 1; } .mf-search--overlay .mf-search__submit { grid-column: 3; grid-row: 1; } .mf-search--overlay .mf-search__status { grid-column: 1 / -1; grid-row: 2; } .mf-search--overlay .mf-search__results { grid-column: 1 / -1; grid-row: 3; align-self: stretch; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: max(var(--space-s), env(safe-area-inset-bottom)); } /* Above 768px the same overlay is a centred card, offset from the top so it grows down with its results and scrolls them past max-block-size. A press on the dimmed page closes it. Stacking: the backdrop (body::after) at --layer-modal sits over the hero's top row (--layer-raised) and the mobile menu's layer; the card is one above it, since body::after follows it in tree order and would otherwise paint over it. */ @media (min-width: 769px) { .mf-search-overlay:not([hidden]) { inset: var(--space-2xl) 0 auto; z-index: calc(var(--layer-modal) + 1); inline-size: calc(100% - 2 * var(--space-m)); max-inline-size: calc(var(--grid-max-width) / 2); max-block-size: calc(100dvh - 2 * var(--space-2xl)); margin-inline: auto; padding: var(--space-s); border-radius: var(--radius-m); box-shadow: var(--shadow-l); } .mf-search--overlay .mf-search__results { padding-block-end: 0; } html[data-mf-search-overlay="open"] body::after { content: ""; position: fixed; inset: 0; z-index: var(--layer-modal); background: color-mix(in oklch, var(--neutral-solid) 50%, transparent); -webkit-backdrop-filter: blur(var(--space-3xs)); backdrop-filter: blur(var(--space-3xs)); } } @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { .mf-search-overlay:not([hidden]) { animation: search-card-in var(--duration-base) var(--ease-out); } html[data-mf-search-overlay="open"] body::after { animation: search-backdrop-in var(--duration-base) var(--ease-out); } } @keyframes search-card-in { from { opacity: 0; transform: scale(0.98); } } @keyframes search-backdrop-in { from { opacity: 0; } }