/* * 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; } :where(#masthead, #mm-mobile, #mm-backdrop) .border-gray-200 { border-color: #e5e7eb; } :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 #e5e7eb; } 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 #e5e7eb; } @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 #e5e7eb; } @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 16px; 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); } /* 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 #e5e7eb; 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 #e5e7eb; 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; } 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 #e5e7eb; } 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 #e5e7eb; border-bottom: 1px solid #e5e7eb; } 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; } /* ==================== /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; } /* ============================================================================ * 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, picture, video, canvas { display: block; max-width: 100%; height: auto; } 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; visibility: hidden; 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/blog-basis.css ==================== */ /* * blog-basis.css - de nulstand van een blogbericht * * 6 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de inhoud van een * bericht, de uitgelichte afbeelding, en de marges eromheen. De eigen opmaak van de blog staat in * `css/blog.css`, dat later laadt en hier overheen gaat. */ @media (min-width: 993px) { .blog .site-content, .archive .site-content { padding-bottom: 3rem; } } .post .wp-post-image { margin-bottom: 1.618em; } article.post .entry-content { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } article.post .entry-content p:last-child { margin-bottom: 0; } .site-main:not(.grid) article.post { margin: 0 0 2.25rem; padding-bottom: 2rem; border-bottom: 1px solid #eee; } @media (max-width: 768px) { .single-post .entry-content { font-size: 15px; } } /* ==================== /css/productpagina-basis.css ==================== */ /* * productpagina-basis.css - de nulstand van een productpagina * * 17 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de kolommen, de * knop 'in winkelwagen' met zijn laadanimatie, en de plek van meldingen op een productpagina. * * Er stonden nog twee regels over PhotoSwipe (`.pswp`), de fotoviewer van het oude thema. Die * scripts zijn er op 27-08-2026 uitgehaald; nagemeten in de echte DOM op de productpagina en de * winkelwagen: nul elementen met een `pswp`-klasse, nul PhotoSwipe-scripts. Regels verwijderd. * * De eigen productpagina staat in `css/pdp.css`, dat later laadt en hier overheen gaat. */ .single-product:not(.pdp-ajax) .woocommerce:has(ul.woocommerce-error) { padding-bottom: 30px; } .single-product:has(.archive-header .woocommerce-message) .content-area { padding-top: 2rem; } .single-product .woocommerce:has(.woocommerce-message) { margin-left: auto; margin-right: auto; } @media (min-width: 993px) { .single-product .woocommerce:has(.woocommerce-message) { padding-right: 2.617924em; padding-left: 2.617924em; } } @media only screen and (min-width: 1070px) { .single-product .site-content .col-full { max-width: inherit; margin: 0; padding: 0; } } .single-product .content-area { width: 100%; } @media (max-width: 992px) { .single-product .content-area { width: calc(100% + 2em); margin-left: -1em; } } @media (min-width: 993px) and (max-width: 1199px ) { .single-product .site-content .col-full { padding: 0; } } .product { position: relative; } .product form.cart .quantity { float: left; } .cart .single_add_to_cart_button { float: left; width: calc(100% - 90px); height: 52px; margin-left: 40px; padding-top: 0; padding-bottom: 0; border-radius: 4px; background: #3bb54a; font-size: 18px; font-weight: 400; line-height: 52px; text-align: center; transition: all 0.2s; } .product form.cart .quantity:has(input[type=hidden]) + button.single_add_to_cart_button { margin-left: 0px; width: 100%; } .product form.cart .button, .ajax_add_to_cart.add_to_cart_button { position: relative; } .product form.cart .single_add_to_cart_button:after, .ajax_add_to_cart.add_to_cart_button:after { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; opacity: 0; transition: opacity 0s ease; content: ""; display: inline-block; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-left-color: #fff; border-radius: 50%; vertical-align: middle; } .product .variations_button:after, .product .variations_button:before, .product form.cart:after, .product form.cart:before { display: table; content: ""; clear: both; } .product-widget p, .product-widget ul li, .product-widget fieldset legend { font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem); } .product-widget fieldset legend { display: block; margin: 0 auto; width: inherit; padding: 10px; color: #111; font-weight: 600; text-align: center; } /* ==================== /css/formulier-basis.css ==================== */ /* * formulier-basis.css - de nulstand van invoervelden * * 22 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: tekstvelden, keuzelijsten, * vinkjes, tekstvlakken, labels, het rode sterretje bij een verplicht veld, en de tweekoloms * indeling van `.form-row` op desktop. Ook de basisknop staat hier (`.button` en de drie * `input`-varianten), omdat die in het oude thema in hetzelfde blok stond. * * De eigen formulieropmaak staat in `css/forms.css`, dat later laadt en hier overheen gaat. */ .form-row input, .form-row select, .form-row textarea { width: 100%; } .form-row label { display: block; margin-bottom: 5px; color: #111; font-size: 14px; font-weight: 600; } .form-row .button, .form-row input[type="checkbox"], .form-row input[type="radio"] { width: auto; } .form-row-last { margin-right: 0!important; } @media (min-width:993px) { .form-row-first { float: left; clear: both; width: 47.0588235294%; margin-right: 5.8823529412%; } .form-row-last { float: right; width: 47.0588235294%; margin-right: 0; } } .required { border-bottom: 0; color: #df0202; text-decoration: none; } fieldset legend { width: calc(100% + 60px); margin-left: -30px; padding: 10px 30px 10px; color: #111; font-size: 20px; font-weight: 600; } select { width: 100%; padding: 0 40px 0 0.7em; padding-right: 40px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='402' width='582' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath fill='%23888' id='svg_1' d='m1408,704q0,26 -19,45l-448,448q-19,19 -45,19t-45,-19l-448,-448q-19,-19 -19,-45t19,-45t45,-19l896,0q26,0 45,19t19,45z'/%3E%3C/g%3E%3C/svg%3E") calc(100% - 12px) 12px no-repeat; margin: 0; background-size: 15px 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid #d2d6dc; border-radius: 0.3rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); height: 40px; } select:focus { outline: 0; } @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) { select { padding-right: 0; background-image: none; } } .button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; padding: 0.8180469716em 1.41575em; border: 0; border-color: #43454b; border-radius: 4px; font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); outline: 0; background: 0 0; background-color: #43454b; font-weight: 600; text-shadow: none; text-decoration: none; cursor: pointer; -webkit-appearance: none; transition: 0.2s all; } input[type="button"], input[type="reset"], input[type="submit"] { color: #fff; font-weight: 600; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="tel"], input[type="text"], input[type="url"] { width: 100%; } input[type="password"], input[type="search"], input[type="email"], input[type="text"], input[type="number"], input[type="tel"] { outline: 0; margin-bottom: 0; border: 1px solid #d2d6dc; border-radius: 0.3rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); height: 40px; padding: 0 0.7em; } input[type="search"] { padding-left: 43px; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="search"]::-moz-placeholder { color: #555; } input[type="search"]::placeholder { color: #555; } textarea { overflow: auto; border: 1px solid #d2d6dc; border-radius: 0.25rem; padding: 0.8em; outline: 0; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); width: 100%; padding-left: 0.875em; vertical-align: top; height: 150px; } .input-text:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus, textarea:focus { border-color: #9c9c9c; } /* ==================== /css/typografie-basis.css ==================== */ /* * typografie-basis.css - koppen en tekstblokken * * 9 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de regelafstand van h1 tot h6, * de extra ruimte boven een kop die op een lijst of formulier volgt, geneste lijsten in de * inhoud, en de breedte van `.site`. * * De eigen typografie staat in `css/global.css`, dat eerder laadt maar met eigen klassen werkt. */ h1,h2 { margin: 0 0 1rem; } h3,h4,h5,h6 { margin: 0 0 0.5rem; } blockquote+h2,blockquote+h3,blockquote+h4,blockquote+header h2,form+h2,form+h3,form+h4,form+header h2,ol+h2,ol+h3,ol+h4,ol+header h2,p+h2,p+h3,p+h4,p+header h2,table+h2,table+h3,table+h4,table+header h2,ul+h2,ul+h3,ul+h4,ul+header h2 { margin-top: 1.2906835em; } .entry-content ol ol, .entry-content ul ul { margin: 1em 0 1em 2em; } @media (max-width: 768px) { .site { font-size: 15px; } input, select, textarea { font-size: 16px; } .entry-content:not(.wc-tab) p.form-row { font-size: 14px; } .site h1 { font-size: 30px; letter-spacing: -0.01em; } .site h2 { font-size: clamp(1.375rem, 0.9939rem + 1.2195vw, 1.75rem); letter-spacing: -0.01em; } } /* * Drie regels die tot 27-08-2026 als restje in `basislaag.css` stonden en hier thuishoren: de ruimte * onder een paginakop, de ruimte onder de kop van een 404-pagina, en de onderstreping van links in * lopende tekst (categorietekst, productmeta, reacties). * * `:not(.stars)` is er op 27-08 bij gekomen. De onderstrepingsregel raakte namelijk ook de * sterlinks in het beoordelingsformulier (`p.stars a`, die WooCommerce met JavaScript in de plaats * van de keuzelijst zet). Dat viel niet op zolang de regel vooraan in `basislaag.css` stond en dus * verloor van `beoordelingen.css`. Toen hij hierheen verhuisde en later kwam te staan, kregen die * sterren ineens een streep eronder. De regel is bedoeld voor links in lopende tekst; sterren zijn * dat niet. */ .page-header { margin-bottom: 1.5rem; } body.error404 h1 { margin-bottom: 0.5rem; } .below-woocommerce-category a, .product-widget a, .post-meta a, .comment-text a, .comment-respond p:not(.stars) a, .product_meta a, .woocommerce-tabs table.woocommerce-product-attributes a, .entry-content article a:not(.elementor-button), a.reset_variations, body:not(.elementor-page):not(.woocommerce-account):not(.woocommerce-order-received) .entry-content p:not(.product__categories) a:not(.button) { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.75px; } /* ==================== /css/header-basis.css ==================== */ /* * header-basis.css - wat het oude thema aan de bovenbalk gaf * * 2 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Meer was het niet: de eigen * bovenbalk staat in `css/header.css` en doet vrijwel alles zelf. * * Er stond een derde regel, over `.commercekit-waitlist-popup--active`. CommerceKit is op 23-08-2026 * uit de site gehaald; nagemeten in de echte DOM op 27-08: nul elementen met die klasse, nul scripts * van die plugin. Regel verwijderd. */ @media (min-width: 993px) { .site-header { position: relative; z-index: 20; } } @media (max-width: 992px) { .site-header .wt-header-cart__knop a.cart-contents .amount { display: none; } } /* ==================== /css/footer-basis.css ==================== */ /* * footer-basis.css - wat het oude thema aan de voettekst gaf * * 3 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. De eigen voettekst staat in * `css/footer.css` en doet de rest. */ footer { clear: both; } footer a:not(.button):hover { color: #fff; } footer:last-child:not(:only-of-type) { margin-top: -3rem; } /* ==================== /css/layout-basis.css ==================== */ /* * layout-basis.css - de kolombreedtes van het oude thema * * 15 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: `.col-full` (de buitenste * container met zijn maximale breedte), `.content-area` per paginasoort, en `.site-content`. * * Dit is de laag waar bijna elke pagina op staat, en tegelijk de laag die het meest naar het oude * thema ruikt: klassenamen als `.right-post-sidebar` en `.left-woocommerce-sidebar` komen uit * instellingen die niet meer bestaan. Kandidaat voor opruimen, maar alleen met een meting erbij. */ @media (min-width: 993px) { .col-full { box-sizing: content-box; margin-right: auto; margin-left: auto; max-width: 1170px; padding-right: 2.617924em; padding-left: 2.617924em; } .col-full:after { display: block; clear: both; content: ""; } } @media (max-width: 992px) { .col-full { padding-right: 1em; padding-left: 1em; } } @media (min-width: 993px) { .right-page-sidebar .content-area, .right-post-sidebar .content-area, .right-sidebar .content-area { float: left; } .search .content-area { float: right; } } .page-template-default:not(.woocommerce-page) .entry-header { margin-bottom: 1.5rem; } @media (min-width: 993px) { .page-template-default .site-content { padding-bottom: 3rem; } } @media (max-width: 992px) { .page-template-default .site-content { padding-bottom: 1.5rem; } } .page-template-template-fullwidth-php .content-area { width: 100%; } @media (min-width: 993px) { .left-woocommerce-sidebar #secondary { float: left; } .left-woocommerce-sidebar .content-area { float: right; } } .site-content { position: relative; } .site-content:focus { outline: none; } @media (min-width: 993px) { .site-content:after { display: block; visibility: hidden; position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: rgba(0, 0, 0, 0.7); content: ""; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; } } .woocommerce.archive .site-content { padding-bottom: 3rem; } /* * Het wachtwoordformulier van een beveiligde pagina. Stond tot 27-08-2026 als restje in * `basislaag.css`; het is een breedte-regel en hoort dus bij de indeling. */ .site-main:has(form.post-password-form) { max-width: 750px; margin: 0 auto; padding: 1em 1em 3rem 1em; font-size: 15px; } /* ==================== /css/archiefkop.css ==================== */ /* * archiefkop.css - de kop van een categoriepagina * * 37 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Alles boven de productenrij op * een categorie-, merk-, tag- of zoekpagina: de titel, het beige tekstvlak met de categorietekst, * de sorteerbalk met resultaattelling en sorteerkeuze, het blok onder de producten * (`below-woocommerce-category`), en de filterknop met de lade die op mobiel openschuift. * * De filterlade hoort hier omdat hij bij de sorteerbalk hoort, niet bij de zijbalk: `.mobile-filter` * is de knop, `.close-drawer` de sluitknop en `#secondary` de lade zelf. De open-stand staat * ergens anders, in `css/filter-flyout.css`; dit is alleen de dichte stand. * * Laadt direct na `basislaag.css`, dus de regels houden exact de plek in de cascade die ze hadden. * Gemeten over vijftien paginaladingen: nul verschil. */ .shop header.woocommerce-products-header { margin: 0; background-color: transparent; } h1.woocommerce-products-header__title { margin-bottom: 1.5rem; } .shop.shop-heading .woocommerce-products-header { align-items: flex-start; } .shop:not(.shop-heading) .woocommerce-products-header__title { display: none; } .wt-sorteerbalk { width: 100%; margin-bottom: 1.5rem; display: flex; align-items: center; } .wt-sorteerbalk .woocommerce-notices-wrapper { order: 1; } .wt-sorteerbalk .woocommerce-ordering { margin-bottom: 0; display: inline-flex; order: 2; } .wt-sorteerbalk .woocommerce-result-count { order: 3; } .wt-sorteerbalk .woocommerce-pagination { order: 4; } .wt-sorteerbalk.wt-sorteerbalk--onder { margin-top: 2em; margin-bottom: 0; } @media (min-width: 993px) { .wt-sorteerbalk.wt-sorteerbalk--onder { margin-top: 1em; } } .wt-sorteerbalk.wt-sorteerbalk--onder:empty { margin: 0; } .woocommerce-result-count { margin: 0; color: #111; font-size: 14px; } select.orderby { position: relative; height: auto; line-height: inherit; margin-bottom: 0; padding-left: 0; border: 0; color: #111; font-size: 14px; box-shadow: none; background-position: center right; } @media (min-width: 993px) { .woocommerce-ordering { margin-right: 1.5em; } } header.woocommerce-products-header { display: flex; background-color: #efeee3; align-items: center; overflow: hidden; margin-bottom: 2em; } header.woocommerce-products-header .term-description { padding: 2em; } header.woocommerce-products-header .term-description p:last-child{ margin: 0; } @media (min-width: 993px) { .term-description { min-width: 50%; } } @media (max-width: 992px) { header.woocommerce-products-header { flex-direction: column; } .wt-sorteerbalk .woocommerce-result-count { order: 1; clear: both; font-size: 12px; } form.woocommerce-ordering { margin: 0; width: 100%; } .wt-sorteerbalk { clear: both; display: grid; grid-template-columns: auto auto; gap: 0 20px; align-items: baseline; margin-top: 15px; margin-bottom: 15px; font-size: 12px; } select.orderby { font-size: 12px; width: 100%; } .archive .woocommerce-notices-wrapper { grid-column: 1/-1; } .term-description { order: 2; } header.woocommerce-products-header .term-description{ font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } header.woocommerce-products-header .term-description { padding: 1.25rem; letter-spacing: 0; } } .below-woocommerce-category { clear: both; margin: 2rem 0 0 0; font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); border: 1px solid #eee; padding: 1.5rem; } .below-woocommerce-category p:last-child { margin: 0; } .below-woocommerce-category a,.term-description a{ text-decoration: underline; text-decoration-thickness: 0.75px; text-underline-offset: 0.18em; } @media (min-width: 993px) { .mobile-filter { display: none; } } @media (max-width: 992px) { .mobile-filter { display: block; position: sticky; z-index: 3; top: 0px; width: 100%; height: 40px; padding-left: 40px; background-color: #fff; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06); text-transform: uppercase; color: #111; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; line-height: 36px; text-align: left; margin-left: -1.3em; width: calc(100% + 2.6em); } .mobile-filter svg { position: absolute; left: 20px; width: 18px; height: 18px; top: 50%; transform: translate(-50%, -50%); } .close-drawer { color: #fff; } .filters.close-drawer { top: 40px; visibility: hidden; display: none; } .woocommerce.archive #secondary, .wc-active.search-results #secondary, .page-template-template-woocommerce-archives #secondary { visibility: hidden; overflow-y: auto; position: fixed; z-index: 102; top: 0; left: -300px; width: 300px !important; height: 100%; padding: 1.5rem; opacity: 0; background: #fff; -webkit-overflow-scrolling: touch; transition: all 0.35s; transition-delay: 0.1s; } } /* ==================== /css/kruimelpad.css ==================== */ /* * kruimelpad.css - het kruimelpad en de ruimte eronder * * 15 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. * * Waarom er meer in staat dan alleen kruimels: vijf van de vijftien regels gaan over de * bovenmarge van `.site-content` en `.site-main`, en die hangt af van of er wel of geen kruimelpad * op de pagina staat (`body:has(.woocommerce-breadcrumb)`). Weghalen bij het kruimelpad zou die * regels onbegrijpelijk maken, dus ze verhuizen mee. * * Op de winkelwagen, de afrekenpagina en de bedankpagina staat het kruimelpad bewust uit. * * Laadt direct na `basislaag.css`, dus de regels houden exact de plek in de cascade die ze hadden. * Gemeten over vijftien paginaladingen: nul verschil. */ .woocommerce-breadcrumb { padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: clamp(0.75rem, 0.6547rem + 0.3049vw, 0.84375rem); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #666; } @media (min-width: 993px) { .woocommerce-breadcrumb { padding-top: 1rem; padding-bottom: 1rem; } } .woocommerce-breadcrumb p { margin: 0; } .woocommerce-breadcrumb a, .woocommerce-breadcrumb a:hover { color: #111; } .woocommerce-breadcrumb a:hover { text-decoration: underline; text-decoration-thickness: .5px; text-decoration-color: #111; text-underline-offset: 0.18em; } .woocommerce-breadcrumb a:first-of-type:before { display: none; } .single-product .woocommerce-breadcrumb { max-width: 1170px; margin-right: auto; margin-left: auto; padding-right: 2.617924em; padding-left: 2.617924em; } @media (min-width: 993px) and (max-width: 1480px) { .single-product .woocommerce-breadcrumb { padding-left: calc(2.617924em + 5px); } } @media (max-width: 992px) { .single-product .woocommerce-breadcrumb { padding-right: 0; padding-left: 0; } } body:has(:not(.woocommerce-breadcrumb)) .site-content, body.single-product:has(:not(.woocommerce-breadcrumb)) .site-main { padding-top: 2rem; } body:has(.woocommerce-breadcrumb) .site-content, body.page-template-template-fullwidth-no-heading .site-content, body.page-template-elementor_header_footer .site-content { padding-top: 0; } body.page-template-template-canvas:has(:not(.woocommerce-breadcrumb)) .site-content, body.woocommerce-cart:has(:not(.woocommerce-breadcrumb)) .site-content, body.woocommerce-checkout.min-ck:has(:not(.woocommerce-breadcrumb)) .site-content, body.single-product:has(:not(.woocommerce-breadcrumb)) .site-content { padding-top: 0; } body.single-product:has(.woocommerce-breadcrumb) .site-main { padding-top: 0; } @media (max-width: 992px) { .single-product:has(:not(.woocommerce-breadcrumb)) .site-main { padding-top: 1em; } } .woocommerce-cart .woocommerce-breadcrumb, .woocommerce-checkout .woocommerce-breadcrumb, .single-ckit_size_guide .woocommerce-breadcrumb, .single-post.post-l2 .woocommerce-breadcrumb { display: none; } /* ==================== /css/knoppen-basis.css ==================== */ /* * knoppen-basis.css - uitgeschakelde knoppen en de laadanimatie * * 7 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: hoe een knop eruitziet als hij * niet aanklikbaar is, het draaiende rondje tijdens het toevoegen aan de winkelwagen, en de * winkelwagenknop in de bovenbalk. * * De basisknop zelf staat in `css/formulier-basis.css`; de eigen knoppen in `css/global.css`. */ .added_to_cart.disabled, .added_to_cart:disabled, .button.disabled, .button:disabled, button.disabled, button:disabled, input[type=button].disabled ,input[type=button]:disabled, input[type=reset].disabled, input[type=reset]:disabled, input[type=submit].disabled, input[type=submit]:disabled { opacity: 0.3; cursor: not-allowed; } .added_to_cart.disabled:hover, .added_to_cart:disabled:hover, .button.disabled:hover, .button:disabled:hover, button.disabled:hover, button:disabled:hover, input[type=button].disabled:hover, input[type=button]:disabled:hover, input[type=reset].disabled:hover, input[type=reset]:disabled:hover, input[type=submit].disabled:hover, input[type=submit]:disabled:hover { opacity: 0.35; } .single-product .product form.cart .single_add_to_cart_button:after, .ajax_add_to_cart.add_to_cart_button:after { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; opacity: 0; transition: opacity 0s ease; content: ""; display: inline-block; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-left-color: #fff; border-radius: 50%; vertical-align: middle; } #payment .place-order .button:before, .cart-collaterals .checkout-button:before, .widget_shopping_cart .buttons .checkout:before, .wp-element-button.wc-block-cart__submit-button:before, .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button:before { content: ""; display: inline-flex; width: 18px; height: 18px; margin-right: 8px; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20 12c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5S7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20 12c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5S7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7z'%3E%3C/path%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; } @media (min-width: 993px) { .wt-header-cart__knop .cart-contents { padding: 0; color: #fff; } } .wt-header-cart__knop .cart-contents:after { margin-left: 10px; } .wt-header-cart__knop .cart-contents { display: block; text-decoration: none; } /* ==================== /css/meldingen.css ==================== */ /* * meldingen.css - de gekleurde balken van WooCommerce * * 9 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. 'Product toegevoegd aan je * winkelwagen', foutmeldingen bij het inloggen, de blauwe informatiebalk. Let op: dit gaat over de * oude meldingen (`.woocommerce-message` en familie), niet over die van de blok-winkelwagen en * blok-checkout (`.wc-block-components-notice-banner`). Die staan nog in de basislaag, bij de rest * van het blok-spul, tot de checkout-verbouwing klaar is. */ .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments { clear: both; margin-bottom: 2rem; margin-left: 0; padding: 1em 1.618em; border-left: 0.4180469716em solid rgba(0, 0, 0, 0.15); border-radius: 4px; font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem); color: #fff; outline: 0; } .woocommerce-error a, .woocommerce-info a, .woocommerce-message a, .woocommerce-noreviews a, p.no-comments a { color: #fff; transition: 0.2s all; } .woocommerce-error a:hover, .woocommerce-info a:hover, .woocommerce-message a:hover, .woocommerce-noreviews a:hover, p.no-comments a:hover { opacity: 0.7; color: #fff; } .woocommerce-error a.button:hover, .woocommerce-info a.button:hover, .woocommerce-noreviews a.button:hover, p.no-comments a.button:hover { opacity: 1; } .woocommerce-error .button,.woocommerce-info .button, .woocommerce-message .button, .woocommerce-noreviews .button, p.no-comments .button { float: right; padding: 0 0 0 1em; border-width: 0 0 0 1px; border-left-style: solid; border-left-color: rgba(255, 255, 255, 0.25)!important; border-radius: 0; color: #fff; background: 0 0; box-shadow: none; line-height: 1.618; font-weight: 600; } .woocommerce-error .button:hover, .woocommerce-info .button:hover, .woocommerce-message .button:hover, .woocommerce-noreviews .button:hover, p.no-comments .button:hover { opacity: 0.7; color: #fff; background: 0 0; } .woocommerce-info, .woocommerce-noreviews, p.no-comments { background-color: #3d9cd2; } .woocommerce-cart .woocommerce-notices-wrapper { margin-bottom: 2rem; } .woocommerce-cart .woocommerce-notices-wrapper:empty { margin: 0; } /* ==================== /css/paginering.css ==================== */ /* * paginering.css - de pagina-nummers onder een productenrij of bloglijst * * 22 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Twee stelsels door elkaar: * `.woocommerce-pagination` onder producten en `.pagination`/`.nav-links` onder blogberichten. * Ze zijn hier bij elkaar gezet omdat ze hetzelfde doen en dezelfde opmaak delen. * * Laadt direct na `basislaag.css`, dus de regels houden exact de plek in de cascade die ze hadden. * Gemeten over vijftien paginaladingen: nul verschil. */ .pagination .page-numbers { text-align: center; font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } .woocommerce-pagination .page-numbers li { display: inline-block; margin: 0 2px; } .pagination span.page-numbers, .pagination a.page-numbers { padding: 10px; } .nav-links { display: flex; width: 100%; justify-content: center; align-items: center; } .nav-links:has(.prev):before, .nav-links:has(.next):after { display: none; } .nav-links a.next { display: flex; justify-content: flex-end; flex: 1; padding-right: 0; } .woocommerce-pagination .page-numbers { margin: 0; } .woocommerce-pagination { font-size: 14px; } .woocommerce-pagination a, .woocommerce-pagination a:hover { color: #111; } .woocommerce-pagination .next, .woocommerce-pagination .prev { display: inline-block; position: relative; text-indent: -9999px; } .woocommerce-pagination .page-numbers.next, .woocommerce-pagination .page-numbers.prev { padding-left: 0.6em; padding-right: 0.5em; } .page-numbers .next:after, .page-numbers .prev:after, .woocommerce-pagination .next:after, .woocommerce-pagination .prev:after { display: inline-block; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; content: ""; background-color: #111; transform: translateX(-50%) translateY(-50%); text-rendering: auto; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .page-numbers .next:after, .woocommerce-pagination .next:after { -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 5L16 12L9 19' stroke='%234A5568' stroke-width='2' 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 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (min-width: 993px) { .woocommerce-pagination { margin-left: auto; } .woocommerce-pagination .page-numbers { padding: 0px 5px; } } @media (max-width: 992px) { .archive .woocommerce-pagination, .search-results .woocommerce-pagination { grid-column: 1/-1; } .archive .woocommerce-pagination, .search-results .woocommerce-pagination { order: 3; } .woocommerce-pagination { clear: both; text-align: center; margin-top: 20px; } .woocommerce-pagination ul.page-numbers { margin-bottom: 10px; } .woocommerce-pagination .page-numbers li { margin: 0 3px 6px 3px; } .woocommerce-pagination .page-numbers li .page-numbers { display: inline-block; width: 36px; height: 36px; font-size: 13px; margin: 0; padding: 0; border: 1px solid #e2e2e2; border-radius: 3px; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06); line-height: 36px; } .wt-sorteerbalk .woocommerce-pagination { grid-column: span 2; } } /* ==================== /css/aantalkiezer.css ==================== */ /* * aantalkiezer.css - het veld waarin je een aantal invult * * 6 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: het aantal-veld met de pijltjes * van de browser eraf. Staat op de productpagina en in de winkelwagen. */ .quantity { position: relative; } .quantity .qty { text-align: center; } .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity input[type=number] { -moz-appearance: textfield; } .product .cart .quantity .input-text { width: 50px; height: 52px; padding: 0 0.4em; border: 1px solid #e2e2e2; background-color: #fff; outline-offset: -3px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .product .cart .quantity .input-text:focus { border-color: #ccc; } /* ==================== /css/widgets.css ==================== */ /* * widgets.css - de blokken in de zijbalk * * 13 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de kop van een zijbalkblok, de * lijsten erin, en de filterlijsten van WooCommerce (`.widget_layered_nav`) met hun aantallen. * Dit is wat er in de filterlade op een categoriepagina staat. */ .widget .widget-title { display: block; margin-bottom: 0.65em; color: #111; } .widget ul { margin-bottom: 0; margin-left: 0; list-style: none; } @media (min-width: 993px) { .widget-area { padding-bottom: 2rem; } } @media (max-width: 992px) { .widget-area { padding-top: 2rem; padding-bottom: 1rem; } } #secondary .widget { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e2e2e2; display: flex; flex-direction: column; } #secondary .widget:last-child { padding-bottom: 0; border: none; } .widget li, .site-content .widget li { margin-bottom: 0.4em; font-size: 14px; line-height: 1.45; } .widget-area .widget a { color: #222; } .widget-area .widget a:not(.button):hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.18em; } .widget_layered_nav li { margin-bottom: 0.6180469716em; } .widget_layered_nav ul li { position: relative; padding-left: 20px; } .widget_layered_nav ul li:before { display: block; content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0px 0px 2px 0px #555; position: absolute; left: 0px; margin-top: 6px; background: #fff; border: 2px solid #fff; } .widget.woocommerce li .count { font-size: 12px; position: absolute; top: 2px; right: 0px; opacity: 0.75; } /* ==================== /css/winkelwagen-basis.css ==================== */ /* * winkelwagen-basis.css - de nulstand van de winkelwagenpagina * * 8 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de pagina, de * paginatitel, en het veld met de productafbeelding per regel. * * De eigen winkelwagen staat in `css/cart.css`, dat later laadt en hier overheen gaat. */ .woocommerce-cart .site-main { padding-top: 2rem; } .woocommerce-cart .content-area { width: 100%; padding-bottom: 2rem; } .woocommerce-cart h1.entry-title { display: none; } .woocommerce-cart-form { float: left; width: 62%; margin-bottom: 0; } @media (max-width: 992px) { .woocommerce-cart-form, .cart-collaterals { float: none; width: 100%; } } .cart-custom-field { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } .cart-custom-field img { margin: 0 auto 20px auto; display: block; } @media (max-width: 992px) { .cart-custom-field img { width: 100%; max-width: 400px; } } /* ==================== /css/blok-checkout-basis.css ==================== */ /* * blok-checkout-basis.css - de nulstand van de blok-winkelwagen en blok-checkout * * 30 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Alles wat het oude thema onder * de blokken van WooCommerce legde: de breedte van de afrekenpagina, de meldingsbalken * (`.wc-block-components-notice-banner`), de bestelknop, de koppen in het besteloverzicht, en het * inlogformulier op de afrekenpagina. * * LET OP: de checkout wordt op dit moment verbouwd, van een MutationObserver die de React-DOM * aanpast naar de officiele WooCommerce-extensibility. Deze 30 regels zijn ongewijzigd verhuisd en * mogen pas herschreven worden als die verbouwing klaar is. Het inlogformulier * (`.woocommerce-form-login`) blijft daarbij expliciet met rust. */ .woocommerce-checkout.min-ck:not(.woocommerce-order-received) .site-header { border-bottom: 1px solid #eee; } .woocommerce-checkout .content-area { width: 100%; } .woocommerce-checkout:not(.woocommerce-order-received) .site-main { padding-top: 1.5rem; padding-bottom: 1.5rem; } .woocommerce-form__label-for-checkbox { display: block; cursor: pointer; } #ship-to-different-address .woocommerce-form__input-checkbox { position: relative; top: 1px; margin-right: 10px; transform: none; } .woocommerce-form-login { margin: 20px 0; padding: 1.5em; border: 2px dashed #eee; } @media (min-width: 993px) { .woocommerce-form-login { width: 57%; padding: 2rem; } } .woocommerce-form-login .form-row { width: 100%; } .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox { position: relative; top: 1px; margin-right: 0.5rem; } .woocommerce-form-login p { font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem); } .woocommerce-form-login .button { margin-top: 15px; } .woocommerce-form-login .lost_password { margin-top: 1rem; margin-bottom: 0; } .woocommerce-form-login .lost_password a { color: #333; } .wc-block-grid__product-add-to-cart.wp-block-button a.wp-block-button__link, .wc-block-grid__product-add-to-cart.wp-block-button .wc-block-components-product-button__button { display: block; width: 100%; height: 40px; padding: 0; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 40px; text-align: center; transition: all 0.1s; } .wp-block-columns p a, .wp-block-columns p a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.16em; } .woocommerce:has(.wc-block-components-notice-banner) { padding-bottom: 30px; } .wc-block-components-notice-banner__content .buttons-wrapper { margin-top: 10px; } .is-large.wc-block-cart, .wp-block-woocommerce-checkout.wc-block-checkout { margin-top: 2em; } .wp-element-button.wc-block-components-button.wc-block-cart__submit-button, .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button { border-radius: 6px; font-weight: bold; transition: background 0.2s ease; } .wc-block-components-notice-banner .message-inner { padding: 5px; } .wc-block-components-notice-banner .buttons-wrapper { margin-top: 10px; } @media (min-width: 993px) { .site .wc-block-components-notice-banner { margin-right: auto; margin-left: auto; } .single-product .site .wc-block-components-notice-banner { margin-top: 0; margin-bottom: 0; } } @media (max-width: 992px) { .wc-block-components-notice-banner { padding-right: 1em; padding-left: 1em; } } .wc-block-product .wc-block-components-product-sale-badge { font-size: 11px; } .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-heading { letter-spacing: 0; font-size: 20px; } .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-post-title { letter-spacing: 0; } .wp-block-woocommerce-checkout .wc-block-components-title.wc-block-components-title { font-size: 22px; font-weight: bold; letter-spacing: 0; } .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { font-weight: bold; } .wp-block-woocommerce-checkout .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button { font-size: 16px; padding: 14px 30px; } /* ==================== /css/account-basis.css ==================== */ /* * account-basis.css - de nulstand van Mijn account * * 7 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de kolommen, de * lettergrootte van de inhoud, het vinkje in een formulierrij, en de kopgrootte. * * WAT HIER STOND EN WEG IS (27-08-2026): veertien regels die het menu van Mijn account opmaakten, * uit de tijd van Shoptimizer. Een zwevende kolom van 17,6% breed, randjes onder de items, en zeven * regels die per menu-item een icoon als `mask-image` op `a:before` zetten. * * Die deden allang niets meer. `css/account.css` bouwt het menu helemaal zelf, met eigen * icoon-elementen (`.wt-account-nav__icon`), en had zelfs een aparte regel om die `:before` van * hierboven uit te zetten. Twee bestanden die elkaar bevochten, met dertien keer `!important` als * scheidsrechter. * * Waarom ze zo lang wonnen: `.woocommerce-MyAccount-navigation ul li a` heeft specificiteit 0,1,3 en * dat wint van `.woocommerce-MyAccount-navigation li > a` (0,1,2) in `account.css`, ongeacht welk * bestand later laadt. * * Gemeten na het weghalen: alle berekende eigenschappen van elk element op de vijf accountpagina's, * op 1280px en 375px. Zie `verify/README.md` voor hoe je ingelogde pagina's meet zonder in te loggen. */ @media (min-width: 993px) { .woocommerce-account .content-area { width: 100%; } .woocommerce-MyAccount-content { float: right; width: 76.4705882353%; padding-top: 0.7rem; } } .woocommerce-MyAccount-content { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } .form-row input.woocommerce-form__input-checkbox { float: left; margin: 5px 2px 0 0; } .woocommerce-account h2 { font-size: clamp(1.375rem, 1.1209rem + 0.813vw, 1.625rem); } .woocommerce-account .woocommerce-info .button { font-size: 14px; } @media screen and (max-width: 992px) { .woocommerce-account .site-content { padding-bottom: 3rem; } } /* ==================== /css/forms.css ==================== */ /** * Weltechniek — forms styling. * * Geladen via `wt_forms_page_has_form()`-check in inc/forms.php: alleen op * pages die daadwerkelijk een `[wt_form_*]`-shortcode bevatten. * * Tokens 1-op-1 met homepage.css / header.css / account.css / keuzehulp.css: * navy: #1e3a6d * navy-hover: #14284f * groen: #00bb00 (CTA + success) * groen-hover: #008d00 * rood-error: #d12d2d * tekst-grijs: #4a5868 * border: #e1eaf2 * bg-licht: #f7f8fa * * Mobile-first; desktop-tweaks via @media (min-width: 700px). * BEM-style classes met prefix `wt-form*`. Geen Shoptimizer-class-dependencies. */ /* ============================================================ */ /* === Form container === */ /* ============================================================ */ .wt-form { background: #fff; border: 1px solid #e1eaf2; border-radius: 8px; padding: 24px; max-width: 640px; margin: 0 0 32px; box-shadow: 0 2px 6px rgba(0, 0, 0, .04); } @media (min-width: 700px) { .wt-form { padding: 32px; } } /* ============================================================ */ /* === Field === */ /* ============================================================ */ .wt-form__field { margin-bottom: 18px; } .wt-form__field:last-of-type { margin-bottom: 22px; } .wt-form__label { display: block; font-size: 14px; font-weight: 600; color: #1e3a6d; margin: 0 0 6px; } .wt-form__required { color: #d12d2d; margin-left: 2px; } .wt-form__help { margin: 0 0 8px; font-size: 13px; color: #4a5868; line-height: 1.45; } .wt-form__input { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 15px; line-height: 1.4; color: #2c3e50; background: #fff; border: 1px solid #d6dde6; border-radius: 5px; transition: border-color .15s ease, box-shadow .15s ease; font-family: inherit; } .wt-form__input::placeholder { color: #98a2b3; } .wt-form__input:focus { outline: none; border-color: #1e3a6d; box-shadow: 0 0 0 3px rgba(30, 58, 109, .12); } .wt-form__textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .wt-form__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* Error-state per veld */ .wt-form__field--has-error .wt-form__input { border-color: #d12d2d; box-shadow: 0 0 0 3px rgba(209, 45, 45, .1); } .wt-form__error { display: none; margin: 4px 0 0; font-size: 13px; color: #d12d2d; font-weight: 500; } .wt-form__error.is-visible { display: block; } /* ============================================================ */ /* === Honeypot — verborgen voor mensen, zichtbaar voor bots === */ /* ============================================================ */ .wt-form__honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ */ /* === Submit + loading === */ /* ============================================================ */ .wt-form__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .wt-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #00bb00; color: #fff; border: 0; border-radius: 5px; padding: 13px 26px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, transform .05s ease; font-family: inherit; } .wt-form__submit:hover, .wt-form__submit:focus-visible { background: #008d00; outline: none; } .wt-form__submit:active { transform: translateY(1px); } .wt-form__submit:disabled, .wt-form__submit.is-loading { background: #98c098; cursor: progress; } .wt-form__loading { display: none; width: 18px; height: 18px; border: 2px solid #d6dde6; border-top-color: #1e3a6d; border-radius: 50%; animation: wt-form-spin .8s linear infinite; } .wt-form.is-submitting .wt-form__loading { display: inline-block; } @keyframes wt-form-spin { to { transform: rotate(360deg); } } /* ============================================================ */ /* === Global messages onder de submit === */ /* ============================================================ */ .wt-form__messages { margin-top: 14px; padding: 0; font-size: 14px; line-height: 1.45; } .wt-form__messages--error { padding: 12px 14px; background: #fef2f2; border-left: 3px solid #d12d2d; border-radius: 4px; color: #8a1c1c; } /* ============================================================ */ /* === Success state (vervangt form-content na submit) === */ /* ============================================================ */ .wt-form--success { background: #fff; border-color: #c8e6c8; } .wt-form__success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0; } .wt-form__success-icon { color: #00bb00; margin-bottom: 12px; } .wt-form__success-text { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: #2c3e50; max-width: 460px; } .wt-form__again { background: transparent; color: #1e3a6d; border: 1px solid #1e3a6d; border-radius: 5px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; font-family: inherit; } .wt-form__again:hover, .wt-form__again:focus-visible { background: #1e3a6d; color: #fff; outline: none; } /* ============================================================ */ /* === Extra veld-types (B2B-form): sectie-kop, half, radio, checkbox === */ /* ============================================================ */ /* Sectie-kop binnen het formulier */ .wt-form__section { font-size: 16px; font-weight: 700; color: #1e3a6d; margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid #e1eaf2; } .wt-form__section:first-child { margin-top: 0; } /* Half-width velden naast elkaar (desktop). Form wordt flex-wrap; alle directe children vullen standaard de volle breedte, alleen --half wordt 50%. Single-column forms blijven identiek. */ @media (min-width: 560px) { .wt-form { display: flex; flex-wrap: wrap; gap: 0 18px; align-content: flex-start; } .wt-form > * { flex: 0 0 100%; } .wt-form__field { flex: 0 0 100%; } .wt-form__field--half { flex: 1 1 calc(50% - 9px); } } /* Radio-groep (aanhef) */ .wt-form__radio-group { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 2px; } .wt-form__radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #2c3e50; cursor: pointer; font-weight: 400; } .wt-form__radio input { margin: 0; width: 16px; height: 16px; accent-color: #1e3a6d; cursor: pointer; } /* Enkele checkbox (nieuwsbrief-consent) */ .wt-form__field--checkbox { margin-top: 4px; } .wt-form__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4a5868; line-height: 1.45; cursor: pointer; font-weight: 400; } .wt-form__checkbox input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: #1e3a6d; cursor: pointer; } /* ============================================================ */ /* === Checkbox met info-tooltip (1:1 als account-registratie) === */ /* ============================================================ */ .wt-form__field--checkbox{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px} .wt-form__field--checkbox .wt-form__checkbox{align-items:center} .wt-form__field--checkbox .wt-form__error{flex-basis:100%} .wt-form__field--checkbox .wt-tooltip{transform:none} /* wt-tooltip (gekopieerd uit account.css zodat het ook op form-pagina's werkt) */ .wt-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 4px;padding:0;background:transparent;border:0;cursor:help;color:#9ca3af;vertical-align:middle;transition:color .15s ease;-webkit-tap-highlight-color:transparent} .wt-tooltip:hover,.wt-tooltip:focus-visible{color:#1e3a6d;outline:none} .wt-tooltip svg{width:16px;height:16px;pointer-events:none} .wt-tooltip__bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:12px 14px;font-size:13px;font-weight:400;color:#4b5563;width:280px;max-width:calc(100vw - 32px);line-height:1.45;box-shadow:0 10px 28px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.06);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none;z-index:100;text-align:left} .wt-tooltip__bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;filter:drop-shadow(0 1px 0 #e5e7eb)} .wt-tooltip:hover .wt-tooltip__bubble,.wt-tooltip:focus-visible .wt-tooltip__bubble,.wt-tooltip.is-active .wt-tooltip__bubble{opacity:1;visibility:visible} /* nieuwsbrief-checkbox: tekst minimaal omlaag voor perfecte uitlijning met checkbox */ .wt-form__field--checkbox .wt-form__checkbox span{position:relative;top:1px} /* ============================================================ */ /* === Variant: inline (compact, voor smalle kolommen) === */ /* Gebruikt door het nieuwsbriefformulier in de footer. Het kale */ /* kaartje van .wt-form (wit vlak, rand, schaduw, padding) hoort */ /* daar niet, want het staat al in een gekleurde kolom. */ /* ============================================================ */ .wt-form--inline { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; max-width: 100%; } .wt-form--inline .wt-form__field, .wt-form--inline .wt-form__field:last-of-type { margin-bottom: 10px; } .wt-form--inline .wt-form__actions { margin-top: 0; } .wt-form--inline .wt-form__submit { width: 100%; padding: 12px 20px; } .wt-form--inline .wt-form__messages { margin-top: 10px; } /* Bevestiging is hier één regel tekst; het grote vinkje en de "nog een bericht"-knop van de paginaformulieren passen niet in een footerkolom. */ .wt-form--inline .wt-form__success { padding: 0; text-align: left; } .wt-form--inline .wt-form__success-icon { display: none; } .wt-form--inline .wt-form__again { display: none; } /* Na een geslaagde submit krijgt het form er .wt-form--success bij, dat verderop een wit vlak met groene rand tekent. Hier expliciet terugdraaien, anders verschijnt dat vlak alsnog in de footerkolom. */ .wt-form--inline.wt-form--success { background: none; border: 0; } /* Label alleen voor schermlezers (visueel weg, wel voorleesbaar). */ .wt-form__label--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; } /* ==================== /css/homepage.css ==================== */ /** * Weltechniek — homepage stylesheet. * * Geladen via `wt_homepage_enqueue_assets()` alleen op de nieuwe homepage * (admin OF `?wt-homepage-preview=1`). * * Conventies: * - Alle classes geprefixt met `wt-home-*`, los van Shoptimizer-classes. * - Sectie-wrapper = `.wt-home-section`, content-wrapper = `.wt-home-section__inner` * (constraint tot 1301px = de echte content-breedte van de site). * - Modifier per sectie via `--` voor sectie-specifieke styling. * - Mobile-first; desktop-overrides via @media (min-width: 1024px). * - Brand-kleuren: navy #1e3a6d, navy-hover #14284f, groen #00bb00, * groen-hover #008d00, lichtgrijs #f7f8fa. * - Geen Shoptimizer-class-dependencies — straks 1-op-1 portable. */ /* ============================================================ */ /* === Basis sectie-wrapper === */ /* ============================================================ */ .wt-home { background: #fff; } /* Shoptimizer's `.col-full` heeft een eigen responsive padding (15px / 30px / 41.89px afhankelijk van breakpoint) en eigen max-width. De header gebruikt een eigen `.wrapper`-formule die NIET overeenkomt met col-full op tussen-breakpoints. Daardoor zou de homepage uit lijn raken met de header. Fix: bypass col-full's padding wanneer de nieuwe homepage actief is. Footer heeft eigen `.wt-footer__inner` en blijft werken. */ body.wt-home-active .col-full { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .wt-home-section { width: 100%; } /* Exacte kopie van de header's `.wrapper`-formule (zie css/header.css): --wrapper-max: 1301px --wrapper-padding: 1rem default, 1.5rem ≥640px, 2rem ≥1024px Resultaat: homepage en header zijn op ÉLK breakpoint pixel-aligned. */ .wt-home-section__inner { width: 100%; max-width: calc(1301px + 2rem); margin-inline: auto; padding-left: 1rem; padding-right: 1rem; padding-top: 36px; padding-bottom: 36px; box-sizing: border-box; } @media (min-width: 640px) { .wt-home-section__inner { max-width: calc(1301px + 3rem); padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .wt-home-section__inner { max-width: calc(1301px + 4rem); padding-left: 2rem; padding-right: 2rem; } } .wt-home-section__title { margin: 0 0 22px; font-size: 26px; font-weight: 700; color: #1e3a6d; line-height: 1.25; } /* TODO-placeholders */ .wt-home-section--todo { background: #fdf3e2; border-top: 1px dashed #d8a900; border-bottom: 1px dashed #d8a900; color: #6b4f00; } .wt-home-section--todo .wt-home-section__inner { padding: 18px 22px; } .wt-home-section--todo code { background: #fff; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, "SF Mono", Menlo, monospace; } /* ============================================================ */ /* === 1. Hero + USP === */ /* ============================================================ */ .wt-home-section--hero .wt-home-section__inner { padding-top: 22px; padding-bottom: 22px; } .wt-home-hero { display: grid; grid-template-columns: 1fr; gap: 18px; } .wt-home-hero__promo { display: block; height: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.08); } /* `object-fit: cover` zorgt dat de JPG de hele container vult zonder vervorming. Eventuele crop zit aan boven/onderkant waar enkel navy staat — geen contentverlies. TODO later: vervang deze JPG door een HTML-banner (titel/subtitel/CTA als losse elementen) zodat 'ie responsively meeschaalt en geen object-fit-trucs meer nodig heeft. */ .wt-home-hero__promo img { width: 100%; height: 100%; object-fit: cover; display: block; } .wt-home-hero__usp { /* Subtiele gradient + box-shadow matchen de "card-feel" van de hoofdbanner links (die heeft een navy-naar-cyaan gradient in het JPG + shadow). Doel: linker- en rechterkolom voelen als één matchend paar cards. */ background: linear-gradient(135deg, #1e3a6d 0%, #14284f 100%); border-radius: 8px; padding: 28px; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.08); } /* `!important` op de tekst-kleuren omdat Shoptimizer's globale heading- regel (h1-h6 in navy #1e3a6d) anders wint qua specificity en de titel onleesbaar wordt tegen de navy bg. */ .wt-home-hero__usp-title { margin: 0 0 16px; font-size: 24px; font-weight: 700; color: #fff !important; } .wt-home-hero__usp-list { margin: 0 0 24px; padding: 0; list-style: none; } .wt-home-hero__usp-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 1.4; color: #fff; } .wt-home-hero__usp-list strong { font-weight: 700; color: #fff; } /* Lucide `circle-check` outline-icoon — modern en subtiel. Geen cirkel-bg meer (was te schreeuwerig); het icoon ZELF is de cirkel + check. */ .wt-home-hero__usp-icon, .wt-home-wwk__usp-icon { display: inline-flex; align-items: center; justify-content: center; color: #00bb00; flex-shrink: 0; margin-top: 2px; } .wt-home-hero__usp-icon svg, .wt-home-wwk__usp-icon svg { width: 18px; height: 18px; } .wt-home-hero__reviews-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #fff !important; } /* Sterren in de hero (groen) en in de WWK-testimonials (amber) — Lucide star is van origine outline; `fill: currentColor` maakt er een gevulde ster van. */ .wt-home-hero__stars { color: #00bb00; margin-bottom: 6px; display: flex; gap: 2px; } .wt-home-hero__stars svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; } .wt-home-hero__testimonial { margin-bottom: 18px; } .wt-home-hero__testimonial-name { margin: 0; font-weight: 600; color: #fff; } .wt-home-hero__testimonial-text { margin: 4px 0 0; font-style: italic; color: #ffffffcc; font-size: 14px; line-height: 1.45; } .wt-home-hero__wwk-link { display: inline-block; margin-top: 4px; /* GEEN achtergrond: de WWK-trustmark-SVG is een WIT logo (fill="#FFFFFF") bedoeld voor donkere achtergronden — past perfect op de navy hero-aside. */ } .wt-home-hero__wwk-link img { display: block; max-width: 90px; height: auto; } @media (min-width: 1024px) { .wt-home-hero { grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; } } /* ============================================================ */ /* === 2. Categorie-USP-carousel === */ /* ============================================================ */ .wt-home-section--cards .wt-home-section__inner { padding-top: 14px; padding-bottom: 14px; } /* Generieke carousel-basis met CSS scroll-snap (geen JS-library). Auto-rotate via js/homepage-carousel.js (loopt over élke `.wt-home-carousel` op de pagina, met hover/focus/user-scroll pause en a11y reduced-motion-respect). */ .wt-home-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; /* default: 1 per view (mobile-first) */ gap: 18px; overflow-x: auto; /* Geen scroll-snap: Chrome blokkeert programmatische scrolls (auto- rotate) bij zowel `mandatory` als `proximity` snap in deze grid- layout. De auto-rotate scrollt zelf al in exacte item-breedtes, dus snap voegt niets toe. Touch-swipe is op mobiel ook natuurlijk zonder snap. */ scrollbar-width: thin; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } /* Variant: categorie-cards = 1 / 2 / 3 per view per breakpoint */ @media (min-width: 640px) { .wt-home-cards { grid-auto-columns: calc((100% - 18px) / 2); } } @media (min-width: 1024px) { .wt-home-cards { grid-auto-columns: calc((100% - 36px) / 3); } } .wt-home-cards__item { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease; } .wt-home-cards__item:hover, .wt-home-cards__item:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); } .wt-home-cards__item img { display: block; width: 100%; height: auto; } /* ============================================================ */ /* === 3. Ons assortiment (Shoptimizer renderer) === */ /* ============================================================ */ .wt-home-section--assortiment .wt-home-section__inner { padding-bottom: 24px; } /* ============================================================ */ /* === 4 + 5. Producten-rows === */ /* ============================================================ */ .wt-home-section--products .wt-home-section__inner { padding-top: 28px; padding-bottom: 28px; } /* ============================================================ */ /* === 6. Advies & klustips === */ /* ============================================================ */ /* Gebruikt nu de KANONIEKE blog-card (.wt-blog-card / .wt-blog-grid uit css/blog.css), identiek aan het blog-archief. De oude .wt-home-advies__* component is verwijderd. */ /* ============================================================ */ /* === 7. Info-blok === */ /* ============================================================ */ .wt-home-section--info { background: #fff; } .wt-home-section--info .wt-home-section__inner { padding-top: 40px; padding-bottom: 40px; } .wt-home-section--info p { margin: 0 0 18px; color: #2c3e50; font-size: 16px; line-height: 1.55; } .wt-home-section--info h3 { margin: 28px 0 12px; font-size: 22px; font-weight: 700; color: #1e3a6d; line-height: 1.3; } .wt-home-section--info a { color: #00bb00; text-decoration: none; } .wt-home-section--info a:hover, .wt-home-section--info a:focus-visible { text-decoration: underline; } /* ============================================================ */ /* === Keuzehulpen-banner (sectie tussen 3 en 4) === */ /* ============================================================ */ .wt-home-section--keuzehulp-banner .wt-home-section__inner { padding-top: 14px; padding-bottom: 28px; } .wel-keuzehulp-banner--home { margin: 0 auto; } /* ============================================================ */ /* === 8. WebwinkelKeur + testimonials === */ /* ============================================================ */ .wt-home-section--wwk { background: #fff; } .wt-home-wwk { display: grid; grid-template-columns: 1fr; gap: 24px; } .wt-home-wwk__cert img { display: block; max-width: 220px; height: auto; margin-bottom: 14px; } .wt-home-wwk__usp-list { margin: 0; padding: 0; list-style: none; } .wt-home-wwk__usp-list li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14px; color: #2c3e50; } /* Icon-badge gedeeld met hero — zie .wt-home-hero__usp-icon hierboven */ .wt-home-wwk__reviews { min-width: 0; display: flex; flex-direction: column; } /* WWK-reviews = carousel, identiek aan banner-carousel: 1 per view mobiel, 2 vanaf 640px, 3 vanaf 1024px. Auto-rotate elke 5 sec via gedeelde `.wt-home-carousel` class + `js/homepage-carousel.js`. */ .wt-home-wwk__cards { gap: 14px; } @media (min-width: 640px) { .wt-home-wwk__cards { grid-auto-columns: calc((100% - 14px) / 2); } } @media (min-width: 1024px) { .wt-home-wwk__cards { grid-auto-columns: calc((100% - 28px) / 3); } } .wt-home-wwk__card { background: #f7f8fa; border-radius: 6px; padding: 14px 16px; } .wt-home-wwk__card-name { margin: 0; font-weight: 700; color: #1e3a6d; font-size: 14px; } .wt-home-wwk__stars { margin: 4px 0 8px; color: #ffb800; display: flex; gap: 2px; } .wt-home-wwk__stars svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; } .wt-home-wwk__card-text { margin: 0; font-size: 13px; line-height: 1.45; color: #4a5868; } /* "Bekijk alles op Webwinkelkeur" link — rechts uitgelijnd onder de reviews-grid, Lucide arrow-up-right icoon naast de tekst (geen HTML-entity meer). `margin-left: auto` werkt omdat de parent (.wt-home-wwk__reviews) flex-column is. */ .wt-home-wwk__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; align-self: flex-start; color: #1e3a6d; font-weight: 600; font-size: 14px; text-decoration: none; } @media (min-width: 640px) { .wt-home-wwk__more { align-self: flex-end; } } .wt-home-wwk__more-icon { display: inline-flex; align-items: center; } .wt-home-wwk__more-icon svg { width: 16px; height: 16px; stroke-width: 2; transition: transform .15s ease; } .wt-home-wwk__more:hover, .wt-home-wwk__more:focus-visible { text-decoration: underline; } .wt-home-wwk__more:hover .wt-home-wwk__more-icon svg, .wt-home-wwk__more:focus-visible .wt-home-wwk__more-icon svg { transform: translate(2px, -2px); } @media (min-width: 1024px) { .wt-home-wwk { grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } } /* ============================================================ */ /* === Responsive helpers === */ /* ============================================================ */ @media (max-width: 768px) { .wt-home-section__title { font-size: 22px; } .wt-home-section--info h3 { font-size: 18px; } .wt-home-hero__usp { padding: 22px; } .wt-home-hero__usp-title { font-size: 20px; } } /* ============================================================ */ /* === Hero actiebanner (gecodeerd, vervangt platte promo-JPG) */ /* Herbruikbaar maandelijks format; config staat in */ /* inc/homepage/sections/hero.php. Tokens via global.css. */ /* Responsive via container-query units (cqw). */ /* ============================================================ */ .wt-banner, .wt-banner * { box-sizing: border-box; } .wt-banner { position: relative; width: 100%; display: block; aspect-ratio: 1600 / 800; /* intrinsieke hoogte bij 1-koloms/mobiel */ container-type: inline-size; overflow: hidden; border-radius: 8px; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: radial-gradient(115% 130% at 70% 50%, #3a5fa6 0%, #294e8f 28%, var(--wt-blue, #1e3a6d) 55%, #14284f 80%, #0f1d38 100%); box-shadow: 0 4px 14px rgba(8, 28, 72, .18); } /* In de 2-koloms hero (>=1024) vult de banner de promo-cel = hoogte USP-sidebar. */ @media (min-width: 1024px) { .wt-banner { aspect-ratio: auto; height: 100%; } } .wt-banner__glow { position: absolute; top: 50%; right: 18%; width: 55cqw; height: 55cqw; transform: translateY(-50%); background: radial-gradient(circle, rgba(120, 180, 255, .45) 0%, rgba(120, 180, 255, 0) 62%); pointer-events: none; } .wt-banner__product { position: absolute; top: 50%; right: 3cqw; transform: translateY(-50%); width: 46cqw; height: auto; max-height: 84%; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .30)); } .wt-banner__badge { position: absolute; top: 5.5cqw; right: 5.5cqw; width: 12cqw; height: 12cqw; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: radial-gradient(circle at 34% 26%, #15c722 0%, var(--wt-green, #00bb00) 42%, #008d00 76%, #006400 100%); box-shadow: 0 10px 26px rgba(0, 153, 0, .40); } .wt-banner__badge b { font-size: 3.4cqw; font-weight: 800; line-height: .95; letter-spacing: -.02em; } .wt-banner__badge span { font-size: 1.5cqw; font-weight: 600; line-height: 1; margin-top: .25cqw; } .wt-banner__content { position: absolute; top: 50%; left: 5.6cqw; transform: translateY(-50%); width: 53cqw; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; } .wt-banner__kicker { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1.9cqw; } .wt-banner__kicker-name { font-size: 1.3cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #bdd3f2; white-space: nowrap; } .wt-banner__tag { font-size: 1.15cqw; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: #d12e37; padding: .4cqw .9cqw; border-radius: 4px; } .wt-banner__title { margin: 0; color: #fff; font-weight: 800; font-size: 4.6cqw; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; } .wt-banner__body { margin: 2.4cqw 0 0; color: #eef2f9; font-weight: 400; font-size: 1.85cqw; line-height: 1.5; max-width: 42cqw; text-wrap: pretty; } .wt-banner__price { margin: 2.2cqw 0 0; color: #eef2f9; font-weight: 500; font-size: 1.95cqw; line-height: 1.3; } .wt-banner__price s { opacity: .6; } .wt-banner__price strong { font-weight: 800; color: #fff; } .wt-banner__cta { display: inline-flex; align-items: center; gap: 1.1cqw; margin-top: 3.2cqw; background: #fff; color: var(--wt-blue, #1e3a6d); font-weight: 700; font-size: 1.95cqw; text-decoration: none; padding: 1.5cqw 2.9cqw; border-radius: 5px; box-shadow: 0 10px 24px rgba(6, 24, 70, .28); } .wt-banner__cta svg { width: 1.7cqw; height: 1.7cqw; flex: none; } /* Mobiel (<600px): 2:1 wordt te laag → gestapeld (tekst boven, product onder). */ @media (max-width: 599px) { .wt-banner { aspect-ratio: auto; display: flex; flex-direction: column; } .wt-banner__glow { display: none; } .wt-banner__content { position: static; transform: none; width: 100%; order: 2; padding: 4px 22px 24px; } .wt-banner__kicker { gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .wt-banner__kicker-name { font-size: 11px; } .wt-banner__tag { font-size: 10px; padding: 3px 7px; } .wt-banner__title { font-size: 24px; } .wt-banner__body { font-size: 14px; margin-top: 12px; max-width: none; } .wt-banner__price { font-size: 15px; margin-top: 12px; } .wt-banner__cta { font-size: 15px; padding: 11px 20px; margin-top: 18px; gap: 8px; } .wt-banner__cta svg { width: 14px; height: 14px; } .wt-banner__product { position: static; transform: none; order: 1; width: 78%; max-width: 300px; max-height: none; margin: 20px auto 2px; display: block; } .wt-banner__badge { width: 64px; height: 64px; top: 42px; right: 14%; } .wt-banner__badge b { font-size: 19px; } .wt-banner__badge span { font-size: 9px; } } /* Hele banner is nu één link → reset link-styling + subtiele hover/focus. */ a.wt-banner { text-decoration: none; color: inherit; cursor: pointer; } .wt-banner__cta { transition: box-shadow .15s ease, transform .15s ease; } a.wt-banner:hover .wt-banner__cta { box-shadow: 0 14px 32px rgba(6, 24, 70, .34); transform: translateY(-1px); } a.wt-banner:focus-visible { outline: 3px solid var(--wt-green, #00bb00); outline-offset: 3px; } /* ==================== /css/blog.css ==================== */ /** * blog.css — Weltechniek blog-cluster (Elementor-vrij) * Geladen op: 404, single post, blog-index (/blog/), categorie/tag/auteur-archieven. * Cachebust via filemtime() (geen handmatige Version-bump nodig). * * Tokens (zie Documenten/design-system.md): * navy #1e3a6d · navy-hover #14284f · groen #00bb00 · groen-hover #008d00 * tekst-grijs #4a5868 · border #e1eaf2 · bg-licht #f7f8fa · navy-tint #eef2f9 */ /* ============================================================ Herbruikbare blog-knoppen ============================================================ */ .wt-blog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 6px; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; cursor: pointer; } .wt-blog-btn--primary { background: #00bb00; color: #fff; border-color: #00bb00; } .wt-blog-btn--primary:hover { background: #008d00; border-color: #008d00; color: #fff; } .wt-blog-btn--ghost { background: transparent; color: #1e3a6d; border-color: #cdd9e8; } .wt-blog-btn--ghost:hover { background: #eef2f9; border-color: #1e3a6d; color: #1e3a6d; } /* ============================================================ 404 ============================================================ */ .wt-404 { display: flex; align-items: center; gap: 48px; padding: 48px 0 64px; max-width: 1000px; } .wt-404__text { flex: 1 1 auto; min-width: 0; } .wt-404__title { color: #1e3a6d; font-size: 32px; line-height: 1.2; margin: 0 0 18px; } .wt-404__intro { color: #4a5868; font-size: 17px; line-height: 1.65; margin: 0 0 28px; max-width: 48ch; } .wt-404__buttons { display: flex; flex-wrap: wrap; gap: 14px; } .wt-404__image { flex: 0 0 auto; width: 320px; max-width: 40%; } .wt-404__image img { display: block; width: 100%; height: auto; } @media (max-width: 768px) { .wt-404 { flex-direction: column-reverse; align-items: flex-start; gap: 28px; padding: 32px 0 48px; } .wt-404__image { width: 220px; max-width: 60%; margin: 0 auto; } .wt-404__title { font-size: 26px; } .wt-404__intro { font-size: 16px; } .wt-404__buttons { width: 100%; } .wt-404__buttons .wt-blog-btn { flex: 1 1 auto; } } /* ============================================================ Blog-archief (blog-index /blog/ + categorie/tag/auteur) ============================================================ */ .wt-blog-archive { padding: 8px 0 56px; } .wt-blog-archive__header { margin-bottom: 36px; } .wt-blog-archive__title { color: #1e3a6d; font-size: 32px; line-height: 1.2; margin: 0 0 16px; } .wt-blog-archive__intro { color: #4a5868; font-size: 17px; line-height: 1.65; max-width: 70ch; } .wt-blog-archive__intro p { margin: 0 0 12px; } .wt-blog-archive__intro p:last-child { margin-bottom: 0; } /* Grid */ .wt-blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 1100px) { .wt-blog-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .wt-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 540px) { .wt-blog-grid { grid-template-columns: 1fr; gap: 22px; } } /* Card — hele kaart klikbaar via stretched link (.wt-blog-card__title a::after) */ .wt-blog-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e1eaf2; border-radius: 8px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .wt-blog-card:hover { box-shadow: 0 8px 24px rgba(30, 58, 109, .10); border-color: #cdd9e8; transform: translateY(-2px); } /* Stretched link: titel-link dekt de hele kaart af */ .wt-blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wt-blog-card__thumb { display: block; aspect-ratio: 16 / 10; background: #eef2f9; overflow: hidden; } .wt-blog-card__thumb img, .wt-blog-card__thumb--empty { display: block; width: 100%; height: 100%; object-fit: cover; } .wt-blog-card__thumb--empty { background: linear-gradient(135deg, #eef2f9, #e1eaf2); } .wt-blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 20px; } .wt-blog-card__title { font-size: 18px; line-height: 1.3; margin: 0 0 10px; } .wt-blog-card__title a { color: #1e3a6d; text-decoration: none; } .wt-blog-card__title a:hover { color: #14284f; text-decoration: underline; } .wt-blog-card__excerpt { color: #4a5868; font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; } .wt-blog-card__more { margin-top: auto; align-self: flex-start; padding: 9px 16px; font-size: 14px; pointer-events: none; /* decoratief; de stretched titel-link vangt de klik */ } /* Geen aparte hover op "Bekijk artikel": de hele kaart heeft al een hover-effect (lift + shadow). De knop blijft een rustige, statische label. */ /* ============================================================ Paginatie — KANONIEK herbruikbaar component (.wt-pagination) Markup: