/* ============================================================================
Deco Enzo — merk-, header- en hero-styling
Laadt ná main.css. Kleuren/fonts komen uit Stijl-options (CSS-variabelen)
met Figma-fallbacks. Content komt uit Bedrijfsgegevens/Header-options.
============================================================================ */
/* ----------------------------------------------------------------------------
0. LAYOUT-FIX — body overflow:hidden (base) breekt position:sticky.
Horizontaal clippen op html, body weer visible zodat de sticky nav werkt.
---------------------------------------------------------------------------- */
html { overflow-x: hidden; overflow-y: scroll; }
body { overflow: visible; background: var(--de-white, #f7f6f2); }
#page.site { background: #f7f6f2; }
/* ----------------------------------------------------------------------------
1. TOP BAR (Figma: sand pill — reviews | openingstijden | telefoon)
---------------------------------------------------------------------------- */
.header-top,
.header-top.position-absolute,
.header-top.position-fixed {
position: static;
height: auto;
background: #f7f6f2;
padding: 8px 24px 0;
font-family: var(--font-body);
transform: none;
}
.header-top .th-grid {
background: var(--de-sand, #eeece2);
border-radius: 8px;
padding: 7px 24px;
gap: 16px;
width: 100%; /* vult de (met 24px ingesprongen) sectie — groeit mee met de pagina */
max-width: none;
margin: 0;
min-height: 0;
box-sizing: border-box;
}
.header-top .th-zone {
gap: 8px;
flex-wrap: nowrap;
}
/* Reviews / rating */
.th-rating {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--de-black, #1f1f1f);
font-size: 14px;
text-decoration: none;
}
.th-rating__stars { display: inline-flex; gap: 1px; line-height: 0; }
.th-rating__star { fill: #fbbc04; }
.th-rating__text { font-weight: 500; white-space: nowrap; }
.th-rating__google { display: inline-flex; line-height: 0; }
/* Openingstijden + status-dot */
.th-hours {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--de-black, #1f1f1f);
font-size: 14px;
white-space: nowrap;
}
.th-hours__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--de-closed, #d7263d);
flex: 0 0 auto;
}
.th-hours.is-open .th-hours__dot { background: var(--de-open, #2bb24c); }
/* Telefoon */
.header-top .th-contact.th-phone {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--de-black, #1f1f1f);
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
.th-phone__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.header-top .th-contact:hover { color: var(--de-black, #1f1f1f); opacity: .7; }
/* ----------------------------------------------------------------------------
2. MAIN HEADER (Figma: wit, logo + menu + CTA-pills, 3px onderlijn)
---------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
height: auto;
background: #f7f6f2;
box-shadow: none;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
/* Theme navigation.js verbergt de header bij scrollen — uitschakelen zodat 'ie blijft plakken */
.site-header.is-hidden { transform: none !important; }
.site { padding-top: 0; }
body.has-top-header .site { padding-top: 0; }
/* Top-bar is visueel static (scrolt gewoon weg) → header hoort simpelweg sticky op top:0.
!important overschrijft ook de inline top die theme-navigation.js bij scrollen zet
(die zorgde voor een 4px-sprong tussen laden en na de eerste scroll). */
body.has-top-header .site-header,
body.has-fixed-top-header .site-header { top: 0 !important; }
.site-header .inner {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0;
height: auto;
max-width: none;
padding: 16px 48px 20px;
border-bottom: 3px solid var(--de-divider, #ebe8e2);
}
.site-logo { height: auto; }
.site-logo img,
.site-logo svg { height: 72px; width: auto; display: block; }
/* --- Melding-balk speciale openingstijden (net onder de header) --- */
.special-notice {
background: var(--de-black, #1f1f1f);
color: var(--de-white, #f7f6f2);
}
.special-notice__inner {
position: relative;
max-width: 1312px;
margin: 0 auto;
padding: 12px 56px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-sizing: border-box;
}
.special-notice__icon { flex-shrink: 0; color: var(--de-white, #f7f6f2); }
.special-notice__text {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
line-height: 1.4;
text-align: center;
}
.special-notice__close {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
background: none;
border: 0;
color: var(--de-white, #f7f6f2);
font-size: 24px;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
opacity: .7;
transition: opacity .2s ease;
}
.special-notice__close:hover { opacity: 1; }
@media (max-width: 767px) {
.special-notice__inner { padding: 10px 44px; gap: 8px; }
.special-notice__text { font-size: 13px; text-align: left; }
.special-notice__close { right: 8px; }
}
/* Mobiele telefoon-knop naast hamburger */
.header-phone {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--de-black, #1f1f1f);
margin-left: auto; /* duwt telefoon+hamburger naar rechts op mobiel */
margin-right: 8px;
}
.header-phone svg { width: 22px; height: 22px; }
/* ----------------------------------------------------------------------------
3. CTA-PILLS in de header
---------------------------------------------------------------------------- */
.cta-btn {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
min-height: 0;
padding: 8px 20px;
border-radius: 64px;
border: 1px solid var(--de-black, #1f1f1f);
transition: all .2s ease;
}
.cta-btn--primary {
background: var(--button-dark-bg, var(--de-black, #1f1f1f));
color: var(--button-dark-text, var(--de-white, #f7f6f2));
}
.cta-btn--primary:hover { background: var(--button-dark-bg-hover, #000); color: var(--button-dark-text, #fff); }
.cta-btn--secondary {
background: transparent !important;
color: var(--de-black, #1f1f1f) !important;
border: 1px solid var(--de-black, #1f1f1f);
}
.cta-btn--secondary:hover {
background: var(--de-black, #1f1f1f) !important;
color: var(--de-white, #f7f6f2) !important;
}
/* ----------------------------------------------------------------------------
4. DESKTOP NAVIGATIE
---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.desktop-navigation { flex: 0 0 auto; margin: 0 0 0 72px; display: flex; justify-content: flex-start; }
.nav-menu { gap: 32px; justify-content: flex-start; }
.nav-menu > li > a {
color: var(--de-black, #1f1f1f);
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
padding: 8px 0;
}
.nav-menu > li > a:hover { color: var(--de-black, #1f1f1f); opacity: .65; text-decoration: none; }
/* dropdown-chevron */
.nav-menu > li.menu-item-has-children > a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-menu > li.menu-item-has-children > a::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
/* translate vóór rotate = verschuiving in schermrichting; zo blijft de V bij het omklappen op dezelfde plek */
transform: translate(1.41px, -1.41px) rotate(45deg);
transition: transform .2s ease;
}
.nav-menu > li.menu-item-has-children:hover > a::after,
.nav-menu > li.menu-item-has-children:focus-within > a::after { transform: translate(1.41px, 3.6px) rotate(225deg); }
/* Submenu/dropdown hover: merk-stijl i.p.v. het felroze (#ff2e57 / --accent-color). */
.nav-menu .sub-menu a:hover,
.nav-menu > li:not(.has-mega) > .sub-menu a:hover {
background: var(--de-sand, #eeece2);
color: var(--de-black, #1f1f1f);
}
/* Mega-menu kolomlinks + titels: geen achtergrond, subtiel rood/terracotta accent. */
.nav-menu > li.has-mega .mega-menu .sub-menu > li > a:hover,
a.mega-col__title:hover {
color: var(--de-red, #836158);
background: none;
}
.header-cta-buttons.desktop-only { display: none; margin-left: auto; }
}
/* Navbar-CTA's pas vanaf 1300px (anders verdrukken ze het menu tussen 1024–1300) */
@media (min-width: 1300px) {
.header-cta-buttons.desktop-only { display: flex; gap: 8px; margin-left: auto; }
}
/* ----------------------------------------------------------------------------
5. HERO / HEADER-LAAG (inset rounded card, beide varianten)
---------------------------------------------------------------------------- */
.hero {
position: relative;
margin: 24px 24px 40px;
padding: 0; /* overschrijft base pagebuilder.css (.hero padding: var(--space-groot) 0) */
border-radius: 16px;
overflow: hidden;
color: #fff;
}
.hero--text-donker { color: var(--de-black, #1f1f1f); }
/* Koppen/tekst in de hero volgen de hero-kleur (anders forceert typography.css h1 donker) */
.hero__title,
.hero--home .hero__title,
.hero--standaard .hero__title { color: inherit; }
/* Reviews: eigen design-getrouwe render; grw-bron verborgen (alleen voor live cijfers via JS) */
.th-rating__src { display: none !important; }
.th-rating__stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.th-rating__star { width: 15px; height: 15px; display: block; }
.th-rating__text { font-weight: 500; color: var(--de-black, #1f1f1f); font-size: 14px; white-space: nowrap; line-height: 1; }
.th-rating__text:empty { display: none; }
.th-rating__google { display: inline-flex; line-height: 0; }
.th-rating__google svg { width: 18px; height: 18px; display: block; }
.hero__bg {
position: absolute;
inset: 0;
z-index: 1;
background-size: cover;
background-position: center;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--has-media.hero--overlay-donker::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.20) 50%, rgba(0,0,0,.40));
}
.hero--has-media.hero--overlay-licht::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: rgba(255,255,255,.45);
}
.hero--home.hero--has-media.hero--overlay-donker::before {
background: rgba(0, 0, 0, 0.20); /* vlakke 20% (design 10214-114459), geen gradient-gloed */
}
/* Home-hero foto oplichten — dezelfde lichte "gloed" als de footer-CTA i.p.v. donker. */
.hero--home .hero__bg { filter: brightness(1.55) saturate(1.03); }
/* Standaard (page-header) hero = inset rounded card (24px marge, volle contentbreedte),
562px hoog op grote schermen, flush onder het kruimelpad (margin-top 0),
met een vlakke, lichte overlay en zonder scroll-indicator (design 10257-1630). */
.hero.hero--standaard { margin-top: 0; }
.hero--standaard.hero--h-medium { min-height: 440px; }
.hero--standaard.hero--h-large { min-height: 562px; }
/* Overlay = de design-gradient (.30 → .20 → .40, 180deg) uit de base-regel = de "gloed".
De huidige foto is donker → oplichten zodat het de lichte design-look benadert
(mooiste resultaat = een lichtere headerfoto kiezen in de Hero-instellingen). */
.hero--standaard .hero__bg { filter: brightness(1.6) saturate(1.05); }
.hero--standaard .hero__scroll { display: none; }
@media (max-width: 767px) {
.hero.hero--standaard { min-height: 420px; }
}
.hero__inner,
.hero__scroll { position: relative; z-index: 3; }
/* Hoogtes */
.hero--h-auto { min-height: auto; }
.hero--h-medium { min-height: 420px; }
.hero--h-large { min-height: 560px; }
.hero--h-fullscreen { min-height: calc(100vh - 180px); }
.hero--home { min-height: 635px; }
/* --- Standaard variant (gecentreerde page-header) --- */
.hero--standaard .hero__inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
min-height: inherit;
padding: 48px;
}
.hero--standaard.hero--align-midden .hero__inner { align-items: center; text-align: center; max-width: 864px; box-sizing: border-box; } /* 864 - 2×48 padding = 768 tekstbreedte */
.hero--standaard .hero__text { max-width: 768px; width: 100%; }
/* Laatste element zonder onder-marge (de 36px van .hero__text is voor de knoppen) → blok echt verticaal gecentreerd. */
.hero--standaard .hero__inner > :last-child { margin-bottom: 0; }
.hero--standaard .hero__title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 40px;
line-height: 1.2;
margin: 0;
color: inherit;
}
.hero--standaard .hero__text {
font-size: 24px;
line-height: 1.6;
max-width: 768px;
opacity: .95;
}
.hero .hero__pretitle { color: inherit; opacity: .9; }
/* --- Home variant (2-koloms met adviseur-blok) --- */
.hero__inner--home {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 48px;
min-height: inherit;
width: 100%;
max-width: 1312px; /* 1264 content + 2×24 gutter */
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
.hero__col--main { flex: 1 1 auto; }
.hero__col--aside {
flex: 0 0 360px;
max-width: 42%;
display: flex;
flex-direction: column;
gap: 28px;
}
.hero__eyebrow {
font-family: var(--font-accent);
font-size: 26px;
color: rgba(255,255,255,.85);
margin: 0 0 10px;
}
/* Desktop home: geen eyebrow boven de titel (design 10214-114458); wel op mobiel */
@media (min-width: 769px) {
.hero--home .hero__eyebrow { display: none; }
}
.hero--home .hero__title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 80px;
line-height: 1.08;
margin: 0;
max-width: 346px; /* forceert wrap: Welkom / bij Deco / Enzo (design 10214-114458) */
}
.hero--home .hero__text {
font-size: 18px;
line-height: 1.5;
color: rgba(255,255,255,.92);
}
/* Adviseur-blok */
.hero__advisor { display: flex; align-items: center; gap: 16px; }
.hero__advisor-avatars { display: flex; gap: 8px; }
.hero__advisor-avatar {
width: 96px;
height: 96px;
border-radius: 8px;
object-fit: cover;
border: 0;
margin: 0;
display: block;
}
.hero__advisor-meta { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.hero__advisor-label {
font-family: var(--font-heading);
font-size: 14px;
text-transform: uppercase;
letter-spacing: .02em;
line-height: 1.2;
color: var(--de-white, #f7f6f2);
}
.hero__advisor-name {
font-family: var(--font-accent);
font-size: 32px;
line-height: 1;
color: var(--de-white, #f7f6f2);
}
.hero__advisor-caption { font-size: 13px; color: rgba(255,255,255,.8); }
/* Caption niet op desktop (design 10214-114462 heeft 'm niet); wel op mobiel */
@media (min-width: 769px) { .hero--home .hero__advisor-caption { display: none; } }
@media (max-width: 768px) { .hero__advisor-avatar { width: 56px; height: 56px; } }
/* Adviseur-blok + scroll-indicator niet op mobiel; terug vanaf 768px */
@media (max-width: 767px) {
.hero__advisor { display: none; }
.hero--home .hero__scroll { display: none; }
}
/* Scroll-indicator */
.hero__scroll {
position: absolute;
bottom: 24px;
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(255,255,255,.85);
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
}
.hero--home .hero__scroll { left: 50%; transform: translateX(-50%); }
.hero--standaard .hero__scroll { right: 32px; }
.hero__scroll-arrow { animation: heroScrollBounce 1.8s ease-in-out infinite; }
@keyframes heroScrollBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* ----------------------------------------------------------------------------
6. KNOPPEN (.btn) — pills; in hero wit, daarbuiten merk-donker
---------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 500;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
padding: 15px 28px;
border-radius: 64px;
border: 2px solid transparent;
text-decoration: none;
transition: all .2s ease;
cursor: pointer;
}
.btn--primary {
background: var(--button-dark-bg, var(--de-black, #1f1f1f));
color: var(--button-dark-text, var(--de-white, #f7f6f2));
border-color: var(--button-dark-bg, var(--de-black, #1f1f1f));
}
.btn--secondary {
background: transparent;
color: var(--de-black, #1f1f1f);
border-color: var(--de-black, #1f1f1f);
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* Hero-knoppen tonen tot 1300px (navbar-CTA's zijn daar nog verborgen); daarboven weg */
@media (min-width: 1300px) { .hero__buttons--mobile-only { display: none; } }
.hero .btn--primary {
background: #fff;
color: var(--de-black, #1f1f1f);
border-color: #fff;
}
.hero .btn--primary:hover { background: rgba(255,255,255,.85); }
.hero .btn--secondary {
background: transparent;
color: #fff;
border-color: #fff;
}
.hero .btn--secondary:hover { background: rgba(255,255,255,.15); }
/* ----------------------------------------------------------------------------
7. RESPONSIVE
---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
/* Top bar: alleen reviews, gecentreerd (telefoon verhuist naar header) */
.header-top .th-grid { grid-template-columns: 1fr; }
.header-top .th-zone--center,
.header-top .th-zone--right { display: none; }
.header-top .th-zone--left { justify-self: center; justify-content: center; }
.site-header .inner { padding: 8px 16px 12px; gap: 12px; }
.site-logo img,
.site-logo svg { height: 52px; }
}
@media (min-width: 1024px) {
.header-phone { display: none; }
}
@media (max-width: 768px) {
.hero { margin: 16px 16px 24px; }
.hero--home { min-height: 635px; }
.hero--h-large { min-height: 560px; }
/* Hero als flex-kolom zodat de content onderaan uitlijnt */
.hero--home { display: flex; flex-direction: column; }
.hero__inner--home {
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 16px;
padding: 24px;
max-width: none;
margin: 0;
}
.hero__col--main { flex: 0 0 auto; width: 100%; }
.hero__col--aside { flex: 0 0 auto; width: 100%; max-width: none; gap: 16px; }
.hero--home .hero__text { font-size: 16px; }
.hero__buttons { width: 100%; flex-direction: column; }
.hero .btn { width: 100%; }
.hero--standaard .hero__inner { padding: 24px; }
}
/* ----------------------------------------------------------------------------
8. MOBIEL-EXTRA onder de hero (gratis-afspraak knop + info-blok) — design 10305-10093
---------------------------------------------------------------------------- */
.hero-mobile-extra { display: none; }
@media (max-width: 767px) {
.hero-mobile-extra { display: block; margin: 0 16px 24px; }
.m-infoblock {
background: var(--de-sand, #eeece2);
border-radius: 16px;
padding: 4px 20px;
}
.m-info {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 2px;
font-size: 14px;
color: var(--de-black, #1f1f1f);
}
.m-info + .m-info { border-top: 1px solid rgba(0, 0, 0, .08); }
.m-info--phone { text-decoration: none; }
.m-info__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--de-black, #1f1f1f);
color: #fff;
flex: 0 0 auto;
}
.m-info__icon svg { width: 18px; height: 18px; }
.m-info__text { display: flex; flex-direction: column; line-height: 1.25; }
.m-info__text strong { font-size: 16px; font-weight: 600; color: var(--de-black, #1f1f1f); }
.m-info__text span { font-size: 13px; color: rgba(0, 0, 0, .55); }
.m-info__chev { margin-left: auto; display: flex; color: #a98b5d; }
.m-info--reviews .th-rating { gap: 8px; }
.m-info--hours .th-hours__dot { background: var(--de-closed, #d7263d); }
.m-info--hours.is-open .th-hours__dot { background: var(--de-open, #2bb24c); }
}
/* ----------------------------------------------------------------------------
9. STICKY MOBIELE CTA onderaan de pagina (page-level)
---------------------------------------------------------------------------- */
.mobile-sticky-bar { display: none; }
@media (max-width: 767px) {
.mobile-sticky-bar {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1500;
padding: 8px 16px 16px;
background: var(--de-white, #f7f6f2);
box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}
.mobile-sticky-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 17px 28px;
border-radius: 64px;
background: var(--de-black, #1f1f1f);
color: var(--de-white, #f7f6f2);
font-family: var(--font-heading);
font-weight: 500;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
}
body { padding-bottom: 88px; } /* ruimte zodat de sticky balk niets afdekt */
/* Bij open mobiel menu: sticky balk weg (had z-index 1500 → plakte anders bovenop het paneel). */
body.menu-open .mobile-sticky-bar { display: none; }
}
/* ----------------------------------------------------------------------------
10. USP-KOLOMMEN (pagebuilder-laag) — design 10214-114482 / 10305-10125
---------------------------------------------------------------------------- */
.usps__inner {
max-width: 1312px; /* 1264 content + 2×24 */
margin: 0 auto;
padding: 104px 24px;
display: flex;
align-items: stretch;
box-sizing: border-box;
}
.usp {
flex: 1 1 0;
min-width: 0;
display: grid;
grid-template-columns: 100px 1fr;
grid-template-areas: "img meta" "text text";
column-gap: 16px;
row-gap: 24px;
align-items: center;
padding: 0 56px;
}
.usp:first-child { padding-left: 0; }
.usp:last-child { padding-right: 0; }
.usp:not(:first-child) { border-left: 3px solid var(--de-divider, #ebe8e2); }
.usp__img { grid-area: img; width: 100px; height: 100px; border-radius: 8px; object-fit: cover; display: block; }
.usp__meta { grid-area: meta; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.usp__eyebrow { grid-area: auto; font-family: var(--font-heading); font-size: 14px; text-transform: uppercase; line-height: 1.2; color: var(--de-black, #1f1f1f); margin: 0; }
.usp__title { font-family: var(--font-heading); font-weight: 500; font-size: 24px; line-height: 1.4; color: var(--de-black, #1f1f1f); margin: 0; }
.usp__text { grid-area: text; font-size: 18px; line-height: 1.5; color: var(--de-black, #1f1f1f); }
.usp__text p { margin: 0; }
/* Mobiel = design 10305-10125: witte kaart (1px rand, r12), foto 96px strak links over de volle
kaarthoogte (afgesneden door de kaart-radius), tekst 16px van boven/rechts/onder, 4px tussen regels. */
@media (max-width: 767px) {
.usps__inner { flex-direction: column; gap: 16px; padding: 32px 16px; }
.usp,
.usp:first-child,
.usp:last-child,
.usp:not(:first-child) {
flex: none;
background: #fff;
border: 1px solid var(--de-divider, #ebe8e2);
border-radius: 12px;
overflow: hidden;
padding: 0;
grid-template-columns: 96px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "img meta" "img text";
column-gap: 16px;
row-gap: 4px;
align-items: start;
}
/* height 0 + min-height 100%: foto telt niet mee voor de kaarthoogte (die komt van de tekst), vult wel de hele hoogte. */
.usp__img { width: 96px; height: 0; min-height: 100%; align-self: stretch; border-radius: 0; }
.usp__meta { gap: 4px; padding: 16px 16px 0 0; }
.usp__eyebrow { font-weight: 400; font-size: 11px; line-height: 16.5px; letter-spacing: 1px; color: #767674; }
.usp__title { font-size: 17px; line-height: 22.1px; }
.usp__text { padding: 0 16px 16px 0; font-family: var(--font-body); font-size: 14px; line-height: 19.5px; color: #767674; }
}
/* ----------------------------------------------------------------------------
11. COLLECTIE (pagebuilder-laag) — grote categorie-namen — design 10214-114516
---------------------------------------------------------------------------- */
.collectie__inner {
max-width: 1312px;
margin: 0 auto;
padding: 104px 24px;
box-sizing: border-box;
border-top: 3px solid var(--de-divider, #ebe8e2); /* scheidingslijn met de vorige laag */
}
.collectie__eyebrow {
font-family: var(--font-heading);
font-size: 14px;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
margin: 0 0 56px;
}
.collectie__list {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 8px;
row-gap: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: 80px;
line-height: 1.1;
color: #767674;
}
/* Desktop: dubbele content "uitvouwen" zodat alleen kopie 1 wrappend toont */
.collectie__track { display: contents; }
.collectie__group { display: contents; }
.collectie__group--dup { display: none; }
.collectie__item { color: #767674; text-decoration: none; transition: color .2s ease; }
.collectie__item:hover { color: var(--de-black, #1f1f1f); }
.collectie__sep { color: #767674; }
/* Mobiel: continu lopende marquee, pauzeert bij hover */
@media (max-width: 767px) {
.collectie__inner { padding: 32px 0 32px; }
.collectie__eyebrow { display: none; } /* op mobiel geen "Collection", slider start meteen */
.collectie__list { display: block; overflow: hidden; }
.collectie__track {
display: flex;
flex-wrap: nowrap;
width: max-content;
animation: collectieMarquee 28s linear infinite;
}
.collectie__group {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
column-gap: 8px;
padding-right: 8px;
flex: 0 0 auto;
}
.collectie__group--dup { display: flex; }
.collectie__list:hover .collectie__track,
.collectie__track:active { animation-play-state: paused; }
}
@keyframes collectieMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.collectie__track { animation: none; }
}
/* ----------------------------------------------------------------------------
12. PRODUCTEN (pagebuilder-laag) — slider + categoriefilter
desktop = onderstreepte tabs + horizontale slider met pijlen
mobiel = pills + gestapelde kaarten + "Bekijk alles"-knop
design 10214-114538 (desktop) / 10305-10199 (mobiel) / 10308-1223 (knop)
---------------------------------------------------------------------------- */
.producten { background: var(--de-sand, #eeece2); }
.producten__inner {
max-width: 1312px; /* 1264 content + 2×24 */
margin: 0 auto;
padding: 104px 24px;
box-sizing: border-box;
}
.producten__eyebrow {
font-family: var(--font-heading);
font-size: 14px;
line-height: 1.2;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
margin: 0;
}
.producten__title { display: none; } /* alleen mobiel */
/* Filter — desktop tabs (onderstreept) */
.producten__filter {
margin-top: 56px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 32px;
}
.producten__tab {
font-family: var(--font-heading);
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: #767674;
background: none;
border: 0;
border-bottom: 3px solid transparent;
padding: 0 0 8px;
cursor: pointer;
white-space: nowrap;
transition: color .2s ease, border-color .2s ease;
}
.producten__tab:hover { color: var(--de-black, #1f1f1f); }
.producten__tab.is-active { color: var(--de-black, #1f1f1f); border-bottom-color: var(--de-black, #1f1f1f); }
/* Slider */
.producten__viewport {
margin-top: 56px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.producten__viewport::-webkit-scrollbar { display: none; }
.producten__track { display: flex; gap: 32px; }
.product-card {
flex: 0 0 392px;
max-width: 392px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.product-card__media {
width: 100%;
aspect-ratio: 392 / 483;
background: var(--de-white, #f7f6f2);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.product-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2, .6, .2, 1); }
.product-card:hover .product-card__img { transform: scale(1.06); }
.product-card:active .product-card__img { transform: scale(1.03); } /* tik-feedback op mobiel */
/* Subtiele verdonkering + naam-accent bij hover. */
.product-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(31, 31, 31, 0); transition: background .3s ease; pointer-events: none; }
.product-card:hover .product-card__media::after { background: rgba(31, 31, 31, .06); }
.product-card:hover .product-card__name { color: var(--de-red, #836158); }
.product-card__brand {
font-family: var(--font-heading);
font-size: 12px;
line-height: 16px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #767674;
margin: 24px 0 0;
}
.product-card__name {
font-family: var(--font-heading);
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: var(--de-black, #1f1f1f);
margin: 8px 0 0;
transition: color .2s ease;
}
.product-card.is-hidden { display: none !important; }
/* Voet — lijn + pijlen */
.producten__foot {
margin-top: 24px;
display: flex;
align-items: center;
gap: 24px;
}
.producten__line { flex: 1 1 auto; height: 1px; background: rgba(31, 31, 31, .18); }
.producten__nav { display: flex; gap: 16px; flex-shrink: 0; }
.producten__arrow {
width: 48px;
height: 48px;
border-radius: 50px;
border: 1px solid var(--de-red, #836158);
background: none;
color: var(--de-red, #836158);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.producten__arrow svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.producten__arrow:hover { background: var(--de-red, #836158); color: var(--de-white, #f7f6f2); }
.producten__arrow:disabled { opacity: .35; cursor: default; }
.producten__arrow:disabled:hover { background: none; color: var(--de-red, #836158); }
/* "Bekijk alles"-knop — alleen mobiel */
.producten__all { display: none; }
@media (max-width: 767px) {
.producten__inner {
display: flex;
flex-direction: column;
padding: 40px 16px 32px;
}
.producten__eyebrow { font-size: 11px; letter-spacing: 1.2px; color: #767674; }
.producten__title {
display: block;
font-family: var(--font-heading);
font-weight: 500;
font-size: 26px;
line-height: 1.1;
color: var(--de-black, #1f1f1f);
margin: 4px 0 0;
}
/* Filter → scrollbare pills */
.producten__filter {
margin-top: 20px;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
margin-left: 0;
margin-right: -16px;
padding: 0 16px 4px 0;
}
.producten__filter::-webkit-scrollbar { display: none; }
.producten__tab {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 19.5px;
color: #767674;
border: 1px solid #d4d0c8;
border-radius: 64px;
padding: 9px 17px;
flex-shrink: 0;
}
.producten__tab.is-active {
background: var(--de-black, #1f1f1f);
color: var(--de-white, #f7f6f2);
border-color: var(--de-black, #1f1f1f);
}
/* Horizontaal scrollen met "peek" van de volgende kaart */
.producten__viewport {
margin: 16px -16px 0;
padding: 0 16px;
scroll-padding-left: 16px;
}
.producten__track { gap: 16px; }
.product-card { flex: 0 0 78%; max-width: 78%; }
.product-card__media { aspect-ratio: 361 / 270; border-radius: 10px; }
.product-card__brand { font-size: 11px; letter-spacing: 1px; margin-top: 8px; }
.product-card__name { font-size: 16px; line-height: 20.8px; }
.producten__foot { display: none; } /* geen slider-pijlen op mobiel */
.producten__all {
display: inline-flex;
align-self: center;
align-items: center;
justify-content: center;
margin-top: 32px;
height: 56px;
padding: 0 32px;
border: 2px solid var(--de-black, #1f1f1f);
border-radius: 9999px;
font-family: var(--font-heading);
font-weight: 500;
font-size: 14px;
letter-spacing: .35px;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.producten__all:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
}
/* ----------------------------------------------------------------------------
13. SINGLE PRODUCT — detailpagina (basis, content volgt later)
---------------------------------------------------------------------------- */
.product-single__inner {
max-width: 1312px;
margin: 0 auto;
padding: 80px 24px;
box-sizing: border-box;
}
.product-single__back {
display: inline-block;
font-family: var(--font-heading);
font-size: 14px;
color: #767674;
text-decoration: none;
margin-bottom: 32px;
}
.product-single__back:hover { color: var(--de-black, #1f1f1f); }
.product-single__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.product-single__media {
background: var(--de-sand, #eeece2);
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.product-single__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-single__brand {
font-family: var(--font-heading);
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #767674;
margin: 0 0 8px;
}
.product-single__title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 44px;
line-height: 1.15;
color: var(--de-black, #1f1f1f);
margin: 0;
}
.product-single__cats {
font-family: var(--font-body);
font-size: 15px;
color: #767674;
margin: 16px 0 0;
}
.product-single__content { margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--de-black, #1f1f1f); }
@media (max-width: 767px) {
.product-single__grid { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------------------------
14. QUOTE / RECENSIE (pagebuilder-laag)
desktop = groot tweekleurig citaat + avatar/label/naam (leidend)
mobiel = citaat tussen aanhalingstekens + naam + sterren (geen avatar/label)
design 10214-114640 (desktop) / 10305-10245 (mobiel)
---------------------------------------------------------------------------- */
.quote { background: var(--de-white, #f7f6f2); }
.quote__inner {
max-width: 1312px;
margin: 0 auto;
padding: 104px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
}
.quote__mark { display: block; color: #c9c4b8; }
.quote__mark-svg { display: block; width: 41px; height: auto; }
.quote__text {
margin: 0;
max-width: 1264px;
font-family: var(--font-heading);
font-weight: 500;
font-size: 72px;
line-height: 1.1;
text-align: center;
}
/* Desktop: grijze aanloop + donker hoofddeel elk op een eigen regel (zoals het design). */
.quote__intro { color: #767674; display: block; }
.quote__main { color: var(--de-black, #1f1f1f); display: block; }
.quote__reviewer {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.quote__avatar {
flex-shrink: 0;
width: 100px;
height: 100px;
border-radius: 8px;
overflow: hidden;
}
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote__meta { display: flex; flex-direction: column; gap: 6px; }
.quote__label {
font-family: var(--font-heading);
font-size: 14px;
line-height: 1.2;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
margin: 0;
}
.quote__naam {
font-family: var(--font-accent, 'Caveat', cursive);
font-size: 32px;
line-height: 1;
color: var(--de-black, #1f1f1f);
margin: 0;
}
.quote__stars { display: none; gap: 2px; color: #f5b301; }
.quote__stars svg { width: 14px; height: 14px; display: block; }
@media (max-width: 767px) {
.quote__inner { padding: 40px 16px; gap: 24px; max-width: 560px; }
/* Citaat één kleur + aanhalingstekens eromheen */
.quote__text { font-size: 22px; line-height: 1.3; max-width: 361px; }
.quote__intro, .quote__main { color: var(--de-black, #1f1f1f); display: inline; }
.quote__text::before { content: '\201C'; }
.quote__text::after { content: '\201D'; }
.quote__reviewer { flex-direction: column; gap: 4px; }
.quote__avatar { display: none; } /* mobiel: geen foto */
.quote__meta { align-items: center; gap: 4px; }
.quote__label { display: none; } /* mobiel: geen "Recensie door" */
.quote__naam { font-size: 22px; text-align: center; }
.quote__stars { display: flex; justify-content: center; }
}
/* ----------------------------------------------------------------------------
15. GALERIJ / INSTAGRAM (pagebuilder-laag)
desktop = doorlopende langzame marquee van vierkante foto's
mobiel = titel + IG-icoon + 2-koloms raster + handle
design 10214-114652 (desktop) / 10305-10278 (mobiel)
---------------------------------------------------------------------------- */
.galerij {
background: var(--de-white, #f7f6f2);
padding: 104px 0;
overflow: hidden;
}
.galerij__head { display: none; } /* alleen mobiel */
.galerij__handle { display: none; } /* alleen mobiel */
.galerij__grid { display: none; } /* alleen mobiel */
.galerij__marquee { max-width: 1264px; width: calc(100% - 48px); margin: 0 auto; overflow: hidden; }
.galerij__track {
display: flex;
width: max-content;
animation: galMarquee var(--gal-duration, 60s) linear infinite;
}
.galerij__group { display: flex; }
.galerij__item {
--gal-size: 450px;
width: var(--gal-size);
height: var(--gal-size);
margin-right: 24px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.galerij__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes galMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.galerij__track { animation: none; }
}
@media (max-width: 767px) {
.galerij { padding: 40px 16px 32px; overflow: visible; }
.galerij__marquee { display: none; }
.galerij__head { display: flex; align-items: center; justify-content: space-between; }
.galerij__titel {
font-family: var(--font-heading);
font-weight: 500;
font-size: 20px;
line-height: 1.5;
color: var(--de-black, #1f1f1f);
margin: 0;
}
.galerij__ig { display: inline-flex; color: var(--de-black, #1f1f1f); }
.galerij__ig svg { width: 20px; height: 20px; display: block; }
.galerij__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 16px;
}
.galerij__grid .galerij__item {
width: auto;
height: auto;
aspect-ratio: 1 / 1;
margin: 0;
border-radius: 10px;
background: var(--de-sand, #eeece2);
}
.galerij__handle {
display: block;
text-align: center;
margin: 12px 0 0;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: #767674;
text-decoration: none;
}
}
/* Galerij met Instagram-bron: accountbalk + klikbare posts */
.galerij__account {
max-width: 1264px;
width: calc(100% - 48px);
margin: 0 auto 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.galerij__profiel {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
color: var(--de-black, #1f1f1f);
text-decoration: none;
}
.galerij__avatar {
width: 64px;
height: 64px;
padding: 3px;
border-radius: 50%;
background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
flex-shrink: 0;
box-sizing: border-box;
}
.galerij__avatar img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
border: 3px solid var(--de-white, #f7f6f2);
object-fit: cover;
box-sizing: border-box;
}
.galerij__naam { display: flex; flex-direction: column; min-width: 0; }
.galerij__user {
font-family: var(--font-heading);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
}
.galerij__sub {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
color: #767674;
}
.galerij__sub svg { width: 14px; height: 14px; flex-shrink: 0; }
.galerij__volg {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
background: var(--de-black, #1f1f1f);
color: var(--de-white, #f7f6f2);
font-family: var(--font-body);
font-size: 15px;
line-height: 1;
text-decoration: none;
flex-shrink: 0;
transition: opacity .2s ease;
}
.galerij__volg:hover { opacity: .85; }
.galerij__volg svg { width: 18px; height: 18px; }
.galerij__item--link { position: relative; display: block; }
.galerij__item--link img { transition: transform .4s ease; }
.galerij__item--link::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .25);
opacity: 0;
transition: opacity .25s ease;
}
.galerij__item--link:hover::after,
.galerij__item--link:focus-visible::after { opacity: 1; }
.galerij__item--link:hover img { transform: scale(1.03); }
.galerij__item-ig {
position: absolute;
top: 14px;
right: 14px;
z-index: 1;
width: 26px;
height: 26px;
color: #fff;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.galerij__item-ig svg { width: 100%; height: 100%; display: block; }
.galerij__marquee:hover .galerij__track { animation-play-state: paused; }
@media (max-width: 767px) {
.galerij__account { width: auto; margin: 0 0 16px; gap: 12px; }
.galerij__profiel { gap: 10px; }
.galerij__avatar { width: 48px; height: 48px; padding: 2px; }
.galerij__avatar img { border-width: 2px; }
.galerij__user { font-size: 16px; }
.galerij__sub { font-size: 12px; }
.galerij__volg { padding: 10px 14px; font-size: 13px; gap: 6px; }
.galerij__volg svg { width: 15px; height: 15px; }
.galerij__item-ig { top: 8px; right: 8px; width: 18px; height: 18px; }
}
/* ----------------------------------------------------------------------------
16. FOOTER-CTA (showroom) — vaste CTA-band boven de footer
desktop = full-bleed met achtergrondfoto + donkere overlay (design 10259-3049)
mobiel = rounded card met marges (design 10305-10265)
---------------------------------------------------------------------------- */
.footer-cta {
position: relative;
overflow: hidden;
background-color: var(--de-black, #1f1f1f);
padding: 104px 24px;
color: #fff;
text-align: center;
}
/* Achtergrondfoto als ![]()
(object-fit cover, geen extra zoom). */
.footer-cta__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
filter: brightness(1.55) saturate(1.03); /* foto oplichten — zelfde aanpak als de hero's */
}
.footer-cta::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .34); /* lichter waas zodat de opgelichte foto doorkomt, tekst blijft leesbaar */
border-radius: inherit;
z-index: 1;
}
.footer-cta__inner {
position: relative;
z-index: 2;
max-width: 896px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-cta__eyebrow {
font-family: var(--font-accent);
font-size: 30px;
line-height: 1.2;
color: #fff;
opacity: .9;
margin: 0;
}
.footer-cta__title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 72px;
line-height: 1.1;
color: #fff; /* overschrijft base h1–h6 { color: var(--font-dark) } */
margin: 24px 0 0;
}
.footer-cta__text {
font-family: var(--font-body);
font-size: 24px;
line-height: 1.6;
color: #fff;
opacity: .95;
max-width: 768px;
margin: 32px 0 0;
}
.footer-cta__buttons {
display: flex;
gap: 16px;
justify-content: center;
align-items: center; /* niet oprekken: wit is 52 hoog, ghost 56 (rand) — zoals in het design */
flex-wrap: wrap;
margin-top: 48px;
}
/* design 10259-3059/3061: wit 223×52 zonder rand, ghost 234×56 mét 2px rand; beide 16/40 padding */
.footer-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px;
border-radius: 9999px;
font-family: var(--font-heading);
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: .35px;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.footer-cta__btn:hover,
.footer-cta__btn:focus-visible { text-decoration: none; } /* globale a:hover-underline hoort niet op een knop */
.footer-cta__btn--white { background: #fff; color: var(--de-black, #1f1f1f); border: 0; }
/* hover blijft dicht (niet transparant) — witte tekst op de foto was slecht leesbaar */
.footer-cta__btn--white:hover,
.footer-cta__btn--white:focus-visible { background: var(--de-sand, #eeece2); color: var(--de-black, #1f1f1f); }
.footer-cta__btn--ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.footer-cta__btn--ghost:hover,
.footer-cta__btn--ghost:focus-visible { background: #fff; color: var(--de-black, #1f1f1f); }
@media (max-width: 767px) {
.footer-cta {
margin: 24px 16px 0; /* geen onder-marge: footer pt (64px) bepaalt de tussenruimte exact */
padding: 40px 24px;
border-radius: 16px;
min-height: 360px;
display: flex;
align-items: center;
}
.footer-cta__inner { width: 100%; }
/* Design 10305-10265: foto niet oplichten + vlakke 40%-overlay, anders is de witte tekst op telefoon slecht leesbaar. */
.footer-cta__bg { filter: none; }
.footer-cta::before { background: rgba(0, 0, 0, .4); }
.footer-cta__eyebrow { font-size: 22px; }
.footer-cta__title { font-size: 32px; margin-top: 20px; }
.footer-cta__text { font-size: 16px; line-height: 1.5; margin-top: 20px; }
.footer-cta__buttons {
flex-direction: column;
width: 100%;
max-width: 320px;
gap: 12px;
margin-top: 28px;
}
.footer-cta__btn { width: 100%; height: 56px; }
}
/* ----------------------------------------------------------------------------
17. SITE FOOTER (design 10214-114660 / 10305-10303)
logo + socials + contact | menu-kolommen | openingstijden (dynamisch)
---------------------------------------------------------------------------- */
.site-footer__main {
background: var(--de-white, #f7f6f2);
padding: 88px 0 0;
}
.site-footer__main .inner {
max-width: 1312px;
margin: 0 auto;
padding: 56px 24px 72px;
box-sizing: border-box;
}
.site-footer__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
}
.site-footer__brand { flex: 0 0 300px; }
.site-footer__logo { display: block; margin-bottom: 48px; }
.site-footer__logo-img,
.site-footer__logo-svg { width: 146px; height: auto; display: block; } /* design 10214-114718: 146 breed */
.site-footer__socials { list-style: none; display: flex; gap: 16px; margin: 0 0 32px; padding: 0; }
.site-footer__socials a { display: inline-flex; color: var(--de-black, #1f1f1f); transition: opacity .2s ease; }
.site-footer__socials a:hover { opacity: .65; }
.site-footer__socials svg { width: 32px; height: 32px; display: block; }
.site-footer__contact p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--de-black, #1f1f1f); }
.site-footer__contact a { color: inherit; text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__cols { display: flex; flex: 1; gap: 48px; justify-content: space-between; flex-wrap: wrap; }
.site-footer__col { min-width: 160px; }
.site-footer__col--hours { min-width: 240px; }
.site-footer__col-title {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
margin: 0 0 16px;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer__links a,
.site-footer__links span { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #767674; text-decoration: none; }
.site-footer__links a:hover { color: var(--de-black, #1f1f1f); }
.site-footer__hours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer__hours li { display: flex; gap: 48px; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #767674; }
.site-footer__hours-day { flex: 0 0 90px; }
.site-footer__hours-note { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: #767674; margin: 24px 0 0; max-width: 240px; }
.site-footer__divider { height: 3px; background: var(--de-divider, #ebe8e2); margin: 64px 0; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer__legal { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.site-footer__legal span,
.site-footer__legal a,
.site-footer__realisatie,
.site-footer__realisatie a {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
text-decoration: none;
}
.site-footer__legal a:hover { opacity: .65; }
.site-footer__realisatie { margin: 0; }
@media (max-width: 1023px) {
.site-footer__top { flex-direction: column; gap: 48px; }
.site-footer__brand { flex: none; width: auto; }
}
@media (max-width: 767px) {
.site-footer__main { padding: 64px 0 0; }
.site-footer__main .inner { padding: 0 24px 40px; }
.site-footer__cols { flex-direction: column; gap: 48px; }
.site-footer__divider { margin: 40px 0 32px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer__legal { flex-direction: row; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; row-gap: 16px; }
.site-footer__legal span { flex: 0 0 100%; }
}
/* ----------------------------------------------------------------------------
18. PRODUCTEN-GRID (pagebuilder-laag) — filter + 3-koloms grid + "Bekijk meer"
design 10257-1669 (producten-pagina)
---------------------------------------------------------------------------- */
.producten-grid { background: var(--de-white, #f7f6f2); }
.producten-grid__inner {
max-width: 1312px;
margin: 0 auto;
padding: 96px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.producten-grid .producten__filter {
margin: 0;
padding-bottom: 32px;
border-bottom: 3px solid var(--de-divider, #ebe8e2);
}
.producten-grid__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px 44px;
margin-top: 96px;
}
.producten-grid__grid .product-card { flex: none; max-width: none; width: 100%; }
.producten-grid__more {
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 32px;
margin: 64px auto 0;
border: 2px solid var(--de-black, #1f1f1f);
border-radius: 9999px;
background: transparent;
font-family: var(--font-heading);
font-weight: 500;
font-size: 14px;
letter-spacing: .35px;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.producten-grid__more:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
.producten-grid__more[hidden] { display: none; }
@media (max-width: 1023px) {
.producten-grid__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 767px) {
.producten-grid__inner { padding: 56px 16px; }
.producten-grid__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
.producten-grid__more { margin-top: 48px; }
.producten-grid .producten__filter { border-bottom: 0; padding-bottom: 4px; }
}
/* ----------------------------------------------------------------------------
19. TEKST + AFBEELDING (pagebuilder-laag) — design 10257-1681
---------------------------------------------------------------------------- */
.tekst-afb { background: #fff; }
.tekst-afb__inner {
max-width: 1312px;
margin: 0 auto;
padding: 128px 24px;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
align-items: center;
}
.tekst-afb--img-rechts .tekst-afb__media { order: 2; }
.tekst-afb__media { border-radius: 16px; overflow: hidden; aspect-ratio: 544 / 680; }
.tekst-afb__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tekst-afb__eyebrow {
font-family: var(--font-heading);
font-size: 14px;
line-height: 1.5;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #767674;
margin: 0;
}
.tekst-afb__title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 60px;
line-height: 1.1;
color: var(--de-black, #1f1f1f);
margin: 16px 0 0;
}
.tekst-afb__text {
margin-top: 32px;
font-family: var(--font-body);
font-size: 20px;
line-height: 1.625;
color: rgba(31, 31, 31, .8);
}
.tekst-afb__text p { margin: 0 0 24px; }
.tekst-afb__text p:last-child { margin-bottom: 0; }
.tekst-afb__link {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 32px;
font-family: var(--font-heading);
font-size: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--de-black, #1f1f1f);
text-decoration: none;
}
.tekst-afb__link svg { width: 20px; height: 20px; transition: transform .2s ease; }
.tekst-afb__link:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tekst-afb__inner { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px; }
.tekst-afb--img-rechts .tekst-afb__media { order: 0; }
.tekst-afb__media { aspect-ratio: 4 / 3; }
.tekst-afb__text { font-size: 17px; margin-top: 24px; }
}
/* ----------------------------------------------------------------------------
20. KRUIMELPAD (boven de hero op subpagina's) — design 10257-1623
---------------------------------------------------------------------------- */
.page-breadcrumb { background: var(--de-white, #f7f6f2); }
.page-breadcrumb__inner {
max-width: none;
margin: 0;
padding: 8px 48px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
}
.page-breadcrumb a { color: #767674; text-decoration: none; }
.page-breadcrumb a:hover { color: var(--de-black, #1f1f1f); }
.page-breadcrumb__sep { color: #767674; }
.page-breadcrumb__current { color: var(--de-black, #1f1f1f); }
/* Onderlijn — alleen op productdetailpagina's (.single-product), gecentreerd max 1264px.
Overal elders verborgen; en sowieso niet op mobiel. */
.page-breadcrumb::after {
content: "";
display: none;
height: 3px;
background: var(--de-divider, #ebe8e2);
max-width: 1264px;
width: calc(100% - 96px);
margin: 0 auto;
}
.single-product .page-breadcrumb::after { display: block; }
@media (max-width: 767px) {
.page-breadcrumb__inner { padding: 8px 16px; font-size: 14px; }
.single-product .page-breadcrumb::after { display: none; }
}
/* ----------------------------------------------------------------------------
21. PRODUCTDETAIL — HERO (slider + info) — design 10257-2014
---------------------------------------------------------------------------- */
.pdp-hero { background: #fff; }
.pdp-hero__inner {
max-width: 1312px;
margin: 0 auto;
padding: 104px 24px;
box-sizing: border-box;
display: grid;
grid-template-columns: 1.08fr 1fr;
gap: 112px;
align-items: start;
}
.pdp-hero__main { position: relative; background: var(--de-sand, #eeece2); border-radius: 16px; overflow: hidden; aspect-ratio: 600 / 573; }
.pdp-hero__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Prev/next-pijltjes over de hoofdfoto (design 10321:280 / 10321:284). */
.pdp-hero__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 39px; height: 39px; padding: 0;
border: 0; border-radius: 50%;
background: #fff; color: var(--de-black, #1f1f1f);
box-shadow: 0 2px 10px rgba(31, 31, 31, .18);
cursor: pointer; z-index: 2;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pdp-hero__arrow:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
.pdp-hero__arrow svg { width: 20px; height: 20px; display: block; }
.pdp-hero__arrow--prev { left: 16px; }
.pdp-hero__arrow--next { right: 16px; }
/* Thumbnails: horizontale slider — 4 zichtbaar, meer dan 4 scrollt (geen 2e rij). */
.pdp-hero__thumbs { position: relative; display: flex; gap: 16px; margin-top: 24px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.pdp-hero__thumbs::-webkit-scrollbar { display: none; }
.pdp-hero__thumb { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--de-sand, #eeece2); padding: 0; cursor: pointer; }
.pdp-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-hero__thumb.is-active { border-color: var(--de-black, #1f1f1f); }
.pdp-hero__brand { font-family: var(--font-heading); font-size: 14px; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; color: #767674; margin: 0; }
.pdp-hero__title { font-family: var(--font-heading); font-weight: 500; font-size: 60px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 12px 0 0; }
.pdp-hero__desc { font-family: var(--font-body); font-size: 20px; line-height: 1.625; color: rgba(31, 31, 31, .8); margin: 12px 0 0; }
.pdp-hero__actions { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.pdp-hero__btn {
display: flex; align-items: center; justify-content: center;
height: 60px; padding: 0 24px; border-radius: 9999px;
font-family: var(--font-heading); font-weight: 500; font-size: 14px; letter-spacing: .35px; text-transform: uppercase;
text-decoration: none; border: 2px solid var(--de-black, #1f1f1f);
transition: background .2s ease, color .2s ease;
}
.pdp-hero__btn--primary { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
.pdp-hero__btn--primary:hover { background: transparent; color: var(--de-black, #1f1f1f); }
.pdp-hero__btn--ghost { background: transparent; color: var(--de-black, #1f1f1f); height: 64px; }
.pdp-hero__btn--ghost:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
.pdp-hero__call { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; text-decoration: none; color: var(--de-black, #1f1f1f); }
.pdp-hero__call-label { font-family: var(--font-heading); font-weight: 500; font-size: 14px; letter-spacing: .35px; text-transform: uppercase; }
.pdp-hero__call-nr { font-family: var(--font-body); font-weight: 500; font-size: 14px; }
/* USP's — desktop: eenvoudige lijst met scheidingslijn erboven (design 10257-2014). */
.pdp-hero__usps { list-style: none; margin: 40px 0 0; padding: 32px 0 0; border-top: 1px solid var(--de-divider, #ebe8e2); display: flex; flex-direction: column; gap: 16px; }
.pdp-hero__usps li { display: flex; gap: 16px; align-items: flex-start; }
.pdp-hero__usp-icon { flex: 0 0 24px; width: 24px; height: 24px; color: var(--de-black, #1f1f1f); margin-top: 2px; }
.pdp-hero__usp-icon svg { width: 24px; height: 24px; display: block; }
.pdp-hero__usp-text { display: flex; flex-direction: column; }
.pdp-hero__usp-text strong { font-family: var(--font-heading); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--de-black, #1f1f1f); }
.pdp-hero__usp-text span { font-family: var(--font-body); font-size: 14px; line-height: 1.43; color: rgba(31, 31, 31, .6); }
/* Mobiel: omrande tabel (design 10305-11367). */
@media (max-width: 767px) {
.pdp-hero__usps { margin: 32px 0 0; padding: 0; border: 1px solid var(--de-divider, #ebe8e2); border-radius: 12px; overflow: hidden; gap: 0; }
.pdp-hero__usps li { gap: 12px; padding: 14px 16px 15px; border-bottom: 1px solid var(--de-divider, #ebe8e2); }
.pdp-hero__usps li:last-child { border-bottom: 0; }
.pdp-hero__usp-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.pdp-hero__usp-icon svg { width: 20px; height: 20px; }
.pdp-hero__usp-text strong { font-size: 14px; line-height: 1.4; }
.pdp-hero__usp-text span { font-size: 13px; line-height: 1.4; }
}
/* Stylist-hulpblok — alleen op mobiel (design 10305-11415). */
.pdp-stylist { display: none; }
@media (max-width: 767px) {
.pdp-stylist { display: block; padding: 24px 16px 0; }
.pdp-stylist__inner { background: var(--de-sand, #eeece2); border-radius: 12px; padding: 16px; display: flex; gap: 16px; align-items: center; }
.pdp-stylist__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.pdp-stylist__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-stylist__text { min-width: 0; }
.pdp-stylist__label { font-family: var(--font-heading); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #767674; margin: 0; }
.pdp-stylist__naam { font-family: var(--font-heading); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--de-black, #1f1f1f); margin: 2px 0 8px; }
.pdp-stylist__phone { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--de-red, #836158); text-decoration: none; }
.pdp-stylist__phone svg { width: 14px; height: 14px; }
}
@media (max-width: 991px) {
.pdp-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px; }
}
@media (max-width: 767px) {
.pdp-hero__inner { padding: 48px 16px; }
}
/* ----------------------------------------------------------------------------
22. PRODUCTDETAIL — ACCORDION — design 10258-3048
---------------------------------------------------------------------------- */
.pdp-accordion { background: #f7f6f2; }
.pdp-accordion__inner { max-width: 976px; margin: 0 auto; padding: 104px 24px 96px; box-sizing: border-box; }
/* Mobiel: 104px boven "Het verhaal" was te veel na de hero; 24px + 32px kop-padding = 56px, het mobiele sectieritme. */
@media (max-width: 767px) { .pdp-accordion__inner { padding-top: 24px; padding-bottom: 0; } }
.pdp-accordion__item { border-bottom: 1px solid var(--de-divider, #ebe8e2); }
.pdp-accordion__head {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 32px 0; background: none; border: 0; cursor: pointer; text-align: left;
font-family: var(--font-heading); font-weight: 500; font-size: 24px; color: var(--de-black, #1f1f1f);
}
.pdp-accordion__head > span:first-child { transition: opacity .2s ease; }
.pdp-accordion__head:hover > span:first-child,
.pdp-accordion__head:focus-visible > span:first-child { opacity: .65; } /* zelfde hover als het hoofdmenu */
.pdp-accordion__icon { flex: 0 0 24px; width: 24px; height: 24px; color: var(--de-black, #1f1f1f); transition: transform .3s ease; }
.pdp-accordion__icon svg { width: 24px; height: 24px; display: block; }
.pdp-accordion__item.is-open .pdp-accordion__icon { transform: rotate(180deg); }
/* Soepele animatie via grid-template-rows (0fr → 1fr) i.p.v. een vaste max-height. */
.pdp-accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.pdp-accordion__item.is-open .pdp-accordion__body { grid-template-rows: 1fr; }
.pdp-accordion__clip { overflow: hidden; min-height: 0; }
.pdp-accordion__content { padding: 0 0 48px; font-family: var(--font-body); font-size: 20px; line-height: 1.625; color: rgba(31, 31, 31, .8); }
.pdp-accordion__content p { margin: 0 0 24px; }
.pdp-accordion__content p:last-child { margin-bottom: 0; }
.pdp-accordion__content ul, .pdp-accordion__content ol { margin: 0 0 24px; padding-left: 1.25em; }
/* ----------------------------------------------------------------------------
23. PRODUCTDETAIL — COMPLETE THE LOOK — design 10257-2169
---------------------------------------------------------------------------- */
.complete-look { background: #f7f6f2; } /* zand pas vanaf 1024px (zie onder) */
@media (min-width: 1024px) { .complete-look { background: var(--de-sand, #eeece2); } }
.complete-look__inner { max-width: 1312px; margin: 0 auto; padding: 104px 24px; box-sizing: border-box; }
.complete-look__title { font-family: var(--font-heading); font-weight: 500; font-size: 48px; line-height: 1.25; text-align: left; color: var(--de-black, #1f1f1f); margin: 0 0 56px; }
@media (min-width: 1024px) { .complete-look__title { text-align: center; } }
.complete-look__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.complete-look__grid .product-card { width: 100%; max-width: none; flex: none; }
@media (max-width: 1023px) { .complete-look__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 767px) {
.complete-look__inner { padding: 56px 16px; }
.complete-look__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ----------------------------------------------------------------------------
24. MERKEN (pagebuilder-laag) — per categorie tegels + filter — design 10265-8019 / 10265-8002
---------------------------------------------------------------------------- */
.merken { background: #f7f6f2; }
.merken__filterbar { background: #f7f6f2; }
.merken__filter {
max-width: 1312px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
}
/* 3px scheidingslijn onder het filter, gecentreerd max 1264px. */
.merken__filterbar::after {
content: "";
display: block;
height: 3px;
background: var(--de-divider, #ebe8e2);
max-width: 1264px;
width: calc(100% - 48px);
margin: 0 auto;
}
.merken__inner { max-width: 1312px; margin: 0 auto; padding: 104px 24px; box-sizing: border-box; }
.merken__group--divider { border-top: 3px solid var(--de-divider, #ebe8e2); margin-top: 40px; padding-top: 64px; }
.merken__group.is-hidden { display: none; }
.merken__group--nodivider { border-top: 0; margin-top: 0; padding-top: 0; }
.merken__count { font-family: var(--font-heading); font-size: 14px; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; color: #767674; margin: 0; }
.merken__cat { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 8px 0 0; }
.merken__tiles { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.merken__tile {
background: var(--de-sand, #eeece2);
border-radius: 12px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
box-sizing: border-box;
}
.merken__tile span { font-family: var(--font-heading); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--de-black, #1f1f1f); }
.merken__tile--link { text-decoration: none; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.merken__tile--link:hover { background: #e6e3d6; transform: translateY(-2px); text-decoration: none; }
.merken__tile--link span { transition: color .2s ease; }
@media (max-width: 1023px) {
.merken__tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.merken__filter { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 40px 16px 16px; scrollbar-width: none; }
.merken__filter::-webkit-scrollbar { display: none; }
.merken__filterbar::after { width: calc(100% - 32px); }
.merken__inner { padding: 48px 16px; }
.merken__group--divider { margin-top: 32px; padding-top: 40px; }
.merken__cat { font-size: 28px; }
.merken__tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.merken__tile { min-height: 130px; padding: 16px; }
}
/* ----------------------------------------------------------------------------
25. GEDEELDE SECTIE-KOP + DIENSTEN (info-kaarten) — design 10269-11646
---------------------------------------------------------------------------- */
.pb-head__eyebrow { font-family: var(--font-heading); font-size: 14px; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; color: #767674; margin: 0; }
.pb-head__title { font-family: var(--font-heading); font-weight: 500; font-size: 48px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 16px 0 0; }
.diensten__inner { max-width: 1312px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; }
.diensten__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.diensten__card { background: var(--de-sand, #eeece2); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.diensten__bar { width: 32px; height: 3px; border-radius: 9999px; background: var(--de-red, #836158); }
.diensten__card-title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--de-black, #1f1f1f); margin: 0; }
.diensten__card-text { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: #767674; margin: 0; }
/* ----------------------------------------------------------------------------
26. WERKWIJZE (genummerde stappen) — design 10269-11709
---------------------------------------------------------------------------- */
.werkwijze__inner { max-width: 1312px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; }
.werkwijze__steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.werkwijze__step { border-top: 3px solid var(--de-divider, #ebe8e2); padding-top: 35px; display: flex; flex-direction: column; gap: 16px; }
.werkwijze__step--first { border-top-color: var(--de-black, #1f1f1f); }
.werkwijze__num { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 1; color: var(--de-red, #836158); }
.werkwijze__step-title { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--de-black, #1f1f1f); margin: 0; }
.werkwijze__step-text { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: #767674; margin: 0; }
/* ----------------------------------------------------------------------------
27. PROJECTEN (kaarten) — design 10269-11844
---------------------------------------------------------------------------- */
.projecten__inner { max-width: 1312px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; }
.projecten__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.projecten__btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 33px; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--de-black, #1f1f1f); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.projecten__btn:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
.projecten__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.project-card__media { background: var(--de-sand, #eeece2); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.project-card:hover .project-card__media img { transform: scale(1.03); }
.project-card__title { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.5; color: var(--de-black, #1f1f1f); margin: 24px 0 0; }
.project-card__plaats { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.5; color: #767674; margin: 4px 0 0; }
/* Tekst+afbeelding — knoppen (i.p.v. pijl-link) */
.tekst-afb__buttons { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.tekst-afb__btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 9999px; border: 2px solid var(--de-black, #1f1f1f); font-family: var(--font-heading); font-weight: 500; font-size: 14px; letter-spacing: .35px; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease; }
.tekst-afb__btn--primary { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
.tekst-afb__btn--primary:hover { background: transparent; color: var(--de-black, #1f1f1f); }
.tekst-afb__btn--secondary { background: transparent; color: var(--de-black, #1f1f1f); }
.tekst-afb__btn--secondary:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
@media (max-width: 1023px) {
.diensten__grid, .werkwijze__steps, .projecten__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.pb-head__title { font-size: 32px; }
.diensten__inner, .werkwijze__inner, .projecten__inner { padding: 56px 16px; }
.diensten__grid, .werkwijze__steps, .projecten__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
.projecten__head { flex-direction: column; align-items: flex-start; }
}
/* ----------------------------------------------------------------------------
28. PAGINA-SPECIFIEK — Styling & advies (alleen sizing/lijn; achtergronden
worden per laag geregeld via het "Achtergrond"-veld → .pb-bg--*).
---------------------------------------------------------------------------- */
.page-styling-advies .tekst-afb { border-bottom: 1px solid #ebe8e2; }
.page-styling-advies .tekst-afb__media { aspect-ratio: 632 / 474; }
.page-styling-advies .tekst-afb__title { font-size: 40px; } /* design styling-advies = 40px (Baobab = 60px) */
/* Tekst+afbeelding op styling-advies: foto 632×474 op grote schermen. */
@media (min-width: 901px) {
.page-styling-advies .tekst-afb__inner { grid-template-columns: 632px 1fr; gap: 64px; }
}
/* ----------------------------------------------------------------------------
29. MOBIELE LETTERGROOTTES (Figma desktop = vaste max; mobiel kleiner, geen vw)
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
.hero--standaard .hero__title { font-size: 40px; }
.hero--standaard .hero__text { font-size: 18px; }
.hero__eyebrow { font-size: 22px; }
.hero--home .hero__title { font-size: 44px; }
.collectie__list { font-size: 44px; }
.product-single__title { font-size: 30px; }
.tekst-afb__title { font-size: 34px; }
.pdp-hero__title { font-size: 34px; }
.complete-look__title { font-size: 32px; }
}
/* ----------------------------------------------------------------------------
30. PER-LAAG ACHTERGROND (color picker per laag in wp-admin → Stijl-tab)
---------------------------------------------------------------------------- */
.pb-layer { display: block; }
.pb-bg--wit > * { background: #fff !important; }
.pb-bg--offwhite > * { background: #f7f6f2 !important; }
.pb-bg--zand > * { background: var(--de-sand, #eeece2) !important; }
/* ----------------------------------------------------------------------------
31. AFBEELDINGEN (rij) — twee foto's naast elkaar, afgerond, gelijke hoogte.
Design 10269-11362: 2× 624×468, gap 16, binnen 1264.
---------------------------------------------------------------------------- */
.afb-duo__inner { max-width: 1264px; margin: 0 auto; padding: 0 24px 96px; }
.afb-duo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.afb-duo__item { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 624 / 468; }
.afb-duo__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
.afb-duo__inner { padding: 0 16px 56px; }
/* Mobiel: 2 kolommen i.p.v. elke foto schermbreed (10 foto's waren ~2850px hoog); groot via de lightbox. */
.afb-duo__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.afb-duo__item { border-radius: 8px; }
}
/* ----------------------------------------------------------------------------
32. SHOWROOM-INFO — twee kolommen: openingstijden (dynamisch) + adres/kaart.
Design 10269-11369. Titels 40px Outfit Medium (geen vw).
---------------------------------------------------------------------------- */
.showroom-info__inner { max-width: 1264px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.showroom-info__col { display: flex; flex-direction: column; gap: 32px; }
.showroom-info__head { display: flex; flex-direction: column; }
.showroom-info__title { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 44px; color: var(--de-black, #1f1f1f); margin: 16px 0 0; }
/* Openingstijden-tabel */
.showroom-hours { list-style: none; margin: 0; padding: 0; }
.showroom-hours__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 15px; border-bottom: 1px solid #d4d0c8; }
.showroom-hours__day { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--de-black, #1f1f1f); }
.showroom-hours__row.is-today .showroom-hours__day { font-weight: 500; }
.showroom-hours__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 9999px; }
.showroom-hours__dot.is-open { background: #34a853; }
.showroom-hours__dot.is-closed { background: #d64545; }
.showroom-hours__time { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--de-black, #1f1f1f); }
.showroom-hours__time.is-closed { color: #767674; }
.showroom-info__note { font-family: var(--font-body); font-size: 13px; line-height: 20.8px; color: #767674; margin: 0; }
.showroom-info__note a { color: var(--de-black, #1f1f1f); text-decoration: underline; }
.showroom-info__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; padding: 13px 33px; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; text-decoration: none; transition: opacity .2s ease; }
.showroom-info__btn:hover { opacity: .88; }
/* Adres / contact */
.showroom-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.showroom-contact__item { display: flex; gap: 12px; align-items: center; }
.showroom-contact__item--address { align-items: flex-start; }
.showroom-contact__icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--de-black, #1f1f1f); }
.showroom-contact__item--address .showroom-contact__icon { margin-top: 2px; }
.showroom-contact__icon svg { display: block; width: 100%; height: 100%; }
.showroom-contact__text { font-family: var(--font-body); font-size: 17px; line-height: 27.2px; color: var(--de-black, #1f1f1f); text-decoration: none; }
.showroom-contact__item--address .showroom-contact__text { display: flex; flex-direction: column; }
a.showroom-contact__text:hover { text-decoration: underline; }
/* Kaart */
.showroom-info__map { position: relative; border-radius: 16px; overflow: hidden; }
.showroom-info__map iframe { display: block; width: 100%; height: 320px; border: 0; }
.showroom-info__map-btn { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); font-family: var(--font-body); font-size: 16px; line-height: 24px; padding: 13px 32px; border-radius: 64px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); white-space: nowrap; transition: opacity .2s ease; }
.showroom-info__map-btn:hover { opacity: .9; }
@media (max-width: 900px) {
.showroom-info__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 16px; }
.showroom-info__title { font-size: 30px; }
.showroom-info__map iframe { height: 280px; }
}
/* ----------------------------------------------------------------------------
33. MOBIELE PAGE-HEADER (standaard hero) — tekst-only op off-white, géén foto,
met pretiteltje. Design 10308-305. Geldt voor styling-advies, producten,
projecten, showroom (alle 'standaard' hero's).
---------------------------------------------------------------------------- */
/* Desktop: standaard-hero toont géén pretiteltje (design = alleen titel+tekst over beeld). */
.hero--standaard .hero__pretitle { display: none; }
@media (max-width: 767px) {
.hero.hero--standaard {
margin: 0;
min-height: 0;
border-radius: 0;
overflow: visible;
background: #f7f6f2;
color: var(--de-black, #1f1f1f);
}
/* Geen achtergrondbeeld of overlay op mobiel. */
.hero--standaard .hero__bg,
.hero--standaard .hero__video,
.hero--standaard.hero--has-media::before { display: none; }
.hero--standaard .hero__inner,
.hero--standaard.hero--align-midden .hero__inner {
padding: 48px 24px 0;
min-height: 0;
max-width: 1264px;
margin: 0 auto;
align-items: flex-start;
text-align: left;
gap: 20px;
}
.hero--standaard .hero__pretitle {
display: block;
font-family: var(--font-heading);
font-size: 14px;
line-height: 16.8px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #767674;
opacity: 1;
margin: 0;
}
.hero--standaard .hero__title { color: var(--de-black, #1f1f1f); line-height: 44px; }
.hero--standaard .hero__text { color: #767674; line-height: 27px; opacity: 1; max-width: none; margin: 0; }
/* Geen hero-knoppen op mobiel — de sticky bottom-CTA dekt 'plan een afspraak' al af. */
.hero--standaard .hero__buttons { display: none; }
/* Uitzondering Showroom: de Routebeschrijving-knop blijft (sticky CTA dekt die niet),
alleen de afspraak-knop valt weg. Donker-op-licht zodat hij zichtbaar is. */
.page-showroom .hero--standaard .hero__buttons { display: flex; margin-top: -8px; }
.page-showroom .hero--standaard .btn--primary { display: none; }
.page-showroom .hero--standaard .btn--secondary { background: transparent; color: var(--de-black, #1f1f1f); border-color: var(--de-black, #1f1f1f); }
.page-showroom .hero--standaard .btn--secondary:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
/* Geen ruimte onder de hero; de 40px tussen hero en eerste laag hoort BIJ die laag
(zodat een eventuele achtergrondkleur die ruimte meepakt). Geldt voor elke
page-header met standaard-hero, ongeacht het type van de eerste laag. */
.hero--standaard + .pb-layer > * > [class*="__inner"] { padding-top: 40px; }
}
/* ----------------------------------------------------------------------------
34. PAGINA-SPECIFIEK — Showroom: diensten-laag sluit aan op de hero (geen
extra padding-top boven "Wat kun je bij ons verwachten?").
---------------------------------------------------------------------------- */
.page-showroom .diensten__inner { padding-top: 0; }
/* ----------------------------------------------------------------------------
35. PROJECTEN — overzicht (CPT-grid) + detailpagina. Design 10266-8499 / 10266-9388.
---------------------------------------------------------------------------- */
/* Overzicht-grid */
.projecten-overzicht__inner { max-width: 1312px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; }
.projecten-overzicht__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.project-card { display: flex; flex-direction: column; text-decoration: none; }
.project-card:hover { text-decoration: none; } /* globale a:hover-underline (qz-pink) uitzetten */
.project-card.is-hidden { display: none; }
.project-card__media { background: var(--de-sand, #eeece2); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.project-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.project-card:hover .project-card__img { transform: scale(1.04); }
.project-card__title { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.5; color: var(--de-black, #1f1f1f); margin: 24px 0 0; }
.project-card__plaats { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 21px; color: #767674; margin: 4px 0 0; }
.projecten-overzicht__more-wrap { display: flex; justify-content: center; margin-top: 48px; }
.projecten-overzicht__more { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--de-black, #1f1f1f); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; padding: 15px 40px; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.projecten-overzicht__more:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
/* Detailpagina */
.project-single__inner { max-width: 1312px; margin: 0 auto; padding: 56px 24px 104px; box-sizing: border-box; }
.project-single__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; color: #767674; text-decoration: none; transition: color .2s ease; }
.project-single__back:hover { color: var(--de-black, #1f1f1f); }
.project-single__back-icon { width: 16px; height: 16px; display: inline-flex; }
.project-single__back-icon svg { width: 100%; height: 100%; }
.project-single__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 32px; }
.project-single__labels { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-family: var(--font-heading); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #767674; }
.project-single__title { font-family: var(--font-heading); font-weight: 500; font-size: 64px; line-height: 1.05; color: var(--de-black, #1f1f1f); margin: 12px 0 0; }
.project-single__plaats { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: #767674; }
.project-single__plaats-icon { width: 16px; height: 16px; display: inline-flex; flex: 0 0 16px; }
.project-single__plaats-icon svg { width: 100%; height: 100%; }
.project-single__soort { flex: 0 0 auto; display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--de-black, #1f1f1f); background: transparent; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; padding: 13px 33px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.project-single__soort:hover { background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
/* Galerij */
.project-single__gallery { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.project-gallery__hero { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1270 / 542; }
.project-gallery__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.project-gallery__item { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 627 / 468; }
/* Masonry als grid: de grote foto (kolom 1) spant álle rijen die de kleine foto's
(kolom 2) opbouwen, dus hij is exact even hoog als de stapel ernaast. */
.project-gallery__masonry { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.project-gallery__big { grid-column: 1; margin: 0; border-radius: 8px; overflow: hidden; position: relative; min-height: 0; } /* grid-row span via inline style = aantal kleine foto's */
.project-gallery__item--small { grid-column: 2; aspect-ratio: 417 / 329; }
.project-gallery__hero img, .project-gallery__item img, .project-gallery__big img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Grote foto vult zijn (gespande) cel zonder de rijhoogtes op te blazen. */
.project-gallery__big img { position: absolute; inset: 0; }
/* "Laad meer": foto's na de eerste 11 verborgen tot de knop (deco-enzo.js). */
.project-single__gallery figure.is-hidden { display: none; }
.project-gallery__more { display: flex; justify-content: center; margin-top: 40px; }
.project-gallery__more[hidden] { display: none; }
/* CTA-band */
.project-cta { margin: 56px 0 0; background: var(--de-sand, #eeece2); border-radius: 16px; padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.project-cta__eyebrow { font-family: var(--font-accent, 'Caveat', cursive); font-size: 24px; line-height: 28.8px; color: var(--de-red, #836158); margin: 0; }
.project-cta__title { font-family: var(--font-heading); font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 8px 0 0; }
.project-cta__btn { flex: 0 0 auto; display: inline-flex; align-items: center; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; padding: 13px 33px; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; text-decoration: none; transition: opacity .2s ease; }
.project-cta__btn:hover { opacity: .9; }
@media (max-width: 1023px) {
.projecten-overzicht__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 767px) {
.projecten-overzicht__inner { padding: 56px 16px; }
.projecten-overzicht__grid { grid-template-columns: 1fr; gap: 32px; }
.project-single__inner { padding: 32px 16px 56px; }
.project-single__head-row { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 24px; }
.project-single__title { font-size: 34px; }
/* Mobiel: hoofdfoto schermbreed, de rest in 2 kolommen (was alles schermbreed = ~3000px); groot via de lightbox. */
.project-single__gallery { gap: 8px; }
.project-gallery__duo,
.project-gallery__masonry { grid-template-columns: 1fr 1fr; gap: 8px; }
.project-gallery__big { grid-column: auto; grid-row: auto !important; aspect-ratio: 4 / 3; } /* !important: overschrijft de inline grid-row-span van desktop */
.project-gallery__item, .project-gallery__item--small { grid-column: auto; aspect-ratio: 4 / 3; }
.project-cta { flex-direction: column; align-items: flex-start; padding: 40px 24px; margin-top: 40px; }
.project-cta__title { font-size: 26px; }
}
/* ----------------------------------------------------------------------------
36. TOP-BAR op mobiel — strakker (geen buitenmarge, iets ruimere binnenkant).
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
.header-top,
.header-top.position-absolute,
.header-top.position-fixed { padding: 0; }
.header-top .th-grid { padding: 10px 24px; }
}
/* ----------------------------------------------------------------------------
37. CONTACT — formulier (links) + contactgegevens-kaart (rechts). Design 10265-6995.
---------------------------------------------------------------------------- */
.contact-form__inner { max-width: 1312px; margin: 0 auto; padding: 96px 24px 104px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
.contact-form__head { display: flex; flex-direction: column; margin-bottom: 24px; }
.contact-form__title { font-family: var(--font-heading); font-weight: 500; font-size: 60px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 4px 0 0; }
.contact-form__intro { font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: #767674; margin: 20px 0 0; max-width: 760px; }
.contact-form__placeholder { font-family: var(--font-body); font-size: 15px; color: #767674; padding: 24px; border: 1px dashed #d4d0c8; border-radius: 8px; }
/* Formulier (Gravity Forms output) afgestemd op het design */
.contact-form__form .gfield_label,
.contact-form__form label {
font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 13px !important;
line-height: 19.5px; letter-spacing: 0.8px; text-transform: uppercase;
color: var(--de-black, #1f1f1f) !important; margin-bottom: 6px; display: block;
}
/* Verplicht-asterisk in merkkleur; GF-legenda ("* geeft vereiste velden aan") weg. */
.contact-form__form .gfield_required,
.contact-form__form .gfield_required_asterisk { color: var(--de-red, #836158) !important; }
.contact-form__form .gform_required_legend { display: none !important; }
/* Niet-verplichte velden krijgen "(optioneel)" in normale (niet-uppercase) stijl. */
.contact-form__form .gfield:not(.gfield_contains_required) > .gfield_label::after {
content: " (optioneel)"; text-transform: none; letter-spacing: 0; font-weight: 400; color: #767674;
}
/* Uniforme 24px tussen alle velden (rijen én kolommen) — geen dubbele marge/gap. */
.contact-form__form .gform_fields { grid-row-gap: 24px !important; grid-column-gap: 24px !important; row-gap: 24px !important; column-gap: 24px !important; }
.contact-form__form .gfield { margin-bottom: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
/* Datumveld (voorkeursdatum) altijd over de volle breedte, met kalender-icoon in het vak. */
.contact-form__form .gfield--type-date { grid-column: 1 / -1 !important; }
.contact-form__form .gfield--type-date .ginput_container { width: 100%; position: relative; }
.contact-form__form .gform_fields .gfield--type-date input { width: 100% !important; padding-right: 48px !important; }
.contact-form__form .gfield--type-date .ginput_container::after {
content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231f1f1f'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'/%3E%3Cpath%20d='M16%202v4M8%202v4M3%2010h18'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: contain;
}
/* Eventueel GF-eigen datepicker-icoon verbergen (we tonen ons eigen icoon in het veld). */
.contact-form__form .gfield--type-date img.ui-datepicker-trigger,
.contact-form__form .gfield--type-date .gfield_date_icon { display: none !important; }
.contact-form__form input[type="text"],
.contact-form__form input[type="email"],
.contact-form__form input[type="tel"],
.contact-form__form input[type="url"],
.contact-form__form input[type="number"],
.contact-form__form input[type="date"],
.contact-form__form select,
.contact-form__form textarea {
width: 100%; box-sizing: border-box; border: 2px solid transparent !important; border-radius: 8px !important;
padding: 14px 18px !important; font-family: var(--font-body); font-size: 16px; line-height: 1.4;
background: var(--de-sand, #eeece2) !important; color: var(--de-black, #1f1f1f); transition: border-color .2s ease;
}
.contact-form__form textarea,
.contact-form__form .gfield textarea.large { height: 172px !important; min-height: 120px; resize: vertical; }
.contact-form__form input:focus, .contact-form__form select:focus, .contact-form__form textarea:focus { outline: none; border-color: var(--de-black, #1f1f1f) !important; }
.contact-form__form input::placeholder, .contact-form__form textarea::placeholder { color: #767674; opacity: 1; }
/* Validatie-meldingen in huisstijl: terracotta (--de-red) i.p.v. generiek rood, geen roze vlakken.
Melding staat BOVEN het invoerveld (onder het label), met een klein !-icoon. */
.contact-form__form .gfield { display: flex; flex-direction: column; }
.contact-form__form .gfield_label { order: 0; }
.contact-form__form .gfield_validation_message,
.contact-form__form .gfield_description.validation_message,
.contact-form__form .validation_message {
order: 1; display: flex; align-items: center; gap: 6px;
margin: 0 0 8px !important; padding: 0 !important;
background: none !important; border: 0 !important; border-radius: 0 !important;
color: var(--de-red, #836158) !important; font-family: var(--font-body) !important; font-size: 13px !important;
font-weight: 500 !important; line-height: 1.4 !important;
}
.contact-form__form .gfield_validation_message::before {
content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1%205h2v7h-2zm0%209h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1%205h2v7h-2zm0%209h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact-form__form .ginput_container { order: 2; }
.contact-form__form .gfield_error input,
.contact-form__form .gfield_error textarea,
.contact-form__form .gfield_error select { border-color: var(--de-red, #836158) !important; }
.contact-form__form .gfield_error input:focus,
.contact-form__form .gfield_error textarea:focus,
.contact-form__form .gfield_error select:focus { border-color: var(--de-black, #1f1f1f) !important; }
/* Algemene foutmelding bovenaan: zandvlak met terracotta accentlijn, geen rode focusrand. */
.contact-form__form .gform_validation_errors {
background: var(--de-sand, #eeece2) !important; border: 0 !important; border-left: 3px solid var(--de-red, #836158) !important;
border-radius: 8px !important; box-shadow: none !important; outline: none !important;
padding: 16px 20px 16px 52px !important; margin: 0 0 24px !important;
}
.contact-form__form .gform_validation_errors > h2 {
color: var(--de-black, #1f1f1f) !important; font-family: var(--font-body) !important; font-size: 15px !important;
font-weight: 500 !important; line-height: 1.5 !important; margin: 0 !important;
}
.contact-form__form .gform_validation_errors .gform-icon { color: var(--de-red, #836158) !important; font-size: 22px !important; left: 18px !important; }
.contact-form__form .gform_footer { margin-top: 8px; }
.contact-form__form .gform_footer input[type="submit"],
.contact-form__form button[type="submit"],
.contact-form__form input[type="submit"] {
display: inline-flex; align-items: center; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2);
border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; padding: 13px 33px;
font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; cursor: pointer; transition: opacity .2s ease;
}
.contact-form__form .gform_footer input[type="submit"]:hover,
.contact-form__form button[type="submit"]:hover,
.contact-form__form input[type="submit"]:hover {
background: var(--de-black, #1f1f1f); /* qstylez qz-pink hover uit section.css overrulen */
border-color: var(--de-black, #1f1f1f);
opacity: .9;
}
/* Contactgegevens-kaart */
.contact-form__aside { display: flex; flex-direction: column; gap: 24px; }
.contact-card { background: var(--de-sand, #eeece2); border-radius: 16px; padding: 32px; }
.contact-card__title { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--de-black, #1f1f1f); margin: 0 0 24px; }
.contact-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-card__item { display: flex; gap: 12px; align-items: center; }
.contact-card__item--top { align-items: flex-start; }
.contact-card__icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--de-black, #1f1f1f); }
.contact-card__item--top .contact-card__icon { margin-top: 2px; }
.contact-card__icon svg, .contact-card__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.contact-card__text { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--de-black, #1f1f1f); text-decoration: none; }
.contact-card__item--top .contact-card__text { display: flex; flex-direction: column; }
a.contact-card__text:hover { text-decoration: underline; }
.contact-card__hours { display: flex; flex-direction: column; gap: 4px; }
.contact-card__hours-row { display: flex; gap: 20px; }
.contact-card__hours-day { flex: 0 0 80px; width: 80px; font-family: var(--font-body); font-size: 14px; line-height: 21px; color: var(--de-black, #1f1f1f); }
.contact-card__hours-time { font-family: var(--font-body); font-size: 14px; line-height: 21px; color: var(--de-black, #1f1f1f); }
.contact-card__hours-time.is-closed { color: #767674; }
.contact-card__hours-note { font-family: var(--font-body); font-size: 12px; line-height: 18px; color: #767674; margin-top: 6px; }
/* Kaart */
.contact-map { position: relative; border-radius: 16px; overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 260px; border: 0; }
.contact-map__btn { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); font-family: var(--font-body); font-size: 14px; line-height: 21px; padding: 9px 20px; border-radius: 64px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); white-space: nowrap; }
@media (max-width: 900px) {
.contact-form__inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 16px 64px; }
.contact-form__title { font-size: 34px; }
}
/* ----------------------------------------------------------------------------
38. FAQ (veelgestelde vragen) — intro links + accordeon rechts. Design 10275-12785.
---------------------------------------------------------------------------- */
.faq__inner { max-width: 1264px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 80px; align-items: start; }
.faq__title { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 44px; color: var(--de-black, #1f1f1f); margin: 16px 0 0; }
.faq__text { font-family: var(--font-body); font-size: 16px; line-height: 25.6px; color: #767674; margin: 16px 0 0; }
.faq__text a { color: var(--de-black, #1f1f1f); text-decoration: underline; }
.faq__text a:hover,
.faq__text a:focus-visible { text-decoration: none; }
.faq__item { border-bottom: 1px solid #d4d0c8; }
.faq__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: none; border: 0; cursor: pointer; padding: 20px 0; text-align: left; }
.faq__q { font-family: var(--font-heading); font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--de-black, #1f1f1f); transition: color .2s ease; }
/* Hover: vraag in het terracotta-accent (zelfde als de mega-menu-links). */
.faq__head:hover .faq__q,
.faq__head:focus-visible .faq__q { color: var(--de-red, #836158); }
.faq__icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid #ccc9c0; border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--de-black, #1f1f1f); transition: opacity .2s ease; }
.faq__icon::before { left: 6px; right: 6px; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { top: 6px; bottom: 6px; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq__item.is-open .faq__body { grid-template-rows: 1fr; }
.faq__clip { overflow: hidden; min-height: 0; }
.faq__answer { padding: 0 0 24px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: #767674; }
/* FAQ-sectie pas zand vanaf 1024px; op mobiel meekleuren met de pagina. */
@media (max-width: 1023px) { .pb-bg--zand > .faq { background: #f7f6f2 !important; } }
.faq__answer p { margin: 0 0 12px; }
.faq__answer p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.faq__inner { grid-template-columns: 1fr; gap: 32px; padding: 56px 16px; }
.faq__title { font-size: 30px; }
}
/* ----------------------------------------------------------------------------
39. BEDANKT-pagina — bevestiging na formulier-verzending.
---------------------------------------------------------------------------- */
.bedankt__inner { max-width: 640px; margin: 0 auto; padding: 120px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bedankt__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--de-sand, #eeece2); color: var(--de-red, #836158); margin-bottom: 24px; }
.bedankt__icon svg { width: 34px; height: 34px; }
.bedankt__title { font-family: var(--font-heading); font-weight: 500; font-size: 48px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 0; }
.bedankt__text { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: #767674; margin: 16px 0 0; }
.bedankt__text p { margin: 0 0 12px; }
.bedankt__text p:last-child { margin-bottom: 0; }
.bedankt__btn { display: inline-flex; align-items: center; margin-top: 32px; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; padding: 13px 33px; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; text-decoration: none; transition: opacity .2s ease; }
.bedankt__btn:hover { opacity: .9; }
@media (max-width: 767px) {
.bedankt__inner { padding: 72px 16px; }
.bedankt__title { font-size: 32px; }
}
/* ----------------------------------------------------------------------------
40. 404 — pagina niet gevonden (Deco Enzo-stijl).
---------------------------------------------------------------------------- */
.error404__inner { max-width: 640px; margin: 0 auto; padding: 120px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.error404__eyebrow { font-family: var(--font-accent, 'Caveat', cursive); font-size: 80px; line-height: 1; color: var(--de-red, #836158); margin: 0; }
.error404__title { font-family: var(--font-heading); font-weight: 500; font-size: 48px; line-height: 1.1; color: var(--de-black, #1f1f1f); margin: 8px 0 0; }
.error404__text { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: #767674; margin: 16px 0 0; }
.error404__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.error404__btn { display: inline-flex; align-items: center; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; padding: 13px 33px; border: 1px solid var(--de-black, #1f1f1f); border-radius: 64px; text-decoration: none; transition: opacity .2s ease, background .2s ease, color .2s ease; }
.error404__btn:hover { opacity: .9; }
.error404__btn--ghost { background: transparent; color: var(--de-black, #1f1f1f); }
.error404__btn--ghost:hover { opacity: 1; background: var(--de-black, #1f1f1f); color: var(--de-white, #f7f6f2); }
@media (max-width: 767px) {
.error404__inner { padding: 72px 16px; }
.error404__eyebrow { font-size: 60px; }
.error404__title { font-size: 32px; }
}
/* ----------------------------------------------------------------------------
41. MOBIEL UITSCHUIFMENU — Deco Enzo huisstijl (was ongestyled: roze knoppen).
---------------------------------------------------------------------------- */
/* Volledige breedte (over de hele pagina) i.p.v. een smal paneel. */
.mobile-menu-content { background: #f7f6f2; padding-bottom: 110px; width: 100% !important; max-width: 100% !important; }
.mobile-menu-overlay { display: none !important; } /* paneel dekt alles, geen losse overlay nodig */
/* Bij open menu staat de body op position:fixed (scroll-lock in navigation.js); sticky werkt dan niet
en na scrollen schoven logo + menu-knop buiten beeld. Top-bar + header daarom vast bovenin, exact
zoals op scroll 0. --menu-topbar-h zet navigation.js bij openen. */
body.menu-open .header-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: #f7f6f2; }
body.menu-open .site-header,
body.menu-open.has-top-header .site-header { position: fixed; top: var(--menu-topbar-h, 0px) !important; left: 0; right: 0; }
.mobile-nav-menu { list-style: none; margin: 0; padding: 8px 0 0; }
.mobile-nav-menu > li { border-bottom: 1px solid var(--de-divider, #ebe8e2); }
.mobile-nav-menu > li:last-child { border-bottom: 0; }
.mobile-nav-menu > li > a {
display: block; padding: 17px 24px;
font-family: var(--font-heading); font-weight: 500; font-size: 18px; line-height: 1.3;
color: var(--de-black, #1f1f1f); text-decoration: none; transition: background .2s ease, color .2s ease;
}
.mobile-nav-menu > li > a:hover,
.mobile-nav-menu > li > a:focus-visible { background: var(--de-sand, #eeece2); }
/* Lelijke paarse focus-outline van het base-theme weg. */
.mobile-nav-menu a:focus,
.submenu-toggle:focus { outline: none !important; outline-offset: 0 !important; }
/* Chevron in de submenu-toggle (uit Stijl → Iconen). Draait bij openen. */
.submenu-toggle__icon {
display: block; width: 18px; height: 18px;
color: var(--de-black, #1f1f1f);
transition: transform .25s ease;
}
.submenu-toggle.is-open .submenu-toggle__icon { transform: rotate(180deg); }
/* Huidige-pagina-item: merk-stijl i.p.v. het felroze (#ff2e57) van het base-theme. */
.mobile-nav-menu .current-menu-item > a,
.mobile-nav-menu .current_page_item > a,
.mobile-nav-menu .current-menu-ancestor > a { color: var(--de-black, #1f1f1f) !important; background: var(--de-sand, #eeece2); }
.mobile-nav-menu .current-menu-item > a::before,
.mobile-nav-menu .current_page_item > a::before,
.mobile-nav-menu .current-menu-ancestor > a::before { background: var(--de-red, #836158) !important; }
/* "Plan je bezoek"-CTA blijft op desktop, maar weg in de mobiele navbar. */
@media (max-width: 1023px) {
.site-header .cta-btn--primary { display: none !important; }
}
/* CTA-knoppen onderin — merk-pills i.p.v. de roze theme-default. */
.mobile-cta-buttons { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.mobile-menu .mobile-cta-buttons .header-cta-btn {
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 14px 24px; border-radius: 64px;
font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.4;
text-decoration: none; border: 1px solid var(--de-black, #1f1f1f) !important;
transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.mobile-menu .mobile-cta-buttons .header-cta-btn--primary { background: var(--de-black, #1f1f1f) !important; color: var(--de-white, #f7f6f2) !important; }
.mobile-menu .mobile-cta-buttons .header-cta-btn--primary:hover { opacity: .9; }
.mobile-menu .mobile-cta-buttons .header-cta-btn--secondary { background: transparent !important; color: var(--de-black, #1f1f1f) !important; }
.mobile-menu .mobile-cta-buttons .header-cta-btn--secondary:hover { background: var(--de-black, #1f1f1f) !important; color: var(--de-white, #f7f6f2) !important; }
/* ----------------------------------------------------------------------------
42. LIGHTBOX — foto-slideshow (showroom "Afbeeldingen"-laag + projectdetail).
Markup: ![]()
; JS in deco-enzo.js.
---------------------------------------------------------------------------- */
.lightbox-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.lightbox-link img { transition: transform .5s ease; }
.lightbox-link:hover img { transform: scale(1.03); }
.lightbox-link:focus-visible { outline: 2px solid var(--de-black, #1f1f1f); outline-offset: -2px; }
html.lightbox-open { overflow: hidden; }
.lightbox {
position: fixed; inset: 0; z-index: 100000;
background: rgba(24, 24, 23, .94);
opacity: 0; visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.lightbox__stage {
position: absolute; inset: 0; margin: 0; box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
padding: 72px 104px;
}
.lightbox__img {
display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
object-fit: contain; border-radius: 8px; user-select: none;
transition: opacity .2s ease;
}
.lightbox__img.is-loading { opacity: 0; }
.lightbox .lightbox__btn {
position: absolute; display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; padding: 0; margin: 0;
border: 0; border-radius: 50%; box-shadow: none;
background: var(--de-white, #f7f6f2); color: var(--de-black, #1f1f1f);
cursor: pointer; transition: background .2s ease;
}
.lightbox .lightbox__btn:hover { background: var(--de-sand, #eeece2); color: var(--de-black, #1f1f1f); }
.lightbox .lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox .lightbox__btn[hidden] { display: none; }
.lightbox__btn svg { width: 22px; height: 22px; display: block; }
.lightbox .lightbox__close { top: 20px; right: 20px; }
.lightbox .lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox .lightbox__nav--prev { left: 28px; }
.lightbox .lightbox__nav--next { right: 28px; }
.lightbox__count {
position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0;
font-family: var(--font-body); font-size: 14px; line-height: 1.5; letter-spacing: .5px;
color: var(--de-white, #f7f6f2);
}
@media (max-width: 767px) {
.lightbox__stage { padding: 64px 0 84px; }
.lightbox__img { border-radius: 0; }
.lightbox .lightbox__btn { width: 44px; height: 44px; }
.lightbox .lightbox__close { top: 12px; right: 12px; }
.lightbox .lightbox__nav { top: auto; bottom: 18px; transform: none; }
.lightbox .lightbox__nav--prev { left: 16px; }
.lightbox .lightbox__nav--next { right: 16px; }
.lightbox__count { bottom: 30px; }
}
/* ============================================================================
Juridische pagina's (sjabloon Tekstpagina) + Complianz-documenten
Toegevoegd 21-09-2026 bij de livegang. Pagina's: /cookies/ (718) en
/privacybeleid/ (3), beide met de Complianz-shortcode in de paginatekst.
- Tekstpagina.php had in dit thema geen eigen opmaak: de tekst stond buiten de
container, tegen de schermrand. Nu dezelfde 1312px-container als de rest van
de site, met een leesbare kolom van 880px.
- Complianz laadt document.min.css (#cmplz-document: 14px, max-width 800px,
vaste kopmaten, grijze uitklapbalken). #cmplz-document.cmplz-document (1,1,x)
wint daarvan zonder !important.
- `cmplz-document` is op deze pagina's ook een BODY-class: gebruik altijd de
id of `div.` ervoor, nooit alleen de class.
- `.text-box * { margin: 16px 0 }` (components/pagebuilder.css) raakt elk
element in het document; `div.cmplz-document *` (0,1,1) zet dat terug.
============================================================================ */
.page-template-tekstpagina section.only-content > .inner {
max-width: 1312px;
margin: 0 auto;
padding: 32px 24px 72px;
box-sizing: border-box;
}
.page-template-tekstpagina section.only-content .content-box {
max-width: 880px;
}
.page-template-tekstpagina section.only-content .content-box > h1 {
margin: 0 0 24px;
color: var(--de-black, #1f1f1f);
}
@media (min-width: 1024px) {
.page-template-tekstpagina section.only-content > .inner {
padding: 56px 24px 104px;
}
}
/* --- reset van de algemene .text-box-marges binnen het document --- */
div.cmplz-document * {
margin: 0;
}
/* --- Document: kolombreedte en thema-typografie --- */
#cmplz-document.cmplz-document {
max-width: none;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--de-black, #1f1f1f);
text-align: left;
}
#cmplz-document.cmplz-document > :first-child { margin-top: 0; }
#cmplz-document.cmplz-document > :last-child { margin-bottom: 0; }
/* Complianz zet lege 's rond lijsten */
#cmplz-document.cmplz-document p:empty { display: none; }
#cmplz-document.cmplz-document > p {
font-size: 16px;
line-height: 1.6;
margin: 0 0 1em;
}
/* "Laatst bijgewerkt op ..." bovenaan */
#cmplz-document.cmplz-document > p:first-child {
font-size: 14px;
color: #6b6b6b;
margin-bottom: 1.5em;
}
#cmplz-document.cmplz-document > h2 {
font-family: var(--font-heading);
font-weight: 600;
font-size: 22px;
line-height: 1.25;
color: var(--de-black, #1f1f1f);
text-transform: none;
margin: 36px 0 12px;
padding: 0;
border: 0;
}
/* Tussenkopjes (5.1, 7.1, ...) zijn */
#cmplz-document.cmplz-document > .cmplz-subtitle {
font-family: var(--font-heading);
font-weight: 600;
font-size: 18px;
line-height: 1.35;
color: var(--de-black, #1f1f1f);
margin: 28px 0 8px;
}
#cmplz-document.cmplz-document > ul,
#cmplz-document.cmplz-document > ol {
margin: 0 0 1em;
padding-left: 1.25em;
}
#cmplz-document.cmplz-document > ul { list-style: disc; }
#cmplz-document.cmplz-document > ol { list-style: decimal; }
#cmplz-document.cmplz-document > ul > li,
#cmplz-document.cmplz-document > ol > li {
font-size: 16px;
line-height: 1.6;
margin: 0 0 0.4em;
padding-left: 0.25em;
}
#cmplz-document.cmplz-document li::marker { color: var(--de-black, #1f1f1f); }
/* Links: in de merkkleur (niet het roze uit de themabasis), onderstreept */
#cmplz-document.cmplz-document a {
color: var(--de-black, #1f1f1f);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: opacity .2s ease;
}
#cmplz-document.cmplz-document a:hover { opacity: .65; }
#cmplz-document.cmplz-document a:focus { border: 0; padding: 0; }
#cmplz-document.cmplz-document a:focus-visible {
outline: 2px solid var(--de-black, #1f1f1f);
outline-offset: 2px;
border-radius: 2px;
}
/* Complianz plakt een grijs pijltje achter elke externe link */
#cmplz-document.cmplz-document a[target="_blank"]::after {
content: none;
display: none;
}
/* --- Uitklappers als kaarten: wit op de gebroken-witte achtergrond --- */
#cmplz-document.cmplz-document .cmplz-dropdown,
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
background-color: #fff;
border: 1px solid #e6e2d9;
border-radius: 16px;
overflow: hidden;
margin: 0 0 12px;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:not(:last-child) {
margin-bottom: 12px;
}
#cmplz-document.cmplz-document .cmplz-dropdown[open],
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] {
padding-bottom: 8px;
}
#cmplz-document.cmplz-document #cmplz-cookies-overview { margin: 20px 0 0; }
#cmplz-document.cmplz-document > .cmplz-dropdown { margin-top: 16px; }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories { margin-top: 16px; }
#cmplz-document.cmplz-document .cmplz-dropdown summary {
background-color: transparent;
margin: 0;
padding: 18px 20px;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
background-color: transparent;
padding: 18px 20px;
grid-gap: 16px;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary h3,
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 17px;
line-height: 1.35;
color: var(--de-black, #1f1f1f);
margin: 0;
padding: 0;
border: 0;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary p {
font-size: 14px;
line-height: 1.4;
color: #4a4a4a;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
font-size: 14px;
font-weight: 500;
color: var(--de-black, #1f1f1f);
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input.cmplz-consent-checkbox {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--de-black, #1f1f1f);
cursor: pointer;
}
/* Chevron: dun en in de merkkleur */
#cmplz-document.cmplz-document .cmplz-dropdown summary div::after,
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open::after {
content: "";
display: block;
justify-self: center;
width: 9px;
height: 9px;
margin: 0 0 4px;
background: none;
border-right: 2px solid var(--de-black, #1f1f1f);
border-bottom: 2px solid var(--de-black, #1f1f1f);
transform: rotate(45deg);
transition: transform .25s ease;
}
#cmplz-document.cmplz-document .cmplz-dropdown[open] summary div::after {
transform: rotate(225deg);
margin: 4px 0 0;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open {
background: none;
width: 25px;
height: 25px;
transition: transform .25s ease;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open svg { display: none; }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
padding: 0 20px 12px;
font-size: 15px;
line-height: 1.6;
color: #4a4a4a;
}
#cmplz-document.cmplz-document .cmplz-dropdown p,
#cmplz-document.cmplz-document .cmplz-dropdown li,
#cmplz-document.cmplz-document .cmplz-dropdown a {
font-size: 15px;
line-height: 1.6;
}
#cmplz-document.cmplz-document .cmplz-dropdown > p,
#cmplz-document.cmplz-document .cmplz-dropdown > ul { padding: 0 20px; }
#cmplz-document.cmplz-document .cmplz-dropdown > p { margin: 0 0 .75em; }
#cmplz-document.cmplz-document .cmplz-dropdown > ul {
margin: 0 0 .75em;
padding-left: calc(20px + 1.25em);
list-style: disc;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-subtitle {
font-family: var(--font-heading);
font-weight: 600;
font-size: 16px;
color: var(--de-black, #1f1f1f);
margin: 16px 0 6px;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary + .cmplz-subtitle { margin-top: 0; }
#cmplz-document.cmplz-document .cmplz-dropdown h4,
#cmplz-document.cmplz-document .cmplz-dropdown h5 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--de-black, #1f1f1f);
}
#cmplz-document.cmplz-document .cmplz-dropdown h4 { font-size: 16px; margin: 4px 0 6px; }
#cmplz-document.cmplz-document .cmplz-dropdown h5 { font-size: 14px; }
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data { padding: 0 20px 16px; }
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description p,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data p,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description h4,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data h4 { padding: 0; }
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description p,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data p { margin: 0; }
/* Cookietabel per doel */
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose {
margin: 0 20px 12px;
border-color: #e6e2d9;
background-color: #e6e2d9;
border-radius: 8px;
overflow: hidden;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose div {
padding: 12px 14px;
font-size: 15px;
line-height: 1.5;
color: #4a4a4a;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose h4,
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose h5 { margin: 0; padding: 0; }
@media (min-width: 768px) {
#cmplz-document.cmplz-document > h2 { font-size: 26px; margin-top: 44px; }
#cmplz-document.cmplz-document > .cmplz-subtitle { font-size: 20px; }
#cmplz-document.cmplz-document .cmplz-dropdown summary,
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header { padding: 20px 24px; }
#cmplz-document.cmplz-document .cmplz-dropdown > p,
#cmplz-document.cmplz-document .cmplz-dropdown > ul,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data { padding-left: 24px; padding-right: 24px; }
#cmplz-document.cmplz-document .cmplz-dropdown > ul { padding-left: calc(24px + 1.25em); }
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose { margin-left: 24px; margin-right: 24px; }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description { padding: 0 24px 16px; }
}
@media (min-width: 1480px) {
#cmplz-document.cmplz-document > h2 { font-size: 28px; }
}
