/* * Samengevoegd door wt_css_bundel(). Niet met de hand aanpassen: dit bestand wordt * opnieuw gemaakt zodra een van de bronbestanden verandert. Pas de bron aan in * wp-content/themes/weltechniek.nl/css/. */ /* ==================== /css/header.css ==================== */ /* ============================================================ * Weltechniek Nieuwe Header — production CSS * * Bevat: * - Design tokens (CSS-variabelen) * - Minimal utility-classes (Tailwind-compatible namen, handgeschreven) * - Header-specifieke styling * - Mega-menu (desktop + mobiel) * * Alles gescoped onder body.nieuwe-header-actief voor coexistence met * de oude header van Shoptimizer. * ============================================================ */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { --wrapper-max: 1301px; --wrapper-padding: 1rem; --hdr-utility: 40px; --hdr-main: 64px; --hdr-nav: 70px; --mm-tabs-width: 240px; --mm-panel-max-h: min(70vh, 600px); --wt-blue: #1E3A6D; --wt-blue-soft: #eef2f9; --wt-green: #00bb00; --wt-green-hover: #008d00; } @media (min-width: 640px) { :root { --wrapper-padding: 1.5rem; } } @media (min-width: 1024px) { :root { --wrapper-padding: 2rem; --hdr-main: 80px; } } /* ---------- 2. SCOPED RESET ---------- */ body.nieuwe-header-actief #masthead, body.nieuwe-header-actief #mm-mobile, body.nieuwe-header-actief #mm-backdrop { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } body.nieuwe-header-actief #masthead *, body.nieuwe-header-actief #mm-mobile *, body.nieuwe-header-actief #mm-desktop * { box-sizing: border-box; } /* ---------- 3. WRAPPER ---------- */ body.nieuwe-header-actief .wrapper { width: 100%; max-width: calc(var(--wrapper-max) + 2 * var(--wrapper-padding)); margin-inline: auto; padding-inline: var(--wrapper-padding); box-sizing: border-box; } /* ---------- 4. UTILITIES (Tailwind-compatible) ---------- * Gescoped via :where(#masthead, #mm-mobile, #mm-backdrop) zodat onze * utility-classes alleen binnen het header-domein matchen. Voorkomt * conflicten met Shoptimizer/FiboSearch elders op de pagina die * toevallig dezelfde class-namen gebruiken (mini-cart, filter-drawer). * :where() heeft specificity 0 — plugins/parent theme winnen daar- * buiten netjes vanzelf. * --------------------------------------------------------- */ :where(#masthead, #mm-mobile, #mm-backdrop) .flex { display: flex; } :where(#masthead, #mm-mobile, #mm-backdrop) .inline-flex { display: inline-flex; } :where(#masthead, #mm-mobile, #mm-backdrop) .block { display: block; } :where(#masthead, #mm-mobile, #mm-backdrop) .hidden { display: none; } :where(#masthead, #mm-mobile, #mm-backdrop) .items-center { align-items: center; } :where(#masthead, #mm-mobile, #mm-backdrop) .items-baseline { align-items: baseline; } :where(#masthead, #mm-mobile, #mm-backdrop) .justify-between { justify-content: space-between; } :where(#masthead, #mm-mobile, #mm-backdrop) .justify-center { justify-content: center; } :where(#masthead, #mm-mobile, #mm-backdrop) .flex-1 { flex: 1 1 0%; } :where(#masthead, #mm-mobile, #mm-backdrop) .flex-shrink-0, :where(#masthead, #mm-mobile, #mm-backdrop) .shrink-0 { flex-shrink: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .flex-col { flex-direction: column; } :where(#masthead, #mm-mobile, #mm-backdrop) .relative { position: relative; } :where(#masthead, #mm-mobile, #mm-backdrop) .absolute { position: absolute; } :where(#masthead, #mm-mobile, #mm-backdrop) .fixed { position: fixed; } :where(#masthead, #mm-mobile, #mm-backdrop) .inset-0 { inset: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .top-0 { top: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .right-0 { right: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .-top-2 { top: -8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .-right-2 { right: -8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-0\.5 { gap: 2px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-1 { gap: 4px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-1\.5 { gap: 6px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-2 { gap: 8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-3 { gap: 12px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-4 { gap: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-6 { gap: 24px; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg-gap-10 { gap: 40px; } :where(#masthead, #mm-mobile, #mm-backdrop) .p-2 { padding: 8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .py-2 { padding-top: 8px; padding-bottom: 8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .py-3 { padding-top: 12px; padding-bottom: 12px; } :where(#masthead, #mm-mobile, #mm-backdrop) .py-8 { padding-top: 32px; padding-bottom: 32px; } :where(#masthead, #mm-mobile, #mm-backdrop) .px-3 { padding-left: 12px; padding-right: 12px; } :where(#masthead, #mm-mobile, #mm-backdrop) .px-4 { padding-left: 16px; padding-right: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .pl-10 { padding-left: 40px; } :where(#masthead, #mm-mobile, #mm-backdrop) .pl-11 { padding-left: 44px; } :where(#masthead, #mm-mobile, #mm-backdrop) .pr-4 { padding-right: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .px-1 { padding-left: 4px; padding-right: 4px; } :where(#masthead, #mm-mobile, #mm-backdrop) .-ml-2 { margin-left: -8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .ml-auto { margin-left: auto; } :where(#masthead, #mm-mobile, #mm-backdrop) .ml-1 { margin-left: 4px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-4 { height: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-5 { height: 20px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-6 { height: 24px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-8 { height: 32px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-\[18px\] { height: 18px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-4 { width: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-5 { width: 20px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-6 { width: 24px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-full { width: 100%; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-auto { width: auto; } :where(#masthead, #mm-mobile, #mm-backdrop) .min-w-\[18px\] { min-width: 18px; } :where(#masthead, #mm-mobile, #mm-backdrop) .max-w-2xl { max-width: 42rem; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-xs { font-size: 12px; line-height: 1.4; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-sm { font-size: 14px; line-height: 1.4; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-base { font-size: 16px; line-height: 1.5; } :where(#masthead, #mm-mobile, #mm-backdrop) .font-medium { font-weight: 500; } :where(#masthead, #mm-mobile, #mm-backdrop) .font-semibold { font-weight: 600; } :where(#masthead, #mm-mobile, #mm-backdrop) .font-bold { font-weight: 700; } :where(#masthead, #mm-mobile, #mm-backdrop) .rounded-md { border-radius: 6px; } :where(#masthead, #mm-mobile, #mm-backdrop) .rounded-full { border-radius: 9999px; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-white { color: #fff; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-gray-400 { color: #9ca3af; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-gray-700 { color: #374151; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-yellow-400 { color: #facc15; } :where(#masthead, #mm-mobile, #mm-backdrop) .border { border-width: 1px; border-style: solid; } :where(#masthead, #mm-mobile, #mm-backdrop) .border-b { border-bottom-width: 1px; border-bottom-style: solid; } /* Alle hairlines in de header gebruiken sinds 18-09-2026 hetzelfde grijs als de rest van de winkel (`--wt-border`, #e1eaf2). Ze stonden op #e5e7eb, het grijs van Tailwind, nog uit de tijd dat de header met die klassen werd opgebouwd. Verschil is vier punten in rgb en dus nauwelijks te zien, maar twee soorten grijs voor dezelfde soort lijn is precies wat op een lange horizontale streep opvalt: de lijn onder de kruimels en onder de beoordelingen stonden al op de token. */ :where(#masthead, #mm-mobile, #mm-backdrop) .border-gray-200 { border-color: var(--wt-border); } :where(#masthead, #mm-mobile, #mm-backdrop) .border-gray-300 { border-color: #d2d6dc; } :where(#masthead, #mm-mobile, #mm-backdrop) .overflow-hidden { overflow: hidden; } :where(#masthead, #mm-mobile, #mm-backdrop) .pointer-events-none { pointer-events: none; } :where(#masthead, #mm-mobile, #mm-backdrop) .transition { transition: all 150ms ease; } :where(#masthead, #mm-mobile, #mm-backdrop) .tracking-tight { letter-spacing: -0.025em; } :where(#masthead, #mm-mobile, #mm-backdrop) .opacity-90 { opacity: 0.9; } :where(#masthead, #mm-mobile, #mm-backdrop) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Responsive utilities */ @media (max-width: 1023px) { :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:flex, :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:block, :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:gap-10 { display: none; } } @media (min-width: 1024px) { :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:hidden { display: none; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:flex { display: flex; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:block { display: block; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:gap-10 { gap: 40px; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:h-10 { height: 40px; } } @media (min-width: 640px) { :where(#masthead, #mm-mobile, #mm-backdrop) .sm\:inline { display: inline; } } /* ---------- 5. HEADER STRUCTUUR ---------- */ body.nieuwe-header-actief #masthead { width: 100%; position: relative; z-index: 50; } /* Rij 1: topbar */ body.nieuwe-header-actief .wt-topbar { background: var(--wt-blue); color: #fff; font-size: 14px; } body.nieuwe-header-actief .wt-topbar .wrapper { display: flex; align-items: center; height: var(--hdr-utility); gap: 16px; } body.nieuwe-header-actief .wt-topbar-usps-mobile { flex: 1; height: var(--hdr-utility); overflow: hidden; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-topbar-usps-mobile { display: none; } } body.nieuwe-header-actief .wt-topbar-usps-desktop { display: none; align-items: center; gap: 24px; flex: 1; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-topbar-usps-desktop { display: flex; } } body.nieuwe-header-actief .wt-topbar-usps-desktop > span { display: inline-flex; align-items: center; gap: 8px; } body.nieuwe-header-actief .wt-topbar-reviews { display: none; align-items: center; gap: 6px; flex-shrink: 0; color: inherit; text-decoration: none; transition: opacity 120ms; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-topbar-reviews { display: flex; } } body.nieuwe-header-actief .wt-topbar-reviews:hover { opacity: 0.8; } body.nieuwe-header-actief .wt-topbar-icon { color: var(--wt-green); width: 16px; height: 16px; } /* USP-slider */ @keyframes wt-usp-slide { 0%, 29% { transform: translateY(0); } 33%, 62% { transform: translateY(calc(-1 * var(--hdr-utility))); } 67%, 96% { transform: translateY(calc(-2 * var(--hdr-utility))); } 100% { transform: translateY(calc(-3 * var(--hdr-utility))); } } body.nieuwe-header-actief .usp-slider { display: flex; flex-direction: column; animation: wt-usp-slide 12s ease-in-out infinite; list-style: none; margin: 0; padding: 0; } body.nieuwe-header-actief .usp-slider li { height: var(--hdr-utility); flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px; } @media (prefers-reduced-motion: reduce) { body.nieuwe-header-actief .usp-slider { animation: none; } } /* Rij 2: hoofdrij */ body.nieuwe-header-actief .wt-mainrow { background: var(--wt-blue-soft); border-bottom: 1px solid var(--wt-border); } body.nieuwe-header-actief .wt-mainrow .wrapper > div { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-main); gap: 16px; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow .wrapper > div { gap: 40px; } } body.nieuwe-header-actief .wt-mainrow-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } body.nieuwe-header-actief .wt-mainrow-logo img { height: 28px; width: auto; /* Full-color huisstijl-logo (Weltechniek-logo.png) → geen herkleur-filter meer nodig (was: wit logo + filter naar navy). */ } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow-logo img { height: 40px; } } /* Hamburger button (mobiel) */ body.nieuwe-header-actief #mm-mobile-trigger { background: transparent; border: 0; color: #374151; padding: 8px; margin-left: -8px; cursor: pointer; border-radius: 6px; align-items: center; justify-content: center; transition: background 120ms; } body.nieuwe-header-actief #mm-mobile-trigger:hover { background: #fff; } /* Geen size-override hier — hamburger gebruikt de standaard w-6 h-6 (24px), consistent met de account/cart icoontjes rechts in de mainrow. */ @media (max-width: 1023px) { body.nieuwe-header-actief #mm-mobile-trigger { display: inline-flex; } } @media (min-width: 1024px) { body.nieuwe-header-actief #mm-mobile-trigger { display: none; } } /* Account/cart iconen mobiel */ body.nieuwe-header-actief .wt-mainrow-icons-mobile { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow-icons-mobile { display: none; } } body.nieuwe-header-actief .wt-mainrow-icons-mobile a, body.nieuwe-header-actief .wt-mainrow-icons-mobile button { padding: 8px; color: #374151; background: transparent; border: 0; border-radius: 6px; font-family: inherit; cursor: pointer; transition: background 120ms; text-decoration: none; display: inline-flex; align-items: center; } body.nieuwe-header-actief .wt-mainrow-icons-mobile a:hover, body.nieuwe-header-actief .wt-mainrow-icons-mobile button:hover { background: #fff; } /* Account/klantenservice/kluslijst desktop */ body.nieuwe-header-actief .wt-mainrow-icons-desktop { display: none; align-items: center; gap: 16px; flex-shrink: 0; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow-icons-desktop { display: flex; } } body.nieuwe-header-actief .wt-mainrow-icons-desktop > a, body.nieuwe-header-actief .wt-mainrow-icons-desktop > button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 6px; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-decoration: none; color: var(--wt-blue); transition: background 120ms; } body.nieuwe-header-actief .wt-mainrow-icons-desktop > a:hover, body.nieuwe-header-actief .wt-mainrow-icons-desktop > button:hover { background: rgba(30, 58, 109, 0.1); } body.nieuwe-header-actief .wt-mainrow-icons-desktop > a span, body.nieuwe-header-actief .wt-mainrow-icons-desktop > button span { font-size: 16px; font-weight: 500; color: var(--wt-blue); } /* Zoekbalk desktop */ body.nieuwe-header-actief .wt-search-desktop { display: none; flex: 1; max-width: 42rem; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-search-desktop { display: flex; } } /* Rij 3 (mobiel): zoekbalk */ body.nieuwe-header-actief .wt-search-mobile { background: #fff; border-bottom: 1px solid var(--wt-border); } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-search-mobile { display: none; } } body.nieuwe-header-actief .wt-search-mobile .wrapper { padding-top: 12px; padding-bottom: 12px; } /* FIBO Search styling override */ body.nieuwe-header-actief .dgwt-wcas-search-wrapp, body.nieuwe-header-actief .dgwt-wcas-search-form, body.nieuwe-header-actief .dgwt-wcas-sf-wrapp { max-width: 100%; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; } body.nieuwe-header-actief .dgwt-wcas-sf-wrapp { position: relative; } body.nieuwe-header-actief .dgwt-wcas-search-input { border: 1px solid #d2d6dc !important; border-radius: 9999px !important; background: #fff !important; background-color: #fff !important; font-size: 16px !important; font-family: inherit !important; font-weight: 400 !important; padding: 12px 16px 12px 44px !important; box-shadow: none !important; height: auto !important; color: #111827 !important; width: 100% !important; } body.nieuwe-header-actief .dgwt-wcas-search-input:focus { border-color: var(--wt-blue) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(30, 58, 109, 0.2) !important; } body.nieuwe-header-actief .dgwt-wcas-search-input::placeholder { color: #9ca3af !important; opacity: 1 !important; } body.nieuwe-header-actief .dgwt-wcas-search-submit { position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; color: #9ca3af !important; z-index: 2 !important; } /* FiboSearch magnifier-icoon is een gevuld vector-icoon, geen line-icon. Fill (geen stroke) toepassen om het juiste rendering te krijgen. */ body.nieuwe-header-actief .dgwt-wcas-search-submit svg, body.nieuwe-header-actief .dgwt-wcas-search-submit svg path { fill: #9ca3af !important; stroke: none !important; } /* FiboSearch suggesties: "Toon alle resultaten"-knop onderaan de dropdown. Verplaatst vanuit style.css (2026-05-12) — alle search-styling op één plek. */ body.nieuwe-header-actief .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more { text-align: center; font-size: 16px; font-weight: 700; text-transform: none; color: #fff; background: var(--wt-green); border-radius: 3px; width: 100%; padding: 15px; } body.nieuwe-header-actief .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more:hover { background: var(--wt-green-hover); } body.nieuwe-header-actief span.dgwt-wcas-st-more-total { color: #fff; } @media (max-width: 1023px) { body.nieuwe-header-actief .dgwt-wcas-search-input { border-radius: 6px !important; background: #ffffff !important; background-color: #ffffff !important; padding: 10px 12px 10px 40px !important; } body.nieuwe-header-actief .dgwt-wcas-search-input:focus { background: #fff !important; background-color: #fff !important; } } /* Rij 4: nav-rij (desktop) */ body.nieuwe-header-actief nav.wt-navrow { display: none; background: #fff; border-bottom: 1px solid var(--wt-border); } @media (min-width: 1024px) { body.nieuwe-header-actief nav.wt-navrow { display: block; } } body.nieuwe-header-actief nav.wt-navrow .wrapper { position: relative; } body.nieuwe-header-actief nav.wt-navrow .wrapper > .wt-navrow-inner { display: flex; align-items: center; height: var(--hdr-nav); gap: 8px; } /* Kies je categorie button */ body.nieuwe-header-actief #mm-desktop-trigger { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--wt-blue); border: 1px solid #d2d6dc; padding: 8px 16px; border-radius: 6px; font-family: inherit; font-weight: 500; font-size: 16px; cursor: pointer; transition: background 120ms, border-color 120ms; } body.nieuwe-header-actief #mm-desktop-trigger:hover { background: #ffffff; border-color: var(--wt-blue); } /* Nav-links */ body.nieuwe-header-actief .wt-navrow a.wt-navlink { padding: 8px calc(var(--wt-nav-ruimte) - 8px); font-size: 16px; font-weight: 500; color: var(--wt-blue); text-decoration: none; border-radius: 6px; transition: background 120ms; } body.nieuwe-header-actief .wt-navrow a.wt-navlink:hover { background: rgba(30, 58, 109, 0.1); } /* Gelijke zichtbare afstand in de hele rij, van knoprand tot woord én van woord tot woord (gevraagd door Tijn 17-09-2026). Eén knop: --wt-nav-ruimte. Rekensom met rij-gap 8 en padding (ruimte - 8): aan de randen 8 + (ruimte - 8) = ruimte; tussen twee woorden (ruimte - 8) + 8 - (ruimte - 8) + (ruimte - 8) = ruimte. Het schuifje (css/btw-weergave.css) gebruikt dezelfde variabele. Smaller scherm: zie hieronder. */ body.nieuwe-header-actief .wt-navrow { --wt-nav-ruimte: 30px; } /* Met 30px heeft de rij 1029px nodig (gemeten 17-09-2026, inclusief btw-schuifje), plus lucht voor de winkelwagen. Tot 1100px scherm dus 20px; onder 1024px verdwijnt deze rij en neemt het tabletmenu over. */ @media (max-width: 1099px) { body.nieuwe-header-actief .wt-navrow { --wt-nav-ruimte: 20px; } } body.nieuwe-header-actief .wt-navrow a.wt-navlink + a.wt-navlink { margin-left: calc(8px - var(--wt-nav-ruimte)); } /* Zakelijke klant CTA */ body.nieuwe-header-actief a.wt-zakelijk-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--wt-green); color: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; transition: background 120ms; } body.nieuwe-header-actief a.wt-zakelijk-cta:hover { background: var(--wt-green-hover); color: #fff; } /* Cart shortcode wrapper */ body.nieuwe-header-actief .wt-cart-shortcode-wrap { margin-left: auto; } /* ---------- 5b. CART-BUTTON ---------- Vervangt Shoptimizer's [shoptimizer_cart] shortcode-output met eigen inline-SVG icoon + count-badge + prijs. De wrappers .wt-header-cart + .wt-header-cart__knop staan in header.php zelf — die zijn nodig voor Shoptimizer's cart-drawer.js om de klik te herkennen en de drawer/flyout te openen. ------------------------------------------------------------------- */ body.nieuwe-header-actief .wt-cart-btn { display: inline-flex; align-items: center; gap: 10px; color: var(--wt-blue); text-decoration: none; padding: 8px 10px; border-radius: 6px; transition: background 120ms; /* Override Shoptimizer's .cart-contents { width: 49px; height: 44px; } */ width: auto; height: auto; } body.nieuwe-header-actief .wt-cart-btn:hover { background: rgba(30, 58, 109, 0.1); color: var(--wt-blue); } body.nieuwe-header-actief .wt-cart-price { font-size: 16px; font-weight: 600; color: var(--wt-blue); line-height: 1; white-space: nowrap; } body.nieuwe-header-actief .wt-cart-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } body.nieuwe-header-actief .wt-cart-svg { width: 24px; height: 24px; color: var(--wt-blue); } body.nieuwe-header-actief .wt-cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--wt-green); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border-radius: 9999px; pointer-events: none; box-sizing: border-box; } /* Count is altijd zichtbaar, ook bij 0 — modifier wordt nog wel gerenderd in HTML maar verbergt het badge niet meer. */ body.nieuwe-header-actief .wt-cart-count--empty { /* display: none; — uitgezet, count altijd zichtbaar */ } /* Mobiel: alleen icoon + badge tonen, prijs verbergen om ruimte te besparen */ @media (max-width: 1023px) { body.nieuwe-header-actief .wt-cart-price { display: none; } body.nieuwe-header-actief .wt-cart-btn { padding: 8px; } } /* ---------- 6. MEGA-MENU DESKTOP ---------- */ body.nieuwe-header-actief .mm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 40; } body.mm-desktop-active .mm-backdrop { opacity: 1; pointer-events: auto; } body.nieuwe-header-actief .mm-desktop { position: absolute; top: 100%; left: var(--wrapper-padding); right: var(--wrapper-padding); background: #fff; border-top: 1px solid var(--wt-border); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 180ms ease, transform 200ms ease, visibility 200ms; z-index: 50; } body.mm-desktop-active .mm-desktop { opacity: 1; visibility: visible; transform: translateY(0); } body.nieuwe-header-actief .mm-desktop__inner { display: flex; max-height: var(--mm-panel-max-h); position: relative; } body.nieuwe-header-actief .mm-desktop__inner::after { content: ''; position: absolute; left: var(--mm-tabs-width); right: 0; bottom: 0; height: 56px; background: linear-gradient(to top, #fff 30%, rgba(255,255,255,0)); pointer-events: none; z-index: 3; border-bottom-right-radius: 8px; opacity: 0; transition: opacity 180ms ease; } body.nieuwe-header-actief .mm-desktop__inner.has-scroll-down::after { opacity: 1; } body.nieuwe-header-actief .mm-desktop__tabs { background: #ffffff; border-right: 1px solid var(--wt-border); padding: 0; overflow-y: auto; flex: 0 0 var(--mm-tabs-width); min-height: 0; } body.nieuwe-header-actief .mm-desktop__tab { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; background: transparent; border: 0; border-left: 3px solid transparent; color: var(--wt-blue); font-family: inherit; font-weight: 500; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; border-radius: 0; transition: background 120ms, border-color 120ms; } body.nieuwe-header-actief .mm-desktop__tab:hover { background: #fff; color: var(--wt-blue); } body.nieuwe-header-actief .mm-desktop__tab[aria-selected="true"] { background: #fff; border-left-color: var(--wt-blue); font-weight: 600; } body.nieuwe-header-actief .mm-desktop__tab svg { color: #9ca3af; flex-shrink: 0; } body.nieuwe-header-actief .mm-desktop__content { padding: 24px 28px; overflow-y: auto; flex: 1 1 0; min-height: 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar { width: 10px; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar-track { background: transparent; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid #fff; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Eén paneel per afdeling, sinds 26-09-2026 server-side in de HTML (niveau 2). Het script wisselt met het `hidden`-attribuut; deze regel staat erbij omdat een `display`-regel op een div die van de browser zelf zou overrulen. */ body.nieuwe-header-actief .mm-desktop__paneel[hidden] { display: none; } body.nieuwe-header-actief .mm-desktop__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f7f8fa; } body.nieuwe-header-actief .mm-desktop__head-title { font-size: 20px; font-weight: 700; color: var(--wt-blue); margin: 0; } body.nieuwe-header-actief .mm-view-all { display: inline-flex; align-items: center; gap: 4px; color: var(--wt-green); font-size: 14px; font-weight: 500; text-decoration: none; } body.nieuwe-header-actief .mm-view-all:hover { color: var(--wt-green-hover); text-decoration: underline; } body.nieuwe-header-actief .mm-desktop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } @media (max-width: 1200px) { body.nieuwe-header-actief .mm-desktop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.nieuwe-header-actief .mm-sub__title { display: block; color: var(--wt-blue); font-weight: 600; font-size: 15px; text-decoration: none; margin-bottom: 8px; } body.nieuwe-header-actief .mm-sub__title:hover { text-decoration: underline; } body.nieuwe-header-actief .mm-sub__items { list-style: none; margin: 0; padding: 0; } body.nieuwe-header-actief .mm-sub__items li { margin: 0; padding: 0; } body.nieuwe-header-actief .mm-sub__item { display: block; color: #374151; font-size: 14px; line-height: 1.6; text-decoration: none; padding: 1px 0; } body.nieuwe-header-actief .mm-sub__item:hover { color: var(--wt-blue); text-decoration: underline; } body.nieuwe-header-actief .mm-sub__view-all { display: inline-flex; align-items: center; gap: 4px; color: var(--wt-green); font-size: 14px; font-weight: 500; text-decoration: none; margin-top: 6px; } body.nieuwe-header-actief .mm-sub__view-all:hover { color: var(--wt-green-hover); text-decoration: underline; } body.nieuwe-header-actief .mm-sub__item.mm-sub__item--accent { color: var(--wt-green); font-weight: 500; } body.nieuwe-header-actief .mm-sub__item.mm-sub__item--accent:hover { color: var(--wt-green-hover); } /* ---------- 7. MEGA-MENU MOBIEL ---------- */ body.nieuwe-header-actief .mm-mobile { position: fixed; inset: 0; z-index: 99999; /* bovenop alles, inclusief Shoptimizer's filter-knop + chat-widgets */ visibility: hidden; /* Dynamic viewport height — past zich aan iOS Safari's veranderende UI */ height: 100vh; height: 100dvh; } @media (min-width: 1024px) { body.nieuwe-header-actief .mm-mobile { display: none; } } body.nieuwe-header-actief .mm-mobile.is-open { visibility: visible; } body.nieuwe-header-actief .mm-mobile__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 200ms ease; } body.nieuwe-header-actief .mm-mobile.is-open .mm-mobile__backdrop { opacity: 1; } body.nieuwe-header-actief .mm-mobile__drawer { position: absolute; inset: 0; width: 100%; max-width: none; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,0.2); transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; /* TOP: padding-top safe-area maakt witte strook bovenaan, iOS frosted glass UI tinten daar wit. Coolblue-style. BOTTOM: geen padding — content extends tot scherm-onderrand, iOS frosted glass toont content erachter. Consistent met cart drawer. */ padding-top: env(safe-area-inset-top); } body.nieuwe-header-actief .mm-mobile.is-open .mm-mobile__drawer { transform: translateX(0); } body.nieuwe-header-actief .mm-mobile__stage { flex: 1; position: relative; overflow: hidden; } body.nieuwe-header-actief .mm-mobile__panel { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); } body.nieuwe-header-actief .mm-mobile__panel[data-state="active"] { transform: translateX(0); } body.nieuwe-header-actief .mm-mobile__panel[data-state="previous"] { transform: translateX(-30%); } body.nieuwe-header-actief .mm-mobile__header { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; background: var(--wt-blue); border-bottom: 0; flex-shrink: 0; } body.nieuwe-header-actief .mm-mobile__back, body.nieuwe-header-actief .mm-mobile__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; padding: 0; box-shadow: none; font-family: inherit; color: #fff; transition: background 120ms; } body.nieuwe-header-actief .mm-mobile__back:hover, body.nieuwe-header-actief .mm-mobile__back:active, body.nieuwe-header-actief .mm-mobile__close:hover, body.nieuwe-header-actief .mm-mobile__close:active { background: rgba(255, 255, 255, 0.15); } /* Kruis-icoontje rechts uitlijnen — visueel op één lijn met de chevrons rechts van de rows eronder (allebei 16px van de rechterrand). De negatieve margin-right schuift de hele knop 8px naar rechts, zodat én de icoon op 16px van rechts staat én de hover-achtergrond keurig centraal om de X. */ body.nieuwe-header-actief .mm-mobile__close { margin-right: -8px; } body.nieuwe-header-actief .mm-mobile__title { flex: 1; font-size: 17px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; font-family: inherit; text-transform: none; letter-spacing: normal; } body.nieuwe-header-actief .mm-mobile__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.nieuwe-header-actief .mm-mobile__list { list-style: none; margin: 0; padding: 0; } body.nieuwe-header-actief .mm-mobile__list li { margin: 0; padding: 0; } body.nieuwe-header-actief .mm-mobile__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--wt-blue); text-decoration: none; border: 0; border-bottom: 1px solid #f7f8fa; font-size: 16px; font-family: inherit; font-weight: 500; background: transparent; width: 100%; text-align: left; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; border-radius: 0; } body.nieuwe-header-actief .mm-mobile__row:hover, body.nieuwe-header-actief .mm-mobile__row:active { background: #ffffff; color: var(--wt-blue); } body.nieuwe-header-actief .mm-mobile__row svg { color: #9ca3af; flex-shrink: 0; } body.nieuwe-header-actief .mm-mobile__row.mm-mobile__row--accent { color: var(--wt-green); font-weight: 500; } body.nieuwe-header-actief .mm-mobile__row.mm-mobile__row--accent svg { color: var(--wt-green); } /* Subs + super-subs houden de default weight 500 (was 400). */ body.nieuwe-header-actief .mm-mobile__view-all-wrap { padding: 16px; background: #fff; border-bottom: 1px solid var(--wt-border); } body.nieuwe-header-actief .mm-mobile__view-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; background: #fff; border: 1px solid var(--wt-green); border-radius: 8px; color: var(--wt-green); font-size: 15px; font-weight: 500; font-family: inherit; text-decoration: none; transition: background 120ms; } body.nieuwe-header-actief .mm-mobile__view-all:hover { background: #f0fdf4; color: var(--wt-green); } body.nieuwe-header-actief .mm-mobile__section-title { padding: 14px 16px; font-size: 14px; font-weight: 600; color: #374151; background: #ffffff; border-top: 1px solid var(--wt-border); border-bottom: 1px solid var(--wt-border); } body.nieuwe-header-actief .mm-mobile__services .mm-mobile__row { color: #4b5563; font-weight: 400; font-size: 15px; padding: 12px 16px; } body.nieuwe-header-actief .mm-mobile__services .mm-mobile__row svg { width: 18px; height: 18px; } body.nieuwe-header-actief .mm-mobile__services .mm-mobile__row > svg:last-child { display: none; } /* Drill-down items op alle niveaus (level 1 hoofdcats + level 2 subs + level 3 super-subs): zelfde tab-patroon als de desktop tabs — transparante linker-border standaard (zodat de breedte niet schuift bij hover), en bij hover/focus/active een lichte grijze achtergrond + blauwe linker-border. Services krijgen deze styling NIET (zitten genest onder .mm-mobile__services). padding-left: 13px compenseert de 3px border-left, zodat de tekst op exact 16px van de linkerrand begint — gelijk uitgelijnd met de "Menu" header en de "Ga snel naar" sectie-titel. */ body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row { border-left: 3px solid transparent; padding-left: 13px; transition: background 120ms, border-color 120ms; } body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row:hover, body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row:focus, body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row:active { background: #ffffff; border-left-color: var(--wt-blue); } /* Alle drill-down items op 17px voor consistente leesbaarheid op mobiel (geldt voor level 1 hoofdcats én level 2/3 subs/super-subs). */ body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row { font-size: 17px; } /* Zakelijke klant CTA — prominent groene knop onderaan het mobiele menu */ body.nieuwe-header-actief .mm-mobile__zakelijk-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 16px; padding: 14px 20px; background: var(--wt-green); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 8px; transition: background 120ms; } body.nieuwe-header-actief .mm-mobile__zakelijk-cta:hover, body.nieuwe-header-actief .mm-mobile__zakelijk-cta:active { background: var(--wt-green-hover); color: #fff; text-decoration: none; } body.nieuwe-header-actief .mm-mobile__zakelijk-cta svg { width: 20px; height: 20px; flex-shrink: 0; } /* Body scroll-lock */ body.mm-locked { overflow: hidden; } /* Verberg oude shoptimizer-nav onder nieuwe header */ body.nieuwe-header-actief > #page > .col-full-nav { display: none; } /* ============================================================ * 8. CART DRAWER POLISH * Shoptimizer's drawer-logica (qty updates, voucher, fragments, * click-handler) blijft volledig intact. We restylen alleen de * "chrome" zodat hij visueel consistent is met onze mobile menu: * - Blauwe header-balk + witte titel + witte X * - Full-width op mobiel (was 420px vast) * - iOS safe-area top/bottom + 100dvh * ============================================================ */ /* ===== iOS 26 SAFE-AREA WORKAROUND ===== Op iOS 26 is er een bekende WebKit-bug waardoor fixed-positioned drawers (zoals Shoptimizer's cart) niet altijd tot de safe-area zones reiken — homepage erachter wordt zichtbaar door iOS' frosted- glass UI. Apple heeft fix toegezegd voor iOS 26.2. Workaround: zet body-bg naar wit wanneer ANY drawer open is, zodat iOS' translucent UI altijd wit ziet (consistent met Coolblue's "top is wit"-pattern). Geldt voor menu, recent én cart voor consistentie en future-proof gedrag. Refs: - https://github.com/mui/material-ui/issues/46953 - https://benfrain.com/ios26-safari-theme-color-tab-tinting-with-fixed-position-elements/ */ body.nieuwe-header-actief.mm-locked, body.nieuwe-header-actief.wt-recent-open, body.nieuwe-header-actief.filter-open { background: #fff; /* Scroll-lock: voorkomt dat page-content achter een open drawer/flyout meebeweegt bij scrollen. */ overflow: hidden; } /* Cart wrap: simpele full-viewport positioning. - padding-top: env safe-area = witte strook bovenaan (iOS) - padding-bottom: env safe-area = content blijft boven iOS Safari's bottom UI zichtbaar (betaalmethode-iconen, knoppen, etc.) */ /* Verkleinen Shoptimizer's 50px margin-top op de widget-container. Die 50px was bedoeld voor ruimte onder de oude absolute-positioned heading. Onze heading is nu static (in document flow) — 16px is een nette adempauze tussen header en progress bar zonder overbodig gat. */ /* Full-width op mobiel */ /* Header-balk: blauw met witte tekst, zelfde patroon als mobile menu. Position static (override Shoptimizer's absolute) zodat de balk 100% breed wordt en de cart-widget eronder netjes meeschuift. */ /* X-knop: wit, 40x40 met margin-right -8 patroon (zoals onze menu), hover semi-transparant wit zoals onze menu close. `top` met safe-area zodat de knop binnen het BLAUWE header-vlak valt, niet in de iOS safe-area zone erboven (waar 'ie als witte X op witte wrap-padding niet meer goed contrasteert). */ /* ============================================================ * 9. RECENT BEKEKEN FLYOUT * Rechts inschuivende drawer, zelfde design language als mobile menu * + cart drawer (blauwe header, witte X, iOS safe-area, 100dvh). * Vervangt de "Kluslijst" feature in de desktop header. * ============================================================ */ body.nieuwe-header-actief .wt-recent { position: fixed; inset: 0; z-index: 99998; visibility: hidden; pointer-events: none; } body.nieuwe-header-actief .wt-recent.is-open { visibility: visible; pointer-events: auto; } body.nieuwe-header-actief .wt-recent__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 200ms ease; } body.nieuwe-header-actief .wt-recent.is-open .wt-recent__backdrop { opacity: 1; } body.nieuwe-header-actief .wt-recent__drawer { position: absolute; top: 0; right: 0; width: 420px; max-width: 100%; height: 100vh; height: 100dvh; background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; /* TOP padding-safe-area = witte strook (iOS frosted glass = wit). BOTTOM geen padding — content extends, iOS toont content er- achter. Coolblue-style, consistent met menu + cart. */ padding-top: env(safe-area-inset-top); } body.nieuwe-header-actief .wt-recent.is-open .wt-recent__drawer { transform: translateX(0); } /* Full-width op mobiel */ @media (max-width: 767px) { body.nieuwe-header-actief .wt-recent__drawer { width: 100%; } } /* Header-balk: zelfde patroon als mobile menu + cart drawer */ body.nieuwe-header-actief .wt-recent__header { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; background: var(--wt-blue); flex-shrink: 0; } body.nieuwe-header-actief .wt-recent__title { flex: 1; font-size: 17px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; font-family: inherit; text-transform: none; letter-spacing: normal; } body.nieuwe-header-actief .wt-recent__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; padding: 0; box-shadow: none; font-family: inherit; color: #fff; margin-right: -8px; transition: background 120ms; } body.nieuwe-header-actief .wt-recent__close:hover, body.nieuwe-header-actief .wt-recent__close:active { background: rgba(255, 255, 255, 0.15); } body.nieuwe-header-actief .wt-recent__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; } /* Empty state + loading */ body.nieuwe-header-actief .wt-recent__loading, body.nieuwe-header-actief .wt-recent__empty { text-align: center; padding: 40px 24px; color: #6b7280; font-size: 15px; line-height: 1.5; } body.nieuwe-header-actief .wt-recent__empty p { margin: 0 0 8px; } body.nieuwe-header-actief .wt-recent__empty p:last-child { margin-bottom: 0; } /* Product-lijst */ body.nieuwe-header-actief .wt-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } body.nieuwe-header-actief .wt-recent__item { margin: 0; padding: 0; } body.nieuwe-header-actief .wt-recent__link { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f7f8fa; color: inherit; text-decoration: none; transition: background 120ms; } body.nieuwe-header-actief .wt-recent__link:hover { background: #ffffff; } body.nieuwe-header-actief .wt-recent__item:last-child .wt-recent__link { border-bottom: 0; } body.nieuwe-header-actief .wt-recent__img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; background: #ffffff; border-radius: 4px; } body.nieuwe-header-actief .wt-recent__img--placeholder { background: #f7f8fa; } body.nieuwe-header-actief .wt-recent__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } body.nieuwe-header-actief .wt-recent__name { font-size: 14px; font-weight: 400; color: #2c2d33; /* zelfde donkergrijs als Shoptimizer's mini-cart productnamen */ line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.nieuwe-header-actief .wt-recent__price { font-size: 14px; font-weight: 700; color: #d12e37; } body.nieuwe-header-actief .wt-recent__price del { color: #9ca3af; font-weight: 400; font-size: 12px; margin-right: 4px; } body.nieuwe-header-actief .wt-recent__stock { font-size: 12px; color: #9ca3af; font-style: italic; } /* Hier stonden twee reparaties op Shoptimizers winkelwagen-flyout: de "80px sliver"-bug en het doorlopen tot in de iOS safe-area. Verwijderd 27-08-2026. Die flyout bestaat niet meer; hij hing aan body.drawer-open, een klasse die Shoptimizers JavaScript zette. Geteld over 32 live pagina's: nul keer aanwezig, en geen enkel eigen script zet hem. Onze eigen laden (mm-open, wt-recent-open, filter-open) regelen dit zelf. */ /* ============================================================ Overgenomen uit de opgevangen Kirki-laag, 27-08-2026 ============================================================ Van de 106 regels in `basislaag-kirki.css` deden er nog zeven echt werk. Twee daarvan horen hier thuis. De rest was opmaak voor een thema en plugins die er niet meer zijn. Gemeten op tien paginatypes, op 1280px en op 375px. */ /* De achtergrond van de kop. Zonder deze regel wordt de kopbalk doorzichtig: geen enkel ander stijlblad zet hier een achtergrond. */ .site-header { background-color: #eef2f9; } /* De winkelwagenknop rechtsboven. Zonder deze regel valt hij terug op de geerfde 15px/400 en wordt hij lichter en kleiner dan de rest van de kop. */ .wt-header-cart__knop .cart-contents { font-size: 16px; font-weight: 700; } /* Navigatielink die alleen op een breed scherm past. De rij in de kop is krap: op 1024px is er 58px vrij van de 992. "Aanbiedingen" kost er 128, en ook na het inkorten van "Onze merken" naar "Merken" (44px winst) komt het 27px tekort; dan valt het winkelwagenicoon van de rij af. Vanaf 1200px is er ruimte zat (gemeten: 19px over op 1150, 149px op 1280). Daaronder is de pagina bereikbaar via het mobiele menu en de footer. */ .wt-navlink--breed { display: none; } @media (min-width: 1200px) { .wt-navlink--breed { display: inline-flex; } } /* ==================== /css/global.css ==================== */ /* ============================================================ * Weltechniek — GLOBAL CSS * * Site-brede, thema-onafhankelijke presentatielaag. Hierin hoort * alles wat OVERAL geldt en nergens specifiek thuishoort: * - Design tokens (merkkleuren + status) — canonieke bron, brug * naar theme.json bij de latere block-theme-migratie. * - WC-meldingen (notices) in block-banner-stijl. * - Checkboxen in huisstijl (native, site-breed). * * Geenqueued via wt_global_css() in functions.php met filemtime() * -> automatische cache-busting, geen handmatige versie-bump. * * NB: header.css definieert (voorlopig) dezelfde merk-tokens nog in * z'n eigen :root. Bewust gedupliceerd tijdens de overgang; bij de * opruim-/migratieronde verdwijnt de kopie daar en wordt dit de enige * bron. Identieke waarden -> geen conflict in de tussentijd. * ============================================================ */ :root { /* ---- Merk ---- */ --wt-blue: #1e3a6d; /* navy - primair */ --wt-blue-soft: #eef2f9; --wt-green: #00bb00; --wt-green-hover: #008d00; /* De gewone tekstkleur. Bestond nog niet, terwijl `plp.css` er op twee plekken al naar verwees: de filterlinks in de zijbalk en het SEO-tekstblok onder een categorie. Een var() naar een token dat niet bestaat geeft geen foutmelding, de eigenschap valt stil terug op overerven. Dat viel niet op omdat de geërfde kleur toevallig dezelfde zwarte is. Nu bestaat het token, en gebruiken de drie plekken hieronder in dit bestand hem ook, zodat de tekstkleur van de site op één plek staat. */ --wt-text: #000; /* ---- UI: vlakken, randen, radius ---- * Verhuisd uit plp.css (2026-08-03). Daar stonden ze onder `body.wt-plp-preview`, dus ALLEEN op de * categoriepagina. Zodra de productkaart ook buiten de shop gebruikt werd (homepage-secties), waren * deze variabelen daar niet gedefinieerd en viel bv. de prijskleur terug op zwart. Hier horen ze: * global.css is de canonieke tokenbron. */ --wt-muted: #8a97a8; /* labels, tellingen, secundair */ /* Eén stap donkerder dan --wt-muted, voor gedempte tekst die wél gelezen moet worden. * #8a97a8 haalt op wit maar 2,97:1 en zakt daarmee onder de WCAG AA-norm van 4,5:1; * #66748a haalt 4,74:1. Gebruik deze zodra gedempte tekst inhoud draagt (merknaam op de * productkaart), en --wt-muted voor puur bijkomstige tekst (aantallen achter een filter). */ --wt-muted-strong: #64748b; /* Nóg lichter dan --wt-muted, bewust onder de contrastnorm (2,25:1). Alleen voor tekst die * duidelijk ondergeschikt MAG ogen naast iets ernaast, zoals het artikelnummer naast de merknaam * op de productkaart. Nooit gebruiken voor tekst die op zichzelf staat. */ --wt-muted-soft: #a3aebd; --wt-border: #e1eaf2; --wt-border-strong:#d3dfec; --wt-border-input: #c5d2e2; --wt-bg: #f7f8fa; --wt-tint: #eef2f9; --wt-error: #d12d2d; /* afgeprijsde prijzen */ --wt-amber: #f5a623; /* accentvlak / reviewsterren - NIET voor tekst (2,03:1 op wit) */ --wt-amber-text: #b45309; /* leesbare amber: levertijd bij nabestelling (5,02:1 op wit) */ --wt-radius-sm: 6px; --wt-radius: 8px; --wt-radius-lg: 10px; /* ---- Status (notices) ---- */ --wt-notice-text: #1e2733; --wt-notice-error-bg: #fdecec; --wt-notice-error-border: #e0413d; --wt-notice-ok-bg: #edf7ee; --wt-notice-ok-border: #2e9a44; --wt-notice-info-bg: #eef2f9; --wt-notice-info-border: var(--wt-blue); } /* ============================================================ * WC-meldingen (notices) - block-banner-stijl * (lichte bg, gekleurde rand, icoon links, donkere tekst) i.p.v. de * classic massieve stijl. Geldt voor fout/succes/info op alle pagina's * (checkout, winkelwagen, account, shop...). Knoppen (.button) ongemoeid. * ============================================================ */ .woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; /* !important: WC-core + Shoptimizer zetten hun eigen notice-stijl (massief gekleurde bg, witte tekst, radius) op dezelfde selector, later geladen -> anders winnen die. */ margin: 0 0 16px !important; padding: 14px 18px 14px 52px !important; border: 1px solid !important; border-radius: 8px !important; color: var(--wt-notice-text) !important; font-size: 15px; font-weight: 400; line-height: 1.5; background-repeat: no-repeat !important; background-position: 18px center !important; background-size: 22px 22px !important; box-shadow: none !important; text-shadow: none !important; } .woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; margin: 0; padding: 0; } .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { content: none !important; } .woocommerce-error { background-color: var(--wt-notice-error-bg) !important; border-color: var(--wt-notice-error-border) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23dc2626'/%3E%3Cpath d='M11 7h2v6h-2zm0 8h2v2h-2z' fill='%23fff'/%3E%3C/svg%3E") !important; } .woocommerce-message { background-color: var(--wt-notice-ok-bg) !important; border-color: var(--wt-notice-ok-border) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2300871f'/%3E%3Cpath d='M7.5 12.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .woocommerce-info { background-color: var(--wt-notice-info-bg) !important; border-color: var(--wt-notice-info-border) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231e3a6d'/%3E%3Cpath d='M11 10h2v7h-2zm0-3h2v2h-2z' fill='%23fff'/%3E%3C/svg%3E") !important; } .woocommerce-error a:not(.button), .woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { color: inherit; font-weight: 600; text-decoration: underline; } /* ============================================================ * Checkboxen in huisstijl - site-breed * Native checkboxen (cookie-banner, formulieren, plugins...) navy * aangevinkt i.p.v. browser-default. `accent-color` raakt alleen native * gerenderde checkboxen; WC-block-checkboxen (appearance:none, op * checkout/winkelwagen) houden hun styling in block-checkout.css. * ============================================================ */ input[type="checkbox"] { accent-color: var(--wt-blue); } /* ============================================================ * PAGINACONTAINER — één goot voor header, content en footer * ============================================================ * De site had drie eigen containers naast elkaar. Ze deelden wel dezelfde * inhoudsbreedte (1301px), maar niet de goot ernaast: * * header .wrapper 1301px + --wrapper-padding (16 / 24 / 32px) * content .col-full 1301px + 2.61792em (41,9px) vanaf 993px * footer .wt-footer__inner 1301px + 16px * * Gevolg: de linkerlijn viel alleen samen bóven ~1350px, waar alle max-widths * klemmen. Daaronder liep het uiteen tot 26px verschil — het duidelijkst rond * 1000–1200px, waar de content zichtbaar smaller stond dan header en footer. * * Norm = de footer (keuze Tijn 2026-08-01): inhoud max 1301px, goot 16px. * De header leest zijn goot uit --wrapper-padding, dus die zetten we hier vast * in plaats van de regel zelf te overschrijven. * * `body`-prefix geeft net genoeg specificiteit om Shoptimizers eigen * .col-full-regels te verslaan zonder !important. Varianten die bewust * padding 0 hebben (.top-bar .col-full, canvas-templates) zijn specifieker * en blijven dus gewoon werken. */ :root { --wt-container-max: 1301px; --wt-container-gutter: 16px; } /* Header: goot gelijktrekken op elke breedte (was 1rem/1.5rem/2rem). */ body.nieuwe-header-actief { --wrapper-padding: var(--wt-container-gutter); } /* Content + footer: identieke container. * De productpagina heeft twee éigen wrappers met een eigen goot (.product-details-wrapper 41,9px, * de breadcrumb 40,3px) omdat Shoptimizer daar de padding van .col-full op 0 zet. Die doen mee, * anders staat de PDP als enige weer 26px naar binnen. */ body .col-full, body .wt-footer__inner, body .product-details-wrapper, body .wt-pdp, body.single-product .archive-header .woocommerce-breadcrumb { box-sizing: border-box; max-width: calc(var(--wt-container-max) + 2 * var(--wt-container-gutter)); padding-left: var(--wt-container-gutter); padding-right: var(--wt-container-gutter); margin-left: auto; margin-right: auto; } /* Tot en met 992px heeft de .col-full rond het kruimelpad op de productpagina zélf al de goot * (productpagina-basis.css zet die pas vanaf 993px op 0). Dan kreeg het kruimelpad hem dubbel en begon * "Home" op 32px terwijl titel, zoekveld en de categoriepagina op 16px staan (melding Tijn 17-09-2026). */ @media (max-width: 992px) { body.single-product .archive-header .col-full .woocommerce-breadcrumb { padding-left: 0; padding-right: 0; } } /* ============================================================================ * LEVERTIJDREGEL (gedeeld: productkaart, koopblok PDP, sticky balk) * ============================================================================ * Bijbehorende PHP: inc/levertijd.php (`wt_levertijd_html()`). Bewust hier en niet in * product-card.css of pdp.css: de regel moet op elke plek woordelijk én visueel gelijk zijn. * Wie hem op één plek anders maakt, maakt de belofte ongeloofwaardig. * * Nabestelling is amber en niet groen: het duurt aantoonbaar langer dan voorraad, en dat mag de * bezoeker zien vóór hij bestelt in plaats van erna. `--wt-amber-text` (#b45309) en niet * `--wt-amber` (#f5a623): die laatste haalt op wit maar 2,03:1 en is onleesbaar als tekst. * ============================================================================ */ .wt-levertijd { margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; } /* Nabestelling is GROEN, gelijk aan op voorraad. Het PDP-ontwerp stelde amber voor omdat het langer * duurt, maar dit is de regel die op elke categoriepagina staat en die is niet in dit traject * gewijzigd. Wil je hem alsnog onderscheiden, dan is dat één regel — maar als besluit, niet als * bijvangst. */ .wt-levertijd--op { color: var(--wt-green-hover); } .wt-levertijd--na { color: var(--wt-green-hover); } .wt-levertijd--uit { color: var(--wt-muted); } /* In het koopblok op de productpagina staat de regel op zichzelf en mag hij een punt groter. */ .wt-levertijd--pdp { font-size: 13.5px; margin: 14px 0; } /* Uitverkochte kaart is als geheel gedempt; de levertijdregel mag daar niet uit springen. */ li.wt-card--soldout .wt-levertijd { color: var(--wt-muted); } /* ============================================================================ * BREADCRUMB (overal identiek) * ============================================================================ * Stond tot 14-08-2026 gescoped op `body.wt-plp` in plp.css en gold dus alleen op de * categoriepagina. De productpagina hield daardoor Shoptimizers eigen kruimels (13,5px, #666, * 16px padding boven én onder), waardoor twee pagina's naast elkaar niet dezelfde site leken. * * Bewust ontscoped: overal waar WooCommerce of het thema een breadcrumb rendert, hoort hij er * hetzelfde uit te zien. De onderlijn scheidt de kruimels van de pagina-inhoud en loopt mee met * de contentcontainer, net als de scheidingslijnen bij SEO-tekst, FAQ en kennisbank. * * `body` ervoor is nodig, geen sierletter: Shoptimizer gebruikt in main.css exact dezelfde selector * `.woocommerce-breadcrumb` en laadt ná ons. Bij gelijke specificiteit wint de laatste, dus zonder * die extra `body` bleef de kruimel 13,5px en #666. * ============================================================================ */ /* De lijn hoort NIET op de breadcrumb zelf: die staat binnen de contentcontainer (max 1301px) en * dan stopt de streep halverwege het scherm. Hij staat daarom op `.archive-header`, de wrapper die * wél de volle breedte pakt. `:has()` erbij zodat een archive-header zonder kruimels geen losse * streep krijgt. Gecontroleerd: die wrapper zit om de breadcrumb op categorie-, product-, merk- én * blogpagina's. */ body .archive-header:has(.woocommerce-breadcrumb) { border-bottom: 1px solid var(--wt-border); /* Lucht ónder de lijn. Zonder deze marge plakt de paginatitel tegen de streep: de breadcrumb * geeft zijn ruimte namelijk aan de lijn (padding-bottom), niet aan wat erna komt. 28px is * dezelfde orde als de 32px die SEO-tekst, FAQ en kennisbank na hún scheidingslijn krijgen, * iets krapper omdat een kruimelpad lichter weegt dan een sectie. */ margin-bottom: 28px; } /* Horizontaal schuifbaar, want een kruimelpad is op een telefoon vrijwel altijd breder dan het * scherm: op 418px is "Home | Luchtbehandeling | Mechanische ventilatiebox | Vent-Axia * ventilatiebox | " 945px lang in 386px ruimte. Zonder dit werd de laatste kruimel * halverwege afgekapt en leek het pad niet uit te lijnen met de rest van de pagina. * * De scrollbalk staat uit: een dun grijs streepje onder een kruimelpad leest als een storing, en de * afgesneden tekst aan de rand laat zelf al zien dat er meer is. `overscroll-behavior-x: contain` * voorkomt dat een veeg over het pad de hele pagina meesleept. * * `padding-right` even groot als de goot van de container: zonder dat plakt de laatste kruimel * tegen de schermrand zodra je helemaal doorschuift. */ body .woocommerce-breadcrumb { margin: 20px 0 0; padding: 0 var(--wt-container-gutter, 16px) 14px 0; font-size: 12.5px; color: var(--wt-muted); overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; } body .woocommerce-breadcrumb::-webkit-scrollbar { display: none; } /* WooCommerce wikkelt de kruimels soms in een

; die eigen marge stapelde op de onze. */ body .woocommerce-breadcrumb p { margin: 0; } body .woocommerce-breadcrumb a { color: var(--wt-muted); text-decoration: none; } body .woocommerce-breadcrumb a:hover { color: var(--wt-blue); } body .woocommerce-breadcrumb .separator { color: var(--wt-border-input); } /* Huidige pagina donker en vet: dat is waar je bent, de rest is waar je vandaan komt. */ body .woocommerce-breadcrumb .last { color: var(--wt-blue); font-weight: 700; } /* ============================================================================ * STERREN (gedeeld: productpagina en productkaart) * ============================================================================ * Eén rij van vijf sterren, met een gele laag eroverheen die op `--wt-ster` procent wordt * afgekapt. Zo geeft 4,6 een vijfde ster die voor 60% vol staat, in plaats van afronden naar * boven of beneden. * * Getekend met een herhalende achtergrond en niet met vijf losse tekens: het teken ★ ziet er in * elk lettertype anders uit en lijnt niet betrouwbaar uit. Twee variabelen sturen alles: * `--ster-maat` voor de grootte, `--wt-ster` voor hoeveel er gevuld is. * * **14px is de standaard en overal de enige maat.** Er stonden eerder vijf verschillende maten in * drie bestanden (13 op de kaart, 17 en 14 in de kopregel, 15 in de beoordelingslijst, 19 in de * samenvatting). Die verschillen zag niemand, maar ze moesten alle vijf onderhouden worden en * liepen bij elke aanpassing verder uiteen. Alleen het samenvattingsblok zet nog een eigen maat, * omdat de sterren daar naast een cijfer van 44px staan en anders wegvallen. Elders: geen eigen * waarde zetten. * ========================================================================= */ /* De tegel is 1px smáller dan hoog (`--ster-maat - 1px`), niet 1px breder. De ster in de SVG heeft * links en rechts wat lucht binnen zijn viewBox; met een bredere tegel kwam daar nog eens ruimte bij * en dreven de vijf sterren uit elkaar. Nu staan ze strak tegen elkaar, en de hele rij is 9px smaller * — precies de ruimte die de metaregel op een telefoon nodig had. */ .wt-stars { position: relative; display: inline-block; width: calc((var(--ster-maat, 14px) - 1px) * 5); height: var(--ster-maat, 14px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e1eaf2'%3E%3Cpath d='M12 2 15 9l7 .5-5.5 4.5 1.8 7L12 17l-6.3 4 1.8-7L2 9.5 9 9z'/%3E%3C/svg%3E") repeat-x left center / calc(var(--ster-maat, 14px) - 1px) var(--ster-maat, 14px); } .wt-stars::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--wt-ster, 0%); overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5a623'%3E%3Cpath d='M12 2 15 9l7 .5-5.5 4.5 1.8 7L12 17l-6.3 4 1.8-7L2 9.5 9 9z'/%3E%3C/svg%3E") repeat-x left center / calc(var(--ster-maat, 14px) - 1px) var(--ster-maat, 14px); } /* ============================================================================ * PRODUCTBADGES * ============================================================================ * "ISDE subsidie mogelijk", "Bezorgtoeslag", "Aan 1 stuk geleverd". Staan linksboven op de * productfoto, op de productpagina en straks ook op de kaart in het overzicht. Daarom hier en niet * in pdp.css: één component, twee plekken. * * De beheerkant leeft nog in CommerceKit (zie inc/badges.php), maar de vormgeving niet: de plugin * zet er lichtblauw op met donkerblauwe tekst, en dat komt in geen enkel ontwerp voor. Groen met * wit, zoals de knoppen en de vinkjes, plus een donkere variant voor actiebadges. * ========================================================================= */ .wt-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 28px); } /* Een badge is een label, geen knop. Daarom een zachte vulling met een rand die op diezelfde kleur is afgestemd, en donkere tekst; niet het volle merkgroen, want dat is de kleur van de koopknop en die hoort harder te roepen dan een label. Alle tekstkleuren zijn doorgerekend op de eigen achtergrond: 5,9:1 tot 9,8:1. */ .wt-badge { display: inline-block; padding: 5px 11px; border: 1px solid var(--badge-rand, #d3dfec); border-radius: 20px; background: var(--badge-bg, #eef2f9); color: var(--badge-tekst, #334155); font-size: 11px; font-weight: 700; line-height: 1.2; } .wt-badge--groen { --badge-bg: #e7f6e7; --badge-rand: #b0dfb0; --badge-tekst: #146c14; } .wt-badge--blauw { --badge-bg: #e6ecf7; --badge-rand: #bcd6ef; --badge-tekst: #1e3a6d; } .wt-badge--rood { --badge-bg: #fdecec; --badge-rand: #f5c3ca; --badge-tekst: #a8202f; } .wt-badge--amber { --badge-bg: #fdf3e2; --badge-rand: #f0d8a8; --badge-tekst: #8a4c07; } .wt-badge--grijs { --badge-bg: #eef2f9; --badge-rand: #d3dfec; --badge-tekst: #334155; } /* De aanbiedingsbadge komt automatisch en is altijd rood: dat is de enige badge die over de prijs gaat. `--sale` blijft bestaan als eigen naam, zodat de code niet hoeft te weten welke kleur eraan hangt. */ .wt-badge--sale { --badge-bg: #fdecec; --badge-rand: #f5c3ca; --badge-tekst: #a8202f; } /* Oude naam uit de CommerceKit-tijd; nog aanwezig omdat er badges kunnen zijn die 'donker' als stijl hebben staan. Wordt getoond als grijs. */ .wt-badge--donker { --badge-bg: #eef2f9; --badge-rand: #d3dfec; --badge-tekst: #334155; } /* ============================================================================ * Gratis-verzendbalk (.wt-fsn) — winkelwagen en winkelwagen-flyout * * Markup in inc/gratis-verzending.php. Staat in global.css en niet in cart.css, * omdat de flyout op elke pagina open kan. * * De maatvoering is een-op-een overgenomen van de CommerceKit-module die dit * verving (8px balk, radius 5px, 12px tekst in de flyout en 13px in de * winkelwagen), zodat de overstap visueel niets verandert. * ========================================================================= */ .wt-fsn { width: 100%; text-align: center; } .wt-fsn--cart { margin: 20px 0 10px; } .wt-fsn--mini { margin-bottom: 10px; } /* Het grijze spoor. */ .wt-fsn__balk { height: 8px; background: #e2e2e2; border-radius: 5px; margin-bottom: 3px; } .wt-fsn--cart .wt-fsn__balk { margin-bottom: 6px; } /* Het gevulde deel; de breedte komt als inline style uit PHP. */ .wt-fsn__vulling { display: block; height: 8px; background: var(--wt-green, #00bb00); border-radius: 5px; } /* In de flyout een inline-block met eigen regelhoogte; in de winkelwagen een gewone inline-span, precies zoals de module die dit verving. */ .wt-fsn--mini .wt-fsn__tekst { display: inline-block; font-size: 12px; line-height: 1.4; } .wt-fsn--cart .wt-fsn__tekst { font-size: 13px; } /* Het bedrag dat wc_price() teruggeeft, in de merkkleur. */ .wt-fsn__tekst .amount { color: var(--wt-green, #00bb00); font-weight: 700; } .wt-fsn__link { margin-left: 5px; color: #111; font-weight: 700; text-decoration: underline; } /* Drempel gehaald: vinkje vóór de tekst. Een mask in plaats van een gekleurde SVG, zodat het vinkje dezelfde variabele volgt als de balk. */ .wt-fsn--gehaald .wt-fsn__tekst { position: relative; padding-left: 23px; } .wt-fsn--gehaald .wt-fsn__tekst::before { content: ""; position: absolute; top: 50%; left: 0; margin-top: -9px; display: block; width: 18px; height: 18px; background: var(--wt-green, #00bb00); -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ============================================================================ * Lettertype Inter, zelf geladen * * Tot 23-08-2026 kwam Inter binnen via Kirki, de customizer-laag die in het * Shoptimizer-thema is ingebakken. Dat betekende: parent theme weg is lettertype * weg. Daarom staan de declaraties nu hier, wijzend naar dezelfde bestanden die * al in wp-content/fonts/inter/ staan. * * Kirki genereerde 42 regels: zeven tekensets (latijn, latijn-uitgebreid, * cyrillisch, cyrillisch-uitgebreid, Grieks, Grieks-archaisch en Vietnamees) maal * twee gewichten, en dat hele blok drie keer omdat er drie typografie-instellingen * op Inter stonden. Hier staan er vier: een Nederlandse installatieshop heeft aan * latijn en latijn-uitgebreid genoeg. Het bereik is letterlijk overgenomen, zodat * accenten en het euroteken blijven werken. * * Zolang Shoptimizer nog draait staat Kirki's versie er ook nog; die vervalt bij * de themawissel. Dubbele declaraties zijn onschadelijk: de browser kiest per * teken de eerste passende en het gaat om dezelfde bestanden. * * Padden zijn relatief aan het domein (/wp-content/...), niet absoluut met * https://weltechniek.nl ervoor zoals Kirki deed. Dat scheelt gedoe op een * staging- of testomgeving. * ========================================================================= */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================ * Basistypografie * * Kwam tot 23-08-2026 van Kirki, de customizer-laag in het Shoptimizer-thema. * * LET OP als je dit ooit opnieuw moet afleiden: Kirki levert TWEE sets die elkaar * tegenspreken. De optie `shoptimizer_dynamic_css_output` zegt bij de koppen * gewicht 600, het inline blok `kirki-inline-styles` zegt 700, en dat laatste is * wat de browser gebruikt. De waarden hieronder komen uit het inline blok. Parent theme weg betekende * dus: alle lettergroottes, kleuren en gewichten weg. Nu staat het hier, met de * waarden letterlijk overgenomen zodat er niets verschuift. * * Van de achttien regels die Shoptimizer genereerde zijn er vijf niet * overgenomen, omdat ze markup opmaken die wij zelf niet meer renderen. Gemeten * op blog, productpagina en categoriepagina: nul treffers. * - `.main-navigation …` en `.menu-primary-menu-container …` (eigen header) * - `.site .widget .widget-title` (geen widgets meer) * - `.content-area ul.products li.product …` (eigen .wt-card) * - `.shoptimizer-category-banner …` (eigen PLP-kop) * * Zolang Shoptimizer nog draait staat zijn versie er ook; de waarden zijn gelijk, * dus dat maakt visueel niets uit. Bij de themawissel blijft alleen dit over. * ========================================================================= */ /* ---- Links ---- * Stond tot 27-08-2026 in de opgevangen Kirki-laag. Daar hing de hele linkkleur van de site aan, * inclusief de kaarten op de homepage en de subcategorie-tegels. */ a { color: var(--wt-green); } a:hover { color: var(--wt-green-hover); } /* `option` staat er bewust bij: keuzelijsten erven hun opmaak niet van hun `select`, en zonder deze regel vielen ze terug op de standaard van de browser. Kwam ook uit de Kirki-laag. */ body, button, input, select, option, textarea, h6 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; color: var(--wt-text); letter-spacing: 0; } .wp-block-button__link, figcaption, .wp-block-table, .wp-block-pullquote__citation { font-size: 16px; } .entry-content { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--wt-text); letter-spacing: 0; text-transform: none; } /* Koppen: allemaal 600 en navy. h1 is 30px, h2 25px, h3 tot en met h5 20px. */ h1, h2, .wp-block-heading h2, h3, .wp-block-heading h3, h4, .wp-block-heading h4, h5, .wp-block-heading h5 { font-family: 'Inter', sans-serif; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--wt-blue, #1e3a6d); } h1 { font-size: 30px; } h2, .wp-block-heading h2 { font-size: 25px; } h3, .wp-block-heading h3, h4, .wp-block-heading h4, h5, .wp-block-heading h5 { font-size: 20px; } /* Blogtitel en productpaginatitel volgen de gewone h1 (30px/700/navy). Ze stonden apart in de customizer met dezelfde waarden, dus hier hoeft niets extra's. */ /* Op de productpagina juist kleiner, vanaf tablet. */ @media (min-width: 770px) { .single-product h1 { font-size: 25px; } } blockquote p, .edit-post-visual-editor.editor-styles-wrapper .wp-block-quote p, .edit-post-visual-editor.editor-styles-wrapper .wp-block-quote { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; color: #222; } /* De categorie-intro boven een productoverzicht. */ .term-description { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--wt-text); } /* WooCommerce-knoppen die niet door onze eigen componenten worden gerenderd. */ body .woocommerce #respond input#submit.alt, body .woocommerce a.button.alt, body .woocommerce button.button.alt, body .woocommerce input.button.alt, .product .cart .single_add_to_cart_button, .widget_shopping_cart a.button.checkout { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; } /* ============================================================================ * Bevestiging na toevoegen aan de winkelwagen (.wt-toegevoegd) * * Vervangt de winkelwagen-la van Shoptimizer. Markup wordt gemaakt door * js/toevoegmelding.js. * * Rechtsonder en niet middenin: de klant is aan het bladeren en moet dat kunnen * blijven doen. De melding bevestigt en biedt een weg vooruit, maar houdt niets * tegen. Na vijf seconden verdwijnt hij vanzelf. * ========================================================================= */ .wt-toegevoegd { position: fixed; /* Bovenin en niet onderin. Onderin is bezet: rechtsonder het chatballonnetje, en de cookiebanner staat op desktop rechtsonder en op mobiel over de volle breedte onderaan, met een hogere z-index. Juist een nieuwe bezoeker zou de bevestiging daar dus niet zien. */ top: 16px; right: 16px; z-index: 9999; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid var(--wt-border, #e1eaf2); border-radius: var(--wt-radius, 8px); background: #fff; box-shadow: 0 8px 24px rgba(30, 58, 109, 0.16); font-size: 14px; color: var(--wt-blue, #1e3a6d); /* Buiten beeld tot hij nodig is; geen display:none, want dan is er niets om te animeren. */ opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .wt-toegevoegd.is-zichtbaar { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Groen vinkje, dezelfde taal als de vinkjes bij de USP's. */ .wt-toegevoegd__vink { flex: none; width: 20px; height: 20px; background: var(--wt-green, #00bb00); -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .wt-toegevoegd__tekst { font-weight: 600; } .wt-toegevoegd__link { flex: none; margin-left: 4px; padding: 7px 14px; border-radius: var(--wt-radius-sm, 6px); background: var(--wt-green, #00bb00); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; } .wt-toegevoegd__link:hover, .wt-toegevoegd__link:focus { background: var(--wt-green-hover, #008d00); color: #fff; } @media (max-width: 480px) { /* Op mobiel over de volle breedte. */ .wt-toegevoegd { left: 16px; right: 16px; justify-content: space-between; } } /* Ingelogd: onder de adminbalk door. Bezoekers merken hier niets van, die hebben geen balk. De hoogte is 32px, en 46px onder de 782px-grens die WordPress zelf aanhoudt. */ body.admin-bar .wt-toegevoegd { top: 48px; } @media screen and (min-width: 601px) and (max-width: 782px) { body.admin-bar .wt-toegevoegd { top: 62px; } } /* Onder de 600px zet WordPress de balk op `position: absolute`: hij staat bovenaan het document en scrolt mee weg. Ruimte reserveren laat daar dus een leeg gat van 46px achter zodra je een stukje gescrold hebt. Terug naar dezelfde 16px als voor een bezoeker. De balk overlapt de melding dan alleen zolang je minder dan 30px gescrold bent, en op een telefoon voeg je vrijwel nooit iets toe terwijl je nog helemaal bovenaan staat. */ @media screen and (max-width: 600px) { body.admin-bar .wt-toegevoegd { top: 16px; } } /* --------------------------------------------------------------------------- * Draaiende ring voor laadstaten * --------------------------------------------------------------------------- * Gebruikt door de koopknop op de productpagina (css/pdp.css) en door de knop op de productkaart * (css/product-card.css). Staat hier en niet in een van die twee, omdat die bestanden nooit samen * geladen worden: de kaartknop kreeg wel de animatie mee maar niet de keyframes, en stond dus * stil. */ @keyframes wt-draai { to { transform: rotate(360deg); } } /* ==================== /css/reset.css ==================== */ /* * reset.css - de nulstand van de HTML-elementen * * 56 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Het is de laag die zegt hoe een * `p`, een `ul`, een `table` of een `input` eruitziet voordat er ook maar een eigen klasse aan te * pas komt: box-sizing, marges op nul, lijsten zonder bolletjes, knoppen zonder systeemuiterlijk, * afbeeldingen die niet buiten hun kader vallen. Shoptimizer leverde dit; wij leveren het nu zelf. * * DIT BESTAND LAADT VOOR `basislaag.css`, niet erna. Dat is het verschil met de eerder gelichte * onderdelen (categorietegel, zoekresultaten, beoordelingen). Die hebben eigen klassenamen en * winnen op specificiteit, dus daar maakt de volgorde niets uit. Hier wel: dit zijn kale * element-selectors met de laagste specificiteit die er bestaat, en ze stonden vooraan in de * basislaag juist omdat alles wat erna komt ze hoort te overschrijven. Laadt dit bestand na de * basislaag, dan gaat de reset winnen van regels die hem eerst overstemden. * * Vandaar in `inc/assets.php`: `wt-basislaag` is afhankelijk van `wt-reset`, niet andersom. * * Gemeten voor en na de verhuizing over vijftien paginaladingen (negen paginatypes op 1280px, zes * op 375px), met de telling per waarde uit `verify/css-histogram.md`. Verwachting en uitkomst: * nul verschil. * * Nog niet opgeruimd. De regels spreken elkaar op een paar plekken tegen (`small` staat er twee * keer, `table` drie keer, `mark` twee keer) omdat ze uit verschillende stylesheets van het oude * thema komen. Dat samenvoegen is een volgende stap, en dan opnieuw meten. */ *, ::before, ::after { box-sizing: border-box; } html { font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } body { margin: 0; } b, strong { font-weight: bolder; } small { font-size: 80%; } table { text-indent: 0; border-color: inherit; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } legend { padding: 0; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } summary { display: list-item; } .is-layout-flow summary + * { margin-top: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; scrollbar-gutter: stable; } img, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video, canvas { display: block; max-width: 100%; height: auto; } /* ShortPixel verpakt sinds 01-09-2026 elke met een JPG-origineel in een met * AVIF- en WebP-bronnen. Stond `picture` op `display: block`, dan is dat een extra doos in de * opmaak en valt `height: 100%` op de afbeelding terug op die picture in plaats van op de kaart * eromheen. Gemeten 09-09-2026 op /advies/: container 180,6 px hoog, afbeelding 161,4 px, * dus 19,2 px wit onder elke kennisbankkaart. `display: contents` laat de picture uit de opmaak * verdwijnen, zodat elke bestaande regel voor `img` blijft werken zoals vóór ShortPixel. * Niet terugzetten naar block zolang ShortPixel picture-markup levert. */ picture { display: contents; } h1, h2, h3, h4 { text-wrap: pretty; } body, button, input, textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } [hidden] { display: none; } table { border-spacing: 0; border-collapse: collapse; } button, [role="button"] { cursor: pointer; } button::-moz-focus-inner,input::-moz-focus-inner { padding: 0; border: 0 } button,input:where([type='button']),input:where([type='reset']),input:where([type='submit']) { -webkit-appearance: button; background-color: transparent; background-image: none; } mark { background-color: transparent; } address { font-style: normal; } article,aside,figcaption,figure,footer,header,hgroup,main,menu,nav,section { display: block; } /* De kleur stond hier op #2c2d33, de linkkleur van Shoptimizer. Die werd sinds jaar en dag overschreven door de Kirki-laag met ons groen. Op 27-08-2026 is die laag opgeruimd, en toen bleek deze regel eronder te liggen. Weggehaald in plaats van er nog een override overheen te leggen; de linkkleur staat nu in global.css. */ a { background-color: transparent; text-decoration: none; transition: color 0.2s ease; } a:active, a:hover { outline: 0; } a, button, input { touch-action: manipulation; } mark { color: #000; background: #ff0; } small { font-size: 75%; } img { max-width: 100%; height: auto; border: 0; border-radius: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } input[type=checkbox],input[type=radio] { box-sizing: border-box; } input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } legend { border: 0; } table { width: 100%; border-spacing: 0; border-collapse: separate; font-size: 15px; } legend, ol, td, th, ul { padding: 0; } address,p,table { margin: 0 0 1.21575rem; } p:empty { margin: 0; } ol, ul { margin: 0 0 1.41575em 20px; } ul { list-style: disc; } ol { list-style: decimal; } li > ol, li > ul { margin-bottom: 0; margin-left: 1em; } b,dt,strong { font-weight: 600; } ins,mark { background: 0 0; font-weight: 400; text-decoration: none; } table td, table th { text-align: left; vertical-align: middle; } table caption, table th { font-weight: 600; } select, embed, iframe, object, video { max-width: 100%; } button, input, select { vertical-align: baseline; } button { border: none; } input[type="number"] { -webkit-appearance: none; border-radius: 0; } /* * Respecteer de systeemvoorkeur "beperk beweging". Stond tot 27-08-2026 als laatste regel in * `basislaag.css`; hij hoort bij de nulstand van de browser en dus hier. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } } /* ==================== /css/hulpklassen.css ==================== */ /* * hulpklassen.css - twee klassen die overal gebruikt mogen worden * * `.sr-only` en `.screen-reader-text` verbergen tekst voor het oog maar houden hem beschikbaar voor * een schermlezer. `.clear` maakt een zwevende kolom weer recht. Meer is het niet. * * Ze stonden tot 27-08-2026 in `basislaag.css`. Dat bestand is die dag opgehouden te bestaan: van * 655 regels via zeventien benoemde onderdelen naar niets. Deze twee hoorden bij geen enkel * onderdeel, dus kregen ze hun eigen plek. * * DIT BESTAND LAADT OP DE PLEK WAAR `basislaag.css` STOND, als eerste van de onderdelen. Dat is * bewust: zo houden deze twee regels exact de positie in de cascade die ze hadden. */ .sr-only, .screen-reader-text { position: absolute; /* Geen visibility:hidden hier: dat verbergt de tekst ook voor schermlezers, en deze klasse bestaat juist om tekst alléén visueel te verbergen. Gevonden 31-08-2026 bij de toegankelijkheidsronde; de clip-techniek hieronder is het standaardpatroon. */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .clear { clear: both; } /* ==================== /css/beoordelingen.css ==================== */ /* * beoordelingen.css - het formulier waarmee een klant een beoordeling schrijft * * 20 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. * * LET OP BIJ HET OPRUIMEN HIERVAN. In de HTML van de productpagina staat een gewone keuzelijst * (`