/* Kitchen AI - landing page. Monochrome tokens mirror site/legal/assets/legal.css + the app,
with soft warm tints + subtle gradients + entrance motion for a livelier, premium feel. */
:root {
--bg: #ffffff; --surface: #f6f4f1; --surface-2: #eceae4;
--ink: #17150f; --ink-muted: #6b655b; --hairline: #e6e2d9;
--accent: #17150f; --on-accent: #ffffff;
--radius: 16px; --radius-lg: 26px;
--max: 76rem; --pad: clamp(1.25rem, 5vw, 2.5rem);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* soft light tints for gradients (very low saturation, high lightness) */
--glow-1: hsl(33 78% 90% / .55);
--glow-2: hsl(255 60% 93% / .38);
--glow-3: hsl(150 40% 92% / .30);
--tint-top: color-mix(in srgb, var(--surface) 38%, var(--bg));
/* Enige niet-neutrale kleur op de site: een warme, sterk ontzadigde brons/eiken-toon.
Alleen voor de tweede regel van de hero-kop en het icoontje in de pill. */
--warm: hsl(25 38% 39%);
}
@media (prefers-color-scheme: dark) {
:root { --bg: #131210; --surface: #1c1a16; --surface-2: #24211c;
--ink: #f2ede4; --ink-muted: #a99f90; --hairline: #322e27; --accent: #f2ede4; --on-accent: #131210;
--glow-1: hsl(33 58% 60% / .14);
--glow-2: hsl(255 45% 66% / .12);
--glow-3: hsl(150 35% 58% / .09);
--tint-top: color-mix(in srgb, var(--surface) 55%, var(--bg));
--warm: hsl(31 44% 71%); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
/* De width/height-attributen op ![]()
zijn "presentational hints" voor de CSS
width en height. Waar de CSS wel width:100% zet maar geen height, wint dus
height="938" van het attribuut en wordt het beeld uitgerekt. De attributen
moeten blijven staan (die voorkomen layout shift / CLS), dus neutraliseren we
de height hier. .ba__layer img zet 'm bewust terug op 100%. */
img { height: auto; }
a { color: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -0.028em; line-height: 1.04; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-muted); }
/* Tinted zone that melts into its neighbours: the wash fades to transparent at the top
and bottom edges, so every section shares the same page base colour at the seams and
there are no hard background transitions. The gradients simply lie on top. */
.tint { background:
linear-gradient(180deg,
transparent 0%,
color-mix(in srgb, var(--surface) 72%, var(--bg)) 16%,
color-mix(in srgb, var(--surface) 72%, var(--bg)) 84%,
transparent 100%); }
/* Entrance animation: elements rise + fade as they enter the viewport.
Uses the `translate` property so `transform` stays free for hover effects.
Only active when JS is on and the user hasn't asked to reduce motion.
Dit is met opzet een `animation` en geen `transition`. Er is per element maar
een `transition`-declaratie die wint, en componenten met een eigen hover-
overgang van twee klassen diep (`.trio .shot`, `.duo .shot`) hebben dezelfde
specificiteit als `.js .reveal`. Die stonden later in het bestand en wonnen
dus: op die kaarten viel de overgang van opacity en translate weg en sprongen
ze hard in beeld in plaats van in te faden. Een animation staat los van de
transition-declaratie, dus de reveal en de hover-lift zitten elkaar niet meer
in de weg, ook niet bij een component die hier later bij komt. */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; }
.js .reveal.is-in { animation: reveal-in .72s cubic-bezier(.22,.7,.24,1) var(--rd, 0ms) both; }
@keyframes reveal-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
}
/* Official Apple badge (black in light, white in dark) */
.badge { display: inline-block; transition: transform .18s ease, opacity .18s ease; }
.badge:hover { opacity: .9; transform: translateY(-2px); } .badge:active { transform: scale(.98); }
.badge img { height: 52px; width: auto; }
.badge .b-white { display: none; }
@media (prefers-color-scheme: dark) { .badge .b-black { display: none; } .badge .b-white { display: block; } }
.badge--sm img { height: 42px; }
/* Header + nav */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--hairline); }
.hdr__row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; font-size: 1.12rem; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav-links { display: flex; gap: 1.75rem; }
.nav-links a { position: relative; font-size: .95rem; font-weight: 550; color: var(--ink-muted); text-decoration: none; transition: color .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.7,.24,1); }
.nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); }
.hdr__right { display: flex; align-items: center; gap: 1rem; }
.lang { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; font-size: .8rem; font-weight: 600; }
.lang a { padding: .34rem .68rem; text-decoration: none; color: var(--ink-muted); transition: background .2s ease, color .2s ease; }
.lang a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 680px) { .hdr .badge--sm { display: none; } .hdr__row { gap: .75rem; height: 62px; } }
/* Hero - full-bleed soft glow (section background spans the whole viewport width) */
.hero { position: relative; text-align: center; padding-top: clamp(2.25rem, 5.5vw, 3.75rem); padding-bottom: clamp(3rem, 7vw, 5rem);
background:
radial-gradient(125% 88% at 50% -14%, var(--glow-1), transparent 56%),
radial-gradient(62% 62% at 88% -2%, var(--glow-2), transparent 60%),
radial-gradient(58% 62% at 6% 26%, var(--glow-3), transparent 62%); }
/* 15ch was afgestemd op de oude, kortere kop ("Zie je nieuwe keuken in je eigen
ruimte"). De huidige kop is 53 tekens en werd daardoor in een smalle koker
geperst. text-wrap: balance verdeelt de regels gelijkmatig. */
.hero h1 { max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.hero .lead { max-width: 52ch; margin: 1.25rem auto 0; text-wrap: pretty; }
.hero__cta { margin-top: 1.75rem; }
/* Soft washes echoed across the page. Each glow is kept interior (centred well away from
the section's top/bottom edges and fully faded to transparent before it) so every seam
is the shared page base colour and no hard transitions appear. Corners alternate for rhythm. */
#app { background:
radial-gradient(48% 36% at 90% 32%, var(--glow-2), transparent 60%),
radial-gradient(46% 36% at 6% 68%, var(--glow-3), transparent 60%); }
/* NL en EN gebruiken andere section-ids; beide moeten dezelfde wash krijgen. */
#stijlen, #styles { background:
radial-gradient(48% 36% at 9% 32%, var(--glow-1), transparent 60%),
radial-gradient(46% 34% at 94% 68%, var(--glow-2), transparent 60%); }
.cta-band { background:
radial-gradient(70% 58% at 50% 50%, var(--glow-1), transparent 62%),
radial-gradient(42% 36% at 88% 32%, var(--glow-3), transparent 60%); }
/* Robust before/after slider (clip-path; layers are identical full-size so no distortion) */
.ba { position: relative; width: min(444px, 87vw); aspect-ratio: 896 / 1200; margin: clamp(2rem, 5vw, 3rem) auto 0; border-radius: 24px; overflow: hidden; --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 44px 80px -34px rgba(0,0,0,.46); outline: none; }
.ba:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 35%, transparent), 0 44px 80px -34px rgba(0,0,0,.46); }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__label { position: absolute; top: 14px; z-index: 4; font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: #fff; background: rgba(0,0,0,.44); padding: .3rem .66rem; border-radius: 999px; backdrop-filter: blur(4px); }
.ba__label--before { left: 14px; } .ba__label--after { right: 14px; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 999px; background: #fff; color: #111; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .2s ease; }
.ba:hover .ba__grip { transform: translate(-50%,-50%) scale(1.06); }
.ba__grip svg { width: 22px; height: 22px; }
.ba__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; font-size: .72rem; font-weight: 550; color: #fff; background: rgba(0,0,0,.4); padding: .28rem .7rem; border-radius: 999px; backdrop-filter: blur(4px); pointer-events: none; transition: opacity .4s ease; }
/* Section header */
.shead { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 3.75rem); }
.shead h2 { text-wrap: balance; }
.shead .lead { margin-top: 1rem; }
/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); }
.step__n { width: 46px; height: 46px; border-radius: 999px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 100%, transparent), color-mix(in srgb, var(--accent) 70%, var(--ink-muted))); color: var(--on-accent); display: grid; place-items: center; font-weight: 650; font-size: 1.1rem; margin-bottom: 1.1rem; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.step h3 { margin-bottom: .4rem; }
.step p { margin: 0; color: var(--ink-muted); }
/* Feature rows (section by section) - screenshots keep their native aspect ratio */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.feature + .feature { margin-top: clamp(3.5rem, 9vw, 7rem); }
.feature--rev .feature__media { order: 2; }
.feature__media { display: flex; justify-content: center; }
.feature__media img { width: auto; max-width: 100%; max-height: clamp(440px, 60vh, 640px); border-radius: 32px; border: 1px solid var(--hairline); box-shadow: 0 30px 60px -32px rgba(0,0,0,.4); transition: transform .5s cubic-bezier(.22,.7,.24,1), box-shadow .5s ease; }
.feature:hover .feature__media img { transform: translateY(-6px); box-shadow: 0 44px 80px -34px rgba(0,0,0,.5); }
.feature__body .eyebrow { margin-bottom: .8rem; }
.feature__body p { color: var(--ink-muted); font-size: 1.08rem; margin: 1rem 0 0; max-width: 44ch; }
/* Styles */
.styles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.style-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.style-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.style-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.style-card:hover img { transform: scale(1.05); }
.style-card span { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.style-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.48), transparent 46%); }
/* Inspiration masonry */
.insp { columns: 4; column-gap: 1rem; }
.insp img { width: 100%; margin-bottom: 1rem; border-radius: var(--radius); border: 1px solid var(--hairline); break-inside: avoid; transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.insp img:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -20px rgba(0,0,0,.4); }
/* Final CTA */
.cta-band .inner { position: relative; overflow: hidden; background-color: var(--accent); background-image: radial-gradient(120% 130% at 12% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 52%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, #000 16%, transparent), transparent 55%); color: var(--on-accent); border-radius: var(--radius-lg); padding: clamp(3rem, 8vw, 5rem) var(--pad); text-align: center; }
.cta-band h2 { color: var(--on-accent); max-width: 18ch; margin: 0 auto; }
.cta-band p { color: color-mix(in srgb, var(--on-accent) 72%, transparent); margin: 1rem auto 0; max-width: 34ch; }
.cta-band .badge { margin-top: 2rem; }
.cta-band .badge .b-black { display: none; } .cta-band .badge .b-white { display: block; }
@media (prefers-color-scheme: dark) { .cta-band .badge .b-white { display: none; } .cta-band .badge .b-black { display: block; } }
/* Footer */
.foot { border-top: 1px solid var(--hairline); padding: 2.5rem 0; }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.foot a { color: var(--ink); text-decoration: none; font-weight: 550; font-size: .95rem; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot small { color: var(--ink-muted); }
.foot .brand { font-size: 1rem; }
/* Responsive */
@media (max-width: 820px) {
.steps { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; }
.feature { grid-template-columns: 1fr; gap: 2.25rem; text-align: center; }
.feature--rev .feature__media { order: 0; }
.feature__body p { margin-left: auto; margin-right: auto; }
.feature__media img { max-height: 66vh; }
.styles-grid { grid-template-columns: repeat(2, 1fr); }
.insp { columns: 2; }
}
@media (max-width: 680px) {
.foot__row { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}
/* ---------------------------------------------------------------------------
Additions for the merged site: skip link, use-case grid and the FAQ.
Same tokens as everything above; no new colours.
--------------------------------------------------------------------------- */
/* Keyboard users land here first and can jump past the sticky header. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .7rem 1.1rem; background: var(--accent); color: var(--on-accent); border-radius: 0 0 var(--radius) 0; font-weight: 600; text-decoration: none; }
.skip:focus { left: 0; }
.hero__note { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-muted); }
/* "How it works" is an for semantics; the numbered circles are the markers. */
.steps { list-style: none; padding: 0; margin: 0; }
/* Use cases */
.uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.use { padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg) 62%, transparent); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.use:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -28px rgba(0,0,0,.4); }
.use h3 { margin-bottom: .55rem; }
.use p { margin: 0; color: var(--ink-muted); }
/* FAQ: native so it works without JS and stays crawlable when closed. */
.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--hairline); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; padding: 1.35rem 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.08rem; font-weight: 620; margin: 0; }
/* Chevron drawn in CSS so it needs no extra request. */
.qa summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-top: .34rem; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .3s cubic-bezier(.22,.7,.24,1); }
.qa[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover h3 { color: var(--ink); }
.qa:focus-within summary { outline: none; }
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.qa > p { margin: 0 0 1.5rem; padding-right: 2rem; color: var(--ink-muted); max-width: 62ch; }
.qa a { color: var(--ink); text-underline-offset: 3px; }
.faq__note { max-width: 46rem; margin: 2.5rem auto 0; text-align: center; font-size: .92rem; color: var(--ink-muted); }
.faq__note a { color: var(--ink); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.qa[open] > p { animation: qa-in .32s cubic-bezier(.22,.7,.24,1) both; }
@keyframes qa-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 820px) {
.uses { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------------
"Een foto -> drie resultaten". Zelfde tokens en motion als de stijlkaarten;
de bron krijgt een pill-label (zoals de before/after-slider) en de resultaten
een plat label (zoals .style-card), zodat input en output visueel verschillen.
--------------------------------------------------------------------------- */
#varianten, #variants { background:
radial-gradient(46% 34% at 8% 26%, var(--glow-2), transparent 60%),
radial-gradient(48% 36% at 92% 74%, var(--glow-1), transparent 60%); }
.shot { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
/* Leesbaarheidsverloop onder het label. */
.shot::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.46), transparent 44%); pointer-events: none; }
.shot__tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
/* De bronfoto is invoer, geen resultaat: pill-label en geen hover-lift. */
.shot__tag--pill { left: 14px; bottom: 14px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.44); backdrop-filter: blur(4px); padding: .32rem .7rem; border-radius: 999px; text-shadow: none; }
.shot--src { width: min(340px, 100%); margin-inline: auto; box-shadow: 0 24px 48px -30px rgba(0,0,0,.45); }
/* Verbinding tussen bron en resultaten. */
.flow { display: grid; justify-items: center; gap: .5rem; color: var(--ink-muted); padding: clamp(1.25rem, 3vw, 2rem) 0; }
.flow__line { width: 1px; height: clamp(28px, 5vw, 44px); background: linear-gradient(to bottom, transparent, var(--hairline)); }
.flow svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
.flow svg { animation: flow-nudge 2.4s cubic-bezier(.22,.7,.24,1) infinite; }
@keyframes flow-nudge { 0%, 62%, 100% { transform: translateY(0); opacity: .75; } 78% { transform: translateY(4px); opacity: 1; } }
}
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.trio .shot { transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.trio .shot:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.trio .shot:hover img { transform: scale(1.04); }
.trio__note { max-width: 46ch; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; text-align: center; color: var(--ink-muted); font-size: .95rem; }
@media (max-width: 820px) {
.trio { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
/* ---------------------------------------------------------------------------
Stijlpagina's (/keukenstijlen/). Leunt zoveel mogelijk op wat er al staat:
.hero, .shead, .uses, .steps, .faq, .styles-grid en .cta-band worden
ongewijzigd hergebruikt. Wat hier bij komt is alleen wat de homepage niet
kent: een kruimelpad, een kleinere hero met een liggend beeld, een
tekstkolom en de twee sfeerbeelden.
--------------------------------------------------------------------------- */
/* Kruimelpad. Klein en rustig: het is oriëntatie, geen navigatie-element dat
de aandacht van de kop mag afnemen. */
.crumbs { padding-top: 1.5rem; font-size: .86rem; color: var(--ink-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--hairline); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 550; }
/* De subpagina-hero draagt een langere, beschrijvende kop dan de homepage.
Op de homepage-schaal (tot 4.6rem) zou die kop de halve viewport vullen,
dus hij krijgt hier een eigen, bescheidener bovengrens. */
.hero--sub { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }
/* Op deze pagina's staat het kruimelpad bóven de hero, dus begon de glow met
een harde rand precies onder die tekst: op een donkere achtergrond springt
de kleur daar in één pixel van rgb(19,18,16) naar rgb(38,31,23), en dat leest
als een losse balk. De glow ligt nu in een pseudo-element dat aan de bovenkant
uitvloeit, zodat de band naadloos in de paginakleur overgaat. */
.hero--sub { background: none; position: relative; isolation: isolate; }
.hero--sub::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(125% 88% at 50% -14%, var(--glow-1), transparent 56%),
radial-gradient(62% 62% at 88% -2%, var(--glow-2), transparent 60%),
radial-gradient(58% 62% at 6% 26%, var(--glow-3), transparent 62%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4.5rem);
mask-image: linear-gradient(180deg, transparent 0, #000 4.5rem);
}
.hero--sub h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch; }
/* Liggend hero-beeld, dezelfde schaduw- en radiusbehandeling als de
before/after-slider op de homepage zodat het hetzelfde gewicht heeft. */
.phero { margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 60rem; border-radius: 24px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 44px 80px -34px rgba(0,0,0,.4); }
.phero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Lopende tekst. Eén kolom op leesbreedte, gecentreerd onder de .shead. */
.prose { max-width: 40rem; margin: 0 auto; }
.prose p { color: var(--ink-muted); font-size: 1.06rem; margin: 0 0 1.15rem; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
/* Twee sfeerbeelden. Hergebruikt .shot, maar zonder het donkere verloop dat
daar alleen bestaat om een label leesbaar te houden: hier staat geen label. */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.duo .shot { transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.duo .shot::after { display: none; }
.duo .shot img { aspect-ratio: 4 / 3; }
.duo .shot:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.duo .shot:hover img { transform: scale(1.04); }
/* .style-card is op de homepage een en hier een
. De reset voor de
link zelf, zodat de kaart er identiek uitziet. */
a.style-card { display: block; text-decoration: none; color: inherit; }
a.style-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Overzichtskaarten op /keukenstijlen/: beeld met een kop en een alinea
eronder, in plaats van het label-in-beeld van .style-card. */
.scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.scard h2 { font-size: 1.35rem; margin: 1rem 0 .5rem; }
.scard h2 a { text-decoration: none; }
.scard h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.scard p { margin: 0; color: var(--ink-muted); }
.scard__link { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.scard__link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.scard__link:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.scard__link:hover img { transform: scale(1.05); }
.scard__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 820px) {
.scards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.duo { grid-template-columns: 1fr; }
.scards { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
/* ---------------------------------------------------------------------------
Hero in twee kolommen + visuele "zo werkt het".
Alleen de twee homepages krijgen dit: de hero hangt onder .hero--split en de
stappen onder .steps--visual. De stijlpagina's gebruiken .hero, .hero--sub en
.steps ongewijzigd, dus die blijven buiten schot.
--------------------------------------------------------------------------- */
/* Tekst links, beeld rechts: de before/after-vergelijking staat dan naast de
kop in plaats van eronder, dus een bezoeker ziet het bewijs zonder scrollen. */
.hero--split { text-align: left; padding-top: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
/* De glow staat op een gemaskeerd pseudo-element in plaats van op de sectie zelf.
Reden: de onderste radial (rond 76% hoogte, links) was aan de onderrand van de
hero nog niet uitgedoofd, dus daar knipte de sectiegrens hem af. In donkere modus
gaf dat een zichtbare horizontale naad: rgb(22,23,20) sprong daar in één pixel
naar rgb(19,18,16), en met de groene tint erin las dat als een streep. Het masker
dwingt de hele glowstapel naar nul vóór de rand, ongeacht hoe de radials later
nog verschuiven. Zelfde aanpak als bij .hero--sub, waar het kruimelpad bovenaan
hetzelfde probleem gaf. */
.hero--split { position: relative; isolation: isolate; }
.hero--split::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(108% 82% at 24% -14%, var(--glow-1), transparent 58%),
radial-gradient(60% 60% at 94% 4%, var(--glow-2), transparent 62%),
radial-gradient(54% 58% at 2% 70%, var(--glow-3), transparent 62%);
-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
/* Twee regels met verschil in gewicht: regel 1 volle inkt, regel 2 in een warm
verloop. .accent is display:block, dus de regelval staat vast en de kop kan
niet op een lelijk punt afbreken. */
.hero--split h1 { font-size: clamp(2.4rem, 3.55vw, 3.2rem); max-width: 24ch; margin: 1.3rem 0 0; text-wrap: balance; }
.hero--split h1 .accent { display: block; font-style: normal; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero--split h1 .accent {
background-image: linear-gradient(94deg, color-mix(in srgb, var(--warm) 55%, var(--ink)) 0%, var(--warm) 46%);
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent; }
}
.hero--split .lead { max-width: 46ch; margin: 1.2rem 0 0; font-size: clamp(1.02rem, 1.2vw, 1.14rem); }
/* Kleine kop boven de titel: neemt de bezwaren weg (kost niets, geen account). */
.pill { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .38rem .85rem .38rem .68rem; border: 1px solid var(--hairline); border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .84rem; font-weight: 550; color: var(--ink-muted); }
.pill svg { width: 16px; height: 16px; flex: none; color: var(--warm); }
.pill b { color: var(--ink); font-weight: 650; }
/* Badge + QR naast elkaar. De QR is er voor de bezoeker op een desktop: die kan
een iOS-app niet installeren waar hij zit, dus krijgt hij de app op zijn
telefoon zonder de link ergens naartoe te moeten sturen. */
.hero--split .hero__cta { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 1.9rem; }
.hero--split .badge img { height: 58px; }
.hero__qr { display: flex; align-items: center; gap: .7rem; padding-left: clamp(1rem, 1.8vw, 1.5rem); border-left: 1px solid var(--hairline); }
.hero__qr img { width: 72px; height: 72px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--hairline); }
.hero__qr span { font-size: .78rem; line-height: 1.35; color: var(--ink-muted); max-width: 10ch; }
/* Drie feiten onder de knop, in de plaats van de losse regel met kleine letters. */
/* Een rij die afbreekt laat een los scheidingsstreepje aan het begin van de
tweede regel staan. Daarom breekt hij niet af maar krimpt hij mee; onder
700px staan de feiten onder elkaar (zie verderop). */
.hero__stats { display: flex; flex-wrap: nowrap; list-style: none; margin: 1.6rem 0 0; padding: 0; font-size: clamp(.8rem, .95vw, .92rem); color: var(--ink-muted); }
.hero__stats li { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.hero__stats li + li { margin-left: 1.15rem; padding-left: 1.15rem; border-left: 1px solid var(--hairline); }
.hero__stats b { color: var(--ink); font-weight: 660; font-size: 1.12rem; letter-spacing: -0.01em; }
.hero__media { display: flex; justify-content: center; }
.hero--split .ba { width: min(100%, 452px); margin: 0; }
@media (max-width: 1080px) { .hero__qr { display: none; } }
/* Eén kolom: alles gecentreerd, de vergelijking onder de tekst. */
@media (max-width: 980px) {
.hero--split { text-align: center; }
.hero__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
.hero--split h1 { font-size: clamp(2.05rem, 5.6vw, 3rem); max-width: 22ch; margin-left: auto; margin-right: auto; }
.hero--split .lead { margin-left: auto; margin-right: auto; }
.hero--split .hero__cta { justify-content: center; }
.hero__stats { justify-content: center; }
.hero--split .ba { width: min(100%, 400px); }
}
/* Telefoon. Drie dingen die het beeld eerder in zicht brengen en de tekst
rustiger maken:
1. De kop loopt door over de kleurgrens (`.accent` inline) in plaats van er
een vaste regelval te forceren. Op een schermbreedte van een telefoon
levert dat drie regels in plaats van vier, bij een grotere letter.
2. De intro staat op leesbreedte en iets kleiner.
3. De drie cijfers staan als drie kolommen met het getal boven het label,
niet als drie losse regels met vet er middenin. */
@media (max-width: 700px) {
.hero--split { padding-top: 1.25rem; }
.pill { font-size: .8rem; padding: .34rem .75rem .34rem .6rem; }
.hero--split h1 { font-size: clamp(2.05rem, 8.4vw, 2.5rem); max-width: 26ch; margin-top: 1rem; }
.hero--split h1 .accent { display: inline; }
.hero--split .lead { margin-top: .9rem; max-width: 40ch; font-size: 1rem; }
.hero--split .hero__cta { margin-top: 1.4rem; }
.hero--split .badge img { height: 54px; }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.35rem; font-size: .78rem; }
.hero__stats li { flex-direction: column; align-items: center; gap: .05rem; white-space: normal; }
.hero__stats li + li { margin-left: 0; padding-left: 0; border-left: 1px solid var(--hairline); }
.hero__stats b { font-size: 1.05rem; }
}
/* "Zo werkt het" met beeld per stap: foto -> app -> resultaat. Hergebruikt
.shot (kader, verloop en pill-label) van de varianten-sectie, zodat er geen
tweede manier bij komt om hetzelfde te tekenen. */
.steps--visual { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.step__shot { margin: 0 0 1.2rem; box-shadow: 0 20px 40px -28px rgba(0,0,0,.45); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.steps--visual .step:hover .step__shot { transform: translateY(-4px); box-shadow: 0 28px 48px -26px rgba(0,0,0,.5); }
.steps--visual .step:hover .step__shot img { transform: scale(1.035); }
.steps--visual .step h3 { margin-bottom: .45rem; }
/* Het stapnummer staat naast de titel en niet in het beeld: in stap 2 (een
schermafbeelding) zou het over de app-tekst heen vallen. */
.steps--visual .step h3 { display: flex; align-items: flex-start; gap: .6rem; }
.step__no { flex: none; width: 27px; height: 27px; margin-top: .04em; border-radius: 999px; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--ink-muted))); color: var(--on-accent); display: grid; place-items: center; font-size: .8rem; font-weight: 650; box-shadow: 0 6px 16px -9px color-mix(in srgb, var(--accent) 60%, transparent); }
/* Stap 2 is een schermafbeelding op wit: daar hoort het donkere
leesbaarheidsverloop van .shot niet bij (er staat ook geen label in). */
.step__shot--ui { border-color: color-mix(in srgb, var(--ink) 13%, transparent); }
.step__shot--ui::after { display: none; }
@media (max-width: 820px) {
.steps--visual { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
/* ---------------------------------------------------------------------------
Blog (/blog/): de index met artikelkaarten en de artikelpagina zelf.
Leunt op de bestaande tokens en op .crumbs, .hero--sub, .shead, .faq en
.cta-band. Wat hier bij komt is wat de site nog niet kende: een leeskolom
voor lange tekst, een inhoudsopgave, een tabel, een kader, een byline en de
zwarte pil-knop die de App Store-badge middenin een artikel vervangt.
--------------------------------------------------------------------------- */
/* Labels boven een titel (onderwerp, niet klikbaar: een tagpagina met drie
artikelen erop is dunne inhoud en die willen we niet in de index). */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 .9rem; padding: 0; }
.chip { font-size: .67rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); border: 1px solid var(--hairline); border-radius: 999px; padding: .26rem .58rem; }
/* Datum en leestijd. */
.bmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; font-size: .82rem; color: var(--ink-muted); }
.bmeta span + span::before { content: "·"; margin-right: .45rem; }
/* Kaartenraster op /blog/. Zelfde beeldbehandeling als .scard, dus de index
voelt als de stijlenhub. */
.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.bcard { display: flex; flex-direction: column; }
.bcard__link { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.bcard__link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
.bcard__link:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.bcard__link:hover img { transform: scale(1.05); }
.bcard__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bcard h2, .bcard h3 { font-size: 1.22rem; margin: 1rem 0 .5rem; text-wrap: balance; }
.bcard h2 a, .bcard h3 a { text-decoration: none; }
.bcard h2 a:hover, .bcard h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bcard p { margin: 0 0 .8rem; color: var(--ink-muted); font-size: .97rem; }
.bcard .bmeta { margin-top: auto; }
.bcard .chips { margin: .9rem 0 0; }
/* Vier kaarten in een driekolomsraster laten er één alleen op de tweede rij
achter. Zolang er precies vier kaarten onder het uitgelichte artikel staan,
zetten we ze in 2x2; de beelden worden er meteen groter van. Komt er een
vijfde bij, haal deze klasse dan van de af. */
.bcards--twee { grid-template-columns: repeat(2, 1fr); }
/* Het nieuwste artikel groot boven het raster: beeld naast de tekst. */
.bfeat { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.bfeat__body h2 { font-size: clamp(1.7rem, 2.7vw, 2.3rem); margin: .9rem 0 0; text-wrap: balance; }
.bfeat__body h2 a { text-decoration: none; }
.bfeat__body h2 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.bfeat__body p { color: var(--ink-muted); margin: .9rem 0 1.1rem; font-size: 1.04rem; max-width: 46ch; }
.bfeat .bcard__link img { aspect-ratio: 16 / 9; }
/* De blog-index-hero draagt geen knop, dus onder de intro hoort minder ruimte
dan onder een hero met een CTA. Zonder dit staat er een leeg vlak van bijna
200px tussen de intro en het eerste artikel. */
.hero--blog { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
#artikelen { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* --- artikelpagina ------------------------------------------------------ */
/* Leeskolom. 40rem tekst op een 76rem pagina: ~72 tekens per regel, wat voor
lopende tekst het prettigst leest. */
.art { max-width: 41rem; margin: 0 auto; }
/* De sectie om het artikel heen draagt de standaard sectiepadding van de site
(tot 6,5rem). Boven een kop die direct onder een kruimelpad staat is dat een
gat; de kop hoort in beeld te staan zonder scrollen. */
.sec--art { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.art__head h1 { font-size: clamp(2rem, 4.2vw, 2.85rem); line-height: 1.07; text-wrap: balance; }
.art__dek { font-size: clamp(1.06rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--ink-muted); margin: 1.1rem 0 0; text-wrap: pretty; }
/* Wie dit schreef, staat er met naam. Bij een blog van één maker is dat het
enige ervaringssignaal dat er is, dus het hoort boven de tekst en niet
ergens onderaan in het klein. */
.byline { display: flex; align-items: center; gap: .75rem; margin: 1.6rem 0 0; }
.byline img { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--hairline); }
.byline b { display: block; font-size: .95rem; font-weight: 620; }
.byline .bmeta { margin-top: .1rem; }
/* 16:9. Dat is een van de drie beeldverhoudingen die Google voor Article-beeld
noemt (16:9, 4:3, 1:1), en het is het formaat dat social netjes uitsnijdt. */
.art__hero { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 34px 64px -36px rgba(0,0,0,.42); }
.art__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Zwarte pil. De App Store-badge is het hoofdmiddel op de landingspagina's;
middenin een artikel is een badge te zwaar en te commercieel, dus daar staat
deze knop met dezelfde bestemming. */
.btnrow { display: flex; justify-content: center; margin: clamp(1.75rem, 4vw, 2.25rem) 0; }
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.45rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 620; font-size: 1rem; letter-spacing: -0.01em; transition: transform .2s ease, opacity .2s ease, box-shadow .3s ease; box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:hover { transform: translateY(-2px); opacity: .94; box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:active { transform: scale(.99); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn__note { text-align: center; margin: -.6rem 0 0; font-size: .84rem; color: var(--ink-muted); }
/* .art__body a (0,1,1) is specifieker dan .btn (0,1,0) en zette het label van de
knop middenin het artikel op --ink: zwarte tekst op een zwarte pil, dus
onleesbaar. Vandaar deze regel, die specifieker is dan beide. */
.art__body .btn { color: var(--on-accent); text-decoration: none; }
/* Inhoudsopgave. Statische lijst, geen JS: de koppen hebben een id en
scroll-padding-top staat al globaal ingesteld voor de sticky header. */
.toc { margin: clamp(2rem, 4vw, 2.5rem) 0; padding: clamp(1.1rem, 2.5vw, 1.4rem) clamp(1.2rem, 3vw, 1.6rem); background: color-mix(in srgb, var(--surface) 65%, var(--bg)); border: 1px solid var(--hairline); border-radius: var(--radius); }
.toc > b { font-size: .95rem; font-weight: 640; }
.toc ol { margin: .7rem 0 0; padding-left: 1.35rem; font-size: .97rem; color: var(--ink-muted); }
.toc li { margin: .34rem 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Lopende tekst. Iets groter en met meer regelafstand dan de rest van de site,
en in volle inkt in plaats van --ink-muted: dit is de enige plek waar iemand
duizend woorden achter elkaar leest. */
.art__body { font-size: 1.07rem; line-height: 1.72; }
.art__body p { margin: 0 0 1.4rem; text-wrap: pretty; }
.art__body h2 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); margin: clamp(2.25rem, 5vw, 2.9rem) 0 .85rem; }
.art__body h3 { font-size: 1.14rem; margin: 1.9rem 0 .55rem; }
.art__body ul, .art__body ol { margin: 0 0 1.3rem; padding-left: 1.35rem; }
.art__body li { margin: .38rem 0; }
.art__body li > ul, .art__body li > ol { margin: .4rem 0 .2rem; }
.art__body strong { font-weight: 640; }
.art__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent); transition: text-decoration-color .2s ease; }
.art__body a:hover { text-decoration-color: var(--ink); }
.art__body > :first-child { margin-top: 0; }
/* Beeld in de tekst, met een bijschrift dat vertelt wat je ziet. */
.fig { margin: clamp(1.75rem, 4vw, 2.4rem) 0; }
.fig img { width: 100%; border-radius: var(--radius); border: 1px solid var(--hairline); }
.fig figcaption, .cap { margin-top: .65rem; font-size: .84rem; line-height: 1.5; color: var(--ink-muted); }
.fig--pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fig--pair figcaption { grid-column: 1 / -1; margin-top: 0; }
/* Een schermafbeelding van een telefoon is staand: op volle kolombreedte wordt
die anderhalve viewport hoog. Vandaar een eigen, smallere maat. */
.fig--phone { max-width: 300px; margin-inline: auto; }
.fig--phone img { border-radius: 22px; }
/* Het korte antwoord bovenaan een artikel.
Bewust GEEN kader: een afgeronde bak met een tint en een gekleurd streepje
links is het standaard callout-blokje dat in elke gegenereerde tekst staat,
en het trekt meer aandacht naar de doos dan naar de zin. Dit is de opzet uit
een tijdschrift: een klein label, de tekst een maat groter dan de rest, en
twee haarlijnen die het blok begrenzen. Geen kleur, geen radius, geen vulling. */
.answer { margin: clamp(1.75rem, 4vw, 2.4rem) 0; padding: clamp(1rem, 2.5vw, 1.3rem) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.answer > b { display: block; margin-bottom: .55rem; font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.answer p { margin: 0; font-size: 1.14rem; line-height: 1.62; letter-spacing: -0.005em; }
.answer p + p { margin-top: .75rem; }
.answer ul, .answer ol { margin: .7rem 0 0; }
@media (max-width: 620px) { .answer p { font-size: 1.08rem; } }
/* Tabel. Scrolt in zijn eigen kader op een telefoon; de pagina zelf schuift
nooit horizontaal. */
.tw { margin: clamp(1.75rem, 4vw, 2.25rem) 0; overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.art__body table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.art__body th, .art__body td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.art__body thead th { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); font-weight: 640; white-space: nowrap; }
.art__body tbody tr:last-child td { border-bottom: 0; }
.art__body caption { caption-side: bottom; padding: .6rem .85rem; font-size: .82rem; color: var(--ink-muted); text-align: left; }
/* Bijgewerkt-regel en de kaart met wie dit schreef. */
.art__updated { margin: clamp(2.25rem, 5vw, 3rem) 0 0; padding-top: 1.1rem; border-top: 1px solid var(--hairline); font-size: .84rem; color: var(--ink-muted); }
.abox { display: flex; gap: 1.1rem; align-items: flex-start; margin: 1.5rem 0 0; padding: clamp(1.15rem, 3vw, 1.5rem); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 45%, var(--bg)); }
.abox img { flex: none; width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--hairline); }
.abox b { font-size: .98rem; }
.abox p { margin: .3rem 0 0; font-size: .93rem; color: var(--ink-muted); }
@media (max-width: 860px) {
.bfeat { grid-template-columns: 1fr; gap: 1.25rem; }
.bfeat .bcard__link img { aspect-ratio: 16 / 9; }
}
@media (max-width: 820px) {
.bcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.art__body { font-size: 1.04rem; line-height: 1.68; }
.fig--pair { grid-template-columns: 1fr; }
.abox { flex-direction: column; gap: .8rem; }
}
@media (max-width: 560px) {
.bcards { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}