/* ===========================================================================
NA HET AFSLUITEN — de opmaak van deze ene pagina.
Wat deze pagina van elders haalt en hier dus niet staat:
pagina.css de tokens, de balk, het menu, de voet, .visually-hidden
glas.css de --glas-tokens en de lichte ruit
carrousel.css de donkere band met het vloervlak, het gespreksvenster
en de chatbalk erin
landing-vloer.js het vloervlak en de besturing van de band
Wat hier wél staat: de donkere kop, het raster kop-links/inhoud-rechts, de
drie kaarten van "Schade melden" en de twee panelen onderaan.
VOLGORDE: als laatste, na de drie andere bestanden.
De maten komen uit het goedgekeurde ontwerp van 14 september 2026 en staan
hieronder als tokens bij elkaar, zodat er geen getal twee keer in dit
bestand voorkomt.
=========================================================================== */
:root {
/* De schil van deze pagina is breder dan die van pagina.css (1024), maar
pas op een scherm dat het heeft. Onder 1300 blijft alles zoals het
elders staat. */
--na-schil: 1024px;
--na-pad-y: clamp(88px, 10vw, 152px);
--na-radius: 28px; /* de buitenste kaders */
--na-radius-binnen: 14px; /* alles wat daarin zit */
}
@media (min-width: 1300px) { :root { --na-schil: 1180px; } }
/* De leestekst een maat groter dan op de rest van de site. Onder 1100 pixels
terug naar de gewone maat: 21px in een kolom die dan nog maar 600 breed is,
leest als een grote letter in een smalle koker. */
.na-sectie .body,
.na-kaart__tekst,
.na-paneel p { font-size: 21px; line-height: 1.6; }
@media (max-width: 1099px) {
.na-sectie .body,
.na-kaart__tekst,
.na-paneel p { font-size: var(--size-body); line-height: var(--leading-body); }
}
.na-sectie { padding: var(--na-pad-y) var(--gutter); }
.na-sectie--tint { background: var(--surface-tint); }
.na-sectie__inner { margin: 0 auto; width: 100%; max-width: var(--na-schil); }
/* --- 1. De donkere kop -------------------------------------------------
Rechte hoeken, zoals de band onderaan: dit is dezelfde donkere laag, één
keer bovenaan en één keer in het midden van de pagina. De bovenmarge van
148 is de vaste balk plus lucht — die balk is hier donker over donker, dus
de kop moet er los van komen te staan.
----------------------------------------------------------------------- */
.na-kop {
position: relative; overflow: hidden;
background: var(--hero-bg); color: var(--hero-text);
padding: 148px var(--gutter) clamp(64px, 7vw, 96px);
min-height: 42vh;
display: flex; align-items: center;
}
.na-kop__inner {
position: relative; z-index: 2;
margin: 0 auto; width: 100%; max-width: var(--na-schil);
text-align: center;
}
.na-kop h1 {
/* `auto` en niet `0`, sinds 15 september 2026.
De kop stond hier links terwijl de zin eronder gecentreerd stond. Niet
omdat de tekst links uitgelijnd was — .na-kop__inner zet text-align op
center en de h1 erft dat netjes — maar omdat het DOOSJE eromheen links
hing: pagina.css geeft elke h1 een max-width van --max-head (860) en
margin: 0, en deze regel zette die nul er nog eens overheen. Een blok van
860 in een schil van 1180 zonder automarges begint aan de linkerrand, en
de tekst staat dan netjes gecentreerd in dát blok — honderdzestig pixels
links van het midden van de pagina. De zin eronder had zijn `auto` wel
(zie .na-kop .body--lead) en stond daarom wél goed.
Deze pagina is de enige plek waar dat misging: de hoofdpagina zet haar
kop in een flexkolom met align-items: center en de landingspagina's doen
hetzelfde. Nagemeten over de drie, na de wijziging staat alles op nul. */
margin: 0 auto;
font-size: clamp(38px, 5.2vw, 64px);
line-height: 1.08;
letter-spacing: var(--tracking-tight);
color: inherit;
}
.na-kop .body--lead {
margin: 18px auto 0; max-width: 44ch;
font-size: 24px; line-height: 1.5;
color: color-mix(in srgb, var(--hero-text) 86%, transparent);
}
@media (max-width: 899px) {
.na-kop { padding-top: 124px; }
.na-kop .body--lead { font-size: var(--size-lead); }
}
/* --- 2. Kop links, inhoud rechts ---------------------------------------
Eén raster voor de secties met een kop naast hun inhoud. 7 om 11: de kop
is kort en de inhoud draagt het gewicht. Onder 1100 onder elkaar, want
naast elkaar wordt de leeskolom daar smaller dan 40 tekens.
----------------------------------------------------------------------- */
.na-rij { display: grid; gap: 28px; }
@media (min-width: 1100px) {
.na-rij { grid-template-columns: 7fr 11fr; gap: 48px; align-items: start; }
}
/* Op verzoek even groot als de kop in de donkere band erboven — dezelfde
maat en regelhoogte als h1 in pagina.css, hier lokaal herhaald omdat een
h2 anders op --size-h2 blijft hangen (26–42px in plaats van 34–64px). Dit
is de enige plek waar .na-rij__kop voorkomt, dus raakt niets anders. */
.na-rij__kop h2 { margin: 0; font-size: var(--size-h1); line-height: var(--leading-h1); }
.na-rij__inhoud { display: flex; flex-direction: column; gap: 14px; }
/* Sectie 4 ("Al uw polissen" / "Waar uw gegevens staan") stapelt twee van
deze rijen in dezelfde sectie — de eerste valt weg zodra `mijnDossier`
verborgen is. Ruimte tussen twee opeenvolgende rijen, alleen als er ook
echt een tweede op volgt. */
.na-rij + .na-rij { margin-top: 56px; }
/* --- De drie kaarten van "Schade melden" -------------------------------
Elke kaart is één van de drie alinea's die hier al stonden, met zijn
nummer ervoor en een knop erachter die de assistent opent met precies die
tekst als eerste bericht. Geen nieuwe uitleg dus, en niets dat de tekst
herhaalt in andere woorden.
DE KNOP IS DE KNOP, NIET DE KAART. Een kaart die in zijn geheel klikbaar
is, moet zijn eigen tekst nog eens als aria-label dragen, en dan staat
dezelfde zin twee keer in de toegankelijkheidsboom. Nu draagt de knop het
label en blijft de kaarttekst gewoon tekst — te selecteren, te vertalen en
voor te lezen zoals ze is.
----------------------------------------------------------------------- */
/* 15 september 2026: één hoek van de kaart platter, zoals de linkerhoek van
.van-omata in landing.css — dezelfde streek die daar een berichtenballon
van een gewone kaart maakt. Ruime max-width omdat de sectie de kaart
anders over de volle 11fr van .na-rij trekt, en een bericht dat de hele
regel vult, leest niet als bericht. */
.na-kaart {
display: flex; align-items: flex-start; gap: 16px;
max-width: 88%;
padding: 22px 24px;
border-radius: var(--na-radius);
border-bottom-left-radius: 8px;
background: var(--glas-licht);
border: 1px solid var(--glas-rand-licht);
box-shadow: var(--glas-glans), var(--glas-schaduw);
backdrop-filter: blur(var(--glas-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%);
}
@media (max-width: 559px) { .na-kaart { max-width: 100%; } }
/* Het nummer in het gele rondje. Versiering met een volgorde erin: de
nummering zit ook in de leesvolgorde van de drie kaarten zelf, dus dit
rondje is aria-hidden en hoeft de 3:1 van een pictogram niet te halen —
zie de toelichting bij --accent2 in pagina.css. */
.na-kaart__nr {
flex: none; display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 999px;
/* Door het token en niet als eigen rgba. Stond hier als rgba(244,197,24) —
het gele accent, met de hand overgeschreven — en was daarmee de enige
plek die de afspraak brak dat elk accent uit --accent2 komt. Toen dat
geel op 15 september 2026 wegging, bleef dit dus geel achter. */
background: color-mix(in srgb, var(--accent2) 18%, transparent);
color: var(--text-primary);
font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.na-kaart__tekst { margin: 0; flex: 1; min-width: 0; color: var(--text-body); }
.na-kaart__knop {
flex: none; display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 999px;
border: 1px solid var(--rule);
background: transparent; color: var(--text-primary);
cursor: pointer; -webkit-appearance: none; appearance: none;
transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.na-kaart__knop:hover { background: var(--washi); border-color: var(--text-primary); }
.na-kaart__knop:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
/* De voorgeprogrammeerde vragen onder de drie berichten: dezelfde
knop-in-een-pil als .lp-veld__vraag op de landingspagina's (dat bestand
laadt hier niet, vandaar een eigen versie met dezelfde tokens). Klikken
vult het chatveld met de vraag zelf, via dezelfde [data-vraag]-luisteraar
in pagina.js die de drie kaarten hierboven ook gebruiken. */
.na-vragen {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 4px 0 0; padding: 0; list-style: none;
}
.na-vragen__item {
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--rule);
background: var(--glas-licht);
color: var(--text-primary);
font: inherit; font-size: 15px;
cursor: pointer; -webkit-appearance: none; appearance: none;
transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.na-vragen__item:hover { background: var(--washi); border-color: var(--text-primary); }
.na-vragen__item:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
/* --- 4. "Al uw polissen" en "Waar uw gegevens staan" -------------------
Stond hier eerst als twee kaarten naast elkaar, elk met een eigen titel
erin (.na-panelen). Op verzoek 15 september 2026 omgezet naar dezelfde
vorm als "Schade melden" hierboven: een grote titel in .na-rij__kop, de
kaart in .na-rij__inhoud. .na-paneel is daardoor alleen nog de kaart zelf
— geen eigen kop, geen icoon, dat werk doet nu de rij eromheen. */
.na-paneel {
position: relative; overflow: hidden;
padding: 30px 56px 32px 30px;
border-radius: var(--na-radius);
background: var(--glas-licht);
border: 1px solid var(--glas-rand-licht);
box-shadow: var(--glas-glans), var(--glas-schaduw);
backdrop-filter: blur(var(--glas-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%);
}
.na-paneel p + p { margin-top: 14px; }
/* De balk van 3 pixels bovenaan de kaart bij "Al uw polissen". Kleur alléén
draagt hier niets: het verschil met de andere kaart staat ook in de
titel ernaast en in de tekstkleur. */
.na-paneel--groen::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--shu);
}
.na-paneel p { margin: 0; color: var(--text-body); }
.na-paneel--grijs p { color: var(--sumi-light); }
/* Dezelfde knop als op de kaarten van "Schade melden", rechtsboven in de
kaart. De link in de tekst blijft buiten de klikzone: die gaat naar het
privacybeleid en niet naar de assistent. */
.na-paneel__knop {
position: absolute; top: 22px; right: 22px;
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 999px;
border: 1px solid var(--rule);
background: transparent; color: var(--text-primary);
cursor: pointer; -webkit-appearance: none; appearance: none;
transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.na-paneel__knop:hover { background: var(--washi); border-color: var(--text-primary); }
.na-paneel__knop:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
/* --- De band op deze pagina --------------------------------------------
carrousel.css doet het werk; hier staat alleen wat deze pagina anders
heeft dan de hoofdpagina: de titelregel is lang en staat op één pagina
zonder iets eronder, dus hij mag ruimer.
De regelhoogte is 1,2 en niet 1,1: op 1,1 raakt de staart van de "g" van
"krijg" het macron van de "Ō" van "Ōmata" op de regel eronder. Nagekeken
op 1440, 1180 en 900 breed.
----------------------------------------------------------------------- */
.lp-carrousel__titel {
/* Geen afbreekstreepje. Deze regel was tot 15 september 2026 een en
kreeg het daarom niet; als
erft hij `hyphens: auto` van pagina.css
en werd "helder" ineens "hel-der antwoord". Zelfde keuze en zelfde reden
als bij .lp-hero h1 in landing.css: op deze maat is een streepje midden
in een woord geen hulp maar een fout. overflow-wrap blijft als vangnet. */
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: break-word;
margin: 0 auto; max-width: 20ch;
font-size: clamp(34px, 3.8vw, 54px);
line-height: 1.2;
letter-spacing: var(--tracking-tight);
font-weight: 600;
}
/* De pagina's van de band vullen de breedte. Zonder dit krimpt een pagina
tot de breedte van zijn inhoud en staat de chatbalk niet meer in het
midden maar tegen zijn eigen tekst aan. */
.lp-carrousel__pagina > * { width: 100%; }
/* --- Eén paneel, geen carrousel -----------------------------------------
15 september 2026. De band droeg drie pagina's die je met pijlen en
stippen doorliep; twee daarvan waren leeg zolang hun schakelaar in
config.js uit staat, en wat overbleef was bladeren tussen een kop en een
kop met een balk. Die twee staan nu samen op één beeld. Zie de toelichting
bij de sectie in na-het-afsluiten/index.html.
Drie regels, want alles eromheen blijft van .lp-carrousel: de band, de
vloer, de maatvoering, de koppen. Het enige wat verandert is dat het
paneel niet langer absoluut over zijn buren ligt — dat hoefde alleen zolang
er buren wáren — en dat het veld daarom zelf moet centreren.
De hoogte van .lp-carrousel__veld blijft staan (520, 460 op smal): dat is
de maat van de band, en die hangt niet aan het aantal pagina's. */
.lp-carrousel--enkel .lp-carrousel__veld {
display: flex;
align-items: center;
justify-content: center;
}
.lp-carrousel--enkel .lp-carrousel__pagina { position: static; }