/* ==========================================================================
Home of Beauty — Front-end visualisatie
Huisstijl afgeleid van corrective-cosmetics.mediabirds.dev
Puur HTML/CSS (+ vanilla JS voor interactie). Geen build-step.
========================================================================== */
/* --------------------------------------------------------------------------
0. Webfont — Aire Bold Pro
Het display-font van de huisstijl. Eén stijl, daarom mapt de hele
gewichtsrange naar dit bestand: zo maakt de browser geen namaak-vet aan.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Aire Bold Pro";
src: url("../fonts/aire-bold-pro.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
:root {
/* Zand / secondary — de warme basiskleur van de huisstijl */
--sand-50: #f9f7f3;
--sand-100: #f2efe2;
--sand-200: #e3dcc5;
--sand-300: #d1c5a0;
--sand-400: #c6b48a;
--sand-500: #b0945f;
--sand-600: #a38253;
--sand-700: #886946;
--sand-800: #6e563e;
--sand-900: #5a4734;
--sand-950: #30241a;
/* Petrol / primary — donkere basis voor footer, dark sections */
--ink-50: #f3f7f8;
--ink-100: #dfebee;
--ink-200: #c3d6de;
--ink-300: #99b9c7;
--ink-400: #6894a8;
--ink-500: #4d798d;
--ink-600: #436477;
--ink-700: #3b5363;
--ink-800: #364854;
--ink-900: #313e48;
--ink-950: #1f2a33;
/* Salie / tertiary — subtiel accent */
--sage-50: #f5f8f6;
--sage-100: #dfe8e3;
--sage-200: #c0cfc6;
--sage-300: #8fa99b;
--sage-500: #587466;
--sage-700: #3a4b44;
--sage-900: #2b3631;
/* Neutraal */
--n-0: #ffffff;
--n-50: #f7f8f8;
--n-100: #eaebeb;
--n-200: #dbdcdc;
--n-300: #bbbebe;
--n-400: #969a99;
--n-500: #797e7d;
--n-600: #626767;
--n-700: #505453;
--n-800: #444848;
--n-900: #3c3e3e;
--n-950: #282929;
/* Semantisch */
--bg: var(--sand-50);
--bg-alt: var(--n-0);
--bg-soft: var(--sand-100);
/* Vlak van de navbalk. Het mega-menu gebruikt hetzelfde vlak zodat de
balk en het uitgeklapte paneel één doorlopend oppervlak vormen. Bewust
dekkend: bij een doorzichtige balk schijnt de hero erdoorheen en verschilt
de kleur van balk en paneel alsnog per scrollpositie. */
--bg-header: var(--sand-50);
--text: #000000;
--text-muted: var(--n-600);
--text-subtle: var(--n-500);
--line: var(--n-200);
--line-soft: rgba(0, 0, 0, .08);
--accent: var(--sand-600);
--accent-soft: var(--sand-400);
--dark: var(--ink-950);
--success: #4d7c5a;
--danger: #9a3b3b;
--sale: #a8443a; /* kortingsprijzen en actiebadges */
/* Typografie — Aire Bold Pro is het display-font van de huisstijl. De
terugval is een systeemserif; Cormorant Garamond stond hier eerder, maar
dat werd nooit getoond en kostte wel een download. */
--font-display: "Aire Bold Pro", "Times New Roman", Georgia, serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Ritme */
/* Containermaat van het referentiethema: 1700px met 50px zijruimte */
--container: 1700px;
--container-narrow: 1000px;
--gutter: 50px;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
--header-h: 88px;
--announce-h: 40px;
--shadow-sm: 0 1px 2px rgba(31, 42, 51, .06);
--shadow: 0 8px 30px rgba(31, 42, 51, .08);
--shadow-lg: 0 24px 60px rgba(31, 42, 51, .14);
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* --------------------------------------------------------------------------
2. Reset & basis
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, svg, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.12;
margin: 0;
letter-spacing: -.005em;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
p { margin: 0 0 1em; color: var(--text-muted); }
p:last-child { margin-bottom: 0; }
::selection { background: var(--sand-300); color: var(--ink-950); }
:focus-visible {
outline: 2px solid var(--ink-700);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
3. Layout helpers
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: clamp(56px, 8vw, 112px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
/* De referentiesite gebruikt één doorlopende achtergrond; secties krijgen
dus geen eigen vlak. De klassen blijven bestaan als haakje voor de
programmeur, maar zijn standaard transparant. */
.section--white,
.section--soft { background: transparent; }
.section--dark { background: var(--dark); color: var(--n-0); }
.section--dark p { color: rgba(255, 255, 255, .72); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--n-0); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure-sm { max-width: 48ch; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: -60px; left: 16px; z-index: 200;
background: var(--dark); color: #fff; padding: 12px 20px;
border-radius: var(--radius-pill); transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
/* --------------------------------------------------------------------------
4. Typografische onderdelen
-------------------------------------------------------------------------- */
.eyebrow {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
margin: 0 0 14px;
}
.section--dark .eyebrow { color: var(--sand-400); }
.lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--text-muted);
}
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--split {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px; flex-wrap: wrap;
}
.section-head p { max-width: 58ch; }
.section-head--center { text-align: center; }
.section-head--center p { max-width: 54ch; margin-inline: auto; }
/* --------------------------------------------------------------------------
5. Buttons
Overgenomen van corrective-cosmetics.mediabirds.dev: een dunne ring met
4px lucht om een gevulde pill. Bij hover wisselt de vulling van kleur en
rolt het label omhoog naar een identieke kopie eronder.
Markup:
Tekst
Tekst
-------------------------------------------------------------------------- */
.btn {
--btn-line: 24px;
--btn-pad-y: 8px;
--btn-pad-x: 16px;
--btn-size: 1rem;
--btn-ring: var(--n-950);
--btn-fill: var(--n-950);
--btn-text: var(--n-50);
--btn-ring-hover: var(--sand-200);
--btn-fill-hover: var(--sand-200);
--btn-text-hover: var(--n-950);
display: inline-flex;
flex-direction: column;
align-items: stretch;
padding: 4px;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
outline: 1px solid var(--btn-ring);
outline-offset: -1px;
cursor: pointer;
text-align: center;
transition: outline-color .3s var(--ease);
}
.btn__fill {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
width: 100%;
padding: var(--btn-pad-y) var(--btn-pad-x);
border-radius: var(--radius-pill);
background: var(--btn-fill);
transition: background-color .3s var(--ease);
}
.btn__roll {
height: var(--btn-line);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.btn__label {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--btn-line);
line-height: var(--btn-line);
font-family: var(--font-body);
font-size: var(--btn-size);
font-weight: 400;
white-space: nowrap;
transition: transform .3s var(--ease);
}
.btn__label:first-child { color: var(--btn-text); }
.btn__label:last-child { color: var(--btn-text-hover); }
.btn__label svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { outline-color: var(--btn-ring-hover); }
.btn:hover .btn__fill { background: var(--btn-fill-hover); }
.btn:hover .btn__label { transform: translateY(calc(-1 * var(--btn-line))); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 2px solid var(--n-950);
outline-offset: 2px;
}
/* Licht: op beeld en donkere vlakken waar maximale leesbaarheid telt.
Wit vlak met donkere tekst, dat bij hover naar zand rolt. */
.btn--white {
--btn-ring: var(--n-0);
--btn-fill: var(--n-0);
--btn-text: var(--n-950);
--btn-ring-hover: var(--sand-200);
--btn-fill-hover: var(--sand-200);
--btn-text-hover: var(--n-950);
}
.btn--white:focus-visible { outline-color: var(--n-50); }
/* Alleen een ring, geen vulling — voor rustiger plekken zoals filterbalken */
.btn--ghost {
--btn-ring: var(--line);
--btn-fill: transparent;
--btn-text: var(--n-950);
--btn-ring-hover: var(--n-950);
--btn-fill-hover: var(--n-950);
--btn-text-hover: var(--n-50);
}
/* Maten */
.btn--sm {
--btn-line: 20px;
--btn-pad-y: 6px;
--btn-pad-x: 14px;
--btn-size: .84rem;
}
.btn--lg {
--btn-pad-y: 13px;
--btn-pad-x: 28px;
}
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.btn__label { transition: none; }
.btn:hover .btn__label { transform: none; }
.btn__label:last-child { display: none; }
}
/* Links die standaard een lijntje tonen. Bij hover loopt het lijntje
van links naar rechts weg (schaalt naar de rechterkant toe). */
.link-arrow {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
font-size: .9rem; font-weight: 500;
padding-bottom: 4px;
transition: gap .25s var(--ease);
}
.link-arrow::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor;
transform: scaleX(1); transform-origin: right;
transition: transform .35s var(--ease);
}
.link-arrow:hover { gap: 14px; }
.link-arrow:hover::after { transform: scaleX(0); }
/* Variant waarbij alleen de tekst het lijntje draagt, niet het icoon */
.link-arrow--text-only { padding-bottom: 0; }
.link-arrow--text-only:hover { gap: 8px; }
.link-arrow--text-only::after { content: none; }
.link-arrow--text-only span {
position: relative;
padding-bottom: 4px;
}
.link-arrow--text-only span::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor;
transform: scaleX(1); transform-origin: right;
transition: transform .35s var(--ease);
}
.link-arrow--text-only:hover span::after { transform: scaleX(0); }
/* Losse tekstlink in het huisidioom: het lijntje staat er standaard en loopt
bij hover van links naar rechts weg. Zelfde gedrag als .link-arrow, maar
zonder pijl en zonder eigen tekstkleur. */
.link-line { position: relative; color: inherit; }
.link-line::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px;
height: 1px; background: currentColor;
transform: scaleX(1); transform-origin: right;
transition: transform .35s var(--ease);
}
.link-line:hover::after { transform: scaleX(0); }
.icon { width: 20px; height: 20px; stroke-width: 1.4; flex: none; }
.icon--sm { width: 16px; height: 16px; }
/* --------------------------------------------------------------------------
6. Header + navigatie
-------------------------------------------------------------------------- */
.header {
position: sticky; top: 0; z-index: 90;
background: var(--bg-header);
border-bottom: 1px solid var(--line-soft);
}
.header__inner {
height: var(--header-h);
display: flex; align-items: center; gap: 32px;
}
.logo { display: flex; flex: none; }
/* Het logo schaalt op hoogte; de breedte volgt uit de viewBox (200 × 68). */
.logo__img { display: block; height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.nav__link {
display: inline-flex; align-items: center; gap: 6px;
border: 0; background: transparent; cursor: pointer;
font-family: var(--font-body); color: inherit;
padding: 10px 14px;
font-size: .93rem;
border-radius: var(--radius-sm);
transition: color .2s var(--ease);
position: relative;
}
.nav__link::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease);
}
/* Het lijntje loopt alleen in bij hover. De actieve pagina en een geopend
submenu worden met kleur gemarkeerd, zonder lijn. */
.nav__link:hover::after { transform: scaleX(1); }
/* Actieve pagina en geopend submenu: duidelijk andere kleur, geen lijn */
.nav__link.is-active,
.nav__link[aria-expanded="true"] {
color: var(--sand-600);
font-weight: 500;
}
/* De chevron klapt om met een verticale spiegeling in plaats van een rotatie:
het pijltje vouwt door de horizontale as heen dicht. */
.nav__link .chev { width: 14px; height: 14px; transition: transform .5s cubic-bezier(.3, 1, .3, 1); }
.nav__link[aria-expanded="true"] .chev { transform: scaleY(-1); }
.header__actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px;
border: 0; background: transparent; border-radius: var(--radius-pill);
cursor: pointer;
transition: background .2s var(--ease);
}
.icon-btn:hover { background: rgba(0, 0, 0, .05); }
.icon-btn__badge {
position: absolute; top: 5px; right: 4px;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--sand-600); color: #fff;
font-size: .66rem; font-weight: 600;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg);
}
.icon-btn__badge[hidden] { display: none; }
/* Taalswitch NL / BE */
.langswitch { position: relative; margin-left: 6px; }
.langswitch__toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: transparent; cursor: pointer;
font-size: .82rem; font-weight: 500;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.langswitch__toggle:hover { border-color: var(--ink-700); }
.langswitch__flag { font-size: 1rem; line-height: 1; }
.langswitch__menu {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
min-width: 250px; padding: 8px;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.langswitch.is-open .langswitch__menu { opacity: 1; visibility: visible; transform: none; }
.langswitch__item {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: var(--radius-sm);
width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.langswitch__item:hover { background: var(--sand-50); }
.langswitch__item[aria-current="true"] { background: var(--sand-100); }
.langswitch__item strong { display: block; font-size: .9rem; font-weight: 500; }
.langswitch__item small { color: var(--text-subtle); font-size: .76rem; }
.burger { display: none; }
/* --------------------------------------------------------------------------
7. Mega-menu
-------------------------------------------------------------------------- */
.megamenu {
position: absolute; left: 0; right: 0; top: 100%;
z-index: 89;
visibility: hidden;
transition: visibility .3s;
}
.megamenu.is-open { visibility: visible; }
/* Het paneel groeit open in plaats van te faden: grid-template-rows van 0fr
naar 1fr animeert de echte hoogte. */
.megamenu__reveal {
display: grid;
grid-template-rows: 0fr;
background: var(--bg-header);
box-shadow: var(--shadow);
transition: grid-template-rows .3s cubic-bezier(.6, .14, 0, 1),
border-color .3s linear;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.megamenu.is-open .megamenu__reveal {
grid-template-rows: 1fr;
border-top-color: var(--line-soft);
border-bottom-color: var(--line-soft);
}
.megamenu__clip { overflow: hidden; min-height: 0; }
/* Daarna komen de kolommen omhoog in beeld */
.megamenu__inner > * {
opacity: 0;
transform: translate3d(0, 15px, 0);
}
.megamenu.is-open .megamenu__inner > * {
animation: mega-item-in .4s ease .15s forwards;
}
@keyframes mega-item-in {
from { opacity: 0; transform: translate3d(0, 15px, 0); }
to { opacity: 1; transform: translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
.megamenu__reveal { transition: none; }
.megamenu.is-open .megamenu__inner > * { animation: none; opacity: 1; transform: none; }
}
.megamenu__inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
gap: 40px;
padding-block: 44px 48px;
}
/* Kolomkop: gewone tekstgrootte, iets zwaarder dan de items
eronder en in de donkere tekstkleur — geen kapitalen, geen scheidingslijn. */
.megamenu__title {
font-family: var(--font-body);
font-size: 1rem; font-weight: 500; letter-spacing: .02em;
text-transform: none;
color: var(--ink-950);
margin: 0 0 16px;
}
.megamenu__list li + li { margin-top: 2px; }
.megamenu__list a {
position: relative;
display: inline-block; padding: 6px 0;
font-size: .92rem; color: var(--n-700);
transition: color .2s var(--ease);
}
.megamenu__list a::after {
content: "";
position: absolute; left: 0; bottom: 2px;
width: 0; height: 1px;
background: currentColor;
transition: width .3s var(--ease);
}
.megamenu__list a:hover { color: var(--ink-950); }
.megamenu__list a:hover::after { width: 100%; }
/* Het item dat bij de huidige pagina hoort */
.megamenu__list a.is-current,
.megamenu__primary a.is-current,
.mobilenav__plain.is-current,
.mobilenav__row.is-current {
color: var(--sand-600);
font-weight: 600;
}
.megamenu__list a.is-current::after { width: 100%; background: var(--sand-600); }
.megamenu__primary a {
position: relative;
}
.megamenu__primary a::after {
content: "";
position: absolute; left: 0; bottom: 2px;
width: 0; height: 1px;
background: currentColor;
transition: width .3s var(--ease);
}
.megamenu__primary a:hover::after { width: 100%; }
/* Label naast een menu-item. Staat als eigen element in de markup, want
::after is hier al in gebruik voor het hover-lijntje. */
.megamenu__list li { display: flex; align-items: center; gap: 8px; }
.tag-new {
flex: none;
font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--sand-700); border: 1px solid var(--sand-300);
padding: 2px 7px; border-radius: var(--radius-pill);
line-height: 1.4;
}
@media (max-width: 1150px) {
.megamenu__inner { grid-template-columns: repeat(3, 1fr); }
.megamenu__feature { grid-column: span 3; flex-direction: row; align-items: center; gap: 24px; }
.megamenu__feature .ph { width: 220px; margin-bottom: 0; flex: none; }
}
/* --------------------------------------------------------------------------
8. Mobiel menu — drawer links met doorklik-panelen
-------------------------------------------------------------------------- */
.drawer-backdrop {
position: fixed; inset: 0; z-index: 98;
background: rgba(31, 42, 51, .45);
opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.mobilenav {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 99;
width: min(420px, 100vw);
background: var(--bg-alt);
transform: translateX(-100%);
transition: transform .35s var(--ease);
overflow: hidden;
}
.mobilenav.is-open { transform: none; }
/* Alle panelen liggen op elkaar; het actieve schuift in beeld. */
.mobilenav__slider { position: relative; height: 100%; }
.mobilenav__panel {
position: absolute; inset: 0;
display: flex; flex-direction: column;
background: var(--bg-alt);
transform: translateX(100%);
visibility: hidden;
transition: transform .32s var(--ease), visibility .32s;
}
.mobilenav__panel.is-current { transform: none; visibility: visible; }
.mobilenav__panel.is-previous { transform: translateX(-30%); visibility: hidden; }
.mobilenav__head {
flex: none;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--line);
}
.mobilenav__back {
display: inline-flex; align-items: center; gap: 10px;
padding: 0; border: 0; background: transparent; cursor: pointer;
font-family: var(--font-body);
font-size: 1.05rem; font-weight: 600; color: var(--ink-950);
}
.mobilenav__body {
flex: 1; overflow-y: auto;
display: flex; flex-direction: column;
padding: 8px 20px 28px;
}
/* Rij over de volle breedte met een scheidingslijn, chevron bij doorklikken */
.mobilenav__row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
width: 100%;
padding: 18px 0;
border: 0; border-bottom: 1px solid var(--line);
background: transparent; cursor: pointer; text-align: left;
font-family: var(--font-body);
font-size: 1.05rem; font-weight: 600; color: var(--ink-950);
}
.mobilenav__row:hover { color: var(--sand-700); }
/* Losse links zonder lijn, zoals de bovenste groep in het Shop-paneel */
.mobilenav__plainlist { display: grid; gap: 2px; padding-block: 14px 6px; }
.mobilenav__plain {
display: block; padding: 7px 0;
font-size: 1rem; font-weight: 600; color: var(--ink-950);
}
.mobilenav__plain:hover { color: var(--sand-700); }
.mobilenav__plainlist + .mobilenav__row { border-top: 1px solid var(--line); }
.mobilenav__promo {
position: relative; display: block;
margin-top: 24px;
border-radius: var(--radius); overflow: hidden;
aspect-ratio: 16/10;
}
.mobilenav__promo .ph-img { position: absolute; inset: 0; }
.mobilenav__promo-body {
position: absolute; inset: auto 0 0 0; z-index: 2;
padding: 20px;
background: linear-gradient(to top, rgba(31, 42, 51, .9) 0%, rgba(31, 42, 51, .55) 55%, transparent 100%);
color: #fff;
}
.mobilenav__promo-body .eyebrow { display: block; color: var(--sand-300); margin-bottom: 2px; }
.mobilenav__promo-body strong {
display: block;
font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
text-shadow: 0 1px 6px rgba(31, 42, 51, .45);
}
.mobilenav__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 18px; }
.mobilenav__meta { display: flex; justify-content: center; }
.mobilenav .socials { justify-content: center; }
.mobilenav .langswitch__menu {
bottom: calc(100% + 10px); top: auto;
left: 50%; right: auto; transform: translateX(-50%) translateY(-6px);
}
.mobilenav .langswitch.is-open .langswitch__menu { transform: translateX(-50%); }
/* --------------------------------------------------------------------------
9. Zoeken — drawer rechts
-------------------------------------------------------------------------- */
.searchpanel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
width: min(460px, 100vw);
background: var(--bg-alt);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .35s var(--ease);
box-shadow: var(--shadow-lg);
}
.searchpanel.is-open { transform: none; }
.searchpanel__head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--line);
flex: none;
}
.searchpanel__head .drawer__title { font-family: var(--font-display); font-size: 1.35rem; margin: 0; }
.searchpanel__body { flex: 1; overflow-y: auto; padding: 22px 24px 28px; }
/* Zoekveld */
.searchfield {
position: relative;
display: flex; align-items: center;
margin-bottom: 26px;
}
.searchfield input {
width: 100%;
padding: 14px 84px 14px 20px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--n-50);
font: inherit; font-size: .95rem;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.searchfield input:focus {
outline: 0; border-color: var(--ink-700); background: var(--n-0);
}
.searchfield input::-webkit-search-cancel-button { display: none; }
.searchfield__btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: transparent;
color: var(--n-700); cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease);
}
.searchfield__btn:hover { background: var(--n-100); color: var(--ink-950); }
.searchfield [data-search-submit] { right: 12px; }
.searchfield [data-search-clear] { right: 48px; }
.searchfield [data-search-clear][hidden] { display: none; }
.searchblock + .searchblock { margin-top: 28px; }
.searchblock__title {
font-family: var(--font-body);
font-size: .95rem; font-weight: 600; color: var(--ink-950);
margin: 0 0 14px;
}
.search-suggest { display: flex; flex-wrap: wrap; gap: 10px; }
.search-suggest .chip {
padding: 6px 12px;
border: 0;
border-radius: 16px;
background: rgba(40, 41, 41, .06);
color: var(--n-800);
font-size: .95rem; font-weight: 400;
transition: background .2s var(--ease), color .2s var(--ease);
}
.search-suggest .chip:hover { background: rgba(40, 41, 41, .12); color: var(--ink-950); }
.search-suggestion {
display: block; width: 100%; text-align: left;
padding: 8px 0; border: 0; background: transparent; cursor: pointer;
font-size: .95rem; color: var(--n-700);
}
.search-suggestion strong { color: var(--ink-950); font-weight: 600; }
.search-suggestion:hover { color: var(--ink-950); }
/* Tabs Producten / Categorieën */
.searchtabs {
display: flex; gap: 22px;
border-bottom: 1px solid var(--line);
margin-bottom: 8px;
}
.searchtab {
padding: 10px 0; margin-bottom: -1px;
background: transparent; border: 0; border-bottom: 2px solid transparent;
cursor: pointer; font-size: .95rem; font-weight: 500; color: var(--text-subtle);
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.searchtab span { font-size: .8rem; color: var(--n-400); margin-left: 3px; }
.searchtab:hover { color: var(--ink-950); }
.searchtab.is-active { color: var(--ink-950); border-bottom-color: var(--ink-950); }
.searchpanel__list { display: grid; }
/* Resultaatregel */
.search-hit {
display: grid; grid-template-columns: 56px 1fr auto;
align-items: center; gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line-soft);
}
.search-hit:last-child { border-bottom: 0; }
.search-hit .ph,
.search-hit .ph-img {
width: 56px; height: 56px;
border-radius: var(--radius-sm);
background: var(--sand-100);
}
.search-hit__name { font-size: .92rem; font-weight: 500; color: var(--ink-950); line-height: 1.3; }
.search-hit__sku {
font-size: .76rem; color: var(--text-subtle);
font-variant-numeric: tabular-nums; margin-top: 3px;
}
.search-hit__price { font-size: .9rem; font-weight: 500; margin-top: 4px; }
.search-hit__price .price__old { font-size: .78rem; }
.search-hit mark { background: var(--sand-200); color: inherit; padding: 0 2px; border-radius: 2px; }
.search-hit__add {
width: 40px; height: 40px; flex: none; margin-right: 4px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%;
background: var(--sand-200); color: var(--n-950); cursor: pointer;
outline: 1px solid var(--sand-200); outline-offset: 3px;
transition: background .25s var(--ease), color .25s var(--ease), outline-color .25s var(--ease);
}
.search-hit__add:hover { background: var(--ink-950); outline-color: var(--ink-950); color: #fff; }
.search-empty { padding: 28px 0; color: var(--text-muted); font-size: .92rem; }
.searchpanel__foot {
flex: none;
padding: 16px 24px 20px;
border-top: 1px solid var(--line);
background: var(--bg-alt);
}
.searchpanel__foot[hidden] { display: none; }
/* --------------------------------------------------------------------------
10. Placeholders voor beeld
Vervang .ph door een ![]()
. De kleurvlakken visualiseren de beeldvlakken.
-------------------------------------------------------------------------- */
.ph {
position: relative;
background: linear-gradient(135deg, var(--sand-100) 0%, var(--sand-200) 55%, var(--sand-300) 100%);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.ph::after {
content: attr(data-label);
font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
color: rgba(48, 36, 26, .34);
text-align: center; padding: 0 12px;
font-family: var(--font-body);
}
.ph--sage { background: linear-gradient(135deg, var(--sage-100) 0%, var(--sage-200) 60%, var(--sage-300) 100%); }
.ph--ink { background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-900) 60%, var(--ink-950) 100%); }
.ph--ink::after { color: rgba(255, 255, 255, .4); }
.ph--blush { background: linear-gradient(135deg, #f3e7e2 0%, #e4cec5 60%, #d3b6ab 100%); }
.ph--neutral { background: linear-gradient(135deg, var(--n-50) 0%, var(--n-100) 60%, var(--n-200) 100%); }
.ph--product { background: linear-gradient(160deg, #ffffff 0%, var(--sand-50) 50%, var(--sand-100) 100%); }
/* Echte foto. Draagt ook .ph, zodat alle positioneringsregels blijven gelden
en het kleurvlak eronder als fallback dient wanneer een beeld niet laadt. */
.ph-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.ph-img::after { content: none; }
/* Video in dezelfde rol als een foto */
.ph-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--ink-900);
}
/* Bij grote, bedekkende vlakken staat het label in de hoek in plaats van gecentreerd,
zodat het de tekst eroverheen niet in de weg zit. */
.heroshow__slide > .ph::after,
.sale-banner > .ph::after,
.megamenu__promo > .ph::after {
position: absolute; top: 14px; right: 16px;
color: rgba(255, 255, 255, .5);
text-shadow: 0 1px 3px rgba(31, 42, 51, .4);
}
.heroshow__slide > .ph,
.sale-banner > .ph,
.megamenu__promo > .ph { align-items: flex-start; justify-content: flex-end; }
/* --------------------------------------------------------------------------
11. Grids & kaarten
-------------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.grid--4.grid--keep-2, .grid--3.grid--keep-2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* Productkaart — dit is de structuur die in Shopify een product-card snippet wordt */
.product-card {
position: relative;
background: var(--bg-alt);
border-radius: var(--radius);
overflow: hidden;
display: flex; flex-direction: column;
}
.product-card__media { position: relative; aspect-ratio: 1; }
.product-card__media .ph { position: absolute; inset: 0; }
.product-card__flags {
position: absolute; top: 12px; left: 12px; z-index: 2;
display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.flag {
font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
padding: 5px 10px; border-radius: var(--radius-pill);
background: var(--ink-950); color: #fff; font-weight: 500;
}
.flag--gold { background: var(--sand-600); }
.flag--sage { background: var(--sage-500); }
.flag--light { background: #fff; color: var(--ink-950); border: 1px solid var(--line); }
/* Favorietenknop */
/* Ringknop van corrective-cosmetics: een gevulde cirkel met op 4px afstand
een haarlijn eromheen. Die ring is een outline, zodat er geen extra
element omheen nodig is. */
.fav-btn {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .92);
outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 3px;
cursor: pointer;
transition: background .25s var(--ease), outline-color .25s var(--ease);
}
.fav-btn:hover { background: var(--n-0); outline-color: var(--n-0); }
.fav-btn svg { width: 19px; height: 19px; fill: none; stroke: var(--ink-950); stroke-width: 1.4; transition: fill .2s var(--ease), stroke .2s var(--ease); }
.fav-btn[aria-pressed="true"] svg { fill: var(--sand-600); stroke: var(--sand-600); }
.fav-btn[aria-pressed="true"] { background: var(--sand-100); outline-color: var(--sand-200); }
@keyframes fav-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.fav-btn.is-popping svg { animation: fav-pop .38s var(--ease); }
.product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.product-card__brand {
font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent); margin-bottom: 7px;
}
.product-card__name {
font-family: var(--font-display);
font-size: 1.5rem; line-height: 1.18;
margin-bottom: 6px;
}
.product-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__sku {
font-size: .74rem; color: var(--text-subtle);
font-variant-numeric: tabular-nums; letter-spacing: .04em;
margin-bottom: 12px;
}
.product-card__foot {
margin-top: auto; padding-top: 12px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.price { font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.price small { display: block; font-size: .68rem; font-weight: 400; color: var(--text-subtle); letter-spacing: .02em; }
.price__old { color: var(--n-400); text-decoration: line-through; font-size: .85rem; margin-right: 6px; font-weight: 400; }
.cart-btn {
position: relative; z-index: 2;
width: 42px; height: 42px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid var(--ink-950); background: transparent;
cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.cart-btn:hover { background: var(--ink-950); color: #fff; }
.stock { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text-subtle); }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.stock--low::before { background: #c08a3e; }
.stock--out::before { background: var(--n-400); }
/* --------------------------------------------------------------------------
12. Shop: filterbalk + sidebar
-------------------------------------------------------------------------- */
.page-head { background: transparent; border-bottom: 1px solid var(--line); }
.page-head__inner { padding-block: clamp(32px, 4.5vw, 64px); }
.page-head h1 { margin-bottom: 14px; }
.page-head p { max-width: 62ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--text-subtle); margin-bottom: 18px; }
.breadcrumb a { position: relative; }
.breadcrumb a::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--ease);
}
.breadcrumb a:hover { color: var(--ink-950); }
.breadcrumb a:hover::after { transform: scaleX(1); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--n-300); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
/* Eenvoudige balk met een telling; gebruikt op favorieten en bij de
storelocator. De shoppagina heeft zijn eigen balk (.shopbar). */
.shop-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.shop-toolbar__count { font-size: .86rem; color: var(--text-muted); }
.shop-toolbar__right { display: flex; align-items: center; gap: 12px; }
/* --------------------------------------------------------------------------
Shop: balk, facetten, zijbalk en filterlade
-------------------------------------------------------------------------- */
/* De balk loopt over de volle breedte, boven zijbalk én grid. */
.shopbar {
display: flex; align-items: center; justify-content: space-between;
gap: 30px; flex-wrap: wrap;
padding-bottom: 20px;
}
.shopbar__side { display: flex; align-items: center; gap: 20px; }
.shopbar__title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1;
margin: 0;
}
.shopbar__count { font-size: .9rem; color: var(--text-muted); }
/* Knop die de lade opent; verschijnt zodra de zijbalk verdwijnt. */
.shopbar__toggle {
display: none; align-items: center; gap: 9px;
padding: 9px 20px;
border: 1px solid var(--ink-950); border-radius: var(--radius-pill);
background: var(--ink-950); color: var(--n-0);
font-size: .9rem; cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease);
}
.shopbar__toggle:hover { background: transparent; color: var(--ink-950); }
/* --- Sorteren ------------------------------------------------------------ */
.sortdrop { position: relative; }
.sortdrop__btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 22px;
border: 1px solid var(--ink-950); border-radius: var(--radius-pill);
font-size: .9rem; cursor: pointer; list-style: none;
white-space: nowrap;
}
.sortdrop__btn::-webkit-details-marker { display: none; }
.sortdrop__btn .chev { width: 15px; height: 15px; transition: transform .5s cubic-bezier(.3, 1, .3, 1); }
.sortdrop[open] .sortdrop__btn .chev { transform: scaleY(-1); }
.sortdrop__panel {
position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
min-width: 232px; padding: 8px;
background: var(--n-0);
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 18px 40px rgba(31, 42, 51, .12);
display: grid; gap: 2px;
}
.sortdrop__opt {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: var(--radius-sm);
font-size: .9rem; cursor: pointer;
}
.sortdrop__opt:hover { background: var(--sand-50); }
.sortdrop__opt input { accent-color: var(--ink-950); cursor: pointer; }
/* --- Gekozen filters ----------------------------------------------------- */
.shop-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-active:empty { display: none; }
.shop-active:not(:empty) { padding-bottom: 24px; }
.pill-x {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 16px;
background: rgba(64, 64, 64, .06);
font-size: .86rem; border: 0; cursor: pointer;
transition: background .2s var(--ease);
}
.pill-x:hover { background: rgba(64, 64, 64, .12); }
.pill-x svg { width: 14px; height: 14px; flex: none; }
/* Zelfde idioom als de overige tekstlinks: het lijntje staat er standaard
en loopt bij hover van links naar rechts weg. */
.shop-active__clear {
position: relative;
margin-left: 8px; padding: 0;
border: 0; background: transparent;
font-size: .86rem; color: var(--ink-950); cursor: pointer;
}
.shop-active__clear::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px;
height: 1px; background: currentColor;
transform: scaleX(1); transform-origin: right;
transition: transform .35s var(--ease);
}
.shop-active__clear:hover::after { transform: scaleX(0); }
/* --- Zijbalk en grid ----------------------------------------------------- */
.shop-layout { display: grid; grid-template-columns: 320px 1fr; align-items: start; }
.shop-results { min-width: 0; }
/* Scrolt eerst mee; zodra de onderkant van de balk de onderkant van het
scherm raakt blijft hij daar hangen tot de productkolom op is.
De top-waarde wordt door initShopFilters berekend: bij een balk die hoger
is dan het scherm wordt die negatief, waardoor hij op de bodem plakt. */
.filters {
position: sticky;
top: var(--filters-top, 0px);
align-self: start;
}
.filters__inner { width: 270px; }
/* Het aantal kolommen komt uit de kolomkiezer. */
.grid--products { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
/* --- Eén facetgroep ------------------------------------------------------ */
.facet { border-bottom: 1px solid var(--line); }
.facet__head { margin: 0; }
.facet__summary {
display: flex; align-items: center; gap: 6px;
width: 100%; padding: 18px 0;
background: transparent; border: 0; cursor: pointer; text-align: left;
font-family: var(--font-display); font-size: 1.125rem; line-height: 1.1;
}
.facet__status { font-family: var(--font-body); font-size: .8rem; color: var(--text-subtle); }
.facet__status:empty { display: none; }
.facet__icon { margin-left: auto; display: inline-flex; flex: none; }
.facet__icon svg { width: 18px; height: 18px; }
/* Dicht = plus, open = min: de verticale streep draait weg. */
.facet__icon .bar-v {
transform-origin: center;
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.facet__icon .bar-v { transform: rotate(90deg); opacity: 0; }
.facet.is-closed .facet__icon .bar-v { transform: rotate(0deg); opacity: 1; }
.facet__panel {
display: grid; grid-template-rows: 1fr;
transition: grid-template-rows .35s var(--ease);
}
.facet.is-closed .facet__panel { grid-template-rows: 0fr; }
.facet__inner { overflow: hidden; min-height: 0; }
.facet__list { display: grid; gap: 6px; padding-bottom: 20px; }
.facet[data-facet-collapsible]:not(.is-expanded) .facet__item:nth-child(n + 7) { display: none; }
.facet__more {
border: 0; background: transparent; padding: 3px 0 20px;
margin-top: -14px;
font-size: .86rem; color: var(--ink-950); cursor: pointer;
text-decoration: underline; text-underline-offset: 4px;
}
.facet__more:hover { color: var(--sand-700); }
/* --- Selectievakje ------------------------------------------------------- */
.check {
display: flex; align-items: center; gap: 10px;
cursor: pointer; font-size: .9rem; color: var(--n-700);
padding: 2px 0;
}
.check:hover { color: var(--ink-950); }
.check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border: 1px solid rgba(31, 42, 51, .55); border-radius: 3px;
color: transparent;
transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.check__box svg { width: 12px; height: 12px; }
.check__input:checked + .check__box {
background: var(--ink-950); border-color: var(--ink-950); color: var(--n-0);
}
.check__input:focus-visible + .check__box { outline: 2px solid var(--sand-600); outline-offset: 2px; }
.check__count { margin-left: auto; font-size: .82rem; color: var(--n-400); }
/* --- Prijsfacet ---------------------------------------------------------- */
.pricefacet { padding-bottom: 22px; }
.pricefacet__slider { position: relative; height: 24px; margin-bottom: 14px; }
.pricefacet__rail, .pricefacet__fill {
position: absolute; top: 50%; height: 3px; border-radius: 2px;
transform: translateY(-50%); pointer-events: none;
}
.pricefacet__rail { left: 0; right: 0; background: var(--sand-200); }
.pricefacet__fill { left: var(--from); right: calc(100% - var(--to)); background: var(--ink-950); }
.pricefacet__range {
position: absolute; inset: 0; width: 100%; height: 24px;
margin: 0; background: transparent; appearance: none;
pointer-events: none; /* alleen de knopjes vangen de muis */
}
.pricefacet__range::-webkit-slider-thumb {
appearance: none; pointer-events: auto;
width: 16px; height: 16px; border-radius: 50%;
background: var(--n-0); border: 1px solid var(--ink-950);
box-shadow: 0 1px 3px rgba(31, 42, 51, .25);
cursor: pointer;
}
.pricefacet__range::-moz-range-thumb {
pointer-events: auto;
width: 16px; height: 16px; border-radius: 50%;
background: var(--n-0); border: 1px solid var(--ink-950);
cursor: pointer;
}
.pricefacet__fields { display: flex; align-items: center; gap: 10px; }
.pricefield {
flex: 1; display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--n-0);
}
.pricefield__cur { color: var(--text-subtle); font-size: .86rem; }
.pricefield input {
width: 100%; min-width: 0; border: 0; background: transparent;
font: inherit; font-size: .9rem; color: inherit;
}
.pricefield input:focus { outline: none; }
.pricefield:focus-within { border-color: var(--sand-400); }
/* --- Filterlade ---------------------------------------------------------- */
.filters-drawer {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 99;
width: min(440px, 100vw);
display: flex; flex-direction: column;
background: var(--n-0);
transform: translateX(-100%);
transition: transform .35s var(--ease);
visibility: hidden;
}
.filters-drawer.is-open { transform: none; visibility: visible; }
.filters-drawer__head {
flex: none;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 24px;
border-bottom: 1px solid var(--line);
}
.filters-drawer__head h2 { font-size: 1.32rem; margin: 0; }
.filters-drawer__body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
.filters-drawer__sort:empty { display: none; }
.filters-drawer__foot {
flex: none;
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
padding: 16px 24px 22px;
border-top: 1px solid var(--line);
background: var(--n-0);
}
/* De lade toont het sorteerblok als een gewone rij, niet als dropdown. */
.filters-drawer .sortdrop { border-bottom: 1px solid var(--line); }
.filters-drawer .sortdrop__btn {
border: 0; border-radius: 0; padding: 18px 0;
justify-content: space-between; width: 100%;
font-family: var(--font-display); font-size: 1.125rem;
}
.filters-drawer .sortdrop__panel {
position: static; min-width: 0; padding: 0 0 18px;
border: 0; box-shadow: none; background: transparent;
}
/* --- Schakelpunten ------------------------------------------------------- */
@media (max-width: 1279px) {
.shopbar__title { display: none; }
.shopbar__toggle { display: inline-flex; }
.shop-layout { grid-template-columns: 1fr; }
.filters { display: none; }
}
@media (max-width: 1024px) {
.grid--products { --cols: 3; }
}
@media (max-width: 860px) {
.grid--products { --cols: 2; }
}
@media (max-width: 767px) {
.shopbar { gap: 14px; }
.shopbar__count { display: none; }
.shopbar__side { gap: 12px; }
.sortdrop { display: none; }
.filters-drawer .sortdrop { display: block; }
}
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span {
min-width: 42px; height: 42px; padding: 0 12px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: var(--radius-pill);
font-size: .88rem; background: #fff;
transition: border-color .2s var(--ease);
}
.pagination a:hover { border-color: var(--ink-950); }
.pagination .is-current { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
/* --------------------------------------------------------------------------
13. Productdetail
-------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.pdp__gallery { display: grid; gap: 14px; }
.pdp__main { aspect-ratio: 1; border-radius: var(--radius); }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pdp__thumb {
aspect-ratio: 1; padding: 0; overflow: hidden;
border-radius: var(--radius-sm); cursor: pointer;
border: 1px solid transparent; background: var(--sand-100);
transition: border-color .2s var(--ease);
}
.pdp__thumb:hover { border-color: var(--sand-400); }
.pdp__thumb.is-active { border-color: var(--ink-950); }
.pdp__thumb .ph-img { aspect-ratio: 1; }
@media (max-width: 900px) { .pdp__info { position: static; } }
.pdp__brand { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.pdp__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: .82rem; color: var(--text-subtle); margin-bottom: 22px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.pdp__price .amount { font-family: var(--font-display); font-size: 2.3rem; }
.variant-row { margin-bottom: 22px; }
.variant-row__label { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.variant-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.variant {
padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--radius-pill);
background: #fff; cursor: pointer; font-size: .86rem;
transition: border-color .2s var(--ease);
}
.variant:hover { border-color: var(--ink-700); }
.variant.is-active { border-color: var(--ink-950); background: var(--ink-950); color: #fff; }
.variant[disabled] { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; }
.qty button { width: 44px; height: 48px; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; }
.qty input { width: 48px; height: 48px; border: 0; text-align: center; background: transparent; font-variant-numeric: tabular-nums; }
.qty input:focus { outline: 0; }
.pdp__buy { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.pdp__buy .btn { flex: 1; min-width: 200px; height: 50px; }
.fav-btn--lg {
position: static; width: 46px; height: 46px;
background: transparent;
outline-color: var(--sand-200);
}
.fav-btn--lg:hover { background: var(--sand-100); outline-color: var(--sand-300); }
/* --------------------------------------------------------------------------
14. Accordion (FAQ / productinfo)
-------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
width: 100%; padding: 22px 0; background: transparent; border: 0; cursor: pointer;
text-align: left;
font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.32rem);
}
/* Icoon in de ring-opmaak van corrective-cosmetics: gesloten een donkere
cirkel met een plus, open een zandkleurige cirkel met een min. */
.accordion__icon {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
padding: 4px;
border-radius: var(--radius-pill);
outline: 1px solid var(--sand-200);
outline-offset: -1px;
background: transparent;
transition: outline-color .25s var(--ease);
}
.accordion__icon span {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: var(--radius-pill);
background: var(--n-950);
color: var(--n-50);
transition: background .25s var(--ease), color .25s var(--ease);
}
.accordion__icon svg { width: 24px; height: 24px; }
/* de verticale streep van de plus verdwijnt als het item openstaat */
.accordion__icon svg .bar-v {
transform-origin: center;
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.accordion__item.is-open .accordion__icon span {
background: var(--sand-200);
color: var(--n-950);
}
.accordion__item.is-open .accordion__icon svg .bar-v {
transform: rotate(90deg);
opacity: 0;
}
/* Open- en dichtklappen op werkelijke hoogte: een grid-rij van 0fr naar 1fr
is de enige manier om naar "auto" te animeren zonder de hoogte te meten. */
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .4s var(--ease);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel-inner {
overflow: hidden;
min-height: 0; /* anders weigert de rij onder de inhoud te krimpen */
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--ease), visibility 0s linear .4s;
}
.accordion__item.is-open .accordion__panel-inner {
opacity: 1;
visibility: visible;
transition: opacity .3s var(--ease) .1s, visibility 0s;
}
/* Let op: de onderruimte staat bewust als marge op de laatste alinea en niet
als padding op de wrapper. Padding is niet samendrukbaar, dus die zou in
dichtgeklapte toestand als streepje hoogte blijven staan. */
.accordion__panel { padding-right: 60px; }
.accordion__panel-inner > :first-child { margin-top: 0; }
.accordion__panel-inner > :last-child { margin-bottom: 26px; }
.accordion__panel p, .accordion__panel li { color: var(--text-muted); font-size: .95rem; }
.accordion__panel ul { list-style: disc; padding-left: 20px; margin-top: 10px; display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
.accordion__panel, .accordion__panel-inner { transition: none; }
}
/* Juridische pagina's: smalle leeskolom met een kolommetje meta ernaast */
.legal { display: grid; grid-template-columns: 260px minmax(0, 68ch); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 32px; } }
.legal__aside { position: sticky; top: calc(var(--header-h) + 28px); }
@media (max-width: 900px) { .legal__aside { position: static; } }
.legal__updated { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.legal__note {
margin-top: 14px; padding: 16px 18px;
background: var(--sand-100); border-radius: var(--radius);
font-size: .82rem; line-height: 1.6; color: var(--text-muted);
}
.legal__body h2 {
font-size: 1.32rem;
margin-top: 40px; margin-bottom: 10px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { color: var(--text-muted); }
.legal__body p + p { margin-top: 12px; }
.legal__body ul {
list-style: disc; padding-left: 20px;
margin-top: 12px; display: grid; gap: 6px;
color: var(--text-muted);
}
.legal__table-wrap { overflow-x: auto; margin-top: 18px; }
.legal__table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; }
.legal__table th, .legal__table td {
text-align: left; vertical-align: top;
padding: 14px 16px 14px 0;
border-bottom: 1px solid var(--line);
}
.legal__table th { font-weight: 600; white-space: nowrap; }
.legal__table td { color: var(--text-muted); }
/* --------------------------------------------------------------------------
15. Kenniscentrum / storelocator
-------------------------------------------------------------------------- */
/* De balk is zelf volle schermbreedte, zodat de lijn doorloopt tot de randen;
de tabjes staan in de container en blijven dus in het stramien. Hij plakt
onder de header zodra de pagina langs de balk scrolt. */
.tabbar {
position: sticky; top: calc(var(--header-h) - 1px); z-index: 40;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.tabs { display: flex; flex-wrap: wrap; }
.tab {
/* gelijke ruimte boven en onder, zodat de balk net zo dik oogt als de
afstand tot het lijntje van de paginakop erboven */
padding: 16px 4px; margin-right: 28px; margin-bottom: -1px;
background: transparent; border: 0; border-bottom: 2px solid transparent;
cursor: pointer; font-size: .95rem; color: var(--text-subtle);
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:last-child { margin-right: 0; }
.tab:hover { color: var(--ink-950); }
.tab.is-active { color: var(--ink-950); border-color: var(--ink-950); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }
/* Twee locatieblokken: beeld links, gegevens
rechts, in een witte kaart met afgeronde hoeken. */
.storecards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.storecard {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--bg-alt);
border-radius: var(--radius-lg);
overflow: hidden;
}
.storecard__media { position: relative; aspect-ratio: 4 / 5; }
.storecard__media .ph { position: absolute; inset: 0; }
.storecard__body {
display: flex; flex-direction: column; align-items: flex-start;
padding: 32px;
}
.storecard__flag {
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-subtle); margin-bottom: 12px;
}
.storecard h3 { font-size: 1.375rem; margin-bottom: 14px; }
.storecard address,
.storecard__hours { font-style: normal; font-size: .95rem; color: var(--text-muted); }
.storecard address { margin-bottom: 14px; }
.storecard__hours { margin-bottom: 14px; }
.storecard__tel-row { font-size: .95rem; color: var(--ink-950); }
.storecard .btn { margin-top: auto; }
@media (max-width: 1100px) { .storecards { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
.storecard { grid-template-columns: 1fr; }
.storecard__media { aspect-ratio: 16 / 10; }
.storecard__body { padding: 24px; }
}
.kb-card {
background: var(--bg-alt);
border-radius: var(--radius); padding: 28px;
display: flex; flex-direction: column; gap: 12px;
}
.kb-card h3 { font-size: 1.25rem; }
.kb-card p { font-size: .9rem; }
.kb-card .link-arrow { margin-top: auto; align-self: flex-start; }
/* --------------------------------------------------------------------------
16. Formulieren
-------------------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field > label { font-size: .88rem; font-weight: 500; }
.field > label .req { color: var(--danger); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="search"], .field select, .field textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
font: inherit; font-size: .95rem;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: 0; border-color: var(--ink-700); box-shadow: 0 0 0 3px rgba(59, 83, 99, .1);
}
.field small { font-size: .78rem; color: var(--text-subtle); }
.field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23282929' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 42px; }
/* Groepen binnen een lang formulier (aanvraagpagina) */
.formgroup { border: 0; padding: 0; margin: 0; display: grid; gap: 20px; }
.formgroup + .formgroup { padding-top: 28px; border-top: 1px solid var(--line); }
.formgroup__title {
padding: 0;
font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 600; color: var(--accent);
}
.formgroup__hint { font-size: .88rem; color: var(--text-muted); margin-top: -8px; }
.checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
@media (max-width: 560px) { .checkgrid { grid-template-columns: 1fr; } }
.check--inline { align-items: flex-start; font-size: .88rem; }
.check--inline .check__box { margin-top: 2px; }
.check--inline .check__label { color: var(--text-muted); }
/* Bestand kiezen: het echte input-veld is verborgen, het label is de knop */
.upload {
display: flex; align-items: center; gap: 16px;
padding: 18px 20px;
border: 1px dashed var(--sand-300); border-radius: var(--radius);
background: var(--sand-50);
cursor: pointer;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.upload:hover { border-color: var(--sand-600); background: var(--sand-100); }
.upload__input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload__input:focus-visible + .upload__icon { outline: 2px solid var(--sand-600); outline-offset: 3px; }
.upload__icon {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--sand-200); color: var(--n-950);
}
.upload__text { display: grid; gap: 2px; min-width: 0; }
.upload__text strong { font-size: .95rem; font-weight: 500; overflow-wrap: anywhere; }
.upload__text small { font-size: .78rem; color: var(--text-subtle); }
.upload.is-filled { border-style: solid; border-color: var(--sand-400); }
/* Genummerde stappen in de zijkolom */
.steps { list-style: none; counter-reset: stap; display: grid; gap: 20px; margin-top: 20px; }
.steps li { display: grid; gap: 3px; padding-left: 44px; position: relative; }
.steps li::before {
counter-increment: stap; content: counter(stap);
position: absolute; left: 0; top: -2px;
width: 30px; height: 30px; border-radius: 50%;
background: var(--sand-200); color: var(--n-950);
display: flex; align-items: center; justify-content: center;
font-size: .82rem;
}
.steps strong { font-size: .95rem; font-weight: 500; }
.steps span { font-size: .88rem; color: var(--text-muted); }
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-block {
background: var(--bg-alt);
border-radius: var(--radius); padding: 28px;
}
.contact-block + .contact-block { margin-top: 20px; }
.contact-list { display: grid; gap: 16px; margin-top: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; font-size: .92rem; }
.contact-list svg { color: var(--accent); margin-top: 2px; flex: none; }
.contact-list strong { display: block; font-weight: 500; }
.contact-list span { color: var(--text-muted); font-size: .88rem; }
.hours { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .9rem; }
.hours td { padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-muted); }
.hours td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.hours tr:last-child td { border-bottom: 0; }
/* --------------------------------------------------------------------------
17. Winkelwagen-drawer
-------------------------------------------------------------------------- */
.cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
width: min(440px, 92vw);
background: var(--bg);
transform: translateX(100%);
transition: transform .35s var(--ease);
display: flex; flex-direction: column;
}
.cart-drawer.is-open { transform: none; }
.cart-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 24px; border-bottom: 1px solid var(--line);
}
.cart-drawer__head .drawer__title { font-family: var(--font-display); font-size: 1.4rem; margin: 0; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; display: grid; gap: 18px; align-content: start; }
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: start; }
.cart-line .ph { aspect-ratio: 1; border-radius: var(--radius-sm); }
.cart-line__name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
.cart-line__sku { font-size: .74rem; color: var(--text-subtle); margin-top: 3px; }
.cart-line__qty { font-size: .82rem; color: var(--text-muted); margin-top: 8px; }
.cart-line__remove {
margin-top: 8px;
border: 0; background: none; padding: 0 0 3px;
font-size: .76rem; color: var(--text-subtle); cursor: pointer;
}
.cart-drawer__foot { padding: 22px 24px; border-top: 1px solid var(--line); background: var(--bg-alt); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cart-total strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
/* --------------------------------------------------------------------------
18. Split-sectie (kenniscentrum)
-------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
19. Footer
Indeling: nieuwsbriefblok, vijf linkkolommen,
groot woordmerk en een onderbalk met taalkeuze links, copyright plus
betaalmethoden in het midden en social-iconen rechts.
-------------------------------------------------------------------------- */
.footer { background: var(--dark); color: rgba(255, 255, 255, .72); }
.footer a { color: rgba(255, 255, 255, .72); transition: color .2s var(--ease); }
.footer a:hover { color: #fff; }
.footer__top { padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 48px); }
.footer__grid {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 40px;
}
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (max-width: 620px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.footer__title {
font-family: var(--font-body);
font-size: .78rem; letter-spacing: .04em;
color: #fff; font-weight: 600; margin: 0 0 18px;
}
.footer__list { display: grid; gap: 10px; font-size: .88rem; }
.footer__list a {
position: relative;
display: inline-block;
padding-bottom: 2px;
}
.footer__list a::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 0; height: 1px;
background: currentColor;
transition: width .3s var(--ease);
}
.footer__list a:hover::after { width: 100%; }
/* Onderbalk */
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
padding-block: 24px 28px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.footer__bottom-left { justify-self: start; }
/* In de onderbalk is beneden geen ruimte: het menu klapt omhoog open
en lijnt links uit, zodat het binnen beeld blijft. */
.footer .langswitch__menu {
top: auto;
bottom: calc(100% + 10px);
left: 0; right: auto;
color: var(--text);
}
.footer .langswitch__menu a,
.footer .langswitch__item { color: var(--text); }
.footer .langswitch__item small { color: var(--text-subtle); }
.footer .langswitch__toggle { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .8); }
.footer .langswitch__toggle:hover { border-color: rgba(255, 255, 255, .6); }
@media (max-width: 1000px) {
.footer .langswitch__menu { left: 50%; transform: translateX(-50%) translateY(-6px); }
.footer .langswitch.is-open .langswitch__menu { transform: translateX(-50%); }
}
.footer__bottom-center { justify-self: center; text-align: center; display: grid; gap: 12px; }
.footer__bottom-right { justify-self: end; }
.footer__copy {
margin: 0;
font-size: .78rem;
color: rgba(255, 255, 255, .55);
}
@media (max-width: 1000px) {
.footer__bottom {
grid-template-columns: 1fr;
justify-items: center;
gap: 22px;
text-align: center;
}
.footer__bottom-left, .footer__bottom-right { justify-self: center; }
}
.payments {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.payments li { display: flex; align-items: center; }
.payments svg { display: block; width: 38px; height: 24px; border-radius: 3px; }
.socials { display: flex; gap: 10px; }
.icon-ring {
display: inline-flex;
padding: 4px;
border-radius: var(--radius-pill);
outline: 1px solid var(--sand-200);
outline-offset: -1px;
transition: outline-color .25s var(--ease);
}
.icon-ring__fill {
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--sand-200);
color: var(--n-950);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .25s var(--ease);
}
.icon-ring:hover { outline-color: var(--n-50); }
.icon-ring:hover .icon-ring__fill { background: var(--n-50); }
.icon-ring svg { width: 18px; height: 18px; }
/* --------------------------------------------------------------------------
20. Toast
-------------------------------------------------------------------------- */
/* Korte bevestiging onderin beeld, bijvoorbeeld na "in winkelwagen". Meerdere
meldingen stapelen in het grid en verdwijnen vanzelf; zie toast() in app.js. */
.toast-area {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: grid;
gap: 10px;
width: max-content;
max-width: 92vw;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border-radius: var(--radius-pill);
background: var(--ink-950);
color: #fff;
font-size: 0.88rem;
box-shadow: var(--shadow-lg);
animation: toast-in .3s var(--ease);
}
.toast svg { color: var(--sand-400); }
@keyframes toast-in {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
21. Lege staat
-------------------------------------------------------------------------- */
/* Eén opmaak voor drie situaties: geen filterresultaat in de shop, nog geen
favorieten, en de 404-pagina. */
.empty-state { text-align: center; padding: clamp(48px, 8vw, 96px) 20px; }
.empty-state__icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--sand-100);
color: var(--sand-600);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.empty-state h2 { font-size: 1.5rem; margin-bottom: 10px; }
.empty-state p { margin-inline: auto; max-width: 44ch; margin-bottom: 26px; }
/* --------------------------------------------------------------------------
22. Responsive header
-------------------------------------------------------------------------- */
/* Onder 1080px vervallen de horizontale navigatie en het mega-menu. Dat laatste
is breder dan het scherm en veroorzaakte anders horizontaal scrollen; de
hamburger opent daar de drawer met dezelfde menustructuur. */
@media (max-width: 1080px) {
:root { --header-h: 76px; }
.nav, .langswitch--header, .megamenu { display: none; }
.burger { display: inline-flex; }
.header__inner { gap: 16px; }
.header__actions { margin-left: auto; }
}
@media (max-width: 1100px) {
:root { --gutter: 32px; }
}
@media (max-width: 480px) {
:root { --gutter: 18px; }
.logo__img { height: 34px; }
.icon-btn { width: 38px; height: 38px; }
}
/* --------------------------------------------------------------------------
23. Print
-------------------------------------------------------------------------- */
@media print {
.header, .footer, .searchpanel, .cart-drawer, .mobilenav {
display: none !important;
}
body { background: #fff; }
}
/* --------------------------------------------------------------------------
24. Announcement-balk
-------------------------------------------------------------------------- */
.announce {
height: var(--announce-h);
background: var(--ink-950);
color: rgba(255, 255, 255, 0.88);
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.announce .container {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
height: 100%;
}
/* Alleen deze strook schuift; de pijltjes ernaast blijven staan. */
.announce__viewport { flex: 1 1 0%; overflow: hidden; text-align: center; max-width: 620px; }
.announce__track { display: flex; transition: transform .5s var(--ease); }
.announce__slide {
flex: 0 0 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.announce__slide strong { color: var(--sand-400); font-weight: 500; }
.announce__nav {
width: 26px;
height: 26px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0px;
background: transparent;
color: inherit;
cursor: pointer;
border-radius: 50%;
opacity: 0.6;
transition: opacity .2s var(--ease), background .2s var(--ease);
}
.announce__nav:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
/* --------------------------------------------------------------------------
25. Header — logo links, navigatie gecentreerd
-------------------------------------------------------------------------- */
.header--center .header__inner { gap: 24px; }
.header--center .nav {
margin: 0px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.header--center .header__actions { margin-left: auto; }
@media (max-width: 1180px) {
.header--center .nav { position: static; transform: none; }
}
/* --------------------------------------------------------------------------
26. Mega-menu — brede opmaak
-------------------------------------------------------------------------- */
.megamenu--wide .megamenu__inner {
grid-template-columns: 180px repeat(3, minmax(0px, 1fr)) 340px;
gap: 32px;
padding-block: 40px 44px;
}
.megamenu__primary { display: grid; gap: 4px; align-content: start; }
.megamenu__primary a {
font-family: var(--font-display);
font-size: 1.22rem;
padding: 5px 0px;
transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.megamenu__primary a:hover { color: var(--sand-700); }
.megamenu__promo {
position: relative;
overflow: hidden;
border-radius: var(--radius);
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 28px;
color: #fff;
}
.megamenu__promo .ph { position: absolute; inset: 0px; z-index: 0; }
/* Verloop over de foto, zodat de witte tekst op elke afbeelding leesbaar blijft. */
.megamenu__promo::after {
content: "";
position: absolute;
inset: 0px;
z-index: 1;
background: linear-gradient(105deg, rgba(31, 42, 51, 0.72) 0%, rgba(31, 42, 51, 0.28) 62%, transparent 100%);
}
.megamenu__promo > :not(.ph) { position: relative; z-index: 2; }
.megamenu__promo .eyebrow { color: var(--sand-300); }
.megamenu__promo-title {
font-family: var(--font-display);
color: #fff;
font-size: 1.85rem;
margin-bottom: 20px;
max-width: 8em;
}
.megamenu__promo .btn { margin-top: auto; align-self: flex-start; }
.megamenu__inner--brands { display: block; padding-block: 40px 44px; }
.brandgrid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 20px; }
@media (max-width: 1240px) {
.brandgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1150px) {
.brandgrid { grid-template-columns: repeat(2, 1fr); }
}
.brandtile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 220px;
padding: 22px;
border-radius: var(--radius);
overflow: hidden;
color: #fff;
}
.brandtile .ph-img {
position: absolute;
inset: 0px;
z-index: 0;
transition: transform .6s var(--ease);
}
.brandtile::after {
content: "";
position: absolute;
inset: 0px;
z-index: 1;
background: linear-gradient(to top, rgba(31, 42, 51, 0.9) 0%, rgba(31, 42, 51, 0.55) 45%, rgba(31, 42, 51, 0.18) 100%);
transition: background .3s var(--ease);
}
.brandtile > :not(.ph-img) { position: relative; z-index: 2; }
.brandtile:hover .ph-img { transform: scale(1.05); }
.brandtile:hover::after {
background: linear-gradient(to top, rgba(31, 42, 51, 0.94) 0%, rgba(31, 42, 51, 0.66) 45%, rgba(31, 42, 51, 0.3) 100%);
}
.brandtile__name {
font-family: var(--font-display);
font-size: 1.5rem;
line-height: 1.15;
color: #fff;
margin-bottom: 4px;
text-shadow: rgba(31, 42, 51, 0.4) 0px 1px 8px;
}
.brandtile__desc {
font-size: 0.82rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.84);
text-shadow: rgba(31, 42, 51, 0.4) 0px 1px 6px;
}
.megamenu__brandfoot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.megamenu__brandfoot p { font-size: 0.88rem; margin: 0px; max-width: 60ch; }
@media (max-width: 1400px) {
.megamenu--wide .megamenu__inner { grid-template-columns: 170px repeat(3, 1fr); }
.megamenu--wide .megamenu__promo { display: none; }
}
@media (max-width: 1150px) {
.megamenu--wide .megamenu__inner { grid-template-columns: repeat(3, 1fr); }
}
/* --------------------------------------------------------------------------
27. Hero-slideshow
-------------------------------------------------------------------------- */
/* De hero vult precies het scherm onder de announcement-balk én de header.
Beide moeten van 100vh af: met alleen de header erbij vielen de hairline en
de paginabolletjes net onder de vouw. */
.heroshow {
position: relative;
overflow: hidden;
background: var(--ink-950);
height: calc(100vh - var(--header-h) - var(--announce-h));
min-height: 520px;
}
.heroshow__track { display: flex; height: 100%; transition: transform .8s var(--ease); }
.heroshow__slide {
position: relative;
flex: 0 0 100%;
height: 100%;
display: flex;
align-items: flex-end;
}
.heroshow__slide .ph, .heroshow__slide .ph-img {
position: absolute;
inset: 0px;
height: 100%;
}
.heroshow__slide::after {
content: "";
position: absolute;
inset: 0px;
background: linear-gradient(to top, rgba(31, 42, 51, 0.6) 0%, rgba(31, 42, 51, 0.12) 38%, transparent 62%), rgba(0, 0, 0, 0.1);
}
.heroshow__body {
position: relative;
z-index: 2;
width: 100%;
padding-bottom: 88px;
color: #fff;
}
.heroshow__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.heroshow__body .badge-pill {
background: rgba(255, 255, 255, 0.92);
color: var(--ink-950);
margin-bottom: 16px;
}
.heroshow__title {
color: #fff;
font-size: clamp(2.4rem, 4vw, 4.125rem);
line-height: 1.2;
max-width: 14ch;
margin: 0px;
}
.heroshow__body .btn { flex: 0 0 auto; }
.heroshow__rule { height: 1px; margin-top: 40px; background: rgba(255, 255, 255, 0.35); }
.heroshow__dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 24px;
z-index: 3;
display: flex;
gap: 2px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
padding: 3px;
border-radius: var(--radius-pill);
}
.heroshow__dot {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0px;
background: transparent;
color: rgba(240, 240, 240, 0.9);
font-family: var(--font-body);
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .25s var(--ease), color .25s var(--ease);
}
.heroshow__dot:hover { background: rgba(255, 255, 255, 0.18); }
.heroshow__dot[aria-current="true"] { background: #fff; color: var(--n-950); }
.heroshow__dot svg {
position: absolute;
inset: 0px;
width: 100%;
height: 100%;
transform: rotate(-90deg);
pointer-events: none;
}
/* De omtrek van een cirkel met r=16 is 100,53. Die waarde staat zowel in
dasharray als in dashoffset, zodat de ring bij dashoffset 0 precies rond is. */
.heroshow__dot circle {
fill: none;
stroke: var(--n-950);
stroke-width: 2;
stroke-dasharray: 100.53;
stroke-dashoffset: 100.53;
}
/* Deze animatie is tegelijk de klok van de slider: initHero() schakelt door op
het animationend van de ring. Hover pauzeert de ring en dus ook het
doorschakelen, zodat beeld en timing niet uit elkaar kunnen lopen. */
.heroshow__dot[aria-current="true"] circle {
animation: hero-dot-progress var(--hero-interval, 6s) linear forwards;
}
.heroshow:hover .heroshow__dot circle { animation-play-state: paused; }
@keyframes hero-dot-progress {
100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.heroshow__dot circle { animation: none !important; }
}
@media (max-width: 760px) {
.heroshow { min-height: 480px; }
.heroshow__body { padding-bottom: 96px; }
.heroshow__row { flex-direction: column; align-items: flex-start; gap: 24px; }
.heroshow__title { max-width: none; }
.heroshow__rule { margin-top: 28px; }
}
/* --------------------------------------------------------------------------
28. Productkaart — zonder kader
-------------------------------------------------------------------------- */
.product-card--bare {
background: transparent;
border: 0px;
border-radius: 0px;
overflow: visible;
}
.product-card--bare .product-card__media {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--sand-100);
}
.product-card--bare .product-card__media .ph { transition: transform .7s var(--ease); }
.product-card--bare:hover .product-card__media .ph { transform: scale(1.04); }
.product-card--bare .product-card__body { padding: 16px 2px 0px; }
.product-card--bare .product-card__name { font-size: 1.45rem; margin-bottom: 5px; }
.product-card--bare .product-card__foot { padding-top: 6px; }
/* Koopknop die bij hover over het beeld omhoog in beeld schuift. */
.card-action {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 3;
opacity: 0;
transform: translateY(10px);
transition: opacity .28s var(--ease), transform .28s var(--ease),
outline-color .3s var(--ease);
}
.product-card:hover .card-action, .card-action:focus-visible { opacity: 1; transform: none; }
.card-action[disabled] { opacity: 1; transform: none; }
/* Zonder hover (touch) heeft die knop geen trigger, dus daar staat hij vast. */
/* Zonder hover (touch) heeft die knop geen trigger, dus daar staat hij vast. */
@media (hover: none) {
.card-action { opacity: 1; transform: none; }
}
.flag--sale { background: var(--sale); }
.price--sale { color: var(--sale); }
/* --------------------------------------------------------------------------
29. Carousel — rij met navigatieknoppen
-------------------------------------------------------------------------- */
.carousel { position: relative; }
/* De rij loopt bewust door tot buiten de container: een negatieve marge rechts
met dezelfde padding ernaast, zodat de laatste kaart half buiten beeld valt.
Slepen met de muis regelt enableDragScroll() in app.js. */
.carousel__track {
display: flex;
gap: 22px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 4px;
margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
padding-right: max(var(--gutter), (100vw - var(--container)) / 2);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: 0 0 clamp(210px, 22vw, 290px); scroll-snap-align: start; }
.carousel__track { align-items: stretch; cursor: grab; }
.carousel__track.is-grabbing { cursor: grabbing; user-select: none; }
.carousel__track.is-grabbing a { pointer-events: none; }
.carousel__nav {
display: flex;
align-items: center;
gap: 8px;
padding: 4px;
border-radius: var(--radius-pill);
outline: 1px solid var(--sand-200);
outline-offset: -1px;
}
.carousel__btn {
width: 40px;
height: 40px;
border: 0px;
border-radius: var(--radius-pill);
background: var(--sand-200);
color: var(--n-950);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity .15s var(--ease);
}
.carousel__btn:hover { opacity: 0.8; }
.carousel__btn[disabled] { opacity: 0.3; pointer-events: none; }
/* --------------------------------------------------------------------------
30. Producttabs
-------------------------------------------------------------------------- */
.ptabs__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 18px;
margin-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.ptabs__list { display: flex; gap: 30px; flex-wrap: wrap; }
.ptabs__tab {
position: relative;
background: transparent;
border: 0px;
cursor: pointer;
padding: 4px 0px;
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
color: var(--n-400);
transition: color .25s var(--ease);
}
.ptabs__tab::after {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: -19px;
height: 2px;
background: var(--ink-950);
transform: scaleX(0);
transform-origin: left center;
transition: transform .3s var(--ease);
}
.ptabs__tab:hover { color: var(--n-700); }
.ptabs__tab.is-active { color: var(--ink-950); }
.ptabs__tab.is-active::after { transform: scaleX(1); }
.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; animation: fade-up .4s var(--ease); }
@keyframes fade-up {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
31. Productbundel met hotspots
-------------------------------------------------------------------------- */
.bundle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
@media (max-width: 900px) {
.bundle { grid-template-columns: 1fr; }
}
.bundle__media {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
overflow: hidden;
}
.bundle__media .ph { position: absolute; inset: 0px; }
/* Punt op de bundelfoto. De tooltip verschijnt bij hover én bij focus, zodat
hij ook met het toetsenbord te bereiken is. */
.hotspot {
position: absolute;
z-index: 2;
overflow: visible;
width: 26px;
height: 26px;
border-radius: 50%;
border: 0px;
cursor: pointer;
padding: 0px;
background: rgba(255, 255, 255, 0.92);
box-shadow: rgba(31, 42, 51, 0.25) 0px 2px 10px;
display: grid;
place-items: center;
}
.hotspot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ink-950);
}
.hotspot::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.7);
animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
0% { transform: scale(0.9); opacity: 0.9; }
70% { transform: scale(1.35); opacity: 0; }
100% { opacity: 0; }
}
.hotspot__tip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translate(-50%, 6px);
z-index: 3;
display: grid;
gap: 2px;
padding: 10px 14px;
border-radius: var(--radius);
background: var(--n-0);
box-shadow: var(--shadow);
white-space: nowrap;
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.hotspot__tip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-image: none;
border-top-color: var(--n-0);
}
.hotspot__step {
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.hotspot__name {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--ink-950);
}
.hotspot:hover .hotspot__tip, .hotspot:focus-visible .hotspot__tip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0px);
}
/* Voor punten bovenin de foto klapt de tooltip naar beneden open. */
.hotspot--below .hotspot__tip { bottom: auto; top: calc(100% + 12px); }
.hotspot--below .hotspot__tip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--n-0);
}
.badge-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--radius-pill);
background: var(--sand-100);
color: var(--sand-800);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 18px;
}
.badge-pill svg { width: 13px; height: 13px; }
.bundle__panel {
background: var(--bg-alt);
border-radius: var(--radius-lg);
padding: 26px;
margin-top: 24px;
}
.bundle__panel-title { font-size: 0.82rem; color: var(--text-subtle); margin-bottom: 18px; }
.bundle__line {
display: grid;
grid-template-columns: 54px 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 0px;
border-bottom: 1px solid var(--line-soft);
}
.bundle__line .ph { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.bundle__line-name { font-size: 0.95rem; font-weight: 500; margin-bottom: 6px; }
.bundle__line-price { font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.bundle__select {
appearance: none;
font-size: 0.78rem;
color: var(--text-muted);
padding: 5px 26px 5px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23797e7d' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center no-repeat transparent;
cursor: pointer;
}
.bundle__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 20px 0px 22px;
}
.bundle__total-amount { font-family: var(--font-display); font-size: 1.7rem; }
.bundle__save {
font-size: 0.74rem;
color: var(--sale);
background: rgba(168, 68, 58, 0.08);
padding: 4px 10px;
border-radius: var(--radius-pill);
}
/* --------------------------------------------------------------------------
32. Voorjaarsactie — banner en kaarten
-------------------------------------------------------------------------- */
.sale-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 1000px) {
.sale-layout { grid-template-columns: 1fr; }
}
/* Geen meegroeiende kolom, maar een kaart van vaste hoogte
die blijft hangen terwijl de productkaarten ernaast doorscrollen. Top en
hoogte zijn zo gekozen dat de onderkant gelijk eindigt met de productkolom. */
.sale-banner {
position: sticky;
top: calc(var(--header-h) + 16px);
height: calc(100vh - var(--header-h) - 32px);
min-height: 560px;
overflow: hidden;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
color: #fff;
}
.sale-banner .ph { position: absolute; inset: 0px; z-index: 0; }
.sale-banner::after {
content: "";
position: absolute;
inset: 0px;
z-index: 1;
background: linear-gradient(rgba(31, 42, 51, 0.34) 0%, rgba(31, 42, 51, 0.62) 100%);
}
.sale-banner__inner {
position: relative;
z-index: 2;
flex: 1 1 0%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 40px 28px 0px;
text-align: center;
}
.sale-banner__foot { position: relative; z-index: 2; flex: 0 0 auto; padding: 28px; }
.sale-banner .eyebrow { color: rgba(255, 255, 255, 0.85); }
.sale-banner h2 { color: #fff; margin-bottom: 26px; }
@media (max-width: 1000px) {
.sale-banner { position: static; height: auto; min-height: 520px; }
.sale-banner__inner { padding-block: 56px; }
}
.countdown {
display: flex;
gap: 8px;
align-items: flex-start;
justify-content: center;
flex-wrap: nowrap;
margin-bottom: 8px;
}
.countdown__unit { min-width: 58px; }
.countdown__num {
display: block;
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.6vw, 2.6rem);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.countdown__label {
display: block;
margin-top: 8px;
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.78;
}
.countdown__sep { font-size: 1.5rem; line-height: 1.1; opacity: 0.5; }
.sale-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 480px) {
.sale-grid { gap: 14px; }
}
/* --------------------------------------------------------------------------
33. Doorlopende bannerbalk (marquee)
-------------------------------------------------------------------------- */
.marquee {
background: rgb(192, 207, 198);
border: 0px;
overflow: hidden;
padding-block: 22px;
}
/* De rij staat twee keer in de HTML en de animatie schuift precies één kopie
op. Daardoor is de lus naadloos, zonder sprong aan het eind. */
.marquee__track {
display: flex;
align-items: center;
gap: 46px;
width: max-content;
animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.7vw, 1.5rem);
white-space: nowrap;
color: var(--sage-900);
}
.marquee__sep { color: var(--sage-500); font-size: 1rem; flex: 0 0 auto; }
@keyframes marquee {
0% { transform: translateX(0px); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* --------------------------------------------------------------------------
34. Collecties
-------------------------------------------------------------------------- */
.collections { background: transparent; }
.collections__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
@media (max-width: 900px) {
.collections__inner { grid-template-columns: 1fr; }
}
.collist { border-top: 1px solid var(--line); }
.collist__item { border-bottom: 1px solid var(--line); }
.collist__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 20px 4px 20px 0px;
background: transparent;
border: 0px;
cursor: pointer;
text-align: left;
color: var(--ink-950);
}
.collist__name {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.2vw, 2.5rem);
line-height: 1.05;
transition: font-style .2s var(--ease), padding-left .3s var(--ease);
}
.collist__count {
font-family: var(--font-body);
font-size: 0.7rem;
vertical-align: super;
margin-left: 8px;
color: var(--text-subtle);
}
.collist__arrow {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0px;
background: var(--sand-200);
color: var(--n-950);
outline: 1px solid var(--sand-200);
outline-offset: 3px;
transition: background .25s var(--ease), color .25s var(--ease), outline-color .25s var(--ease);
}
.collist__item.is-active .collist__name { font-style: italic; padding-left: 4px; }
.collist__item.is-active .collist__arrow, .collist__link:hover .collist__arrow {
background: var(--ink-950);
color: #fff;
outline-color: var(--ink-950);
}
.collections__media {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
overflow: hidden;
}
/* Alle beelden liggen op elkaar; initCollections() zet .is-active op het beeld
dat bij de rij hoort waar de muis overheen gaat. */
.collections__media .ph {
position: absolute;
inset: 0px;
opacity: 0;
transition: opacity .5s var(--ease);
}
.collections__media .ph.is-active { opacity: 1; }
/* --------------------------------------------------------------------------
35. Video stories
-------------------------------------------------------------------------- */
.stories__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
justify-items: center;
gap: clamp(16px, 2vw, 32px);
padding-block: 8px;
}
.stories__track::-webkit-scrollbar { display: none; }
.story {
width: 100%;
max-width: 140px;
background: transparent;
border: 0px;
cursor: pointer;
padding: 0px;
text-align: center;
}
@media (max-width: 900px) {
.stories__track {
display: flex;
overflow-x: auto;
scrollbar-width: none;
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
}
.story { flex: 0 0 auto; width: clamp(88px, 18vw, 118px); }
}
/* Ring en binnenvlak zijn spans. Zonder een expliciete display klappen die tot
een paar pixels in en verdwijnt de bel. */
.story__ring {
display: block;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
padding: 3px;
background: linear-gradient(140deg, var(--sand-400), var(--sand-600) 45%, var(--sage-300));
transition: transform .3s var(--ease);
}
.story:hover .story__ring { transform: scale(1.05); }
.story__inner {
display: block;
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--bg);
}
.story__inner .ph { position: absolute; inset: 0px; }
.story__inner .ph-img { position: absolute; inset: 0px; }
.story__play {
position: absolute;
right: 4px;
bottom: 4px;
z-index: 2;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ink-950);
color: #fff;
display: grid;
place-items: center;
border: 2px solid var(--bg);
}
.story__play svg { width: 10px; height: 10px; }
.story__label { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--n-700); }
.story-modal {
position: fixed;
inset: 0px;
z-index: 130;
background: rgba(31, 42, 51, 0.82);
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--ease), visibility .25s;
padding: 24px;
}
.story-modal.is-open { opacity: 1; visibility: visible; }
.story-modal__sheet {
position: relative;
width: min(380px, 92vw);
aspect-ratio: 9 / 16;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--ink-900);
transform: scale(0.96);
transition: transform .3s var(--ease);
}
.story-modal.is-open .story-modal__sheet { transform: none; }
.story-modal__sheet .ph { position: absolute; inset: 0px; }
.story-modal__bar {
position: absolute;
top: 14px;
left: 14px;
right: 14px;
z-index: 3;
height: 3px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
/* Voortgangsbalkje boven de video; loopt mee met de duur van de story. */
.story-modal__bar span {
display: block;
height: 100%;
width: 0px;
background: #fff;
}
.story-modal.is-open .story-modal__bar span {
animation: 6s linear 0s 1 normal forwards running story-progress;
}
@keyframes story-progress {
100% { width: 100%; }
}
.story-modal__close {
position: absolute;
top: 26px;
right: 14px;
z-index: 4;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
}
.story-modal__foot {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 3;
padding: 60px 20px 24px;
background: linear-gradient(to top, rgba(31, 42, 51, 0.92) 0%, rgba(31, 42, 51, 0.7) 45%, transparent 100%);
color: #fff;
}
.story-modal__foot h2 {
color: #fff;
margin-bottom: 14px;
text-shadow: rgba(31, 42, 51, 0.5) 0px 1px 6px;
}
/* --------------------------------------------------------------------------
36. Testimonials
-------------------------------------------------------------------------- */
.testimonials { background: transparent; }
/* Verhouding van de kaart is 1,52. De foto staat in 3:4 en
bepaalt daarmee de hoogte van de kaart; de tekstkolom rekt mee. */
.tcard {
background: var(--bg-alt);
border-radius: var(--radius-lg);
padding: 24px;
display: grid;
grid-template-columns: 47.5% 1fr;
gap: 24px;
align-items: stretch;
}
@media (max-width: 560px) {
.tcard { grid-template-columns: 42% 1fr; gap: 16px; padding: 16px; }
}
.tcard__media {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
border-radius: var(--radius);
overflow: hidden;
}
.tcard__media .ph { position: absolute; inset: 0px; }
.tcard__body { display: flex; flex-direction: column; padding: 0px 6px 0px 0px; }
.stars { display: flex; gap: 3px; color: var(--sand-600); margin-bottom: 14px; }
.stars svg { width: 14px; height: 14px; fill: currentcolor; }
.tcard__quote {
font-size: 0.95rem;
line-height: 1.6;
color: var(--n-700);
margin-bottom: 14px;
}
.tcard__author { font-size: 0.84rem; color: var(--text-subtle); margin-bottom: 18px; }
.tcard__product {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
}
.tcard__product .ph {
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
flex: 0 0 auto;
}
.tcard__product-name { font-size: 0.84rem; font-weight: 500; }
.tcard__product .price { font-size: 0.88rem; }
/* Zelfde sleepgedrag als de productcarousels; de cursor verandert mee. */
[data-tcarousel] { align-items: stretch; cursor: grab; }
[data-tcarousel].is-grabbing { cursor: grabbing; user-select: none; }
[data-tcarousel].is-grabbing a { pointer-events: none; }
[data-tcarousel] > * { flex: 0 0 calc(50% - 11px); height: auto; }
@media (max-width: 900px) {
[data-tcarousel] > * { flex: 0 0 min(520px, 88vw); }
}
@media (max-width: 560px) {
[data-tcarousel] > * { flex: 0 0 min(340px, 88vw); }
}
.tslider { position: relative; }
.tslider__btn {
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-50%);
width: 48px;
height: 48px;
border: 1px solid var(--ink-950);
border-radius: var(--radius-pill);
background: var(--ink-950);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity .2s var(--ease), background .2s var(--ease);
}
.tslider__btn:hover { opacity: 0.85; }
.tslider__btn[disabled] { opacity: 0.3; pointer-events: none; }
.tslider__btn--prev { left: calc(-1 * var(--gutter) + 6px); }
.tslider__btn--next { right: calc(-1 * var(--gutter) + 6px); }
@media (max-width: 1100px) {
.tslider__btn { display: none; }
}
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 32px; }
.dots button {
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
border: 0px;
background: var(--sand-300);
cursor: pointer;
padding: 0px;
transition: width .3s var(--ease), background .3s var(--ease);
}
.dots button[aria-current="true"] { width: 26px; background: var(--ink-950); }
/* --------------------------------------------------------------------------
37. Accenten: cirkel, marker en CTA-blok
-------------------------------------------------------------------------- */
.circle-accent { position: relative; white-space: nowrap; padding: 0px 0.18em; }
.circle-accent::after {
content: "";
position: absolute;
inset: -0.26em -0.22em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cellipse cx='100' cy='30' rx='95' ry='25' stroke='%23c6b48a' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center center / 100% 100% no-repeat;
}
/* isolation: isolate is hier nodig. De veeg staat op z-index -1 zodat hij
achter de tekst valt, maar zou zonder eigen stapelcontext ook achter de
achtergrond van het CTA-blok verdwijnen. */
.marker-accent {
position: relative;
isolation: isolate;
padding: 0.04em 0.3em;
box-decoration-break: clone;
}
.marker-accent::before {
content: "";
position: absolute;
inset: 0px;
z-index: -1;
border-radius: 2px;
background: var(--sand-200);
transform: scaleX(0);
transform-origin: left center;
}
/* De veeg loopt pas wanneer de sectie in beeld scrollt. */
.reveal.is-visible .marker-accent::before {
animation: marker-sweep .7s var(--ease) .35s forwards;
}
@keyframes marker-sweep {
100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.marker-accent::before {
transform: scaleX(1);
animation: none;
}
}
.cta-block {
background: rgb(192, 207, 198);
border-radius: var(--radius-lg);
padding: clamp(40px, 6vw, 72px) 24px;
text-align: center;
}
.cta-block h2 { margin-bottom: 12px; }
.cta-block p { margin-bottom: 28px; }
/* --------------------------------------------------------------------------
38. Shop the feed
-------------------------------------------------------------------------- */
.feed__track {
display: flex;
gap: 16px;
overflow-x: auto;
scrollbar-width: none;
margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
padding-right: max(var(--gutter), (100vw - var(--container)) / 2);
}
.feed__track::-webkit-scrollbar { display: none; }
.feed__item {
position: relative;
flex: 0 0 clamp(210px, 21vw, 280px);
aspect-ratio: 4 / 5;
border-radius: var(--radius);
overflow: hidden;
display: block;
}
.feed__item .ph { position: absolute; inset: 0px; transition: transform .6s var(--ease); }
.feed__item:hover .ph { transform: scale(1.05); }
/* Verloop, productlabel en plusknop komen alle drie pas bij hover in beeld. */
.feed__item::after {
content: "";
position: absolute;
inset: 0px;
background: rgba(31, 42, 51, 0.28);
opacity: 0;
transition: opacity .3s var(--ease);
}
.feed__item:hover::after { opacity: 1; }
.feed__tag {
position: absolute;
z-index: 2;
left: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.94);
font-size: 0.76rem;
opacity: 0;
transform: translateY(8px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.feed__item:hover .feed__tag { opacity: 1; transform: none; }
.feed__plus {
position: absolute;
z-index: 2;
right: 16px;
top: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--ink-950);
display: grid;
place-items: center;
outline: rgba(255, 255, 255, 0.7) solid 1px;
outline-offset: 3px;
transition: background .25s var(--ease), color .25s var(--ease), outline-color .25s var(--ease);
}
.feed__plus svg { width: 16px; height: 16px; }
.feed__item:hover .feed__plus {
background: var(--ink-950);
color: #fff;
outline-color: var(--ink-950);
}
/* --------------------------------------------------------------------------
39. Footer — brede opmaak
-------------------------------------------------------------------------- */
.footer--wide { background: var(--ink-950); overflow: hidden; }
.footer__signup {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 44px);
/* Het blok loopt over de volle container;
alleen de kolom met het
invoerveld is smal gehouden. */
display: grid;
grid-template-columns: 1fr minmax(0, 420px);
gap: 32px;
align-items: center;
margin-bottom: 56px;
}
@media (max-width: 860px) {
.footer__signup { grid-template-columns: 1fr; }
}
.footer__signup h3 {
color: #fff;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
max-width: 16ch;
}
.footer__signup-form { display: flex; gap: 12px; flex-wrap: wrap; }
.footer__signup-form input {
flex: 1 1 0%;
min-width: 220px;
padding: 14px 20px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
font-size: 0.92rem;
}
.footer__signup-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer__signup-form input:focus { outline: 0px; border-color: rgba(255, 255, 255, 0.55); }
.footer__signup small {
display: block;
margin-top: 14px;
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.45);
line-height: 1.5;
}
.footer__wordmark {
font-family: var(--font-display);
font-size: clamp(3rem, 13.5vw, 16rem);
line-height: .85;
letter-spacing: -.02em;
color: rgba(255, 255, 255, .1);
text-align: center;
white-space: nowrap;
user-select: none;
margin-block: clamp(16px, 3vw, 40px) clamp(8px, 2vw, 24px);
}
/* --------------------------------------------------------------------------
40. Scroll-reveal
-------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible {
opacity: 1; transform: none;
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
}
/* ==========================================================================
DEEL 3 — Productdetail, FAQ-sectie, 404 en inloggen
Indeling: miniaturenrail links, hoofdbeeld, koopkaart rechts.
========================================================================== */
/* --------------------------------------------------------------------------
41. Productdetail — miniaturenrail
Miniaturen in een strook links, groot beeld ernaast, en alle koopinformatie
in een kaart aan de rechterkant.
-------------------------------------------------------------------------- */
.pdp--rail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
gap: clamp(24px, 3vw, 48px);
align-items: start;
}
@media (max-width: 1000px) { .pdp--rail { grid-template-columns: 1fr; } }
.pdp__gallery--rail {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
@media (max-width: 620px) {
.pdp__gallery--rail { grid-template-columns: 1fr; }
.pdp__gallery--rail .pdp__thumbs { grid-auto-flow: column; grid-template-columns: none; }
}
.pdp__thumbs--rail {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.pdp__thumb {
aspect-ratio: 1; padding: 0; overflow: hidden;
border-radius: var(--radius-sm); cursor: pointer;
border: 1px solid transparent; background: var(--sand-100);
transition: border-color .2s var(--ease);
}
.pdp__thumb:hover { border-color: var(--sand-400); }
.pdp__thumb.is-active { border-color: var(--ink-950); }
.pdp__thumb .ph-img { aspect-ratio: 1; }
.pdp__main {
aspect-ratio: 1;
border-radius: var(--radius-lg);
background: var(--sand-100);
overflow: hidden;
}
/* Koopkaart rechts */
.pdp__card {
background: var(--n-0);
border-radius: var(--radius-lg);
padding: clamp(22px, 2.2vw, 32px);
position: sticky;
top: calc(var(--header-h) + 20px);
}
@media (max-width: 1000px) { .pdp__card { position: static; } }
.pdp__card .pdp__brand { margin-bottom: 10px; color: var(--text-subtle); }
.pdp__card .pdp__brand a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.pdp__card .pdp__brand a:hover { color: var(--ink-950); }
.pdp__card h1 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 12px; }
.pdp__card .pdp__meta { margin-bottom: 18px; }
.pdp__shipnote {
font-size: .82rem; color: var(--text-subtle);
margin: 0 0 18px;
}
.pdp__shipnote a { text-decoration: underline; text-underline-offset: 3px; }
.pdp__intro { font-size: .95rem; margin-bottom: 20px; }
/* Blok met betaalmethoden onder de koopknop */
.pdp__secure {
margin-top: 20px;
padding: 18px;
border-radius: var(--radius);
background: var(--n-50);
text-align: center;
}
.pdp__secure p {
margin: 0 0 12px;
font-size: .86rem; font-weight: 500; color: var(--ink-950);
}
.pdp__secure .payments { gap: 8px; }
.pdp__secure .payments svg { width: 34px; height: 22px; }
/* --------------------------------------------------------------------------
42. FAQ-sectie (productpagina)
-------------------------------------------------------------------------- */
.faq-split {
display: grid;
grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; gap: 28px; } }
.faq-split h2 { margin-bottom: 14px; }
.faq-split p { margin-bottom: 26px; }
/* Accordion met losse vakken */
/* Strook met bezorg- en service-usp's */
.usp-strip {
background: var(--sage-200);
padding-block: 40px;
}
.usp-strip__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
text-align: center;
}
@media (max-width: 860px) { .usp-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.usp-strip__item svg { margin: 0 auto 10px; color: var(--sage-700); width: 26px; height: 26px; }
.usp-strip__item strong { display: block; font-size: .95rem; margin-bottom: 4px; color: var(--ink-950); }
.usp-strip__item span { font-size: .84rem; color: var(--n-700); }
/* --------------------------------------------------------------------------
43. Foutpagina
-------------------------------------------------------------------------- */
.centered-page {
display: flex; align-items: center; justify-content: center;
text-align: center;
padding-block: clamp(80px, 12vw, 160px);
}
.centered-page__inner { max-width: 520px; }
.centered-page h1 { margin-bottom: 14px; }
.centered-page p { margin-bottom: 30px; }
.centered-page__code {
font-family: var(--font-display);
font-size: clamp(5rem, 14vw, 11rem);
line-height: .9;
color: var(--sand-300);
margin-bottom: 8px;
}
.centered-page__links {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}