/* versie 1786832209 */
:root{--ink:#0B0B0C;--ink-2:#131315;--paper:#F5F3EF;--seal:#D2202C;--seal-deep:#8E1119;--smoke:#8A8785;--line:rgba(245,243,239,.13);--pad:clamp(1.1rem,4vw,3.5rem)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:'Zen Kaku Gothic New',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.035em;line-height:.94}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.wrap{padding:clamp(2.6rem,7vw,4.5rem) var(--pad)}
/* announcement */
.ticker{background:var(--seal);color:#fff;overflow:hidden;position:relative;z-index:60}
/* header */
@media(max-width:640px){.navlinks a:not(.keep){display:none}}
/* hero */
.hero{position:relative;text-align:center;padding:clamp(2rem,7vw,4.5rem) var(--pad) clamp(2.5rem,7vw,4rem);border-bottom:1px solid var(--line)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 28%,rgba(210,32,44,.20),transparent 58%)}
.hero-logo{position:relative;width:min(35rem,77.4rem);margin:0 auto}
.kicker{position:relative;margin-top:1.6rem;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--smoke)}
.lede{position:relative;max-width:34rem;margin:1rem auto 0;font-size:clamp(.95rem,2.4vw,1.06rem);line-height:1.6;color:#CFCCC8}
.herobtns{position:relative;display:flex;flex-wrap:wrap;margin-top:1.9rem}
.btn{display:inline-block;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:.95rem 2rem;background:var(--seal);color:#fff;transition:background .2s ease,transform .2s ease;text-align:center}
.btn:hover{background:var(--seal-deep);transform:translateY(-2px)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper);background:none}
.btn[disabled]{opacity:.4;pointer-events:none}
/* specs */
.specs{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}
@media(min-width:760px){.specs{grid-template-columns:repeat(4,1fr)}}
.spec{padding:1.5rem var(--pad);border-right:1px solid var(--line)}
.spec:nth-child(2n){border-right:0}
@media(min-width:760px){.spec{border-right:1px solid var(--line)}.spec:nth-child(2n){border-right:1px solid var(--line)}.spec:last-child{border-right:0}}
.spec b{display:block;font-family:'Anton',sans-serif;font-size:clamp(1.1rem,2.4vw,1.5rem)}
.spec span{display:block;margin-top:.3rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--smoke)}
/* section heads */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.sechead h2{font-size:clamp(2rem,7vw,3.4rem)}
.sechead p{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke)}
.brush{position:relative;display:inline-block;z-index:0}
.brush::after{content:'';position:absolute;left:-2%;right:-2%;bottom:.06em;height:.16em;background:var(--seal);z-index:-1;transform:skewY(-1.4deg);border-radius:45% 55% 40% 60%/60% 40% 60% 40%}
/* product grid */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
/* De kaart als kolom, met de knop altijd onderaan.
Zonder dit schoof de knop mee met de naam: een sticker met een naam
van twee regels kreeg zijn knop een regel lager dan de buurman. In een
rij naast elkaar zie je dat meteen.
Nu rekt de ruimte tussen de naam en de knop mee, en liggen alle
knoppen op dezelfde hoogte. */
.card{position:relative;background:var(--ink);padding:1.4rem;transition:background .25s ease}
.card:hover{background:var(--ink-2)}
.skin{position:relative;aspect-ratio:var(--card-ratio);border-radius:0.5rem;overflow:hidden;background:linear-gradient(145deg,#1b2a6b,#4b1d78 55%,#0d1030);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.skin img{width:100%;height:100%;object-fit:cover}
.skin::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 47%,transparent 60%);transform:translateX(-100%);transition:transform .7s ease;pointer-events:none}
.card:hover .skin::after{transform:translateX(60%)}
.chip{position:absolute;left:9%;top:44%;width:20%;aspect-ratio:4/3;border-radius:3px;background:linear-gradient(150deg,#0d0d0e,#2a2a2c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.chip::before{content:'';position:absolute;inset:22% 12%;border-left:1px solid rgba(255,255,255,.22);border-right:1px solid rgba(255,255,255,.22)}
.meta{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-top:1.05rem}
.pname{font-family:'Anton',sans-serif;font-size:clamp(.8rem,2.8vw,1.05rem);letter-spacing:.04em}
.pnum{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--smoke);margin-top:.25rem}
.price{font-family:'Anton',sans-serif;font-size:1.25rem;white-space:nowrap}
.price s{color:var(--smoke);font-size:.85em;margin-right:.35rem}
.add{width:100%;margin-top:1rem;padding:.8rem;border:1px solid var(--line);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s}
.add:hover{background:var(--seal);border-color:var(--seal);color:#fff}
.add.done{background:var(--seal);border-color:var(--seal);color:#fff}
.card.out .skin{filter:grayscale(.85) brightness(.5)}
.seal{position:absolute;top:2.1rem;right:2.1rem;z-index:3;display:grid;place-items:center;width:4rem;height:4rem;font-size:2.125rem;line-height:1;color:var(--seal);border:3px solid var(--seal);border-radius:0.25rem;background:rgba(11,11,12,.55);transform:rotate(-9deg)}
.seal small{position:absolute;bottom:-1.35rem;font-size:.55rem;letter-spacing:.2em;color:var(--seal);font-family:'Zen Kaku Gothic New',sans-serif}
/* product page */
.pdp{display:grid;gap:clamp(1.5rem,5vw,3.5rem)}
@media(min-width:900px){.pdp{grid-template-columns:1.1fr 1fr;align-items:start}}
.pdp-media{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.pdp h1{font-size:clamp(2rem,6vw,3.2rem);margin-bottom:.6rem}
.pdp .price{font-size:1.8rem;display:block;margin-bottom:1.4rem}
.pdp .rte{color:#C3C0BC;line-height:1.7;font-size:.95rem}
.pdp .rte p{margin-bottom:.9rem}
.pdp .rte ul{margin:0 0 .9rem 1.1rem}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);width:fit-content;margin-bottom:1rem}
.qty button{padding:.7rem 1rem;color:var(--smoke)}
.qty button:hover{color:var(--seal)}
.qty input{width:3rem;text-align:center;background:none;border:0;color:var(--paper);font:inherit;padding:.7rem 0}
select.variant{width:100%;padding:.85rem 1rem;background:var(--ink-2);color:var(--paper);border:1px solid var(--line);font:inherit;margin-bottom:1rem}
/* faq / accordion */
.faq{max-width:46rem}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:1.15rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-weight:700;font-size:.98rem}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:'Anton',sans-serif;color:var(--seal);font-size:1.4rem;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .body{padding:0 0 1.15rem;color:#C3C0BC;line-height:1.65;font-size:.93rem;max-width:40rem}
/* newsletter */
.signup{border-top:1px solid var(--line);background:var(--ink-2);text-align:center}
.signup form{display:flex;gap:.5rem;max-width:26rem;margin:1.5rem auto 0;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 12rem;padding:.9rem 1rem;background:var(--ink);color:var(--paper);border:1px solid var(--line);font:inherit;font-size:.9rem}
.signup input:focus{border-color:var(--seal);outline:none}
/* footer */
.foot{border-top:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem) var(--pad);display:grid;gap:1.6rem;font-size:.82rem;color:var(--smoke)}
@media(min-width:760px){.foot{grid-template-columns:repeat(3,1fr)}}
.foot h4{font-family:'Anton',sans-serif;color:var(--paper);font-size:.82rem;letter-spacing:.16em;margin-bottom:.7rem;text-transform:uppercase}
.foot li{list-style:none;margin-bottom:.35rem}
.foot a:hover{color:var(--paper)}
.legal{border-top:1px solid var(--line);padding:1.2rem var(--pad);font-size:.68rem;letter-spacing:.1em;color:#5E5C5A;text-transform:uppercase}
/* cart drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(25rem,100%);z-index:90;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.3rem;border-bottom:1px solid var(--line)}
.dhead h3{font-size:1.2rem}
.dbody{flex:1;overflow-y:auto;padding:1.3rem}
.line{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.line span{color:var(--smoke);font-size:.78rem;display:block}
.line button{color:var(--smoke);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.line button:hover{color:var(--seal)}
.empty{color:var(--smoke);font-size:.9rem;line-height:1.6}
.dfoot{padding:1.3rem;border-top:1px solid var(--line)}
.ship{font-size:.78rem;color:var(--smoke);margin-bottom:.6rem;line-height:1.5}
.ship b{color:var(--paper)}
.bar{height:0.25rem;overflow:hidden;margin-bottom:1.1rem}
.bar i{display:block;height:100%;width:0}
.total{display:flex;justify-content:space-between;align-items:baseline;font-family:'Anton',sans-serif;font-size:1.3rem;margin-bottom:1rem}
.dfoot .btn{display:block;width:100%}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.langform{display:inline-block;margin:0}
/* extra voor de PHP-winkel */
.crumbs{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:1.6rem}
.rte h3{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.78rem,2.6vw,1rem);color:var(--seal);margin:1.8rem 0 .5rem}
.rte p,.rte li{color:#C3C0BC;line-height:1.75;margin-bottom:.8rem}
.rte ul{margin-left:1.2rem}
.socials a{padding:.45rem .8rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.add[disabled]{opacity:.4;pointer-events:none;text-decoration:line-through}
/* --- nudges (echte data) --- */
.nudges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.nudge{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .55rem;border:1px solid var(--line);color:var(--smoke)}
.nudge.urgent{border-color:var(--seal);color:var(--seal)}
.countdown{background:var(--ink-2);border-bottom:1px solid var(--line);text-align:center;padding:.7rem 1rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.countdown b{font-family:'Anton',sans-serif;color:var(--seal);letter-spacing:.08em;font-size:.95rem}
.countdown.closed{color:var(--seal)}
.shipnote{font-size:.78rem;color:var(--smoke);margin-top:.9rem}
.shipnote b{color:var(--paper)}
/* --- restock en wachtlijst --- */
.restock{position:absolute;top:1.4rem;left:1.4rem;z-index:3;background:var(--seal);color:#fff;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .6rem}
.restock.inline{position:static;display:inline-block;margin-bottom:.9rem}
.notifybox{position:fixed;z-index:95;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;width:min(23.75rem,82.8rem);border:1px solid var(--line);padding:clamp(1.2rem,2.5vw,1.8rem) 1.6rem;transition:opacity .25s,transform .25s}
.notifybox.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.notifybox h3{font-size:1.5rem;margin-bottom:.5rem}
.notifybox .nsub{font-size:clamp(.72rem,1.7vw,.85rem);line-height:1.6;margin-bottom:.8rem}
.notifybox input{width:100%;padding:.85rem 1rem;font:inherit;font-size:.9rem}
.notifybox input:focus{border-color:var(--seal);outline:none}
.nclose{position:absolute;top:.7rem;right:.9rem;color:var(--smoke);font-size:1rem}
.nclose:hover{color:var(--paper)}
/* De bevestiging groen. Stond op je rood, en dat leest als een fout
terwijl het juist goed ging. */
.wl-ok{color:#2FBF5B}
/* --- landingspagina --- */
.whygrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.whygrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.whygrid{grid-template-columns:repeat(4,1fr)}}
.whycell{background:var(--ink);padding:1.7rem 1.4rem}
.whycell h3{font-size:clamp(.92rem,1.6vw,1.05rem);margin-bottom:.6rem}
.whycell p{color:#C3C0BC;font-size:.9rem;line-height:1.65}
/* ============ mobiel: correcties na controle ============ */
/* iOS Safari zoomt in zodra een invoerveld kleiner is dan 16px.
Dat verspringt de hele pagina bij het afrekenen. Op kleine schermen
dus altijd 16px, ongeacht wat het ontwerp elders zegt. */
@media(max-width:820px){
input,select,textarea,.notifybox input,.signup input[type=email]{font-size:1rem}
}
/* Tabellen in het beheerpaneel hebben tot 7 kolommen. Op een telefoon
duwden die de layout uit elkaar. Nu schuiven ze horizontaal. */
@media(max-width:860px){
table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
table td,table th{white-space:normal;min-width:7rem}
table td:first-child,table th:first-child{min-width:9rem}
.admtop{gap:.7rem}
.tabs{width:100%;overflow-x:auto}
.tabs a,.tabs button{flex:0 0 auto}
}
/* Aanraakvlakken: Apple en Google adviseren minimaal 44px hoogte.
Verwijderknoppen in de tas en de plusknoppen waren te klein. */
@media(pointer:coarse){
.line button{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 .35rem}
.qty button{min-width:3rem;min-height:3rem}
.add{min-height:2.875rem}
.nclose,#CloseCart{min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center}
}
/* Balk boven kostte op een telefoon te veel hoogte voordat je iets zag. */
@media(max-width:640px){
.ticker{font-size:.6rem;letter-spacing:.16em;padding:.4rem 0}
.countdown{padding:.55rem .8rem;font-size:.64rem}
.seal{width:3.25rem;height:3.25rem;font-size:1.75rem;top:1.5rem;right:1.5rem}
.seal small{bottom:-1.15rem;font-size:.5rem}
.sechead{margin-bottom:1.4rem}
.drawer{width:100%}
.dfoot{padding-bottom:calc(1.3rem + env(safe-area-inset-bottom))}
}
/* Winkelwagen op een telefoon: de knop moet altijd zichtbaar blijven,
ook als de lijst lang is. */
.drawer{max-height:100dvh}
.dbody{overscroll-behavior:contain}
/* --- disclaimer en stijlfilters --- */
.disclaimer{border:1px solid var(--line);border-left:2px solid var(--seal);padding:1rem 1.1rem;margin-top:1.8rem;background:var(--ink-2)}
.disclaimer h4{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--seal);margin-bottom:.45rem}
.disclaimer p{color:#C3C0BC;font-size:.85rem;line-height:1.65;margin:0}
.disclaimer.compact{border-left-width:2px;padding:.8rem 1rem;font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem}
/* Eigen naam, want .chip was al in gebruik voor de chipuitsparing op het
kaartje. Die staat op position:absolute en dat erfden deze knoppen,
waardoor ze over het productraster heen zweefden. */
.fchip{position:static;display:inline-flex;align-items:center;width:auto;aspect-ratio:auto;border:1px solid var(--line);border-radius:0;background:none;box-shadow:none;padding:.5rem .85rem;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--smoke);transition:border-color .2s,color .2s}
.fchip:hover{border-color:var(--paper);color:var(--paper)}
.fchip.on{background:var(--seal);border-color:var(--seal);color:#fff}
.fchip b{opacity:.65;font-weight:400}
@media(pointer:coarse){.fchip{min-height:2.75rem}}
.shipnote.fit{border-left:2px solid var(--seal);padding-left:.7rem;margin-top:1.1rem}
/* --- vertrouwensregel --- */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:1.1rem 0 .5rem;padding:0}
.trust li{font-size:.76rem;color:#C3C0BC;display:flex;align-items:center;gap:.4rem}
.trust .tick{color:var(--seal);font-size:.8rem}
.paylist{font-size:.68rem;letter-spacing:.06em;color:var(--smoke);margin-bottom:.2rem}
.dfoot .trust{margin:.9rem 0 .3rem}
.dfoot .trust li{font-size:.72rem}
/* ============ staande kaartweergave ============
Het bronbeeld is een kaart in portret (63 x 88 mm). De sticker zelf
blijft liggend, want een bankpas is 85,60 x 53,98 mm. Wil je later
terug naar liggende productfoto's, zet dan --card-ratio op 85/54. */
:root{--card-ratio: 63/88}
/* Staande kaarten zijn smaller, dus er passen er meer naast elkaar. */
@media(min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1250px){ .grid{grid-template-columns:repeat(4,1fr)} }
/* Op de productpagina naast elkaar in plaats van onder elkaar,
anders wordt de pagina eindeloos lang bij staande beelden. */
.pdp-media{grid-template-columns:1fr}
@media(min-width:560px){ .pdp-media{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .pdp-media{grid-template-columns:1fr} }
.pdp-media img{aspect-ratio:var(--card-ratio);object-fit:cover;width:100%}
@media(min-width:900px){ .pdp{grid-template-columns:.85fr 1fr} }
/* Een staande kaart is hoger, dus het zegel iets kleiner en hoger geplaatst. */
.card.out .seal{top:1.6rem;right:1.6rem}
/* Beeld in de winkelwagenregel en het beheerpaneel meelaten lopen. */
.thumb{width:3.25rem;aspect-ratio:var(--card-ratio);object-fit:cover;border-radius:3px}
/* De naam onderin het mockup-kaartje botste met staande verhoudingen. */
.skinname{bottom:6%}
/* --- meldingsbalk --- */
.flash{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);z-index:120;color:#fff;padding:.85rem 1.3rem;font-size:.85rem;max-width:min(30rem,82.8rem);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.flash.on{transform:translate(-50%,0)}
#CheckoutErr:empty{display:none}
/* --- aantal aanpassen in de winkelwagen --- */
.lineqty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:.45rem}
.lineqty button{width:1.875rem;height:1.875rem;color:var(--smoke);font-size:1rem;line-height:1}
.lineqty button:hover:not([disabled]){color:var(--seal)}
.lineqty button[disabled]{opacity:.3;cursor:default}
.lineqty span{min-width:2rem;text-align:center;font-size:.85rem;color:var(--paper)}
@media(pointer:coarse){.lineqty button{width:2.5rem;height:2.5rem}}
/* --- taalkiezer: nooit meer afkappen --- */
/* Op smalle schermen mag de kop wrappen in plaats van de tekst afkappen. */
/* --- bezorgregio in de winkelwagen --- */
.zonepick{display:block;margin-bottom:.8rem}
.zonepick span{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:.3rem}
.zonepick select{width:100%;padding:.6rem .7rem;background:var(--ink-2);color:var(--paper);border:1px solid var(--line);font:inherit;font-size:.85rem}
.zonepick select:focus{border-color:var(--seal);outline:none}
/* --- verzendkosten in de winkelwagen --- */
.tracknote{margin-bottom:.7rem}
/* --- loopbalk, naadloos --- */
.ticker-row{display:flex;width:max-content;animation:tickerslide var(--tickersec,52s) linear infinite}
.ticker-set{display:flex;flex:0 0 auto}
.ticker-set span{display:block;white-space:nowrap;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding-right:3.5rem;position:relative}
.ticker-set span::after{content:'';position:absolute;right:1.6rem;top:50%;width:0.25rem;height:0.25rem;background:rgba(255,255,255,.55);border-radius:50%;transform:translateY(-50%)}
.ticker:hover .ticker-row{animation-play-state:paused}
@keyframes tickerslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.ticker-set span{font-size:.6rem;letter-spacing:.16em;padding-right:2.6rem}
.ticker-set span::after{right:1.1rem}}
@media(prefers-reduced-motion:reduce){.ticker-row{animation:none}}
/* --- bezorgregio, alleen zichtbaar als het niet de standaard is --- */
.zoneline{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-size:.78rem;color:var(--smoke);margin-bottom:.7rem}
.zoneline b{color:var(--paper);font-weight:700}
.zoneline button{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--seal);border-bottom:1px solid var(--seal);padding-bottom:1px}
.zoneline[hidden],.zonepick[hidden]{display:none}
/* ============ hero: tekst links, product rechts ============
Boven de vouw gaat ongeveer 80% van de aandacht naartoe, dus daar
staat wat je verkoopt, waarom, en waar je klikt. Bewust geen slider:
statisch laadt sneller en presteert beter. */
.hero2{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;padding:clamp(1.8rem,5vw,3.6rem) var(--pad) 3.4rem;border-bottom:1px solid var(--line);position:relative}
.hero2::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 40%,rgba(210,32,44,.20),transparent 58%)}
@media(min-width:900px){.hero2{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.hero2-copy{position:relative;max-width:34rem}
.hero2-copy h1{font-size:clamp(2.1rem,5.2vw,3.5rem);margin-bottom:.9rem}
.hero2-copy .lede{margin:0 0 1.2rem;max-width:30rem}
.herobul{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
.herobul li{font-size:.82rem;color:#C3C0BC;display:flex;align-items:center;gap:.45rem}
.herobul li::before{content:'\2713';color:var(--seal);font-size:.8rem}
.hero2 .herobtns{margin-top:0;justify-content:flex-start}
.hero2-shots{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:520px) and (max-width:899px){.hero2-shots{grid-template-columns:repeat(4,1fr)}}
.shot{display:block;position:relative;border:1px solid var(--line);background:var(--ink-2);transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s}
.shot:hover{transform:translateY(-4px);border-color:var(--seal)}
.shot img,.shot .ph{display:block;width:100%;aspect-ratio:var(--card-ratio);object-fit:cover}
.shot .ph{background:linear-gradient(145deg,#1b2a6b,#4b1d78 55%,#0d1030)}
.shot .cap{font-size:.7rem;letter-spacing:.04em;color:var(--smoke);overflow:hidden;text-overflow:ellipsis}
.shot:hover .cap{color:var(--paper)}
@media(max-width:520px){.hero2-shots{gap:.5rem}.shot .cap{font-size:.62rem;padding:.4rem .45rem}}
/* klein logo linksboven in plaats van de merknaam als tekst */
/* ============ correcties op de kop en de hero ============ */
/* Logo was te klein om te lezen. Nu op ooghoogte met de rest van de balk. */
/* Menu: meer lucht, duidelijker actief, en een streep bij hover in plaats
van alleen een kleurverschil. */
/* Naam en prijs onder het hero-plaatje stonden tegen het beeld aan geplakt.
Nu een eigen strook met een scheidingslijn, naam boven en prijs eronder. */
.shot{overflow:hidden}
.shot .cap{display:block;padding:.6rem .7rem .65rem;border-top:1px solid var(--line);background:var(--ink);white-space:normal}
.shot .cap .nm{display:block;font-size:.74rem;letter-spacing:.03em;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem}
.shot .cap .pr{display:block;font-family:'Anton',sans-serif;font-size:.86rem;color:var(--seal);letter-spacing:.04em}
@media(max-width:520px){.shot .cap{padding:.45rem .5rem .5rem}
.shot .cap .nm{font-size:.66rem}.shot .cap .pr{font-size:.76rem}}
/* Witte kaartranden vallen minder hard op met een donkere omlijsting
eromheen in plaats van beeld dat tot de rand doorloopt. */
.shot img,.skin img{background:var(--ink-2)}
/* ==========================================================
STARTPAGINA — opzet volgens het goedgekeurde ontwerp
========================================================== */
.hero3{background:var(--ink)}
.hero3::before{content:'';position:absolute;inset:0;pointer-events:none;background:
radial-gradient(circle at 72% 38%,rgba(210,32,44,.28),transparent 55%),
radial-gradient(circle at 12% 8%,rgba(210,32,44,.10),transparent 45%)}
.hero3-inner{display:grid;margin:0 auto}
@media(min-width:960px){.hero3-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.hero3-copy h1{margin:0 0 1rem}
.hero3-copy h1 span{display:block;font-family:'Anton',sans-serif;text-transform:uppercase}
.hero3-copy h1 .l1{color:var(--seal)}
.hero3-copy h1 .l2{color:var(--paper)}
.hero3-copy .tag{color:#D8D5D1;margin:0 0 1.8rem}
.hero3-copy .tag em{color:var(--seal);font-style:normal;font-weight:700}
/* Pictogrammen in CSS, geen extra bestanden om te laden. */
.ic{width:1.625rem;height:1.625rem;display:block;background:var(--seal);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-shield{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.ic-spark{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.ic-card{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.ic-truck{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-lock{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.ic-check{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.ic-eu{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* Staand product, want dat is wat je verkoopt. */
.hero3-card{display:block;aspect-ratio:var(--card-ratio);border-radius:0.625rem;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.65);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.hero3-card img{width:100%;height:100%;object-fit:cover;display:block}
.hero3-card.ph{background:linear-gradient(145deg,#1b2a6b,#4b1d78 55%,#0d1030)}
/* Ruwe penseelrand tussen het donkere en het lichte deel. */
/* Licht blok met de populaire ontwerpen. */
.sechead2{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.sechead2 .red{color:var(--seal)}
.tiles{display:grid}
@media(min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(5,1fr)}}
.tile{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.tile:hover{transform:translateY(-5px)}
.tile .ph{background:linear-gradient(145deg,#1b2a6b,#4b1d78 55%,#0d1030)}
.newbadge{position:absolute;background:var(--seal);color:#fff;font-family:'Anton',sans-serif}
.tnm{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpr{font-family:'Anton',sans-serif;font-size:.9rem;color:var(--seal);margin-top:.1rem}
/* ==========================================================
MOBIEL — kop, hero, carrousel en voordelenlijst
========================================================== */
.burger{display:none;width:2.75rem;height:2.75rem;flex-direction:column;justify-content:center;gap:0.3125rem;padding:0 0.625rem}
.burger span{display:block;height:2px;background:var(--paper);transition:transform .25s,opacity .2s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.carticon{display:none;width:1.375rem;height:1.375rem;background:var(--paper);-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mobmenu{position:fixed;inset:0;z-index:95;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;padding:2rem}
.mobmenu[hidden]{display:none}
.mobmenu a{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:1.5rem;color:var(--paper)}
.mobmenu a:active{color:var(--seal)}
.mobmenu
@media(max-width:820px){
/* Kop: hamburger links, logo gecentreerd, winkelwagen rechts. */
.burger{display:flex}
.navright
.cartword{display:none}
.carticon{display:block}
/* Hero: tekst eerst, kaart bloedt aan de rechterkant van het scherm af. */
.hero3-inner{grid-template-columns:1fr;padding-bottom:2.6rem;gap:1.4rem}
.hero3-copy h1 span{font-size:clamp(2.4rem,12vw,3.4rem)}
.hero3-copy .tag{margin-bottom:1.3rem}
.hero3 .herobtns{flex-direction:column;align-items:stretch;gap:.6rem;margin-bottom:.4rem}
.hero3 .herobtns .btn{width:100%}
.hero3-art{order:-1;justify-content:flex-end;margin-right:calc(var(--pad) * -1)}
.hero3-card{width:min(17.5rem,61.2rem)}
/* Producten schuiven horizontaal, met stippen eronder. */
.tiles{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.2rem}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 46%;scroll-snap-align:start}
/* Voordelen als lijst met een pijl, precies zoals in het ontwerp. */
.light{padding-bottom:0}
.sechead2{font-size:1.5rem}
}
@media(max-width:440px){
.tile{flex:0 0 62%}
.hero3-card{width:min(15rem,59.4rem)}
}
/* Logo fors groter. Het is je enige merkherkenning in de kop, dus geef
het ruimte. De balk groeit mee zodat er niets tegen elkaar aan komt. */
/* ==========================================================
KOP — een keer, netjes. Alle eerdere losse definities zijn
samengevoegd zodat er geen tegenstrijdige regels meer zijn.
========================================================== */
.brandmark{display:flex;align-items:center;flex:0 0 auto}
.navlinks{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
.navlinks a:hover::after{transform:scaleX(1)}
.navright{flex:0 0 auto}
.langpick{background:transparent;color:var(--smoke);border:1px solid var(--line);font:inherit;text-transform:uppercase;width:auto}
.langpick:hover{border-color:var(--seal);color:var(--paper)}
.langpick option{background:var(--ink-2);color:var(--paper)}
.cartbtn{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);padding:.55rem 1rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);transition:border-color .2s,color .2s}
.cartbtn:hover{border-color:var(--seal);color:var(--paper)}
.cartbtn b{font-family:'Anton',sans-serif;color:var(--seal)}
@media(max-width:1100px){.navlinks{gap:1.5rem}}
/* ==========================================================
RODE PENSEELVEGEN — als vector in de opmaak, geen bestanden
========================================================== */
/* Grote diagonale veeg achter het product, rechtsonder. */
/* Veeg onder de rode kopregel, zoals in je logo. */
/* Fijne korrel over de hero, zodat het vlakke zwart leeft. */
.hero3-inner{position:relative}
.hero3-inner::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:-1;background-image:url("data:image/svg+xml;utf8,");background-size:180px 180px}
/* Ruwere penseelrand tussen donker en licht. */
/* Kleine veeg onder de sectiekop in het lichte blok. */
/* ==========================================================
KOP — geen streep, geen menu, logo hangt over de rand
========================================================== */
.nav{position:sticky;top:0;z-index:50;align-items:center;justify-content:space-between;gap:1.2rem;padding:.45rem var(--pad);background:rgba(11,11,12,.92);backdrop-filter:blur(14px);border-bottom:0;overflow:visible}
/* Het logo steekt bewust onder de balk uit. Daardoor oogt het fors zonder
dat de balk zelf hoog wordt, en valt het als eerste op. */
.brandmark{position:relative;z-index:2}
/* De hero begint hoger, zodat het uitstekende logo er netjes overheen valt. */
/* ==========================================================
TEGELS — kleiner en zonder prijs
========================================================== */
@media(min-width:700px){.tiles{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1100px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tcap{padding:.4rem .5rem .55rem}
.tnm{font-size:.7rem}
.tpr{display:none}
@media(max-width:820px){
.tiles{display:flex}
.tile{flex:0 0 30%}
}
@media(max-width:440px){.tile{flex:0 0 42%}}
/* ==========================================================
PENSEELVEGEN — gegenereerde vormen met rafelrand, haargaten
en spatten. Geen bestanden, dus scherp op elk scherm.
========================================================== */
/* Veeg onder de rode kopregel. */
/* Ruwe rand tussen het donkere en het lichte deel, met druppels. */
/* Korte veeg onder de sectiekop. */
/* De vegen zijn uit de banner gehaald. De ruwe rand tussen het donkere en
het lichte deel blijft, want die is de overgang zelf en geen versiering. */
/* Het logo heeft nu een transparante achtergrond, dus geen zwart blok meer
dat afsteekt tegen de balk. */
/* Populaire ontwerpen: alleen beeld, geen naam en geen prijs. */
.tcap{display:none}
.tile{border-radius:0.5rem}
/* Productbeeld een slag kleiner. De hero-kaart was zo groot dat hij de
tekst wegdrukte; nu staan ze in evenwicht. */
@media(max-width:820px){.hero3-card{width:min(13.125rem,46.8rem)}}
@media(max-width:480px){.hero3-card{width:min(11.25rem,43.2rem)}}
/* Tegels ook wat rustiger. */
@media(min-width:700px){.tiles{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1100px){.tiles{grid-template-columns:repeat(7,1fr);gap:.6rem}}
@media(max-width:820px){.tile{flex:0 0 26%}}
@media(max-width:440px){.tile{flex:0 0 36%}}
/* ==========================================================
PENSEELBALK — dikke solide haal met gerafelde randen en
horizontale scheuren, in de stijl van het voorbeeld.
Zelf gegenereerd, dus geen licentie of naamsvermelding nodig.
========================================================== */
/* Diagonale rode balk achter het product, zoals in je ontwerp. */
/* Korte balk onder de sectiekop in het lichte blok. */
/* ==========================================================
PENSEELSTREKEN — echte kwaststreken als afbeelding.
Opgebouwd uit losse haren met droge stukken, rafelrand en
spatten, dus geen vorm die als lijn leest.
========================================================== */
/* Streek onder de rode kopregel. */
/* Korte streek onder de sectiekop in het lichte blok. */
/* ==========================================================
HERO — rode veeg rechts en geschilderde onderrand
========================================================== */
.hero3{position:relative;overflow:hidden;isolation:isolate}
/* De veeg loopt vanaf de rechterrand het beeld in, steil gedraaid zodat
de droge haarstrepen goed uitkomen. Bloedt bewust boven en onder af. */
/* Geschilderde rand onderaan, met happen, uitstulpingen en druppels. */
/* Smallere, drogere veeg. Was 62% breed en dat oogde als een vlak. */
/* De rode streek en de witte verfrand komen uit je eigen bestand.
De streek staat rechtop met een lichte helling, precies zoals getekend,
dus er wordt niets gedraaid of vervormd. */
.brushedge{position:absolute;left:0;right:0;z-index:1;pointer-events:none;background:url('/assets/edge-torn.png?v=1786832209') no-repeat center bottom/100% 100%}
@media(max-width:820px){.brushedge{height:3.75rem}}
/* De merkregel in de loopbalk, iets ruimer gespatieerd zodat hij zich
onderscheidt van de aanbiedingen ernaast. */
/* ==========================================================
UITLIJNING — kop en hero delen dezelfde linkerkantlijn
========================================================== */
.nav{max-width:none;padding-left:0;padding-right:0}
.nav > *{position:relative}
.nav{display:grid;grid-template-columns:1fr;justify-items:stretch}
.navrow{max-width:76rem;margin:0 auto;width:100%;padding:0 var(--pad);justify-content:space-between}
/* Logo groter en op dezelfde lijn als de kop eronder. */
/* De hero begint lager zodat het uitstekende logo er niet overheen valt. */
@media(max-width:820px){.hero3-inner{padding-top:2.2rem}}
/* Geen streep meer achter de rode kopregel. */
.hero3-copy h1 .l1{position:static;display:block}
.hero3-copy h1 .l1::after{content:none}
/* ==========================================================
POPULAIRE — hoger en zonder streepje
========================================================== */
.sechead2{position:static;display:block}
.sechead2::after{content:none}
.brushedge{bottom:-1px}
/* ==========================================================
NIEUW-stempel groter en beter zichtbaar
========================================================== */
.newbadge{top:0;right:0;border-radius:0 0.5rem 0 0.5rem;padding:.4rem .75rem;font-size:.78rem;letter-spacing:.14em;box-shadow:0 3px 12px rgba(0,0,0,.35)}
@media(max-width:640px){.newbadge{font-size:.68rem;padding:.32rem .6rem}}
/* ==========================================================
COMPACTER — alles was te groot, waardoor de kop op drie
regels viel en de producten onder de vouw verdwenen.
Doel: hero plus de eerste producten binnen een scherm.
========================================================== */
/* Logo terug naar bescheiden formaat, zoals in het ontwerp. */
/* Hero: minder lucht boven en onder. */
.hero3-inner{padding:clamp(1.4rem,3vw,2.6rem) var(--pad) 3.2rem;max-width:82rem;gap:clamp(1.2rem,3vw,2.4rem)}
@media(min-width:960px){.hero3-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
/* Kop kleiner, zodat hij op twee regels past. */
.hero3-copy{max-width:32rem}
.hero3-copy h1 span{font-size:clamp(1.9rem,4.4vw,3.5rem);letter-spacing:.005em}
.hero3-copy .tag{font-size:clamp(.92rem,1.5vw,1.08rem)}
/* Kenmerkenrij compacter. */
/* Knoppen kleiner. */
.hero3 .btn{padding:.8rem 1.5rem;font-size:.74rem}
.herobtns{gap:.7rem}
/* Product kleiner en de badge mee. */
.hero3-card{width:min(13.4375rem,39.6rem)}
/* De veeg mee verkleinen. */
/* Onderrand smaller, die nam veel hoogte. */
@media(max-width:820px){.brushedge{height:2.5rem}}
/* Populaire blok strak tegen de rand aan. */
.light .wrap{max-width:82rem}
.sechead2{font-size:clamp(1.2rem,2.4vw,1.7rem)}
@media(max-width:820px){
.hero3-inner{padding-top:1.1rem;padding-bottom:1.8rem}
.hero3-copy h1 span{font-size:clamp(1.8rem,8.5vw,2.6rem)}
.hero3-card{width:min(10.625rem,37.8rem)}
}
/* Zuiver wit blok. De tekst erin wordt iets zachter zwart, want puur
zwart op puur wit geeft te veel contrast en oogt hard. */
.light{background:#FFFFFF;color:#141418}
.sechead2{color:#141418}
.tnm{color:#141418}
.tile{background:#fff}
/* ==========================================================
AANPASSINGEN NA DE EERSTE LIVE-BLIK
========================================================== */
/* Logo groter, maar zo dat de kop niet meegroeit. */
/* Taalkiezer smaller: net breed genoeg voor Nederlands. */
.langpick{font-size:.66rem;letter-spacing:.02em}
@media(max-width:820px){
/* Op een telefoon is de vlag genoeg, de naam valt weg. */
.langpick{max-width:3.4rem;padding:.45rem 1.1rem .45rem .4rem;font-size:0}
.langpick option{font-size:.85rem}
}
/* Knoppen strak links, niet zwevend in het midden. */
.herobtns{justify-content:flex-start;align-items:stretch;margin-left:0}
.hero3 .herobtns{display:flex;flex-wrap:wrap}
.hero3 .herobtns .btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:0 1.5rem;text-align:center}
@media(max-width:820px){.hero3 .herobtns{flex-direction:column}.hero3 .herobtns .btn{width:100%}}
/* De rode streek een stuk hoger. */
/* Populaire sectie strak tegen de verfrand aan. */
/* Zes kaarten naast elkaar, dus groter dan de zeven van net. */
.tiles{gap:.8rem}
@media(min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(6,1fr)}}
@media(max-width:820px){.tiles{display:flex}.tile{flex:0 0 40%}}
@media(max-width:440px){.tile{flex:0 0 56%}}
/* De voordelenrij eronder rustiger, die werd rommelig. */
/* Op de shoppagina de kaarten half zo groot. */
/* --- laatste correcties --- */
/* Logo iets groter en verder naar links. */
/* De rode streek stond half buiten beeld. */
/* Taalkiezer: het pijltje strak achter de tekst. */
.langpick{max-width:8.4rem;padding:.45rem 1.25rem .45rem .45rem;background-position:right .35rem center}
@media(max-width:820px){.langpick{max-width:3rem;padding:.45rem .9rem .45rem .35rem}}
/* Zes tegels netjes naast elkaar, gelijke hoogte. */
@media(min-width:560px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:920px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{display:block;align-self:stretch}
.tile img,.tile .ph{aspect-ratio:var(--card-ratio);object-fit:cover;width:100%;display:block}
/* Verzendregel in de winkelwagen. */
.subline{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:#C3C0BC;margin-bottom:.3rem}
.tracknote{font-size:.72rem;color:var(--smoke);margin:0 0 .7rem;line-height:1.5}
.tracknote:empty{display:none}
/* ==========================================================
SMALLER EN COMPACTER
========================================================== */
/* De site zo breed als vijf kaarten. Daarmee verdwijnt de lege ruimte
in het midden van de banner en staat alles dichter op elkaar. */
@media(min-width:960px){.hero3-inner{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:2rem}}
/* Vijf tegels naast elkaar. */
@media(min-width:560px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.tiles{grid-template-columns:repeat(5,1fr)}}
@media(max-width:820px){.tiles{display:flex}.tile{flex:0 0 42%}}
@media(max-width:440px){.tile{flex:0 0 58%}}
/* De prijsbadge hoort op de kaart, niet ernaast. */
.hero3-art{position:relative}
/* ==========================================================
EEN GEDEELDE KANTLIJN
De banner was gecentreerd met een maximumbreedte en de rest niet.
Daardoor begon de kop veel verder naar rechts dan de secties eronder.
Alles gebruikt nu dezelfde container.
========================================================== */
:root{--maxw:64rem}
.navrow,
.hero3-inner,
.wrap,
.light .wrap{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad);box-sizing:border-box}
/* De hero houdt zijn eigen verticale ruimte, maar niet zijn eigen kantlijn. */
/* De ticker en de gekleurde vlakken lopen wel door tot de schermrand. */
.ticker,.hero3,.light,.foot{width:100%}
/* Logo en kop op exact dezelfde lijn: geen extra inspringing meer. */
.brandmark{margin-left:0}
.hero3-copy{margin-left:0}
/* Rode streek: hoger en verder naar rechts uit beeld, zodat je de hele
haal ziet en niet alleen het onderste stuk. */
/* Prijsbadge netjes in de hoek van de kaart in plaats van over de tekst. */
/* De kaart met zijn badge als een geheel, zodat de badte altijd in de
hoek van de kaart hangt en niet ergens in de sectie zweeft. */
.hero3-art{display:flex;justify-content:center;align-items:center}
/* ==========================================================
MELDING GRATIS VERZENDING IN HET GROEN
Tussen al dat rood en zwart valt rood niet meer op. Groen zegt
bovendien "gelukt", en dat is precies wat er gebeurt.
========================================================== */
:root{--go:#2FBF5B;--go-deep:#1E9B45}
.ship.unlocked{color:var(--go)}
.ship.unlocked b{color:var(--go);font-weight:700}
.bar{background:rgba(255,255,255,.10)}
.bar i{background:var(--seal);transition:width .35s cubic-bezier(.2,.7,.3,1),background .3s}
.ship.unlocked ~ .bar i,
.bar i.done{background:var(--go)}
.flash{background:var(--go)}
/* ==========================================================
SHOPPAGINA: VIER KAARTEN NAAST ELKAAR
========================================================== */
body.is-shop .grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){body.is-shop .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){body.is-shop .grid{grid-template-columns:repeat(4,1fr)}}
body.is-shop .pname{font-size:.9rem}
body.is-shop .pnum{font-size:.7rem}
body.is-shop .price{font-size:1rem}
/* ==========================================================
RODE VEEG — helemaal in beeld
Hij werd uitgerekt tot 100% van het vak en liep daardoor
rechtsonder buiten beeld. Nu schaalt hij mee binnen het vak,
zodat de hele haal zichtbaar blijft.
========================================================== */
/* ==========================================================
PRIJSBADGE BOVENAAN OP DE KAART
========================================================== */
/* ==========================================================
POPULAIRE SECTIE HOGER
========================================================== */
.brushedge{height:2.875rem}
@media(max-width:820px){.brushedge{height:2.125rem}}
.hero3-inner{padding-bottom:clamp(1.2rem,2.5vw,2rem)}
.light{padding-top:0}
.light .wrap{padding-top:0}
.sechead2{margin-top:0;margin-bottom:.7rem}
/* Weg terug naar de homepagina, alleen zichtbaar op andere pagina's. */
/* ==========================================================
RODE VEEG EN PRIJSRONDJE
Eerst de basisregel, daarna pas de aanpassingen voor kleinere
schermen. Stond het andersom, dan wist de laatste de eerste.
========================================================== */
.hero3::after{content:'';position:absolute;z-index:-1;pointer-events:none;right:0;top:0;bottom:0;width:30%;background-image:url('/assets/brush-hero.png');background-repeat:no-repeat;background-position:right center;background-size:contain}
@media(max-width:1100px){
.hero3::after{width:34%}
}
@media(max-width:820px){
.hero3::after{width:44%;opacity:.9}
}
/* ==========================================================
TWEEDE SECTIE: NIEUWSTE ONTWERPEN
Zelfde lichte blok, met een link naar de hele shop ernaast.
========================================================== */
.newest{background:#FFFFFF;color:#141418}
.sechead3{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sechead3 .sechead2{margin-bottom:.7rem}
.seeall{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--seal);border-bottom:1px solid var(--seal);padding-bottom:2px;white-space:nowrap}
.seeall:hover{color:#141418;border-color:#141418}
.newest .tiles{margin-top:.2rem}
@media(max-width:820px){.seeall{font-size:.66rem}}
/* Het lichte blok loopt nu door tot en met de nieuwste ontwerpen, dus
de scheidingslijn boven de voordelen is genoeg. */
/* Knoppen een paar pixels hoger. */
/* Prijsbol iets groter. */
/* ==========================================================
RUIMTE TUSSEN DE SECTIES
.wrap had standaard bijna 5 rem boven en onder, en dat telde op
bij de ruimte van de sectie zelf. Vandaar het grote witte gat.
========================================================== */
.light .wrap,
.newest .wrap{padding-top:0;padding-bottom:0}
.light{padding:0 0 clamp(1.4rem,3vw,2rem)}
.newest{padding:clamp(1.2rem,2.5vw,1.8rem) 0 clamp(2rem,4vw,3rem)}
/* De voordelenrij compacter en met minder lucht eronder. */
/* De link naar alle ontwerpen onder de rij, gecentreerd. */
.seeallrow{margin:1.2rem 0 0;text-align:center}
.seeallrow .seeall{display:inline-block}
/* Uitleg voorkant en achterkant. Lichte sectie, want de tekening is licht. */
.howfit{background:#FFFFFF;color:#141418;padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(2rem,4vw,3rem)}
.howfit .wrap{padding-top:0;padding-bottom:0}
.howfit .sechead2{color:#141418;margin-bottom:.5rem}
.howfit-p{max-width:38rem;color:#4A4A50;font-size:.95rem;margin:0 0 1.4rem;line-height:1.7}
.howfit img{width:100%;height:auto;display:block}
/* De twee kopregels iets losser van elkaar. Ze stonden op .94 en dat is
krap bij een zware smalle letter. */
.hero3-copy h1{line-height:1.06}
.hero3-copy h1 span{line-height:1.06}
/* Logo 3 pixels groter, maar de balk mag niet meegroeien. Dat lossen we
op met de negatieve ondermarge: die groeit precies evenveel mee, dus
de rest van de pagina blijft op zijn plek staan. */
/* De kenmerkenrij twee pixels hoger. */
/* ==========================================================
BANKPAS ACHTER DE STICKER
In een oogopslag duidelijk waar het product op gaat.
========================================================== */
.hero3-wrap{isolation:isolate}
/* Iets meer lucht rondom, want de pas steekt buiten de sticker uit. */
@media(max-width:820px){.hero3-art{padding:1rem .25rem}}
/* ==========================================================
ACHTERKANT VAN DE PAS NAAST DE STICKER
Links de achterkant met de magneetstrip en het handtekeningvak,
rechts je sticker ervoor. Zo zie je in een oogopslag waar het
product op gaat en dat de achterkant vrij blijft.
========================================================== */
/* De sticker houdt zijn eigen laag, de bol staat er nog voor. */
/* Ruimte links, want de pas steekt buiten de sticker uit. */
.hero3-art{padding:1.4rem .5rem 1.4rem 0;overflow:visible}
@media(min-width:960px){.hero3-inner{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}}
/* ==========================================================
CHIPUITSPARING OP DE STICKER
Een klein venster in de sticker met de chip erin, zodat meteen
duidelijk is dat dit de voorkant is en dat de chip vrij blijft.
========================================================== */
/* Chip op de plek waar hij op een echte pas zit: links, net onder het
midden. Stond eerst linksboven en dat klopt niet. */
/* ==========================================================
ACHTERKANT RECHTS ACHTER DE STICKER, CHIP OP DE STICKER
========================================================== */
/* De chip zoals op een echte pas: links, net onder het midden. */
/* ==========================================================
TEKSTBLOK IN DE BANNER
Het geheel start hoger, en de vier onderdelen krijgen onderling
meer lucht in plaats van dat ze tegen elkaar aan staan.
========================================================== */
.hero3 .herobtns{margin-top:0}
@media(max-width:820px){
.hero3-inner{padding-top:clamp(.4rem,1vw,.8rem)}
.hero3-copy h1{margin-bottom:1rem}
.hero3-copy .tag{margin-bottom:1.5rem}
}
/* ==========================================================
BANNER: TEKST, PAS EN CHIP
========================================================== */
/* Ruimte was doorgeschoten. Terug naar iets meer dan voorheen,
maar niet zoveel dat de blokken los van elkaar komen te staan. */
/* Achterkant even groot als de sticker, gedraaid, rechtsonder erachter. */
/* Chip onderaan in het midden. De sticker staat rechtop, dus op een
liggende pas komt de chip daar terecht, niet linksboven. */
/* ==========================================================
KAART, CHIP EN PAS BEWEGEN ALS EEN GEHEEL
De kanteling en de hover zaten op de kaart zelf, waardoor de chip
plat bleef staan en niet meebewoog. Nu zit alles op de groep.
========================================================== */
/* De kaart zelf kantelt niet meer los. */
/* De chip een kwartslag gedraaid: op een liggende pas ligt hij
horizontaal, en die pas draait mee met de staande sticker. */
/* ==========================================================
BANNER, LAATSTE AFSTELLING
========================================================== */
/* Ruimte in het tekstblok terug naar krap. */
.hero3-copy h1{margin-top:0;margin-bottom:.55rem}
.hero3-copy .tag{margin-top:0;margin-bottom:1rem}
/* De chip hoort bij de kaart, dus geen eigen schaduw eronder. */
/* De pas groter, verder naar rechts en iets meer gedraaid. */
@media(max-width:1100px){.hero3-bank{width:150%;left:48%}}
@media(max-width:820px){.hero3-bank{width:132%;left:42%;top:32%}}
/* ==========================================================
ALLEEN DE STICKER EN DE CHIP BEWEGEN
De pas met de magneetstrip blijft stilstaan, want die hoort bij
de achtergrond en niet bij het product.
========================================================== */
.hero3-wrap{position:relative;display:inline-block;transform:none}
.hero3-front{position:relative;display:block;z-index:1;transform:rotate(-4deg);transform-origin:center center;transition:transform .4s cubic-bezier(.2,.7,.3,1);will-change:transform}
.hero3-wrap:hover .hero3-front,
.hero3-front:hover{transform:rotate(-1deg) translateY(-6px)}
.hero3-card{transform:none;z-index:1}
.hero3-card:hover{transform:none}
/* ==========================================================
LAATSTE PUNTEN
========================================================== */
/* Tekst en knoppen verticaal in het midden van de banner. */
.hero3-inner{align-items:center}
.hero3-copy{align-self:center;padding-top:0}
.hero3-art{align-self:center}
/* De prijsbol staat buiten de bewegende groep en blijft dus stil. */
/* De pas groter. Hij heeft zijn eigen zachte schaduw in de afbeelding,
dus er komt er in de opmaak niets meer overheen. */
.hero3-bank{position:absolute;z-index:0;pointer-events:none;width:176%;height:auto;left:50%;top:24%;filter:drop-shadow(10px 16px 26px rgba(0,0,0,.55))}
@media(max-width:1100px){.hero3-bank{width:166%;left:46%}}
@media(max-width:820px){.hero3-bank{width:144%;left:40%;top:30%}}
/* Klok voor snelle levering. */
.ic-clock{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* Logo een paar pixels lager. De negatieve marge wordt kleiner, dus het
logo zakt terwijl de balk zelf even hoog blijft. */
/* Nieuwste ontwerpen strakker onder de vorige sectie. */
.light{padding-bottom:clamp(.6rem,1.4vw,1rem)}
.newest{padding-top:.8rem}
.newest .sechead2{margin-top:0}
/* ==========================================================
CHIP OP ELKE PRODUCTAFBEELDING
Dezelfde plek en dezelfde draaiing als in de banner, zodat overal
meteen duidelijk is dat dit een sticker voor een pas is.
========================================================== */
.skin,.tile,.pdp-shot{position:relative}
/* Op de kleine tegels iets groter, anders valt hij weg. */
/* Op de productpagina juist iets kleiner ten opzichte van het beeld. */
/* Bij uitverkochte kaarten laten we hem weg, daar ligt het stempel al. */
.card.out
/* ==========================================================
GLANSVEEG OVER ALLE PRODUCTBEELDEN
Stond alleen op de winkelkaarten. Nu ook op de tegels van de
startpagina, de kaart in de banner en de productpagina.
========================================================== */
.tile,
.hero3-card,
.pdp-shot{position:relative;overflow:hidden}
.tile::after,
.hero3-card::after,
.pdp-shot::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,
transparent 32%,
rgba(255,255,255,.42) 47%,
transparent 60%);transform:translateX(-60%);transition:transform .7s ease}
.tile:hover::after,
.pdp-shot:hover::after,
.hero3-front:hover .hero3-card::after,
.hero3-wrap:hover .hero3-card::after{transform:translateX(60%)}
/* De chip en de stempels blijven boven de glans staan. */
.newbadge{z-index:5}
/* Op een aanraakscherm heeft hover geen zin, dus daar laten we hem
eenmalig lopen bij het in beeld komen zou te veel zijn: gewoon uit. */
@media(hover:none){
.tile::after,.hero3-card::after,.pdp-shot::after{display:none}
}
/* ==========================================================
CHIP UITZONDEREN VAN DE REGELS VOOR PRODUCTFOTO'S
De regels voor .tile img, .skin img en .pdp-media img pakten ook
de chip mee. Die werd daardoor op volle breedte gezet en verloor
zijn draaiing. Vandaar dat hij op de tegels enorm en horizontaal
werd, terwijl hij in de banner wel klopte.
========================================================== */
/* Op de grote afbeelding van de productpagina iets kleiner, want daar
is het beeld vele malen groter. */
/* Uitverkocht: geen chip, daar ligt het stempel al overheen. */
.card.out
/* De derde regel is langer dan de rest, dus de rij krijgt wat meer
ruimte en de tekst mag netjes over twee regels lopen. */
/* ==========================================================
CHIP OVERAL EXACT ZOALS IN DE BANNER
In de banner staat hij op 16% breed, links 33%, hoogte 76%,
een kwartslag gedraaid. Op de tegels stond hij op 13% en op de
productpagina op 11%, waardoor hij relatief te klein werd.
Nu overal dezelfde drie waarden.
========================================================== */
.card.out
/* ==========================================================
CHIP OP DE OVERIGE PRODUCTBEELDEN
Zelfde maat en plek, maar met een eigen regel. De regels voor
productfoto's binnen een tegel pakken alle afbeeldingen mee,
vandaar dat hier wel uitzonderingen nodig zijn.
========================================================== */
/* De chip op de sticker.
Alles staat in procenten van de kaart, zodat hij op elk formaat op
dezelfde plek blijft: op je startpagina, in je winkel en op de
productpagina.
Twee getallen om aan te draaien:
width hoe groot de chip is, nu 17%
left en top waar hij staat, nu 32,6% en 75,8%
Deze ronde is hij 6 procent groter gemaakt en een fractie naar links
en naar beneden geschoven, zodat de groei aan de onderkant zit en niet
aan de bovenkant. */
.cardchip{
position:absolute;
z-index:4;
pointer-events:none;
left:32.1%;
top:76.4%;
width:18%;
height:auto;
aspect-ratio:auto;
object-fit:contain;
background:none;
border-radius:0;
transform:rotate(90deg);
transform-origin:center center;
}
.tile .cardchip,
.skin .cardchip,
.pdp-shot .cardchip,
.pdp-media .cardchip{width:18%;height:auto;aspect-ratio:auto;object-fit:contain}
.card.out .cardchip{display:none}
/* Alle vier de regels zijn nu volle zinnen, dus meer ruimte per punt
en een vaste maximale breedte zodat de kolommen even breed ogen. */
/* ==========================================================
CHIP IN DE BANNER
De chip zit nu IN de kaart zelf. Daardoor is 16% altijd 16% van
de kaartbreedte, ongeacht wat er verder omheen staat. Eerder hing
hij aan een blok eromheen en dan valt hij terug op zijn eigen
bestandsformaat van 400 pixels zodra er iets niet matcht.
========================================================== */
.hero3-card{position:relative}
/* De chip in de banner. Zelfde maat als overal, anders valt het op als
je van de banner naar de winkel scrollt. */
.hero3-card > img.chipmark{position:absolute;z-index:4;pointer-events:none;left:32.1%;top:76.4%;width:18%;height:auto;aspect-ratio:auto;object-fit:contain;transform:rotate(90deg);transform-origin:center center}
/* Harde bovengrens. Zelfs als een regel hierboven ooit niet aankomt,
kan de chip nooit meer opzwellen tot zijn eigen bestandsformaat. */
img.chipmark,img.cardchip{max-width:22%;max-height:22%}
/* De chip krijgt zijn plaatsing rechtstreeks in het element mee, zodat
geen enkele andere regel of oude cache er nog tussen kan komen.
Het enige wat hier nog nodig is, is een ankerpunt om vanaf te meten. */
.hero3-card,.tile,.skin,.pdp-shot,.pdp-media{position:relative}
/* Vier kolommen van gelijke hoogte, en de tekst nooit meer dan drie
regels. Zo staat het in elke taal netjes onder elkaar, ook als de
ene vertaling wat langer uitvalt dan de andere. */
/* ==========================================================
TAALKIEZER OP MAAT
Een keuzelijst wordt door de browser altijd zo breed als de
langste optie. Daarom staat de zichtbare tekst er nu los in,
met de echte keuzelijst doorzichtig eroverheen. Zo is de breedte
precies die van de taal die je op dat moment hebt.
========================================================== */
.langbox{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line);padding:.45rem 1.5rem .45rem .55rem;transition:border-color .2s}
.langbox:hover{border-color:var(--seal)}
.langbox::after{content:'';position:absolute;right:.5rem;top:50%;width:0.4375rem;height:0.4375rem;margin-top:-0.3125rem;border-right:2px solid var(--smoke);border-bottom:2px solid var(--smoke);transform:rotate(45deg);pointer-events:none}
.langbox:hover::after{border-color:var(--paper)}
.langnow{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--smoke);white-space:nowrap;line-height:1.2}
.langbox:hover .langnow{color:var(--paper)}
/* De echte keuzelijst ligt er onzichtbaar overheen, zodat klikken
gewoon het lijstje van de browser opent. */
.langbox .langpick{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer;max-width:none}
/* Op een telefoon alleen de vlag, de naam valt weg. */
@media(max-width:820px){
.langbox{padding:.45rem 1.2rem .45rem .45rem}
.langnow{font-size:0}
.langnow::first-letter{font-size:.95rem}
}
/* De weg terug staat nu links naast het logo. */
.navrow{display:flex;align-items:center;gap:1rem}
.brandmark{margin-right:.2rem}
/* Kruimelpad: de eerste stap is de weg terug, dus die mag opvallen. */
.crumbs a{color:var(--smoke);transition:color .2s}
.crumbs a:first-child{color:var(--seal)}
.crumbs a:hover{color:var(--paper)}
/* ==========================================================
BANNER IETS MINDER HOOG
Minder ruimte tussen het logo en de kop.
========================================================== */
.nav{padding-top:.25rem;padding-bottom:.25rem}
.hero3-inner{padding-top:.4rem}
@media(max-width:820px){.hero3-inner{padding-top:.5rem}}
/* Het kruimelpad boven de kop op de shoppagina. */
.shopcrumbs{margin:-.6rem 0 1.4rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
/* ==========================================================
SHOPPAGINA IN HET LICHT
Alleen deze pagina. De startpagina en de productpagina blijven
donker, want daar draagt het zwart de sfeer.
========================================================== */
body.is-shop{color:#16161A}
body.is-shop .wrap{background:#FFFFFF}
body.is-shop .sechead h2{color:#16161A}
body.is-shop .sechead p{color:#5F5D5A}
body.is-shop .shopcrumbs a{color:var(--seal)}
body.is-shop .shopcrumbs span{color:#5F5D5A}
/* Stijlfilters */
body.is-shop .fchip{border-color:#DCDAD6;color:#5F5D5A;background:#fff}
body.is-shop .fchip:hover{border-color:#16161A;color:#16161A}
body.is-shop .fchip.on{background:var(--seal);border-color:var(--seal);color:#fff}
/* Productkaarten */
body.is-shop .card{overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
body.is-shop .pname{color:#16161A}
body.is-shop .pnum,body.is-shop .cardmeta{color:#7A7874}
body.is-shop .price{color:#16161A}
body.is-shop .price s{color:#A9A7A3}
body.is-shop .restock{background:rgba(0,0,0,.72);color:#fff}
/* Uitleg onderaan */
body.is-shop .disc{border-color:#ECEAE6;background:#FAF9F7;color:#5F5D5A}
body.is-shop .disc h4,body.is-shop .disc strong{color:#16161A}
/* De voettekst blijft donker, dat sluit de pagina netjes af. */
body.is-shop .foot{background:var(--ink);color:var(--smoke)}
/* ==========================================================
MENU IN DE KOP
Home, Shop, Vragen en Hoe werkt het. De pagina waar je bent
krijgt een rode streep eronder.
========================================================== */
.navlinks{display:flex;align-items:center;margin-right:auto}
.navlinks a{position:relative;padding:.5rem 0;color:var(--smoke);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;transition:color .2s}
.navlinks a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--seal);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.navlinks a:hover{color:var(--paper)}
.navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1)}
/* Op de witte shoppagina de tekst donker in plaats van licht. */
body.is-shop .navlinks a{color:var(--smoke)}
@media(max-width:980px){.navlinks{gap:1.1rem;margin-left:1rem}.navlinks a{font-size:.64rem;letter-spacing:.1em}}
@media(max-width:820px){.navlinks{display:none}}
/* ==========================================================
UITVERKOCHT TUSSEN DE REST
Ze blijven zichtbaar met een stempel en een knop voor de
wachtlijst. Dat laat je zien waar vraag naar is voordat
je opnieuw inkoopt.
========================================================== */
.soldflag{position:absolute;top:0;right:0;z-index:5;background:#16161A;color:#fff;border-radius:0 0.5rem 0 0.5rem;padding:.4rem .75rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 3px 12px rgba(0,0,0,.4)}
@media(max-width:640px){.soldflag{font-size:.6rem;padding:.32rem .55rem}}
/* De afbeelding zelf gedempt, zodat het verschil meteen te zien is
zonder dat het ontwerp onherkenbaar wordt. */
.tile:has(.soldflag) img{filter:grayscale(.55) brightness(.78)}
.card.out .skin img{filter:grayscale(.5) brightness(.8)}
.card.out{opacity:1}
body.is-shop .card.out{opacity:1;border-color:#E2E0DC}
/* De knop voor de wachtlijst moet uitnodigen, niet uitgeschakeld lijken. */
.card.out .add{background:transparent;border:1px solid var(--seal);color:var(--seal)}
.card.out .add:hover{background:var(--seal);color:#fff}
body.is-shop .card.out .add{color:var(--seal)}
/* ==========================================================
PRIJS IN DE VERFSPAT
De spat is een losse afbeelding, de prijs staat er als tekst
overheen. Zo blijft hij scherp op elk scherm en kan hij mee
veranderen als je prijs wijzigt.
========================================================== */
.pricebadge{position:absolute;z-index:6;top:-1.875rem;right:-2.125rem;width:8.25rem;height:auto;display:grid;place-items:center;background:none;border-radius:0;box-shadow:none;transform:none;transition:none;pointer-events:none}
.pricebadge img{grid-area:1/1;display:block;width:100%;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.pricebadge b{grid-area:1/1;position:relative;z-index:1;font-family:'Anton',sans-serif;font-size:1.25rem;letter-spacing:.01em;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.pricebadge em{display:none}
@media(max-width:1100px){.pricebadge{width:7.25rem;top:-1.5rem;right:-1.625rem}.pricebadge b{font-size:clamp(.95rem,1.7vw,1.1rem)}}
@media(max-width:820px){.pricebadge{width:6rem;top:-1.125rem;right:-1.125rem}.pricebadge b{font-size:.92rem}}
@media(max-width:480px){.pricebadge{width:5.25rem;top:-0.875rem;right:-0.875rem}.pricebadge b{font-size:.82rem}}
/* ==========================================================
AFRONDING NA DE TWEEDE RONDE
========================================================== */
/* Logo nog twee pixels lager. */
/* Menu wat verder van het logo af en meer naar het midden. */
.navlinks{margin-left:clamp(1.5rem,5vw,4.5rem);gap:clamp(1.2rem,2.4vw,2.2rem)}
/* Geen rode streep meer onder het menu, alleen de tekst wordt wit. */
.navlinks a::after{display:none}
.navlinks a.on{color:var(--paper)}
.navlinks a.on::after{display:none}
/* ==========================================================
WINKELKAARTEN: RUSTIG EN GELIJK UITGELIJND
========================================================== */
/* Alleen de sticker beweegt, het witte vak eromheen blijft staan. */
.card:hover{transform:none}
.card:hover .skin{transform:translateY(-5px) rotate(-1deg)}
/* De knop op gelijke hoogte, ongeacht hoe lang de naam is. */
.grid{align-items:stretch}
.card{display:flex;flex-direction:column;height:100%}
.card .skin{flex:0 0 auto}
.card > a{display:block}
.card .add{margin-top:auto}
.card .cardfoot,.card .pname,.card .pnum,.card .price{flex:0 0 auto}
/* Zachtere schaduw onder de sticker. */
.skin{box-shadow:0 4px 14px rgba(0,0,0,.22)}
.card:hover .skin{box-shadow:0 10px 22px rgba(0,0,0,.28)}
.tile{box-shadow:0 4px 14px rgba(0,0,0,.10)}
.tile:hover{box-shadow:0 10px 22px rgba(0,0,0,.15)}
/* De witte hoeken van de stickerfoto wegsnijden, zodat de vorm klopt. */
.skin img,.tile img,.pdp-shot > img:not(.cardchip){border-radius:0.5625rem}
/* ==========================================================
PRODUCTPAGINA IN HET LICHT
========================================================== */
body.is-pdp{background:#FFFFFF;color:#16161A}
body.is-pdp .crumbs a{color:var(--seal)}
body.is-pdp .crumbs span,body.is-pdp .crumbs{color:#7A7874}
body.is-pdp h1,body.is-pdp h2,body.is-pdp h3{color:#16161A}
body.is-pdp .pdp-price{color:#16161A}
body.is-pdp .pdp-sub,body.is-pdp .pdp-meta,body.is-pdp p{color:#5F5D5A}
body.is-pdp .spec li{border-color:#ECEAE6;color:#5F5D5A}
body.is-pdp .spec li b{color:#16161A}
body.is-pdp .faq{border-color:#ECEAE6}
body.is-pdp .faq summary{color:#16161A}
/* De antwoorden donkerder. Stonden op #5F5D5A, met een contrast van 6,0.
Dat haalt de norm net, maar bij lopende tekst van een paar regels leest
het toch te licht. */
body.is-pdp .faq p{color:#3C3C42}
body.is-pdp .disc{border-color:#ECEAE6;background:#FAF9F7;color:#5F5D5A}
body.is-pdp .disc h4,body.is-pdp .disc strong{color:#16161A}
body.is-pdp .foot{background:var(--ink);color:var(--smoke)}
body.is-pdp .navlinks a{color:var(--smoke)}
/* De stickerfoto wat kleiner op de productpagina. */
body.is-pdp .pdp-media{max-width:25rem}
@media(min-width:900px){body.is-pdp /* De sticker op de productpagina groter. Je zag hem bij 90 procent
uitzoomen op deze maat en die stond je beter aan. Van 22,5 naar 25
rem is elf procent groter, precies dat verschil. */
.pdp-media{max-width:25rem}}
body.is-pdp .pdp-shot > img:not(.cardchip){border-radius:0.75rem}
/* De kern van de verfspat ligt niet in het midden maar op 54 procent
van de breedte. De prijs schuift daarom mee naar rechts, anders valt
hij aan de linkerkant buiten de verf. */
@media(max-width:820px){.pricebadge b{transform:translateX(5%) rotate(-8deg)}}
/* ==========================================================
LEESBAARHEID OP DE WITTE PAGINA'S
De grijstinten waren gekozen voor een zwarte achtergrond. Op wit
vallen ze weg, dus alles krijgt hier een donkere variant.
========================================================== */
body.is-pdp,
body.is-shop{--smoke:#5F5D5A;--paper:#16161A;--line:#E4E2DE;--ink-2:#FFFFFF}
body.is-pdp .pnum,
body.is-pdp .stockbar,
body.is-pdp .qty,
body.is-pdp .shipnote,
body.is-pdp .rte,
body.is-pdp .paylist,
body.is-shop .pnum,
body.is-shop .shipnote{color:#4A4A50}
/* De vinkjes en hun tekst, die vielen het hardst weg. */
body.is-pdp .trust,
body.is-pdp .trust span,
body.is-pdp .trustrow,
body.is-pdp .fit{color:#3C3C42}
body.is-pdp .trust b,body.is-pdp .fit b{color:#16161A}
/* Het aantal en de plus- en minknoppen. */
body.is-pdp .qty{border:1px solid #DCDAD6;background:#fff}
body.is-pdp .qty button{color:#16161A}
body.is-pdp .qty input,body.is-pdp .qty b{color:#16161A}
/* De regel over verzendkosten. */
body.is-pdp .shipnote{color:#4A4A50}
body.is-pdp .shipnote em,body.is-pdp .shipnote i{color:#7A7874;font-style:normal}
/* De streep voor de chipregel houdt zijn rood, de tekst wordt donker. */
body.is-pdp .fit{border-left-color:var(--seal);color:#3C3C42}
/* Kruimelpad. */
body.is-pdp .crumbs{color:#7A7874}
body.is-pdp .crumbs span{color:#4A4A50}
/* Losse links in lopende tekst. */
/* De loopbalk minder hoog: van .5 naar .32 rem boven en onder,
en de tekst een fractie kleiner. Dat scheelt ongeveer 6 pixels. */
.ticker{padding:.32rem 0}
.ticker-set span{font-size:.66rem}
/* Het logo twee pixels lager ten opzichte van de loopbalk, zonder dat
de balk zelf hoger wordt: het zakt van boven en steekt evenveel
minder ver onderuit. */
/* Prijs nog iets verder naar rechts in de spat. */
.pricebadge b{transform:translateX(11%) rotate(-8deg)}
@media(max-width:820px){.pricebadge b{transform:translateX(9%) rotate(-8deg)}}
/* Dezelfde valkuil in de winkel: kolommen van 1fr dijen uit zodra de
inhoud niet past, waardoor een lange productnaam zijn kaart groter
maakt dan de rest. Met minmax(0,1fr) blijft elke kolom exact gelijk. */
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){body.is-shop .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){body.is-shop .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card,.tile{min-width:0}
.pname{overflow:hidden;text-overflow:ellipsis}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* ==========================================================
DE KOPBALK BLIJFT LICHT OP DE WITTE PAGINA'S
Voor de shop- en productpagina heb ik de kleurvariabelen naar
donker gezet. De kopbalk gebruikt diezelfde variabelen en werd
daardoor donker op donker. Hier krijgt hij zijn eigen kleuren
terug, los van de rest van de pagina.
========================================================== */
body.is-shop .nav,
body.is-pdp .nav{background:rgba(11,11,12,.94);color:#F5F3EF}
body.is-shop .navlinks a,
body.is-pdp .navlinks a{color:#9C9A96}
body.is-shop .navlinks a:hover,
body.is-pdp .navlinks a:hover,
body.is-shop .navlinks a.on,
body.is-pdp .navlinks a.on{color:#FFFFFF}
body.is-shop .cartbtn,
body.is-pdp .cartbtn{border-color:#3A3A40;color:#C3C0BC;background:transparent}
body.is-shop .cartbtn:hover,
body.is-pdp .cartbtn:hover{border-color:var(--seal);color:#FFFFFF}
body.is-shop .cartbtn b,
body.is-pdp .cartbtn b{color:var(--seal)}
body.is-shop .carticon,
body.is-pdp .carticon{background:#C3C0BC}
body.is-shop .cartbtn:hover .carticon,
body.is-pdp .cartbtn:hover .carticon{background:#FFFFFF}
body.is-shop .langbox,
body.is-pdp .langbox{border-color:#3A3A40}
body.is-shop .langbox:hover,
body.is-pdp .langbox:hover{border-color:var(--seal)}
body.is-shop .langnow,
body.is-pdp .langnow{color:#C3C0BC}
body.is-shop .langbox:hover .langnow,
body.is-pdp .langbox:hover .langnow{color:#FFFFFF}
body.is-shop .langbox::after,
body.is-pdp .langbox::after{border-color:#C3C0BC}
body.is-shop .langbox:hover::after,
body.is-pdp .langbox:hover::after{border-color:#FFFFFF}
/* Het hamburgermenu op mobiel hoort ook bij de donkere balk. */
body.is-shop .burger span,
body.is-pdp .burger span{background:#F5F3EF}
body.is-shop .mobmenu,
body.is-pdp .mobmenu{background:#0B0B0C}
body.is-shop .mobmenu a,
body.is-pdp .mobmenu a{color:#C3C0BC;border-color:#1E1E22}
body.is-shop .mobmenu a:hover,
body.is-pdp .mobmenu a:hover{color:#FFFFFF}
/* De loopbalk erboven blijft rood met witte tekst. */
body.is-shop .ticker,
body.is-pdp .ticker{background:var(--seal);color:#FFFFFF}
body.is-shop .ticker-set span,
body.is-pdp .ticker-set span{color:#FFFFFF}
/* Op voorraad in het groen, uitverkocht in het rood. Dat leest sneller
dan een grijze regel waar je doorheen moet lezen. */
.instock{color:#1E9B45;font-weight:700}
.nostock{color:var(--seal);font-weight:700}
body.is-pdp .instock{color:#17803A}
body.is-shop .instock{color:#17803A}
/* ==========================================================
WINKELWAGEN HOUDT ZIJN EIGEN KLEUREN
De lade ligt over de pagina heen en is altijd donker. Op de witte
shop- en productpagina pakte hij de donkere tekstkleur van die
pagina op, waardoor alles onleesbaar werd. Alles binnen de lade
krijgt hier vaste kleuren, ongeacht de pagina eronder.
========================================================== */
.drawer{background:#0F0F11;color:#F5F3EF}
.drawer *{border-color:#26262B}
.drawer .dhead h3{color:#FFFFFF}
.drawer .dhead button{color:#C3C0BC;background:none}
.drawer .dhead button:hover{color:#FFFFFF}
/* De regels per product, opgebouwd door het script. */
.drawer .line{color:#FFFFFF}
.drawer .line span{color:#9C9A96}
.drawer .line > div > div:first-child{color:#FFFFFF}
.drawer .line button[data-del]{color:#9C9A96;background:none}
.drawer .line button[data-del]:hover{color:var(--seal)}
.drawer .lineqty{border:1px solid #3A3A40}
.drawer .lineqty button{color:#FFFFFF;background:none}
.drawer .lineqty button:hover{color:var(--seal)}
.drawer .lineqty span{color:#FFFFFF}
.drawer .lineqty button[disabled]{color:#57565B}
.drawer .empty{color:#9C9A96}
/* Verzending, totaal en de balk. */
.drawer .ship{color:#C3C0BC}
.drawer .ship.unlocked,.drawer .ship.unlocked b{color:#2FBF5B}
.drawer .shipnote{color:#8A8785}
.drawer .bar{background:rgba(255,255,255,.12)}
.drawer .subline{color:#C3C0BC}
.drawer .tracknote{color:#8A8785}
.drawer .total{color:#FFFFFF}
.drawer .zoneline,.drawer .zonepick{color:#C3C0BC}
.drawer .zoneline b{color:#FFFFFF}
.drawer #ZonePick{background:#0B0B0C;color:#FFFFFF;border-color:#3A3A40}
.drawer .disclaimer{color:#8A8785}
/* Het venster voor de wachtlijst, dat ligt er ook overheen. */
.notifybox{background:#141416;color:#F5F3EF}
.notifybox h3{color:#FFFFFF}
.notifybox .nsub{color:#9C9A96}
.notifybox .nclose{color:#C3C0BC;background:none}
.notifybox input{background:#0B0B0C;color:#FFFFFF;border:1px solid #3A3A40}
.notifybox input::placeholder{color:#7A7874}
/* ==========================================================
TAALKIEZER EN WINKELWAGEN EVEN HOOG
Ze hadden allebei hun eigen opvulling, en die verschilde net.
Nu bepaalt een vaste hoogte de maat en centreert de inhoud
zichzelf. Zo blijven ze gelijk, ook als de tekst per taal
iets hoger of lager uitvalt.
========================================================== */
.navright{display:flex;align-items:stretch;gap:.6rem}
.langbox,.cartbtn{height:2.5rem;min-height:2.5rem;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
.langbox{padding-left:.55rem;padding-right:1.5rem}
.cartbtn{padding-left:1rem;padding-right:1rem}
@media(max-width:820px){
.langbox,.cartbtn{height:2.25rem;min-height:2.25rem}
.langbox{padding-left:.45rem;padding-right:1.2rem}
.cartbtn{padding-left:.7rem;padding-right:.7rem}
}
/* Pictogrammen voor sociale media in de voettekst. */
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);color:var(--smoke);transition:border-color .2s,color .2s,background .2s}
.socials a:hover{border-color:var(--seal);color:#fff;background:var(--seal)}
.socials svg{display:block}
/* In de voettekst blijft het donker, ook op de witte pagina's. */
body.is-shop .socials a,body.is-pdp .socials a{border-color:#3A3A40;color:#C3C0BC}
body.is-shop .socials a:hover,body.is-pdp .socials a:hover{border-color:var(--seal);color:#fff;background:var(--seal)}
/* De uitleg over de chip is nu een volle zin, dus wat meer ruimte en
een duidelijke link naar de uitleg in stappen. */
.fit{line-height:1.65;max-width:34rem}
.fitlink{display:inline-block;color:var(--seal);border-bottom:1px solid var(--seal);margin-left:.25rem;white-space:nowrap}
.fitlink:hover{color:#16161A;border-color:#16161A}
body.is-pdp .fitlink:hover{color:#16161A;border-color:#16161A}
.fitsize{display:block;margin-top:.3rem;font-size:.78rem;color:#7A7874}
/* ==========================================================
WINKELKAART: TERUG NAAR DE OPZET DIE WERKTE
De sticker staat weer binnen het witte vlak met ruimte eromheen,
precies zoals eerst. Het enige verschil met toen is dat de schaduw
en de rand eraf zijn, want naast elkaar liepen die schaduwen in
elkaar over en dat las als een grijze band achter de rij.
========================================================== */
body.is-shop .card{background:#FFFFFF;padding:1.4rem;border:0;border-radius:0.625rem;box-shadow:none;display:flex;flex-direction:column;height:100%}
body.is-shop .card:hover{background:#FFFFFF;box-shadow:none;transform:none}
/* De sticker houdt zijn eigen ronding en zijn zachte schaduw, want
die hoort bij de sticker zelf en niet bij het vak eromheen. */
body.is-shop .skin{border-radius:0.5rem;overflow:hidden;background:#FFFFFF;box-shadow:0 3px 10px rgba(0,0,0,.16);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
body.is-shop .card:hover .skin{transform:translateY(-4px)}
body.is-shop .skin img{border-radius:0.5rem;background:#FFFFFF}
/* Tekst en knop weer zonder eigen inspringing, de kaart heeft al marge. */
body.is-shop .card .cardfoot,
body.is-shop .card .pname,
body.is-shop .card .pnum,
body.is-shop .card .price{padding-left:0;padding-right:0}
body.is-shop .card .pname{margin-top:1rem}
body.is-shop .card .add{margin:.9rem 0 0}
/* Stempels weer in de hoek van de sticker in plaats van de kaart. */
/* Ruimte tussen de kaarten, geen randen nodig. */
body.is-shop .grid{gap:1.2rem}
/* Het NIEUW-stempel op de productpagina: in de hoek van de foto en
als klein label naast de titel. */
.pdp-shot .newbadge,.pdp-shot .soldflag{position:absolute;top:0;right:0;z-index:5;border-radius:0 0.5rem 0 0.5rem}
.h1new{display:inline-block;vertical-align:middle;margin-left:.6rem;background:var(--seal);color:#fff;border-radius:3px;padding:.28rem .5rem;font-family:'Zen Kaku Gothic New',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.14em;line-height:1;position:relative;top:-.35em}
@media(max-width:640px){.h1new{font-size:.56rem;margin-left:.4rem}}
/* ==========================================================
RANDEN EN HOEKEN OP DE PRODUCTPAGINA
De regels richtten zich op "de eerste afbeelding" binnen het vak.
Sinds het NIEUW-stempel daarvoor staat, klopte dat niet meer en
verloor de foto zijn ronding. Nu wordt elke afbeelding gepakt
behalve de chip, dus dit kan niet meer stukgaan door iets ervoor
te zetten.
========================================================== */
.pdp-shot{display:block;position:relative;border-radius:0.75rem;overflow:hidden;line-height:0}
.pdp-shot > img:not(.cardchip){border-radius:0.75rem;display:block;width:100%;height:auto}
body.is-pdp .pdp-media{background:transparent}
body.is-pdp .pdp-media img{border-radius:0.75rem}
/* ==========================================================
DE VIER VOORDELEN — EEN SAMENHANGEND BLOK
Hier stonden dertig losse regels door elkaar, waarvan een deel
elkaar tegensprak. Op mobiel werd de achtergrond donker gezet
terwijl een latere regel de titels donker maakte, dus donker op
donker. Alles staat nu op een plek.
========================================================== */
.usps{list-style:none;margin:clamp(1.6rem,3.5vw,2.6rem) 0 0;padding-top:clamp(1.3rem,2.8vw,1.8rem);padding-left:0;padding-right:0;border-top:1px solid rgba(0,0,0,.10);display:grid;gap:1.5rem;grid-template-columns:1fr;background:transparent;align-items:start}
@media(min-width:640px){.usps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}}
@media(min-width:1000px){.usps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 2rem}}
.usps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;align-items:start;min-width:0}
.usps li .ic{grid-row:span 2;width:1.625rem;height:1.625rem;background:#16161A;flex:0 0 auto}
.usps li b{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#16161A;margin-bottom:.3rem;line-height:1.3}
.usps li i{display:block;font-style:normal;font-size:.8rem;line-height:1.55;color:#4A4A50}
/* Op een telefoon staan ze onder elkaar met een lijntje ertussen,
zodat je ziet waar het ene punt eindigt en het volgende begint. */
@media(max-width:639px){
.usps{gap:0;border-top:1px solid rgba(0,0,0,.10);padding-top:0}
.usps li{padding:1.05rem 0;border-bottom:1px solid rgba(0,0,0,.09);align-items:center}
.usps li:last-child{border-bottom:0}
.usps li .ic{width:1.5rem;height:1.5rem}
.usps li b{font-size:.76rem;margin-bottom:.2rem}
.usps li i{font-size:.82rem;line-height:1.5}
}
/* ==========================================================
MOBIEL: DE REST OPGERUIMD
========================================================== */
@media(max-width:820px){
/* De hero: de pas achter de sticker maakte het rommelig op een
smal scherm. Hij blijft, maar kleiner en verder naar achteren. */
.hero3-bank{width:118%;left:44%;top:34%;opacity:.55}
.hero3-art{padding:.6rem 0 1.2rem}
.hero3-card{width:min(11.875rem,46.8rem)}
.pricebadge{width:5.125rem;top:-0.875rem;right:-1rem}
.pricebadge b{font-size:.9rem}
/* De rij tegels schoof half buiten beeld. Nu twee volledige kaarten
in beeld met de derde die net zichtbaar begint, zodat duidelijk is
dat je kunt schuiven. */
.tiles{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.4rem;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 46%;scroll-snap-align:start}
/* Sectiekop en de tekst ernaast onder elkaar in plaats van naast
elkaar, want daar liep het over elkaar heen. */
.sechead{display:block}
.sechead h2{margin-bottom:.4rem}
.sechead p{margin:0}
/* De uitlegtekening past niet goed op een smal scherm, want daar
staan twee passen naast elkaar. Hij mag schuiven. */
.howfit img{min-width:32.5rem}
.howfit .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.howfit .wrap::-webkit-scrollbar{display:none}
.howfit-p{margin-bottom:1rem}
/* De stappen twee naast elkaar in plaats van vier, dan blijft de
tekst leesbaar. */
.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
}
@media(max-width:440px){
.tile{flex:0 0 62%}
.hero3-card{width:min(10.625rem,52.2rem)}
.steps{grid-template-columns:1fr}
}
/* ==========================================================
MOBIELE KOPBALK: DRIE DINGEN IN PLAATS VAN VIER
De taalkiezer is naar het hamburgermenu verhuisd. Die gebruikt
iemand hooguit een keer en hij nam de ruimte in die het logo
nodig heeft. Wat overblijft: menu links, logo in het midden,
winkelwagen rechts.
========================================================== */
@media(max-width:820px){
.langbox{display:none}
.navrow{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:0;padding-left:.7rem;padding-right:.7rem}
.burger{grid-column:1;justify-self:start}
.brandmark{grid-column:2;justify-self:center;margin:0}
.navright{grid-column:3;justify-self:end;gap:0}
/* Het logo mag nu groter, want het staat alleen in het midden. */
/* De winkelwagen wordt een pictogram met een telletje erop. */
.cartbtn{width:2.75rem;height:2.5rem;min-height:2.5rem;padding:0;justify-content:center;position:relative}
.cartword{display:none}
.carticon{display:block}
.cartbtn b{position:absolute;top:-0.375rem;right:-0.375rem;min-width:1.125rem;height:1.125rem;display:grid;place-items:center;background:var(--seal);color:#fff;border-radius:0.5625rem;font-size:.62rem;line-height:1}
/* De taalkiezer onderin het menu. */
.moblang{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad);border-top:1px solid rgba(245,243,239,.14);margin-top:.4rem}
.moblang span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8A8785}
.moblang select{background:#141416;color:#F5F3EF;border:1px solid #3A3A40;padding:.5rem .7rem;font-size:.8rem}
}
@media(min-width:821px){.moblang{display:none}}
/* ==========================================================
MOBIELE BANNER: RUSTIGER
De pas achter de sticker gaat eruit op een telefoon. Op een klein
scherm is dat te veel op elkaar, en de boodschap staat toch al in
de sectie Voorkant en achterkant verderop.
========================================================== */
@media(max-width:820px){
.hero3-bank{display:none}
/* Kaart eerst, dan de tekst. Zo zie je meteen wat je koopt. */
.hero3-inner{grid-template-columns:1fr;gap:1.2rem;padding-top:1rem;padding-bottom:2rem}
.hero3-art{order:-1;padding:.4rem 0 .2rem}
.hero3-copy{order:1}
.hero3-card{width:min(11.25rem,45rem)}
.pricebadge{width:4.875rem;top:-0.75rem;right:-0.875rem}
.pricebadge b{font-size:.86rem}
/* De kop wat kleiner zodat hij op twee regels blijft. */
.hero3-copy h1 span{font-size:clamp(1.9rem,9vw,2.6rem)}
.hero3-copy .tag{font-size:.95rem;margin-bottom:1.1rem}
/* De drie kenmerken onder elkaar in plaats van naast elkaar,
want naast elkaar werden het drie kolommen van twee woorden. */
}
/* ==========================================================
DE GRIJZE BALK: HET RASTER ZELF
Het raster had een grijze achtergrond met een rand eromheen. Dat
was ooit bedoeld om haarlijnen tussen de kaarten te maken. Nu er
ruimte tussen de kaarten zit, schijnt die grijze laag daar
doorheen. Vandaar de balk in het midden.
========================================================== */
body.is-shop .grid{background:transparent;border:0}
body.is-shop{background:#FFFFFF}
/* ==========================================================
KNOP EN TEKST OP MOBIEL
In winkelwagen liep over twee regels en viel buiten het kader,
omdat de knop een vaste hoogte had en de letterafstand groot is.
========================================================== */
@media(max-width:820px){
.card .add{height:auto;min-height:2.75rem;padding:.8rem .6rem;font-size:.66rem;letter-spacing:.08em;line-height:1.3;white-space:normal;display:flex;align-items:center;justify-content:center;text-align:center}
/* De naam en de prijs op een rij, met de naam die afbreekt in
plaats van de prijs weg te duwen. */
body.is-shop .card{padding:.9rem}
.cardfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.6rem;align-items:baseline}
.pname{font-size:.86rem;line-height:1.25;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.price{font-size:1rem;white-space:nowrap}
.pnum{font-size:.68rem;margin-top:.15rem}
/* Twee kaarten naast elkaar, allebei even hoog. */
body.is-shop .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
}
@media(max-width:380px){
.card .add{font-size:.6rem;letter-spacing:.05em}
.pname{font-size:.8rem}
}
/* ==========================================================
STEMPEL MEE LATEN SCHALEN MET DE FOTO
Op de productpagina is de foto op een telefoon veel groter dan op
een computer, maar het stempel had een vaste maat en werd daardoor
een postzegel. Nu groeit hij mee met de breedte van het beeld.
========================================================== */
.pdp-shot .newbadge,
.pdp-shot .soldflag{padding:clamp(.4rem,1.6vw,.7rem) clamp(.75rem,3vw,1.3rem);font-size:1rem;letter-spacing:.14em;border-radius:0 0.75rem 0 0.75rem}
/* De foto zelf hoeft op een telefoon niet de volle breedte te vullen,
dan blijft de verhouding met de rest van de pagina kloppen. */
@media(max-width:820px){
body.is-pdp .pdp-media{max-width:none;margin:0 auto}
body.is-pdp .pdp-shot{max-width:100%}
}
@media(max-width:480px){
.pdp-shot .newbadge,.pdp-shot .soldflag{font-size:.86rem;padding:.5rem 1rem}
}
/* ==========================================================
WINKELKAARTEN OP GELIJKE HOOGTE
Een naam die over twee regels loopt duwde alles eronder omlaag.
De naam krijgt nu de ruimte van twee regels gereserveerd, ook als
hij er maar een nodig heeft. Daarmee staan de prijs, de serie en
de knop bij elke kaart op dezelfde lijn.
========================================================== */
.cardfoot{align-items:start}
.pname{
min-height:calc(1.25em * 2);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
line-height:1.25;
}
.price{align-self:start}
.pnum{min-height:1.2em}
/* ==========================================================
KORTINGSCODE IN DE WINKELWAGEN
========================================================== */
.promo{margin:0 0 .9rem}
.promo-row{display:flex;gap:.5rem}
.promo-row input{flex:1;min-width:0;background:#0B0B0C;color:#fff;
border:1px solid #3A3A40;padding:.6rem .7rem;font:inherit;font-size:.82rem;
letter-spacing:.06em;text-transform:uppercase}
.promo-row input::placeholder{color:#7A7874;letter-spacing:.04em;text-transform:none}
.promo-row input:focus{outline:none;border-color:var(--seal)}
.promo-row button{flex:0 0 auto;border:1px solid #3A3A40;color:#C3C0BC;
padding:.6rem .9rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.promo-row button:hover{border-color:var(--seal);color:#fff}
.promo-msg{margin:.45rem 0 0;font-size:.74rem;color:#8A8785;line-height:1.4}
.promo-msg.ok{color:#2FBF5B}
.promo-msg.err{color:var(--seal)}
.promo-line span:first-child{color:#2FBF5B}
.promo-del{background:none;border:0;color:#8A8785;font-size:.72rem;text-decoration:underline;padding:0}
.promo-del:hover{color:var(--seal)}
/* ==========================================================
AFWERKING: GLANZEND OF MAT
Alleen op de productpagina. De twee pictogrammen zijn getekend in
de opmaak, zodat ze meekleuren en geen extra bestand kosten.
========================================================== */
/* Mat: een egaal vlak met een fijne korrel. */
/* Op de donkere pagina's leest het blok andersom. */
body:not(.is-pdp):not(.is-shop)
body:not(.is-pdp):not(.is-shop)
body:not(.is-pdp):not(.is-shop)
/* De prijs en de naam op dezelfde tekstregel. Ze stonden allebei
bovenaan uitgelijnd, maar door hun verschillende lettergrootte
begon de tekst op een andere hoogte. Uitlijnen op de basislijn
van de eerste regel lost dat op, ook als de naam twee regels
nodig heeft. */
.cardfoot{align-items:baseline}
.price{align-self:baseline}
.pname{margin-bottom:0}
/* De kortingsregel: naam links met de verwijderknop eronder,
het bedrag rechts. */
.promo-line{align-items:flex-start}
.promo-left{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.promo-left b{color:#2FBF5B;font-size:.82rem;letter-spacing:.06em}
.promo-line #PromoAmt{color:#2FBF5B;white-space:nowrap}
.promo-del{background:none;border:0;padding:0;text-align:left;
color:#8A8785;font-size:.7rem;text-decoration:underline;cursor:pointer}
.promo-del:hover{color:var(--seal)}
/* ==========================================================
STEMPELS EN HOEKEN, LAATSTE CORRECTIE
========================================================== */
/* Op de winkelkaart hoort het stempel in de hoek van de sticker,
niet in de marge van de kaart eromheen. */
body.is-shop .skin{position:relative;overflow:hidden}
/* Op de productpagina hoort hij mee te schalen met de foto. Die is op
een telefoon drie keer zo groot als op een computer. */
.pdp-shot{position:relative}
.pdp-shot .newbadge,
.pdp-shot .soldflag{
position:absolute;
top:0;
right:0;
z-index:6;
padding:clamp(.45rem,1.8vw,.75rem) 1.4rem;
font-size:1.05rem;
letter-spacing:.14em;
border-radius:0 0.75rem 0 0.75rem;
}
/* De witte hoekjes van de stickerfoto wegsnijden. Het vak eromheen
krijgt dezelfde ronding en snijdt bij, zodat er nooit een vierkante
hoek onder een ronde afbeelding vandaan piept. */
.pdp-shot,
body.is-pdp .pdp-media{border-radius:0.75rem;overflow:hidden}
.pdp-shot > img:not(.cardchip){border-radius:0.75rem;display:block;width:100%;height:auto}
body.is-shop .skin,body.is-shop .skin img{border-radius:0.5rem}
.tile,.tile img{border-radius:0.5rem}
/* ==========================================================
PICTOGRAM VOOR DE AFWERKING
De kleuren zijn uitgemeten uit je eigen foto van de gedrukte
stickers: roze #CD95AA, lavendel #A690C6, cyaan #95B2CE,
mint #B1DECC en geelgroen #D1D4A3. Zo klopt het pictogram met
wat de klant straks in zijn hand heeft.
========================================================== */
/* De rand van het blok krijgt dezelfde glans, dan is meteen duidelijk
waar het over gaat zonder dat je de tekst hoeft te lezen. */
/* ==========================================================
STEMPEL OP DE STICKER, NIET ERNAAST
Het stempel stond als los element in de kaart, dus op de witte
shoppagina zweefde het boven de sticker in de marge. Het zit nu
in de sticker zelf, zoals op de tegels van de startpagina.
========================================================== */
.skin{position:relative;overflow:hidden}
.skin > .newbadge{
position:absolute;
top:0;
right:0;
left:auto;
bottom:auto;
z-index:7;
margin:0;
border-radius:0 0.5rem 0 0.5rem;
}
/* Verborgen is verborgen. De regel voor de korting kreeg display:flex
uit de algemene opmaak, en dat wint van het verborgen-kenmerk. Zonder
deze regel ziet iedereen een lege kortingsregel staan en denkt hij
dat hij een actie misloopt. */
.promo-line[hidden],
[hidden]{display:none !important}
/* Accent op het winkelwagentje wanneer er iets bij komt. */
@keyframes cartbump{
0%{transform:scale(1)}
35%{transform:scale(1.14)}
60%{transform:scale(.97)}
100%{transform:scale(1)}
}
.cartbtn.bump{animation:cartbump .55s cubic-bezier(.2,.7,.3,1)}
.cartbtn.bump b{background:var(--seal);color:#fff}
@media(prefers-reduced-motion:reduce){.cartbtn.bump{animation:none}}
/* ==========================================================
WINKELWAGEN: MEER RUIMTE VOOR DE PRODUCTEN
Het overzicht van wat je koopt is het belangrijkste deel en had de
minste ruimte. Alles eromheen is krapper gezet, zodat de lijst kan
groeien. De knoppen blijven wel groot genoeg om op een telefoon
goed te kunnen raken, minimaal 40 pixels.
========================================================== */
/* Kop: veel minder lucht boven en onder. */
.drawer .dhead{padding:.85rem 1.1rem}
.drawer .dhead h3{font-size:1.15rem;letter-spacing:.02em}
/* De productlijst krijgt alle ruimte die overblijft. */
.drawer .dbody{padding:.6rem 1.1rem;flex:1 1 auto;min-height:0}
.drawer .line{padding:.75rem 0}
/* Plus en min compacter, maar nog steeds goed aan te tikken. */
.drawer .lineqty{height:2.25rem}
.drawer .lineqty button{width:2.25rem;height:2.25rem;font-size:1rem}
.drawer .lineqty span{min-width:2rem;font-size:.85rem}
/* Voettekst krapper. */
.drawer .dfoot{padding:.8rem 1.1rem 1rem}
.drawer .ship{margin:0 0 .4rem;font-size:.8rem}
.drawer .bar{margin-bottom:.7rem}
.drawer .promo{margin-bottom:.6rem}
.drawer .promo-row input,
.drawer .promo-row button{height:2.375rem;padding-top:0;padding-bottom:0}
.drawer .subline{margin-bottom:.25rem;font-size:.82rem}
.drawer .total{margin:.5rem 0 .6rem}
.drawer .tracknote{margin:0 0 .4rem}
/* De afrekenknop mag lager, hij valt door zijn kleur toch wel op. */
.drawer #CheckoutBtn{padding:.85rem 1rem;font-size:.82rem;min-height:2.875rem}
/* Op een telefoon iets ruimer, want daar tik je met je duim. */
@media(max-width:640px){
.drawer .lineqty{height:2.5rem}
.drawer .lineqty button{width:2.5rem;height:2.5rem}
.drawer .promo-row input,.drawer .promo-row button{height:2.625rem}
.drawer #CheckoutBtn{min-height:3.125rem}
}
/* ==========================================================
LOGO EN KOPBALK, EEN PLEK
Hier stonden 38 losse regels voor het logo, opgebouwd over vele
rondes heen. De hoogte van de balk wordt bepaald door het logo
plus zijn marges. Het logo blijft even groot, maar hangt verder
onder de balk uit, zodat de balk zelf lager wordt.
========================================================== */
.brandmark img{
width:auto;
display:block;
background:none;
height:6.1875rem;
margin-top:2px;
margin-bottom:-2.0625rem; /* neemt 68px in de balk in, was 78px */
filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
@media(max-width:1100px){.brandmark img{height:5.4375rem;margin-bottom:-1.875rem}}
@media(max-width:820px){.brandmark img{height:4.625rem;margin-bottom:-1.625rem}}
@media(max-width:480px){.brandmark img{height:3.875rem;margin-bottom:-1.375rem}}
/* De balk zelf ook een fractie krapper. */
.nav{padding-top:.2rem;padding-bottom:.2rem}
/* De serie naast de soort, in dezelfde regel maar rustiger van kleur.
De soort is een filter en dus rood en klikbaar, de serie is alleen
informatie. */
.metaset{color:#5F5D5A}
body:not(.is-pdp):not(.is-shop) .metaset{color:var(--smoke)}
/* ==========================================================
PAGINA NIET GEVONDEN
Zelfde sfeer als de banner, met het cijfer groot op de achtergrond.
========================================================== */
.err404{position:relative;background:var(--ink);overflow:hidden;
padding:clamp(3rem,9vw,6rem) 0 clamp(3.5rem,8vw,5rem)}
.err404 .wrap{position:relative;z-index:2;padding-top:0;padding-bottom:0;text-align:center}
/* Het cijfer als achtergrond, niet als tekst om te lezen. */
.err-code{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
font-family:'Anton',sans-serif;font-size:clamp(9rem,34vw,22rem);line-height:.8;
color:rgba(210,32,44,.16);margin:0;z-index:1;pointer-events:none;user-select:none;
letter-spacing:-.02em}
.err404 h1{font-family:'Anton',sans-serif;text-transform:uppercase;
font-size:clamp(1.9rem,5.5vw,3.4rem);line-height:1.02;margin:0 0 .8rem;color:var(--paper)}
.err-sub{max-width:34rem;margin:0 auto 1.8rem;color:var(--smoke);
font-size:1.05rem;line-height:1.65}
.err-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
@media(max-width:520px){
.err-btns{flex-direction:column}
.err-btns .btn{width:100%}
}
/* ==========================================================
HOLO-EFFECT: BREED, TRAAG EN MET ECHTE KLEURSCHEIDING
Twee lagen over elkaar die met verschillend tempo bewegen. Dat is
wat een echte holokaart doet: de kleuren schuiven niet als een
blok, ze verschuiven ten opzichte van elkaar. De banden zijn breed
en lopen van roze via paars en blauw naar cyaan, mint en goud.
========================================================== */
.fin-gloss{position:relative;overflow:hidden}
/* Onderste laag: de volle regenboog, traag. */
.fin-gloss::before{
content:'';
position:absolute;
top:-30%; bottom:-30%;
left:-70%;
width:240%; /* breder dan de kaart, zodat je de rand
van de laag zelf nooit ziet passeren */
z-index:4;
pointer-events:none;
border-radius:inherit;
background:linear-gradient(112deg,
rgba(214,120,190,0) 0%,
rgba(214,120,190,0) 26%,
rgba(214,120,190,.24) 34%,
rgba(160,120,214,.30) 41%,
rgba(110,142,226,.34) 49%,
rgba(110,200,214,.28) 57%,
rgba(150,214,180,.20) 65%,
rgba(214,200,150,0) 74%,
rgba(214,200,150,0) 100%);
transform:translateX(-72%);
transition:transform 1.8s cubic-bezier(.28,.55,.32,1);
}
/* Bovenste laag: smaller en lichter, iets sneller. Het verschil in
tempo geeft de glinstering. */
.fin-gloss::after{
content:'';
position:absolute;
top:-30%; bottom:-30%;
left:-70%;
width:240%;
z-index:5;
pointer-events:none;
border-radius:inherit;
background:linear-gradient(104deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 38%,
rgba(255,255,255,.18) 45%,
rgba(190,230,255,.24) 49%,
rgba(255,255,255,.12) 54%,
rgba(255,255,255,0) 61%,
rgba(255,255,255,0) 100%);
transform:translateX(-74%);
transition:transform 1.35s cubic-bezier(.28,.55,.32,1);
}
.card:hover .fin-gloss::before,
.tile.fin-gloss:hover::before,
.pdp-shot.fin-gloss:hover::before,
.hero3-wrap:hover .fin-gloss::before{transform:translateX(72%)}
.card:hover .fin-gloss::after,
.tile.fin-gloss:hover::after,
.pdp-shot.fin-gloss:hover::after,
.hero3-wrap:hover .fin-gloss::after{transform:translateX(74%)}
/* Mat: een enkele witte veeg, ook traag maar zonder kleur. */
.fin-matte{position:relative;overflow:hidden}
.fin-matte::after{
content:'';
position:absolute;
top:-30%; bottom:-30%;
left:-70%;
width:240%;
z-index:4;
pointer-events:none;
border-radius:inherit;
background:linear-gradient(112deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 36%,
rgba(255,255,255,.22) 49%,
rgba(255,255,255,0) 62%,
rgba(255,255,255,0) 100%);
transform:translateX(-72%);
transition:transform 1.8s cubic-bezier(.28,.55,.32,1);
}
.card:hover .fin-matte::after,
.tile.fin-matte:hover::after,
.pdp-shot.fin-matte:hover::after{transform:translateX(72%)}
@media(hover:none){
.fin-gloss::before,.fin-gloss::after,.fin-matte::after{display:none}
}
/* ==========================================================
EIGENSCHAPPEN VAN DE STICKER
Afwerking, waar hij op past en het formaat, in een rijtje onder
elkaar. Samen geeft dat in een oogopslag antwoord op de vragen
die iemand heeft voordat hij koopt.
========================================================== */
.specs{list-style:none;margin:0 0 1.1rem;padding:0;
border:1px solid #E4E2DE;background:#FAF9F7;border-radius:0.375rem}
.specs li{display:flex;gap:.7rem;align-items:flex-start;
padding:.6rem .75rem;border-bottom:1px solid #EFEDEA}
.specs li:last-child{border-bottom:0}
.sp-txt{display:block;min-width:0}
.sp-txt b{display:block;font-size:.72rem;letter-spacing:.06em;
text-transform:uppercase;color:#16161A;margin-bottom:.12rem}
.sp-txt i{display:block;font-style:normal;font-size:.76rem;
color:#5F5D5A;line-height:1.45}
.sp-ic{flex:0 0 auto;width:1.375rem;height:1.375rem;position:relative;
margin-top:.1rem;border-radius:0.25rem;overflow:hidden}
/* Afwerking: de hologlans of een egaal vlak bij mat. */
.finish-gloss .sp-fin{background:linear-gradient(135deg,
#CD95AA 0%,#A690C6 26%,#95B2CE 50%,#B1DECC 74%,#D1D4A3 100%)}
.finish-gloss .sp-fin::after{content:'';position:absolute;inset:0;
background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.8) 47%,transparent 58%)}
.finish-matte .sp-fin{background:#3A3A42}
.finish-matte .sp-fin::after{content:'';position:absolute;inset:0;opacity:.5;
background-image:radial-gradient(rgba(255,255,255,.35) .5px,transparent .5px);
background-size:0.1875rem 0.1875rem}
/* Past op: een chipje, hetzelfde beeld als op de sticker. */
.sp-chip{background:linear-gradient(140deg,#E8CE86,#CDA84E 45%,#B8912F);border-radius:0.1875rem}
.sp-chip::before{content:'';position:absolute;left:0.1875rem;right:0.1875rem;top:0.4375rem;height:0.0625rem;
background:rgba(0,0,0,.35);box-shadow:0 0.3125rem 0 rgba(0,0,0,.35)}
.sp-chip::after{content:'';position:absolute;top:0.1875rem;bottom:0.1875rem;left:50%;width:0.0625rem;
background:rgba(0,0,0,.35)}
/* Formaat: de omtrek van een pas. */
.sp-size{background:#fff;border:0.0625rem solid #16161A;border-radius:0.1875rem}
.sp-size::after{content:'';position:absolute;left:0.1875rem;top:0.3125rem;width:0.375rem;height:0.3125rem;
background:#16161A;border-radius:0.0625rem}
/* De link naar de uitleg loopt mee in de regel. */
.specs .fitlink{color:var(--seal);border-bottom:1px solid var(--seal);
white-space:nowrap;margin-left:.15rem}
.specs .fitlink:hover{color:#16161A;border-color:#16161A}
/* Op de donkere pagina's andersom. */
body:not(.is-pdp):not(.is-shop) .specs{background:var(--ink-2);border-color:var(--line)}
body:not(.is-pdp):not(.is-shop) .specs li{border-bottom-color:var(--line)}
body:not(.is-pdp):not(.is-shop) .sp-txt b{color:var(--paper)}
body:not(.is-pdp):not(.is-shop) .sp-txt i{color:var(--smoke)}
/* ==========================================================
EIGEN PAGINA'S VOOR UITLEG EN VRAGEN
========================================================== */
.uitleg{margin:0 0 2.6rem}
.uitleg h3{font-family:'Anton',sans-serif;text-transform:uppercase;
font-size:1.5rem;letter-spacing:.02em;margin:0 0 .6rem}
.uitleg p{max-width:44rem;line-height:1.7;margin:0 0 1rem}
.uitleg img{display:block;width:100%;max-width:44rem;height:auto;border-radius:0.5rem}
.uitleg .maat{font-size:.85rem;color:#5F5D5A}
.stapjes{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stap{display:flex;gap:.8rem;align-items:flex-start;
border:1px solid #E4E2DE;background:#FAF9F7;padding:.85rem .9rem;border-radius:0.375rem}
.stap b{font-family:'Anton',sans-serif;font-size:1.3rem;color:var(--seal);line-height:1}
.stap span{font-size:clamp(.7rem,1.9vw,.88rem);line-height:1.5;color:#3C3C42}
.uitleg-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:2rem 0 3rem}
@media(max-width:520px){.uitleg-cta{flex-direction:column}.uitleg-cta .btn{width:100%}}
/* ==========================================================
VOETTEKST
Vier kolommen: merk met de pictogrammen, winkel, service en
bedrijfsgegevens. Daaronder een afsluitregel.
========================================================== */
.foot{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:640px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.foot{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{font-family:'Anton',sans-serif;text-transform:uppercase;
letter-spacing:.1em;font-size:.8rem;margin:0 0 .8rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.5rem;font-size:.85rem}
.foot a:hover{color:var(--seal)}
.legal{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
justify-content:center;padding:1.2rem var(--pad);
border-top:1px solid rgba(245,243,239,.10);
font-size:.78rem;color:var(--smoke)}
.legal a{color:var(--smoke)}
.legal a:hover{color:var(--seal)}
.legal-sep{opacity:.5}
/* ==========================================================
OMLIJNING PER PRODUCT IN DE WINKEL
Zonder afbakening is bij twee rijen onder elkaar niet te zien bij
welke sticker de knop hoort. Een dunne lijn met wat ruimte binnenin
maakt van elke kaart een eigen blokje.
========================================================== */
body.is-shop .card{
border:1px solid #E4E2DE;
border-radius:0.625rem;
background:#FFFFFF;
padding:1rem;
transition:border-color .25s ease, box-shadow .25s ease;
}
body.is-shop .card:hover{
border-color:#C9C6C1;
box-shadow:0 6px 18px rgba(0,0,0,.07);
background:#FFFFFF;
}
/* Bij uitverkocht een rustiger rand, dan valt hij minder op zonder
dat hij verdwijnt. */
body.is-shop .card.out{border-color:#EFEDEA}
body.is-shop .card.out:hover{border-color:#E4E2DE;box-shadow:none}
/* Wat meer lucht tussen de kaarten, anders raken de randen elkaar
bijna en wordt het weer een raster van hokjes. */
body.is-shop .grid{gap:1.4rem}
/* De knop krijgt zijn eigen rand binnen de kaart, zodat er geen twee
lijnen strak op elkaar staan. */
body.is-shop .card .add{
border:1px solid #DCDAD6;
border-radius:0.375rem;
background:#FFFFFF;
color:#16161A;
transition:background .2s ease, border-color .2s ease, color .2s ease;
}
body.is-shop .card .add:hover{
background:var(--seal);
border-color:var(--seal);
color:#FFFFFF;
}
@media(max-width:820px){
body.is-shop .card{padding:.8rem;border-radius:0.5rem}
body.is-shop .grid{gap:1rem}
}
/* ==========================================================
DE PICTOGRAMMEN IN LIGGEND FORMAAT
Alle drie gaan over een pas of een chip, en die zijn breder dan
hoog. Een vierkantje klopt daar niet mee. De verhouding is die
van een betaalpas, 85,60 bij 53,98 mm.
========================================================== */
.sp-ic{width:1.875rem;height:1.1875rem;border-radius:0.1875rem;margin-top:.15rem}
/* Afwerking: de glans over een liggende pas. */
.finish-gloss .sp-fin{border-radius:0.1875rem}
/* Past op: een liggende pas met de chip erop, precies zoals in het
echt. Dat leest sneller dan een los chipje. */
.sp-chip{background:#F2EFE9;border:0.0625rem solid #C9A54A;border-radius:0.1875rem}
.sp-chip::before{content:'';position:absolute;left:0.25rem;top:0.3125rem;
width:0.5625rem;height:0.4375rem;border-radius:0.0625rem;
background:linear-gradient(140deg,#E8CE86,#CDA84E 45%,#B8912F);
box-shadow:0 0 0 .5px rgba(0,0,0,.28)}
.sp-chip::after{content:'';position:absolute;right:0.25rem;top:0.375rem;
width:0.6875rem;height:0.0625rem;background:rgba(0,0,0,.28);
box-shadow:0 0.25rem 0 rgba(0,0,0,.18)}
/* Formaat: de omtrek van een pas met een maatstreepje eronder. */
.sp-size{background:#fff;border:0.0625rem solid #16161A;border-radius:0.1875rem}
.sp-size::before{content:'';position:absolute;left:0.1875rem;right:0.1875rem;bottom:0.1875rem;
height:0.0625rem;background:#16161A}
.sp-size::after{content:'';position:absolute;left:0.1875rem;top:0.25rem;
width:0.4375rem;height:0.3125rem;background:#16161A;border-radius:0.0625rem}
/* De glanslaag staat in rust volledig buiten de kaart. Bij een breedte
van 240% en een linkerpositie van -70% is dat vanaf -72%: de rechterrand
zit dan op -2,8% en raakt de kaart dus nergens meer. Eerder stond hij
op -42% en bedekte hij nog 69% van de kaart, waardoor je in rust kleur
in de hoeken zag. */
/* De oudere witte veeglagen stonden in rust op -60% en bedekten daarmee
nog 40% van de kaart. Bij een laag die even breed is als de kaart valt
hij pas bij -100% volledig buiten beeld. */
.skin::after,
.tile::after,
.hero3-card::after,
.pdp-shot::after{transform:translateX(-100%)}
.card:hover .skin::after,
.tile:hover::after,
.pdp-shot:hover::after,
.hero3-front:hover .hero3-card::after,
.hero3-wrap:hover .hero3-card::after{transform:translateX(100%)}
/* Het getal in de winkelwagenknop op dezelfde lijn als de tekst.
Het stond hoger doordat het een kleiner lettertype heeft en daardoor
op zijn eigen bovenlijn uitlijnde in plaats van op de basislijn. */
.cartbtn{align-items:center}
.cartbtn b{display:inline-flex;align-items:center;justify-content:center;
line-height:1;position:relative;top:0}
/* Op mobiel blijft hij een telletje in de hoek, daar hoort hij juist
niet op de tekstlijn te staan. */
@media(max-width:820px){
.cartbtn b{position:absolute;top:-0.375rem;right:-0.375rem}
}
/* ==========================================================
WAAROM
Donker blok tussen de banner en de stickers. Een grote kop met
de belofte, daaronder drie redenen. Bewust weinig tekst per punt,
want dit moet gelezen worden en niet bestudeerd.
========================================================== */
.why{background:var(--ink);padding:clamp(2.6rem,6vw,4.5rem) 0}
.why-h{font-family:'Anton',sans-serif;text-transform:uppercase;
font-size:clamp(1.6rem,4.4vw,2.9rem);line-height:1.06;
color:var(--paper);margin:0 0 .8rem;max-width:22ch}
.why-p{color:var(--smoke);font-size:1.1rem;
line-height:1.65;max-width:46ch;margin:0 0 clamp(1.8rem,4vw,2.8rem)}
.why-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:700px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.why-kaart h3{font-family:'Anton',sans-serif;text-transform:uppercase;
font-size:.95rem;letter-spacing:.03em;color:var(--paper);margin:.9rem 0 .5rem}
.why-kaart p{color:var(--smoke);font-size:.88rem;line-height:1.65;margin:0}
/* Pictogrammen in de vorm van een pas, want daar gaat het over. */
.why-ic{display:block;width:2.75rem;height:1.75rem;border-radius:0.25rem;position:relative}
/* Wisselen: twee passen die over elkaar schuiven. */
.why-swap{background:#2A2A32;border:1px solid #46464F}
.why-swap::before{content:'';position:absolute;left:-0.4375rem;top:-0.375rem;
width:2.75rem;height:1.75rem;border-radius:0.25rem;
background:linear-gradient(135deg,#CD95AA,#95B2CE 60%,#B1DECC);opacity:.85}
.why-swap::after{content:'';position:absolute;right:0.3125rem;bottom:0.3125rem;
width:0.6875rem;height:2px;background:#8A8785;box-shadow:0 -4px 0 #8A8785}
/* Opvallen: een pas met een lichtflits eroverheen. */
.why-shine{background:linear-gradient(135deg,#A690C6,#95B2CE 55%,#CD95AA)}
.why-shine::after{content:'';position:absolute;inset:0;border-radius:0.25rem;
background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.9) 47%,transparent 60%)}
/* Werkt gewoon: een pas met de chip vrij en een vinkje. */
.why-ok{background:#2A2A32;border:1px solid #46464F}
.why-ok::before{content:'';position:absolute;left:0.3125rem;top:0.4375rem;width:0.75rem;height:0.5625rem;
border-radius:2px;background:linear-gradient(140deg,#E8CE86,#CDA84E 45%,#B8912F)}
.why-ok::after{content:'';position:absolute;right:0.5rem;top:0.5625rem;
width:0.75rem;height:0.375rem;border-left:2px solid #2FBF5B;border-bottom:2px solid #2FBF5B;
transform:rotate(-45deg)}
/* Het waarom-blok staat nu op de uitlegpagina, en die is licht.
Geen eigen achtergrond meer, en donkere tekst. */
.why-licht{background:transparent;padding:0;margin:0 0 3rem}
.why-licht .why-h{color:#16161A;font-size:clamp(1.4rem,3.4vw,2.2rem);margin-bottom:.7rem}
.why-licht .why-p{color:#4A4A50;margin-bottom:1.8rem}
.why-licht .why-kaart{border:1px solid #E4E2DE;background:#FAF9F7;
padding:1rem;border-radius:0.5rem}
.why-licht .why-kaart h4{font-family:'Anton',sans-serif;text-transform:uppercase;
font-size:.9rem;letter-spacing:.03em;color:#16161A;margin:.8rem 0 .45rem}
.why-licht .why-kaart p{color:#5F5D5A;font-size:.85rem;line-height:1.6;margin:0}
/* De pictogrammen hebben op wit een rand nodig, anders zweven ze. */
.why-licht .why-swap,.why-licht .why-ok{background:#FFFFFF;border-color:#D6D3CE}
.why-licht .why-swap::after{background:#9C9A96;box-shadow:0 -4px 0 #9C9A96}
.why-licht .why-ok::after{border-color:#17803A}
/* ==========================================================
HET GETAL IN DE WINKELWAGENKNOP
Het gebruikte Anton, en dat lettertype vult zijn regelhoogte tot
bovenaan. Daardoor stond het cijfer hoger dan het woord ernaast,
hoeveel ik het ook probeerde te centreren. Nu hetzelfde lettertype
als de tekst, dan lijnen ze vanzelf uit op dezelfde basislijn.
========================================================== */
.cartbtn b{
font-family:inherit;
font-weight:700;
font-size:inherit;
letter-spacing:inherit;
line-height:inherit;
color:var(--seal);
display:inline;
position:static;
transform:none;
align-self:auto;
}
/* Op mobiel blijft het een telletje in de hoek. Daar staat het los van
de tekst, dus daar is een eigen vorm juist wel goed. */
@media(max-width:820px){
.cartbtn b{
position:absolute;
top:-0.375rem;
right:-0.375rem;
min-width:1.125rem;
height:1.125rem;
display:grid;
place-items:center;
background:var(--seal);
color:#fff;
border-radius:0.5625rem;
font-size:.62rem;
line-height:1;
font-family:inherit;
}
}
/* Twee nieuwe pictogrammen in de banner, passend bij de nieuwe tekst.
Holografisch krijgt de regenboog, en losmaken een hoekje dat omkrult.
Ze zijn gekleurd in plaats van een masker, want de regenboog kan
niet met een enkele kleur. */
/* Alle regels in de loopbalk gelijk. De eerste kreeg een andere
letterafstand en was niet vet, waardoor het leek of er twee soorten
berichten stonden. */
.ticker-set span{font-weight:700;letter-spacing:.2em}
@media(max-width:820px){.ticker-set span{letter-spacing:.16em}}
/* ==========================================================
DE DRIE PUNTEN IN DE BANNER
Een regel per punt, met een wit pictogram ervoor. Geen tweede
regel eronder meer: dat maakte er zes regels van en dat leest
niet in een oogopslag.
========================================================== */
/* Alle pictogrammen wit, allemaal even groot. */
/* ==========================================================
UITVERKOCHT-STEMPEL IN HET MIDDEN
Het stempel stond vast op 2,1 rem vanaf de rechterbovenhoek. Bij
de nieuwe kaartmarge komt het daarmee half buiten de sticker. Nu
staat het gecentreerd op de sticker zelf, zoals een echt stempel
op een pakket.
========================================================== */
.card{position:relative}
.seal{
position:absolute;
top:50%;
left:50%;
right:auto;
transform:translate(-50%,-50%) rotate(-9deg);
z-index:5;
}
.card.out .seal{top:50%;right:auto;left:50%}
/* De melding over terugkomst boven de sticker, binnen de kaartmarge. */
.restock{
top:auto;
bottom:.6rem;
left:50%;
right:auto;
transform:translateX(-50%);
z-index:6;
white-space:nowrap;
max-width:calc(100% - 1.6rem);
overflow:hidden;
text-overflow:ellipsis;
}
body.is-shop .restock{background:rgba(22,22,26,.86);color:#fff}
@media(max-width:820px){
.seal{width:2.875rem;height:2.875rem;font-size:1.5625rem}
.restock{font-size:.55rem;bottom:.5rem}
}
/* De soort: zwart en vet, geen streepje eronder. */
body.is-pdp a.metasoort,
body.is-shop a.metasoort,
a.metasoort{
color:#16161A;
font-weight:700;
text-decoration:none;
border-bottom:0;
}
body.is-pdp a.metasoort:hover,
body.is-shop a.metasoort:hover,
a.metasoort:hover{color:var(--seal);border-bottom:0}
body:not(.is-pdp):not(.is-shop) a.metasoort{color:var(--paper)}
/* ==========================================================
DE TWEE PUNTEN IN DE BANNER
Pictogram links, tekst ernaast. Geen streepje, geen tweede regel.
========================================================== */
.feat3{
list-style:none;
margin:0 0 1.5rem;
padding:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.2rem;
max-width:34rem;
}
.feat3 li{
display:flex;
align-items:center;
gap:.6rem;
border:0;
padding:0;
}
.feat3 li .ic{
flex:0 0 auto;
width:1.25rem;
height:1.25rem;
margin:0;
background:var(--paper);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
}
.feat3 li b{
display:block;
font-size:.84rem;
font-weight:600;
line-height:1.35;
color:var(--paper);
text-transform:none;
letter-spacing:.01em;
}
@media(max-width:640px){
.feat3{grid-template-columns:1fr;gap:.55rem;max-width:26rem;margin-bottom:1.2rem}
.feat3 li b{font-size:.82rem}
.feat3 li .ic{width:1.125rem;height:1.125rem}
}
/* ==========================================================
WINKELWAGEN OVERAL DEZELFDE RANDEN
De lade gebruikte var(--line) voor haar randen. Op de shoppagina
staat die variabele op een lichte kleur, dus daar werden het witte
lijnen. De lade is altijd donker, dus haar randen ook.
========================================================== */
.drawer{border-left:1px solid #1E1E22}
.drawer,.drawer *{border-color:#1E1E22}
.drawer .dhead{border-bottom:1px solid #1E1E22}
.drawer .dfoot{border-top:1px solid #1E1E22}
.drawer .line{border-bottom:1px solid #1E1E22}
.drawer .lineqty{border:1px solid #3A3A40}
.drawer #ZonePick{border:1px solid #3A3A40}
.drawer .promo-row input,.drawer .promo-row button{border-color:#3A3A40}
.notifybox{border:1px solid #26262B}
/* Zelfde behandeling voor de shop- en productpagina, zodat er nergens
een lichte lijn doorheen komt. */
body.is-shop .drawer,body.is-pdp .drawer,
body.is-shop .drawer *,body.is-pdp .drawer *{border-color:#1E1E22}
body.is-shop .drawer .lineqty,body.is-pdp .drawer .lineqty,
body.is-shop .drawer #ZonePick,body.is-pdp .drawer #ZonePick,
body.is-shop .drawer .promo-row input,body.is-pdp .drawer .promo-row input,
body.is-shop .drawer .promo-row button,body.is-pdp .drawer .promo-row button{border-color:#3A3A40}
/* ==========================================================
SOCIALE PICTOGRAMMEN OVERAL GELIJK
Op de shoppagina werd het vlak rood met een witte tekening, en dat
ziet er goed uit. Op de startpagina kleurde de tekening mee rood.
Nu op elke pagina hetzelfde.
========================================================== */
.socials a,
body.is-shop .socials a,
body.is-pdp .socials a{
border:1px solid #3A3A40;
color:#C3C0BC;
background:transparent;
}
.socials a:hover,
body.is-shop .socials a:hover,
body.is-pdp .socials a:hover,
.foot .socials a:hover{
border-color:var(--seal);
background:var(--seal);
color:#FFFFFF;
}
.socials a svg{color:inherit;fill:none}
.socials a:hover svg{color:#FFFFFF}
/* Winkelwagentje op de knop. Getekend in de opmaak, dus geen extra
bestand en het kleurt mee met de tekst. */
.addbtn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem}
.btn-cart{
width:1.0625rem;height:1.0625rem;flex:0 0 auto;background:currentColor;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
}
/* Het blokje met eigenschappen los van de koopknop, zodat duidelijk is
dat het informatie is en geen onderdeel van de bestelling. */
.specs{margin-top:1.8rem;margin-bottom:1.2rem}
/* Het kaartnummer achteraan, rustiger dan de rest van de regel. */
.metanr{color:#7A7874;white-space:nowrap;margin-left:.15rem}
body:not(.is-pdp):not(.is-shop) .metanr{color:var(--smoke)}
/* ==========================================================
UITVERKOCHT-STEMPEL OP DE STICKER
Het stempel stond buiten de sticker, dus het centreerde op de hele
kaart inclusief naam, prijs en knop. Daardoor viel het onder het
beeld. Nu zit het in de sticker en valt het midden op het ontwerp.
========================================================== */
.skin{position:relative;overflow:hidden}
.skin > .seal{
position:absolute;
top:50%;
left:50%;
right:auto;
transform:translate(-50%,-50%) rotate(-9deg);
z-index:6;
}
.skin > .restock{
position:absolute;
top:auto;
bottom:.5rem;
left:50%;
right:auto;
transform:translateX(-50%);
z-index:7;
white-space:nowrap;
max-width:92%;
overflow:hidden;
text-overflow:ellipsis;
}
/* De melding over terugkomst weer linksboven in de sticker, zoals hij
eerst stond. Onderin viel hij samen met de rand van het beeld en leek
hij bij de tekst eronder te horen. */
.skin > .restock{
top:.6rem;
bottom:auto;
left:.6rem;
right:auto;
transform:none;
max-width:calc(100% - 1.2rem);
}
/* Twee pijlen in een kring: wisselen. Dat leest als "er komt een andere
voor in de plaats", wat precies de belofte is. Een omkrullend hoekje
zei alleen dat je hem eraf kunt trekken, niet waarom dat leuk is. */
.ic-swap{
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
}
/* De twee punten dichter bij elkaar. Met twee gelijke kolommen begon de
tweede altijd op de helft, ook als de eerste tekst kort is. Nu nemen
ze de breedte die ze nodig hebben en staan ze naast elkaar. */
.feat3{
grid-template-columns:auto auto;
justify-content:start;
gap:1.6rem;
max-width:none;
}
@media(max-width:820px){.feat3{gap:1.1rem}}
@media(max-width:640px){
.feat3{grid-template-columns:1fr;gap:.55rem;justify-content:stretch}
}
/* ==========================================================
HET STEMPEL WEER ZICHTBAAR BIJ UITVERKOCHT
De sticker kreeg een grijsfilter. Nu het stempel binnen de sticker
zit, werd dat mee vergrijsd en verdween het rood. Het filter hoort
op de afbeelding, niet op het hele vak.
========================================================== */
.card.out .skin{filter:none}
.card.out .skin img{filter:grayscale(.7) brightness(.62)}
.card.out .skin > .seal,
.card.out .skin > .restock{filter:none}
/* Het stempel goed leesbaar op een gedempte sticker. */
.skin > .seal{
color:var(--seal);
text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.skin > .seal small{color:var(--seal)}
/* De tekst onder het stempel vet, want dun op een drukke sticker
is slecht te lezen. */
.seal small{font-weight:700;letter-spacing:.12em}
/* Het stempel op de productpagina precies zoals in de winkel:
in het midden, rood, met de melding erboven in de foto. */
.pdp-shot{position:relative;overflow:hidden}
.pdp-shot > .seal{
position:absolute;
top:50%;
left:50%;
right:auto;
transform:translate(-50%,-50%) rotate(-9deg);
z-index:6;
color:var(--seal);
text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.pdp-shot > .seal small{color:var(--seal)}
.pdp-shot > .restock{
position:absolute;
top:.7rem;
left:.7rem;
right:auto;
bottom:auto;
transform:none;
z-index:7;
max-width:calc(100% - 1.4rem);
}
/* De restockmelding overal hetzelfde. Op de shoppagina was hij al
donkergrijs met witte tekst, maar die regel gold alleen daar. Op de
productpagina bleef hij rood. Nu op elke witte pagina gelijk, zodat
het rood voorbehouden blijft aan het stempel zelf. */
body.is-shop .restock,
body.is-pdp .restock,
body.is-shop .skin > .restock,
body.is-pdp .pdp-shot > .restock{
background:rgba(22,22,26,.86);
color:#FFFFFF;
}
/* De restockmelding op de productpagina groter. Daar is de foto veel
groter dan een winkelkaart, dus dezelfde lettergrootte oogt daar
kleiner. Hij schaalt nu mee met de breedte van het beeld. */
.pdp-shot > .restock{
font-size:.88rem;
letter-spacing:.14em;
padding:.45rem .8rem;
top:1rem;
left:1rem;
border-radius:3px;
}
/* ==========================================================
MOBIEL: RUSTIGER EN COMPACTER
========================================================== */
@media(max-width:820px){
/* Winkelkaarten: naam, prijs en serie kleiner, en minder lucht
boven de tekst. Er ging veel beeld verloren aan witruimte. */
body.is-shop .card .pname{margin-top:.55rem;font-size:.78rem;line-height:1.25}
body.is-shop .card .price{font-size:.86rem}
body.is-shop .card .pnum{font-size:.62rem;margin-top:.1rem}
body.is-shop .card .add{margin-top:.6rem;min-height:2.5rem;font-size:.62rem}
body.is-shop .card{padding:.7rem}
body.is-shop .grid{gap:.8rem}
/* Productpagina: kop en prijs kleiner, ze vulden het halve scherm. */
body.is-pdp .pdp h1{font-size:clamp(1.5rem,7vw,2.1rem);line-height:1.05}
body.is-pdp .pdp-price{font-size:1.25rem}
/* Het NIEUW-stempel op de productfoto groter, die foto is daar groot. */
.pdp-shot .newbadge{font-size:.95rem;padding:.5rem 1.1rem;letter-spacing:.16em}
/* De kop van de winkelwagen lager. */
.drawer .dhead{padding:.6rem .9rem}
.drawer .dhead h3{font-size:1rem}
.drawer .dbody{padding:.5rem .9rem}
.drawer .dfoot{padding:.6rem .9rem .8rem}
}
/* ==========================================================
HET AANTAL OP DE WINKELWAGENKNOP
Geen rood rondje meer, gewoon het getal in het rood naast het
wagentje. Bij een lege wagen blijft het grijs.
========================================================== */
.cartbtn b{
position:static;
top:auto;right:auto;
min-width:0;
height:auto;
background:none;
border-radius:0;
color:var(--seal);
font-weight:700;
font-size:inherit;
line-height:inherit;
display:inline;
padding:0;
margin-left:.15rem;
}
@media(max-width:820px){
.cartbtn b{
position:static;
background:none;
border-radius:0;
color:var(--seal);
font-size:.8rem;
min-width:0;
height:auto;
display:inline;
margin-left:.25rem;
}
.cartbtn{width:auto;padding:0 .55rem;gap:.1rem}
}
/* Het getal in de melding over gratis verzending ook rood, zodat je
ziet hoeveel je er nog nodig hebt. */
.ship b,.drawer .ship b{color:var(--seal);font-weight:700}
.drawer .ship.unlocked b{color:#2FBF5B}
/* ==========================================================
EIGEN BANNERAFBEELDING
Staat er een eigen afbeelding, dan vervangt die de pas en de
verfstreken. De tekst, de sticker met de prijs en de witte
onderrand blijven staan, dus die worden hier niet aangeraakt.
========================================================== */
.hero3-eigen{background-repeat:no-repeat}
/* De verfstreek rechts hoort bij de oude banner en gaat eruit. */
.hero3-eigen::after{display:none}
/* De tekst en de sticker blijven boven de sluier staan. */
.hero3-eigen .hero3-inner{position:relative;z-index:2}
/* Op een telefoon staat de tekst onder de sticker, dus daar een
sluier over de hele breedte in plaats van alleen links. */
/* Geen sluier over de eigen banner: je afbeelding komt onbewerkt in
beeld. De kop krijgt in plaats daarvan een schaduw, zodat hij ook
op een lichte foto leesbaar blijft zonder dat er iets over je beeld
ligt. */
.hero3-eigen::before{display:none}
.hero3-eigen .hero3-copy h1,
.hero3-eigen .hero3-copy .tag,
.hero3-eigen .feat3 li b{
text-shadow:0 2px 12px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
.hero3-eigen .feat3 li .ic{filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
/* De sticker in de banner had een schaduw van 70 pixels op 65 procent
zwart. Tegen de oude zwarte achtergrond viel die weg, maar op een
eigen banner wordt het een donkere vlek. Bij een eigen banner dus
een veel subtielere schaduw die de sticker alleen losmaakt van het
beeld eronder. */
.hero3-eigen .hero3-card{
box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.hero3-eigen .hero3-card:hover{
box-shadow:0 12px 30px rgba(0,0,0,.34);
}
/* De regio waar het verzendtarief bij hoort, altijd zichtbaar in de
winkelwagen. Iemand die een bedrag ziet wil weten waarvoor het geldt. */
.drawer .zoneline{display:flex;align-items:center;justify-content:space-between;
gap:.6rem;margin:0 0 .5rem;font-size:.78rem;color:#C3C0BC}
.drawer .zoneline b{color:#FFFFFF}
.drawer .zoneline button{background:none;border:0;padding:0;
color:#9C9A96;font-size:.72rem;text-decoration:underline;cursor:pointer}
.drawer .zoneline button:hover{color:var(--seal)}
/* De regiokiezer staat altijd open in de winkelwagen, want die bepaalt
zowel het verzendtarief als welke landen je bij het afrekenen kunt
invullen. Weggeklikt achter een knop leverde klanten op die hun eigen
adres niet konden opgeven. */
.drawer .zonepick{display:flex;align-items:center;justify-content:space-between;
gap:.6rem;margin:0 0 .6rem;font-size:.78rem;color:#C3C0BC}
.drawer .zonepick select{background:#0B0B0C;color:#FFFFFF;border:1px solid #3A3A40;
padding:.35rem .5rem;font-size:.78rem;max-width:60%}
/* ==========================================================
HAMBURGERKNOP GEGARANDEERD ZICHTBAAR OP MOBIEL
De keten klopte, maar er is te vaak iets overheen gekomen. Deze
regel staat achteraan en heeft voorrang, dus hier kan niets meer
tussen komen. De streepjes krijgen ook een vaste breedte, want
zonder breedte zijn ze onzichtbaar als de uitlijning wijzigt.
========================================================== */
@media(max-width:820px){
.burger{
display:flex !important;
width:2.75rem;
height:2.75rem;
align-items:center;
justify-content:center;
flex-direction:column;
gap:0.3125rem;
padding:0;
background:none;
border:0;
cursor:pointer;
grid-column:1;
justify-self:start;
z-index:5;
}
.burger span{
display:block !important;
width:1.375rem;
height:2px;
border-radius:1px;
background:var(--paper);
}
body.is-shop .burger span,
body.is-pdp .burger span{background:#F5F3EF}
}
/* Het kruisje om het menu te sluiten. */
.mobclose{
position:absolute;top:.8rem;right:1rem;
width:2.75rem;height:2.75rem;
background:none;border:0;
color:var(--paper);font-size:2rem;line-height:1;
cursor:pointer;padding:0;
}
.mobclose:hover{color:var(--seal)}
/* De taalkeuze staat in het menu, dus die hoeft niet ook nog in de
balk. Twee keuzelijsten voor hetzelfde is verwarrend, en de vlag in
de balk zegt al genoeg. */
@media(max-width:820px){
.navrow .langbox{display:none}
}
/* Het kruisje links, op precies de plek van de hamburgerknop. Rechts
moet je je duim verplaatsen om iets te sluiten dat je links opende. */
.mobclose{left:.7rem;right:auto;top:.35rem}
/* ==========================================================
BANNER TOT ONDERAAN HET SCHERM OP MOBIEL
De onderrand van de banner komt op de onderkant van het scherm te
staan, met een streepje wit eronder. De sticker, de tekst en de knop
zakken mee.
Let op: hier wordt ::after NIET gebruikt. Dat is de verfstreek rechts
in de banner, en die overschrijven leverde eerder een zwarte lijn en
een zwart gat op. Het witte streepje is nu een rand.
========================================================== */
@media(max-width:820px){
.hero3{
min-height:100svh;
display:flex;
flex-direction:column;
justify-content:flex-end;
border-bottom:12px solid var(--paper);
box-sizing:border-box;
}
.hero3-inner{
margin-top:auto;
padding-bottom:3.4rem;
}
}
@supports not (height:100svh){
@media(max-width:820px){.hero3{min-height:100vh}}
}
/* De banner loopt tot onderaan het scherm, min wat erboven staat. De
nieuwskrant en de menubalk worden opgemeten en van de schermhoogte
afgetrokken, want die hoogte verschilt per taal en de nieuwskrant
kan helemaal uit staan. Zonder meting steekt de banner er precies
die hoogte onderuit. */
:root{--topoff:0px}
@media(max-width:820px){
.hero3{min-height:calc(100svh - var(--topoff))}
}
@supports not (height:100svh){
@media(max-width:820px){
.hero3{min-height:calc(100vh - var(--topoff))}
}
}
/* Geen wit streepje meer onder de banner. Ik had het erbij gezet zodat
je ziet dat de pagina doorloopt, maar de sectie eronder is toch al
licht. Nu leek het een losse strook. De verfrand sluit nu direct aan
op wat eronder komt. */
@media(max-width:820px){
.hero3{border-bottom:0}
.hero3-inner{padding-bottom:3rem}
}
/* De verfrand een pixel over de onderrand laten steken. Precies op nul
ontstaat er door afronding een haarlijn waar de donkere banner
doorheen piept, en die lees je als een streep. Zo stond het in de
oorspronkelijke code, en dat heb ik met mijn wijzigingen weggehaald. */
.brushedge{bottom:-1px}
/* De tekst in de banner spierwit in plaats van crème. Crème werkt op de
oude zwarte achtergrond, maar naast de witte verfrand eronder zie je
dat het net geen wit is. */
.hero3 .hero3-copy h1,
.hero3 .hero3-copy h1 .l1,
.hero3 .hero3-copy h1 .l2,
.hero3 .tag,
.hero3 .feat3 li b,
.hero3-eigen .hero3-copy h1,
.hero3-eigen .tag,
.hero3-eigen .feat3 li b{color:#FFFFFF}
/* De pictogrammen in de banner ook. */
.hero3 .feat3 li .ic{background:#FFFFFF}
/* En de verfrand zelf zuiver wit, zonder de crèmetint eronder. */
/* De prijs in de rode verfspat ook spierwit, net als de rest van de
banner. Crème op rood oogt vuil. */
.pricebadge b{color:#FFFFFF}
.pricebadge small{color:#FFFFFF}
/* De eerste regel van de kop weer rood. Die was altijd rood en dat had
ik niet mogen meenemen toen ik het crème naar wit zette. Alleen de
tweede regel, de tagline en de punten zijn wit. */
.hero3 .hero3-copy h1 .l1,
.hero3-eigen .hero3-copy h1 .l1{color:var(--seal)}
/* De kop Populaire stickers een stukje hoger. */
/* De banner nog een stukje laten zakken op mobiel. De onderrand viel
precies op de bovenkant van de verfrand, waardoor je die snijlijn
zag. Door de banner een halve verfrand hoger te maken valt het
scherm midden door het witte deel, en zie je de rand als een rand
in plaats van als een streep. */
@media(max-width:820px){
.hero3{min-height:calc(100svh - var(--topoff) + 1.375rem)}
.hero3-inner{padding-bottom:3.6rem}
}
@supports not (height:100svh){
@media(max-width:820px){
.hero3{min-height:calc(100vh - var(--topoff) + 1.375rem)}
}
}
/* De kop niet meer omhoog trekken. Ik had er tien pixels afgehaald,
maar de verfrand hangt over de sectie heen en dan verdwijnt de kop
eronder. */
/* De crème lijn is geen kleurverschil maar een kier. De banner heeft
overflow:hidden, dus de verfrand die een pixel naar beneden stak
werd afgeknipt. In dat kiertje zie je je bannerafbeelding doorheen,
en die is licht. De sectie eronder schuift nu twee pixels omhoog en
dekt dat af. */
/* De kop Populaire stickers vijf pixels omhoog. De verfrand hangt over
de sectie heen, dus meer dan dit verdwijnt eronder. */
/* Iets meer lucht tussen de twee regels van de bannerkop op mobiel. */
@media(max-width:820px){
.hero3-copy h1{line-height:1.06}
.hero3-copy h1 .l2{margin-top:1px;display:block}
}
/* De carrousel en de tegels doorzichtig, zodat er nergens een crème
vlak achter je stickers zit. */
.tiles{background:transparent}
.tile{background:transparent}
.tile img{background:transparent}
@media(max-width:820px){
.tiles,
.tile,
.newest .tiles,
.light .tiles{background:transparent}
}
/* Het kruisje altijd licht. Het menu is op elke pagina donker, maar op
de shop- en productpagina staat de variabele voor lichte tekst juist
op donker. Daardoor werd het kruisje daar onzichtbaar. Vaste kleur
dus, net als de menulinks eronder. */
.mobclose,
body.is-shop .mobclose,
body.is-pdp .mobclose{color:#F5F3EF}
.mobclose:hover,
body.is-shop .mobclose:hover,
body.is-pdp .mobclose:hover{color:var(--seal)}
/* Om dezelfde reden de menulinks vastzetten. */
.mobmenu a,
body.is-shop .mobmenu a,
body.is-pdp .mobmenu a{color:#F5F3EF}
.mobmenu a:hover,
body.is-shop .mobmenu a:hover,
body.is-pdp .mobmenu a:hover{color:var(--seal)}
.mobmenu .moblang span,
body.is-shop .mobmenu .moblang span,
body.is-pdp .navlinks a,
body.is-pdp .mobmenu .moblang span{color:#6E6C6A}
/* De verfrand vijf pixels korter en de kop verder omhoog.
Dat kan nu, want de sectie eronder ligt sinds kort bovenop de banner
in plaats van eronder. Daardoor verdwijnt de kop niet meer achter de
verfrand, wat eerder wel gebeurde bij tien pixels. */
/* De verfrand weer op de oude hoogte, maar vijf pixels dieper zodat er
onderaan iets af valt in plaats van dat de bovenkant omhoog komt.
De banner knipt af wat buiten zijn rand valt, dus die vijf pixels
verdwijnen onderaan en de gekartelde bovenkant blijft precies waar
hij stond. */
/* ==========================================================
TERUG NAAR DE OORSPRONKELIJKE VERFRAND
Ik heb aan de hoogte en de positie van de verfrand zitten sleutelen
om die kop vijf pixels hoger te krijgen, en daarmee de hele banner
uit balans gehaald. De rand staat nu weer precies zoals hij was.
De vijf pixels haal ik nu ergens anders vandaan: de sectie eronder
schuift als geheel omhoog. Die ligt bovenop de banner, dus zijn witte
achtergrond dekt het onderste stukje verfrand af. Het resultaat is
hetzelfde, maar er verandert niets binnen de banner zelf.
========================================================== */
/* De kop staat weer gewoon in de sectie, niet omhoog getrokken. */
/* De hele sectie zeven pixels omhoog: twee om de kier af te dekken en
vijf voor de hoogte die je wilde. */
/* ==========================================================
ALLES TERUG ZOALS HET WAS
Ik heb hier te lang aan zitten trekken en het steeds erger gemaakt.
De verfrand en de sectie staan nu precies zoals voordat ik begon.
De enige regel die blijft is die van twee pixels, want die dekt de
kier af waar je bannerafbeelding doorheen piepte, en dat probleem
was echt.
========================================================== */
/* De enige aanpassing die overblijft: de sectie twee pixels omhoog om
het kiertje af te dekken waar de bannerafbeelding doorheen piepte.
Alle andere pogingen om de kop hoger te krijgen zijn verwijderd,
want die haalden de banner uit balans.
De verfrand staat weer op de waarden uit de oorspronkelijke code:
60 pixels hoog en een pixel over de onderrand. */
section.light{position:relative;z-index:2;margin-top:-2px}
/* De uitklaplijst van de taalkiezer staat in de donkere balk, maar
gebruikte variabelen die op de shop- en productpagina naar wit
omslaan omdat die pagina's licht zijn. Daardoor werd de lijst daar
wit op wit. Vaste kleuren dus, want de balk is overal donker. */
.langpick option,
body.is-shop .langpick option,
body.is-pdp .langpick option{
background:#16161A;
color:#F5F3EF;
}
body.is-shop .langpick,
body.is-pdp .langpick{color:#C3C0BC;border-color:#3A3A40}
body.is-shop .langpick:hover,
body.is-pdp .langpick:hover{color:#FFFFFF;border-color:var(--seal)}
/* Dezelfde behandeling voor de keuzelijst in het mobiele menu en die
in de winkelwagen. */
.mobmenu .moblang select option,
.drawer #ZonePick option{background:#16161A;color:#F5F3EF}
.mobmenu .moblang select{background:#0B0B0C;color:#F5F3EF;border:1px solid #3A3A40}
/* Een afgeprijsde prijs groen op de productpagina. De doorgestreepte
oude prijs blijft grijs, zodat je in een oogopslag ziet welke van de
twee de geldende is. */
body.is-pdp .price.isdeal{color:#17803A}
body.is-pdp .price.isdeal s{color:#9C9A96;font-weight:400}
/* Het blokje op de productpagina even royaal als in de winkel. Het was
te laag doordat er alleen aan de zijkanten ruimte zat. De foto is
daar veel groter, dus dezelfde maten ogen er kleiner. */
.pdp-shot > .restock{
font-size:.85rem;
letter-spacing:.14em;
padding:.62rem 1rem;
line-height:1.1;
border-radius:3px;
top:1rem;
left:1rem;
}
@media(max-width:640px){
.pdp-shot > .restock{
font-size:.72rem;
padding:.5rem .8rem;
top:.7rem;
left:.7rem;
}
}
/* Het NIEUW-stempel op de winkelkaarten en de tegels op de startpagina
terug naar de compacte maat. Alleen op de productpagina is hij groot,
want daar is de foto ook veel groter. Zonder deze regel pakte het
stempel op mobiel de grotere maat van de productpagina mee. */
.skin > .newbadge,
.tile .newbadge{
font-size:.68rem;
padding:.32rem .6rem;
letter-spacing:.14em;
line-height:1.15;
}
@media(max-width:820px){
.skin > .newbadge,
.tile .newbadge{
font-size:.6rem;
padding:.26rem .5rem;
letter-spacing:.12em;
}
}
/* De prijs vier pixels naar rechts, maar alleen op een computer. Op een
telefoon stond hij al goed, en daar is de spat kleiner zodat vier
pixels er verhoudingsgewijs veel meer zijn.
De draaiing van 8 graden moet mee in dezelfde regel, anders wordt die
overschreven en staat de prijs recht in een schuine spat. De 9 procent
schaalt mee met de spat, de pixels niet. */
@media(min-width:821px){
.pricebadge b{transform:translateX(calc(9% + 4px)) rotate(-8deg)}
}
/* Op een telefoon twee pixels naar rechts. De computer heeft er vier,
want daar is de verfspat groter en vallen dezelfde pixels minder op.
De draaiing moet in dezelfde regel mee, anders verdwijnt hij. */
@media(max-width:820px){
.pricebadge b{transform:translateX(calc(9% + 2px)) rotate(-8deg)}
}
/* De landenlijst met vlaggen wat breder, want landnamen zijn langer dan
regionamen en de vlag neemt ook ruimte. */
.drawer .zonepick select{max-width:none;flex:1 1 auto;margin-left:.6rem}
.drawer .zonepick{align-items:center}
/* De landenlijst weer een normale breedte. Ik had hem alle ruimte gegeven
die overbleef, waardoor het label ervoor over twee regels brak. De
langste landnaam is 28 tekens en die past ruim in 13rem. */
.drawer .zonepick{
display:flex;
align-items:center;
justify-content:space-between;
gap:.6rem;
flex-wrap:nowrap;
}
.drawer .zonepick > span{flex:0 0 auto;white-space:nowrap}
.drawer .zonepick select{
flex:0 1 auto;
width:auto;
max-width:13rem;
margin-left:0;
text-overflow:ellipsis;
}
@media(max-width:480px){
.drawer .zonepick select{max-width:10.5rem;font-size:.74rem}
}
/* De koppen in de voettekst gebruikten de variabele voor lichte tekst,
en die staat op de shop- en productpagina juist op donker omdat die
pagina's wit zijn. De voettekst is overal donker, dus daar werd het
donker op donker en zag je de koppen niet.
Zelfde oorzaak als eerder bij het kruisje in het menu en de
taalkiezer. Vaste kleuren dus. */
.foot h4,
body.is-shop .foot h4,
body.is-pdp .foot h4{color:#F5F3EF}
.foot a,
body.is-shop .foot a,
body.is-pdp .foot a{color:#C3C0BC}
.foot a:hover,
body.is-shop .foot a:hover,
body.is-pdp .foot a:hover{color:var(--seal)}
.foot,
body.is-shop .foot,
body.is-pdp .foot{color:#C3C0BC}
.foot .socials a,
body.is-shop .foot .socials a,
body.is-pdp .foot .socials a{color:#F5F3EF}
/* De pictogrammen in de laatste kolom. Ze staan links in hun eigen kolom,
net als de koppen van de drie kolommen ernaast. Ik had ze eerst tegen
de rechterrand geduwd, maar dan lijnt niets meer uit met de rest. De
kolom zelf staat rechts, dat is genoeg. */
.foot > div:last-child .socials{
display:flex;
gap:.7rem;
margin-top:0;
justify-content:flex-start;
}
.foot > div:last-child{text-align:left}
/* De voettekst uitlijnen met de inhoud erboven.
De balk zelf loopt door tot de schermrand, want die draagt de donkere
achtergrond. De kolommen erbinnen zitten in een eigen vak van 82rem,
even breed als je stickers en de trustrij, en dat vak wordt
gecentreerd.
Eerder probeerde ik dit met een berekening in de binnenmarges. Dat
werkte niet betrouwbaar. Een echt vak eromheen is voorspelbaar. */
.foot{
max-width:none;
padding-left:0;
padding-right:0;
display:block;
}
.footwrap{
/* Exact dezelfde opbouw als .light .wrap, de sectie met je stickers:
dezelfde breedtevariabele en dezelfde binnenmarge.
Die binnenmarge was het laatste verschil. Een sectie is 64rem breed
inclusief marge, dus de tekst begint een marge naar binnen. Mijn
voettekst had die marge niet en begon dus tot 56 pixels verder naar
links. */
max-width:var(--maxw);
margin-left:auto;
margin-right:auto;
width:100%;
box-sizing:border-box;
padding-left:var(--pad);
padding-right:var(--pad);
display:grid;
gap:2rem;
grid-template-columns:1fr;
}
@media(min-width:640px){
.footwrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
}
@media(min-width:1000px){
/* Vier gelijke kolommen, net als de rij met gratis verzending onder je
stickers. Ik had de eerste op 1,4 gezet omdat daar wat meer tekst in
staat, maar dan drukt hij de andere drie tegen elkaar aan en lijnt
niets meer uit met de rij erboven. */
.footwrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 2rem}
}
.legal{
max-width:none;
padding-left:0;
padding-right:0;
}
.legalwrap{
max-width:var(--maxw);
margin-left:auto;
margin-right:auto;
width:100%;
box-sizing:border-box;
padding-left:var(--pad);
padding-right:var(--pad);
}
/* De kolommen in de voettekst uitlijnen met de TEKST van de rij erboven,
niet met het pictogram ervoor. Dat pictogram is 26 pixels breed met
0,85rem ruimte erachter, dus die afstand schuiven we op.
Zonder deze verschuiving staat Gotcha onder het vrachtwagentje in
plaats van onder de woorden Gratis verzending, en dat leest rommelig. */
@media(min-width:1000px){
.footwrap > div{padding-left:calc(1.625rem + .85rem)}
}
/* ==========================================================
DE BALK ONDERAAN
Wit op elke pagina, met donkere tekst. Hij was zwart op de
startpagina en wit in de winkel, dus je zag twee verschillende
afsluitingen van dezelfde site.
En hij was te hoog: 1,2rem boven en onder voor een regel van zes
woorden is te veel lucht onder een pagina die al af is.
========================================================== */
.legal,
body.is-shop .legal,
body.is-pdp .legal{
background:#FFFFFF;
color:#5F5D5A;
border-top:1px solid #E8E6E2;
padding-top:.6rem;
padding-bottom:.6rem;
}
.legal a,
body.is-shop .legal a,
body.is-pdp .legal a{color:#5F5D5A}
.legal a:hover{color:var(--seal)}
/* Pictogrammen bij de koppen in de voettekst. Zelfde opzet als die van
de uspsrij: een lijntekening op 24 bij 24, gebruikt als masker zodat
hij automatisch de kleur van de tekst aanneemt. */
.ic-torii{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-bag{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-mail{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-share{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* De kop met het pictogram ernaast. Precies dezelfde maat en tussenruimte
als de uspsrij erboven, zodat de tekst op dezelfde lijn valt. */
.foot h4{
display:flex;
align-items:center;
gap:.85rem;
}
.foot h4 .ic{
width:1.625rem;
height:1.625rem;
flex:0 0 auto;
background:#F5F3EF;
display:block;
}
body.is-shop .foot h4 .ic,
body.is-pdp .foot h4 .ic{background:#F5F3EF}
/* De kolommen hoeven nu niet meer opgeschoven te worden, want het
pictogram doet dat werk. Die verschuiving zat er alleen omdat er
geen pictogram stond. */
@media(min-width:1000px){
.footwrap > div{padding-left:0}
}
/* Het vliegtuigje en het raketje. De namen ic-truck en ic-clock houden we
aan, want die staan op meerdere plekken in de opmaak en in de
voettekst. Alleen de tekening erin is veranderd:
ic-truck was een vrachtwagen, is nu een papieren vliegtuigje
ic-clock was een klok, is nu een raket
Zo hoeft er verder niets aangepast te worden. */
/* De inhoud van een kolom uitlijnen met de KOP, niet met het pictogram.
De kop is een rij van pictogram plus tekst. De lijst eronder stond
daar los van en begon dus helemaal links, onder het pictogram. In de
rij erboven staat de tekst netjes onder de titel, en zo hoort het hier
ook.
We schuiven de lijst dezelfde afstand op als het pictogram breed is,
plus de ruimte erachter. */
@media(min-width:640px){
.footwrap > div > ul,
.footwrap > div > p,
.footwrap > div > .socials{
padding-left:calc(1.625rem + .85rem);
}
}
/* De regel met het jaartal gecentreerd en lager.
De balk had wel een instelling om te centreren, maar sinds ik er een
vak in heb gezet is dat vak het enige kind. Dat vak werd gecentreerd,
maar de tekst daarbinnen bleef links staan. Het centreren moet dus een
niveau lager.
En de hoogte kan omlaag: dit is een afsluitende regel, geen sectie. */
.legalwrap{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:.5rem;
text-align:center;
}
.legal,
body.is-shop .legal,
body.is-pdp .legal{
padding-top:.45rem;
padding-bottom:.45rem;
font-size:.64rem;
line-height:1.5;
}
/* Een paar maten stonden in vaste pixels en zouden dus niet meegroeien.
Die zetten we om naar rem zodat ze in de pas blijven lopen met de
rest. */
.foot h4 .ic{width:1.63rem;height:1.63rem}
.usps li .ic{width:1.63rem;height:1.63rem}
@media(min-width:640px){
.footwrap > div > ul,
.footwrap > div > p,
.footwrap > div > .socials{padding-left:calc(1.63rem + .85rem)}
}
/* De hele voettekst dezelfde kleuren op elke pagina. Op je shop- en
productpagina slaan de kleurvariabelen om naar donker, omdat die
pagina's wit zijn. De voettekst is overal donker, dus daar werd de
tekst donkergrijs op donker.
Ik had de koppen en de links al vastgezet, maar niet de lijstregels,
de alinea en de nieuwe pictogrammen bij de koppen. Nu alles in een
keer, zodat er niets meer kan omslaan. */
.foot,
.foot p,
.foot li,
.foot ul,
.foot span,
body.is-shop .foot,
body.is-shop .foot p,
body.is-shop .foot li,
body.is-shop .foot ul,
body.is-shop .foot span,
body.is-pdp .foot,
body.is-pdp .foot p,
body.is-pdp .foot li,
body.is-pdp .foot ul,
body.is-pdp .foot span{color:#C3C0BC}
.foot h4,
body.is-shop .foot h4,
body.is-pdp .foot h4{color:#F5F3EF}
.foot a,
body.is-shop .foot a,
body.is-pdp .foot a{color:#C3C0BC}
.foot a:hover,
body.is-shop .foot a:hover,
body.is-pdp .foot a:hover{color:var(--seal)}
/* De pictogrammen bij de koppen zijn maskers, dus hun kleur komt uit de
achtergrond. Die moet dus ook vastgezet worden. */
.foot h4 .ic,
body.is-shop .foot h4 .ic,
body.is-pdp .foot h4 .ic{background:#F5F3EF}
/* De pictogrammen van Instagram en TikTok. */
.foot .socials a,
body.is-shop .foot .socials a,
body.is-pdp .foot .socials a{color:#F5F3EF;border-color:#3A3A40}
.foot .socials a svg,
body.is-shop .foot .socials a svg,
body.is-pdp .foot .socials a svg{color:inherit;fill:none;stroke:currentColor}
/* ==========================================================
DE BASISMAAT, IN EEN ENKELE REGEL ZONDER OMSLAGPUNT
Een ondergrens van 16 pixels en daarboven evenredig meeschalen met
het venster. De browser kiest zelf welke van de twee geldt.
Dat er geen omslagpunt meer in zit is de kern. Eerder stond de
overgang op een venster van 1000 pixels, en daar viel de maat in een
keer van 16 naar 11,7. Precies op die grens zag je de sticker
verspringen: op 90 en op 110 procent klopte het, maar op 100 procent
zat je net in het verkeerde deel.
Nu ligt de overgang vanzelf op 1368 pixels, want daar komen beide
waarden op 16 uit. Daar sluit het naadloos aan.
De ondergrens beschermt telefoons, waar evenredig meeschalen letters
van 4 pixels zou opleveren. De bovengrens van 50 voorkomt dat het op
een enorm scherm belachelijk groot wordt.
========================================================== */
/* Op een telefoon of tablet een vaste maat. Evenredig meeschalen zou daar
letters van vier pixels opleveren. */
html{font-size:16px}
/* Vanaf een computerscherm zuiver evenredig, zonder ondergrens.
Die ondergrens van 16 pixels was het probleem. Op een scherm smaller
dan 1368 won hij op 100 en 110 procent, en zodra je uitzoomde werd het
venster breed genoeg en schakelde hij om. Vandaar dat je bij 90
procent alles kleiner zag worden en bij 110 groter.
Nu ligt hij op elke zoomstand op dezelfde lijn. De omslag zit op 820
pixels, precies waar je site toch al van mobiel naar computer gaat,
dus daar valt hij niet op.
Het gevolg is dat de site in een smal venster kleiner oogt dan
voorheen. Dat is de prijs van overal exact dezelfde verhouding, en
dat is wat je wilde. */
@media(min-width:821px){
/* Het getal 1,25 bepaalt hoe groot alles oogt. Bij deze waarde komt een
scherm van 1280 uit op precies 16 pixels, de maat waarmee we begonnen.
Dit getal staat los van het meeschalen. Uitzoomen verandert niets,
ongeacht welke waarde hier staat. Hoger is overal groter, lager is
overal kleiner. Meer zit er niet achter. */
/* Zuiver evenredig, zonder bovengrens.
Er stond een grens van 52 pixels. Die werd al geraakt bij een venster
van 4160, en dat gebeurt op een normaal scherm al rond 30 procent
uitzoomen. Vanaf dat punt groeide er niets meer mee en kromp alles
alsnog.
Een grens is hier ook nergens voor nodig. De site vult altijd
dezelfde verhouding van het beeld, dus hij kan niet uit de hand
lopen. Op een scherm van 5000 pixels wordt alles gewoon evenredig
groter, en dat is precies de bedoeling. */
html{font-size:1.25vw}
}
/* Twee pixels van de nieuwskrant naar de menubalk verplaatsen.
De nieuwskrant wordt een pixel lager aan de boven- en onderkant, dus
twee in totaal. Die twee komen bovenop de menubalk terecht. De totale
hoogte van beide samen blijft daardoor precies gelijk, en het logo
staat dus nog exact waar het stond.
De maten staan in rem zodat ze meeschalen met de rest, en op een
scherm van 1366 komt dat neer op precies die twee pixels. */
.ticker{padding-top:.2575rem;padding-bottom:.2575rem}
.nav{padding-top:.325rem}
/* De plus- en minknop en de pictogrammen bij de specificaties netjes
laten meeschalen.
De knop gebruikte een maat die met de vensterbreedte rekende in plaats
van met de basismaat. Op een computer groeit dat anders, waardoor de
pijltjes kleiner werden zodra je aan het zoomniveau draaide.
De randen en scheidingslijntjes stonden op een vaste pixel. Dat is voor
een enkele lijn prima, maar in een pictogram van 22 pixels valt een
lijn die niet meegroeit meteen op. Vandaar die streepjes die je zag
verschuiven. */
.qty button{
min-width:3rem;
min-height:3rem;
padding:.7rem 1rem;
font-size:1.05rem;
line-height:1;
}
.qty input{width:3rem;padding:.7rem 0}
.specs li{border-bottom-width:.0625rem}
.specs{border-width:.0625rem}
.sp-ic{flex:0 0 auto}
/* De standaard pijltjes van het aantalveld verbergen.
Een invoerveld van het type getal krijgt van de browser zelf twee
kleine pijltjes. Die tekent de browser, niet wij, dus ze schalen niet
mee met de rest en worden kleiner zodra je aan het zoomniveau draait.
Ze zijn ook overbodig: er staan al een plus- en een minknop naast, die
veel groter en makkelijker te raken zijn. Op een telefoon zijn die
pijltjes sowieso onbruikbaar. */
.qty input[type=number]{
-moz-appearance:textfield;
appearance:textfield;
}
.qty input[type=number]::-webkit-outer-spin-button,
.qty input[type=number]::-webkit-inner-spin-button{
-webkit-appearance:none;
appearance:none;
margin:0;
}
/* ==========================================================
EIGENSCHAPPEN OP DE PRODUCTPAGINA
Een blok met zes punten in plaats van twee losse lijstjes. De eerste
drie gaan over deze sticker en staan op een lichte achtergrond, de
laatste drie gelden voor alles wat je verkoopt.
========================================================== */
.speclist{
border:1px solid #E4E2DE;
border-radius:.375rem;
overflow:hidden;
margin:1.4rem 0 1.1rem;
background:#FFFFFF;
}
.speclist-kop{
display:flex;
align-items:center;
justify-content:space-between;
gap:.6rem;
padding:.7rem .95rem;
background:#16161A;
color:#F5F3EF;
}
.speclist-kop b{
font-family:'Anton',sans-serif;
font-weight:400;
font-size:.74rem;
letter-spacing:.14em;
text-transform:uppercase;
}
.speclist-kop span{font-size:.66rem;color:#A9A6A2;letter-spacing:.04em}
.speclist ul{list-style:none;margin:0;padding:0}
.speclist li{
display:grid;
grid-template-columns:2.1rem 1fr;
gap:.55rem;
align-items:start;
padding:.7rem .95rem;
border-bottom:.0625rem solid #EFEDEA;
}
.speclist li:last-child{border-bottom:0}
.speclist li.eigen{background:#FAF9F7}
.speclist .sl-ic{
width:2.1rem;
height:2.1rem;
border-radius:50%;
background:#FAF9F7;
border:.0625rem solid #E4E2DE;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.speclist li.eigen .sl-ic{background:#FFFFFF}
.speclist .sl-ic .ic{width:1.1rem;height:1.1rem;background:#16161A}
.speclist .sl-txt b{display:block;font-size:.8rem;margin-bottom:.1rem;color:#16161A}
.speclist .sl-txt i{display:block;font-style:normal;font-size:.78rem;color:#6E6C6A;line-height:1.45}
.speclist .fitlink{color:var(--seal);border-bottom:.0625rem solid var(--seal);white-space:nowrap}
/* De pictogrammen. Lijntekeningen als masker, zodat ze de kleur van de
tekst volgen en scherp blijven op elk scherm. */
.ic-holo{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-chip{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-maat{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-lijm{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-nfc{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-euplane{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* De rij met betaallogo's onder de knop. Elk logo in een eigen vakje op
wit, want de meeste merken schrijven een lichte achtergrond voor en
een gekleurd logo op een gekleurd vlak leest slecht.
De hoogte staat vast en de breedte volgt, zodat een breed logo als
PayPal en een vierkant logo als Mastercard naast elkaar even zwaar
ogen zonder dat er iets vervormt. */
.paylogos{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:.4rem;
margin:.9rem 0 1rem;
padding:0;
}
.paylogos li{
display:flex;
align-items:center;
justify-content:center;
height:1.85rem;
padding:0 .45rem;
background:#FFFFFF;
border:.0625rem solid #E4E2DE;
border-radius:.25rem;
}
.paylogos img{
height:1.05rem;
width:auto;
max-width:3.4rem;
object-fit:contain;
display:block;
}
@media(max-width:480px){
.paylogos{gap:.35rem}
.paylogos li{height:1.65rem;padding:0 .35rem}
.paylogos img{height:.92rem}
}
/* Een gecombineerd logo, zoals iDEAL en Wero samen, is veel breder dan
de rest. Dat krijgt meer ruimte zodat het niet in elkaar gedrukt wordt. */
.paylogos li.breed img{max-width:6.2rem}
/* ==========================================================
CONTACTPAGINA
========================================================== */
.contactwrap{max-width:34rem}
.ctitel{font-family:'Anton',sans-serif;font-size:2rem;letter-spacing:.03em;
text-transform:uppercase;margin:0 0 .5rem;color:#16161A}
.cintro{color:#5F5D5A;line-height:1.65;margin:0 0 1.8rem;font-size:.92rem}
.cform{display:block}
.cveld{margin-bottom:1rem}
.cveld label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:#5F5D5A;margin-bottom:.35rem;font-weight:700}
.cveld .copt{font-weight:400;letter-spacing:.04em;text-transform:none;color:#9C9A96}
.cveld input,
.cveld textarea{
width:100%;
padding:.7rem .8rem;
background:#FFFFFF;
color:#16161A;
border:.0625rem solid #DCDAD6;
border-radius:.25rem;
font:inherit;
font-size:.92rem;
box-sizing:border-box;
}
.cveld textarea{resize:vertical;min-height:8rem;line-height:1.6}
.cveld input:focus,
.cveld textarea:focus{border-color:var(--seal);outline:none}
.csom input{max-width:7rem}
.cnote{font-size:.74rem;color:#8A8785;margin:.4rem 0 0;line-height:1.5}
.cprivacy{margin-top:.9rem;text-align:center}
.cfout{
background:#FDECEC;
border:.0625rem solid #F3C9C9;
color:#B3161F;
padding:.7rem .85rem;
border-radius:.25rem;
font-size:.85rem;
margin:0 0 1.2rem;
}
/* Het lokaasveld. Niet display:none, want slimmere bots slaan verborgen
velden over. Zo staat hij er wel, maar ziet niemand hem. */
.clokaas{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
/* De bedankpagina na het versturen. */
.cbedankt{text-align:center;padding:2rem 0 1rem}
.cbedankt-ic{
display:block;
width:3.4rem;
height:3.4rem;
margin:0 auto 1.2rem;
border-radius:50%;
background:#E9F5EC;
border:.0625rem solid #C6E4CF;
position:relative;
}
.cbedankt-ic::after{
content:'';
position:absolute;
left:50%;
top:47%;
width:1.1rem;
height:.55rem;
transform:translate(-50%,-50%) rotate(-45deg);
border-left:.19rem solid #17803A;
border-bottom:.19rem solid #17803A;
}
.cbedankt h1{font-family:'Anton',sans-serif;font-size:1.7rem;letter-spacing:.03em;
text-transform:uppercase;margin:0 0 .6rem;color:#16161A}
.cbedankt p{color:#5F5D5A;line-height:1.65;margin:0 0 1.6rem}
.cbedankt .btn{display:inline-block;width:auto;padding:.7rem 1.6rem}
/* Het telefoonveld met een landnummer ervoor. De keuzelijst is smal en
het nummer krijgt de rest, zodat het samen als een veld oogt. */
.ctel{display:flex;gap:.4rem}
.ctel select{
flex:0 0 7.2rem;
padding:.7rem .5rem;
background:#FFFFFF;
color:#16161A;
border:.0625rem solid #DCDAD6;
border-radius:.25rem;
font:inherit;
font-size:.92rem;
box-sizing:border-box;
}
.ctel input{flex:1 1 auto;min-width:0}
.ctel select:focus{border-color:var(--seal);outline:none}
@media(max-width:420px){
.ctel select{flex:0 0 6.2rem;font-size:.85rem}
}
/* De keuzelijst voor het onderwerp, zelfde vorm als de invoervelden. */
.cveld select{
width:100%;
padding:.7rem .8rem;
background:#FFFFFF;
color:#16161A;
border:.0625rem solid #DCDAD6;
border-radius:.25rem;
font:inherit;
font-size:.92rem;
box-sizing:border-box;
}
.cveld select:focus{border-color:var(--seal);outline:none}
/* ==========================================================
EXTRA FOTO'S, DRIE AANPASSINGEN
========================================================== */
/* 1. Op een computer staan de kleine plaatjes onder de foto in plaats
van erop. Daar is ruimte genoeg en dan zie je ze beter. Op een
telefoon blijven ze op de foto liggen, want daar zou een losse rij
de naam en de prijs naar beneden duwen. */
/* 2. De hele foto in beeld, ook als hij een andere verhouding heeft dan
een kaart. Stond op cover, en dan wordt er boven en onder afgesneden
bij een foto die minder hoog is. Met contain past hij op hoogte en
blijft alles zichtbaar. */
.pdp-media img{object-fit:contain}
/* 3. Alleen de sticker krijgt de afwerking. Bij een extra foto zijn de
glans, de ronde hoeken en de stempels juist storend: dat is gewoon
een rechthoekige foto van je product in gebruik. */
.pdp-shot.los{border-radius:0;background:#F2F1EE}
.pdp-shot.los::after,
.pdp-shot.los::before{display:none !important}
.pdp-shot.los .newbadge,
.pdp-shot.los .seal,
.pdp-shot.los .restock,
.pdp-shot.los .cardchip{display:none !important}
.pdp-shot.los img{border-radius:0}
/* De miniaturen staan nu buiten het kader van de sticker, want dat kader
heeft ronde hoeken en knipt af wat erbuiten valt.
Op een computer staan ze gewoon eronder. Op een telefoon leggen we ze
met een negatieve marge over de onderkant van de foto, zodat ze geen
extra hoogte innemen en de prijs niet wegduwen. */
/* Op een telefoon over de onderkant van de foto, met een negatieve marge.
Zo nemen ze geen extra hoogte in en blijft de prijs meteen zichtbaar. */
/* Het vak om de productfoto knipt af wat erbuiten valt en heeft ronde
hoeken. De miniaturen staan daarbinnen en werden dus alsnog
meegesneden, ook nadat ik ze uit het kader van de sticker had gehaald.
Dat afknippen is er voor de foto zelf, zodat die netjes in de ronde
hoeken valt. Dus verplaatsen we het naar de foto in plaats van naar
het vak eromheen. */
body.is-pdp .pdp-media{
border-radius:0;
overflow:visible;
border:0;
background:transparent;
}
body.is-pdp .pdp-shot{
border-radius:.75rem;
overflow:hidden;
display:block;
}
body.is-pdp .pdp-shot.los{border-radius:0}
/* ==========================================================
EXTRA FOTO'S OP DE PRODUCTPAGINA
Alles op een plek. Dit stond eerder verspreid over zes blokken en dan
wint steeds de verkeerde, met eindeloos heen en weer als gevolg.
Overal dezelfde opzet: de miniaturen onder de foto, gecentreerd.
Alleen de maat verschilt per scherm.
========================================================== */
.pdp-thumbs{
display:flex;
gap:.4rem;
padding:.7rem 0 0;
justify-content:center;
}
.pdp-thumb{
width:3.4rem;
height:3.4rem;
padding:0;
border:.0625rem solid #DCDAD6;
border-radius:.25rem;
overflow:hidden;
background:#FFFFFF;
cursor:pointer;
transition:border-color .18s, transform .18s;
flex:0 0 auto;
}
/* De foto vult het vakje. Zonder deze regel pakt hij de algemene
afronding voor afbeeldingen op de productpagina, en dan zie je een
ronde foto in een rond vakje. */
.pdp-thumb img,
body.is-pdp .pdp-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:0;
}
.pdp-thumb:hover{transform:translateY(-.1rem)}
.pdp-thumb.on{border-color:var(--seal);border-width:.125rem}
@media(max-width:820px){
.pdp-thumb{width:3rem;height:3rem}
}
@media(max-width:480px){
.pdp-thumbs{gap:.35rem;padding:.6rem 0 0}
.pdp-thumb{width:2.7rem;height:2.7rem}
}
/* ==========================================================
HET VERHAAL BIJ DE KAART
Bewust geen kader zoals bij de eigenschappen. Dat blok is een
opsomming van feiten en mag strak zijn. Dit is een verhaal, en dan
werkt een vak juist tegen: alles wordt even netjes en niets valt meer
op.
In plaats daarvan een grote rode aanhalingsteken die half buiten de
tekst hangt, en een dunne streep aan de zijkant. Genoeg om het eruit
te laten springen, niet zoveel dat het de pagina overneemt.
========================================================== */
.verhaal{
position:relative;
margin:1.8rem 0 .5rem;
padding-left:1.4rem;
border-left:.1875rem solid var(--seal);
}
.verhaal-tekst{
position:relative;
color:#3C3C42;
font-size:.95rem;
line-height:1.75;
}
.verhaal-tekst p{margin:0 0 .9rem}
.verhaal-tekst p:last-child{margin-bottom:0}
/* De eerste regel iets zwaarder, zoals in een tijdschrift. Dat trekt het
oog naar het begin zonder dat er een kop boven hoeft. */
.verhaal-tekst > p:first-child{
font-size:1.05rem;
line-height:1.6;
color:#16161A;
}
/* De laatste regel is bijna altijd de clou. Die mag opvallen. */
.verhaal-tekst > p:last-child:not(:first-child){
font-family:'Anton',sans-serif;
font-size:1.05rem;
letter-spacing:.02em;
color:#16161A;
line-height:1.4;
}
@media(max-width:820px){
.verhaal{margin:1.4rem 0 .5rem;padding-left:1.1rem}
.verhaal-tekst{font-size:.92rem}
.verhaal-tekst > p:first-child{font-size:1rem}
}
/* De plek waar het verhaal op een computer terechtkomt. Op een telefoon
is dit vakje leeg en neemt het geen ruimte in. */
#VerhaalPlek:empty{display:none}
#VerhaalPlek .verhaal{margin-top:1.4rem}
/* ==========================================================
LICHTE GRIJZEN DONKERDER
Op je witte pagina's stonden een paar grijstinten zo licht dat ze
nauwelijks te lezen zijn. Contrast van 2,8 tot 4,4, terwijl 4,5 de
ondergrens is en 7 pas comfortabel leest.
Dit gaat om kruimelpaden, verzendregels, doorgestreepte prijzen en de
links in je menubalk.
========================================================== */
body.is-pdp .navlinks a,
body.is-pdp .mobmenu .moblang span{color:#6E6C6A}
body.is-pdp .price.isdeal s{color:#6E6C6A;font-weight:400}
body.is-shop .pnum,
body.is-shop .cardmeta{color:#5F5D5A}
body.is-pdp .crumbs,
body.is-pdp .crumbs span{color:#5F5D5A}
body.is-pdp .shipnote em,
body.is-pdp .shipnote i{color:#5F5D5A;font-style:normal}
.drawer .shipnote{color:#5F5D5A}
/* De kleine hulpteksten onder velden en knoppen. */
body.is-pdp .note,
body.is-shop .note{color:#5F5D5A}
/* De antwoorden in de FAQ donkerder.
De tekst staat in een body, niet in een alinea, dus mijn vorige regel
pakte hem niet. Die body stond op de lichte kleur van je donkere
pagina's, en op wit is dat een contrast van 1,8. Vrijwel onleesbaar. */
body.is-pdp .faq .body,
body.is-shop .faq .body{color:#3C3C42}
/* De knop naar de uitlegpagina in een antwoord. */
.faq .body .btn.ghost.klein{
display:inline-block;
padding:.45rem 1rem;
font-size:.78rem;
}
/* ==========================================================
DE OUDE PRIJS SCHUIN DOORGESTREEPT
De standaardstreep loopt horizontaal en volgt de tekstkleur. Wij willen
een schuine streep van linksonder naar rechtsboven, in zwart, want die
valt beter op en oogt als een echte doorhaling.
Daarom zetten we de standaardstreep uit en tekenen we er zelf een: een
dunne balk over de tekst heen, gedraaid.
========================================================== */
.price s{
position:relative;
text-decoration:none;
display:inline-block;
}
.price s::after{
content:'';
position:absolute;
left:-.08em;
right:-.08em;
top:50%;
height:.09em;
background:#16161A;
/* Van linksonder naar rechtsboven. De hoek is bewust flauw: steiler
dan dit en de streep loopt buiten de cijfers. */
transform:translateY(-50%) rotate(-12deg);
transform-origin:center center;
pointer-events:none;
border-radius:.05em;
}
/* Op een kleine kaart in de winkel mag het lint mee verkleinen, anders
neemt het de halve sticker in beslag. */
/* ==========================================================
SALE-LINT IN DE RECHTERONDERHOEK
Een schuine groene band over de hoek van de kaart.
Alles in procenten van het vak, niet in vaste maten. Dat is de kern:
met vaste maten klopte het op de ene pagina wel en op de andere niet,
want het vak is per pagina anders groot. Nu schaalt de band altijd
mee en valt de tekst overal in het midden.
De band hangt op 68 procent van boven. Dat duwt hem naar de hoek toe,
zodat er weinig lint over de sticker loopt.
========================================================== */
.salelint{
position:absolute;
right:0;
bottom:0;
width:6.4rem;
height:6.4rem;
overflow:hidden;
z-index:7;
pointer-events:none;
}
.salelint i{
position:absolute;
/* Het midden van de band moet even ver van de rechterrand liggen als van
de onderrand. Alleen dan valt het op de hoeklijn en staat de tekst in
het midden van het zichtbare stuk.
Het stond op 50 procent van links en 22 van onder, en dat scheelde te
veel. Nu allebei 22 procent, dus het midden ligt op 78 procent van
links en van boven.
De band blijft 240 procent breed, ruim genoeg zodat de uiteinden
buiten het vak vallen en je ze niet ziet liggen. */
left:-42%;
right:-98%;
top:78%;
transform:translateY(-50%) rotate(-45deg);
transform-origin:center center;
display:block;
text-align:center;
background:#17803A;
color:#FFFFFF;
font-family:'Anton',sans-serif;
font-style:normal;
letter-spacing:.14em;
text-transform:uppercase;
box-shadow:0 .15rem .5rem rgba(0,0,0,.28);
padding:.24rem 0;
font-size:.72rem;
}
/* In je winkel en op je startpagina staan de kaarten klein. */
body.is-shop .salelint,
.tiles .salelint{width:5.4rem;height:5.4rem}
body.is-shop .salelint i,
.tiles .salelint i{
padding:.15rem 0;
font-size:.62rem;
letter-spacing:.1em;
}
/* Op je productpagina is de sticker veel groter, dus daar mag het lint
forser. Alleen het vak en de dikte veranderen, de rest komt uit de
regels hierboven en blijft dus vanzelf goed staan. */
body.is-pdp .pdp-shot .salelint{width:8.4rem;height:8.4rem}
body.is-pdp .pdp-shot .salelint i{
padding:.68rem 0;
font-size:1rem;
letter-spacing:.16em;
}
@media(max-width:820px){
.salelint{width:5rem;height:5rem}
.salelint i{padding:.13rem 0;font-size:.58rem}
body.is-pdp .pdp-shot .salelint{width:6.6rem;height:6.6rem}
/* Op een telefoon is de sticker op de productpagina bijna even groot
als op een computer, dus mag het lint daar ook forser. Het stond op
.36 terwijl het op een computer .68 is, en dat was te dun. */
body.is-pdp .pdp-shot .salelint i{padding:.58rem 0;font-size:.88rem}
}
/* Het NIEUW-stempel op de productpagina iets hoger en breder. Daar is de
sticker groot, dus mag het stempel dat ook zijn. In je winkel en op je
startpagina blijft het zoals het was. */
body.is-pdp .pdp-shot .newbadge{
padding:.72rem 1.5rem;
font-size:1.05rem;
letter-spacing:.18em;
}
@media(max-width:820px){
body.is-pdp .pdp-shot .newbadge{
padding:.6rem 1.25rem;
font-size:.95rem;
}
}
/* ==========================================================
DE MENUBALK: OVERAL DEZELFDE RUSTKLEUR
De balk is op elke pagina donker, maar de kleuren erin waren per pagina
anders ingesteld:
menulinks startpagina 5,5 winkel 7,0 productpagina 3,8
taalkiezer startpagina 5,5 elders 10,9
winkelwagen startpagina 5,5 elders 1,7
Vandaar dat je taalkiezer op de startpagina donkerder oogde en je
winkelwagen daarbuiten bijna onzichtbaar was.
Hier staat ALLEEN de rustkleur. Hoveren, het geselecteerde item en het
bolletje met het aantal blijven precies zoals ze waren, want die zijn
bewust anders en die heb ik eerder per ongeluk overschreven.
========================================================== */
.nav .navlinks a:not(:hover):not(.on),
body.is-shop .nav .navlinks a:not(:hover):not(.on),
body.is-pdp .nav .navlinks a:not(:hover):not(.on){color:#C3C0BC}
/* De taalkiezer. De zichtbare tekst staat in langnow, niet in de
keuzelijst zelf, dus die moet ook mee. Alleen de kiezer kleuren had
geen zichtbaar effect op de startpagina. */
.nav .langpick:not(:hover),
body.is-shop .nav .langpick:not(:hover),
body.is-pdp .nav .langpick:not(:hover){color:#C3C0BC}
.nav .langbox:not(:hover) .langnow,
body.is-shop .nav .langbox:not(:hover) .langnow,
body.is-pdp .nav .langbox:not(:hover) .langnow{color:#C3C0BC}
.nav .cartbtn:not(:hover),
body.is-shop .nav .cartbtn:not(:hover),
body.is-pdp .nav .cartbtn:not(:hover){color:#C3C0BC}
/* ==========================================================
WELKE CHIP HEEFT MIJN BETAALKAART
========================================================== */
.chipblok{
display:flex;
gap:1.2rem;
align-items:flex-start;
padding:1.1rem 0;
border-top:1px solid var(--line);
}
.chipblok:first-of-type{border-top:0}
.chipfoto{
width:11rem;
height:auto;
flex:0 0 auto;
border-radius:.375rem;
border:1px solid var(--line);
display:block;
}
.chiptxt{flex:1;min-width:0}
.chiptxt h4{margin:0 0 .4rem;font-size:1rem;color:#16161A}
.chiptxt p{margin:0 0 .5rem;color:#3C3C42;line-height:1.7;max-width:40rem}
.chipmaat{font-size:.85rem;color:#5F5D5A}
.chipmaat b{color:#16161A;font-weight:700}
.chiptab{width:100%;border-collapse:collapse;font-size:.88rem;margin:.6rem 0 1.6rem;max-width:34rem}
.chiptab th{
text-align:left;
padding:.5rem .6rem;
font-size:.68rem;
letter-spacing:.1em;
text-transform:uppercase;
color:#16161A;
border-bottom:1px solid var(--line);
font-weight:700;
}
.chiptab td{padding:.55rem .6rem;border-bottom:1px solid #EFEDEA;color:#3C3C42}
/* Op een telefoon de foto boven de tekst, anders wordt het te smal. */
@media(max-width:640px){
.chipblok{flex-direction:column;gap:.7rem}
.chipfoto{width:100%;max-width:16rem}
}
/* Een h1 die eruitziet als de sectiekop. Google wil per pagina precies
een h1 met het onderwerp erin, maar de opmaak hoeft niet te veranderen.
Deze klasse geeft een h1 dezelfde maat als de h2 die er stond. */
.sechead h1.alsh2,
h1.alsh2{font-size:clamp(2rem,7vw,3.4rem)}
body.is-shop .sechead h1.alsh2,
body.is-pdp .sechead h1.alsh2{color:#16161A}
/* De productnaam op een kaart is nu een kop met een link, voor Google.
Hij moet er precies zo uitzien als de tekstregel die er stond. */
/* De productnaam is een kop geworden voor Google, maar hij moet er
precies zo uitzien als de tekstregel die er stond.
LET OP: hier stond line-height:inherit, en dat brak de regeling
hierboven die de naam twee regels hoog maakt. Die rekent met
line-height 1.25, en inherit maakte er iets anders van. Daardoor
stonden de knoppen weer ongelijk.
De regelhoogte staat nu vast op dezelfde waarde. */
h3.pname{margin:0;font-size:inherit;font-weight:inherit;line-height:1.25}
h3.pname a{color:inherit;text-decoration:none;display:block}
/* Gratis verzending in de winkelwagen. Groen, want dat is goed nieuws en
het valt zo op tussen de bedragen eromheen. */
#ShipCost.gratis{color:#17803A;font-weight:700}
/* Het groen geldt ook voor het bedrag naast een kortingscode, want bij
gratis verzending staat daar de tekst in plaats van een bedrag. */
#PromoAmt.gratis{color:#17803A;font-weight:700}
/* Het doorgestreepte verzendtarief als een code de verzending gratis
maakt. Rustig grijs, want de aandacht hoort bij de groene regel
eronder waar staat wat de code oplevert. */
#ShipCost s{color:#8A8785;text-decoration:line-through}
/* ==========================================================
HOE WERKT HET, DE VIER STAPPEN
Vier stappen met een foto, naast elkaar op een breed scherm en
onder elkaar op een telefoon. Dit verving drie losse blokken die
allemaal iets anders over aanbrengen zeiden.
========================================================== */
.stappen4{
display:grid;
grid-template-columns:1fr;
gap:1.6rem;
margin:0 0 3.5rem;
}
@media(min-width:640px){ .stappen4{grid-template-columns:repeat(2,1fr);gap:2rem} }
@media(min-width:1000px){ .stappen4{grid-template-columns:repeat(4,1fr);gap:1.6rem} }
.stap4{margin:0}
/* De foto onder de tekst. Geen vaste verhouding en geen bijsnijden:
jouw stappen staan er al netjes op, dus we tonen ze gewoon heel. */
.stap4-beeld{margin:.6rem 0 .8rem}
.stap4-beeld img{
width:100%;
height:auto;
display:block;
border-radius:.5rem;
border:1px solid var(--line);
}
.stap4 h3{font-size:1rem;margin:0 0 .4rem;line-height:1.3}
.stap4 p{font-size:.88rem;line-height:1.65;color:var(--smoke);margin:0}
/* De inleiding van het waarom-blok in twee kolommen, zodat de kop en
de tekst naast elkaar staan in plaats van opgepropt onder elkaar. */
.why-intro{margin-bottom:2rem}
@media(min-width:900px){
.why-intro{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:3rem;
align-items:start;
}
.why-intro .why-h{margin:0}
.why-intro .why-p{margin:0;max-width:38rem}
}