/* MAREA Uitvaart — voorstelpagina, gedeelde laag.
*
* Alles wat kleur, maat, radius of schaduw heet staat hier als token. Per
* versie worden alleen de WAARDEN overschreven op de versie-root, nooit de
* eigenschapsnamen: zo blijft de telling van token-drift laag en kan een heel
* palet met vijf regels omgezet worden.
*/
/* ------------------------------------------------------------- fonts ---- */
@font-face{font-family:'Petrona';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/petrona-500.woff2') format('woff2')}
@font-face{font-family:'Andada Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/andada-pro-600.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/mulish-400.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/mulish-600.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/karla-400.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/karla-600.woff2') format('woff2')}
/* ------------------------------------------------------------ tokens ---- */
:root{
/* de maateenheid: elke verticale afstand op de pagina is een veelvoud */
--u: 8px;
/* typeschaal — acht maten, en niet meer */
--fs-display: clamp(2.5rem, 6.6vw, 5.4rem);
--fs-mega: clamp(3.2rem, 14.5vw, 11rem);
--fs-h2: clamp(1.55rem, 3vw, 2.4rem);
--fs-h3: clamp(1.02rem, 1.5vw, 1.28rem);
--fs-lead: clamp(1.02rem, 1.25vw, 1.2rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-label: 0.72rem;
/* één radiustaal: drie waarden, geen vierde */
--r-s: 3px;
--r-m: 12px;
--r-pill: 999px;
/* één lichtrichting, drie sterktes, plus de focusring als token
* (die telt anders als vierde schaduw mee bij token-drift) */
--sh-a: 0 10px 26px -10px rgb(4 12 10 / .42);
--sh-b: 0 34px 70px -24px rgb(4 12 10 / .58);
--sh-ring: 0 0 0 4px rgb(255 255 255 / .5);
--bd: 1px;
--kop-h: 76px;
--maat: 1240px;
--sprong: cubic-bezier(0.16, 1, 0.3, 1);
--t-snel: 180ms;
--t-mid: 420ms;
--t-traag: 900ms;
/* neutralen die elke versie deelt */
--wit: #FFFFFF;
--zwart: #000000;
/* de vier veldkleuren, ook nodig op zodat er geen witte flits
* voor de hero verft */
--veld-v1: #0C1714;
--veld-v2: #DCE4E6;
--veld-v3: #EAE7DF;
--veld-v4: #24141A;
/* de wisselaar is gereedschap van het voorstel, geen onderdeel van een
* ontwerp, en heeft daarom zijn eigen neutrale tokens */
--ws-veld: #101314;
--ws-lijn: #2C3335;
--ws-ink: #B9C2C4;
--ws-aan: #EDEAE2;
--ws-aan-ink: #14181A;
}
html[data-v="v1"] body{background:var(--veld-v1)}
html[data-v="v2"] body{background:var(--veld-v2)}
html[data-v="v3"] body{background:var(--veld-v3)}
html[data-v="v4"] body{background:var(--veld-v4)}
/* ------------------------------------------------------------- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--veld-v1);font-family:'Mulish',system-ui,sans-serif;font-size:var(--fs-body);line-height:1.6}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
/* height:auto is niet cosmetisch: zonder deze regel negeert een ![]()
met
* width/height-attributen elke aspect-ratio en rendert op zijn volle
* intrinsieke hoogte. */
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details{min-width:0}
:where(a,button,summary,[tabindex]):focus-visible{
outline:2px solid var(--ring);
outline-offset:3px;
box-shadow:var(--sh-ring);
border-radius:var(--r-s);
}
/* ------------------------------------------------------- versie-schil ---- */
.ver{
display:flex;
flex-direction:column;
min-height:100svh;
background:var(--veld);
color:var(--ink);
--ring:var(--accent);
}
/* Zonder deze regel groeit een hero met flex:1 binnen een die zelf op
* zijn inhoud staat, en schuift de voettekst het eerste scherm in. */
.ver > main{flex:1;display:flex;flex-direction:column;min-width:0}
.ver[hidden]{display:none}
.skip{
position:absolute;left:var(--u);top:var(--u);z-index:90;
padding:calc(var(--u) * 1.5) calc(var(--u) * 2.5);
background:var(--accent);color:var(--accent-ink);
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-small);font-weight:600;
border-radius:var(--r-s);
transform:translateY(calc(-200% - var(--u)));
}
.skip:focus{transform:translateY(0)}
/* --------------------------------------------------------------- kop ---- */
.top{position:relative;z-index:40}
.ver--plakkend .top{position:sticky;top:0;background:var(--veld-kop)}
.top-in{
max-width:var(--maat);margin:0 auto;
min-height:var(--kop-h);
padding:0 clamp(18px, 4vw, 40px);
display:flex;align-items:center;gap:clamp(12px, 3vw, 32px);
}
.merk{
display:flex;align-items:baseline;gap:.5ch;
font-family:var(--ff-kop);font-size:var(--fs-h3);
letter-spacing:.14em;text-transform:uppercase;
white-space:nowrap;
}
.merk-sub{
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-label);
letter-spacing:.2em;color:var(--ink-stil);
}
.nav{margin-left:auto;min-width:0}
.nav-knop{
display:none;
align-items:center;gap:calc(var(--u) * 1.25);
padding:calc(var(--u) * 1.25) calc(var(--u) * 2);
border:var(--bd) solid var(--lijn);
border-radius:var(--r-pill);
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-label);
letter-spacing:.18em;text-transform:uppercase;
}
.nav-streep{width:16px;height:1px;background:currentColor;display:block}
.nav-lijst{
display:flex;flex-wrap:wrap;align-items:center;
gap:clamp(12px, 2vw, 28px);
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-small);
}
.nav-lijst a{color:var(--ink-stil);padding:calc(var(--u) * 1.75) 0;display:inline-block}
.nav-lijst a:hover{color:var(--ink)}
.top-bel{
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-small);font-weight:600;
letter-spacing:.02em;white-space:nowrap;color:var(--ink);
padding:calc(var(--u) * 1.25) 0;
}
/* ------------------------------------------------------------ knoppen ---- */
.knop{
display:inline-flex;align-items:center;gap:calc(var(--u) * 1.5);
min-height:52px;
padding:calc(var(--u) * 1.75) calc(var(--u) * 3);
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-body);font-weight:600;
border-radius:var(--r-pill);
transition:transform var(--t-snel) var(--sprong), background-color var(--t-snel) linear;
}
.knop--vol{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-a)}
.knop--vol:hover{transform:translateY(-2px)}
.knop--stil{
/* Volle inkt: de gedempte tint haalde op het lichte vlak van V2 maar 3,3:1,
* en een tweede actie die je moet zoeken is geen tweede actie. */
color:var(--ink);
border:var(--bd) solid var(--lijn);
min-height:52px;
}
.knop--stil:hover{color:var(--ink)}
.knop-num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.knop-bij{
display:block;
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-label);font-weight:400;
letter-spacing:.16em;text-transform:uppercase;opacity:.72;
}
/* ------------------------------------------------------------- hero ---- */
.hero{
position:relative;
flex:1;
display:flex;flex-direction:column;justify-content:center;
/* De kop staat BOVEN de hero, dus 100svh zou de onderste 76px uit beeld
* duwen — precies de rij met de primaire actie op 390. */
min-height:calc(100svh - var(--kop-h));
overflow:clip;
isolation:isolate;
}
.omhulsel{
position:relative;z-index:3;
width:100%;max-width:var(--maat);margin:0 auto;
padding:calc(var(--u) * 6) clamp(18px, 4vw, 40px);
}
.lead{
font-size:var(--fs-lead);
max-width:52ch;
color:var(--ink-stil);
}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 2)}
/* een gepind feit op het beeld: klein, uit de stroom, met echte elevatie */
.chip{
position:absolute;z-index:6;
display:flex;align-items:center;gap:calc(var(--u) * 1.5);
padding:calc(var(--u) * 1.5) calc(var(--u) * 2.25);
background:var(--chip-veld);color:var(--chip-ink);
border-radius:var(--r-m);
box-shadow:var(--sh-b);
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-small);
max-width:min(74vw, 300px);
}
.chip-tekst{display:block;min-width:0}
.chip-titel{display:block;font-weight:600}
.chip-bij{display:block;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.stip{
width:9px;height:9px;flex:none;border-radius:var(--r-pill);
background:var(--accent);
}
/* -------------------------------------------------------------- voet ---- */
.voet{
border-top:var(--bd) solid var(--lijn);
font-family:'Karla',system-ui,sans-serif;font-size:var(--fs-small);
color:var(--ink-stil);
}
.voet-in{
max-width:var(--maat);margin:0 auto;
padding:calc(var(--u) * 4) clamp(18px, 4vw, 40px);
display:flex;flex-wrap:wrap;gap:calc(var(--u) * 2) calc(var(--u) * 5);
align-items:baseline;
}
.voet a{text-decoration:underline;text-underline-offset:3px}
.voet a:hover{color:var(--ink)}
.credit{margin-left:auto}
.credit a{color:var(--ink)}
/* ---------------------------------------------------------- wisselaar ---- */
.vswitch-balk{
position:fixed;z-index:100;left:50%;bottom:14px;transform:translateX(-50%);
display:flex;align-items:center;gap:6px;
padding:6px;
background:var(--ws-veld);
border:var(--bd) solid var(--ws-lijn);
border-radius:var(--r-pill);
box-shadow:var(--sh-b);
font-family:'Karla',system-ui,sans-serif;
}
.vswitch{
min-width:52px;min-height:40px;padding:0 14px;
border-radius:var(--r-pill);
color:var(--ws-ink);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;
transition:background-color var(--t-snel) linear, color var(--t-snel) linear;
}
.vswitch[aria-pressed="true"]{background:var(--ws-aan);color:var(--ws-aan-ink)}
.vswitch:hover{color:var(--ws-aan)}
.vswitch-balk :where(button):focus-visible{outline-color:var(--ws-aan)}
/* ---------------------------------------------------------- responsief ---- */
@media (max-width: 900px){
:root{--kop-h:64px}
}
@media (max-width: 560px){
/* Op 390 passen merk, nummer en menuknop niet samen op één regel. Het nummer
* gaat eruit: het staat twee tellen lager als de primaire knop, in het
* grootste bedieningselement van de pagina. */
.top-bel{display:none}
.nav{margin-left:auto}
}
@media (max-width: 720px){
/* Ruimte onder de laatste rij, zodat de keuzebalk van dit voorstel nooit op
* inhoud komt te liggen. */
.ver > main{padding-bottom:76px}
.nav{position:relative}
.nav-knop{display:inline-flex}
/* Een expliciete display op het kind houdt de lijst in de lay-out terwijl de
* dicht is: de links renderen dan wel, maar focus() landt op body
* en het menu is met het toetsenbord onbereikbaar. */
.nav:not([open]) .nav-lijst{display:none}
.nav[open] .nav-lijst{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.nav[open] .nav-lijst a{padding:calc(var(--u) * 1.5) 0;font-size:var(--fs-body)}
/* De zwevende lade hangt aan .has-js: zonder script blijft de open
* en moet hij als gewone gestapelde lijst renderen, niet als paneel over de
* kop. */
.has-js .nav[open] .nav-lijst{
position:absolute;right:0;top:calc(100% + 10px);z-index:60;
min-width:min(80vw, 260px);
padding:calc(var(--u) * 2) calc(var(--u) * 3);
background:var(--veld-kop);
border:var(--bd) solid var(--lijn);
border-radius:var(--r-m);
box-shadow:var(--sh-b);
}
/* Eén rij, altijd. Met flex-wrap zakte de menuknop naar een tweede regel en
* werd de kop twee lagen hoog, met het nummer en het menu boven elkaar. */
.top-in{flex-wrap:nowrap;padding-top:calc(var(--u) * 1.5);padding-bottom:calc(var(--u) * 1.5)}
.top-bel{order:2;margin-left:auto}
.nav{order:3;margin-left:calc(var(--u) * 2)}
.voet-in{flex-direction:column;align-items:flex-start}
.credit{margin-left:0}
.acties{gap:calc(var(--u) * 1.5)}
.knop{width:100%;justify-content:center}
}
/* De beeldmerken in het contactblok. Zonder een echte breedte renderen ze op
* hun intrinsieke 300px: een sizes-attribuut kiest alleen een bestand, het legt
* geen maat op. */
.merk-zegel{width:56px}
.merk-netwerk{width:118px}