/* ==========================================================================
CLIENT STARTER styles.
RE-BRAND THE WHOLE SITE from the tokens in :root below. Change the accent,
the fonts, and the neutrals and everything follows. Ships light + dark.
No external fonts: the system stack by default, or a self-hosted persona theme
(css/theme.css, loaded after this file) that overrides these tokens.
========================================================================== */
:root {
/* ---- Brand tokens: change these per client ---- */
--accent: #2563eb; /* primary brand colour */
--accent-ink: #ffffff; /* text on the accent */
--brand: #2563eb; /* big colour panels: the brand colour, same in dark mode */
--brand-ink: #ffffff; /* text on those panels */
--font-head: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--head-weight: 800;
--head-tracking: -0.02em;
--body-size: 1rem;
/* ---- Neutrals (light) — slight cool bias, chosen not defaulted ---- */
--bg: #ffffff;
--surface: #f6f8fb;
--border: #e4e8ee; /* dividers and card edges */
--field-border: #7d8697; /* form fields: 3:1 against bg and surface */
--text: #121722;
--text-soft: #4a5568;
--text-dim: #5d6779;
--radius: 12px;
--maxw: 1080px;
/* ---- Logo: a dark-text logo sits on a light chip in dark mode (unless a light version is supplied) ---- */
--logo-chip: transparent;
--logo-chip-pad: 0;
--logo-light: block;
--logo-dark: none;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0e1116;
--surface: #161b22;
--border: #242b36;
--field-border: #687386;
--text: #eef1f7;
--text-soft: #aab2c5;
--text-dim: #949eb2;
--accent: #7aa2ff;
--accent-ink: #0b1220;
--logo-chip: #ffffff;
--logo-chip-pad: 4px 10px;
--logo-light: none;
--logo-dark: block;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0e1116;
--surface: #161b22;
--border: #242b36;
--field-border: #687386;
--text: #eef1f7;
--text-soft: #aab2c5;
--text-dim: #949eb2;
--accent: #7aa2ff;
--accent-ink: #0b1220;
--logo-chip: #ffffff;
--logo-chip-pad: 4px 10px;
--logo-light: none;
--logo-dark: block;
color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--body-size);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }
.container.narrow { max-width: 720px; }
/* ---- Header ---- */
/* Responsive photos (tools/quality/images.mjs) wrap ![]()
in ; it lays out as the img. */
picture { display: contents; }
picture > source { display: none; } /* never a layout cell of its own */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); /* solid: nothing behind it ever shows through */ border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { text-decoration: none; color: var(--text); }
/* Logo: height set here; width and height attributes on the img avoid layout shift. */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { display: block; height: auto; max-height: 48px; width: auto; max-width: min(240px, 56vw); object-fit: contain; background: var(--logo-chip); padding: var(--logo-chip-pad); border-radius: 6px; box-sizing: content-box; }
.brand-logo.has-dark { display: var(--logo-light); background: none; padding: 0; }
.brand-logo-dark { display: var(--logo-dark); height: auto; max-height: 48px; width: auto; max-width: min(240px, 56vw); object-fit: contain; }
.brand-name { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.25rem; letter-spacing: var(--head-tracking); }
.nav-list { list-style: none; display: flex; gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; align-items: center; }
.nav-list a { color: var(--text-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.nav-list a:hover { color: var(--text); }
.nav-cta { background: var(--accent); color: var(--accent-ink) !important; padding: 8px 16px; border-radius: 999px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
/* ---- Buttons ---- */
.btn { display: inline-block; font-weight: 600; text-decoration: none; padding: 12px 22px; border-radius: 999px; font-size: 0.98rem; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-dim); }
button.btn { font: inherit; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
/* ---- Hero ---- */
.hero { padding: clamp(56px, 10vw, 112px) 0; }
.hero h1 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(2rem, 1.3rem + 3.6vw, 3.4rem); line-height: 1.08; margin: 10px 0 16px; text-wrap: balance; letter-spacing: var(--head-tracking); }
.hero-lede { font-size: 1.15rem; color: var(--text-soft); max-width: 60ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--accent); margin: 0; }
/* ---- Sections ---- */
.section { padding: clamp(48px, 8vw, 88px) 0; }
.section-alt { background: var(--surface); }
.section-alt + .section-alt { border-top: 1px solid var(--border); }
.section-head { margin-bottom: 32px; }
.section-head h2 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); margin: 8px 0 10px; line-height: 1.15; letter-spacing: var(--head-tracking); text-wrap: balance; }
.section-lede { color: var(--text-soft); max-width: 60ch; margin: 0; }
.section.narrow p:not(.eyebrow), .container.narrow p:not(.eyebrow) { color: var(--text-soft); }
/* ---- Cards ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.section-alt .card { background: var(--bg); }
.card h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.15rem; margin: 0 0 8px; }
.card p { margin: 0; color: var(--text-soft); }
/* ---- Contact ---- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 4px 12px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.contact-list a { overflow-wrap: anywhere; }
.contact-k { font-weight: 700; min-width: 64px; color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-block: 24px; font-size: 0.9rem; color: var(--text-soft); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.footer-legal a { color: var(--text-soft); text-decoration: none; }
.footer-legal a:hover { color: var(--text); }
/* ---- Footer credit (atd-credit) — the only trace ---- */
.atd-credit { display: flex; justify-content: center; padding: 14px 16px 22px; font-size: 13px; line-height: 1; }
.atd-credit a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); text-decoration: none; transition: color var(--dur-fast) ease; }
.atd-credit a:hover, .atd-credit a:focus-visible { color: var(--text); }
.atd-credit__mark { flex: none; }
.atd-credit strong { font-weight: 600; }
/* ---- Responsive ---- */
@media (max-width: 760px) {
.grid-3 { grid-template-columns: 1fr; }
.nav-toggle { display: flex; }
.nav-list { position: absolute; top: 64px; right: 0; left: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 20px 16px; display: none; }
.nav-list.open { display: flex; }
.nav-list li { width: 100%; }
.nav-list a { display: block; padding: 12px 0; }
.nav-cta { display: inline-block; margin-top: 8px; }
}
/* ---- Motion: , set by the theme ----
calm: hover and focus feedback only. standard: sections fade up as they scroll in.
expressive: standard plus a stagger (and, in theme.css, cross-fading page changes).
Content is only hidden once main.js has run, and Reduce motion switches it all off. */
:root { --dur-fast: 150ms; --dur: 420ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); }
.btn, .nav-list a, .card { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, filter var(--dur-fast) ease; }
.motion-ready [data-motion-item] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.motion-ready [data-motion-item].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
.motion-ready [data-motion-item] { opacity: 1; transform: none; }
}
/* ---- Ambient background: soft light in the brand colours behind the hero, page headers
and the closing band, with a faint dot texture. It never moves on its own for long
(WCAG 2.2.2): it fades in once, then drifts only as the visitor scrolls (standard and
expressive motion), and a soft light follows the pointer. Strength is --ambient, set
per persona by the theme; the contrast check tests text where the light is strongest
(a glow with the pointer light on top: 1.5 x --ambient). */
@property --mx { syntax: ""; inherits: true; initial-value: 50%; }
@property --my { syntax: ""; inherits: true; initial-value: -40%; }
:root { --ambient: 14%; --brand-shade: #000000; }
.hero, .page-hero, .cta-band { position: relative; isolation: isolate; overflow: clip; }
.hero, .page-hero { transition: --mx 0.6s var(--ease-out), --my 0.6s var(--ease-out); }
.hero::before, .page-hero::before, .cta-band::before {
content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
background:
radial-gradient(16rem circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) calc(var(--ambient) * 0.5), transparent), transparent 70%),
radial-gradient(36% 42% at 22% 26%, color-mix(in srgb, var(--accent) var(--ambient), transparent), transparent 72%),
radial-gradient(32% 40% at 78% 74%, color-mix(in srgb, var(--brand) var(--ambient), transparent), transparent 72%);
animation: ambient-in 1.4s var(--ease-out) both;
}
/* On the brand-colour band the light is a deeper shade of the brand (it only ever adds contrast). */
.cta-band::before {
background:
radial-gradient(36% 48% at 20% 30%, color-mix(in srgb, var(--brand-shade) 24%, transparent), transparent 72%),
radial-gradient(30% 44% at 85% 70%, color-mix(in srgb, var(--brand-shade) 18%, transparent), transparent 72%);
}
.hero::after, .page-hero::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, #000, transparent 75%);
mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, #000, transparent 75%);
}
@keyframes ambient-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ambient-scroll { from { transform: none; } to { transform: translate3d(4%, 7%, 0) rotate(5deg) scale(1.08); } }
@keyframes ambient-scroll-more { from { transform: none; } to { transform: translate3d(-6%, 10%, 0) rotate(-9deg) scale(1.14); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-motion="standard"] :is(.hero, .page-hero, .cta-band)::before { animation: ambient-in 1.4s var(--ease-out) both, ambient-scroll linear both; animation-timeline: auto, view(); animation-range: normal, exit -10% exit 100%; }
[data-motion="expressive"] :is(.hero, .page-hero, .cta-band)::before { animation: ambient-in 1.4s var(--ease-out) both, ambient-scroll-more linear both; animation-timeline: auto, view(); animation-range: normal, cover 0% cover 100%; }
}
}
/* ---- Reactive backdrop: the client's own photo behind a brand-colour wash ----
Add "backdrop" to a .page-hero or .cta-band and put ![]()
first
inside it (site.json "ctaBand": { "photo": ... } does the band). The photo drifts as the page
scrolls (a little on calm sites, more on standard and expressive), shifts with the pointer on
desktop (standard and expressive), and is still with reduce motion. Text sits on the brand
colour with at most --backdrop of the photo showing through, and design/contrast-check.mjs
proves the brand ink passes over a pure white or pure black photo at that strength. */
:root { --backdrop: 24%; }
.backdrop, .page-hero.backdrop, .cta-band.backdrop { background: var(--brand); color: var(--brand-ink); border-bottom: 0; }
.backdrop-media { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; z-index: -2; opacity: var(--backdrop); pointer-events: none;
translate: calc(var(--px, 0) * -1.6%) calc(var(--py, 0) * -1.6%); transition: translate 0.8s var(--ease-out); }
.backdrop :is(h1, h2, h3, p, span, li, .eyebrow, .hero-lede, .page-title, .crumbs, .crumbs *, a:not(.btn)) { color: var(--brand-ink); }
.backdrop a:not(.btn) { text-decoration-color: currentColor; }
.page-hero.backdrop::before { background:
radial-gradient(36% 48% at 20% 30%, color-mix(in srgb, var(--brand-shade) 24%, transparent), transparent 72%),
radial-gradient(30% 44% at 85% 70%, color-mix(in srgb, var(--brand-shade) 18%, transparent), transparent 72%); }
.page-hero.backdrop::after { display: none; }
.hero-photo { overflow: clip; }
@keyframes backdrop-drift-calm { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes backdrop-drift { from { transform: translateY(-7%) scale(1.04); } to { transform: translateY(7%) scale(1.04); } }
@keyframes backdrop-drift-more { from { transform: translateY(-9%) scale(1.1); } to { transform: translateY(9%) scale(1.03); } }
@keyframes hero-settle { from { transform: none; } to { transform: scale(var(--settle, 1.03)); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.backdrop-media { animation: backdrop-drift-calm linear both; animation-timeline: view(); }
[data-motion="standard"] .backdrop-media { animation-name: backdrop-drift; }
[data-motion="expressive"] .backdrop-media { animation-name: backdrop-drift-more; }
/* The home page's main photo eases in a touch as it scrolls away. */
.hero-photo img { animation: hero-settle linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
[data-motion="standard"] .hero-photo img { --settle: 1.06; }
[data-motion="expressive"] .hero-photo img { --settle: 1.1; }
}
}
@media (prefers-reduced-motion: reduce) { .backdrop-media { translate: none; transition: none; } }
/* ---- Photo window: a full-width photo that holds still while the page scrolls past it ----
Between two sections: . The photo stays put
while the page moves over it, like looking through a window (where the browser does
scroll-driven animation; elsewhere, and with reduce motion, it's a still band). Use the
client's own best photo at full strength, once or twice a site, never with text on it. */
.photo-window { --window-h: clamp(280px, 62vh, 620px); position: relative; height: var(--window-h); overflow: clip; background: var(--brand); view-timeline: --photo-window block; }
.photo-window-media { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@keyframes photo-window-hold { from { transform: translateY(-100vh); } to { transform: translateY(var(--window-h)); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.photo-window-media { height: 100vh; animation: photo-window-hold linear both; animation-timeline: --photo-window; animation-range: cover; }
}
}
/* ---- Accessibility helpers ---- */
/* Hidden by its own height (not a fixed offset), so it never peeks out at larger text sizes */
.skip-link { position: absolute; left: 12px; top: 0; z-index: 100; transform: translateY(-120%); background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { transform: translateY(12px); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
/* ---- 404 ---- */
.e404 { min-height: 70vh; display: flex; align-items: center; }
.e404-inner { text-align: center; }
.e404 h1 { font-family: var(--font-head); font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 8px 0 12px; }
.e404 .section-lede { margin: 0 auto 24px; }
/* ---- Page title (inner pages added by modules) ---- */
.page-title { font-family: var(--font-head); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.12; margin: 8px 0 12px; letter-spacing: -0.02em; text-wrap: balance; }
/* ---- Photos in content (QUALITY-BAR.md: photos earn their place, layouts stay balanced) ---- */
.split-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; }
.split-figure { margin: 0; }
.split-figure figcaption { margin-top: 10px; font-size: 0.92rem; color: var(--text-soft); }
/* A card with a photo across the top (the whole card is the link). */
.card-photo { padding: 0; overflow: hidden; }
.card-photo .card-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.card-photo .card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* Numbers: only the client's own, checkable facts. */
.stats { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 18px; }
.stats li { display: grid; gap: 2px; align-content: start; border-top: 3px solid var(--accent); padding-top: 12px; }
.stats strong { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.1; color: var(--text); }
.stats span { color: var(--text-soft); font-size: 0.95rem; }