/*
* Light-DOM entry point: tokens + fonts + grid + base typography/reset.
* Component CSS is scoped per-component (shadow DOM); this file never styles
* anything a `ds-*` component already owns. Imported once, in the SSR shell.
*/
/*
* Semantic layer: the only tokens `packages/ui` components and page templates
* may reference directly. Names describe role, not value, so the palette can
* move without touching component code.
*/
/*
* Theme layer: background/foreground pairs, named by purpose, built from core.
* Single theme today (light). A future dark theme would redefine this file only.
*/
/*
* Core layer: raw, context-free values. Nothing here is "brand" or "purpose" —
* that mapping happens in theme.css. Components never reach into this file.
*/
:root {
--core-color-white: #FFFFFF;
--core-color-black: #1F1A17; /* flagged: not present in the design artboards, reserved for pure-black needs */
--core-color-gray-100: #FFFDF9; /* room */
--core-color-gray-200: #F5F0E8; /* sand */
--core-color-gray-300: #EBE2D3; /* duin */
--core-color-gray-400: #DDD2C0; /* haarlijn / decorative line */
--core-color-gray-500: #C9BCA8; /* flagged: interpolated, not sampled from the artboards */
--core-color-gray-600: #8C8178; /* bedieningsrand / field border, 3.3:1 */
--core-color-gray-700: #6B6058; /* klei / muted text, 4.7:1 */
--core-color-gray-800: #4E453E; /* logobruin */
--core-color-gray-900: #3A322C; /* espresso / ink, 11:1 */
--core-color-gray-1000: #2E2723; /* brown hover */
--core-color-gold: #CE9E52; /* logogoud, min 3.3:1 on gray-900 */
--core-color-gold-text-large: #9E7230; /* gold as large text on light, >=3:1 */
--core-color-gold-text-small: #7E5620; /* gold as small text/links on light, >=4.5:1 */
--core-color-gold-soft: #F1E3C8;
--core-color-status-danger-100: #F7E1DB;
--core-color-status-danger-700: #A23A27;
--core-color-status-warning-100: #F6E6CF;
--core-color-status-warning-700: #9A5208;
--core-color-status-info-100: #E1EBF1;
--core-color-status-info-700: #3D6A86;
--core-color-status-success-100: #E4EDE5;
--core-color-status-success-700: #3F6B4A;
--core-color-inverse-muted: #E3D9CC;
--core-color-inverse-line: #5E544C;
--core-font-title: "Urbanist", system-ui, sans-serif;
--core-font-body: "Figtree", system-ui, sans-serif;
--core-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
--core-font-weight-regular: 400;
--core-font-weight-medium: 500;
--core-font-weight-semibold: 600;
--core-font-weight-bold: 700;
--core-font-weight-extrabold: 800;
--core-font-size-01: 0.8125rem;
--core-font-size-02: 0.9375rem;
--core-font-size-03: 1.0625rem;
--core-font-size-04: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
--core-font-size-05: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
--core-font-size-06: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
--core-font-size-07: clamp(2rem, 1.45rem + 2.2vw, 3.5rem);
--core-font-size-08: clamp(2.375rem, 1.6rem + 3vw, 4.25rem);
--core-font-size-09: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem);
--core-font-size-10: clamp(2.75rem, 1.6rem + 5vw, 6.5rem);
--core-space-01: 0.25rem;
--core-space-02: 0.5rem;
--core-space-03: 0.75rem;
--core-space-04: 1rem;
--core-space-05: 1.5rem;
--core-space-06: 2rem;
--core-space-07: 3rem;
--core-space-08: 4rem;
--core-space-09: 6rem;
--core-space-10: 8rem;
--core-radius-01: 0.625rem;
--core-radius-02: 1rem;
--core-radius-03: 1.5rem;
--core-radius-04: 2.5rem;
--core-radius-pill: 999px;
--core-shadow-float: 0 24px 48px -16px rgb(58 50 44 / 0.22), 0 4px 12px -4px rgb(58 50 44 / 0.12);
}
:root {
--theme-color-canvas: var(--core-color-gray-200);
--theme-color-on-canvas: var(--core-color-gray-900);
--theme-color-surface: var(--core-color-gray-100);
--theme-color-on-surface: var(--core-color-gray-900);
--theme-color-inset: var(--core-color-gray-300);
--theme-color-on-inset: var(--core-color-gray-900);
--theme-color-inverse: var(--core-color-gray-900);
--theme-color-on-inverse: var(--core-color-gray-100);
--theme-color-on-inverse-muted: var(--core-color-inverse-muted);
--theme-color-inverse-line: var(--core-color-inverse-line);
/* brand: background-only. Never set as text color on canvas/surface (2.2:1, fails AA). */
--theme-color-brand: var(--core-color-gold);
--theme-color-on-brand: var(--core-color-gray-900);
--theme-color-brand-soft: var(--core-color-gold-soft);
--theme-color-on-brand-soft: var(--core-color-gray-900);
--theme-color-brand-strong: var(--core-color-gray-800);
--theme-color-brand-strong-hover: var(--core-color-gray-1000);
--theme-color-on-brand-strong: var(--core-color-gray-100);
/* gold as text: only these two, never --theme-color-brand itself */
--theme-color-brand-text: var(--core-color-gold-text-large);
--theme-color-brand-text-small: var(--core-color-gold-text-small);
}
:root {
/* color: surfaces */
--elvaio-color-page: var(--theme-color-canvas);
--elvaio-color-card: var(--theme-color-surface);
--elvaio-color-band: var(--theme-color-inset);
--elvaio-color-band-inverse: var(--theme-color-inverse);
/* color: text */
--elvaio-color-text: var(--theme-color-on-canvas);
--elvaio-color-text-muted: var(--core-color-gray-700);
--elvaio-color-text-inverse: var(--theme-color-on-inverse);
--elvaio-color-text-inverse-muted: var(--theme-color-on-inverse-muted);
/* gray-700 (the default muted text above) is 2.5:1 against the brand
gold background — not enough; gray-800 only reaches 3.84:1, still
short of 4.5:1. Ink (already this surface's own base text color) is
the first shade on the scale that clears it. Brand-surfaced
components (ds-callout's brand variant) re-point
--elvaio-color-text-muted to this locally — "muted" loses its dimmer
look on gold specifically, trading it for guaranteed contrast. */
--elvaio-color-text-muted-on-accent: var(--theme-color-on-brand);
/* color: borders */
--elvaio-color-border-decorative: var(--core-color-gray-400);
--elvaio-color-border-control: var(--core-color-gray-600);
--elvaio-color-border-inverse: var(--theme-color-inverse-line);
/* color: brand accent (backgrounds, waves, seal; never canvas/surface text) */
--elvaio-color-accent: var(--theme-color-brand);
--elvaio-color-on-accent: var(--theme-color-on-brand);
--elvaio-color-accent-soft: var(--theme-color-brand-soft);
--elvaio-color-on-accent-soft: var(--theme-color-on-brand-soft);
--elvaio-color-accent-text-large: var(--theme-color-brand-text);
--elvaio-color-accent-text: var(--theme-color-brand-text-small);
/* Neither gold-on-light variant above has enough contrast against an
inverse (dark) background, but the base brand gold itself does (5.16:1
on ink) — the reference's own `.el-dark .el-eyebrow`/`.el-footer__col
.el-mono` rules both use `--el-gold` unmodified, not a softened tint.
Components don't need to know they're on an inverse surface:
`ds-card.inverse` re-points these two custom properties locally, so
anything nested inside (e.g. `ds-checklist`'s accent marker) picks up
the safe value automatically through normal CSS inheritance. */
--elvaio-color-accent-text-on-inverse: var(--core-color-gold);
/* color: seal (ds-seal). Light default: cream ring, ink stroke/text —
matches the reference's base `.el-seal` rule. `ds-card.inverse`
re-points all three locally (reference: `.el-dark .el-seal`), so a
seal nested in a dark card (e.g. Aanpak's ISO band) picks up the
dark variant automatically, the same inheritance trick as the
accent-text pair above. */
--elvaio-color-seal-ring: var(--elvaio-color-card);
--elvaio-color-seal-ring-stroke: var(--elvaio-color-text);
--elvaio-color-seal-text: var(--elvaio-color-text);
/* color: buttons */
--elvaio-color-button-primary-bg: var(--theme-color-brand-strong);
--elvaio-color-button-primary-bg-hover: var(--theme-color-brand-strong-hover);
--elvaio-color-button-primary-text: var(--theme-color-on-brand-strong);
/* color: focus */
--elvaio-color-focus: var(--core-color-status-info-700);
--elvaio-color-focus-on-inverse: var(--core-color-gold-soft);
/* color: status tones (project-agnostic; Elvaio wording maps to these in compositions) */
--elvaio-color-tone-danger: var(--core-color-status-danger-700);
--elvaio-color-tone-danger-tint: var(--core-color-status-danger-100);
--elvaio-color-tone-warning: var(--core-color-status-warning-700);
--elvaio-color-tone-warning-tint: var(--core-color-status-warning-100);
--elvaio-color-tone-info: var(--core-color-status-info-700);
--elvaio-color-tone-info-tint: var(--core-color-status-info-100);
--elvaio-color-tone-success: var(--core-color-status-success-700);
--elvaio-color-tone-success-tint: var(--core-color-status-success-100);
/* typography: faces */
--elvaio-font-title: var(--core-font-title);
--elvaio-font-body: var(--core-font-body);
--elvaio-font-mono: var(--core-font-mono);
/* typography: semantic sizes */
--elvaio-font-size-title-hero: var(--core-font-size-09);
--elvaio-font-size-title-cta: var(--core-font-size-10);
--elvaio-font-size-title-page: var(--core-font-size-08);
--elvaio-font-size-heading: var(--core-font-size-07);
--elvaio-font-size-heading-small: var(--core-font-size-06);
--elvaio-font-size-subheading: var(--core-font-size-05);
--elvaio-font-size-title-body: var(--core-font-size-05);
--elvaio-font-size-lead: var(--core-font-size-04);
--elvaio-font-size-body: var(--core-font-size-03);
--elvaio-font-size-caption: var(--core-font-size-02);
--elvaio-font-size-small: var(--core-font-size-02);
--elvaio-font-size-label: var(--core-font-size-01);
--elvaio-font-weight-title: var(--core-font-weight-extrabold);
--elvaio-font-weight-button: var(--core-font-weight-semibold);
--elvaio-font-weight-body: var(--core-font-weight-regular);
--elvaio-line-height-body: 1.65;
--elvaio-line-height-title: 1.08;
--elvaio-letter-spacing-title: -0.03em;
--elvaio-letter-spacing-title-hero: -0.045em;
--elvaio-letter-spacing-label: 0.06em;
/* spacing: generic scale for component gaps/padding (card, button, badge,
grid gutters inside a component's own shadow root). The fluid
`--elvaio-space-section/head/gutter` below are page-layout-specific,
not a substitute for these. */
--elvaio-space-01: var(--core-space-01);
--elvaio-space-02: var(--core-space-02);
--elvaio-space-03: var(--core-space-03);
--elvaio-space-04: var(--core-space-04);
--elvaio-space-05: var(--core-space-05);
--elvaio-space-06: var(--core-space-06);
--elvaio-space-07: var(--core-space-07);
--elvaio-space-08: var(--core-space-08);
--elvaio-space-09: var(--core-space-09);
--elvaio-space-10: var(--core-space-10);
/* typography: generic weights beyond the title/button/body semantic roles */
--elvaio-font-weight-medium: var(--core-font-weight-medium);
--elvaio-font-weight-semibold: var(--core-font-weight-semibold);
--elvaio-font-weight-bold: var(--core-font-weight-bold);
--elvaio-space-section: clamp(4.5rem, 9vw, 8rem);
--elvaio-space-head: clamp(2rem, 4vw, 3.5rem);
/* The reference's default `.el-pagehead` bottom padding - a hero's own
gap to whatever follows it, smaller than `--elvaio-space-section`
since (with `flush-top` on the following section) it's the only
spacing between them, not one of two stacked paddings. */
--elvaio-space-pagehead-bottom: clamp(3.5rem, 7vw, 6rem);
--elvaio-space-gutter: clamp(1.25rem, 4vw, 2.5rem);
/* The reference's flat `.el-grid`/`.el-prices`/`.indep__cols` gap (16px) —
distinct from `--elvaio-space-gutter` above, which is `.el-wrap`'s
container side-padding (`--el-gutter`), a different reference token
this codebase's generic `.grid` class had been reusing for its gap too,
making every card grid noticeably wider-spaced than the artboards. */
--elvaio-space-card-grid-gap: var(--elvaio-space-04);
/* Flagged off-scale: the reference's recurring desktop two-column gap
(hero, split, faq-layout, indep, founder, ...) — 72px, between
--elvaio-space-07 (48px) and -08 (64px), used too often to round. */
--elvaio-space-split-gap: 4.5rem;
--elvaio-size-container: 77.5rem; /* 1240px */
--elvaio-size-container-narrow: 48rem; /* flagged: derived for prose/article width, not an explicit artboard value */
--elvaio-size-container-wide: 90rem; /* flagged: derived for full-bleed bands, not an explicit artboard value */
/* radius */
--elvaio-radius-field: var(--core-radius-01);
--elvaio-radius-control: var(--core-radius-02);
--elvaio-radius-card: var(--core-radius-03);
--elvaio-radius-band-top: var(--core-radius-04);
--elvaio-radius-pill: var(--core-radius-pill);
/* shadow */
--elvaio-shadow-float: var(--core-shadow-float);
/* focus ring (border-like, px allowed) */
--elvaio-focus-width: 3px;
/* ds-steps geometry: flagged off-scale, see design-tokens.md */
--elvaio-steps-offset: 8.25rem; /* 132px */
--elvaio-steps-node: 2.75rem; /* 44px */
--elvaio-steps-wave-width: 8px; /* border-like */
--elvaio-steps-wave-radius: 1.125rem;
}
/*
* Breakpoints, named and mobile-first (min-width only). Designed canvas is
* 390px; everything below --mobile-landscape is the unqualified default.
*/
/* 560px */
/* 768px */
/* 1000px */
/* 1200px */
/*
* Self-hosted, Latin-subset font files. Served from src/public/fonts/.
* Urbanist and Figtree ship as variable fonts; one file covers the whole
* weight range we use, declared with a weight range per the spec.
*/
@font-face {
font-family: "Urbanist";
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url("/fonts/urbanist-latin-variable.woff2") format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/figtree-latin-variable.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}
/*
* The one grid and the one container. Design-tool output had many ad hoc
* `.el-grid--3`, `.el-split`, `.el-pagehead__grid` variants; this replaces all
* of them with a column-count grid and span utilities, plus a width wrapper.
*/
.grid {
display: grid;
gap: var(--elvaio-space-gutter);
grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
}
/* A grid of sibling cards (status levels, "wat wij (nooit) doen", feature
tiles, ...) wants the reference's tighter flat gap, not the large
container-gutter value `.grid` defaults to for split/layout grids. */
.grid.cards {
gap: var(--elvaio-space-card-grid-gap);
}
/* A genuine two-block split (Contact's agenda/form columns, ...) wants the
reference's wider `.el-split` gap instead - the plain `.grid` default
(`--elvaio-space-gutter`, the *container's own side padding* reused as a
gap) tops out at 40px, short of `.el-split`'s 72px at desktop. */
@media (min-width: 62.5rem) {
.grid.split {
gap: var(--elvaio-space-split-gap);
}
}
@media (min-width: 48rem) {
.grid[data-columns="12"] { --columns: 12; }
.grid[data-columns="7"] { --columns: 7; }
.grid[data-columns="5"] { --columns: 5; }
.grid[data-columns="4"] { --columns: 2; }
.grid[data-columns="3"] { --columns: 3; }
.grid[data-columns="2"] { --columns: 2; }
}
@media (min-width: 62.5rem) {
.grid[data-columns="12"] { --columns: 12; }
.grid[data-columns="4"] { --columns: 4; }
}
[class*="span-"] { grid-column: span var(--span, 1) / span var(--span, 1); }
@media (min-width: 48rem) {
.span-1 { --span: 1; }
.span-2 { --span: 2; }
.span-3 { --span: 3; }
.span-4 { --span: 4; }
.span-5 { --span: 5; }
.span-6 { --span: 6; }
.span-7 { --span: 7; }
.span-8 { --span: 8; }
.span-9 { --span: 9; }
.span-10 { --span: 10; }
.span-12 { --span: 12; }
}
/* Container width itself is `ds-container` (packages/ui): a component, not a
global class, so pages can nest/scale it per section. See its component.css
for how it reads --elvaio-size-container{,-narrow,-wide}. */
/*
* Article body typography. Strapi rich-text blocks render as light DOM
* (`.prose`), not inside a `ds-*` shadow root, so global typography applies.
*/
.prose {
max-width: 68ch;
font-size: var(--elvaio-font-size-body);
line-height: var(--elvaio-line-height-body);
}
.prose > * + * {
margin-top: var(--core-space-05);
}
.prose h2 {
margin-top: var(--core-space-08);
font-size: var(--elvaio-font-size-heading-small);
}
.prose h3 {
margin-top: var(--core-space-06);
font-size: var(--elvaio-font-size-subheading);
}
.prose ul,
.prose ol {
list-style: revert;
padding-inline-start: 1.25em;
}
.prose a {
color: var(--elvaio-color-accent-text);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.prose blockquote {
margin: 0;
padding-inline-start: var(--core-space-05);
border-inline-start: var(--elvaio-steps-wave-width) solid var(--elvaio-color-accent);
font-family: var(--elvaio-font-title);
font-size: var(--elvaio-font-size-subheading);
font-weight: var(--elvaio-font-weight-title);
}
.prose code {
font-family: var(--elvaio-font-mono);
font-size: 0.9em;
background: var(--elvaio-color-band);
padding: 0.1em 0.35em;
border-radius: var(--elvaio-radius-field);
}
/* `status-note`/`inline-cta`: the two custom rich-text blocks
`article.body` carries (content-model.md), rendered as plain
`
`/`
` by
the backend with no styling anywhere until now. The artboard's
two-part "badge + muted text" isn't reproducible from this flat markup
without re-splitting the sentence, so this is a close single-line
equivalent: the status word's own tone colors the whole line instead. */
.status-note {
font-weight: var(--elvaio-font-weight-button);
padding: var(--elvaio-space-03) var(--elvaio-space-04);
border-left: 3px solid currentColor;
border-radius: var(--elvaio-radius-field);
background: var(--elvaio-color-band);
}
.status-afkeur {
color: var(--elvaio-color-tone-danger);
}
.status-advies {
color: var(--elvaio-color-tone-warning);
}
.status-letop {
color: var(--elvaio-color-tone-info);
}
.status-goed {
color: var(--elvaio-color-tone-success);
}
.inline-cta {
padding: var(--elvaio-space-05);
background: var(--elvaio-color-card);
border: 1px solid var(--elvaio-color-border-decorative);
border-radius: var(--elvaio-radius-card);
}
.inline-cta > * + * {
margin-top: var(--core-space-03);
}
.inline-cta__title {
margin: 0;
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: var(--elvaio-font-size-title-body);
}
/*
* Light-DOM styling for `src/src/compositions/*` — Elvaio-specific
* page sections that aren't reusable `ds-*` design-system components, so
* they don't get their own shadow-scoped stylesheet. One rule block per
* composition, named after its root class.
*/
/* features.ts: eyebrow/h2 header, margin before the card grid below it.
No `gap`: the eyebrow→h2 spacing comes from the global `.eyebrow + h2`
rule (global.css); a `gap` here would double it up. */
.features-head {
margin-bottom: var(--elvaio-space-06);
}
/* Cross-composition adjacencies that recur across several pages
(situation.ts's "Herken je iets anders?", approach.ts/pricing.ts's FAQ
→ closing CTA, ...): a `ds-link-list` right after a heading, or a
`ds-callout` (`ctaBlock`) right after whatever content precedes it in
the same section, both render flush without these. `* + ds-callout`
only fires when something actually precedes it, so a `ctaBlock` that's
the only/first thing in its own section is untouched. */
h2 + ds-link-list {
margin-top: var(--elvaio-space-05);
}
* + ds-callout {
margin-top: var(--elvaio-space-08);
}
/* approach.ts's `renderRows` ("Wat wij doen, en wat wij van jou vragen"):
re-derived from `elvaio.reference.css`'s `.el-rows`/`.el-row`/`.el-row--3`
(a `role="table"` of grid-row divs, not a native `
` — the
artboard's columns don't line up as a strict row/column grid in text
length, and the reference itself renders it this way). */
.rows-table {
border-top: 2px solid var(--elvaio-color-text);
margin-top: var(--elvaio-space-06);
}
.rows-table-row {
display: grid;
gap: var(--elvaio-space-02) var(--elvaio-space-07);
padding-block: var(--elvaio-space-06);
border-bottom: 1px solid var(--elvaio-color-border-control);
}
.rows-table-head {
display: none;
/* Half the data rows' padding-block (`Aanpak.dc.html`'s own inline
`padding: 14px 0` override on just this row). */
padding-block: var(--elvaio-space-03);
}
@media (min-width: 62.5rem) {
.rows-table-row {
grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
align-items: baseline;
}
.rows-table-head {
display: grid;
}
}
/* founder.ts (Over's founder card) + about.ts's `.founder-split` wrapper
around it and the sibling `ds-quote`: re-derived from `Over.dc.html`'s
`.founder`/`.founder__photo`/`.founder__ph`/`.founder__seal`/
`.founder__body`. */
.founder-split {
align-items: center;
}
.founder-grid {
display: grid;
gap: var(--elvaio-space-06);
}
@media (min-width: 48rem) {
.founder-grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--elvaio-space-07);
align-items: center;
}
}
.founder-photo {
position: relative;
margin: 0;
}
.founder-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--elvaio-radius-card);
}
.founder-photo-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--elvaio-space-03);
aspect-ratio: 4 / 5;
padding: var(--elvaio-space-04);
text-align: center;
color: var(--elvaio-color-accent-text);
background: linear-gradient(160deg, var(--elvaio-color-accent-soft), var(--elvaio-color-band));
border: 2px dashed var(--elvaio-color-border-control);
border-radius: var(--elvaio-radius-card);
}
.founder-photo-placeholder .label {
max-width: 18ch;
}
.founder-seal {
position: absolute;
right: -0.875rem;
bottom: -0.875rem;
}
.founder-body {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-04);
}
/* kennis.ts: the category filter chips + article grid. Re-derived from
`elvaio.reference.css`'s `.el-chips`/`.el-chip` — never styled at all
before this (no rule existed for any of these classes). */
.filter-head {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-04);
margin-bottom: var(--elvaio-space-07);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--elvaio-space-02);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--elvaio-space-02);
min-height: 2.75rem;
padding-inline: var(--elvaio-space-04);
border-radius: var(--elvaio-radius-pill);
border: 1.5px solid var(--elvaio-color-border-control);
background: var(--elvaio-color-card);
font-weight: var(--elvaio-font-weight-button);
color: var(--elvaio-color-text);
text-decoration: none;
cursor: pointer;
}
.chip:hover {
border-color: var(--elvaio-color-text);
}
.chip[aria-pressed="true"] {
background: var(--elvaio-color-text);
border-color: var(--elvaio-color-text);
color: var(--elvaio-color-text-inverse);
}
.article-grid {
margin: 0;
padding: 0;
list-style: none;
}
/* contact.ts's agenda column: the real Calendly embed, click-to-load via
`calendly-embed` (pages-and-routes.md's load-only-after-consent rule) -
`.agenda-embed` is just its placeholder card, swapped for `.agenda-iframe`
once loaded. */
.agenda-column,
.message-column {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-05);
}
.contact-details {
color: var(--elvaio-color-text-muted);
}
.agenda-embed {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--elvaio-space-05);
min-height: 22rem;
padding: var(--elvaio-space-06);
background: var(--elvaio-color-card);
border: 1.5px solid var(--elvaio-color-border-decorative);
border-radius: var(--elvaio-radius-card);
}
.agenda-embed-hint {
color: var(--elvaio-color-text-muted);
}
.agenda-iframe {
width: 100%;
min-height: 43rem;
border: 0;
border-radius: var(--elvaio-radius-card);
}
.agenda-fallback {
color: var(--elvaio-color-text-muted);
font-size: var(--elvaio-font-size-small);
}
/* contact.ts's hero: crumbs, the pagehead grid and the "Je hoort binnen 1
werkdag"-style checklist stack as three siblings in one flex column
(28px is off-scale - between --elvaio-space-06 and -07). */
.contact-head {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
/* The small person card beside the hero copy: re-derived from
`Contact.dc.html`'s `.contact-person` (its own padding/gap, distinct
from `ds-card`'s defaults). */
.contact-person {
display: flex;
align-items: center;
gap: var(--elvaio-space-05);
padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
/* zelftest-question.ts's answer options: re-derived from
`elvaio.reference.css`'s `.el-options`/`.el-option` — a 2-up grid of
bordered, tappable radio cards (never a bare native radio-button list). */
.options-grid {
display: grid;
gap: var(--elvaio-space-03);
margin: 0;
padding: 0;
border: 0;
}
@media (min-width: 48rem) {
.options-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.radio-card {
display: flex;
align-items: center;
gap: var(--elvaio-space-04);
min-height: 4rem;
padding: 0.875rem 1.125rem;
background: var(--elvaio-color-card);
border: 1.5px solid var(--elvaio-color-border-control);
border-radius: var(--elvaio-radius-control);
cursor: pointer;
font-weight: var(--elvaio-font-weight-semibold);
transition: border-color 0.15s, background-color 0.15s;
}
.radio-card:hover {
border-color: var(--elvaio-color-text);
}
.radio-card:has(input:checked) {
background: var(--elvaio-color-accent-soft);
border-color: var(--elvaio-color-text);
border-width: 2px;
}
.radio-card:has(input:focus-visible) {
outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
outline-offset: 2px;
}
.radio-card input {
width: 1.375rem;
height: 1.375rem;
margin: 0;
accent-color: var(--elvaio-color-button-primary-bg);
flex: none;
}
/* zelftest-question.ts's "Vorige"/"Volgende" row: a divider above (not
just a gap), matching the reference's rule between the options and the
nav row. */
.zelftest-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--elvaio-space-04);
padding-top: var(--elvaio-space-06);
border-top: 1px solid var(--elvaio-color-border-decorative);
}
/* zelftest-test.ts's own vertical rhythm: every margin is zeroed globally,
so this stack (heading, `form`, the wizard's injected `ds-progress`,
the question list, hint, nav) needs it spelled out, same as every other
page template. `zelftest-wizard` is `display: contents` (global.css) -
a sibling combinator still sees it as `h1`'s sibling (that part of the
DOM tree is untouched), but `display: contents` gives it no box of its
own to carry a margin, so the real spacing target one level inside it
(`form`) has to be reached with a descendant selector, not `h1 + form`. */
h1 + zelftest-wizard form {
margin-top: var(--elvaio-space-07);
}
form > ds-progress + .zelftest-questions {
margin-top: var(--elvaio-space-07);
}
.zelftest-questions {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-09);
}
.zelftest-question {
margin: 0;
padding: 0;
border: 0;
}
.zelftest-question legend {
padding: 0;
margin-bottom: var(--elvaio-space-04);
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: var(--elvaio-font-size-title-body);
letter-spacing: -0.01em;
}
.zelftest-question legend .eyebrow {
display: flex;
margin-bottom: var(--elvaio-space-02);
}
/* Wizard mode only (`zelftest-wizard` island adds `.is-wizard` to the
form): without JS every question stays visible, one long page. A
`display:none` fieldset's own `required` controls are excluded from
constraint validation, which is exactly what lets the wizard step
through without validating questions the visitor hasn't reached yet. */
.is-wizard .zelftest-question {
display: none;
}
.is-wizard .zelftest-question.is-current {
display: block;
}
.zelftest-questions + .hint {
margin: var(--elvaio-space-06) 0 0;
color: var(--elvaio-color-text-muted);
}
.hint + .zelftest-nav {
margin-top: var(--elvaio-space-07);
}
/* zelftest.ts's intro: checklist -> start button -> privacy note, each a
zeroed-margin element by default. */
ds-checklist + .start {
margin-top: var(--elvaio-space-06);
}
.start + .privacy-note {
margin-top: var(--elvaio-space-03);
}
/* zelftest-result.ts's gauge card: centered label/gauge/legend stack. */
.gauge-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--elvaio-space-05);
text-align: center;
}
.gauge-title {
align-self: flex-start;
}
.zelftest-domains {
margin-top: var(--elvaio-space-09);
}
.zelftest-domains .eyebrow + h2 {
margin-top: var(--elvaio-space-03);
}
.zelftest-domains h2 {
margin-bottom: var(--elvaio-space-06);
}
.disclaimer {
margin-top: var(--elvaio-space-04);
}
.lead + ds-signal {
margin-top: var(--elvaio-space-04);
}
ds-callout + ds-button {
margin-top: var(--elvaio-space-06);
}
/* zelftest-report.ts: the score recap and the form card sit at their own
natural height, not stretched to match whichever is taller (the
default `.grid` behaviour) - the same fix as `.pagehead-grid`. */
@media (min-width: 62.5rem) {
.report-grid {
align-items: start;
}
}
.score-recap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--elvaio-space-03);
margin-top: var(--elvaio-space-06);
}
.score-value {
margin: 0;
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: var(--elvaio-font-size-heading);
}
.report-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-note {
margin: 0;
color: var(--elvaio-color-text-muted);
font-size: var(--elvaio-font-size-small);
}
/* pricing.ts's "not included" banner: re-derived from `Prijzen.dc.html`'s
inline-styled bordered row (badge + text, text-link right) — not a
`ds-callout` (the original build's guess), which is the much larger
gold CTA block used only for the page's closing CTA. */
.notice-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--elvaio-space-04) var(--elvaio-space-07);
margin-top: var(--elvaio-space-06);
padding: var(--elvaio-space-05) var(--elvaio-space-06);
border: 2px solid var(--elvaio-color-text);
border-radius: var(--elvaio-radius-card);
background: var(--elvaio-color-card);
}
.notice-banner p {
display: flex;
align-items: center;
gap: var(--elvaio-space-04);
max-width: 62ch;
margin: 0;
font-weight: var(--elvaio-font-weight-button);
}
/* rows.ts (AI-trainingen's "Resultaat op je eigen code"): re-derived from
`elvaio.reference.css`'s `.el-rows`/`.el-row` (the 2-column base variant
— Aanpak's `.rows-table` above is the 3-column `.el-row--3` one). */
.row-list {
margin: 0;
border-top: 2px solid var(--elvaio-color-text);
}
/* Gold, not the muted inverse-line used between individual rows below:
the reference's `.el-band-dark .el-rows` rule singles out just this
top border as an accent, distinct from `.el-row`'s own dividers. */
[data-surface="inverse"] .row-list {
border-color: var(--elvaio-color-accent);
}
.row-list .row {
display: grid;
gap: var(--elvaio-space-02) var(--elvaio-space-07);
padding-block: var(--elvaio-space-06);
border-bottom: 1px solid var(--elvaio-color-border-control);
}
[data-surface="inverse"] .row-list .row {
border-color: var(--elvaio-color-border-inverse);
}
.row-list dt {
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: var(--elvaio-font-size-title-body);
}
.row-list dd {
margin: 0;
font-size: var(--elvaio-font-size-lead);
}
@media (min-width: 62.5rem) {
.row-list .row {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: baseline;
}
}
/* status-scale.ts (Aanpak's "Vier niveaus, één schaal"): `ds-card`'s own
shadow root is a flex column (card.css), and slotted content becomes a
real flex item of it — so `margin-top: auto` here pins the "Voorbeeld"
example to the card's bottom, keeping it aligned across cards
regardless of title/text length, with no extra wrapper needed. */
.status-scale-example {
margin-top: auto;
padding-top: var(--elvaio-space-04);
border-top: 1px solid var(--elvaio-color-border-decorative);
}
/* iso-block.ts (Aanpak's ISO 25010 band): text column + centered seal
column, vertically centered as one row — not stacked, which is what a
2-column grid holding only one populated column (the checklist is
normally empty) collapses to without explicit alignment. */
.iso-block-text {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-04);
}
.iso-block-seal {
display: flex;
justify-content: center;
/* Without this, the flex/grid item's automatic minimum size is `auto`
(its content's own preferred size), which blocks it from ever
shrinking below the `xl` seal's own width — the seal (up to 320px)
then overflows a narrower column instead of respecting `ds-seal`'s
own `max-width: 100%`. */
min-width: 0;
}
@media (min-width: 62.5rem) {
.iso-block-grid {
align-items: center;
}
}
/* situation.ts: shared by all 5 situatie variants. */
.situation-problem-title {
margin-bottom: var(--elvaio-space-07);
}
.situation-research-grid {
margin-bottom: var(--elvaio-space-07);
}
.situation-outcomes {
display: grid;
gap: var(--elvaio-space-07);
}
/* No `gap`: eyebrow→h2 comes from the global rule; h2→checklist is its
own rule below (not a `.lead`, so the global rule doesn't reach it). */
.situation-outcomes-text h2 {
margin-bottom: var(--elvaio-space-05);
padding-bottom: var(--elvaio-space-04);
border-bottom: 2px solid var(--elvaio-color-accent);
}
@media (min-width: 62.5rem) {
.situation-outcomes {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--elvaio-space-split-gap);
align-items: start;
}
}
/* page-head.ts: shared by every content page's hero (crumbs/eyebrow/h1/
lead/ctas). All margins are zeroed globally, so without explicit
spacing the whole block renders flush — this is the fix for every page
using `pageHead()`, not just one. Eyebrow→h1 and h1→lead come from the
global rules (global.css); crumbs→eyebrow and lead→ctas don't fit that
generic pattern, so they're spaced explicitly here instead of via a
blanket `gap` (which would double up the two transitions above). */
/* Breadcrumbs are sub-navigation, not hero copy — the reference spaces
them a full 32px from whatever follows (`Aanpak.dc.html`'s `.el-wrap`
gap), double the old value here, specifically so this doesn't read as
part of the hero block beneath it. */
.pagehead-content ds-breadcrumbs + .eyebrow,
.pagehead-content ds-breadcrumbs + h1 {
margin-top: var(--elvaio-space-06);
}
.pagehead-content .lead + .pagehead-ctas,
.pagehead-content .lead + .article-meta {
margin-top: var(--elvaio-space-05);
}
/* The reference's `.el-pagehead__grid` vertically centers its two columns
at desktop (`align-items: center`), not the generic `.grid`'s default
`stretch` - the aside column (a stat card, or Situatie's `ds-report`)
is meant to sit at its own natural height next to the hero copy, not get
pulled to match it. `ds-card`'s `height: 100%` (added for Aanpak's
equal-height status cards) only has an effect where something actually
stretches it, so this fixes the bottom-heavy stat card without touching
that card itself. */
@media (min-width: 62.5rem) {
.pagehead-grid {
align-items: center;
}
}
.article-meta {
color: var(--elvaio-color-text-muted);
}
/* legal.ts (privacy/voorwaarden): the same zero-margin problem as every
other page head — title and "laatst bijgewerkt" sat flush against each
other and against the prose body. */
.legal-head {
margin-bottom: var(--elvaio-space-07);
}
.legal-head h1 + .updated-at {
margin-top: var(--elvaio-space-04);
}
/* article.ts: re-derived from `elvaio.reference.css`'s `.el-article`
(260px fixed TOC column, not a fractional span) / `.el-article__toc`
(a shaded card on mobile, a plain sticky sidebar from --tablet up). */
.article-layout {
display: grid;
gap: var(--elvaio-space-07);
}
.article-layout ds-toc {
background: var(--elvaio-color-card);
border-radius: var(--elvaio-radius-card);
padding: var(--elvaio-space-05);
}
@media (min-width: 48rem) {
.article-layout {
grid-template-columns: 16.25rem minmax(0, 1fr);
gap: var(--elvaio-space-09);
}
.article-layout ds-toc {
position: sticky;
top: var(--elvaio-space-06);
align-self: start;
background: transparent;
padding: 0;
}
}
.pagehead-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--elvaio-space-03);
}
.pagehead-aside {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-04);
}
/* page-head.ts's stat card (Aanpak's "Doorlooptijd", About's "Ervaring"):
re-derived from the artboards' `.el-card` with a 2px ink border —
previously rendered as three bare, unstyled paragraphs with no card at
all, which is why it read as "missing" rather than a stat block. */
.stat-card {
gap: var(--elvaio-space-03);
}
.stat-value {
margin: 0;
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem);
line-height: 1;
letter-spacing: -0.045em;
color: var(--elvaio-color-accent-text-large);
}
.stat-unit {
font-size: 0.42em;
letter-spacing: -0.02em;
}
.stat-caption {
margin: 0;
}
/* site-header.ts: the desktop-bar CTA sits beside `ds-nav`'s pill — match
its height (measured ~46px) instead of the standalone-button default
(52px), which read as oversized and vertically off against the pill.
Scoped to `.header-cta` only: the mobile panel's stacked CTAs
(`panel-actions`) aren't beside anything and keep the standard size. */
.site-header .header-cta ds-button {
--ds-button-min-height: 2.875rem;
}
/* Every page's first `ds-section` is `flush-top` (no section padding-top
at all, on every page template), and the header itself carries no
padding-bottom either — the two together left every page's content
starting flush against the nav bar, measured at an actual 0px gap.
This is the fix, on the header rather than on `ds-section`, since
`flush-top` is a shared, deliberate convention used everywhere and
isn't itself the bug. Fluid, not the flat 4rem this used to be: that
was tuned against the desktop bar (6.25rem tall) and read fine there,
but the same 4rem next to the much shorter mobile bar (4.5rem) and a
390px-wide viewport was a disproportionately large chunk of the
screen - part of "way too much spacing" under the mobile header. 4rem
read as too much on desktop too, independent of the mobile issue, so
this now tops out at 3rem (space-07) there instead of the old space-08.
`ds-nav` already has its own `z-index: 20` for its own internal
stacking (the hover pill vs its links); this needs a higher one so the
whole sticky header - gap included - stays above every page's own
content (never explicitly `z-index`ed, so `auto`) while scrolling.
`background` is required for a sticky element: without it the page's
own content would show through the header (its gap especially) as it
scrolls underneath, instead of disappearing behind an opaque bar. */
.site-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--elvaio-color-page);
padding-bottom: clamp(1.5rem, 5vw, 3rem);
}
/* site-footer.ts: always the inverse surface (design-tokens.md). */
.site-footer {
background: var(--elvaio-color-band-inverse);
color: var(--elvaio-color-text-inverse);
padding-block: var(--elvaio-space-08) var(--elvaio-space-06);
}
.site-footer .footer-top {
display: grid;
gap: var(--elvaio-space-07);
margin-bottom: var(--elvaio-space-08);
}
.site-footer .footer-logo {
display: block;
margin-bottom: var(--elvaio-space-05);
}
.site-footer .footer-blurb {
max-width: 28rem;
color: var(--elvaio-color-text-inverse-muted);
}
@media (min-width: 62.5rem) {
.site-footer .footer-top {
grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}
}
.site-footer .footer-column-title {
font-family: var(--elvaio-font-mono);
font-size: var(--elvaio-font-size-label);
font-weight: var(--core-font-weight-medium);
letter-spacing: var(--elvaio-letter-spacing-label);
text-transform: uppercase;
color: var(--elvaio-color-accent-text-on-inverse);
margin-bottom: var(--elvaio-space-04);
}
.site-footer .footer-column ul {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-03);
}
.site-footer .footer-column a {
text-decoration: none;
}
.site-footer .footer-column a:hover {
text-decoration: underline;
}
.site-footer .footer-bottom {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-04);
padding-top: var(--elvaio-space-06);
border-top: 1px solid var(--elvaio-color-border-inverse);
color: var(--elvaio-color-text-inverse-muted);
font-size: var(--elvaio-font-size-small);
}
.site-footer .footer-copyright {
margin: 0;
}
.site-footer .footer-bottom nav {
display: flex;
gap: var(--elvaio-space-05);
}
.site-footer .footer-bottom a {
color: inherit;
}
.site-footer .binary-caption {
margin: 0;
font-family: var(--elvaio-font-mono);
letter-spacing: 0.04em;
word-break: break-all;
}
@media (min-width: 48rem) {
.site-footer .footer-bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/* section-head.ts: the shared "eyebrow + h2" row (Situaties, Aanpak,
Prijzen). Desktop splits 7fr/5fr, bottom-aligned; the link (never both
link and lead) right-justifies. */
.section-head {
display: grid;
gap: var(--elvaio-space-04) var(--elvaio-space-07);
margin-bottom: var(--elvaio-space-head);
align-items: end;
}
.section-head > div {
display: flex;
flex-direction: column;
/* No `gap` here: the eyebrow→h2 spacing now comes from the global
`.eyebrow + h2` rule (global.css) shared by every such pair
site-wide, not just this composition's own wrapper. */
}
@media (min-width: 62.5rem) {
.section-head {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.section-head > ds-button {
justify-self: end;
}
}
/* pricing.ts's `renderPricingHead`: the hero reuses `.section-head`'s 7fr/5fr
row (title left, lead right) rather than `page-head.ts`'s stacked layout.
No bottom margin of its own - the `flush-bottom` `ds-section` it sits in
already supplies the hero-to-content gap, so stacking this on top would
double it. */
.pricing-head {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-06);
}
.section-head.pricing-head-row {
margin-bottom: 0;
}
/* pricing.ts's `renderMatrix`: `ds-comparison-table`'s slotted body rows.
The host's shadow stylesheet (`comparison-table.css`) owns the row's own
grid/border via `::slotted(.comparison-row)` - `::slotted()` can target
that top-level slotted node, but never a descendant inside it, so the
cell-level styling below (which does need to reach descendants) has to
live here instead, in the page's own unscoped stylesheet. Kept in sync
by hand with the shadow-rendered head row's matching rules. */
.comparison-row > * {
padding: var(--elvaio-space-04);
display: flex;
align-items: center;
}
.comparison-row > *:not(:first-child) {
justify-content: center;
text-align: center;
}
.comparison-row .is-featured {
background: var(--elvaio-color-accent-soft);
}
/* hero-home.ts */
.home-hero-grid {
display: grid;
gap: var(--elvaio-space-06);
padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}
.home-hero-head {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-05);
}
/* The flex `gap` above already spaces the eyebrow from the `h1` - without
this, global.css's generic `.eyebrow + h1 { margin-top: ... }` rule
stacks an *extra* 12px on top of it (a flex/grid `gap` and a child's own
`margin` both apply; neither cancels the other), measured adding up to
a 36px gap here instead of the intended 24px - part of what read as way
too much space under the mobile header. */
.home-hero-head .eyebrow + h1 {
margin-top: 0;
}
.home-hero-copy {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-06);
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--elvaio-space-03);
align-items: center;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: var(--elvaio-space-02) var(--elvaio-space-04);
align-items: center;
font-size: var(--elvaio-font-size-small);
color: var(--elvaio-color-text-muted);
}
.hero-meta span[aria-hidden] {
color: var(--elvaio-color-border-control);
}
.home-hero-report {
position: relative;
padding-bottom: var(--elvaio-space-07);
}
.home-hero-report ds-seal {
position: absolute;
right: -0.5rem;
bottom: 0;
}
@media (min-width: 62.5rem) {
.home-hero-grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--elvaio-space-split-gap);
row-gap: var(--elvaio-space-07);
}
.home-hero-head {
grid-column: 1;
grid-row: 1;
}
.home-hero-copy {
grid-column: 1;
grid-row: 2;
}
.home-hero-report {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
.home-hero-report ds-report {
transform: rotate(1.5deg);
}
.home-hero-report ds-seal {
right: -1.75rem;
bottom: -0.75rem;
}
}
/* symptom-list.ts ("Herken je dit?"): ruled list with haarlijnen, each row
led by the logo's squarewave mark. */
.symptom-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 2px solid var(--elvaio-color-text);
}
.symptom-list li {
display: grid;
grid-template-columns: 2rem 1fr;
grid-template-rows: auto auto;
gap: var(--elvaio-space-01) var(--elvaio-space-05);
align-items: center;
padding-block: var(--elvaio-space-06);
border-bottom: 1px solid var(--elvaio-color-border-control);
}
.symptom-list ds-icon {
grid-column: 1;
grid-row: 1 / -1;
width: 2rem;
height: 2rem;
color: var(--elvaio-color-accent);
}
.symptom-list .context {
grid-column: 2;
grid-row: 1;
font-family: var(--elvaio-font-mono);
font-size: var(--elvaio-font-size-label);
letter-spacing: var(--elvaio-letter-spacing-label);
text-transform: uppercase;
color: var(--elvaio-color-text-muted);
}
.symptom-list .text {
grid-column: 2;
grid-row: 2;
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
line-height: 1.25;
letter-spacing: -0.02em;
}
.symptom-list li:not(:has(.context)) .text {
grid-row: 1 / -1;
}
@media (min-width: 62.5rem) {
.symptom-list li {
grid-template-columns: 2.5rem 1fr;
gap: var(--elvaio-space-02) var(--elvaio-space-07);
}
.symptom-list ds-icon {
width: 2.5rem;
height: 2.5rem;
}
}
/* example-result.ts ("Zo ziet een uitslag eruit"): text+legend left,
report right (desktop); legend reads like a divided table of rows. */
.home-report {
display: grid;
gap: var(--elvaio-space-07);
}
.home-report-intro {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-06);
}
.home-tally {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--elvaio-space-03);
}
.home-tally li {
background: var(--elvaio-color-card);
border: 1px solid var(--elvaio-color-border-decorative);
border-radius: var(--elvaio-radius-field);
padding: var(--elvaio-space-04);
display: flex;
flex-direction: column;
gap: var(--elvaio-space-03);
}
.home-tally small {
font-size: var(--elvaio-font-size-small);
color: var(--elvaio-color-text-muted);
line-height: 1.35;
}
.home-tally .count {
font-family: var(--elvaio-font-mono);
font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
line-height: 1;
}
@media (min-width: 62.5rem) {
.home-report {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--elvaio-space-split-gap);
align-items: start;
}
.home-report-intro {
position: sticky;
top: var(--elvaio-space-06);
}
.home-tally {
gap: 0;
border-top: 2px solid var(--elvaio-color-text);
}
.home-tally li {
background: transparent;
border: 0;
border-bottom: 1px solid var(--elvaio-color-border-control);
border-radius: 0;
padding-block: var(--elvaio-space-05);
display: grid;
grid-template-columns: 7.25rem minmax(0, 1fr) 3.5rem;
align-items: center;
gap: var(--elvaio-space-04);
}
.home-tally small {
order: 2;
font-size: var(--elvaio-font-size-body);
}
.home-tally .count {
order: 3;
text-align: right;
font-size: var(--elvaio-font-size-heading-small);
}
}
/* independence.ts ("Het rapport is geen offerte"): big heading left,
lead + do/never cards right (desktop 7fr/5fr). */
.indep {
display: grid;
gap: var(--elvaio-space-07);
}
.indep-body {
display: flex;
flex-direction: column;
gap: var(--elvaio-space-06);
}
@media (min-width: 62.5rem) {
.indep {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--elvaio-space-split-gap);
align-items: center;
}
}
.indep-title {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--elvaio-font-title);
font-weight: var(--elvaio-font-weight-title);
font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem);
line-height: 0.92;
letter-spacing: -0.05em;
}
.indep-title .soft {
font-size: 0.42em;
letter-spacing: -0.03em;
margin-top: 0.5em;
color: var(--elvaio-color-accent-text-large);
}
/* faq-section.ts: intro sticky on the left, accordion on the right
(distinct 5fr/7fr split from `.section-head`'s 7fr/5fr). */
.faq-layout {
display: grid;
gap: var(--elvaio-space-07);
}
/* No `gap`: eyebrow→h2 is the global rule; h2→the optional "staat je
vraag er niet bij?" link is its own rule (not a `.lead`). */
.faq-intro h2 {
margin-bottom: var(--elvaio-space-04);
}
@media (min-width: 62.5rem) {
.faq-layout {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--elvaio-space-split-gap);
}
.faq-intro {
position: sticky;
top: var(--elvaio-space-06);
align-self: start;
}
}
.faq-layout details summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--elvaio-space-05);
padding: var(--elvaio-space-05) var(--elvaio-space-05) var(--elvaio-space-05) var(--elvaio-space-06);
min-height: 4rem;
font-family: var(--elvaio-font-body);
font-weight: var(--elvaio-font-weight-button);
font-size: var(--elvaio-font-size-subheading);
line-height: 1.35;
cursor: pointer;
list-style: none;
}
.faq-layout details summary::-webkit-details-marker {
display: none;
}
.faq-layout .faq-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 1.5px solid var(--elvaio-color-border-control);
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: transform 0.2s ease;
}
.faq-layout details[open] .faq-icon {
transform: rotate(180deg);
background: var(--elvaio-color-text);
border-color: var(--elvaio-color-text);
color: var(--elvaio-color-text-inverse);
}
.faq-layout details > p {
padding: 0 var(--elvaio-space-06) var(--elvaio-space-06);
color: var(--elvaio-color-text-muted);
max-width: 44em;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: light;
-webkit-text-size-adjust: 100%;
}
/* Sticky footer: `pages/layout.ts` renders `