/* ============================================
COMPONENTS — navbar, footer, buttons, cards
============================================ */
/* ---------- NAVBAR ---------- */
.nav {
position: fixed;
inset-inline: 0;
top: 0;
z-index: var(--z-nav);
height: var(--nav-h);
display: flex;
align-items: center;
background: rgba(6, 6, 8, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
}
.nav.is-scrolled {
background: rgba(6, 6, 8, 0.82);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border-color: var(--c-silver-line);
}
.nav__inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
}
.nav__brand {
display: flex;
align-items: center;
gap: var(--s-3);
font-family: var(--font-display);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
font-size: var(--fs-md);
}
.nav__brand img {
width: 60px;
height: 60px;
object-fit: contain;
filter:
drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 8px rgba(125, 34, 49, 0.35));
transition: transform var(--t-base), filter var(--t-base);
}
.nav__brand:hover img {
transform: scale(1.04);
filter:
drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 12px rgba(255, 0, 0, 0.4));
}
.nav__brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.nav__brand-text span:first-child {
color: var(--c-text);
font-size: 1.125rem;
letter-spacing: 0.02em;
}
.nav__brand-text span:last-child {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: var(--fw-med);
letter-spacing: var(--ls-wider);
color: var(--c-red);
text-transform: uppercase;
margin-top: 4px;
}
@media (max-width: 720px) {
.nav__brand img { width: 56px; height: 56px; }
.nav__brand-text span:first-child { font-size: 0.95rem; }
.nav__brand-text span:last-child { font-size: 0.5625rem; }
}
/* Mobiel — clean header: alleen logo + hamburger, geen slogan/tweede regel */
@media (max-width: 640px) {
.nav__brand img { width: 48px; height: 48px; }
.nav__brand-text span:first-child { font-size: 0.95rem; letter-spacing: 0.01em; }
.nav__brand-text span:last-child { display: none; }
}
@media (max-width: 480px) {
/* Op heel smal: alleen logo, geen brand-text */
.nav__brand img { width: 44px; height: 44px; }
.nav__brand-text { display: none; }
}
.nav__links {
display: flex;
align-items: center;
gap: var(--s-2);
}
/* ============================================
Nav cart icon (rechtsboven, badge met aantal)
============================================ */
.nav-cart {
position: relative;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
margin-left: 8px;
border-radius: 50%;
color: var(--c-text-dim, rgba(255,255,255,.7));
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
transition: color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease;
}
.nav-cart:hover {
color: #fff;
background: rgba(255, 0, 0, .12);
border-color: rgba(255, 0, 0, .4);
transform: translateY(-1px);
}
.nav-cart svg { width: 18px; height: 18px; }
.nav-cart__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: grid;
place-items: center;
background: var(--c-red, #ff0000);
color: #fff;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
line-height: 1;
border-radius: 9px;
border: 2px solid var(--c-bg, #0a0a0b);
box-shadow: 0 2px 8px rgba(255, 0, 0, .5);
}
@media (max-width: 720px) {
.nav-cart { width: 36px; height: 36px; margin-left: 4px; }
.nav-cart svg { width: 16px; height: 16px; }
}
/* ============================================
Nav mega dropdown (Reparaties / Mods)
============================================ */
.nav__item--has-mega {
position: relative;
display: inline-flex;
align-items: center;
}
/* Panel raakt de onderkant van het item (top:100%) — geen transparante gap,
dus geen 'dode zone' die flikkeren veroorzaakt bij het bewegen van menu-item
naar dropdown. De visuele afstand komt van padding-top (onzichtbare
hover-brug), niet van een gat. Links uitgelijnd onder het item. */
.mega__panel {
position: absolute;
top: 100%;
left: 0;
width: min(400px, calc(100vw - 32px));
padding-top: 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(6px);
transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s;
z-index: 30;
}
.mega__inner {
padding: 18px;
background: linear-gradient(180deg, rgba(20, 20, 24, .97), rgba(10, 10, 12, .98));
border: 1px solid var(--c-bordeaux-line);
border-radius: var(--r-md);
box-shadow:
0 20px 50px rgba(0, 0, 0, .55),
inset 0 1px 0 var(--c-silver-line);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.nav__item--has-mega.is-open .mega__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear 0s;
}
.mega__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--s-3);
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--c-silver-line);
}
.mega__eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-med);
letter-spacing: var(--ls-wider, .14em);
text-transform: uppercase;
color: var(--c-silver);
}
.mega__viewall {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--c-text-dim, rgba(255,255,255,.65));
transition: color .2s ease;
}
.mega__viewall svg { width: 14px; height: 14px; }
.mega__viewall:hover { color: #fff; }
.mega__grid {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
}
.mega__item {
display: block;
padding: 12px 14px 13px;
border-radius: var(--r-sm, 8px);
border: 1px solid transparent;
transition: background .18s ease, border-color .18s ease;
}
.mega__item:hover,
.mega__item:focus-visible {
background: var(--c-bordeaux-soft);
border-color: var(--c-bordeaux-line);
outline: none;
}
.mega__item-name {
display: block;
font-family: var(--font-body);
font-weight: var(--fw-semi, 600);
font-size: 1rem;
line-height: 1.32;
color: #fff;
letter-spacing: -0.015em;
margin-bottom: 7px;
}
.mega__item-desc {
display: block;
font-family: var(--font-body);
max-width: 38ch;
font-size: 0.78125rem;
font-weight: var(--fw-reg, 400);
line-height: 1.62;
letter-spacing: 0;
color: rgba(201, 204, 214, .68);
}
@media (max-width: 960px) {
.nav__item--has-mega .mega__panel { display: none; }
}
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
padding: var(--s-2) var(--s-3);
font-size: var(--fs-sm);
font-weight: var(--fw-med);
color: var(--c-text-dim);
border-radius: var(--r-sm);
transition: color var(--t-base);
}
.nav__link::after {
content: "";
position: absolute;
bottom: 4px;
left: var(--s-3);
right: var(--s-3);
height: 2px;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, var(--c-bordeaux), var(--c-red));
border-radius: 2px;
transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover,
.nav__link.is-active { color: var(--c-text); }
.nav__link.is-active::after,
.nav__link:hover::after { transform: scaleX(1); }
.nav__link:focus-visible {
outline: 2px solid var(--c-silver);
outline-offset: 2px;
color: var(--c-text);
}
/* Caret bij menu-items met een dropdown (draait bij openen) */
.nav__caret {
width: 11px;
height: 11px;
flex: 0 0 auto;
opacity: .65;
transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) ease;
}
.nav__item--has-mega.is-open .nav__caret {
transform: rotate(180deg);
opacity: 1;
}
.nav__cta { display: flex; align-items: center; gap: var(--s-3); }
.nav__link--account {
display: inline-flex; align-items: center;
padding: 8px 14px;
border: 1px solid var(--c-border, rgba(255,255,255,.12));
border-radius: var(--r-sm, 8px);
font-family: var(--font-mono, monospace);
font-size: var(--fs-xs, 12px);
letter-spacing: var(--ls-wide, .08em);
text-transform: uppercase;
color: var(--c-text, #fff);
transition: border-color .2s, background .2s, color .2s;
}
.nav__link--account:hover {
border-color: var(--c-brand, #ff0000);
background: rgba(255, 0, 0, .08);
color: var(--c-text, #fff);
}
.nav__link--account::after { display: none; }
.nav__toggle {
display: none;
width: 44px; height: 44px;
border-radius: var(--r-sm);
border: 1px solid var(--c-border);
align-items: center; justify-content: center;
color: var(--c-text);
}
.nav__toggle svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
.nav__links { display: none; }
.nav__toggle { display: inline-flex; }
.nav__cta .btn--ghost { display: none; }
}
/* Mobile drawer */
.drawer {
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay) + 10);
background: rgba(5,5,6,0.94);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
opacity: 0;
pointer-events: none;
/* visibility hoort hier bij opacity: zonder deze regel blijven de links van
het gesloten menu in de tab-volgorde staan en worden ze door schermlezers
voorgelezen. Op desktop moest je daardoor eerst 19 onzichtbare links
doorlopen voordat je bij de eerste knop op de pagina kwam. */
visibility: hidden;
transition: opacity var(--t-base), visibility var(--t-base);
display: flex;
flex-direction: column;
padding: var(--s-6) var(--gutter);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.drawer.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.drawer__close {
align-self: flex-end;
width: 44px; height: 44px;
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
color: var(--c-text);
display: inline-flex; align-items: center; justify-content: center;
}
.drawer__list {
display: flex; flex-direction: column;
gap: var(--s-2);
margin-top: var(--s-6);
}
.drawer__list a {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
padding: var(--s-3) 0;
border-bottom: 1px solid var(--c-border);
color: var(--c-text-dim);
transition: color var(--t-base), transform var(--t-base);
}
.drawer__list a:hover { color: var(--c-red); transform: translateX(var(--s-3)); }
/* Scroll-lock op de achtergrond wanneer het mobiele menu open is */
html.nav-locked { overflow: hidden; }
/* Zichtbare toetsenbord-focus op nav-knoppen en links */
.nav__toggle:focus-visible,
.drawer__close:focus-visible,
.drawer__sub-toggle:focus-visible { outline: 2px solid var(--c-silver); outline-offset: 2px; }
.drawer__list a:focus-visible,
.drawer__sub a:focus-visible { outline: 2px solid var(--c-silver); outline-offset: 2px; color: var(--c-text); }
/* Mobiele submenu-accordion (Reparaties / Mods): tik op de pijl om te openen.
Max. één tegelijk open (JS), pijl draait mee, jank-vrije hoogte via grid-rows. */
.drawer__group { display: flex; flex-direction: column; border-bottom: 1px solid var(--c-border); }
.drawer__row { display: flex; align-items: stretch; }
.drawer__row > a { flex: 1 1 auto; border-bottom: 0; }
.drawer__sub-toggle {
flex: 0 0 auto;
width: 56px;
min-height: 56px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-text-dim);
background: none; border: 0; cursor: pointer;
}
.drawer__caret { width: 22px; height: 22px; transition: transform var(--t-base) var(--ease-out); }
.drawer__group.is-open .drawer__sub-toggle { color: var(--c-red); }
.drawer__group.is-open .drawer__caret { transform: rotate(180deg); }
.drawer__sub {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--t-base) var(--ease-out);
}
.drawer__group.is-open .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub-inner { overflow: hidden; min-height: 0; }
.drawer__sub a {
display: block;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: var(--fw-med);
line-height: 1.45;
text-transform: none;
letter-spacing: -0.005em;
color: var(--c-text-dim);
padding: 14px var(--s-3) 14px var(--s-4);
border-bottom: 0;
}
.drawer__sub a:hover { color: var(--c-red); transform: translateX(var(--s-2)); }
@media (prefers-reduced-motion: reduce) {
.mega__panel,
.nav__caret,
.drawer,
.drawer__caret,
.drawer__sub,
.nav__link::after,
.nav__brand img { transition: none; }
}
/* ---------- BUTTONS ---------- */
.btn {
--bg: var(--c-surface-3);
--bg-hover: var(--c-surface-4);
--bd: var(--c-border-strong);
--fg: var(--c-text);
--glow: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
position: relative;
padding: 0.95rem 1.6rem;
min-height: 48px;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--bd);
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
box-shadow: var(--inset-top);
}
.btn:hover {
background: var(--bg-hover);
border-color: var(--c-red);
box-shadow: var(--inset-top), 0 8px 24px var(--glow);
transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
/* Kleur-hiërarchie: knop-vlakken in dieper rood zodat het felle
#ff0000 gereserveerd blijft voor accenten (prijzen, badges, tekst).
Hover licht op naar het felle rood = duidelijke feedback. */
.btn--primary {
--bg: var(--c-red-dark, #cc0000);
--bg-hover: var(--c-red, #ff0000);
--bd: var(--c-red, #ff0000);
--fg: #fff;
--glow: rgba(255, 0, 0, 0.35);
}
.btn--primary:hover {
box-shadow: var(--inset-top), 0 12px 32px var(--glow);
}
.btn--ghost {
--bg: transparent;
--bg-hover: var(--c-red-soft);
--bd: var(--c-border-strong);
--fg: var(--c-text);
}
.btn--icon { width: 48px; padding: 0; }
.btn--lg {
min-height: 56px;
padding: 1.1rem 2rem;
font-size: var(--fs-base);
}
.btn svg { width: 18px; height: 18px; }
/* Magnetic pill arrow */
.arrow-link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--c-text);
padding-bottom: 4px;
border-bottom: 1px solid var(--c-red);
transition: color var(--t-base), gap var(--t-base);
}
.arrow-link:hover { color: var(--c-red); gap: var(--s-3); }
.arrow-link svg { width: 16px; height: 16px; }
/* ---------- CARDS ---------- */
.card {
position: relative;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--r-lg);
padding: var(--s-5);
overflow: hidden;
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--grad-red-edge);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--t-base);
pointer-events: none;
}
.card:hover {
border-color: var(--c-border-red);
transform: translateY(-6px);
box-shadow: var(--shadow-lg), 0 32px 64px -16px rgba(255, 0, 0, 0.35);
background: rgba(18, 18, 22, 0.65);
}
.card:hover::before { opacity: 1; }
.card__media {
margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
aspect-ratio: 16 / 10;
background: var(--c-surface-3);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.85) 100%);
pointer-events: none;
}
.card__title {
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.card__desc {
font-size: var(--fs-sm);
color: var(--c-text-dim);
line-height: var(--lh-base);
margin-bottom: var(--s-5);
}
.card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.card__price {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--c-text-dim);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.card__price strong {
display: block;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--c-text);
letter-spacing: var(--ls-tight);
margin-top: 2px;
}
/* Pill/badge */
.badge {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.4rem 0.75rem;
background: var(--c-red-soft);
border: 1px solid var(--c-border-red);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-med);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-red);
}
.badge--dot::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-red);
box-shadow: 0 0 12px var(--c-red);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Status row (4 KPIs onder hoe-het-werkt) */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
padding: var(--s-6);
border: var(--glass-border);
border-radius: var(--r-lg);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
position: relative;
}
.stats::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--grad-red-edge);
padding: 1px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.stat {
display: flex;
align-items: center;
gap: var(--s-4);
}
.stat__icon {
width: 44px; height: 44px;
border-radius: var(--r-sm);
background: var(--c-red-soft);
display: grid; place-items: center;
color: var(--c-red);
flex-shrink: 0;
}
.stat__icon svg { width: 22px; height: 22px; }
.stat__label {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-md);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
}
.stat__sub {
font-size: var(--fs-xs);
color: var(--c-text-dim);
font-family: var(--font-mono);
}
@media (max-width: 800px) {
.stats { grid-template-columns: repeat(2, 1fr); padding: var(--s-4); }
}
@media (max-width: 480px) {
.stats { grid-template-columns: 1fr; }
}
/* ---------- FOOTER ---------- */
.footer {
position: relative;
z-index: 1;
border-top: 1px solid var(--c-border);
padding: var(--s-9) 0 var(--s-5);
background: rgba(2, 2, 2, 0.78);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ============================================
STACKED CIRCULAR FOOTER (nieuwe Apex design)
============================================ */
.footer-circle {
position: relative;
z-index: 1;
padding: var(--s-10) 0 var(--s-6);
background: rgba(2, 2, 2, 0.85);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-top: 1px solid var(--c-border);
overflow: hidden;
}
.footer-circle::before {
content: "";
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 60%;
background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.18) 0%, transparent 65%);
pointer-events: none;
filter: blur(40px);
}
.footer-circle__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-6);
position: relative;
z-index: 1;
}
.footer-circle__logo {
width: 140px;
height: 140px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 30%, rgba(255, 0, 0, 0.30), rgba(255, 0, 0, 0.08) 55%, transparent 75%),
rgba(255, 255, 255, 0.02);
border: 1px solid var(--c-border-red);
display: grid;
place-items: center;
padding: var(--s-4);
margin-bottom: var(--s-2);
position: relative;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.footer-circle__logo::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid var(--c-border);
opacity: 0.4;
}
.footer-circle__logo img {
width: 100%;
height: 100%;
object-fit: contain;
filter:
drop-shadow(0 8px 24px rgba(255, 0, 0, 0.55))
drop-shadow(0 0 12px rgba(255, 0, 0, 0.35));
transition: transform var(--t-base);
}
.footer-circle__logo:hover { box-shadow: 0 16px 40px rgba(255, 0, 0, 0.4); }
.footer-circle__logo:hover img { transform: scale(1.04); }
.footer-circle__nav {
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5);
}
.footer-circle__nav a {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-dim);
transition: color var(--t-base), text-shadow var(--t-base);
padding: 4px 8px;
}
.footer-circle__nav a:hover {
color: var(--c-red-accent);
text-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
}
.footer-circle__socials { display: flex; gap: var(--s-3); }
.footer-circle__social {
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid var(--c-border-strong);
background: rgba(20, 20, 22, 0.55);
display: grid; place-items: center;
color: var(--c-text-dim);
transition: all var(--t-base);
}
.footer-circle__social:hover {
border-color: var(--c-red);
color: var(--c-red-accent);
background: rgba(255, 0, 0, 0.18);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.35);
}
.footer-circle__social svg { width: 18px; height: 18px; }
.footer-circle__newsletter { width: 100%; max-width: 480px; }
.footer-circle__newsletter form { display: flex; gap: var(--s-2); }
.footer-circle__newsletter input[type="email"] {
flex: 1;
padding: 0.85rem 1.5rem;
background: rgba(20, 20, 22, 0.6);
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
color: var(--c-text);
font-size: var(--fs-sm);
font-family: var(--font-body);
transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.footer-circle__newsletter input[type="email"]:focus {
outline: none;
border-color: var(--c-red);
background: rgba(28, 28, 32, 0.75);
box-shadow: 0 0 0 4px var(--c-red-soft);
}
.footer-circle__newsletter input::placeholder { color: var(--c-text-muted); }
.footer-circle__newsletter button {
padding: 0.85rem 1.75rem;
background: linear-gradient(180deg, var(--c-red-accent) 0%, var(--c-red) 100%);
color: #fff;
border: 1px solid var(--c-red-accent);
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
white-space: nowrap;
transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.footer-circle__newsletter button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(255, 0, 0, 0.5);
background: linear-gradient(180deg, var(--c-red-bright) 0%, var(--c-red-accent) 100%);
}
@media (max-width: 540px) {
.footer-circle__newsletter form { flex-direction: column; }
.footer-circle__newsletter button { width: 100%; }
}
.footer-circle__bottom {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: var(--s-3);
padding-top: var(--s-5);
border-top: 1px solid var(--c-border);
width: 100%; max-width: 720px;
text-align: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted);
}
/* ============================================
4-COLUMN GRID FOOTER (Apex Controllers)
Newsletter · Quick Links · Contact · Socials
============================================ */
.footer-grid {
position: relative;
z-index: 1;
padding: var(--s-9) 0 var(--s-5);
background: rgba(2, 2, 2, 0.85);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-top: 1px solid var(--c-border);
color: var(--c-text);
overflow: hidden;
}
.footer-grid__cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--s-8);
margin-bottom: var(--s-7);
}
@media (max-width: 960px) {
.footer-grid__cols { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
@media (max-width: 540px) {
.footer-grid__cols { grid-template-columns: 1fr; gap: var(--s-6); }
}
.footer-grid h3 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-md);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
color: var(--c-text);
margin-bottom: var(--s-4);
}
/* ---- Stay Connected (newsletter + glow) ---- */
.footer-grid__newsletter { position: relative; }
.footer-grid__newsletter::before {
content: "";
position: absolute;
top: -20px; right: -10px;
width: 140px; height: 140px;
background: radial-gradient(circle at center, rgba(255, 0, 0, 0.40) 0%, transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: -1;
}
.footer-grid__newsletter h2 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-2xl);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
line-height: 0.95;
margin-bottom: var(--s-3);
}
.footer-grid__newsletter p {
font-size: var(--fs-sm);
color: var(--c-text-dim);
margin-bottom: var(--s-4);
line-height: var(--lh-base);
max-width: 320px;
}
.footer-grid__newsletter form { position: relative; }
.footer-grid__newsletter input[type="email"] {
width: 100%;
padding: 0.85rem 3.25rem 0.85rem 1.1rem;
background: rgba(20, 20, 22, 0.6);
backdrop-filter: blur(8px);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
color: var(--c-text);
font-size: var(--fs-sm);
font-family: var(--font-body);
transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.footer-grid__newsletter input::placeholder { color: var(--c-text-muted); }
.footer-grid__newsletter input:focus {
outline: none;
border-color: var(--c-red);
background: rgba(28, 28, 32, 0.75);
box-shadow: 0 0 0 4px var(--c-red-soft);
}
.footer-grid__newsletter button {
position: absolute;
right: 5px; top: 50%;
transform: translateY(-50%);
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(180deg, var(--c-red-accent) 0%, var(--c-red) 100%);
border: none;
color: #fff;
display: grid; place-items: center;
cursor: pointer;
transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.footer-grid__newsletter button:hover {
transform: translateY(-50%) scale(1.08);
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.55);
background: linear-gradient(180deg, var(--c-red-bright) 0%, var(--c-red-accent) 100%);
}
.footer-grid__newsletter button svg { width: 16px; height: 16px; }
/* ---- Quick Links ---- */
.footer-grid__links nav {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
/* padding-block brengt het aanraakvlak van 22 naar 34 px. WCAG 2.2 SC 2.5.8
vraagt minimaal 24x24 px; de footerlinks zaten daar met 19-22 px onder — en
dat gold voor élke pagina van de site, ruim twintig links per pagina. */
.footer-grid__links a {
font-size: var(--fs-sm);
color: var(--c-text-dim);
display: inline-block;
padding-block: 6px;
transition: color var(--t-base), transform var(--t-base);
}
.footer-grid__links a:hover {
color: var(--c-red-accent);
transform: translateX(4px);
}
/* ---- Contact info ---- */
.footer-grid__contact address {
font-size: var(--fs-sm);
font-style: normal;
color: var(--c-text-dim);
line-height: var(--lh-loose);
}
/* Telefoonnummer en e-mailadres waren 19 px hoog — juist de twee links die je
op een telefoon wilt kunnen raken. */
.footer-grid__contact address a {
color: var(--c-text-dim);
display: inline-block;
padding-block: 6px;
transition: color var(--t-base);
}
.footer-grid__contact address a:hover { color: var(--c-red-accent); }
.footer-grid__contact strong { color: var(--c-text); font-weight: var(--fw-med); }
/* ---- Socials with tooltips ---- */
.footer-grid__socials {
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
}
.footer-grid__social {
position: relative;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--c-border-strong);
background: rgba(20, 20, 22, 0.55);
display: grid; place-items: center;
color: var(--c-text-dim);
transition: all var(--t-base);
}
.footer-grid__social:hover {
border-color: var(--c-red);
color: var(--c-red-accent);
background: rgba(255, 0, 0, 0.18);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.35);
}
.footer-grid__social svg { width: 16px; height: 16px; }
/* Tooltip on hover (CSS-only — geen JS) */
.footer-grid__social::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 5px 10px;
background: rgba(8, 8, 10, 0.95);
backdrop-filter: blur(8px);
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: var(--fw-med);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base), transform var(--t-base);
}
.footer-grid__social::before {
content: "";
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%) translateY(4px);
border: 5px solid transparent;
border-top-color: rgba(8, 8, 10, 0.95);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base), transform var(--t-base);
}
.footer-grid__social:hover::after,
.footer-grid__social:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---- Bottom row ---- */
.footer-grid__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
padding-top: var(--s-5);
border-top: 1px solid var(--c-border);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted);
}
.footer-grid__bottom-links {
display: flex;
gap: var(--s-4);
flex-wrap: wrap;
}
/* Ook hier het aanraakvlak van 19 naar 31 px (WCAG 2.2 SC 2.5.8, min. 24). */
.footer-grid__bottom-links a {
color: var(--c-text-muted);
display: inline-block;
padding-block: 6px;
transition: color var(--t-base);
}
.footer-grid__bottom-links a:hover {
color: var(--c-red-accent);
}
@media (max-width: 720px) {
.footer-grid__bottom {
flex-direction: column;
text-align: center;
gap: var(--s-4);
}
.footer-grid__bottom-links { justify-content: center; }
}
/* ============================================
EXTREMERATE OFFICIAL AFFILIATE BADGE
============================================ */
.footer-affiliate {
display: flex;
justify-content: center;
align-items: center;
margin: var(--s-7) auto var(--s-5);
max-width: 520px;
}
.footer-affiliate a {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-5);
background: linear-gradient(135deg, rgba(20, 20, 22, 0.7), rgba(8, 8, 10, 0.9));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--c-border-red);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-med);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--c-text-dim);
text-decoration: none;
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.footer-affiliate a:hover {
border-color: var(--c-red);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 0, 0, 0.35);
}
.footer-affiliate__check {
display: grid;
place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--c-red-soft);
color: var(--c-red-accent);
flex-shrink: 0;
}
.footer-affiliate__check svg { width: 12px; height: 12px; }
.footer-affiliate__label { color: var(--c-text-muted); }
.footer-affiliate__brand {
color: var(--c-red-accent);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
}
.footer-affiliate__logo {
height: 28px;
width: auto;
filter: brightness(1.15) contrast(1.05);
transition: filter var(--t-base);
}
.footer-affiliate a:hover .footer-affiliate__logo {
filter: brightness(1.3) contrast(1.1);
}
/* ============================================
FLOATING ACTION BUBBLES (rechtsonder elke pagina)
Mail · Instagram · Discord · WhatsApp
============================================ */
.fab-stack {
position: fixed;
bottom: clamp(16px, 3vw, 28px);
right: clamp(16px, 3vw, 28px);
z-index: 90;
display: flex;
flex-direction: column;
gap: 10px;
}
.fab {
position: relative;
width: 52px; height: 52px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
text-decoration: none;
box-shadow:
0 6px 18px rgba(0,0,0,.45),
0 2px 6px rgba(0,0,0,.4);
transition: transform var(--t-base), box-shadow var(--t-base);
cursor: pointer;
}
.fab svg { width: 24px; height: 24px; }
.fab:hover {
transform: scale(1.1) translateX(-2px);
box-shadow:
0 12px 28px rgba(0,0,0,.55),
0 4px 12px rgba(0,0,0,.5);
}
.fab:active { transform: scale(0.95); }
/* Per-platform kleuren */
.fab--mail { background: var(--c-red, #ff0000); }
.fab--mail:hover{ box-shadow: 0 12px 28px rgba(255, 0, 0,.55), 0 4px 12px rgba(0,0,0,.5); }
.fab--instagram { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.fab--discord { background: #5865F2; }
.fab--whatsapp { background: #25D366; }
.fab--tiktok { background: #010101; }
/* WhatsApp behoudt zijn karakteristieke pulse */
.fab--whatsapp::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background: rgba(37, 211, 102, 0.3);
z-index: -1;
animation: whatsapp-pulse 2.4s ease-in-out infinite;
}
@keyframes whatsapp-pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.25); opacity: 0; }
}
@media (max-width: 540px) {
.fab { width: 46px; height: 46px; }
.fab svg { width: 21px; height: 21px; }
.fab-stack { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.fab--whatsapp::before { animation: none; }
}
/* ============================================================
ZWEVEND WHATSAPP-VENSTER
============================================================
Zweeft net boven de knoppenrij rechtsonder. De hoogte van die rij
wordt door js/footer-injector.js gemeten en in --wa-stack-h gezet,
zodat dit blijft kloppen als er ooit een knop bij komt of afgaat.
De waarde hieronder is alleen de terugval voor het geval het meten
niet lukt (vijf knoppen van 52px met 10px ertussen).
Kleur: donker paneel, precies zoals de rest van de site. Het rode
accent zit op de ring om de foto — daar hoort het bij iets echts.
Een dikke rode rand langs de zijkant is weggelaten: die versiert
alleen, hij zegt niets, en het is een van de duidelijkste tekenen
van een lukraak ontworpen kaart. Groen blijft voorbehouden aan de
WhatsApp-knop zelf.
============================================================ */
.wa-chat {
--wa-stack-h: 300px;
position: fixed;
right: clamp(16px, 3vw, 28px);
bottom: calc(clamp(16px, 3vw, 28px) + var(--wa-stack-h) + 14px);
z-index: 89; /* onder de knoppenrij (90), boven de pagina */
width: min(310px, calc(100vw - 32px));
padding: var(--s-4);
background: linear-gradient(180deg, rgba(20, 20, 23, .97) 0%, rgba(12, 12, 14, .98) 100%);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-lg);
box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .4);
color: var(--c-text);
/* Rustig: iets omhoog en van doorzichtig naar vol. Geen stuiter. */
opacity: 0;
transform: translateY(10px);
transition: opacity .28s ease, transform .28s ease;
}
.wa-chat.is-open { opacity: 1; transform: translateY(0); }
.wa-chat[hidden] { display: none; }
/* Zolang de cookiemelding in beeld staat blijft het venster weg — dezelfde
regel die ook voor de knoppenrij geldt, zodat ze elkaar niet overlappen. */
body.has-cookie-banner .wa-chat {
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.wa-chat__close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--c-text-dim);
cursor: pointer;
transition: background var(--t-base), color var(--t-base);
}
.wa-chat__close:hover { background: rgba(255, 255, 255, .08); color: var(--c-text); }
.wa-chat__close:focus-visible { outline: 2px solid var(--c-red); outline-offset: 1px; }
.wa-chat__close svg { width: 15px; height: 15px; }
.wa-chat__head {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-3);
padding-right: 26px; /* ruimte voor het kruisje */
}
/* De foto is liggend (1402x1122) en het hoofd staat rechts van het midden.
object-fit voorkomt vervorming; de verschuiving en lichte vergroting zetten
het gezicht netjes in het midden van de cirkel. */
.wa-chat__avatar {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--c-red);
background: var(--c-surface-2, #141417);
}
.wa-chat__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 100% 0;
transform: scale(1.5);
transform-origin: 51% 33%;
display: block;
}
.wa-chat__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-chat__who strong {
font-family: var(--font-display);
font-size: 1.05rem;
letter-spacing: var(--ls-tight, -.01em);
line-height: 1;
}
.wa-chat__role {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.wa-chat__text {
margin: 0 0 var(--s-4);
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--c-text-dim);
}
/* Enige groen op de hele kaart: de knop die naar WhatsApp gaat. */
.wa-chat__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 11px 14px;
border-radius: var(--r-sm);
background: #25D366;
color: #06301a;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--t-base), transform var(--t-base);
}
.wa-chat__cta:hover { background: #1fbb59; transform: translateY(-1px); }
.wa-chat__cta:active { transform: translateY(0); }
.wa-chat__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wa-chat__cta svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* Telefoon: compacter, en de knoppenrij is daar zelf ook kleiner. */
@media (max-width: 540px) {
.wa-chat {
--wa-stack-h: 262px; /* 5 x 46px + 4 x 8px */
padding: var(--s-3);
width: calc(100vw - 32px);
max-width: 330px;
}
.wa-chat__avatar { width: 46px; height: 46px; }
.wa-chat__text { font-size: var(--fs-xs, .8125rem); margin-bottom: var(--s-3); }
}
/* Lage schermen: dan past een venster boven de knoppenrij niet meer zonder
de pagina te overwoekeren. Beter helemaal niet tonen dan half over de
inhoud heen. De groene knop blijft gewoon werken. */
@media (max-height: 620px) {
.wa-chat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.wa-chat { transition: opacity .01ms linear; transform: none; }
.wa-chat.is-open { transform: none; }
}
/* Legacy class — backwards compat indien ergens nog gebruikt */
.whatsapp-fab {
position: fixed;
bottom: clamp(16px, 3vw, 28px);
right: clamp(16px, 3vw, 28px);
z-index: 90;
width: 60px; height: 60px;
border-radius: 50%;
background: #25D366;
display: grid; place-items: center;
color: #fff;
}
.whatsapp-fab svg { width: 32px; height: 32px; }
.footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--s-7);
margin-bottom: var(--s-7);
}
.footer__brand-block { max-width: 360px; }
.footer__brand-block .lead { font-size: var(--fs-sm); margin-top: var(--s-3); }
.footer__col h4 {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--c-red);
margin-bottom: var(--s-4);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__col a {
color: var(--c-text-dim);
font-size: var(--fs-sm);
transition: color var(--t-fast);
}
.footer__col a:hover { color: var(--c-text); }
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--s-5);
border-top: 1px solid var(--c-border);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--c-text-muted);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
@media (max-width: 800px) {
.footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.footer__bottom { flex-direction: column; gap: var(--s-3); text-align: center; }
}
/* ---------- FORMS ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-dim);
}
.field__label .req { color: var(--c-red); }
.input, .textarea, .select {
width: 100%;
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
padding: 0.85rem 1rem;
min-height: 48px;
color: var(--c-text);
font-size: var(--fs-base);
transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--c-red);
background: var(--c-surface-3);
box-shadow: 0 0 0 4px var(--c-red-soft);
}
.textarea { min-height: 140px; resize: vertical; line-height: var(--lh-base); }
.input::placeholder, .textarea::placeholder { color: var(--c-text-muted); }
.field__hint {
font-size: var(--fs-xs);
color: var(--c-text-muted);
font-family: var(--font-mono);
}
.field__error {
font-size: var(--fs-xs);
color: var(--c-error);
font-family: var(--font-mono);
}
/* Checkbox + radio (custom) */
.option {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
cursor: pointer;
transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.option:hover { border-color: var(--c-border-red); background: var(--c-surface-3); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__box {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 6px;
border: 2px solid var(--c-border-strong);
background: var(--c-bg);
display: grid; place-items: center;
transition: border-color var(--t-base), background var(--t-base);
}
.option__box::after {
content: "";
width: 10px; height: 10px;
border-radius: 3px;
background: #fff;
transform: scale(0);
transition: transform var(--t-base) var(--ease-spring);
}
.option input[type="radio"] ~ .option__box { border-radius: 50%; }
.option input[type="radio"] ~ .option__box::after { border-radius: 50%; }
.option input:checked ~ .option__box {
border-color: var(--c-red);
background: var(--c-red);
}
.option input:checked ~ .option__box::after { transform: scale(1); }
.option input:checked ~ .option__body { color: var(--c-text); }
.option:has(input:checked) {
border-color: var(--c-red);
background: linear-gradient(180deg, var(--c-red-soft), transparent 80%);
}
.option__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.option__thumb {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: var(--r-sm, 8px);
overflow: hidden;
background: var(--c-bg);
border: 1px solid var(--c-border);
align-self: center;
display: grid;
place-items: center;
}
.option__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.option:has(input:checked) .option__thumb {
border-color: var(--c-red);
}
@media (max-width: 480px) {
.option__thumb { width: 52px; height: 52px; }
}
.option__title {
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
}
.option__desc {
font-size: var(--fs-sm);
color: var(--c-text-dim);
}
.opt-stock {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 6px;
padding: 3px 8px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
border: 1px solid var(--c-border);
background: rgba(255,255,255,.02);
width: fit-content;
line-height: 1;
color: var(--c-text-dim);
}
.opt-stock small {
font-size: 10px; opacity: .7; text-transform: none; letter-spacing: 0;
}
.opt-stock__dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.opt-stock--ok { color: rgb(120,230,160); border-color: rgba(80,200,120,.35); background: rgba(80,200,120,.06); }
.opt-stock--warn { color: rgb(255,200,100); border-color: rgba(255,180,60,.35); background: rgba(255,180,60,.06); }
.opt-stock--info { color: rgb(180,200,255); border-color: rgba(120,160,255,.35); background: rgba(120,160,255,.06); }
.opt-stock--low { color: rgb(220,220,220); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.03); }
/* ---- ExtremeRate self-supply block ---- */
.exr-block {
margin-top: 10px;
padding: 8px 10px;
border: 1px dashed rgba(255,255,255,.15);
border-radius: var(--r-sm, 6px);
background: rgba(255,255,255,.02);
display: flex; flex-direction: column; gap: 6px;
transition: border-color .2s, background .2s;
}
.exr-block:has(.exr-block__cb:checked) {
border-color: rgba(255, 0, 0,.55);
background: rgba(255, 0, 0,.08);
border-style: solid;
}
.exr-block__toggle {
display: block; cursor: pointer;
}
.exr-block__cb {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.exr-block__row {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3); flex-wrap: wrap;
}
.exr-block__title {
display: inline-flex; align-items: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-dim);
position: relative;
padding-left: 22px;
}
.exr-block__title::before {
content: "";
position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px;
border: 1.5px solid rgba(255,255,255,.3);
border-radius: 3px;
background: transparent;
transition: background .2s, border-color .2s;
}
.exr-block__cb:checked + .exr-block__row .exr-block__title::before {
background: var(--c-red, #ff0000);
border-color: var(--c-red, #ff0000);
}
.exr-block__cb:checked + .exr-block__row .exr-block__title::after {
content: "";
position: absolute;
left: 4px; top: 50%; transform: translateY(-65%) rotate(45deg);
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
}
.exr-block__cb:checked + .exr-block__row .exr-block__title {
color: var(--c-text);
}
.exr-block__price {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--c-text);
letter-spacing: var(--ls-wide);
}
.exr-block__hint {
display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
flex-wrap: wrap;
font-size: 11px;
color: var(--c-text-muted, rgba(255,255,255,.45));
padding-left: 22px;
}
.exr-block__link {
display: inline-flex; align-items: center; gap: 4px;
color: var(--c-red-accent, #ff3b3b);
text-decoration: underline;
text-underline-offset: 2px;
font-family: var(--font-mono);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-size: 10px;
}
.exr-block__link:hover { color: var(--c-text); }
/* ---- Welcome modal (eenmalig op eerste bezoek) ---- */
.welcome-modal {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
padding: var(--s-4);
}
.welcome-modal__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: welcomeFade .3s ease;
}
@keyframes welcomeFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomeSlide {
from { opacity: 0; transform: translateY(20px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-modal__panel {
position: relative;
width: 100%; max-width: 620px;
max-height: 92vh; overflow-y: auto;
background: var(--c-bg-elev, #0d0d0d);
border: 1px solid var(--c-border-red);
border-radius: var(--r-lg, 12px);
box-shadow: 0 30px 80px rgba(0,0,0,.7);
padding: var(--s-7) var(--s-6) var(--s-5);
animation: welcomeSlide .35s cubic-bezier(.16,1,.3,1);
}
.welcome-modal__close {
position: absolute; top: var(--s-3); right: var(--s-3);
background: transparent; border: 1px solid var(--c-border);
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-sm);
color: var(--c-text-dim); cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
}
.welcome-modal__close:hover { color: var(--c-text); border-color: var(--c-red); background: rgba(255, 0, 0,.1); }
.welcome-modal__close svg { width: 16px; height: 16px; }
.welcome-modal__head { margin-bottom: var(--s-4); }
.welcome-modal__head h2 {
font-family: var(--font-display);
font-size: var(--fs-2xl);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
margin: var(--s-2) 0 0;
color: var(--c-text);
line-height: 1.1;
}
.welcome-modal__body p {
color: var(--c-text-dim);
line-height: 1.65;
font-size: var(--fs-md);
margin: 0 0 var(--s-3);
}
.welcome-modal__body p:last-child { margin-bottom: 0; }
.welcome-modal__body strong { color: var(--c-text); font-weight: 600; }
.welcome-modal__body em { color: var(--c-red-accent, #ff3b3b); font-style: normal; font-weight: 500; }
.welcome-modal__body a {
color: var(--c-red-accent, #ff3b3b);
text-decoration: underline;
text-underline-offset: 2px;
}
.welcome-modal__body a:hover { color: var(--c-text); }
.welcome-modal__foot {
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid var(--c-border);
display: flex; gap: var(--s-3);
justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 560px) {
.welcome-modal__panel { padding: var(--s-5) var(--s-4); }
.welcome-modal__head h2 { font-size: var(--fs-xl); }
.welcome-modal__foot { justify-content: stretch; }
.welcome-modal__foot .btn { flex: 1; justify-content: center; }
}
.option__price {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: var(--fw-med);
color: var(--c-red);
align-self: center;
white-space: nowrap;
}
/* ---------- VERSION CHECK (Builder step 1 conditional) ---------- */
.version-check {
margin-top: var(--s-5);
padding: var(--s-5);
border: 1px solid var(--c-border-red);
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255, 0, 0,.06), rgba(255, 0, 0,.02));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: versionCheckIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes versionCheckIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.version-check__head .eyebrow {
color: var(--c-red-accent, #ff3b3b);
}
.version-check__head h3 {
font-family: var(--font-display);
font-size: var(--fs-xl);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
margin: var(--s-2) 0 var(--s-2);
color: var(--c-text);
}
.version-check__head p {
color: var(--c-text-dim);
font-size: var(--fs-sm);
line-height: 1.55;
margin-bottom: var(--s-4);
}
.version-check__steps {
list-style: none;
padding: 0;
margin: 0 0 var(--s-5);
counter-reset: vcheck;
}
.version-check__steps li {
position: relative;
padding: var(--s-2) 0 var(--s-2) calc(var(--s-7) + 4px);
font-size: var(--fs-sm);
color: var(--c-text-dim);
counter-increment: vcheck;
border-bottom: 1px dashed rgba(255,255,255,.06);
}
.version-check__steps li:last-child { border-bottom: none; }
.version-check__steps li::before {
content: counter(vcheck);
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 28px; height: 28px;
border-radius: 50%;
background: var(--c-red);
color: #fff;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.version-check__steps li strong { color: var(--c-text); }
.version-check__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
justify-content: space-between;
}
.version-check__confirm {
display: inline-flex;
align-items: center;
gap: var(--s-2);
cursor: pointer;
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text);
user-select: none;
}
.version-check__confirm input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px; height: 20px;
border: 1.5px solid var(--c-border-strong, rgba(255,255,255,.25));
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
transition: border-color .2s, background .2s;
}
.version-check__confirm input[type="checkbox"]:hover {
border-color: var(--c-red);
}
.version-check__confirm input[type="checkbox"]:checked {
background: var(--c-red);
border-color: var(--c-red);
}
.version-check__confirm input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 6px; height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ---------- VERSION CHECK MODAL ---------- */
.vcheck-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.vcheck-modal[hidden] { display: none; }
.vcheck-modal__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: vcFadeIn .25s ease;
}
.vcheck-modal__panel {
position: relative;
width: 100%; max-width: 1100px;
max-height: 92vh;
display: flex; flex-direction: column;
background: var(--c-bg-elev, #0d0d0d);
border: 1px solid var(--c-border);
border-radius: var(--r-lg, 12px);
box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255, 0, 0,.15);
animation: vcSlideIn .35s cubic-bezier(.16,1,.3,1);
overflow: hidden;
}
@keyframes vcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vcSlideIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.vcheck-modal__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s-4);
padding: var(--s-5) var(--s-5) var(--s-4);
border-bottom: 1px solid var(--c-border);
}
.vcheck-modal__head h3 {
font-family: var(--font-display);
font-size: var(--fs-xl);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
margin: var(--s-1) 0 0;
color: var(--c-text);
}
.vcheck-modal__close {
background: transparent; border: 1px solid var(--c-border);
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-sm);
color: var(--c-text-dim); cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
}
.vcheck-modal__close:hover { color: var(--c-text); border-color: var(--c-red); background: rgba(255, 0, 0,.1); }
.vcheck-modal__close svg { width: 18px; height: 18px; }
.vcheck-modal__info {
padding: var(--s-3) var(--s-5);
background: rgba(255, 0, 0,.08);
border-bottom: 1px solid var(--c-border);
font-size: var(--fs-sm);
color: var(--c-text-dim);
line-height: 1.5;
}
.vcheck-modal__info strong { color: var(--c-text); }
/* Auto-scan section binnen modal */
.vcheck-scan {
padding: var(--s-5);
background: linear-gradient(180deg, rgba(255, 0, 0,.08), transparent);
border-bottom: 1px solid var(--c-border);
}
.vcheck-scan__cta {
display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
text-align: center;
}
.vcheck-scan__cta small {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted, rgba(255,255,255,.45));
}
.vcheck-scan__result { margin-top: var(--s-4); }
.vcheck-scan__result[hidden] { display: none !important; }
.vcheck-scan__card {
padding: var(--s-4);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: rgba(255,255,255,.03);
display: flex; flex-direction: column; gap: var(--s-3);
}
.vcheck-scan__card--ok { border-color: rgba(80, 200, 120, .35); background: rgba(80,200,120,.05); }
.vcheck-scan__card--warn { border-color: rgba(255, 180, 60, .35); background: rgba(255,180,60,.05); }
.vcheck-scan__head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3); flex-wrap: wrap;
}
.vcheck-scan__model {
font-family: var(--font-display);
font-size: var(--fs-lg);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
color: var(--c-text);
}
.vcheck-scan__badge {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 700;
padding: 6px 12px;
border-radius: var(--r-sm);
letter-spacing: var(--ls-wide);
}
.vcheck-scan__badge--ok { background: rgba(80,200,120,.18); color: rgb(120,230,160); }
.vcheck-scan__badge--warn { background: rgba(255,180,60,.18); color: rgb(255,200,100); }
.vcheck-scan__badge--low { background: rgba(180,180,180,.15); color: rgb(220,220,220); }
.vcheck-scan__meta {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--c-text-dim);
letter-spacing: .03em;
}
.vcheck-scan__meta strong { color: var(--c-text); }
.vcheck-scan__note {
display: flex; flex-direction: column; gap: 4px;
font-size: var(--fs-sm);
color: var(--c-text-dim);
line-height: 1.5;
}
.vcheck-scan__note small {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--c-text-muted, rgba(255,255,255,.45));
}
.vcheck-scan__err {
padding: var(--s-3) var(--s-4);
background: rgba(255, 80, 80, .08);
border: 1px solid rgba(255, 80, 80, .25);
border-radius: var(--r-sm);
color: rgb(255, 160, 160);
font-size: var(--fs-sm);
line-height: 1.5;
}
.vcheck-modal__divider {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-5);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted, rgba(255,255,255,.4));
border-bottom: 1px solid var(--c-border);
}
.vcheck-modal__divider::before, .vcheck-modal__divider::after {
content: ""; flex: 1; height: 1px; background: var(--c-border);
}
.vcheck-modal__iframe-wrap {
position: relative;
flex: 1;
min-height: 480px;
background: #000;
}
.vcheck-modal__iframe-wrap iframe {
display: block;
width: 100%; height: 100%;
min-height: 480px;
border: 0;
background: #fff;
}
.vcheck-modal__fallback {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: var(--s-6);
background: var(--c-bg-elev);
color: var(--c-text);
gap: var(--s-3);
}
.vcheck-modal__fallback[hidden] { display: none !important; }
.vcheck-modal__fallback p { color: var(--c-text-dim); font-size: var(--fs-sm); max-width: 480px; line-height: 1.6; }
.vcheck-modal__fallback strong { color: var(--c-text); }
.vcheck-modal__credit {
padding: var(--s-3) var(--s-5);
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.6;
letter-spacing: .02em;
color: var(--c-text-muted, rgba(255,255,255,.45));
background: rgba(255,255,255,.02);
border-top: 1px solid var(--c-border);
text-align: center;
}
.vcheck-modal__credit a {
color: var(--c-text-dim);
text-decoration: underline;
text-underline-offset: 2px;
}
.vcheck-modal__credit a:hover { color: var(--c-text); }
.vcheck-modal__foot {
display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-top: 1px solid var(--c-border);
}
.btn.btn--link {
background: transparent;
border: none;
color: var(--c-text-dim);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
cursor: pointer;
padding: 6px 0;
}
.btn.btn--link:hover { color: var(--c-red-accent, #ff3b3b); text-decoration: underline; }
@media (max-width: 700px) {
.vcheck-modal { padding: 0; }
.vcheck-modal__panel { max-height: 100vh; height: 100%; max-width: 100%; border-radius: 0; }
.vcheck-modal__iframe-wrap { min-height: 0; }
}
/* ===== Footer trust strip ===== */
.footer-trust {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: var(--s-3) var(--s-5);
margin-top: var(--s-5);
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.footer-trust__item {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-dim);
}
.footer-trust__item svg {
width: 16px; height: 16px;
color: var(--c-red, #ff0000);
}
/* ===== Footer payment methods ===== */
.footer-payments {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: var(--s-3);
margin-top: var(--s-4);
padding: var(--s-3) var(--s-4);
}
.footer-payments__label {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted, rgba(255,255,255,.45));
margin-right: var(--s-2);
}
.footer-payment {
display: inline-flex; align-items: center;
height: 26px;
border-radius: 3px;
overflow: hidden;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
}
.footer-payment svg { display: block; height: 100%; width: auto; }
/* ===== Footer disclaimer ===== */
.footer-disclaimer {
max-width: 760px;
margin: var(--s-4) auto 0;
padding: 0 var(--s-4);
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.6;
letter-spacing: .02em;
color: var(--c-text-muted, rgba(255,255,255,.4));
text-align: center;
}
/* ===== Hero badges (garantie strip) ===== */
.hero__badges {
display: flex; flex-wrap: wrap; gap: var(--s-2);
margin-top: var(--s-4);
}
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border: 1px solid var(--c-border);
border-radius: 999px;
background: rgba(255,255,255,.02);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-dim);
}
.hero-badge svg {
width: 14px; height: 14px;
color: var(--c-red, #ff0000);
flex-shrink: 0;
}
/* ===== How it works ===== */
.how-section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.how-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
list-style: none;
padding: 0;
margin: var(--s-6) 0 0;
counter-reset: step;
}
@media (max-width: 880px) { .how-steps { grid-template-columns: 1fr; } }
.how-step {
position: relative;
padding: var(--s-5);
background: var(--glass-bg, rgba(255,255,255,.02));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
transition: border-color .3s, transform .3s;
}
.how-step:hover {
border-color: var(--c-red, #ff0000);
transform: translateY(-2px);
}
.how-step__num {
position: absolute;
top: var(--s-3); right: var(--s-4);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
color: var(--c-text-muted, rgba(255,255,255,.35));
}
.how-step__icon {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-sm);
background: rgba(255, 0, 0,.1);
color: var(--c-red, #ff0000);
margin-bottom: var(--s-3);
}
.how-step__icon svg { width: 24px; height: 24px; }
.how-step h3 {
font-family: var(--font-display);
font-size: var(--fs-lg);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
color: var(--c-text);
margin: 0 0 var(--s-2);
}
.how-step p {
color: var(--c-text-dim);
font-size: var(--fs-sm);
line-height: 1.6;
margin: 0;
}
.how-step p strong { color: var(--c-red-accent, #ff3b3b); }
/* ===== Pricing anchor (boven service-list) ===== */
.price-anchor {
display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-top: var(--s-3);
padding: 10px 16px;
border: 1px solid var(--c-border-red);
border-radius: var(--r-sm);
background: rgba(255,255,255,.02);
font-size: var(--fs-sm);
color: var(--c-text-dim);
}
.price-anchor__label {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-red-accent, #ff3b3b);
margin-right: 4px;
}
.price-anchor s { opacity: .55; font-weight: 400; }
.price-anchor strong { color: var(--c-text); font-weight: 600; }
/* ===== BTW-label — kleine subtitel achter prijzen ===== */
.price-vat-note,
.vat-note {
font-size: 0.72em;
font-weight: 400;
color: var(--c-text-muted, #888);
letter-spacing: 0;
text-transform: none;
margin-left: 4px;
white-space: nowrap;
}
.vat-note--block {
display: block;
margin: 4px 0 0;
font-size: 11px;
color: var(--c-text-muted, #888);
font-family: var(--font-mono);
letter-spacing: 0.05em;
}
.vat-line {
font-size: 11px;
color: var(--c-text-muted, #888);
font-family: var(--font-mono);
letter-spacing: 0.05em;
text-align: center;
padding: 8px 0;
}
/* ===== Reviews rating widget (in section-head) ===== */
.reviews-rating {
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
text-align: right;
}
.reviews-rating__stars {
display: inline-flex; gap: 2px;
}
.reviews-rating__stars svg {
width: 18px; height: 18px;
fill: #fbbf24;
}
.reviews-rating__meta {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted, rgba(255,255,255,.5));
}
.reviews-rating__meta strong {
color: var(--c-text);
margin-right: 6px;
font-weight: 700;
}
.reviews-rating__meta em {
font-style: normal;
color: var(--c-red-accent, #ff3b3b);
}
/* ===== Reviews footer (CTA + Trustpilot embed plek) ===== */
.reviews-footer {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px dashed var(--c-border);
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--s-3) var(--s-4);
justify-content: center;
}
.reviews-footer__note {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: .02em;
color: var(--c-text-muted, rgba(255,255,255,.45));
max-width: 480px;
line-height: 1.5;
text-align: center;
}
.btn--sm {
min-height: 36px;
padding: 8px 16px;
font-size: var(--fs-xs);
}
/* ===== Review rotator ===== */
.review-rotator {
margin-top: var(--s-5);
display: flex; flex-direction: column;
gap: var(--s-4);
}
.review-rotator__viewport {
position: relative;
min-height: 220px;
}
.review-rotator__viewport .review--rotating {
animation: reviewFade .55s cubic-bezier(.16,1,.3,1);
max-width: 720px;
margin: 0 auto;
}
@keyframes reviewFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.review-rotator__nav {
display: flex; align-items: center; justify-content: center;
gap: var(--s-3);
}
.review-rotator__btn {
background: transparent;
border: 1px solid var(--c-border);
width: 36px; height: 36px;
border-radius: 50%;
color: var(--c-text-dim);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .2s, color .2s, background .2s;
}
.review-rotator__btn:hover {
border-color: var(--c-red, #ff0000);
color: var(--c-text);
background: rgba(255, 0, 0,.08);
}
.review-rotator__btn svg { width: 16px; height: 16px; }
.review-rotator__dots {
display: inline-flex; gap: 8px;
}
.review-rotator__dot {
width: 8px; height: 8px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.15);
cursor: pointer;
transition: background .25s, transform .25s;
padding: 0;
}
.review-rotator__dot:hover { background: rgba(255,255,255,.35); }
.review-rotator__dot.is-active {
background: var(--c-red, #ff0000);
transform: scale(1.3);
}
/* ===== SEO long-form content block (stick drift uitleg etc.) ===== */
.section--narrow { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.content-block {
padding: var(--s-6);
background: var(--glass-bg, rgba(255,255,255,.02));
border: 1px solid var(--c-border-red);
border-radius: var(--r-md);
}
.content-block h2 {
font-family: var(--font-display);
font-size: var(--fs-2xl);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
color: var(--c-text);
margin: var(--s-2) 0 var(--s-4);
line-height: 1.1;
}
.content-block h3 {
font-family: var(--font-display);
font-size: var(--fs-lg);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
color: var(--c-red, #ff0000);
margin: var(--s-5) 0 var(--s-2);
}
.content-block p {
color: var(--c-text-dim);
line-height: 1.65;
margin-bottom: var(--s-3);
}
.content-block p strong { color: var(--c-text); }
.content-block p em { color: var(--c-red-accent, #ff3b3b); font-style: normal; font-weight: 500; }
.content-block ul {
list-style: none; padding: 0;
margin: var(--s-2) 0 var(--s-4);
}
.content-block ul li {
position: relative;
padding-left: var(--s-5);
margin-bottom: var(--s-3);
color: var(--c-text-dim);
line-height: 1.6;
}
.content-block ul li::before {
content: "→";
position: absolute;
left: 0; top: 0;
color: var(--c-red, #ff0000);
font-weight: 700;
}
.content-block ul li strong { color: var(--c-text); }
/* ===== Reviews — lege Google state ===== */
.review--empty {
text-align: center;
border: 1px dashed var(--c-border);
background: rgba(255,255,255,.02);
padding: var(--s-6) var(--s-5);
}
.review--empty .review__quote {
color: var(--c-text-dim);
font-style: normal;
font-size: var(--fs-md);
margin-bottom: var(--s-4);
}
.review--empty .btn--sm {
display: inline-flex; align-items: center; gap: 6px;
}
/* ===== Foto-galerij — langzame crossfade ===== */
.gallery {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.gallery__viewport {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--r-lg, 12px);
overflow: hidden;
background: linear-gradient(135deg, #0c0c0e, #050505);
border: 1px solid var(--c-border, rgba(255,255,255,.08));
box-shadow:
0 30px 80px rgba(0,0,0,.55),
0 0 0 1px rgba(255, 0, 0, .15),
inset 0 0 60px rgba(255, 0, 0, .06);
}
.gallery__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.02);
transition: opacity 1.2s ease-in-out, transform 8s ease-out;
will-change: opacity, transform;
}
.gallery__img.is-active {
opacity: 1;
transform: scale(1);
}
.gallery__empty {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-muted, rgba(255,255,255,.4));
padding: var(--s-4);
text-align: center;
}
.gallery__dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: var(--s-4);
}
.gallery__dot {
width: 8px; height: 8px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.18);
cursor: pointer;
/* Alleen kleur en ronding animeren. De breedte sprong eerder van 8 naar
24 px mét overgang; omdat de bolletjes in een flexrij staan, herberekende
de browser bij elke wissel de hele rij, 0,3 seconde lang. De breedte
verspringt nu direct — op een indicator van 8 px zie je dat nauwelijks,
en het scheelt een herberekening van de layout per galerijwissel. */
transition: background .3s, border-radius .3s;
padding: 0;
}
.gallery__dot:hover { background: rgba(255,255,255,.35); }
.gallery__dot.is-active {
background: var(--c-red, #ff0000);
width: 24px;
border-radius: 4px;
}
.gallery__nav {
position: absolute;
top: calc(50% - 22px);
transform: translateY(-50%);
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(255, 0, 0, .35);
background: rgba(10, 10, 11, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
padding: 0;
}
.gallery__nav svg { width: 22px; height: 22px; }
.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }
.gallery:hover .gallery__nav,
.gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:hover {
background: rgba(255, 0, 0, .85);
border-color: rgba(255, 0, 0, .9);
transform: translateY(-50%) scale(1.06);
}
.gallery__nav:focus-visible {
outline: 2px solid var(--c-red, #ff0000);
outline-offset: 2px;
}
@media (max-width: 720px) {
.gallery__viewport { aspect-ratio: 4 / 3; border-radius: var(--r-md, 8px); }
.gallery__nav { opacity: 1; width: 38px; height: 38px; }
.gallery__nav svg { width: 18px; height: 18px; }
.gallery__nav--prev { left: 8px; }
.gallery__nav--next { right: 8px; }
}
/* ============================================
GARANTIE — 2 cards (covered / not covered)
============================================ */
.garantie-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 760px) {
.garantie-grid { grid-template-columns: 1fr; }
}
.garantie-card {
position: relative;
padding: var(--s-6);
background: var(--glass-bg, rgba(255,255,255,.02));
backdrop-filter: var(--glass-blur, blur(12px));
-webkit-backdrop-filter: var(--glass-blur, blur(12px));
border: 1px solid var(--c-border, rgba(255,255,255,.08));
border-radius: var(--r-lg, 14px);
overflow: hidden;
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Volledige gekleurde rand per kaart (opzet cf. design-afbeelding) —
subtiel groen/rood rondom i.p.v. alleen een top-balkje. */
.garantie-card--in {
border-color: rgba(54, 217, 123, .35);
}
.garantie-card--out {
border-color: rgba(255, 0, 0, .35);
}
.garantie-card--in:hover {
transform: translateY(-3px);
border-color: rgba(54, 217, 123, .6);
box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(54, 217, 123, .12);
}
.garantie-card--out:hover {
transform: translateY(-3px);
border-color: rgba(255, 0, 0, .6);
box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(255, 0, 0, .12);
}
.garantie-card__head {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.garantie-card__icon {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: var(--r-md, 10px);
flex: 0 0 auto;
}
.garantie-card__icon svg { width: 22px; height: 22px; }
.garantie-card--in .garantie-card__icon {
background: rgba(54, 217, 123, .12);
color: #36d97b;
border: 1px solid rgba(54, 217, 123, .25);
}
.garantie-card--out .garantie-card__icon {
background: rgba(255, 0, 0, .14);
color: #ff5e5e;
border: 1px solid rgba(255, 0, 0, .35);
}
.garantie-card h3 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
margin: 0;
line-height: 1;
}
.garantie-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.garantie-list li {
position: relative;
padding-left: 28px;
font-size: var(--fs-sm);
line-height: var(--lh-loose, 1.6);
color: var(--c-text-dim, rgba(255,255,255,.72));
}
.garantie-list li strong { color: var(--c-text, #fff); }
.garantie-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 16px;
height: 16px;
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
}
.garantie-card--in .garantie-list li::before {
background-color: rgba(54, 217, 123, .15);
background-image: url("data:image/svg+xml;utf8,");
}
.garantie-card--out .garantie-list li::before {
background-color: rgba(255, 94, 94, .14);
background-image: url("data:image/svg+xml;utf8,");
}
/* Trust-strip onder de garantie-tiles (vervangt de hero-badges bovenaan) */
.garantie-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-3) var(--s-6);
max-width: 1000px;
margin: var(--s-5) auto 0;
padding: var(--s-4) var(--s-5);
background: rgba(255,255,255,.02);
border: 1px solid var(--c-border, rgba(255,255,255,.08));
border-radius: var(--r-lg, 14px);
}
.garantie-trust__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-sm);
color: var(--c-text-dim);
white-space: nowrap;
}
.garantie-trust__item svg {
width: 17px; height: 17px;
color: var(--c-red);
flex-shrink: 0;
}
@media (max-width: 640px) {
.garantie-trust { gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); }
.garantie-trust__item { font-size: 13px; }
}
/* ============================================
FEATURE ROWS — uitgelichte diensten (homepage)
2 grote rijen boven de "Meest gekozen"-rotator.
============================================ */
.feature-rows {
display: flex;
flex-direction: column;
gap: var(--s-6);
margin-bottom: var(--s-8);
}
.feature-row {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: center;
gap: clamp(var(--s-5), 4vw, var(--s-8));
padding: clamp(var(--s-5), 3vw, var(--s-7));
background: var(--glass-bg, rgba(14, 14, 16, 0.55));
backdrop-filter: var(--glass-blur, blur(20px));
-webkit-backdrop-filter: var(--glass-blur, blur(20px));
border: 1px solid var(--c-border, rgba(255,255,255,.08));
border-radius: var(--r-lg, 16px);
}
.feature-row__media {
position: relative;
display: block;
border-radius: var(--r-md, 12px);
overflow: hidden;
border: 1px solid var(--c-border, rgba(255,255,255,.08));
}
.feature-row__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform var(--t-slower, 700ms) var(--ease-out);
}
.feature-row__media:hover img,
.feature-row__media:focus-visible img { transform: scale(1.04); }
.feature-row--flip .feature-row__media { order: 2; }
.feature-row__title {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
letter-spacing: var(--ls-tight);
text-transform: uppercase;
line-height: var(--lh-snug);
margin: 0 0 var(--s-3);
}
.feature-row__desc {
color: var(--c-text-dim);
font-size: var(--fs-base);
line-height: var(--lh-base);
max-width: 52ch;
margin: 0 0 var(--s-4);
}
.feature-row__list {
list-style: none;
padding: 0;
margin: 0 0 var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.feature-row__list li {
position: relative;
padding-left: 28px;
font-size: var(--fs-sm);
line-height: var(--lh-base);
color: var(--c-text-dim);
}
.feature-row__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--apex-green-soft, rgba(0,255,80,.12));
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
background-size: 11px 11px;
}
.feature-row__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
flex-wrap: wrap;
}
.feature-row__price {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--c-text-dim);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
display: flex;
align-items: baseline;
gap: 8px;
}
.feature-row__price strong {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--c-text);
letter-spacing: var(--ls-tight);
}
.feature-row__vat {
font-size: 0.6875rem;
color: var(--c-text-muted);
text-transform: none;
letter-spacing: 0;
}
.feature-row__actions {
display: flex;
align-items: center;
gap: var(--s-5);
flex-wrap: wrap;
}
@media (max-width: 860px) {
.feature-rows { gap: var(--s-5); margin-bottom: var(--s-7); }
.feature-row { grid-template-columns: 1fr; align-items: start; gap: var(--s-5); }
.feature-row--flip .feature-row__media { order: 0; }
.feature-row__media img { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
.feature-row__media img { transition: none; }
.feature-row__media:hover img,
.feature-row__media:focus-visible img { transform: none; }
}
/* ============================================
GALERIJ — 3x2 foto-grid (6 foto's)
============================================ */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
max-width: 1100px;
margin: 0 auto;
}
.gallery-grid__item {
margin: 0;
overflow: hidden;
border-radius: var(--r-lg, 16px);
border: 1px solid var(--c-border, rgba(255,255,255,.08));
aspect-ratio: 4 / 3;
background: var(--c-surface-1, rgba(14,14,16,.72));
}
.gallery-grid__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s var(--ease-out, ease-out);
}
.gallery-grid__item:hover img { transform: scale(1.05); }
@media (max-width: 860px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}
@media (max-width: 480px) {
.gallery-grid { grid-template-columns: 1fr; }
.gallery-grid__item { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
.gallery-grid__item img { transition: none; }
}
/* ============================================
Cookie banner (functionele cookies only)
============================================ */
/* FAB-stack tijdelijk verbergen zolang de cookie-banner open staat —
voorkomt dat contact-knoppen onder/achter de banner vallen op mobiel. */
body.has-cookie-banner .fab-stack {
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
/* ============================================
BIO-STRIP — mini-bio Stefan op de homepage
============================================ */
.bio-strip {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: clamp(20px, 4vw, 40px);
align-items: center;
max-width: 860px;
margin: 0 auto;
padding: clamp(20px, 4vw, 32px);
background: var(--grad-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
}
.bio-strip__photo {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: var(--r-md);
border: 1px solid var(--c-border-strong);
}
.bio-strip__body h2 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: clamp(1.25rem, 2.6vw, 1.7rem);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
line-height: 1.1;
margin: 0 0 10px;
}
.bio-strip__body p {
color: var(--c-text-dim);
line-height: 1.6;
margin: 0 0 14px;
max-width: 58ch;
}
@media (max-width: 640px) {
.bio-strip {
grid-template-columns: 1fr;
text-align: center;
}
.bio-strip__photo { margin: 0 auto; width: 140px; height: 140px; }
.bio-strip__body p { margin-left: auto; margin-right: auto; }
.bio-strip__body .arrow-link { justify-content: center; }
}
/* Cart-badge pop: korte scale-tik wanneer er een item bij komt (class via JS) */
@keyframes cartBadgePop {
0% { transform: scale(1); }
45% { transform: scale(1.35); }
100% { transform: scale(1); }
}
.nav-cart__badge.is-popping {
animation: cartBadgePop .32s var(--ease-out, ease-out) 1;
}
@media (prefers-reduced-motion: reduce) {
.nav-cart__badge.is-popping { animation: none; }
}
.cookie-banner {
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%) translateY(20px);
width: min(720px, calc(100vw - 24px));
padding: 14px 18px;
background: rgba(10, 10, 11, .95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 0, 0, .35);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
color: #eaeaea;
font-family: var(--font-body, 'Manrope', sans-serif);
font-size: 13px;
line-height: 1.5;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
z-index: 9999;
opacity: 0;
transition: opacity .3s ease, transform .3s ease;
}
.cookie-banner.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cookie-banner.is-leaving {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
.cookie-banner__text {
flex: 1 1 280px;
}
.cookie-banner__text strong {
display: block;
font-family: var(--font-mono, monospace);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-red, #ff8a8a);
margin-bottom: 4px;
}
.cookie-banner__text a {
color: #ff8a8a;
text-decoration: underline;
margin-left: 4px;
}
.cookie-banner__btn {
flex: 0 0 auto;
padding: 9px 18px;
background: var(--c-red, #ff0000);
color: #fff;
border: 1px solid var(--c-red, #ff0000);
border-radius: 6px;
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s ease, transform .15s ease;
}
.cookie-banner__btn:hover {
background: #b80000;
transform: translateY(-1px);
}
/* Sinds de Google Ads-koppeling heeft de banner twee knoppen: weigeren en
accepteren. Weigeren mag niet worden weggemoffeld — even goed leesbaar en
hetzelfde aanraakvlak, alleen rustiger van kleur. */
.cookie-banner__actions {
flex: 0 0 auto;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cookie-banner__btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, .28);
color: #dcdcdc;
}
.cookie-banner__btn--ghost:hover {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .45);
}
@media (max-width: 540px) {
.cookie-banner {
bottom: 8px;
padding: 12px 14px;
font-size: 12px;
}
.cookie-banner__actions { width: 100%; }
.cookie-banner__btn { flex: 1 1 0; width: auto; }
}
/* ============================================================
CRO-FIXES (audit juli 2026)
============================================================ */
/* Cart-badge: [hidden] moet winnen van display:grid hierboven —
anders staat er permanent een rode "0" naast de winkelwagen. */
.nav-cart__badge[hidden] { display: none !important; }
/* Zichtbare CTA op service-kaarten (hele kaart was al klikbaar,
maar niets maakte dat duidelijk — vooral op mobiel). */
.service-row__cta {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
margin-top: var(--s-3);
padding: 8px 14px;
font-size: 12px;
}
.service-row__cta svg { width: 14px; height: 14px; }
/* FAB-stack mobiel: alleen WhatsApp tonen. Vier gestapelde knoppen
bedekken content en zitten te dicht op de sticky builder-knop. */
@media (max-width: 640px) {
.fab-stack .fab:not(.fab--whatsapp) { display: none; }
}
/* Drawer-CTA: primaire actie + WhatsApp onderaan het mobiele menu. */
.drawer__cta {
display: flex;
flex-direction: column;
gap: 10px;
padding: var(--s-5) var(--s-4) var(--s-6);
margin-top: var(--s-4);
border-top: 1px solid rgba(255,255,255,.08);
}
.drawer__cta .btn { justify-content: center; }
/* Alleen voor schermlezers: visueel weg, wel voorleesbaar en vindbaar.
Staat hier omdat het sitewide is; admin-orders.css had een eigen kopie,
die is verwijderd zodat er één definitie bestaat. */
.sr-only {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}