/* ============================================================ Barebase — Component utility classes Geport uit ui_kits/website/styles.css. Gebruikt door block patterns en custom block markup. ============================================================ */ /* ----- Below-the-fold perf ----------------------------------- Sla layout + paint van mid/below-fold secties op tot ze in beeld scrollen. Halveert layout-update kosten op mobile en verkort de TBT bij eerste paint. Reserveer een ruwe intrinsic-size zodat de scrollbar niet "springt". Hero, header en de eerste sectie (onze-belofte) staan bewust NIET in deze lijst — die zitten above-fold. -------------------------------------------------------------- */ .bb-materiaal, .bb-product-highlight, .bb-comparison, .bb-steps, .bb-steps-section, .bb-community, .bb-reviews, .bb-email-capture, .bb-faq, .bb-instagram, .bb-trust-strip { content-visibility: auto; contain-intrinsic-size: auto 800px; } /* ============================================================ USP-bar — donkere balk boven de nav (parts/header.html). Staat in de normale flow en scrollt dus weg; de fixed .bb-nav start op top: var(--bb-usp-offset) (default = barhoogte) en wordt door barebase.js naar 0 geschoven zodra de bar uit beeld is. Mobile: 1 USP tegelijk, auto-rotatie via .is-active (barebase.js), fade via opacity. Barhoogte is een vaste constante: CSS-default én JS gebruiken 36px — wijzig je de hoogte, pas dan beide aan (USP_BAR_HEIGHT in assets/js/barebase.js). ============================================================ */ .bb-usp-bar { height: 36px; background: var(--bb-charcoal); color: var(--bb-warm-white); } .bb-usp-bar__list { list-style: none; margin: 0; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: center; gap: 48px; } .bb-usp-bar__item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } .bb-usp-bar__item svg { color: var(--bb-warm-sand); flex-shrink: 0; } /* Mobile: items gestapeld, alleen .is-active zichtbaar (fade). */ @media (max-width: 768px) { .bb-usp-bar__list { position: relative; } .bb-usp-bar__item { position: absolute; inset: 0; justify-content: center; opacity: 0; transition: opacity 360ms ease; } .bb-usp-bar__item.is-active { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bb-usp-bar__item { transition: none; } } /* ============================================================ Nav — fixed, transparent over dark heroes, solid otherwise. Layout: 3-kolom CSS grid (logo | menu center | cart). Op mobile reorderen we via grid-column zonder absolute positioning. Body classes: - `has-dark-hero` (set door front-page.html template / specifieke pagina's) - `is-scrolled` (gezet door assets/js/barebase.js bij scrollY > 80) ============================================================ */ .bb-nav { position: fixed; /* Start onder de USP-bar; barebase.js schuift dit naar 0px zodra de bar weggescrold is. Fallback = barhoogte zodat de nav vóór JS-init niet over de bar valt. */ top: var(--bb-usp-offset, 36px); left: 0; right: 0; z-index: 50; background: rgba(250, 248, 245, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bb-border); transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease, color 240ms ease; } /* WP zet `has-modal-open` op wanneer de responsive nav opent. Backdrop-filter maakt van .bb-nav een nieuwe containing-block voor position:fixed descendants — daardoor blijft de mobile-menu-overlay binnen de nav-bar (76px hoog) ipv de viewport. Schakel backdrop-filter uit terwijl de modal open is zodat de overlay correct full-viewport weergegeven wordt. Belangrijk: transition uitschakelen — anders fadet backdrop-filter over 240ms en blijft de containing-block tijdens die fade actief, waardoor je een 'tussen-menu' ziet voordat de overlay full-viewport ploft. Modal-open moet instant zijn, geen aesthetische fade. */ html.has-modal-open .bb-nav { transition: none; backdrop-filter: none; background: transparent; border-bottom-color: transparent; } /* 3-kolom grid via grid-template-areas (forceert 1 rij, geen auto-placement onverwachte wrapping). */ .bb-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "logo nav cart"; align-items: center; gap: 24px; min-height: 76px; /* WP's is-layout-flow zou anders 24px block-gap toevoegen op sibling-margin van nav/cart waardoor ze niet vertical-center uitkomen. Block-gap is hier 0 want grid handelt spacing zelf. */ --wp--style--block-gap: 0; } .bb-nav__inner > * { margin-block-start: 0; margin-block-end: 0; } .bb-nav__inner > .bb-nav__logo { grid-area: logo; justify-self: start; } .bb-nav__inner > .wp-block-navigation { grid-area: nav; justify-self: center; } .bb-nav__inner > .bb-nav__cart { grid-area: cart; justify-self: end; } /* Slim checkout-header: nav + cart-icoon zijn vervangen door deze badge (pre_render_block in inc/checkout.php) — elke link is daar een exit. */ .bb-nav__inner > .bb-nav__secure { grid-area: cart; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--bb-forest); } /* Nav links — default state matcht active state qua hoogte: altijd 2px solid transparent border + 2px padding-bottom, zodat activeren/hoveren geen shift veroorzaakt. text-decoration off om default zwarte underline van te onderdrukken. */ .bb-nav .wp-block-navigation-item__content { border-bottom: 2px solid transparent; padding-bottom: 2px; text-decoration: none; transition: border-color 180ms ease, color 180ms ease; } .bb-nav .wp-block-navigation-item__content:hover, .bb-nav .wp-block-navigation-item__content:focus-visible { border-bottom-color: var(--bb-sage); } /* Active page: sage onderlijn op huidige nav-link (WP voegt .current-menu-item toe op de
  • wanneer URL matched). */ .bb-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .bb-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { border-bottom-color: var(--bb-sage); } /* Over een dark hero: transparant zonder blur, witte tekst, lichte logo. */ body.has-dark-hero:not(.is-scrolled) .bb-nav { background: transparent; backdrop-filter: none; border-bottom-color: transparent; color: var(--bb-warm-white); } body.has-dark-hero:not(.is-scrolled) .bb-nav a, body.has-dark-hero:not(.is-scrolled) .bb-nav .wp-block-navigation-item__content { color: var(--bb-warm-white); } /* Active + hover state op dark hero: warm-sand ipv sage (zoals Chrome.jsx). */ body.has-dark-hero:not(.is-scrolled) .bb-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, body.has-dark-hero:not(.is-scrolled) .bb-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content, body.has-dark-hero:not(.is-scrolled) .bb-nav .wp-block-navigation-item__content:hover, body.has-dark-hero:not(.is-scrolled) .bb-nav .wp-block-navigation-item__content:focus-visible { border-bottom-color: var(--bb-warm-sand); } /* Mobile/tablet: hamburger links · logo center · cart rechts. WP's block-navigation toggelt z'n hamburger default pas onder 600px; tussen 600–1024 paste de horizontale nav niet meer in het grid → forceer hamburger + verberg inline-lijst tot 1024px. Grid-template-areas swap gebeurt in dezelfde @media zodat layout en toggle synchroon switchen. */ @media (max-width: 1024px) { .bb-nav__inner { grid-template-areas: "nav logo cart"; grid-template-columns: 1fr auto 1fr; gap: 12px; min-height: 64px; } .bb-nav__inner > .bb-nav__logo { justify-self: center; } .bb-nav__inner > .wp-block-navigation { justify-self: start; } /* Override WP-core 600px breakpoint: toon hamburger, verberg inline-lijst. */ .bb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .bb-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } } /* Mobile overlay: zwarte tekst op warm-white modal, ongeacht hero-state, links uitgelijnd. */ .bb-nav .wp-block-navigation__responsive-container.is-menu-open, .bb-nav .wp-block-navigation__responsive-container.is-menu-open a, .bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--bb-charcoal) !important; } .bb-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bb-warm-white) !important; padding: 96px var(--bb-pad-mobile, 16px) var(--bb-pad-tablet, 40px) !important; } .bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { justify-content: flex-start !important; align-items: flex-start !important; flex-direction: column !important; gap: var(--bb-pad-mobile, 16px) !important; width: 100% !important; text-align: left !important; } .bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 22px !important; font-weight: 500 !important; } .bb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 22px !important; letter-spacing: -0.01em !important; } /* Close button (X) — relatief tot wp-block-navigation__responsive-dialog */ .bb-nav .wp-block-navigation__responsive-container-close { top: 0 !important; right: 0 !important; padding: 8px !important; color: var(--bb-charcoal) !important; } .bb-nav .wp-block-navigation__responsive-container-close svg { width: 28px !important; height: 28px !important; } /* Gekleurde barebase-logo als klikbare home-link, geïnjecteerd via barebase.js in de dialog (zelfde positioning-context als close-button). Alleen zichtbaar in de open overlay — buiten .is-menu-open rendert de nav inline op desktop. */ .bb-nav .bb-nav__menu-logo { display: none; } .bb-nav .wp-block-navigation__responsive-container.is-menu-open .bb-nav__menu-logo { display: block; width: 180px; height: 44px; background: url('../logo/barebase-logo-horizontal.png') no-repeat left center; background-size: contain; margin-bottom: 56px; } /* Reduceer modal padding-top zodat logo + items niet onnodig laag staan */ .bb-nav .wp-block-navigation__responsive-container.is-menu-open { padding-top: 32px !important; } /* Logo: CSS-background, swap tussen kleurversie en wit boven dark hero. aspect-ratio matched de PNG (3000x660 ≈ 4.55:1) zodat height alleen genoeg is voor correcte schaling. */ .bb-nav__logo { display: inline-block; height: 44px; aspect-ratio: 3000 / 660; background-image: image-set( url('../logo/barebase-logo-horizontal.webp') type('image/webp'), url('../logo/barebase-logo-horizontal.png') type('image/png') ); background-size: contain; background-repeat: no-repeat; background-position: left center; text-indent: -9999px; overflow: hidden; transition: background-image 240ms ease; } @media (max-width: 768px) { .bb-nav__logo { height: 36px; } } body.has-dark-hero:not(.is-scrolled) .bb-nav__logo { background-image: image-set( url('../logo/barebase-logo-horizontal-white.webp') type('image/webp'), url('../logo/barebase-logo-horizontal-white.png') type('image/png') ); } /* Pagina's zonder dark hero krijgen padding-top zodat content niet onder de fixed nav valt. Front-page (met dark hero) compenseert dat zelf in de Hero. margin-block-start: 0 schakelt WP's block-gap (24px) tussen
    en
    uit — anders staat de eerste content 24px te laag. */ body:not(.has-dark-hero) .wp-site-blocks > main, body:not(.has-dark-hero) .wp-site-blocks > .wp-block-group:not(.alignfull):first-of-type { padding-top: 76px; margin-block-start: 0; } /* Top-level structuur: header, main en footer staan altijd flush tegen elkaar (geen WP block-gap ertussen). Sections binnen main regelen hun eigen padding. Dit is geen page-type specifieke regel meer — de gap tussen layout-onderdelen is nooit gewenst. */ .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; } /* Op de front-page én PDP sluiten ook alle children van post-content direct op elkaar aan (de sections zelf, in de loop). */ .has-dark-hero .wp-block-post-content, .bb-page-contact .wp-block-post-content, .bb-page-over .wp-block-post-content, .bb-page-how .wp-block-post-content, .page-template-page-landing .wp-block-post-content, .bb-pdp .wp-site-blocks { --wp--style--block-gap: 0; } .has-dark-hero .wp-block-post-content > *, .bb-page-contact .wp-block-post-content > *, .bb-page-over .wp-block-post-content > *, .bb-page-how .wp-block-post-content > *, .page-template-page-landing .wp-block-post-content > *, .bb-pdp .wp-site-blocks > .wp-block-template-part { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ----- Eyebrow ----- */ .bb-eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-accent); line-height: 1.2; } .bb-eyebrow--terracotta { color: var(--bb-terracotta); } .bb-eyebrow--sand { color: var(--bb-warm-sand); } .bb-eyebrow--sage { color: var(--bb-sage); } .bb-eyebrow--muted { color: var(--bb-fg-muted); } /* ----- Section title ----- */ .bb-section-title { max-width: 760px; margin: 0 0 56px; } .bb-section-title--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 680px; } .bb-section-title__title { margin: 14px 0 0; font-size: clamp(36px, 4.5vw, 52px); line-height: 1.05; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 700; } .bb-section-title__subtitle { margin: 18px 0 0; max-width: 560px; color: var(--bb-charcoal); font-size: 17px; line-height: 1.6; } .bb-section-title--center .bb-section-title__subtitle { margin-left: auto; margin-right: auto; } /* ----- Benefit strip (sectie #2, dark) ----- */ .bb-benefit-strip { background: var(--bb-deep-black); color: var(--bb-warm-white); padding: 40px 0; } .bb-benefit-strip__row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 0; max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .bb-benefit-strip__row { padding: 0 var(--bb-pad-tablet, 40px); } } @media (max-width: 720px) { .bb-benefit-strip__row { grid-template-columns: 1fr; gap: 24px; padding: 0 var(--bb-pad-mobile, 16px); } } .bb-benefit-strip__item { display: flex; align-items: center; gap: 18px; padding-left: 40px; padding-right: 40px; border-left: 1px solid rgba(212, 206, 198, 0.18); } .bb-benefit-strip__item:first-child { padding-left: 0; border-left: none; } .bb-benefit-strip__item:last-child { padding-right: 0; } @media (max-width: 720px) { .bb-benefit-strip__item { padding: 0; border-left: none; } } .bb-benefit-strip__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px; background: rgba(212, 184, 150, 0.14); color: var(--bb-warm-sand); display: inline-flex; align-items: center; justify-content: center; } .bb-benefit-strip__title { font-size: 18px; font-weight: 600; color: var(--bb-warm-white); line-height: 1.2; letter-spacing: -0.01em; margin: 0; } .bb-benefit-strip__sub { font-size: 13px; color: var(--bb-warm-sand); margin: 6px 0 0; letter-spacing: 0.01em; } /* ----- Onze belofte (sectie #3) ----- */ /* Product explainer — herbruikbare zigzag beeld/tekst-secties op de PDP. Drie opeenvolgende instanties vormen samen één lichte band; de afwisselende beeldkant (--image-right) geeft het zigzag-ritme. */ .bb-product-explainer { background: var(--bb-snow); padding: 96px 0; } .bb-product-explainer + .bb-product-explainer { padding-top: 0; } .bb-product-explainer__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); display: grid; grid-template-columns: 1fr 1.1fr; gap: 88px; align-items: center; } .bb-product-explainer--image-right .bb-product-explainer__image { order: 2; } .bb-product-explainer--image-right .bb-product-explainer__content { order: 1; } @media (max-width: 1024px) { .bb-product-explainer__inner { padding: 0 var(--bb-pad-tablet, 40px); gap: 56px; } } @media (max-width: 768px) { .bb-product-explainer__inner { grid-template-columns: 1fr; gap: 32px; padding: 0 var(--bb-pad-mobile, 16px); } .bb-product-explainer--image-right .bb-product-explainer__image, .bb-product-explainer--image-right .bb-product-explainer__content { order: 0; } } .bb-product-explainer__image { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; } .bb-product-explainer__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-product-explainer__title { margin: 14px 0 24px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 700; } .bb-product-explainer__body { font-size: 17px; line-height: 1.7; color: var(--bb-charcoal); max-width: 480px; margin: 0; } .bb-onze-belofte { background: var(--bb-snow); padding: 112px 0; } .bb-onze-belofte__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); display: grid; grid-template-columns: 1fr 1.1fr; gap: 88px; align-items: center; } @media (max-width: 1024px) { .bb-onze-belofte__inner { padding: 0 var(--bb-pad-tablet, 40px); gap: 56px; } } @media (max-width: 768px) { .bb-onze-belofte__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--bb-pad-mobile, 16px); } } .bb-onze-belofte__image { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; } .bb-onze-belofte__image img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; } .bb-onze-belofte__title { margin: 14px 0 24px; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 700; } .bb-onze-belofte__body { font-size: 17px; line-height: 1.7; color: var(--bb-charcoal); max-width: 480px; margin: 0 0 32px; } .bb-onze-belofte__list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--bb-border); } .bb-onze-belofte__item { display: grid; grid-template-columns: 20px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--bb-border); } .bb-onze-belofte__check { color: var(--bb-forest); margin-top: 2px; display: inline-flex; } .bb-onze-belofte__item-title { font-size: 15px; font-weight: 600; color: var(--bb-fg-strong); margin: 0; } .bb-onze-belofte__item-sub { font-size: 14px; color: var(--bb-fg-muted); margin: 2px 0 0; line-height: 1.5; } /* ----- Materiaal (sectie #4) ----- */ .bb-materiaal { background: var(--bb-sand); padding: 112px 0; } .bb-materiaal__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: flex-start; } @media (max-width: 1024px) { .bb-materiaal__inner { padding: 0 var(--bb-pad-tablet, 40px); gap: 56px; } } @media (max-width: 768px) { .bb-materiaal__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--bb-pad-mobile, 16px); } } .bb-materiaal__title { margin-top: 16px; font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.025em; line-height: 1.02; color: var(--bb-deep-black); font-weight: 700; } .bb-materiaal__body { margin-top: 24px; font-size: 16px; line-height: 1.65; color: var(--bb-charcoal); max-width: 320px; } .bb-materiaal__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; padding-top: 24px; } @media (max-width: 640px) { .bb-materiaal__specs { grid-template-columns: 1fr; gap: 32px; } } .bb-materiaal__spec { border-top: 1px solid var(--bb-stone); padding-top: 18px; } .bb-materiaal__spec h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--bb-deep-black); } .bb-materiaal__spec p { margin: 8px 0 0; font-size: 15px; color: var(--bb-charcoal); line-height: 1.6; } /* ----- Product highlight (sectie #5) ----- */ .bb-product-highlight { background: var(--bb-snow); padding: 112px 0; } .bb-product-highlight__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 88px; align-items: center; } @media (max-width: 1024px) { .bb-product-highlight__inner { padding: 0 var(--bb-pad-tablet, 40px); gap: 56px; } } @media (max-width: 768px) { .bb-product-highlight__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--bb-pad-mobile, 16px); } } .bb-product-highlight__title { margin: 14px 0 20px; font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.025em; line-height: 1.05; color: var(--bb-deep-black); font-weight: 700; } .bb-product-highlight__body { margin: 0 0 28px; font-size: 17px; line-height: 1.7; color: var(--bb-charcoal); max-width: 460px; } .bb-product-highlight__sizes { display: flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 11px; font-weight: 500; color: var(--bb-warm-grey); letter-spacing: 0.08em; text-transform: uppercase; flex-wrap: wrap; } .bb-product-highlight__sizes-sep { color: var(--bb-stone); } .bb-product-highlight__price-row { display: flex; align-items: baseline; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .bb-product-highlight__price { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; color: var(--bb-deep-black); } .bb-product-highlight__price-aside { font-size: 14px; color: var(--bb-fg-muted); } .bb-product-highlight__btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 17px; letter-spacing: 0.02em; line-height: 1; padding: 22px 44px; border-radius: 6px; text-decoration: none; background: var(--bb-forest); color: #fff; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); } .bb-product-highlight__btn:hover { background: var(--bb-deep-black); color: #fff; text-decoration: none; } /* Interactieve mini-buybox op homepage: maatkeuze + dynamische CTA. Gedeeld met PDP-buybox via `data-bb-*` attrs (zie assets/js/product-buy-box.js). */ .bb-product-highlight__size-block { margin-bottom: 24px; } .bb-product-highlight__size-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; } .bb-product-highlight__size-label { display: block; font-size: 11px; font-weight: 600; color: var(--bb-warm-grey); letter-spacing: 0.08em; text-transform: uppercase; } .bb-product-highlight__size-hint { font-size: 12px; color: var(--bb-link, var(--bb-forest)); text-decoration: underline; text-underline-offset: 3px; } .bb-product-highlight__sizes-row { display: flex; gap: 10px; } .bb-product-highlight__size { padding: 12px 22px; border-radius: 6px; border: 1.5px solid var(--bb-border); background: var(--bb-snow); color: var(--bb-fg); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: 150ms; } .bb-product-highlight__size.is-active { border-color: var(--bb-sage); background: var(--bb-sand); color: var(--bb-forest); } .bb-product-highlight__size[data-out-of-stock] { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; } .bb-product-highlight__cta { border: 0; cursor: pointer; font-family: inherit; } .bb-product-highlight__cta[disabled] { opacity: 0.5; cursor: not-allowed; } .bb-product-highlight__actions { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; } /* "Bekijk product" is een tekstlink naast de ATC, bewust ingetogen. */ .bb-product-highlight__view { font-size: 15px; font-weight: 600; color: var(--bb-forest); text-decoration: underline; text-underline-offset: 3px; } .bb-product-highlight__view:hover { color: var(--bb-deep-black); } .bb-product-highlight__image { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--bb-sand); } .bb-product-highlight__image img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } /* ----- Community banner (sectie #8) ----- */ .bb-community { background: var(--bb-deep-black); position: relative; overflow: hidden; } .bb-community__bg-wrap { position: relative; min-height: 620px; } .bb-community__bg-wrap > picture { display: contents; } .bb-community__bg { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: right 80%; transform: scaleX(-1); } .bb-community__overlay { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.85) 30%, rgba(26,26,26,0.55) 55%, rgba(26,26,26,0.25) 80%, rgba(26,26,26,0.10) 100%); } .bb-community__inner { position: relative; min-height: 620px; display: flex; align-items: center; padding: 100px var(--bb-pad-desktop, 80px); max-width: var(--bb-content-max); margin: 0 auto; } @media (max-width: 1024px) { .bb-community__inner { padding: 80px var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-community__inner { padding: 60px var(--bb-pad-mobile, 16px); } } .bb-community__content { max-width: 640px; color: #fff; } .bb-community__title { color: #fff; font-size: clamp(40px, 5.5vw, 64px); letter-spacing: -0.03em; margin: 16px 0 0; line-height: 1.0; font-weight: 700; } .bb-community__title-em { color: var(--bb-warm-sand); } .bb-community__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; max-width: 620px; } @media (max-width: 640px) { .bb-community__columns { grid-template-columns: 1fr; gap: 24px; } } .bb-community__columns p { color: rgba(250,248,245,0.85); font-size: 16px; line-height: 1.7; margin: 0; } /* Inline links op de donkere banner: wit met underline (niet terracotta). */ .bb-community__columns a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .bb-community__columns a:hover { color: #fff; opacity: 0.8; } .bb-community__actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; } .bb-community__btn--inverse { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--bb-forest); padding: 22px 44px; border-radius: 6px; font-weight: 600; font-size: 17px; letter-spacing: 0.03em; text-decoration: none; } .bb-community__btn--inverse:hover { background: var(--bb-warm-white); color: var(--bb-deep-black); } .bb-community__btn--tertiary { display: inline-flex; align-items: center; color: var(--bb-warm-sand); padding: 22px 0; font-weight: 600; font-size: 15px; text-decoration: none; } .bb-community__btn--tertiary:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } /* ----- Reviews (sectie #9) ----- */ .bb-reviews { background: var(--bb-sand); padding: 112px 0; } .bb-reviews__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .bb-reviews__inner { padding: 0 var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-reviews__inner { padding: 0 var(--bb-pad-mobile, 16px); } } .bb-reviews__head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; } .bb-reviews__title { margin: 14px 0 0; font-size: clamp(36px, 4.5vw, 52px); letter-spacing: -0.025em; line-height: 1.05; color: var(--bb-deep-black); font-weight: 700; } /* Rating-blok = compacte unit met "4,8/5" + ★★★★★ + count onder elkaar. Desktop: items center-aligned binnen blok (balanced rating-widget, blok zelf rechts in de head-row). Tablet/mobile (≤1024): blok stackt onder de title en items lijnen links uit, consistent met de title-flow. */ .bb-reviews__rating { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } @media (max-width: 1024px) { .bb-reviews__head { flex-direction: column; align-items: flex-start; gap: 24px; } .bb-reviews__rating { align-items: flex-start; text-align: left; } } .bb-reviews__rating-num { display: flex; align-items: baseline; gap: 4px; } .bb-reviews__rating-num strong { font-size: 44px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.025em; line-height: 1; } .bb-reviews__rating-num span { font-size: 18px; color: var(--bb-fg-muted); font-weight: 500; } .bb-reviews__stars { color: var(--bb-terracotta); font-size: 20px; letter-spacing: 2px; } .bb-reviews__count { font-size: 13px; color: var(--bb-fg-muted); letter-spacing: 0.02em; } .bb-reviews__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: stretch; } @media (max-width: 900px) { .bb-reviews__grid { grid-template-columns: 1fr; } } .bb-review-featured { background: var(--bb-warm-white); padding: 56px; border-radius: 4px; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; } .bb-review-featured__quote { font-size: 96px; line-height: 0.5; font-family: Georgia, serif; color: var(--bb-terracotta); } .bb-review-featured__text { font-size: 26px; line-height: 1.35; letter-spacing: -0.01em; color: var(--bb-deep-black); font-weight: 500; margin: 12px 0 0; } .bb-review-featured__foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--bb-border); display: flex; align-items: center; justify-content: space-between; } .bb-review-meta-name { font-size: 14px; font-weight: 600; color: var(--bb-fg-strong); } .bb-review-meta-tag { font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-reviews__support { display: grid; grid-template-rows: 1fr 1fr; gap: 32px; } .bb-review-small { background: var(--bb-warm-white); padding: 32px; border-radius: 4px; display: flex; flex-direction: column; justify-content: space-between; } .bb-review-small__text { font-size: 17px; line-height: 1.5; color: var(--bb-deep-black); margin: 0; } .bb-review-small__foot { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } .bb-reviews__cta { margin-top: 48px; display: flex; justify-content: center; } .bb-btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--bb-fg); border: 1.5px solid var(--bb-fg); padding: 15px 28px; border-radius: 6px; font-weight: 500; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; transition: all 150ms ease; } .bb-btn-secondary:hover { background: var(--bb-sand); color: var(--bb-fg); text-decoration: none; } .bb-btn, .bb-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bb-forest); color: #fff; border: 0; padding: 15px 28px; border-radius: 6px; font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background 150ms ease, transform 100ms ease; } .bb-btn:hover, .bb-btn-primary:hover { background: var(--bb-charcoal); color: #fff; text-decoration: none; } .bb-btn:active, .bb-btn-primary:active { transform: translateY(1px); } .bb-btn[disabled], .bb-btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; } .bb-btn svg, .bb-btn-primary svg { flex-shrink: 0; } /* ----- Email capture (sectie #10) ----- */ .bb-email-capture { background: var(--bb-deep-black); } .bb-email-capture__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } @media (max-width: 900px) { .bb-email-capture__grid { grid-template-columns: 1fr; } } .bb-email-capture__image { background: var(--bb-sand) center / cover no-repeat; background-position: right; min-height: 520px; } .bb-email-capture__form-wrap { display: flex; align-items: center; padding: 80px; } @media (max-width: 1024px) { .bb-email-capture__form-wrap { padding: 60px 40px; } } @media (max-width: 640px) { .bb-email-capture__form-wrap { padding: 48px 16px; } } .bb-email-capture__inner { max-width: 460px; color: #fff; } .bb-email-capture__title { color: #fff; font-size: clamp(36px, 4vw, 48px); letter-spacing: -0.025em; line-height: 1.0; margin: 14px 0 20px; font-weight: 700; } .bb-email-capture__body { color: rgba(250,248,245,0.78); font-size: 16px; line-height: 1.65; margin: 0 0 28px; max-width: 380px; } .bb-email-capture__form { display: flex; flex-direction: column; gap: 12px; } .bb-email-capture__input { border: none; background: rgba(250,248,245,0.08); color: #fff; padding: 16px 18px; font-size: 15px; border-radius: 4px; width: 100%; box-sizing: border-box; } .bb-email-capture__input::placeholder { color: rgba(250,248,245,0.5); } .bb-email-capture__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bb-forest); color: #fff; padding: 22px 44px; border: none; border-radius: 6px; font-family: inherit; font-weight: 600; font-size: 17px; letter-spacing: 0.03em; cursor: pointer; transition: background 150ms ease; } .bb-email-capture__btn:hover { background: var(--bb-deep-black); } .bb-email-capture__note { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(250,248,245,0.15); } .bb-email-capture__note-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(212,184,150,0.18); color: var(--bb-warm-sand); flex-shrink: 0; } .bb-email-capture__note p { margin: 0; font-size: 12px; color: rgba(250,248,245,0.6); line-height: 1.5; } /* Honeypot: visueel én voor screenreaders weg (aria-hidden), wel submitbaar voor bots. */ .bb-email-capture__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .bb-email-capture__status { margin: 4px 0 0; font-size: 14px; line-height: 1.5; } .bb-email-capture__status.is-success { color: var(--bb-warm-sand); } .bb-email-capture__status.is-error { color: #e8a08f; } .bb-email-capture__btn:disabled { opacity: 0.7; cursor: default; } .bb-email-capture__btn:disabled:hover { background: var(--bb-forest); } /* ----- FAQ (sectie #11) ----- */ .bb-faq { background: var(--bb-warm-white); padding: 112px 0; } .bb-faq__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; } @media (max-width: 1024px) { .bb-faq__inner { padding: 0 var(--bb-pad-tablet, 40px); gap: 56px; } } @media (max-width: 768px) { .bb-faq__inner { grid-template-columns: 1fr; gap: 32px; padding: 0 var(--bb-pad-mobile, 16px); } } .bb-faq__title { margin-top: 14px; font-size: clamp(36px, 4.5vw, 52px); letter-spacing: -0.025em; line-height: 1.05; color: var(--bb-deep-black); font-weight: 700; } .bb-faq__list { display: flex; flex-direction: column; } .bb-faq__item { border-top: 1px solid var(--bb-charcoal); } .bb-faq__item:last-child { border-bottom: 1px solid var(--bb-charcoal); } .bb-faq__item > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; cursor: pointer; font-size: 19px; font-weight: 600; color: var(--bb-deep-black); letter-spacing: -0.01em; } .bb-faq__item > summary::-webkit-details-marker { display: none; } .bb-faq__item-icon { color: var(--bb-fg); display: inline-flex; transition: transform 200ms ease, color 200ms ease; } .bb-faq__item[open] > summary .bb-faq__item-icon { transform: rotate(45deg); color: var(--bb-terracotta); } .bb-faq__item-answer { margin: 0; padding: 0 0 28px; font-size: 16px; color: var(--bb-charcoal); line-height: 1.7; max-width: 600px; } /* ----- Instagram feed (sectie #12) ----- */ .bb-insta { background: var(--bb-snow); padding: 112px 0; } .bb-insta__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .bb-insta__inner { padding: 0 var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-insta__inner { padding: 0 var(--bb-pad-mobile, 16px); } } .bb-insta__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; } .bb-insta__handle { margin: 14px 0 8px; font-size: clamp(36px, 4.5vw, 52px); letter-spacing: -0.025em; line-height: 1.05; color: var(--bb-deep-black); font-weight: 700; } .bb-insta__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); max-width: 440px; } .bb-insta__rating { display: flex; align-items: center; gap: 20px; } .bb-insta__followers-num { font-size: 24px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.02em; line-height: 1; } .bb-insta__followers-label { font-size: 12px; color: var(--bb-fg-muted); letter-spacing: 0.04em; margin-top: 4px; } .bb-insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } @media (max-width: 900px) { .bb-insta__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .bb-insta__grid { grid-template-columns: repeat(2, 1fr); } } .bb-insta__tile { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 2px; background: var(--bb-sand); display: block; text-decoration: none; color: inherit; } .bb-insta__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .bb-insta__tile:hover { text-decoration: none; } .bb-insta__tile:hover img { transform: scale(1.05); } .bb-insta__tile-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 40%, rgba(26,26,26,0.78) 100%); opacity: 0; transition: opacity 220ms ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; } .bb-insta__tile:hover .bb-insta__tile-overlay { opacity: 1; } .bb-insta__tile-overlay p { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.95); } .bb-insta__tile-stats { display: flex; gap: 16px; font-size: 13px; font-weight: 600; } .bb-insta__tile-stats span { display: inline-flex; align-items: center; gap: 6px; } .bb-insta__footer { margin-top: 40px; text-align: center; } .bb-insta__footer a { color: var(--bb-terracotta); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 8px; } /* ----- Footer ----- Footer is `align: full` + `useRootPaddingAwareAlignments`, dus WP voegt `.has-global-padding { padding-inline: var(--wp--style--root--padding-*) }` toe (specificity 0,1,0). Onze brand-token-padding moet daar overheen. Gebruik `footer.bb-footer` (specificity 0,1,1) zodat we zonder `!important` winnen op cascade. */ footer.bb-footer { padding-left: var(--bb-pad-desktop, 80px); padding-right: var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { footer.bb-footer { padding-left: var(--bb-pad-tablet, 40px); padding-right: var(--bb-pad-tablet, 40px); padding-top: 56px; } } @media (max-width: 640px) { footer.bb-footer { padding-left: var(--bb-pad-mobile, 16px); padding-right: var(--bb-pad-mobile, 16px); padding-top: 48px; } } .bb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(212, 206, 198, 0.18); } @media (max-width: 1024px) { .bb-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 600px) { .bb-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .bb-footer__col--brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 360px) { .bb-footer__grid { grid-template-columns: 1fr; } } .bb-footer__col--brand { max-width: 320px; } .bb-footer__logo { display: inline-block; margin-bottom: 16px; } .bb-footer__logo img { height: 40px; display: block; } .bb-footer__tagline { font-size: 14px; color: var(--bb-stone); line-height: 1.6; margin: 0 0 18px; max-width: 260px; } .bb-footer__socials { display: flex; gap: 12px; } .bb-footer__socials a { color: var(--bb-stone); display: inline-flex; transition: color 150ms ease; } .bb-footer__socials a:hover { color: var(--bb-warm-white); } .bb-footer__heading { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--bb-warm-white); margin: 0 0 18px; text-transform: none; } .bb-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .bb-footer__links a { font-size: 14px; color: var(--bb-stone); text-decoration: none; transition: color 150ms ease; } .bb-footer__links a:hover { color: var(--bb-warm-white); text-decoration: none; } .bb-footer__divider { border: none; height: 0; margin: 0; /* divider rendered via border-bottom on __grid above */ } .bb-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; flex-wrap: wrap; } .bb-footer__copy { font-size: 12px; color: var(--bb-stone); } .bb-footer__payments { display: flex; gap: 8px; flex-wrap: wrap; } .bb-footer__payments span { padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(212, 206, 198, 0.25); font-size: 11px; color: var(--bb-stone); } /* ----- Trust strip ----- */ .bb-trust-strip { background: var(--bb-warm-white); border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); padding: 36px 0; } .bb-trust-strip__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop); } @media (max-width: 1024px) { .bb-trust-strip__row { padding: 0 var(--bb-pad-tablet); } } @media (max-width: 640px) { .bb-trust-strip__row { padding: 0 var(--bb-pad-mobile); } } .bb-trust-strip__item { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--bb-charcoal); } .bb-trust-strip__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bb-trust-strip__icon svg, .bb-trust-strip__item > svg { color: var(--bb-forest); width: 22px; height: 22px; flex-shrink: 0; } .bb-trust-strip__text-wrap { display: flex; flex-direction: column; gap: 2px; } /* 3- vs 4-column grid (overrides the default auto-fit) */ .bb-trust-strip.is-3 .bb-trust-strip__row { grid-template-columns: repeat(3, 1fr); } .bb-trust-strip.is-4 .bb-trust-strip__row { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .bb-trust-strip.is-3 .bb-trust-strip__row, .bb-trust-strip.is-4 .bb-trust-strip__row { grid-template-columns: 1fr; } } /* Dark variant — PDP USP strip */ .bb-trust-strip.is-dark { background: var(--bb-deep-black); border-top: 0; border-bottom: 0; color: #fff; } .bb-trust-strip.is-dark .bb-trust-strip__icon { width: 36px; height: 36px; border-radius: 999px; background: rgba(204, 102, 51, 0.15); } .bb-trust-strip.is-dark .bb-trust-strip__icon svg { color: var(--bb-terracotta); width: 18px; height: 18px; } .bb-trust-strip.is-dark .bb-trust-strip__text { font-weight: 600; color: #fff; } .bb-trust-strip.is-dark .bb-trust-strip__sub { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 400; } /* ----- Steps section wrapper (sectie #7) ----- */ .bb-steps-section { background: var(--bb-warm-white); padding: 112px 0; border-top: 1px solid var(--bb-border); } .bb-steps-section__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .bb-steps-section__inner { padding: 0 var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-steps-section__inner { padding: 0 var(--bb-pad-mobile, 16px); } } /* ----- Steps (inner grid) ----- */ .bb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; padding-top: 8px; } @media (max-width: 900px) { .bb-steps { grid-template-columns: 1fr; gap: 32px; } } .bb-step__image { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; margin-bottom: 24px; } .bb-step__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .bb-step__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; } .bb-step__number { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--bb-deep-black); } .bb-step__when { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-terracotta); } .bb-step__title { margin: 0 0 10px; padding-top: 22px; border-top: 1px solid var(--bb-stone); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--bb-deep-black); } .bb-step__body { margin: 0; font-size: 15px; color: var(--bb-charcoal); line-height: 1.65; } /* ----- Comparison table ----- */ .bb-comparison { background: var(--bb-snow); border-radius: 6px; box-shadow: var(--bb-shadow-sm); overflow: hidden; max-width: 1120px; margin-left: auto; margin-right: auto; } .bb-comparison__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.25fr; } .bb-comparison__th { padding: 24px 16px 18px; text-align: center; } .bb-comparison__th--feature { padding: 24px 20px 18px; text-align: left; font-size: 12px; font-weight: 600; color: var(--bb-fg-muted); letter-spacing: 0.08em; text-transform: uppercase; } .bb-comparison__th-budget-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-fg-muted); } .bb-comparison__th-label { font-size: 24px; font-weight: 600; color: var(--bb-fg-muted); margin-top: 6px; } .bb-comparison__th-sub { font-size: 14px; color: var(--bb-fg-muted); margin-top: 6px; } .bb-comparison__th--us { padding: 24px 24px 22px; background: var(--bb-sage-tint); border-top: 3px solid var(--bb-sage); text-align: center; } .bb-comparison__th-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-forest); } .bb-comparison__th-us-name { font-size: 24px; font-weight: 700; color: var(--bb-deep-black); margin-top: 6px; letter-spacing: -0.02em; line-height: 1; } .bb-comparison__th-us-price { font-size: 14px; color: var(--bb-charcoal); margin-top: 6px; } .bb-comparison__th-us-save { font-size: 11px; color: var(--bb-forest); margin-top: 2px; letter-spacing: 0.02em; } .bb-comparison__feat { padding: 22px 20px; border-top: 1px solid var(--bb-stone); font-size: 15px; font-weight: 600; color: var(--bb-fg-strong); display: flex; align-items: center; } .bb-comparison__cell { padding: 22px 16px; text-align: center; font-size: 15px; color: var(--bb-fg-muted); border-top: 1px solid var(--bb-stone); display: flex; align-items: center; justify-content: center; gap: 8px; } .bb-comparison__cell--us { background: var(--bb-sage-tint); border-top: 1px solid rgba(139, 158, 124, 0.30); font-weight: 700; color: var(--bb-deep-black); } .bb-comparison__cell--us svg { color: var(--bb-forest); } .bb-comparison__cell--em { color: var(--bb-stone); } .bb-comparison__cell svg.check-pro { color: var(--bb-success); } .bb-comparison__cell--yes svg { color: var(--bb-forest); } .bb-comparison__cell--no svg { color: var(--bb-stone); opacity: 0.7; } /* ----- Comparison table — responsive ----- MOET na de basis-rules staan: gelijke specificity, dus bron-volgorde beslist. Eerder stond dit blok ervóór en werd het stilletjes overschreven. Side-padding van de inline wrapper schalen we door de var te overriden. */ @media (max-width: 1024px) { .bb-comparison-wrap { --bb-pad-desktop: var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-comparison-wrap { --bb-pad-desktop: var(--bb-pad-mobile, 16px); } } /* Mobile: 3 echte kolommen behouden (kenmerk | goedkope variant | Barebase), alleen fonts + padding terugschalen zodat alles past zonder scroll. Kenmerk-kolom krijgt het leeuwendeel; de waarde-kolommen tonen enkel een icon. */ @media (max-width: 720px) { .bb-comparison__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } .bb-comparison__th--feature { padding: 14px 10px 10px; font-size: 9px; letter-spacing: 0.06em; } .bb-comparison__th, .bb-comparison__th--us { padding: 14px 6px 12px; } .bb-comparison__th-label, .bb-comparison__th-us-name { font-size: 14px; line-height: 1.15; } .bb-comparison__th-budget-kicker, .bb-comparison__th-kicker { font-size: 8px; letter-spacing: 0.05em; } .bb-comparison__th-sub, .bb-comparison__th-us-price { font-size: 11px; margin-top: 3px; } .bb-comparison__feat { padding: 14px 10px; font-size: 12px; line-height: 1.3; } .bb-comparison__cell { padding: 14px 4px; min-width: 0; } } @media (max-width: 380px) { .bb-comparison__th-label, .bb-comparison__th-us-name { font-size: 13px; } .bb-comparison__feat { font-size: 11px; } } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----- Hero ----- */ .bb-hero { position: relative; background: var(--bb-deep-black); overflow: hidden; color: var(--bb-snow); min-height: 640px; } .bb-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: 0; } .bb-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(26, 26, 26, 0.72) 0%, rgba(26, 26, 26, 0.40) 55%, rgba(26, 26, 26, 0.18) 100%); pointer-events: none; } .bb-hero__container { position: relative; z-index: 2; max-width: var(--bb-content-max); margin: 0 auto; box-sizing: border-box; padding-left: var(--bb-pad-desktop, 80px); padding-right: var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .bb-hero__container { padding-left: var(--bb-pad-tablet, 40px); padding-right: var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-hero__container { padding-left: var(--bb-pad-mobile, 16px); padding-right: var(--bb-pad-mobile, 16px); } } .bb-hero__inner { padding: 160px 0 96px; max-width: 720px; } .bb-hero__eyebrow { color: var(--bb-warm-sand); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .bb-hero__title { margin: 20px 0 0; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.035em; color: #fff; font-weight: 700; } .bb-hero__lead { margin: 28px 0 0; font-size: 19px; color: rgba(250, 248, 245, 0.88); line-height: 1.55; max-width: 520px; } /* Rendert alleen met echte reviews — zie barebase_primary_review_info(). */ .bb-hero__rating { margin-top: 20px; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: rgba(250, 248, 245, 0.85); } .bb-hero__rating-stars { color: var(--bb-terracotta); letter-spacing: 2px; } .bb-hero__rating-link { color: inherit; text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 150ms ease; } .bb-hero__rating-link:hover { color: #fff; text-decoration: underline; } .bb-hero__price-row { margin-top: 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .bb-hero__rating + .bb-hero__price-row { margin-top: 12px; } .bb-hero__price { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .bb-hero__price-aside { font-size: 13px; color: rgba(250, 248, 245, 0.65); } .bb-hero__actions { margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .bb-hero__btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 17px; letter-spacing: 0.03em; line-height: 1; padding: 22px 44px; border-radius: 6px; text-decoration: none; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms; cursor: pointer; border: 1.5px solid transparent; } .bb-hero__btn--primary { background: var(--bb-forest); color: #fff; } .bb-hero__btn--primary:hover { background: var(--bb-deep-black); color: #fff; text-decoration: none; } .bb-hero__btn--tertiary { background: transparent; color: var(--bb-warm-sand); padding: 22px 0; font-size: 15px; font-weight: 600; } .bb-hero__btn--tertiary:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .bb-hero__footnote { margin-top: 24px; font-size: 12px; color: rgba(250, 248, 245, 0.6); letter-spacing: 0.04em; } @media (max-width: 720px) { .bb-hero__inner { padding: 120px 0 64px; } } /* ----- Inline icon helper ----- */ .bb-inline-svg { display: inline-flex; align-items: center; vertical-align: middle; } /* ============================================================ * PDP — product page * ============================================================ */ /* Breadcrumb */ .bb-pdp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bb-fg-muted); padding-top: 24px; } .bb-pdp-breadcrumb a { color: var(--bb-fg-muted); text-decoration: none; } .bb-pdp-breadcrumb a:hover { color: var(--bb-fg); } .bb-pdp-breadcrumb__sep { color: var(--bb-stone); } .bb-pdp-breadcrumb__current { color: var(--bb-fg); font-weight: 500; } /* Editorial gallery */ .bb-pdp-gallery { display: flex; flex-direction: column; gap: 10px; } .bb-pdp-gallery__top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bb-pdp-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bb-pdp-gallery__tile { position: relative; aspect-ratio: 1 / 1; background: var(--bb-sand); border-radius: 6px; overflow: hidden; border: 0; cursor: zoom-in; padding: 0; } .bb-pdp-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Lightbox */ .bb-pdp-lightbox { position: fixed; inset: 0; z-index: 110; background: rgba(26, 26, 26, 0.92); display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; } .bb-pdp-lightbox[hidden] { display: none !important; } .bb-pdp-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; } .bb-pdp-lightbox__close { position: absolute; top: 24px; right: 28px; background: rgba(255, 255, 255, 0.12); border: 0; cursor: pointer; color: #fff; width: 40px; height: 40px; border-radius: 999px; font-size: 22px; line-height: 1; } /* Buy box */ .bb-pdp-buybox { font-family: inherit; } .bb-pdp-buybox__stars { margin-bottom: 14px; color: var(--bb-terracotta); font-size: 14px; } .bb-pdp-buybox__rating-meta { color: var(--bb-fg-muted); margin-left: 6px; font-size: 13px; } .bb-pdp-buybox__rating-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 150ms ease; } .bb-pdp-buybox__rating-link:hover { color: var(--bb-terracotta); } .bb-pdp-buybox__member-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 150ms ease; } .bb-pdp-buybox__member-link:hover { color: var(--bb-terracotta); } .bb-pdp-buybox__title { margin: 0 0 8px; font-size: 44px; letter-spacing: -0.02em; line-height: 1.05; } .bb-pdp-buybox__tagline { margin: 0; color: var(--bb-fg-muted); font-size: 16px; } .bb-pdp-buybox__price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; } .bb-pdp-buybox__price { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; } .bb-pdp-buybox__price-old { font-size: 18px; font-weight: 500; color: var(--bb-fg-muted); text-decoration: line-through; margin-right: 4px; } .bb-pdp-buybox__price-old[hidden] { display: none; } /* Sticky-bar variant: kleinere strike. */ .bb-pdp-sticky-atc__price-old { color: var(--bb-fg-muted); text-decoration: line-through; margin-right: 2px; } .bb-pdp-sticky-atc__price-old[hidden] { display: none; } /* Homepage mini-buybox launch-prijs. */ .bb-product-highlight__price-old { font-size: 22px; font-weight: 500; color: var(--bb-fg-muted); text-decoration: line-through; margin-right: 6px; } .bb-product-highlight__price-old[hidden] { display: none; } /* Hero launch-prijs (op donkere hero-bg). */ .bb-hero__price-old { font-size: 22px; font-weight: 500; opacity: 0.65; text-decoration: line-through; margin-right: 6px; } .bb-pdp-buybox__price-meta { font-size: 13px; color: var(--bb-fg-muted); } .bb-pdp-buybox__size-block { margin-top: 28px; } .bb-pdp-buybox__size-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; } .bb-pdp-buybox__size-head a { color: var(--bb-link, var(--bb-forest)); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .bb-pdp-buybox__sizes { display: flex; gap: 10px; margin-top: 10px; } .bb-pdp-buybox__size { padding: 14px 28px; border-radius: 6px; border: 1.5px solid var(--bb-border); background: var(--bb-snow); color: var(--bb-fg); font-weight: 500; font-family: inherit; font-size: 14px; cursor: pointer; transition: 150ms; } .bb-pdp-buybox__size.is-active { border-color: var(--bb-sage); background: var(--bb-sand); color: var(--bb-forest); } .bb-pdp-buybox__size[data-out-of-stock] { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; } .bb-pdp-buybox__cta { margin-top: 24px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } .bb-pdp-buybox__cta[disabled] { opacity: 0.5; cursor: not-allowed; } /* DE content-only: "Binnenkort verkrijgbaar" i.p.v. add-to-cart. Rustige, informatieve stijl (geen actie-knop, geen kapotte disabled-look). */ .bb-pdp-buybox__cta--soon { background: var(--bb-sand); color: var(--bb-fg); border: 1px solid var(--bb-border); font-weight: 600; } .bb-pdp-buybox__cta--soon[disabled] { opacity: 1; cursor: default; } /* Sticky mini-CTA: verschijnt onder PDP wanneer de hoofd-ATC niet meer zichtbaar is. Slide-up uit de viewport-bodem; verbergt bij footer-overlap. */ .bb-pdp-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-top: 1px solid var(--bb-border); box-shadow: 0 -4px 16px rgba(15, 23, 13, 0.06); transform: translateY(110%); /* visibility met delay: voorkomt dat de verborgen balk toetsenbord- focusbaar blijft (aria-hidden-focus), zonder de slide-animatie te breken */ visibility: hidden; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 240ms; z-index: 50; pointer-events: none; } .bb-pdp-sticky-atc.is-visible { transform: translateY(0); pointer-events: auto; visibility: visible; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } .bb-pdp-sticky-atc__inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; } .bb-pdp-sticky-atc__thumb { width: 48px; height: 48px; border-radius: var(--bb-radius-card); object-fit: cover; background: var(--bb-sand); flex-shrink: 0; } .bb-pdp-sticky-atc__stars { color: var(--bb-terracotta); font-size: 11px; font-weight: 500; white-space: nowrap; } .bb-pdp-sticky-atc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bb-pdp-sticky-atc__name { font-size: 14px; font-weight: 600; color: var(--bb-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bb-pdp-sticky-atc__meta { font-size: 12px; color: var(--bb-fg-muted); } .bb-pdp-sticky-atc__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--bb-terracotta); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 200ms; } .bb-pdp-sticky-atc__btn:hover { background: var(--bb-deep-black); } .bb-pdp-sticky-atc__btn[disabled] { opacity: 0.5; cursor: not-allowed; } .bb-pdp-sticky-atc__btn-icon { display: inline-flex; } @media (max-width: 640px) { .bb-pdp-sticky-atc__inner { padding-left: 16px; padding-right: 16px; gap: 12px; } .bb-pdp-sticky-atc__btn { padding: 10px 18px; font-size: 13px; } .bb-pdp-sticky-atc__name { font-size: 13px; } .bb-pdp-sticky-atc__meta { font-size: 11px; } } .bb-pdp-buybox__stock { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--bb-fg-strong); } .bb-pdp-buybox__stock-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bb-forest); position: relative; flex-shrink: 0; } .bb-pdp-buybox__stock-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--bb-forest); opacity: 0.35; animation: bb-stock-pulse 1.8s ease-out infinite; } @keyframes bb-stock-pulse { 0% { transform: scale(1); opacity: 0.5; } 80% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } /* Betaal-/keurmerkregel onder de add-to-cart: drempelvrees wegnemen op het beslismoment. Zelfde chips-idioom als .bb-cart-summary__chips. */ .bb-pdp-buybox__payments { margin-top: 16px; } .bb-pdp-buybox__payments-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--bb-fg-muted, #6b675f); } .bb-pdp-buybox__payments-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; } .bb-pdp-buybox__payments-chips li { display: flex; } .bb-pdp-buybox__payments-chips img { display: block; height: 30px; width: auto; border-radius: 5px; } .bb-pdp-buybox__accordion { margin-top: 32px; } .bb-pdp-buybox__details { border-bottom: 1px solid var(--bb-border); } .bb-pdp-buybox__details:first-child { border-top: 1px solid var(--bb-border); } .bb-pdp-buybox__details > summary { padding: 20px 0; font-size: 16px; font-weight: 600; color: var(--bb-deep-black); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .bb-pdp-buybox__details > summary::after { content: '+'; color: var(--bb-fg); font-size: 22px; transition: transform 200ms; line-height: 1; } .bb-pdp-buybox__details[open] > summary::after { transform: rotate(45deg); color: var(--bb-terracotta); } .bb-pdp-buybox__details > summary::-webkit-details-marker { display: none; } .bb-pdp-buybox__details-body { padding-bottom: 24px; font-size: 15px; line-height: 1.7; color: var(--bb-charcoal); } .bb-pdp-buybox__details-body ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; } .bb-pdp-buybox__details-body ul li { padding-left: 28px; position: relative; } .bb-pdp-buybox__details-body ul li::before { content: '✓'; color: var(--bb-forest); position: absolute; left: 0; top: 0; font-weight: 600; } /* ============================================================ .bb-container — single source of truth voor PDP / header / nieuwe pagina-content. Inherent gerelateerde wrappers gebruiken layout: default (geen WP is-layout-constrained); deze utility bepaalt max-width + horizontale padding, niets vecht ertegen. Bestaande homepage-secties (reviews/faq/instagram) gebruiken hun eigen `__inner` met brand-token-breedtes — bewust niet gemigreerd in deze refactor om bestaande content niet te raken. ============================================================ */ .bb-container { max-width: var(--bb-content-max); margin-inline: auto; box-sizing: border-box; width: 100%; padding-inline: var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .bb-container { padding-inline: var(--bb-pad-tablet, 40px); } } @media (max-width: 640px) { .bb-container { padding-inline: var(--bb-pad-mobile, 16px); } } /* Legacy homepage / hoe-het-werkt section wrappers — historisch zonder box-sizing: border-box, waardoor max-width 1560 + padding 80 = 1720 visueel. Bij wide viewports (>1560) zijn ze daardoor breder dan .bb-container (en dus breder dan de fixed nav). Deze rule trekt ze recht zodat alle layout-wrappers op exact dezelfde max-width capen. */ .bb-benefit-strip__row, .bb-onze-belofte__inner, .bb-materiaal__inner, .bb-product-highlight__inner, .bb-community__inner, .bb-reviews__inner, .bb-faq__inner, .bb-insta__inner, .bb-trust-strip__row, .bb-steps-section__inner { box-sizing: border-box; } /* PDP hero — 2-col grid wrapping gallery + buy-box. Width-handling wordt door .bb-container gedaan (zelfde element, klassen gecombineerd). De wrapper-group gebruikt layout:default in de template, dus geen WP layout-constrained CSS waar tegen te vechten. minmax(0, ...) op de columns voorkomt dat een kolom inflateert wanneer z'n min-content groot is (de lange bullets in de description accordion). Zonder dit zou openen van de accordion de buy-box-kolom verbreden en de gallery indrukken. */ .bb-pdp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: flex-start; padding-block: 32px 56px; } @media (max-width: 1240px) { .bb-pdp-hero { gap: 40px; } } @media (max-width: 768px) { /* Mobile flow: rating + title boven gallery, gallery, dan rest van buy-box. `display: contents` lift de buybox children naar het grid-niveau zodat ze met grid-template-areas in een eigen volgorde geplaatst kunnen worden. */ .bb-pdp-hero { grid-template-columns: 1fr; grid-template-areas: "head" "gallery" "body"; gap: 24px; } .bb-pdp-gallery { grid-area: gallery; } .bb-pdp-buybox { display: contents; } .bb-pdp-buybox__head { grid-area: head; } .bb-pdp-buybox__body { grid-area: body; } .bb-pdp-buybox__title { font-size: 32px; } .bb-pdp-buybox__price { font-size: 28px; } } .bb-pdp-back-link { padding: 0 0 24px; font-size: 13px; } .bb-pdp-back-link a { color: var(--bb-forest); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ * Cart drawer — geport uit ui_kits/website/Cart.jsx * ============================================================ */ .bb-cart-drawer { position: fixed; inset: 0; z-index: 100; } .bb-cart-drawer[hidden] { display: none !important; } /* Backdrop */ .bb-cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.36); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: bb-cart-fade-in 240ms ease; } @keyframes bb-cart-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Panel */ .bb-cart-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 460px; background: var(--bb-warm-white); box-shadow: -10px 0 40px rgba(26, 26, 26, 0.16); display: flex; flex-direction: column; animation: bb-cart-slide-in 320ms cubic-bezier(0.32, 0.72, 0, 1); } @keyframes bb-cart-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Header */ .bb-cart-drawer__header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--bb-border); } .bb-cart-drawer__title-group { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .bb-cart-drawer__title { margin: 0; font-size: 24px; letter-spacing: -0.02em; color: var(--bb-deep-black); } .bb-cart-drawer__count-label { font-size: 13px; color: var(--bb-fg-muted); } .bb-cart-drawer__close { background: transparent; border: 0; cursor: pointer; color: var(--bb-fg-strong); padding: 8px; margin-right: -8px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(45deg); transition: color 150ms; } .bb-cart-drawer__close:hover { color: var(--bb-terracotta); } /* Body — scrollable area between header and footer */ .bb-cart-drawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* Empty state */ .bb-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; text-align: center; gap: 18px; } .bb-cart-drawer__empty-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--bb-sand); color: var(--bb-warm-grey); display: inline-flex; align-items: center; justify-content: center; } .bb-cart-drawer__empty-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--bb-deep-black); } .bb-cart-drawer__empty-body { margin: 0; font-size: 14px; color: var(--bb-charcoal); max-width: 280px; line-height: 1.55; } .bb-cart-drawer__empty-cta { margin-top: 6px; } /* Free shipping bar — voor nu verborgen (we hanteren altijd gratis verzending). Verwijder deze `display: none` als drempel-based shipping weer terugkomt. */ .bb-cart-drawer__shipping { display: none; flex-shrink: 0; padding: 18px 28px; background: var(--bb-snow); border-bottom: 1px solid var(--bb-border); } .bb-cart-drawer__shipping-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bb-charcoal); margin-bottom: 10px; } .bb-cart-drawer__shipping-row strong { color: var(--bb-deep-black); font-weight: 700; } .bb-cart-drawer__shipping-icon { display: inline-flex; color: var(--bb-fg); flex-shrink: 0; } .bb-cart-drawer__shipping-free { color: var(--bb-forest); font-weight: 600; } .bb-cart-drawer__progress { width: 100%; height: 4px; background: var(--bb-stone); border-radius: 999px; overflow: hidden; } .bb-cart-drawer__progress > span { display: block; height: 100%; background: var(--bb-sage); transition: width 280ms ease; } .bb-cart-drawer__progress.is-complete > span { background: var(--bb-forest); } /* Line items */ .bb-cart-drawer__items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px; -webkit-overflow-scrolling: touch; } .bb-cart-drawer__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--bb-border); } .bb-cart-drawer__item:last-child { border-bottom: none; } .bb-cart-drawer__thumb-wrap { width: 76px; height: 76px; border-radius: 4px; overflow: hidden; background: var(--bb-sand); flex-shrink: 0; } .bb-cart-drawer__thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-cart-drawer__thumb--placeholder { width: 100%; height: 100%; background: var(--bb-sand); } .bb-cart-drawer__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .bb-cart-drawer__meta-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .bb-cart-drawer__title-line { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--bb-deep-black); line-height: 1.3; } .bb-cart-drawer__title-line a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .bb-cart-drawer__title-line a:hover { color: var(--bb-terracotta); } .bb-cart-drawer__variant { font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-cart-drawer__remove { background: transparent; border: 0; cursor: pointer; color: var(--bb-fg-muted); padding: 4px; margin-right: -4px; display: inline-flex; transform: rotate(45deg); transition: color 150ms; } .bb-cart-drawer__remove:hover { color: var(--bb-terracotta); } .bb-cart-drawer__meta-bottom { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bb-cart-drawer__stepper { display: inline-flex; align-items: center; border: 1px solid var(--bb-border); border-radius: 4px; background: var(--bb-warm-white); } .bb-cart-drawer__stepper button { width: 32px; height: 32px; background: transparent; border: 0; cursor: pointer; color: var(--bb-fg-strong); display: inline-flex; align-items: center; justify-content: center; transition: color 150ms; } .bb-cart-drawer__stepper button:hover:not([disabled]) { color: var(--bb-forest); } .bb-cart-drawer__stepper button[disabled] { cursor: not-allowed; color: var(--bb-stone); } .bb-cart-drawer__stepper-value { min-width: 28px; text-align: center; font-size: 14px; font-weight: 600; color: var(--bb-fg-strong); } .bb-cart-drawer__price { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--bb-deep-black); white-space: nowrap; } .bb-cart-drawer__price-was { margin-right: 6px; font-size: 13px; font-weight: 400; color: var(--bb-fg-muted); } /* Footer (totals + CTA) */ .bb-cart-drawer__footer { flex-shrink: 0; padding: 20px 28px 28px; border-top: 1px solid var(--bb-border); background: var(--bb-warm-white); display: flex; flex-direction: column; gap: 14px; } .bb-cart-drawer__totals { display: flex; flex-direction: column; gap: 8px; } .bb-cart-drawer__totals-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--bb-fg-muted); } .bb-cart-drawer__totals-val { color: var(--bb-fg-strong); } .bb-cart-drawer__totals-val--free { color: var(--bb-forest); font-weight: 600; } .bb-cart-drawer__coupon-code { font-family: inherit; background: var(--bb-sand); border-radius: 4px; padding: 1px 6px; font-size: 12px; } .bb-cart-drawer__totals-row--grand { padding-top: 12px; border-top: 1px solid var(--bb-border); } .bb-cart-drawer__totals-row--grand > span:first-child { font-size: 15px; font-weight: 600; color: var(--bb-deep-black); } .bb-cart-drawer__totals-grand { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--bb-deep-black); } .bb-cart-drawer__totals-note { margin: 0; font-size: 11px; color: var(--bb-fg-muted); text-align: right; } .bb-cart-drawer__rating { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--bb-fg-muted); } .bb-cart-drawer__rating strong { color: var(--bb-deep-black); } .bb-cart-drawer__stars { color: var(--bb-terracotta); font-size: 13px; letter-spacing: 2px; } .bb-cart-drawer__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .bb-cart-drawer__chips li { display: flex; } .bb-cart-drawer__chips img { display: block; height: 30px; width: auto; border-radius: 5px; } .bb-cart-drawer__checkout { width: 100%; padding: 13px 22px; font-size: 14px; box-sizing: border-box; } .bb-cart-drawer__continue { background: transparent; border: 0; cursor: pointer; color: var(--bb-link); font-family: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; padding: 0; align-self: center; transition: color 150ms; } .bb-cart-drawer__continue:hover { color: var(--bb-link-hover); } /* Maat-switcher op een cart-regel + upsell-pills */ .bb-cart-drawer__sizes, .bb-cart-drawer__upsell-sizes { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .bb-cart-drawer__sizes-label { font-size: 12px; color: var(--bb-fg-muted); margin-right: 2px; } .bb-cart-drawer__size-pill { min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid var(--bb-border); border-radius: 4px; background: var(--bb-warm-white); color: var(--bb-fg-strong); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color 150ms, color 150ms, background 150ms; } .bb-cart-drawer__size-pill:hover:not(.is-active):not(.is-disabled) { border-color: var(--bb-forest); color: var(--bb-forest); } .bb-cart-drawer__size-pill.is-active { background: var(--bb-deep-black); border-color: var(--bb-deep-black); color: var(--bb-warm-white); cursor: default; } .bb-cart-drawer__size-pill.is-disabled { color: var(--bb-stone); cursor: not-allowed; text-decoration: line-through; opacity: 0.6; } /* 2e-paar upsell-block */ .bb-cart-drawer__upsell { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 14px; margin: 4px 0 20px; padding: 16px; background: var(--bb-sand); border-radius: 8px; } .bb-cart-drawer__upsell-media { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--bb-warm-white); flex-shrink: 0; } .bb-cart-drawer__upsell-media img, .bb-cart-drawer__upsell-media--placeholder { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-cart-drawer__upsell-body { min-width: 0; } .bb-cart-drawer__upsell-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--bb-deep-black); letter-spacing: -0.01em; } .bb-cart-drawer__upsell-sub { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--bb-fg-muted); } .bb-cart-drawer__upsell-price { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--bb-forest); } .bb-cart-drawer__upsell-price del { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--bb-fg-muted); } .bb-cart-drawer__upsell-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 10px 14px; border: 0; border-radius: 6px; background: var(--bb-deep-black); color: var(--bb-warm-white); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 150ms; } .bb-cart-drawer__upsell-add:hover { background: var(--bb-forest); } /* Cart-pagina-context: ruimer en op contentbreedte i.p.v. volle drawer-breedte */ .bb-cart-drawer__upsell--cart { margin: 24px 0 0; padding: 20px; } .bb-cart-drawer__upsell--cart .bb-cart-drawer__upsell-add { width: auto; padding: 11px 22px; } /* Bundelkorting-regel in de totalen */ .bb-cart-drawer__totals-row--bundle .bb-cart-drawer__totals-val, .bb-cart-summary__row--bundle .bb-cart-summary__val, .bb-checkout__totals-row--bundle .bb-checkout__totals-val { color: var(--bb-forest); font-weight: 600; } /* Undo-toast onderin de drawer */ .bb-cart-drawer__toast { position: absolute; left: 28px; right: 28px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--bb-deep-black); color: var(--bb-warm-white); font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease; z-index: 5; } .bb-cart-drawer__toast.is-visible { opacity: 1; transform: translateY(0); } .bb-cart-drawer__toast-text { min-width: 0; } .bb-cart-drawer__toast-undo { flex-shrink: 0; background: transparent; border: 0; color: var(--bb-warm-white); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; } .bb-cart-drawer__toast-undo:hover { color: var(--bb-sand); } /* Header cart icoon + badge */ .bb-nav__cart { position: relative; display: inline-flex; align-items: center; color: inherit; text-decoration: none; } .bb-cart-count { position: absolute; top: -6px; right: -8px; background: var(--bb-sage); color: #fff; font-size: 10px; font-weight: 600; border-radius: 999px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; box-sizing: border-box; } .bb-cart-count[hidden] { display: none; } /* Mobile */ @media (max-width: 480px) { .bb-cart-drawer__panel { max-width: 100%; } .bb-cart-drawer__header, .bb-cart-drawer__shipping, .bb-cart-drawer__items, .bb-cart-drawer__footer { padding-left: 20px; padding-right: 20px; } .bb-cart-drawer__title { font-size: 22px; } .bb-cart-drawer__totals-grand { font-size: 20px; } } /* ========================================================================= Blog / Journal Geport uit ui_kits/website/BlogPage.jsx ========================================================================= */ /* Page header (hero). padding-top compenseert NIET zelf voor de 76px fixed-nav offset — body main heeft daar al padding-top: 76. 84 + 76 = 160 = design-intent. Zelfde patroon als .bb-article-head. */ .bb-blog-hero { padding-top: 120px; padding-bottom: 56px; background: var(--bb-warm-white); } .bb-blog-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: flex-end; } .bb-blog-hero__title { margin: 18px 0 24px; font-size: clamp(48px, 9vw, 96px); line-height: 0.95; letter-spacing: -0.035em; color: var(--bb-deep-black); } .bb-blog-hero__lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--bb-charcoal); max-width: 420px; } /* Featured (sticky) post */ .bb-blog-featured { padding-bottom: 96px; background: var(--bb-warm-white); } .bb-blog-featured__card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; text-decoration: none; color: inherit; background: var(--bb-snow); border-radius: 4px; overflow: hidden; } .bb-blog-featured__image { aspect-ratio: 5 / 4; background: var(--bb-sand); overflow: hidden; } .bb-blog-featured__image .bb-blog-featured__img, .bb-blog-featured__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .bb-blog-featured__image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--bb-fg-muted); font-size: 13px; letter-spacing: 0.04em; } .bb-blog-featured__content { padding: 48px 56px 48px 8px; } .bb-blog-featured__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .bb-blog-featured__label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-terracotta); } .bb-blog-featured__rule { width: 28px; height: 1px; background: var(--bb-border); display: inline-block; } .bb-blog-featured__cat { font-size: 12px; color: var(--bb-fg-muted); letter-spacing: 0.04em; } .bb-blog-featured__title { margin: 0 0 20px; font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); transition: color 180ms ease; } .bb-blog-featured__excerpt { margin: 0 0 28px; font-size: 16px; line-height: 1.7; color: var(--bb-charcoal); max-width: 480px; } .bb-blog-featured__byline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--bb-fg-muted); margin-bottom: 28px; } .bb-blog-featured__author { color: var(--bb-fg-strong); font-weight: 600; } .bb-blog-featured__dot { color: var(--bb-stone); } .bb-blog-featured__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--bb-link); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } /* Card is één grote ; onderdruk de globale a:hover underline op alle tekst en geef in plaats daarvan een gerichte hover (titel terracotta + image-zoom), consistent met de grid-kaart. De CTA houdt zijn eigen underline. */ .bb-blog-featured__card:hover { text-decoration: none; } .bb-blog-featured__card:hover .bb-blog-featured__title { color: var(--bb-terracotta); } .bb-blog-featured__card:hover .bb-blog-featured__image img { transform: scale(1.04); } /* Sticky category filter bar */ .bb-blog-filter { background: var(--bb-warm-white); border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); padding-top: 24px; padding-bottom: 24px; position: sticky; top: 76px; z-index: 30; backdrop-filter: blur(12px); } .bb-blog-filter__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .bb-blog-filter__pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bb-blog-filter__pill { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--bb-border); background: transparent; color: var(--bb-fg-strong); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 150ms; text-decoration: none; line-height: 1; } .bb-blog-filter__pill:hover { border-color: var(--bb-deep-black); } .bb-blog-filter__pill--active, .bb-blog-filter__pill--active:hover { border-color: var(--bb-deep-black); background: var(--bb-deep-black); color: #fff; } .bb-blog-filter__count { font-size: 13px; color: var(--bb-fg-muted); } /* Grid section */ .bb-blog-grid-section { padding-top: 80px; padding-bottom: 112px; background: var(--bb-warm-white); } /* Post grid — override WP block-template defaults */ .wp-block-post-template.bb-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; list-style: none; padding: 0; margin: 0; } .wp-block-post-template.bb-blog-grid > li { margin: 0; } /* Blog card */ .bb-blog-card { display: flex; flex-direction: column; text-decoration: none; } .bb-blog-card .bb-blog-card__image { aspect-ratio: 4 / 3; background: var(--bb-sand); border-radius: 4px; overflow: hidden; margin: 0 0 20px; } .bb-blog-card .bb-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .bb-blog-card:hover .bb-blog-card__image img { transform: scale(1.04); } .bb-blog-card .bb-blog-card__cat, .bb-blog-card .bb-blog-card__cat a { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-terracotta); margin-bottom: 10px; text-decoration: none; } .bb-blog-card .bb-blog-card__title { margin: 0 0 10px; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--bb-deep-black); } .bb-blog-card .bb-blog-card__title a { color: inherit; text-decoration: none; } .bb-blog-card .bb-blog-card__title a:hover { color: var(--bb-terracotta); } .bb-blog-card .bb-blog-card__excerpt { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--bb-charcoal); /* Kap de excerpt op de overzichtskaarten af op 2 regels; houdt de kaarten gelijk hoog ongeacht de (handmatige) excerpt-lengte. Niet-destructief: de volledige tekst blijft opgeslagen en op de post zelf zichtbaar. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bb-blog-card__meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--bb-fg-muted); } .bb-blog-card__meta span[aria-hidden] { color: var(--bb-stone); } /* Empty state */ .bb-blog-empty { text-align: center; font-size: 16px; color: var(--bb-fg-muted); padding: 64px 0; } /* Pagination */ .bb-blog-pagination { margin-top: 72px; gap: 8px; } .bb-blog-pagination .page-numbers { padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--bb-border); color: var(--bb-fg-strong); text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1; } .bb-blog-pagination .page-numbers.current, .bb-blog-pagination .page-numbers:hover { background: var(--bb-deep-black); color: #fff; border-color: var(--bb-deep-black); } /* Inline newsletter (quiet CTA) */ .bb-blog-newsletter { background: var(--bb-sand); padding-top: 96px; padding-bottom: 96px; } .bb-blog-newsletter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .bb-blog-newsletter__title { margin: 14px 0 20px; font-size: 44px; line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-blog-newsletter__body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--bb-charcoal); max-width: 440px; } .bb-blog-newsletter__form { display: flex; gap: 12px; flex-wrap: wrap; } .bb-blog-newsletter__input { flex: 1 1 240px; padding: 16px 18px; font-family: inherit; font-size: 15px; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 4px; color: var(--bb-fg-strong); box-sizing: border-box; } .bb-blog-newsletter__input:focus { outline: none; border-color: var(--bb-deep-black); } .bb-blog-newsletter__btn { padding: 16px 24px; background: var(--bb-deep-black); color: #fff; border: none; border-radius: 4px; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background 150ms; } .bb-blog-newsletter__btn:hover { background: var(--bb-terracotta); } /* ----- Blog mobile responsive ----- */ @media (max-width: 1024px) { .bb-blog-hero { padding-top: 100px; } .bb-blog-hero__grid { gap: 56px; } .bb-blog-featured__content { padding: 40px 40px 40px 8px; } .bb-blog-featured__title { font-size: 32px; } .wp-block-post-template.bb-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } .bb-blog-newsletter__title { font-size: 36px; } } @media (max-width: 768px) { .bb-blog-hero { padding-top: 96px; padding-bottom: 40px; } .bb-blog-hero__grid { grid-template-columns: 1fr; gap: 24px; align-items: flex-start; } .bb-blog-hero__lead { max-width: none; } .bb-blog-featured { padding-bottom: 64px; } .bb-blog-featured__card { grid-template-columns: 1fr; gap: 0; } .bb-blog-featured__content { padding: 32px 24px; } .bb-blog-featured__title { font-size: 26px; } .bb-blog-featured__excerpt { max-width: none; } .bb-blog-filter { top: 64px; padding-top: 16px; padding-bottom: 16px; } .bb-blog-filter__bar { gap: 12px; } .bb-blog-filter__pill { padding: 8px 14px; font-size: 12px; } .bb-blog-grid-section { padding-top: 56px; padding-bottom: 80px; } .wp-block-post-template.bb-blog-grid { grid-template-columns: 1fr; gap: 48px; } .bb-blog-newsletter { padding-top: 64px; padding-bottom: 64px; } .bb-blog-newsletter__grid { grid-template-columns: 1fr; gap: 32px; } .bb-blog-newsletter__title { font-size: 30px; } .bb-blog-newsletter__body { max-width: none; } .bb-blog-newsletter__form { flex-direction: column; } /* flex: 1 1 240px in column-context laat input verticaal groeien. Reset naar auto-height + horizontale stretch. */ .bb-blog-newsletter__input { flex: 0 0 auto; width: 100%; } .bb-blog-newsletter__btn { width: 100%; } } @media (max-width: 480px) { .bb-blog-filter__pills { gap: 6px; } .bb-blog-filter__pill { padding: 7px 12px; } .bb-blog-featured__title { font-size: 22px; } .bb-blog-card .bb-blog-card__title { font-size: 20px; } .bb-blog-newsletter__title { font-size: 26px; } } /* ========================================================================= Blog single post (article) Geport uit brand/claude-design/Blog Post.html ========================================================================= */ /* Reading progress bar (fixed top) */ .bb-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 60; pointer-events: none; } .bb-progress__bar { height: 100%; width: 0%; background: var(--bb-sage, var(--bb-terracotta)); transition: width 80ms linear; } /* Article header. padding-top: 56px (NIET 132 zoals design). Reden: body main heeft al padding-top: 76px om de fixed nav te compenseren (zie nav-section bovenaan dit bestand). 76 + 56 = 132 = design-intent (viewport top tot eerste content). Mobile: 76 + 32 = 108 = design-intent mobile. */ .bb-article-head { padding-top: 56px; padding-bottom: 56px; background: var(--bb-warm-white); } .bb-article-head__inner { max-width: 880px; } .bb-breadcrumb { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: 13px; color: var(--bb-fg-muted); margin-bottom: 36px; } .bb-breadcrumb a { color: inherit; text-decoration: none; transition: color 150ms; } .bb-breadcrumb a:hover { color: var(--bb-link); text-decoration: underline; text-underline-offset: 3px; } .bb-breadcrumb__sep { color: var(--bb-stone); } .bb-breadcrumb__current { color: var(--bb-fg-strong); } .bb-article-head__cat { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; } .bb-article-head__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-terracotta); } .bb-article-head__rule { width: 36px; height: 1px; background: var(--bb-border); } .bb-article-head__read { font-size: 12px; color: var(--bb-fg-muted); letter-spacing: 0.04em; } .bb-article-head__title { font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 28px; font-weight: 700; color: var(--bb-deep-black); text-wrap: balance; } .bb-article-head__deck { font-size: 22px; line-height: 1.5; color: var(--bb-charcoal); margin: 0; max-width: 720px; font-weight: 400; letter-spacing: -0.005em; } /* Meta strip (border top + bottom row) */ .bb-meta-strip { margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .bb-meta-byline { display: flex; align-items: center; gap: 16px; } .bb-avatar { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, var(--bb-warm-sand) 0%, var(--bb-terracotta) 100%); display: inline-flex; align-items: center; justify-content: center; color: var(--bb-warm-white); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; flex-shrink: 0; } .bb-meta-byline__name { font-size: 14px; font-weight: 600; color: var(--bb-fg-strong); } .bb-meta-byline__role { font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-meta-share { display: inline-flex; align-items: center; gap: 8px; } .bb-meta-share__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-fg-muted); margin-right: 8px; } .bb-share-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bb-border); background: transparent; border-radius: 999px; color: var(--bb-fg-strong); cursor: pointer; transition: all 150ms; text-decoration: none; padding: 0; } .bb-share-btn:hover { border-color: var(--bb-fg-strong); background: var(--bb-sand); } /* Hero image */ .bb-article-hero-wrap { padding-top: 0; margin-bottom: 96px; } .wp-block-post-featured-image.bb-article-hero { margin: 0; } .wp-block-post-featured-image.bb-article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--bb-sand); } /* Article body — 3 col grid */ .bb-article-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 64px; padding-bottom: 120px; } /* Sticky rails */ .bb-toc, .bb-rail { position: relative; } .bb-toc__sticky, .bb-rail__sticky { position: sticky; top: 108px; } /* Left rail — TOC */ .bb-toc__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-fg-muted); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--bb-border); } .bb-toc__list { list-style: none; padding: 0; margin: 0; } .bb-toc__list li { margin-bottom: 14px; } .bb-toc__list a { display: block; font-size: 13px; line-height: 1.45; color: var(--bb-fg-muted); padding-left: 14px; border-left: 2px solid transparent; transition: color 150ms, border-color 150ms; text-decoration: none; } .bb-toc__list a:hover { color: var(--bb-fg-strong); } .bb-toc__list a.is-active { color: var(--bb-fg-strong); border-left-color: var(--bb-terracotta); font-weight: 500; } /* Right rail — author chip + share */ .bb-rail-author { padding: 24px; background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 8px; } .bb-rail-author__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bb-rail-author__name { font-size: 14px; font-weight: 600; color: var(--bb-fg-strong); margin-bottom: 2px; } .bb-rail-author__role { font-size: 12px; color: var(--bb-fg-muted); } .bb-rail-author__bio { font-size: 13px; line-height: 1.55; color: var(--bb-charcoal); margin: 0 0 16px; } .bb-rail-author__link { font-size: 12px; font-weight: 600; color: var(--bb-link); border-bottom: 1px solid currentColor; padding-bottom: 1px; text-decoration: none; } .bb-rail-author__link:hover { color: var(--bb-link-hover); } .bb-rail-share { margin-top: 24px; padding: 16px 4px; display: flex; gap: 8px; flex-direction: column; align-items: flex-start; } .bb-rail-share__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-fg-muted); margin-bottom: 4px; } .bb-rail-share__row { display: flex; gap: 8px; } /* ----- Prose ----- */ .bb-prose { max-width: 660px; width: 100%; justify-self: center; } .bb-prose > * + * { margin-top: 1.4em; } .bb-prose p { font-size: 18px; line-height: 1.7; color: var(--bb-charcoal); letter-spacing: -0.003em; margin: 0; text-wrap: pretty; } .bb-prose p.lead, .bb-prose .has-large-font-size, .bb-prose .is-style-lead { font-size: 22px; line-height: 1.55; color: var(--bb-deep-black); font-weight: 400; letter-spacing: -0.012em; margin-bottom: 1.6em; } .bb-prose h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.022em; color: var(--bb-deep-black); margin: 2.4em 0 0.6em; font-weight: 700; scroll-margin-top: 100px; } .bb-prose h2:first-of-type { margin-top: 1.8em; } .bb-prose h3 { font-size: 20px; line-height: 1.3; color: var(--bb-deep-black); margin: 1.8em 0 0.4em; font-weight: 600; letter-spacing: -0.01em; } .bb-prose strong { color: var(--bb-deep-black); font-weight: 600; } .bb-prose em { font-style: italic; } .bb-prose ul, .bb-prose ol { padding-left: 1.4em; margin: 0; } .bb-prose ul li, .bb-prose ol li { font-size: 18px; line-height: 1.65; color: var(--bb-charcoal); margin-bottom: 0.6em; } .bb-prose ul li::marker { color: var(--bb-stone); } .bb-prose a { color: var(--bb-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .bb-prose a:hover { color: var(--bb-link-hover); } .bb-prose figure { margin: 2.4em 0; } .bb-prose figure img { width: 100%; border-radius: 4px; background: var(--bb-sand); } .bb-prose figure figcaption { margin-top: 12px; font-size: 13px; color: var(--bb-fg-muted); line-height: 1.5; } /* Slot/fine-print paragraph (kleine afsluitende regel met top border) */ .bb-prose p.is-style-fine-print { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bb-border); font-size: 14px; color: var(--bb-fg-muted); letter-spacing: 0.02em; line-height: 1.6; } /* WP wp:separator binnen prose: gebruik dezelfde topscheiding subtiel */ .bb-prose .wp-block-separator { border: 0; border-top: 1px solid var(--bb-border); margin: 2.4em 0 1em; height: 0; } /* Pullquote (within prose) */ .bb-prose .bb-pullquote, .bb-pullquote { margin: 2.8em 0; padding: 32px 0 28px; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); background: transparent; } .bb-pullquote__text { font-size: 26px; line-height: 1.35; color: var(--bb-deep-black); letter-spacing: -0.018em; margin: 0 0 14px; font-weight: 400; text-wrap: balance; } .bb-pullquote__attr { font-size: 13px; color: var(--bb-fg-muted); letter-spacing: 0.02em; } .bb-pullquote__attr strong { color: var(--bb-fg-strong); } /* Callout (.aside in design) */ .bb-prose .bb-callout, .bb-callout { margin: 2.4em 0; padding: 28px 32px; background: var(--bb-snow); border: 1px solid var(--bb-border); border-left: 3px solid var(--bb-sage); border-radius: 8px; } .bb-callout__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-sage); margin-bottom: 10px; } .bb-callout__body { font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); margin: 0; } /* Stats trio */ .bb-prose .bb-stats, .bb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 2.4em 0; padding: 28px 0; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); } .bb-stat__num { font-size: 44px; line-height: 1; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 600; margin-bottom: 8px; } .bb-stat__label { font-size: 13px; line-height: 1.5; color: var(--bb-fg-muted); } /* Author full card (onder artikel) */ .bb-author-card { padding-bottom: 96px; background: var(--bb-warm-white); } .bb-author-card__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 32px 40px; background: var(--bb-sand); border-radius: 8px; } .bb-author-card__avatar { width: 80px; height: 80px; border-radius: 999px; background: linear-gradient(135deg, var(--bb-warm-sand) 0%, var(--bb-terracotta) 100%); display: inline-flex; align-items: center; justify-content: center; color: var(--bb-warm-white); font-weight: 600; font-size: 22px; letter-spacing: 0.04em; flex-shrink: 0; } .bb-author-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-terracotta); margin-bottom: 8px; } .bb-author-card__name { font-size: 22px; line-height: 1.2; color: var(--bb-deep-black); margin: 0 0 8px; font-weight: 600; letter-spacing: -0.018em; } .bb-author-card__bio { font-size: 15px; line-height: 1.6; color: var(--bb-charcoal); margin: 0; max-width: 600px; } .bb-author-card__cta { font-size: 14px; font-weight: 600; color: var(--bb-link); border-bottom: 1px solid currentColor; text-decoration: none; white-space: nowrap; } /* Related */ .bb-related { padding-top: 64px; padding-bottom: 96px; background: var(--bb-warm-white); border-top: 1px solid var(--bb-border); } .bb-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; } .bb-related__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-terracotta); margin-bottom: 10px; } .bb-related__title { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -0.022em; color: var(--bb-deep-black); max-width: 560px; } /* Featured-articles (homepage): intro-zin onder de titel. Hergebruikt verder .bb-related. */ .bb-featured__intro { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); max-width: 560px; } .bb-related__all { font-size: 14px; font-weight: 600; color: var(--bb-link); text-decoration: underline; text-underline-offset: 4px; } .bb-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .bb-card-post { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .bb-card-post__img { aspect-ratio: 4 / 3; background: var(--bb-sand); border-radius: 4px; overflow: hidden; margin-bottom: 18px; } .bb-card-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .bb-card-post:hover .bb-card-post__img img { transform: scale(1.04); } /* Card is één grote ; onderdruk de globale a:hover underline en geef in plaats daarvan een titel-terracotta hover (image-zoom hierboven). */ .bb-card-post:hover { text-decoration: none; } .bb-card-post:hover .bb-card-post__title { color: var(--bb-terracotta); } .bb-card-post__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-terracotta); margin-bottom: 8px; } .bb-card-post__title { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--bb-deep-black); transition: color 180ms ease; } .bb-card-post__excerpt { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--bb-charcoal); } .bb-card-post__meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--bb-fg-muted); } .bb-card-post__dot { color: var(--bb-stone); } /* ----- Single post responsive ----- */ @media (max-width: 1100px) { .bb-article-body { grid-template-columns: 1fr; gap: 48px; padding-bottom: 80px; } .bb-toc, .bb-rail-right { display: none; } .bb-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .bb-article-head { padding-top: 32px; padding-bottom: 40px; } .bb-article-head__deck { font-size: 18px; } .bb-meta-strip { margin-top: 32px; padding: 18px 0; } .bb-article-hero-wrap { margin-bottom: 56px; } .bb-prose p, .bb-prose li { font-size: 17px; } .bb-prose h2 { font-size: 26px; } .bb-prose h3 { font-size: 18px; } .bb-pullquote__text { font-size: 22px; } .bb-stats { grid-template-columns: 1fr; gap: 18px; } .bb-stat__num { font-size: 36px; } /* Mobile: dichter aansluiten op prose + minder gap voor related. */ .bb-article-body { padding-bottom: 48px; } .bb-author-card { padding-bottom: 48px; } .bb-author-card__inner { grid-template-columns: auto 1fr; padding: 24px; gap: 20px; } .bb-author-card__cta { grid-column: 1 / -1; justify-self: start; } .bb-related { padding-top: 48px; padding-bottom: 64px; } .bb-related__grid { grid-template-columns: 1fr; gap: 40px; } .bb-related__title { font-size: 26px; } .bb-related__head { margin-bottom: 32px; } } @media (max-width: 480px) { .bb-meta-strip { flex-direction: column; align-items: flex-start; gap: 16px; } .bb-share-btn { width: 32px; height: 32px; } .bb-pullquote__text { font-size: 19px; } .bb-callout { padding: 18px 18px; } } /* ========================================================================= Author archive page Geport uit brand/claude-design/ui_kits/website/AuthorPage.jsx ========================================================================= */ /* Hero section */ .bb-author-hero { padding-top: 56px; padding-bottom: 80px; background: var(--bb-warm-white); } .bb-author-hero__breadcrumb { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: 13px; color: var(--bb-fg-muted); margin-bottom: 48px; } .bb-author-hero__breadcrumb a { color: inherit; text-decoration: none; transition: color 150ms; } .bb-author-hero__breadcrumb a:hover { color: var(--bb-link); text-decoration: underline; text-underline-offset: 3px; } .bb-author-hero__sep { color: var(--bb-stone); } .bb-author-hero__current { color: var(--bb-fg-strong); } .bb-author-hero__grid { display: grid; /* minmax(0, ...) forceert dat fr-kolommen kleiner mogen worden dan hun min-content (anders zou het 220px monogram in de portrait de linker-kolom uitrekken en de 80px gap opeten). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; align-items: center; } /* Portrait: gradient placeholder met groot monogram + caption. align-self: start voorkomt dat de grid-rij (gevuld door de rechter kolom met bio+stats+socials) het portret verticaal stretcht — dan zou aspect-ratio 4/5 namelijk de breedte vergroten en de 80px gap met de tekst opeten. */ .bb-author-portrait { aspect-ratio: 4 / 5; width: 100%; box-sizing: border-box; /* padding 32px telt binnen 100% width, anders */ align-self: start; /* bleed het portret 64px buiten de grid-cel en */ /* eet de 80px gap met de tekst rechts op. */ background: linear-gradient(160deg, var(--bb-warm-sand) 0%, var(--bb-terracotta) 70%, var(--bb-forest, #4A6741) 130%); border-radius: 4px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 32px; position: relative; overflow: hidden; } .bb-author-portrait__monogram { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 220px; line-height: 1; letter-spacing: -0.08em; font-weight: 700; color: rgba(250, 248, 245, 0.92); user-select: none; } .bb-author-portrait__caption { position: relative; z-index: 1; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250, 248, 245, 0.86); } /* Foto variant: vervangt gradient + monogram door echte img */ .bb-author-portrait--photo { background: var(--bb-sand); padding: 0; display: block; } .bb-author-portrait--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; } /* Hero right column */ .bb-author-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-sage); margin-bottom: 18px; } .bb-author-hero__name { font-size: clamp(48px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.035em; color: var(--bb-deep-black); margin: 0 0 24px; font-weight: 700; text-wrap: balance; } .bb-author-hero__role { font-size: 18px; color: var(--bb-fg-strong); font-weight: 500; letter-spacing: -0.005em; margin-bottom: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .bb-author-hero__dot { color: var(--bb-stone); } .bb-author-hero__location { display: inline-flex; align-items: center; gap: 6px; color: var(--bb-fg-muted); font-weight: 400; } .bb-author-hero__bio { font-size: 20px; line-height: 1.6; color: var(--bb-charcoal); margin: 0 0 16px; max-width: 540px; letter-spacing: -0.005em; } /* Stats */ .bb-author-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 32px 0; margin: 40px 0 0; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); } .bb-author-stat__num { font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--bb-deep-black); font-weight: 700; margin-bottom: 6px; } .bb-author-stat__label { font-size: 12px; line-height: 1.45; color: var(--bb-fg-muted); letter-spacing: 0.02em; } /* Socials */ .bb-author-socials { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } .bb-author-social { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--bb-border); font-size: 13px; font-weight: 500; color: var(--bb-fg-strong); text-decoration: none; transition: border-color 150ms; } .bb-author-social:hover { border-color: var(--bb-fg-strong); } .bb-author-social__label { color: var(--bb-fg-muted); } /* Bio section (snow bg) */ .bb-author-bio { background: var(--bb-snow); padding: 80px 0; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); } .bb-author-bio__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; } .bb-author-bio__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-sage); margin-bottom: 14px; } .bb-author-bio__title { font-size: 32px; line-height: 1.15; letter-spacing: -0.022em; color: var(--bb-deep-black); margin: 0 0 24px; font-weight: 700; text-wrap: balance; } .bb-author-bio__expertise { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .bb-author-bio__chip { padding: 6px 12px; border-radius: 999px; background: var(--bb-sage-tint); color: var(--bb-forest, var(--bb-sage)); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } .bb-author-bio__body > p { font-size: 17px; line-height: 1.7; color: var(--bb-charcoal); letter-spacing: -0.003em; } .bb-author-bio__body > p + p { margin-top: 1.4em; } /* Featured */ .bb-author-featured { padding-top: 96px; padding-bottom: 56px; background: var(--bb-warm-white); } .bb-author-featured__head { margin-bottom: 32px; } .bb-author-featured__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-terracotta); margin-bottom: 12px; } .bb-author-featured__title { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); margin: 0; font-weight: 700; } .bb-author-featured__card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; background: var(--bb-snow); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; } .bb-author-featured__image { aspect-ratio: 5 / 4; background: var(--bb-sand); overflow: hidden; } .bb-author-featured__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } /* Card is één grote ; onderdruk de globale a:hover underline op alle tekst en geef in plaats daarvan een gerichte hover (titel terracotta + image-zoom), consistent met de blog-featured card. */ .bb-author-featured__card:hover { text-decoration: none; color: inherit; } .bb-author-featured__card:hover .bb-author-featured__post-title { color: var(--bb-terracotta); } .bb-author-featured__card:hover .bb-author-featured__image img { transform: scale(1.04); } .bb-author-featured__copy { padding: 48px 56px 48px 8px; } .bb-author-featured__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .bb-author-featured__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-terracotta); } .bb-author-featured__rule { width: 28px; height: 1px; background: var(--bb-border); } .bb-author-featured__date { font-size: 12px; color: var(--bb-fg-muted); letter-spacing: 0.04em; } .bb-author-featured__post-title { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); margin: 0 0 20px; font-weight: 700; text-wrap: balance; } .bb-author-featured__excerpt { font-size: 16px; line-height: 1.7; color: var(--bb-charcoal); margin: 0 0 28px; max-width: 480px; } .bb-author-featured__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--bb-link); font-size: 14px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* Archive filter (header + chips) */ .bb-author-archive-section { background: var(--bb-warm-white); } .bb-author-filter { padding-top: 56px; padding-bottom: 0; background: var(--bb-warm-white); } .bb-author-filter__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .bb-author-filter__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-sage); margin-bottom: 12px; } .bb-author-filter__title { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); margin: 0; font-weight: 700; } .bb-author-filter__count { font-size: 13px; color: var(--bb-fg-muted); } .bb-author-filter__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 56px; } .bb-author-filter__chip { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--bb-border); background: transparent; color: var(--bb-fg-strong); font-size: 13px; font-weight: 500; text-decoration: none; transition: all 150ms; line-height: 1; } .bb-author-filter__chip:hover { border-color: var(--bb-deep-black); } .bb-author-filter__chip.is-active { background: var(--bb-deep-black); color: #fff; border-color: var(--bb-deep-black); } /* Archive grid — gebruikt zelfde card-styling als .bb-blog-grid */ .wp-block-post-template.bb-author-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; list-style: none; padding: 0 0 112px; margin: 0; } .wp-block-post-template.bb-author-archive-grid > li { margin: 0; } /* Responsive */ @media (max-width: 1024px) { .bb-author-hero__grid { gap: 56px; } .bb-author-bio__grid { grid-template-columns: 1fr; gap: 40px; } .bb-author-featured__post-title { font-size: 32px; } .wp-block-post-template.bb-author-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } } @media (max-width: 900px) { .bb-author-hero__grid { grid-template-columns: 1fr; gap: 40px; } .bb-author-featured__card { grid-template-columns: 1fr; gap: 0; } .bb-author-featured__copy { padding: 32px; } .bb-author-portrait__monogram { font-size: 160px; } } @media (max-width: 768px) { .bb-author-hero { padding-top: 32px; padding-bottom: 56px; } .bb-author-hero__breadcrumb { margin-bottom: 32px; } .bb-author-hero__bio { font-size: 18px; max-width: none; } .bb-author-bio { padding: 56px 0; } .bb-author-bio__title { font-size: 26px; } .bb-author-featured { padding-top: 56px; padding-bottom: 40px; } .bb-author-featured__title { font-size: 28px; } .bb-author-featured__post-title { font-size: 24px; } .bb-author-featured__excerpt { max-width: none; } .bb-author-filter { padding-top: 40px; } .bb-author-filter__title { font-size: 28px; } .bb-author-filter__chips { margin-bottom: 40px; } .bb-author-filter__chip { padding: 8px 14px; font-size: 12px; } .wp-block-post-template.bb-author-archive-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; } } @media (max-width: 640px) { .bb-author-stats { grid-template-columns: 1fr; gap: 20px; } .bb-author-portrait__monogram { font-size: 120px; } } /* ============================================================ ABOUT PAGE — /over/ Geport uit ui_kits/website/AboutPage.jsx. 5 secties: hero, story, values, quality+sustainability, cta. ============================================================ */ /* ----- 1. About Hero — editorial header op warm-white ----- */ .bb-about-hero { background: var(--bb-warm-white); padding-top: 120px; padding-bottom: 80px; } @media (max-width: 1024px) { .bb-about-hero { padding-top: 100px; } } .bb-about-hero__inner { max-width: 820px; } .bb-about-hero__title { margin: 20px 0 28px; font-size: clamp(48px, 9vw, 96px); line-height: 0.95; letter-spacing: -0.035em; color: var(--bb-deep-black); font-weight: 600; } .bb-about-hero__body { margin: 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--bb-charcoal); max-width: 560px; } .bb-about-hero__accent { color: var(--bb-terracotta); font-weight: 600; } @media (max-width: 768px) { .bb-about-hero { padding-top: 96px; padding-bottom: 56px; } .bb-about-hero__title { margin-bottom: 20px; } } @media (max-width: 640px) { .bb-about-hero { padding-top: 80px; } } /* ----- 2. About Story — 2-col tekst + portrait foto ----- */ .bb-about-story { background: var(--bb-warm-white); padding-top: 32px; padding-bottom: 120px; } .bb-about-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 88px; align-items: center; } .bb-about-story__title { margin: 16px 0 28px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 600; } .bb-about-story__body { font-size: 17px; line-height: 1.7; color: var(--bb-charcoal); margin: 0 0 20px; max-width: 520px; } .bb-about-story__body:last-of-type { margin-bottom: 0; } .bb-about-story__media { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--bb-sand); } .bb-about-story__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } @media (max-width: 1024px) { .bb-about-story__grid { gap: 56px; } } @media (max-width: 768px) { .bb-about-story { padding-bottom: 80px; } .bb-about-story__grid { grid-template-columns: 1fr; gap: 40px; } .bb-about-story__media { max-width: 480px; margin: 0 auto; } } /* ----- 3. About Values — 4 cards op sand ----- */ .bb-about-values { background: var(--bb-sand); padding-top: 120px; padding-bottom: 120px; } .bb-about-values__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 80px; align-items: flex-start; margin-bottom: 64px; } .bb-about-values__title { margin: 14px 0 0; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 600; } .bb-about-values__intro { margin: 0; font-size: 17px; line-height: 1.7; color: var(--bb-charcoal); max-width: 480px; align-self: flex-end; } .bb-about-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .bb-about-values__card { background: var(--bb-warm-white); border-radius: 4px; padding: 36px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 260px; } .bb-about-values__card-head { display: flex; align-items: center; justify-content: space-between; } .bb-about-values__icon { width: 44px; height: 44px; border-radius: 999px; background: rgba(74, 103, 65, 0.18); /* forest tint */ color: var(--bb-forest); display: inline-flex; align-items: center; justify-content: center; } .bb-about-values__num { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--bb-warm-grey); } .bb-about-values__card-title { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--bb-deep-black); } .bb-about-values__card-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bb-charcoal); } @media (max-width: 1024px) { .bb-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .bb-about-values__header { gap: 48px; } } @media (max-width: 768px) { .bb-about-values { padding-top: 80px; padding-bottom: 80px; } .bb-about-values__header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } .bb-about-values__intro { align-self: auto; } } @media (max-width: 640px) { .bb-about-values__grid { grid-template-columns: 1fr; } .bb-about-values__card { min-height: 0; padding: 28px 24px; } } /* ----- 4. About Quality + Sustainability — 2-col split op snow ----- */ .bb-about-quality { background: var(--bb-snow); padding-top: 120px; padding-bottom: 120px; } .bb-about-quality__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: flex-start; } .bb-about-quality__col { min-width: 0; } .bb-about-quality__title { margin: 14px 0 24px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); font-weight: 600; } .bb-about-quality__body { font-size: 16px; line-height: 1.7; color: var(--bb-charcoal); margin: 0 0 18px; max-width: 480px; } .bb-about-quality__body + .bb-about-quality__body { margin-bottom: 32px; } .bb-about-quality__col:last-child .bb-about-quality__body { margin-bottom: 28px; } .bb-about-quality__certs { display: flex; flex-wrap: wrap; gap: 10px; } .bb-about-quality__pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bb-warm-white); border: 1px solid var(--bb-border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--bb-fg-strong); } .bb-about-quality__pill .bb-about-quality__check { color: var(--bb-forest); display: inline-flex; } .bb-about-quality__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--bb-border); } .bb-about-quality__list-item { display: grid; grid-template-columns: 20px 1fr; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--bb-border); } .bb-about-quality__list-item > .bb-about-quality__check { color: var(--bb-forest); margin-top: 3px; display: inline-flex; } .bb-about-quality__list-title { display: block; font-size: 15px; font-weight: 600; color: var(--bb-fg-strong); } .bb-about-quality__list-sub { display: block; font-size: 13.5px; color: var(--bb-fg-muted); margin-top: 4px; line-height: 1.55; } @media (max-width: 1024px) { .bb-about-quality__grid { gap: 56px; } } @media (max-width: 768px) { .bb-about-quality { padding-top: 80px; padding-bottom: 80px; } .bb-about-quality__grid { grid-template-columns: 1fr; gap: 64px; } } /* ----- 5. About CTA — donker banner ----- */ .bb-about-cta { background: var(--bb-deep-black); color: #fff; } .bb-about-cta__inner { padding-top: 112px; padding-bottom: 112px; text-align: center; } .bb-about-cta__title { margin: 18px auto 22px; font-size: clamp(36px, 6.5vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; max-width: 820px; font-weight: 600; } .bb-about-cta__accent { color: var(--bb-warm-sand); } .bb-about-cta__body { margin: 0 auto 36px; font-size: 17px; line-height: 1.6; color: rgba(250, 248, 245, 0.78); max-width: 480px; } .bb-about-cta__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; } .bb-about-cta__btn { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; border-radius: 4px; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; cursor: pointer; } .bb-about-cta__btn--primary { background: var(--bb-terracotta); color: #fff; padding: 16px 28px; } .bb-about-cta__btn--primary:hover { background: var(--bb-forest); color: #fff; } .bb-about-cta__btn--tertiary { background: transparent; color: var(--bb-warm-sand); padding: 16px 8px; } .bb-about-cta__btn--tertiary:hover { opacity: 0.78; } @media (max-width: 768px) { .bb-about-cta__inner { padding-top: 72px; padding-bottom: 72px; } .bb-about-cta__title { margin-bottom: 18px; } .bb-about-cta__body { margin-bottom: 28px; } .bb-about-cta__actions { flex-direction: column; gap: 8px; } .bb-about-cta__btn--primary, .bb-about-cta__btn--tertiary { padding: 14px 24px; } } /* ===================================================================== Hoe het werkt — page sections ===================================================================== */ /* ----- How Hero ----- */ .bb-how-hero { background: var(--bb-warm-white); padding: 120px 0 40px; } .bb-how-hero__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: flex-end; } .bb-how-hero__title { margin: 18px 0 0; font-size: clamp(48px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.035em; color: var(--bb-deep-black); } .bb-how-hero__title-accent { color: var(--bb-terracotta); } .bb-how-hero__body { margin: 0; font-size: 18px; line-height: 1.6; color: var(--bb-charcoal); max-width: 420px; } /* ----- How Effects ----- */ .bb-how-effects { background: var(--bb-warm-white); padding: 56px 0 80px; } .bb-how-effects__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 64px; align-items: flex-end; } .bb-how-effects__title { margin: 14px 0 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-how-effects__intro { margin: 0; font-size: 16px; line-height: 1.7; color: var(--bb-charcoal); max-width: 460px; } .bb-how-effects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .bb-how-effects__card { background: var(--bb-snow); border-radius: 4px; padding: 36px; display: flex; flex-direction: column; gap: 28px; min-height: 280px; } .bb-how-effects__card-head { display: flex; align-items: center; justify-content: space-between; } .bb-how-effects__icon { width: 48px; height: 48px; border-radius: 999px; background: rgba(74, 103, 65, 0.12); color: var(--bb-forest); display: inline-flex; align-items: center; justify-content: center; } .bb-how-effects__number { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: var(--bb-stone); line-height: 1; } .bb-how-effects__card-title { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--bb-deep-black); } .bb-how-effects__card-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--bb-charcoal); } @media (max-width: 1024px) { .bb-how-hero { padding-top: 100px; } .bb-how-hero__inner, .bb-how-effects__head { gap: 48px; } } @media (max-width: 768px) { .bb-how-hero { padding: 96px 0 40px; } .bb-how-hero__inner { grid-template-columns: 1fr; gap: 28px; align-items: flex-start; } .bb-how-hero__body { max-width: none; font-size: 16px; } .bb-how-effects { padding: 56px 0 80px; } .bb-how-effects__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; align-items: flex-start; } .bb-how-effects__intro { max-width: none; } .bb-how-effects__grid { grid-template-columns: 1fr; gap: 16px; } .bb-how-effects__card { min-height: 0; padding: 28px; gap: 20px; } } @media (max-width: 640px) { .bb-how-hero { padding-top: 80px; } } /* ----- How Timeline ----- */ .bb-how-timeline { background: var(--bb-sand); padding: 88px 0 96px; } .bb-how-timeline__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; align-items: flex-end; } .bb-how-timeline__title { margin: 14px 0 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-how-timeline__intro { margin: 0; font-size: 16px; line-height: 1.7; color: var(--bb-charcoal); max-width: 460px; } .bb-how-timeline__track { position: relative; } .bb-how-timeline__line { position: absolute; top: 28px; left: 6%; right: 6%; height: 1px; background: var(--bb-stone); z-index: 0; } .bb-how-timeline__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; position: relative; z-index: 1; } .bb-how-timeline__col { display: flex; flex-direction: column; align-items: center; } .bb-how-timeline__bullet { width: 56px; height: 56px; border-radius: 999px; background: var(--bb-sage); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; box-shadow: 0 0 0 6px var(--bb-sand); flex-shrink: 0; } .bb-how-timeline__bullet.is-final { background: var(--bb-forest); } .bb-how-timeline__card { margin-top: 28px; background: var(--bb-warm-white); border: 1px solid var(--bb-border, rgba(26, 26, 26, 0.1)); border-radius: 4px; padding: 28px; width: 100%; box-sizing: border-box; min-height: 220px; display: flex; flex-direction: column; gap: 10px; } .bb-how-timeline__card.is-final { border: 1.5px solid var(--bb-sage); } .bb-how-timeline__week { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-sage); } .bb-how-timeline__card.is-final .bb-how-timeline__week { color: var(--bb-forest); } .bb-how-timeline__duration { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--bb-deep-black); line-height: 1.1; } .bb-how-timeline__stage-title { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--bb-fg-strong, var(--bb-deep-black)); letter-spacing: -0.005em; } .bb-how-timeline__stage-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bb-charcoal); } .bb-how-timeline__caveat { margin: 64px auto 0; text-align: center; max-width: 560px; font-size: 14px; color: var(--bb-fg-muted, var(--bb-charcoal)); line-height: 1.7; } @media (max-width: 1024px) { .bb-how-timeline { padding: 80px 0; } .bb-how-timeline__head { gap: 48px; margin-bottom: 56px; } .bb-how-timeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; } .bb-how-timeline__line { display: none; } } @media (max-width: 768px) { .bb-how-timeline { padding: 64px 0; } .bb-how-timeline__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; align-items: flex-start; } .bb-how-timeline__intro { max-width: none; } .bb-how-timeline__grid { grid-template-columns: 1fr; row-gap: 24px; } .bb-how-timeline__bullet { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 4px var(--bb-sand); } .bb-how-timeline__card { min-height: 0; margin-top: 16px; padding: 24px; } .bb-how-timeline__caveat { margin-top: 40px; } } /* ----- How Video ----- */ .bb-how-video { background: var(--bb-warm-white); padding: 96px 0 80px; } .bb-how-video__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; } .bb-how-video__title { margin: 14px 0 18px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-how-video__body { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: var(--bb-charcoal); max-width: 420px; } .bb-how-video__status { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-fg-muted, var(--bb-charcoal)); } .bb-how-video__status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--bb-terracotta); display: inline-block; } .bb-how-video__player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--bb-deep-black); background-size: cover; background-position: center; background-blend-mode: luminosity; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; } .bb-how-video__player-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(74, 103, 65, 0.55) 0%, rgba(26, 26, 26, 0.92) 70%); pointer-events: none; } .bb-how-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 999px; background: rgba(250, 248, 245, 0.95); color: var(--bb-deep-black); display: inline-flex; align-items: center; justify-content: center; padding-left: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } .bb-how-video__duration { position: absolute; bottom: 18px; left: 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 999px; } @media (max-width: 1024px) { .bb-how-video { padding: 80px 0 64px; } .bb-how-video__inner { gap: 40px; } } @media (max-width: 768px) { .bb-how-video { padding: 64px 0 48px; } .bb-how-video__inner { grid-template-columns: 1fr; gap: 28px; } .bb-how-video__body { max-width: none; } .bb-how-video__play { width: 72px; height: 72px; } } /* ----- How FAQ ----- */ .bb-how-faq { background: var(--bb-snow); padding: 96px 0; } .bb-how-faq__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: flex-start; } .bb-how-faq__title { margin: 14px 0 18px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-how-faq__intro { margin: 0 0 24px; font-size: 15px; line-height: 1.65; color: var(--bb-charcoal); max-width: 320px; } .bb-how-faq__link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bb-link, var(--bb-forest)); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } .bb-how-faq__list { display: flex; flex-direction: column; } .bb-how-faq__item { border-top: 1px solid var(--bb-charcoal); } .bb-how-faq__list .bb-how-faq__item:last-child { border-bottom: 1px solid var(--bb-charcoal); } .bb-how-faq__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; } .bb-how-faq__row::-webkit-details-marker { display: none; } .bb-how-faq__q { font-size: 19px; font-weight: 600; color: var(--bb-deep-black); letter-spacing: -0.01em; } .bb-how-faq__chevron { color: var(--bb-fg, var(--bb-deep-black)); display: inline-flex; flex-shrink: 0; transition: transform 200ms ease, color 200ms ease; } .bb-how-faq__item[open] .bb-how-faq__chevron { transform: rotate(45deg); color: var(--bb-terracotta); } .bb-how-faq__a { margin: 0; padding: 0 0 28px; font-size: 16px; color: var(--bb-charcoal); line-height: 1.7; max-width: 600px; } @media (max-width: 1024px) { .bb-how-faq { padding: 80px 0; } .bb-how-faq__inner { gap: 40px; } } @media (max-width: 768px) { .bb-how-faq { padding: 64px 0; } .bb-how-faq__inner { grid-template-columns: 1fr; gap: 32px; } .bb-how-faq__intro { max-width: none; } } /* ----- How CTA ----- */ .bb-how-cta { background: var(--bb-deep-black); color: #fff; } .bb-how-cta__inner { padding: 96px 0; text-align: center; } .bb-how-cta__title { margin: 18px auto 22px; font-size: clamp(36px, 5.8vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; max-width: 760px; } .bb-how-cta__title-accent { color: var(--bb-warm-sand); } .bb-how-cta__body { margin: 0 auto 36px; font-size: 17px; line-height: 1.6; color: rgba(250, 248, 245, 0.78); max-width: 460px; } .bb-how-cta__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .bb-how-cta__btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border-radius: 4px; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; cursor: pointer; } .bb-how-cta__btn--primary { background: var(--bb-terracotta); color: #fff; padding: 16px 28px; } .bb-how-cta__btn--primary:hover { background: var(--bb-forest); color: #fff; } .bb-how-cta__btn--tertiary { background: transparent; color: var(--bb-warm-sand); padding: 16px 8px; } .bb-how-cta__btn--tertiary:hover { opacity: 0.78; } @media (max-width: 768px) { .bb-how-cta__inner { padding: 72px 0; } .bb-how-cta__title { margin-bottom: 18px; } .bb-how-cta__body { margin-bottom: 28px; } .bb-how-cta__actions { flex-direction: column; gap: 8px; } .bb-how-cta__btn--primary, .bb-how-cta__btn--tertiary { padding: 14px 24px; } } /* ===================================================================== FAQ — dedicated page (/faq/) ===================================================================== */ /* ----- FAQ Hero ----- */ .bb-faq-hero { background: var(--bb-warm-white); padding: 120px 0 56px; } .bb-faq-hero__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: flex-end; } .bb-faq-hero__title { margin: 18px 0 0; font-size: clamp(48px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.035em; color: var(--bb-deep-black); } .bb-faq-hero__body { margin: 0; font-size: 18px; line-height: 1.6; color: var(--bb-charcoal); max-width: 420px; } /* ----- FAQ Content ----- */ .bb-faq-content { background: var(--bb-warm-white); padding: 0 0 120px; } /* Search bar */ .bb-faq-content__search { margin-bottom: 56px; } .bb-faq-content__search-bar { display: flex; align-items: stretch; gap: 14px; background: var(--bb-snow); border: 1.5px solid var(--bb-border); border-radius: 6px; padding: 4px 4px 4px 22px; max-width: 720px; transition: border-color 150ms; } .bb-faq-content__search-bar:focus-within { border-color: var(--bb-forest); } .bb-faq-content__search-icon { display: inline-flex; align-items: center; color: var(--bb-fg-muted); } .bb-faq-content__search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--bb-fg-strong); padding: 14px 0; } .bb-faq-content__search-input::placeholder { color: var(--bb-fg-muted); } .bb-faq-content__search-clear { background: transparent; border: none; cursor: pointer; color: var(--bb-fg-muted); display: inline-flex; align-items: center; justify-content: center; padding: 8px; transform: rotate(45deg); } .bb-faq-content__search-clear:hover { color: var(--bb-fg-strong); } .bb-faq-content__search-count { font-size: 13px; color: var(--bb-fg-muted); padding: 0 18px; border-left: 1px solid var(--bb-border); align-self: stretch; display: flex; align-items: center; white-space: nowrap; } /* Two-column layout */ .bb-faq-content__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 96px; align-items: flex-start; } /* Sidebar */ .bb-faq-content__sidebar { position: sticky; top: 120px; } .bb-faq-content__sidebar-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-warm-grey); margin-bottom: 16px; } .bb-faq-content__nav { display: flex; flex-direction: column; border-left: 1px solid var(--bb-border); } .bb-faq-content__nav-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: transparent; border: none; border-left: 2px solid transparent; margin-left: -1.5px; color: var(--bb-fg-muted); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; transition: color 150ms, border-color 150ms; } .bb-faq-content__nav-item:hover { color: var(--bb-fg-strong); } .bb-faq-content__nav-item.is-active { color: var(--bb-deep-black); font-weight: 600; border-left-color: var(--bb-terracotta); } .bb-faq-content__nav-count { font-size: 12px; color: var(--bb-fg-muted); font-weight: 500; } /* Accordion groups */ .bb-faq-content__main { display: flex; flex-direction: column; gap: 80px; } .bb-faq-content__group { scroll-margin-top: 140px; } .bb-faq-content__group-title { margin: 0 0 28px; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.1; color: var(--bb-deep-black); } .bb-faq-content__items { border-bottom: 1px solid var(--bb-border); } .bb-faq-content__item { border-top: 1px solid var(--bb-border); } .bb-faq-content__row { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; } .bb-faq-content__row::-webkit-details-marker, .bb-faq-content__row::marker { display: none; content: ''; } .bb-faq-content__q { font-size: 18px; font-weight: 600; color: var(--bb-deep-black); letter-spacing: -0.01em; } .bb-faq-content__chevron { color: var(--bb-fg); display: inline-flex; flex-shrink: 0; transition: transform 200ms, color 200ms; } .bb-faq-content__item[open] .bb-faq-content__chevron { transform: rotate(45deg); color: var(--bb-terracotta); } .bb-faq-content__a { padding-bottom: 24px; max-width: 640px; } .bb-faq-content__a p { margin: 0; font-size: 16px; color: var(--bb-charcoal); line-height: 1.7; } /* Empty state */ .bb-faq-content__empty { padding: 64px 0; text-align: center; } .bb-faq-content__empty-title { font-size: 17px; color: var(--bb-charcoal); margin: 0 0 8px; } .bb-faq-content__empty-hint { font-size: 14px; color: var(--bb-fg-muted); margin: 0; } /* ----- FAQ Contact CTA ----- */ .bb-faq-cta { background: var(--bb-sand); padding: 96px 0; } .bb-faq-cta__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; } .bb-faq-cta__title { margin: 14px 0 18px; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-faq-cta__body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--bb-charcoal); max-width: 460px; } .bb-faq-cta__tiles { display: flex; flex-direction: column; gap: 14px; } .bb-faq-cta__tile { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: var(--bb-warm-white); border: 1px solid var(--bb-border); border-radius: 6px; text-decoration: none; color: var(--bb-fg-strong); transition: border-color 150ms, transform 150ms; } .bb-faq-cta__tile:hover { border-color: var(--bb-forest); transform: translateY(-1px); text-decoration: none; } .bb-faq-cta__tile-icon { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bb-faq-cta__tile--forest .bb-faq-cta__tile-icon { background: rgba(74, 103, 65, 0.12); color: var(--bb-forest); } .bb-faq-cta__tile--terracotta .bb-faq-cta__tile-icon { background: rgba(198, 123, 92, 0.14); color: var(--bb-terracotta); } .bb-faq-cta__tile-body { flex: 1; min-width: 0; } .bb-faq-cta__tile-label { font-size: 12px; color: var(--bb-fg-muted); letter-spacing: 0.04em; margin-bottom: 2px; } .bb-faq-cta__tile-value { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bb-faq-cta__tile-arrow { color: var(--bb-fg); display: inline-flex; flex-shrink: 0; transition: transform 200ms; } .bb-faq-cta__tile:hover .bb-faq-cta__tile-arrow { transform: translateX(3px); } /* ----- Responsive ----- */ @media (max-width: 1024px) { .bb-faq-hero { padding: 100px 0 48px; } .bb-faq-hero__inner { gap: 48px; } .bb-faq-content__grid { gap: 56px; grid-template-columns: 220px minmax(0, 1fr); } .bb-faq-cta__inner { gap: 48px; } } @media (max-width: 768px) { .bb-faq-hero { padding: 96px 0 32px; } .bb-faq-hero__inner { grid-template-columns: 1fr; gap: 24px; align-items: flex-start; } .bb-faq-hero__body { max-width: none; font-size: 16px; } .bb-faq-content { padding-bottom: 80px; } .bb-faq-content__search { margin-bottom: 32px; } .bb-faq-content__search-bar { padding-left: 16px; gap: 10px; } .bb-faq-content__search-count { padding: 0 12px; font-size: 12px; } .bb-faq-content__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .bb-faq-content__sidebar, .bb-faq-content__main { min-width: 0; } .bb-faq-content__sidebar { position: static; top: auto; margin-bottom: 24px; } .bb-faq-content__sidebar-label { margin-bottom: 10px; } .bb-faq-content__nav { border-left: none; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .bb-faq-content__nav::-webkit-scrollbar { display: none; } .bb-faq-content__nav-item { border-left: none; border-bottom: 2px solid transparent; margin-left: 0; padding: 14px 18px; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; } .bb-faq-content__nav-item.is-active { border-left-color: transparent; border-bottom-color: var(--bb-terracotta); } .bb-faq-content__main { gap: 56px; } .bb-faq-content__group-title { margin-bottom: 16px; } .bb-faq-content__row { padding: 18px 0; gap: 12px; } .bb-faq-content__q { font-size: 16px; } .bb-faq-content__a p { font-size: 15px; } .bb-faq-cta { padding: 64px 0 72px; } .bb-faq-cta__inner { grid-template-columns: 1fr; gap: 32px; align-items: flex-start; } .bb-faq-cta__body { max-width: none; } .bb-faq-cta__tile { padding: 18px; } } @media (max-width: 640px) { .bb-faq-hero { padding-top: 80px; } } @media (max-width: 480px) { .bb-faq-content__search-bar { flex-wrap: wrap; padding: 4px 4px 4px 14px; } .bb-faq-content__search-count { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--bb-border); padding: 8px 0 6px; justify-content: flex-start; } } /* ============================================================ CHECKOUT ============================================================ */ .bb-checkout { background: var(--bb-warm-white); padding-top: 80px; padding-bottom: 96px; } .bb-checkout--empty { text-align: center; padding-top: 96px; padding-bottom: 120px; } .bb-checkout--empty .bb-checkout__empty-title { margin: 14px 0 16px; font-size: 52px; letter-spacing: -0.025em; line-height: 1.05; color: var(--bb-deep-black); } .bb-checkout--empty .bb-checkout__empty-body { margin: 0 auto 28px; font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); max-width: 420px; } @media (max-width: 640px) { .bb-checkout--empty .bb-checkout__empty-title { font-size: 36px; } } .bb-checkout__header { margin-bottom: 24px; } .bb-checkout__title { margin: 14px 0 12px; font-size: clamp(40px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: var(--bb-deep-black); } .bb-checkout__intro { margin: 0; font-size: 17px; color: var(--bb-charcoal); max-width: 560px; line-height: 1.6; } .bb-checkout__form-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: flex-start; } .bb-checkout__form-left { display: flex; flex-direction: column; gap: 56px; } .bb-checkout__form-right { position: sticky; top: 100px; background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 28px; } @media (max-width: 1024px) { .bb-checkout__form-grid { grid-template-columns: 1fr; gap: 32px; } .bb-checkout__form-right { position: static; top: auto; order: -1; } } .bb-checkout__fieldset { border: 1px solid var(--bb-border); border-radius: 8px; padding: 24px 28px 28px; margin: 0; background: var(--bb-snow); } /* Stapnummers via CSS-counter: het verborgen factuuradres-fieldset (display:none) telt niet mee, dus de nummering springt nooit — en hernummert live wanneer de bezoeker het factuuradres openklapt. */ .bb-checkout__form { counter-reset: bb-step; } .bb-checkout__fieldset { counter-increment: bb-step; } .bb-checkout__legend-num::before { content: "stap " counter(bb-step, decimal-leading-zero); } /* Taalbewust: het woord "stap" zit in de CSS-counter (niet gettext-baar). Op de Duitse site () → "schritt". text-transform maakt er SCHRITT van. */ html[lang^="de"] .bb-checkout__legend-num::before { content: "schritt " counter(bb-step, decimal-leading-zero); } .bb-checkout__legend { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--bb-deep-black); margin: 0 0 24px; padding: 0; display: flex; align-items: baseline; gap: 12px; float: none; width: auto; } .bb-checkout__legend-num { font-size: 13px; font-weight: 600; color: var(--bb-forest); letter-spacing: 0.08em; text-transform: uppercase; } .bb-checkout__legend-hint { font-size: 13px; font-weight: 400; color: var(--bb-fg-muted); } .bb-checkout__field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .bb-checkout__field-grid .form-row { margin: 0; width: 100%; float: none; } .bb-checkout__field-grid .bb-checkout__field--wide, .bb-checkout__field-grid .form-row-wide { grid-column: span 2; } .bb-checkout__field-grid p.form-row-first, .bb-checkout__field-grid p.form-row-last, .woocommerce form .bb-checkout__field-grid .form-row-first, .woocommerce form .bb-checkout__field-grid .form-row-last { width: 100%; float: none; } .bb-checkout__field-grid label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.005em; } /* Verplicht-* en hint horen INLINE naast de labeltekst ("E-Mail-Adresse *", "Telefonnummer (optional …)"). Een eerdere flex-column-label zette elk kind op een eigen regel → losse asterisk. .required-span natuurlijk inline; hint via z'n eigen margin-left. */ .bb-checkout__field-grid label .required { white-space: nowrap; } .bb-checkout__label-hint { font-weight: 400; color: var(--bb-fg-muted); margin-left: 4px; font-size: 14px; } /* WC auto-injecteert .optional span achter non-required labels; wij hebben onze eigen hint */ .bb-checkout__field-grid label .optional { display: none; } .bb-checkout__field-grid input.input-text[type="text"], .bb-checkout__field-grid input.input-text[type="email"], .bb-checkout__field-grid input.input-text[type="tel"], .bb-checkout__field-grid input.input-text[type="password"], .bb-checkout__field-grid .form-row select, .bb-checkout__field-grid .form-row textarea.input-text { width: 100%; padding: 16px 18px; font-family: inherit; font-size: 16px !important; font-weight: 400; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; color: var(--bb-fg-strong); outline: none; transition: border-color 150ms, box-shadow 150ms; } .bb-checkout__field-grid input:focus, .bb-checkout__field-grid select:focus, .bb-checkout__field-grid textarea:focus { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74,103,65,0.10); } /* Select2 (WC's country dropdown widget) styling — match native inputs */ .bb-checkout__field-grid .select2-container--default .select2-selection--single { background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; height: auto; padding: 0; transition: border-color 150ms, box-shadow 150ms; font-family: inherit; } .bb-checkout__field-grid .select2-container .select2-selection--single .select2-selection__rendered { color: var(--bb-fg-strong); padding: 16px 40px 16px 18px; font-size: 16px; font-weight: 400; line-height: 1.2; } .bb-checkout__field-grid .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 14px; top: 0; } .bb-checkout__field-grid .select2-container--default.select2-container--open .select2-selection--single, .bb-checkout__field-grid .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74,103,65,0.10); } /* Dropdown panel (when open) */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--bb-forest); } .bb-checkout__field-grid .required { color: var(--bb-terracotta); margin-left: 4px; } .bb-checkout__field-grid .description { font-size: 12px; color: var(--bb-fg-muted); margin-top: 4px; font-weight: 400; } @media (max-width: 768px) { .bb-checkout__field-grid { grid-template-columns: 1fr; } .bb-checkout__field-grid .bb-checkout__field--wide, .bb-checkout__field-grid .form-row-wide, .bb-checkout__field-grid .form-row-first, .bb-checkout__field-grid .form-row-last { grid-column: span 1; } } .bb-checkout__toggle { display: flex; align-items: center; gap: 10px; margin-top: 18px; cursor: pointer; font-size: 14px; color: var(--bb-charcoal); } .bb-checkout__toggle input[type="checkbox"] { accent-color: var(--bb-forest); width: 16px; height: 16px; flex-shrink: 0; } .bb-checkout__fieldset--billing[hidden] { display: none; } /* Opmerking — ingeklapt tot toggle-link (zelfde patroon als de kortingscode), zodat het niet het visuele gewicht van een volwaardige stap krijgt. */ .bb-checkout__notes { border: 1px solid var(--bb-border); border-radius: 8px; background: var(--bb-snow); padding: 18px 28px; } .bb-checkout__notes-toggle { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: var(--bb-charcoal); } .bb-checkout__notes-toggle::-webkit-details-marker { display: none; } .bb-checkout__notes[open] .bb-checkout__notes-chev { transform: rotate(45deg); } .bb-checkout__notes-chev { transition: transform 150ms; font-size: 18px; line-height: 1; color: var(--bb-warm-grey); } .bb-checkout__notes-field { margin-top: 16px; } .bb-checkout__notes-field .form-row { margin: 0; padding: 0; } .bb-checkout__notes-field .form-row textarea.input-text { width: 100%; padding: 16px 18px; font-family: inherit; font-size: 16px; font-weight: 400; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; color: var(--bb-fg-strong); outline: none; transition: border-color 150ms, box-shadow 150ms; min-height: 84px; resize: vertical; line-height: 1.6; } .bb-checkout__notes-field .form-row textarea.input-text:focus { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74,103,65,0.10); } .bb-checkout__summary-title { margin: 0; font-size: 22px; letter-spacing: -0.015em; color: var(--bb-deep-black); } .bb-checkout__line-items { display: flex; flex-direction: column; gap: 16px; } .bb-checkout__line-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; } .bb-checkout__line-thumb { position: relative; width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--bb-sand); } .bb-checkout__line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-checkout__qty-badge { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 999px; background: var(--bb-charcoal); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .bb-checkout__line-name { font-size: 14px; font-weight: 600; color: var(--bb-deep-black); } .bb-checkout__line-variant { font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-checkout__line-price { font-size: 14px; font-weight: 600; color: var(--bb-deep-black); } .bb-checkout__line-price del { display: block; font-size: 12px; font-weight: 400; color: var(--bb-fg-muted); text-align: right; } .bb-checkout__totals { border-top: 1px solid var(--bb-border); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; } .bb-checkout__totals-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--bb-fg-muted); } .bb-checkout__totals-val { color: var(--bb-fg-strong); } .bb-checkout__totals-val--free { color: var(--bb-forest); font-weight: 600; } .bb-checkout__totals-row--coupon { color: var(--bb-forest); } .bb-checkout__totals-row--savings { color: var(--bb-forest); } .bb-checkout__totals-row--savings .bb-checkout__totals-val { color: var(--bb-forest); font-weight: 600; } .bb-checkout__coupon-code { background: var(--bb-sand); padding: 1px 6px; border-radius: 3px; font-size: 11px; } .bb-checkout__coupon-remove { margin-left: 8px; color: var(--bb-fg-muted); text-decoration: none; font-size: 12px; } .bb-checkout__totals-row--grand { align-items: baseline; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--bb-border); font-size: 15px; color: var(--bb-deep-black); font-weight: 600; } .bb-checkout__totals-grand { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--bb-deep-black); } .bb-checkout__totals-note { font-size: 11px; color: var(--bb-fg-muted); text-align: right; } /* Finish-block onder de form-grid: bevat STAP 05/06 + plaats-bestelling. Width align op form-left zodat het visueel onder de invul-stappen ligt. */ .bb-checkout__finish { margin-top: 48px; max-width: 640px; display: flex; flex-direction: column; gap: 32px; } @media (max-width: 1024px) { .bb-checkout__finish { margin-top: 32px; max-width: 100%; gap: 24px; } } .bb-checkout__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; } .bb-checkout__legal-note { margin: -16px 0 0; font-size: 13px; line-height: 1.6; color: var(--bb-fg-muted); text-align: center; } .bb-checkout__legal-note a { color: var(--bb-charcoal); text-decoration: underline; text-underline-offset: 2px; } .bb-checkout__security { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--bb-fg-muted); margin-top: -16px; } .bb-checkout__coupon { border-top: 1px solid var(--bb-border); padding-top: 16px; } .bb-checkout__coupon-toggle { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--bb-fg-muted); } .bb-checkout__coupon-toggle::-webkit-details-marker { display: none; } .bb-checkout__coupon[open] .bb-checkout__coupon-chev { transform: rotate(45deg); } .bb-checkout__coupon-chev { transition: transform 150ms; font-size: 18px; line-height: 1; color: var(--bb-warm-grey); } .bb-checkout__coupon-form { display: flex; gap: 8px; margin-top: 12px; } .bb-checkout__coupon-form input[type="text"] { flex: 1; padding: 10px 12px; font-family: inherit; font-size: 14px; border: 1.5px solid var(--bb-border); border-radius: 4px; background: var(--bb-warm-white); } .bb-checkout__coupon-form button { padding: 10px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; } .bb-checkout__coupon-msg { margin-top: 8px; font-size: 12px; } .bb-checkout__coupon-msg.is-error { color: var(--bb-terracotta); } .bb-checkout__coupon-msg.is-success { color: var(--bb-forest); } /* Risk reversal onder het totaal in de samenvatting. */ .bb-checkout__assurance { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--bb-border); display: flex; flex-direction: column; gap: 10px; } .bb-checkout__assurance li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bb-charcoal); } .bb-checkout__assurance svg { color: var(--bb-forest); flex-shrink: 0; } .bb-checkout__payment-title { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bb-warm-grey); } .bb-checkout__payment-empty { font-size: 13px; color: var(--bb-fg-muted); background: var(--bb-sand); padding: 12px; border-radius: 4px; } .bb-checkout__payment-list { display: flex; flex-direction: column; gap: 10px; } .bb-checkout__payment-card { display: block; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; padding: 14px 16px; cursor: pointer; transition: border-color 150ms; position: relative; } .bb-checkout__payment-card.is-active { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74,103,65,0.10); } .bb-checkout__payment-card input[type="radio"] { accent-color: var(--bb-forest); width: 16px; height: 16px; vertical-align: middle; margin-right: 12px; } .bb-checkout__payment-label { display: inline-block; font-size: 14px; font-weight: 600; color: var(--bb-deep-black); vertical-align: middle; } .bb-checkout__payment-icon { float: right; margin-top: 2px; } .bb-checkout__payment-icon img { max-height: 18px; width: auto; } .bb-checkout__payment-fields { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bb-border); font-size: 13px; color: var(--bb-charcoal); line-height: 1.55; } /* Verzendmethode-blok — radio-cards, gespiegeld op de payment-cards. */ .bb-checkout__shipping-methods { display: flex; flex-direction: column; gap: 10px; } .bb-checkout__shipping-card { display: flex; align-items: center; gap: 12px; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; padding: 14px 16px; cursor: pointer; transition: border-color 150ms; } .bb-checkout__shipping-card.is-active { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74,103,65,0.10); } .bb-checkout__shipping-card input[type="radio"] { accent-color: var(--bb-forest); width: 16px; height: 16px; margin: 0; flex: none; } .bb-checkout__shipping-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .bb-checkout__shipping-label { font-size: 14px; font-weight: 600; color: var(--bb-deep-black); } .bb-checkout__shipping-desc { font-size: 12px; font-weight: 400; color: var(--bb-charcoal); } .bb-checkout__shipping-cost { flex: none; font-size: 14px; font-weight: 600; color: var(--bb-deep-black); } .bb-checkout__shipping-cost--free { color: var(--bb-forest); } .bb-checkout__shipping-empty { font-size: 13px; color: var(--bb-charcoal); background: var(--bb-sand); padding: 12px; border-radius: 4px; margin: 0; } .bb-checkout__consents { display: flex; flex-direction: column; gap: 12px; } .bb-checkout__consent-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--bb-charcoal); line-height: 1.55; } .bb-checkout__consent-item input[type="checkbox"] { accent-color: var(--bb-forest); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; } .bb-checkout__consent-item a { color: var(--bb-link, var(--bb-forest)); text-decoration: underline; text-underline-offset: 3px; } .bb-checkout__consent-sub { color: var(--bb-fg-muted); font-weight: 400; } .bb-checkout__create-account-fields { margin-top: 12px; } .bb-checkout__create-account-fields label { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.005em; } .bb-checkout__create-account-fields input[type="password"] { width: 100%; box-sizing: border-box; padding: 16px 18px; font-family: inherit; font-size: 16px !important; font-weight: 400; line-height: 1.2; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; color: var(--bb-fg-strong); outline: none; transition: border-color 150ms, box-shadow 150ms; } .bb-checkout__create-account-fields input[type="password"]:focus { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74,103,65,0.10); } .bb-checkout__summary-mobile { display: none; } @media (max-width: 1024px) { .bb-checkout__summary-mobile { display: block; margin-bottom: 16px; } .bb-checkout__form-right > :not(.bb-checkout__summary-mobile) { display: none; } .bb-checkout__form-right.is-open > * { display: block; } .bb-checkout__form-right.is-open .bb-checkout__line-items, .bb-checkout__form-right.is-open .bb-checkout__totals, .bb-checkout__form-right.is-open .bb-checkout__payment-list { display: flex; } .bb-checkout__form-right.is-open .bb-checkout__consents { display: flex; } .bb-checkout__form-right.is-open .bb-checkout__submit { display: inline-flex; } .bb-checkout__form-right.is-open .bb-checkout__security { display: flex; } .bb-checkout__form-right.is-open .bb-checkout__summary-mobile { margin-bottom: 24px; } .bb-checkout__summary-mobile-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--bb-deep-black); cursor: pointer; } .bb-checkout__summary-mobile-chev { transition: transform 150ms; font-size: 18px; } .bb-checkout__form-right.is-open .bb-checkout__summary-mobile-chev { transform: rotate(180deg); } } /* ============================================================ ORDER RECEIVED (thank-you) ============================================================ */ .bb-eyebrow--terracotta { color: var(--bb-terracotta) !important; } .bb-eyebrow--cream { color: #C9B58F !important; } .bb-order-received { background: var(--bb-warm-white); padding-top: 96px; padding-bottom: 80px; } /* Hero */ .bb-order-received__hero { max-width: 720px; margin: 0 auto; text-align: center; } .bb-order-received__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--bb-forest); color: #fff; margin: 0 auto 12px; } .bb-order-received__title { margin: 12px 0 16px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bb-deep-black); } .bb-order-received__intro { margin: 0 auto 28px; font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); max-width: 560px; } .bb-order-received__stats { display: inline-flex; align-items: stretch; gap: 0; padding: 0; background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 8px; flex-wrap: wrap; justify-content: center; overflow: hidden; } .bb-order-received__stats > div:not(.bb-order-received__stats-divider) { padding: 14px 28px; text-align: left; } .bb-order-received__stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-fg-muted); } .bb-order-received__stat-val { font-size: 16px; font-weight: 600; color: var(--bb-deep-black); margin-top: 4px; } .bb-order-received__stats-divider { width: 1px; background: var(--bb-border); align-self: stretch; } /* Progress tracker */ .bb-order-tracker { margin: 56px 0 0; background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 12px; padding: 28px 32px; } .bb-order-tracker .bb-eyebrow { display: block; margin-bottom: 24px; } .bb-order-tracker__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .bb-order-tracker__step { position: relative; text-align: center; padding-top: 56px; } .bb-order-tracker__step::before { content: ''; position: absolute; top: 23px; left: 50%; right: -50%; height: 2px; background: var(--bb-border); z-index: 0; } .bb-order-tracker__step:last-child::before { display: none; } .bb-order-tracker__step.is-done::before { background: var(--bb-forest); } .bb-order-tracker__node { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bb-snow); border: 2px solid var(--bb-border); color: var(--bb-fg-muted); z-index: 1; } .bb-order-tracker__step.is-done .bb-order-tracker__node { background: var(--bb-forest); border-color: var(--bb-forest); color: #fff; } .bb-order-tracker__step.is-active .bb-order-tracker__node { background: var(--bb-snow); border-color: var(--bb-forest); color: var(--bb-forest); } .bb-order-tracker__title { font-size: 14px; font-weight: 700; color: var(--bb-deep-black); margin-bottom: 4px; } .bb-order-tracker__step.is-active .bb-order-tracker__title { color: var(--bb-deep-black); } .bb-order-tracker__step:not(.is-done):not(.is-active) .bb-order-tracker__title { color: var(--bb-fg-muted); } .bb-order-tracker__sub { font-size: 13px; color: var(--bb-fg-muted); } .bb-order-tracker__step.is-active .bb-order-tracker__sub { color: var(--bb-forest); font-weight: 600; } /* Order details — 2-col grid */ .bb-order-received__details-grid { margin: 24px 0 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: flex-start; } .bb-order-received__side { display: flex; flex-direction: column; gap: 20px; } .bb-order-received__card { background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 10px; padding: 22px 24px; } .bb-order-received__card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.005em; } .bb-order-received__card-title svg { color: var(--bb-forest); } .bb-order-received__card p { margin: 0; font-size: 14px; color: var(--bb-charcoal); line-height: 1.55; } .bb-order-received__card p a { color: var(--bb-link, var(--bb-forest)); text-decoration: underline; text-underline-offset: 3px; } /* Order summary card */ .bb-order-summary__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } .bb-order-summary__head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--bb-deep-black); } .bb-order-summary__count { font-size: 12px; color: var(--bb-fg-muted); } .bb-order-summary__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--bb-border); } .bb-order-summary__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; } .bb-order-summary__item img, .bb-order-summary__thumb-placeholder { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--bb-sand); } .bb-order-summary__item-name { font-size: 14px; font-weight: 600; color: var(--bb-deep-black); } .bb-order-summary__item-variant { font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-order-summary__item-price { font-size: 14px; font-weight: 600; color: var(--bb-deep-black); } .bb-order-summary__totals { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .bb-order-summary__totals > div { display: flex; justify-content: space-between; color: var(--bb-fg-muted); } .bb-order-summary__grand { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--bb-border); align-items: baseline !important; color: var(--bb-deep-black) !important; font-size: 14px; } .bb-order-summary__grand strong { font-size: 22px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.02em; display: block; text-align: right; } .bb-order-summary__grand em { font-size: 11px; font-style: normal; color: var(--bb-fg-muted); display: block; text-align: right; margin-top: 2px; } /* Side card variations */ .bb-order-received__address { font-style: normal; font-size: 14px; line-height: 1.55; color: var(--bb-fg-strong); margin: 0; } .bb-order-received__card-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bb-border); font-size: 13px; color: var(--bb-fg-muted); } .bb-order-received__card-foot svg { color: var(--bb-fg-muted); } .bb-order-received__payment { font-size: 14px; color: var(--bb-charcoal); } .bb-order-received__payment strong { display: block; font-size: 14px; font-weight: 700; color: var(--bb-deep-black); margin-bottom: 4px; } .bb-order-received__payment-status { color: var(--bb-forest); font-weight: 600; } /* Tips section */ .bb-order-tips { background: var(--bb-sand); padding: 80px 0; } .bb-order-tips__head { max-width: 720px; } .bb-order-tips__title { margin: 12px 0 14px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--bb-deep-black); } .bb-order-tips__intro { margin: 0; font-size: 16px; color: var(--bb-charcoal); line-height: 1.55; max-width: 520px; } .bb-order-tips__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .bb-order-tips__card { background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 10px; padding: 24px 24px 28px; } .bb-order-tips__num { display: inline-block; font-size: 12px; font-weight: 600; color: var(--bb-warm-grey); letter-spacing: 0.08em; margin-bottom: 16px; } .bb-order-tips__card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.015em; line-height: 1.2; } .bb-order-tips__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bb-charcoal); } .bb-order-tips__cta-row { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } /* Trust strip */ .bb-order-trust { background: var(--bb-warm-white); padding: 32px 0; border-top: 1px solid var(--bb-border); } .bb-order-trust__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .bb-order-trust__list li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--bb-charcoal); } .bb-order-trust__list svg { color: var(--bb-forest); flex-shrink: 0; } @media (max-width: 880px) { .bb-order-tracker__steps { grid-template-columns: 1fr; gap: 14px; } .bb-order-tracker__step { padding: 0 0 0 64px; text-align: left; } .bb-order-tracker__node { top: 0; left: 0; transform: none; } .bb-order-tracker__step::before { top: 48px; bottom: -14px; left: 23px; right: auto; width: 2px; height: auto; } .bb-order-tracker__step:last-child::before { display: none; } .bb-order-received__details-grid { grid-template-columns: 1fr; } .bb-order-tips__grid { grid-template-columns: 1fr; } .bb-order-trust__list { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .bb-order-received__title { font-size: 32px; } .bb-order-received__stats { flex-direction: column; } .bb-order-received__stats-divider { display: none; width: auto; height: 1px; } } /* ============================================================ CONTACT PAGE — /contact/ Geport uit ui_kits/website/ContactPage.jsx. 3 secties: hero, main (channels + CF7 form), info-strip. ============================================================ */ /* ----- 1. Contact Hero ----- */ .bb-contact-hero { background: var(--bb-warm-white); padding: 120px 0 64px; } .bb-contact-hero__inner { max-width: 820px; } .bb-contact-hero__title { margin: 18px 0 24px; font-size: clamp(56px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.035em; color: var(--bb-deep-black); font-weight: 600; } .bb-contact-hero__intro { margin: 0; font-size: 20px; line-height: 1.5; color: var(--bb-charcoal); max-width: 560px; } @media (max-width: 768px) { .bb-contact-hero { padding: 96px 0 48px; } .bb-contact-hero__intro { font-size: 18px; } } @media (max-width: 640px) { .bb-contact-hero { padding: 80px 0 40px; } } /* ----- 2. Contact Main — 2-col channels + CF7 form ----- */ .bb-contact-main { background: var(--bb-warm-white); padding-bottom: 120px; } .bb-contact-main__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 96px; align-items: flex-start; } .bb-contact-main__h2 { margin: 14px 0 28px; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bb-deep-black); font-weight: 600; } /* Contact tiles (direct channels) */ .bb-contact-tiles { display: flex; flex-direction: column; gap: 14px; } .bb-contact-tile { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 6px; text-decoration: none; color: var(--bb-fg-strong); transition: border-color 150ms ease, transform 150ms ease; } .bb-contact-tile:hover { border-color: var(--bb-forest); transform: translateY(-1px); text-decoration: none; } .bb-contact-tile__icon { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .bb-contact-tile--forest .bb-contact-tile__icon { background: rgba(74, 103, 65, 0.12); color: var(--bb-forest); } .bb-contact-tile--terracotta .bb-contact-tile__icon { background: rgba(198, 123, 92, 0.14); color: var(--bb-terracotta); } .bb-contact-tile--sage .bb-contact-tile__icon { background: rgba(139, 158, 124, 0.18); color: var(--bb-forest); } .bb-contact-tile__label { font-size: 12px; color: var(--bb-fg-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; } .bb-contact-tile__value { font-size: 15px; font-weight: 600; } .bb-contact-tile__meta { font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-contact-tile__arrow { color: var(--bb-fg-muted); transition: color 150ms ease, transform 150ms ease; } .bb-contact-tile:hover .bb-contact-tile__arrow { color: var(--bb-forest); transform: translateX(2px); } /* Quicklinks naar FAQ */ .bb-contact-main__quicklinks { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--bb-border); } .bb-contact-main__quicklinks-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-warm-grey); margin-bottom: 16px; } .bb-contact-main__quicklinks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .bb-contact-main__quicklinks-list a { color: var(--bb-link); font-size: 14px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: baseline; gap: 6px; } .bb-contact-main__quicklinks-arrow { display: inline-flex; align-items: center; vertical-align: middle; transition: transform 150ms ease; } .bb-contact-main__quicklinks-list a:hover .bb-contact-main__quicklinks-arrow { transform: translateX(2px); } /* Form card */ .bb-contact-card { background: var(--bb-warm-white); border: 1px solid var(--bb-border); border-radius: 8px; padding: 48px; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04); position: relative; } .bb-contact-card__h2 { margin: 14px 0 28px; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bb-deep-black); font-weight: 600; } .bb-contact-card__missing { margin: 0; padding: 16px 20px; background: rgba(198, 123, 92, 0.08); border: 1px dashed var(--bb-terracotta); border-radius: 4px; font-size: 14px; color: var(--bb-charcoal); } .bb-contact-card__missing code { background: rgba(26, 26, 26, 0.06); padding: 1px 6px; border-radius: 3px; font-size: 13px; } /* CF7 form-styling (alleen binnen .bb-contact-card) */ .bb-contact-card .wpcf7-form { display: flex; flex-direction: column; gap: 20px; } /* CF7 6.x bundelt de verborgen velden in
    . Een fieldset heeft een browser-default rand → als flex-child gaf dat een lege omlijnde box boven het formulier. Verbergen mag: hidden inputs versturen ook met display:none. */ .bb-contact-card .wpcf7-form .hidden-fields-container { display: none; } .bb-contact-card .wpcf7 form .bb-cf7-row, .bb-contact-card form > p { margin: 0; } .bb-contact-card .bb-cf7-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bb-contact-card label { display: block; font-size: 13px; font-weight: 500; color: var(--bb-fg-strong); } .bb-contact-card label > .wpcf7-form-control-wrap, .bb-contact-card label > input, .bb-contact-card label > select, .bb-contact-card label > textarea { margin-top: 8px; } .bb-contact-card input[type="text"], .bb-contact-card input[type="email"], .bb-contact-card input[type="tel"], .bb-contact-card select, .bb-contact-card textarea { width: 100%; padding: 14px 16px; font-family: inherit; font-size: 15px; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 4px; color: var(--bb-fg-strong); transition: border-color 150ms ease, box-shadow 150ms ease; outline: none; box-sizing: border-box; } .bb-contact-card input[type="text"]:focus, .bb-contact-card input[type="email"]:focus, .bb-contact-card input[type="tel"]:focus, .bb-contact-card select:focus, .bb-contact-card textarea:focus { border-color: var(--bb-forest); box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.14); } .bb-contact-card textarea { resize: vertical; min-height: 140px; line-height: 1.6; } /* Custom chevron op select */ .bb-contact-card select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .bb-contact-card .bb-cf7-optional { color: var(--bb-fg-muted); font-weight: 400; } .bb-contact-card .bb-cf7-consent { margin: 4px 0 0; font-size: 12px; color: var(--bb-fg-muted); line-height: 1.55; } .bb-contact-card .bb-cf7-consent a { color: var(--bb-link); text-decoration: underline; text-underline-offset: 3px; } .bb-contact-card .bb-cf7-submit-row { display: flex; align-items: center; gap: 16px; margin-top: 4px; flex-wrap: wrap; } .bb-contact-card .bb-cf7-reply-meta { font-size: 13px; color: var(--bb-fg-muted); } /* CF7 validation states */ .bb-contact-card .wpcf7-not-valid { border-color: #c4543b !important; } .bb-contact-card .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; color: #c4543b; } /* We tonen success/error via eigen overlay → CF7's response-output verbergen */ .bb-contact-card .wpcf7-response-output { display: none; } /* Spinner subtieler maken */ .bb-contact-card .wpcf7-spinner { background-color: var(--bb-forest); } /* Success overlay */ .bb-contact-success { position: absolute; inset: 0; background: rgba(250, 248, 245, 0.96); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 220ms ease; z-index: 5; } .bb-contact-card.is-sent .bb-contact-success { opacity: 1; pointer-events: auto; } .bb-contact-success__icon { width: 64px; height: 64px; border-radius: 999px; background: rgba(74, 103, 65, 0.16); color: var(--bb-forest); display: inline-flex; align-items: center; justify-content: center; } .bb-contact-success__title { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.02em; color: var(--bb-deep-black); font-weight: 600; } .bb-contact-success__body { margin: 0; font-size: 15px; color: var(--bb-charcoal); max-width: 360px; line-height: 1.6; } /* Mobile stack — form-card eerst */ @media (max-width: 1240px) { .bb-contact-main__grid { gap: 64px; } } @media (max-width: 1024px) { .bb-contact-main__grid { grid-template-columns: 1fr; gap: 56px; } .bb-contact-card { order: -1; } } @media (max-width: 640px) { .bb-contact-main { padding-bottom: 80px; } .bb-contact-main__grid { gap: 40px; } .bb-contact-card { padding: 32px 24px; } .bb-contact-card .bb-cf7-row--2col { grid-template-columns: 1fr; } .bb-contact-success { padding: 28px; } .bb-contact-success__title { font-size: 22px; } } /* ----- 3. Contact Info — zand-strip ----- */ .bb-contact-info { background: var(--bb-sand); padding: 72px 0; } .bb-contact-info__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .bb-contact-info__col { min-width: 0; } .bb-contact-info__icon { width: 40px; height: 40px; border-radius: 999px; background: rgba(139, 158, 124, 0.18); color: var(--bb-forest); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .bb-contact-info__label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-warm-grey); margin-bottom: 8px; } .bb-contact-info__lines { font-size: 14px; line-height: 1.7; color: var(--bb-fg-strong); } @media (max-width: 1024px) { .bb-contact-info__grid { grid-template-columns: repeat(2, 1fr); gap: 48px; } } @media (max-width: 640px) { .bb-contact-info { padding: 56px 0; } .bb-contact-info__grid { grid-template-columns: 1fr; gap: 36px; } } /* ============================================================ Content pagina — generieke layout voor verzending, AV, privacy, cookies en andere tekst-zware info-pagina's. 1-op-1 port van ui_kits/website/LegalPage.jsx. ============================================================ */ /* ----- Content hero ----- */ .bb-content-hero { background: var(--bb-warm-white); padding-top: 120px; padding-bottom: 48px; } @media (max-width: 1024px) { .bb-content-hero { padding-top: 100px; } } .bb-content-hero__inner { max-width: 820px; } .bb-content-hero__title { margin: 18px 0 24px; font-size: 72px; line-height: 1.0; letter-spacing: -0.03em; color: var(--bb-deep-black); font-weight: 700; } .bb-content-hero__intro { margin: 0; font-size: 19px; line-height: 1.55; color: var(--bb-charcoal); max-width: 620px; } .bb-content-hero__meta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .bb-content-hero__updated { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-fg-muted); } .bb-content-hero__updated-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bb-sage); } .bb-content-hero__download { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--bb-charcoal); text-decoration: none; border: 1.5px solid var(--bb-border); border-radius: 999px; transition: border-color 150ms, color 150ms; } .bb-content-hero__download:hover { border-color: var(--bb-charcoal); color: var(--bb-deep-black); } /* ----- Content body: TOC + prose ----- */ .bb-content-body { background: var(--bb-warm-white); padding-top: 32px; padding-bottom: 112px; } .bb-content-body__grid { display: grid; grid-template-columns: 260px 1fr; gap: 96px; align-items: flex-start; } .bb-content-body__toc { position: sticky; top: 120px; align-self: flex-start; } .bb-content-body__toc-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-warm-grey); margin-bottom: 16px; } .bb-content-body__toc-hint { font-size: 13px; color: var(--bb-fg-muted); line-height: 1.5; margin: 0; font-style: italic; } .bb-content-body__toc-nav { display: flex; flex-direction: column; border-left: 1px solid var(--bb-border); } .bb-content-body__toc-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: transparent; border: 0; border-left: 2px solid transparent; margin-left: -1.5px; color: var(--bb-fg-muted); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; text-decoration: none; transition: color 150ms; } .bb-content-body__toc-item:hover { color: var(--bb-fg-strong); text-decoration: none; } .bb-content-body__toc-item.is-active { border-left-color: var(--bb-terracotta); color: var(--bb-deep-black); font-weight: 600; } .bb-content-body__toc-num { font-size: 11px; color: var(--bb-warm-grey); width: 18px; flex-shrink: 0; } .bb-content-body__toc-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bb-border); display: flex; flex-direction: column; gap: 12px; font-size: 13px; } .bb-content-body__toc-action { background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--bb-link); text-decoration: underline; text-underline-offset: 4px; padding: 0; } .bb-content-body__toc-action:hover { color: var(--bb-link-hover); } /* Prose column */ .bb-content-body__prose { max-width: 720px; } /* ----- Content section ----- */ .bb-content-section { margin-bottom: 72px; scroll-margin-top: 120px; } .bb-content-section:last-child { margin-bottom: 0; } .bb-content-section__title { margin: 0 0 18px; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bb-deep-black); font-weight: 700; } .bb-content-section__body > * + * { margin-top: 0; } .bb-content-section__body p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; color: var(--bb-charcoal); } .bb-content-section__body h3 { margin: 32px 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--bb-deep-black); line-height: 1.3; } /* Lijsten — core/list */ .bb-content-section__body > ul, .bb-content-section__body > ol { margin: 0 0 18px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .bb-content-section__body > ul > li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.65; color: var(--bb-charcoal); } .bb-content-section__body > ul > li::before { content: ""; display: block; width: 16px; height: 16px; margin-top: 4px; background-color: var(--bb-forest); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .bb-content-section__body > ol { counter-reset: bb-content-step; gap: 12px; } .bb-content-section__body > ol > li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.65; color: var(--bb-charcoal); counter-increment: bb-content-step; } .bb-content-section__body > ol > li::before { content: counter(bb-content-step); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--bb-sand); color: var(--bb-fg-strong); font-size: 12px; font-weight: 700; margin-top: 1px; } /* Geneste sub-lijsten (bv. een rauwe
      binnen een wp:list-item): native styling met disc-bullets en kleine inspring. Verergert niet de buitenste grid-kolom. */ .bb-content-section__body li ul, .bb-content-section__body li ol { display: block; margin: 8px 0 4px; padding-left: 22px; list-style: disc outside; gap: 0; } .bb-content-section__body li ol { list-style: decimal outside; } .bb-content-section__body li ul li, .bb-content-section__body li ol li { display: list-item; grid-template-columns: none; padding: 0; margin: 4px 0; font-size: 15px; color: var(--bb-charcoal); } .bb-content-section__body li ul li::before, .bb-content-section__body li ol li::before { content: none; display: none; } /* Tabellen */ .bb-content-section__body figure.wp-block-table, .bb-content-section__body table { margin: 20px 0 24px; } .bb-content-section__body figure.wp-block-table { border: 1px solid var(--bb-border); border-radius: 4px; overflow: hidden; } .bb-content-section__body figure.wp-block-table table, .bb-content-section__body table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; } .bb-content-section__body thead tr { background: var(--bb-snow); } .bb-content-section__body th { text-align: left; padding: 14px 18px; font-weight: 600; color: var(--bb-deep-black); border-bottom: 1px solid var(--bb-border); font-size: 13px; letter-spacing: 0.01em; } .bb-content-section__body td { padding: 14px 18px; color: var(--bb-charcoal); border-top: 1px solid var(--bb-border); font-size: 14px; line-height: 1.55; } .bb-content-section__body tbody tr:first-child td { border-top: 0; } /* Quote/cite */ .bb-content-section__body blockquote { margin: 20px 0; padding: 0 0 0 20px; border-left: 3px solid var(--bb-sage); font-style: italic; color: var(--bb-charcoal); } /* Links binnen prose */ .bb-content-section__body a { color: var(--bb-link); text-decoration: underline; text-underline-offset: 3px; } .bb-content-section__body a:hover { color: var(--bb-link-hover); } /* ----- Content callout ----- */ .bb-content-callout { margin: 20px 0; padding: 20px 22px; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: flex-start; border-radius: 0 4px 4px 0; } .bb-content-callout--default { background: var(--bb-sand); border-left: 3px solid var(--bb-terracotta); } .bb-content-callout--default .bb-content-callout__icon { color: var(--bb-terracotta); margin-top: 2px; } .bb-content-callout--warning { background: rgba(212, 160, 74, 0.12); border-left: 3px solid var(--bb-warning); } .bb-content-callout--warning .bb-content-callout__icon { color: var(--bb-warning); margin-top: 2px; } .bb-content-callout__title { display: block; font-size: 13px; font-weight: 600; color: var(--bb-deep-black); margin-bottom: 4px; } .bb-content-callout__text { font-size: 14.5px; line-height: 1.65; color: var(--bb-charcoal); } .bb-content-callout__text p { margin: 0 0 8px; } .bb-content-callout__text p:last-child { margin-bottom: 0; } /* ----- Support CTA ----- */ .bb-content-support { background: var(--bb-sand); padding-top: 80px; padding-bottom: 80px; } .bb-content-support__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; } .bb-content-support__title { margin: 14px 0 16px; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bb-deep-black); font-weight: 700; } .bb-content-support__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--bb-charcoal); max-width: 420px; } .bb-content-support__buttons { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; } .bb-content-support__related-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-warm-grey); margin-bottom: 16px; } .bb-content-support__related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .bb-content-support__related-card { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--bb-warm-white); border: 1px solid var(--bb-border); border-radius: 6px; text-decoration: none; color: var(--bb-fg-strong); transition: border-color 150ms, transform 150ms; } .bb-content-support__related-card:hover { border-color: var(--bb-forest); text-decoration: none; color: var(--bb-fg-strong); } .bb-content-support__related-card-label { font-size: 14px; font-weight: 600; } .bb-content-support__related-card-arrow { color: var(--bb-warm-grey); transition: color 150ms, transform 150ms; } .bb-content-support__related-card:hover .bb-content-support__related-card-arrow { color: var(--bb-forest); transform: translateX(2px); } /* ----- Mobile / tablet ----- */ @media (max-width: 1024px) { .bb-content-body__grid { gap: 64px; } .bb-content-support__grid { gap: 56px; } } @media (max-width: 860px) { .bb-content-hero { padding-top: 96px; padding-bottom: 36px; } .bb-content-hero__title { font-size: 56px; } .bb-content-body__grid { grid-template-columns: 1fr; gap: 32px; } .bb-content-body__toc { position: static; padding: 20px 0; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); } .bb-content-body__toc-actions { display: none; } .bb-content-support__grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 768px) { .bb-content-hero__title { font-size: 48px; } .bb-content-hero__intro { font-size: 17px; } .bb-content-section { margin-bottom: 56px; } .bb-content-section__title { font-size: 26px; } .bb-content-section__body figure.wp-block-table { overflow-x: auto; } } @media (max-width: 480px) { .bb-content-hero { padding-top: 80px; } .bb-content-hero__title { font-size: 36px; } .bb-content-section__title { font-size: 22px; } .bb-content-support__related-grid { grid-template-columns: 1fr; } .bb-content-callout { padding: 16px 18px; grid-template-columns: 20px 1fr; gap: 10px; } } /* ----- Print ----- */ @media print { .bb-content-body__toc, .bb-content-support, .bb-nav, .bb-footer { display: none !important; } .bb-content-body__grid { grid-template-columns: 1fr; } .bb-content-section { page-break-inside: avoid; } .bb-content-hero { padding-top: 0; } } /* ============================================================ Shop page — /shop/ Geport uit ui_kits/website/ShopPage.jsx. Sections: shop-hero, shop-coll(ection), shop-sf (size finder), shop-why (three sizes). Achtergrond is bb-warm-white (default body). ============================================================ */ /* ----- Shop Hero ----- */ .bb-shop-hero { padding: 120px 0 56px; background: var(--bb-warm-white); } .bb-shop-hero__crumbs { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: 13px; color: var(--bb-fg-muted); margin-bottom: 36px; } .bb-shop-hero__crumbs a { color: inherit; text-decoration: none; } .bb-shop-hero__crumbs a:hover { color: var(--bb-fg); text-decoration: underline; text-underline-offset: 3px; } .bb-shop-hero__crumb-sep { color: var(--bb-stone); } .bb-shop-hero__crumb-current { color: var(--bb-fg); } .bb-shop-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: flex-end; } .bb-shop-hero__lead .bb-eyebrow { margin-bottom: 16px; } .bb-shop-hero__title { margin: 0; font-size: 84px; line-height: 0.98; letter-spacing: -0.035em; color: var(--bb-deep-black); font-weight: 700; text-wrap: balance; } .bb-shop-hero__body { margin: 0; padding-bottom: 14px; font-size: 18px; line-height: 1.6; color: var(--bb-charcoal); max-width: 460px; letter-spacing: -0.005em; } @media (max-width: 1024px) { .bb-shop-hero { padding-top: 100px; } } @media (max-width: 960px) { .bb-shop-hero { padding-bottom: 40px; } .bb-shop-hero__inner { grid-template-columns: 1fr; gap: 24px; align-items: stretch; } .bb-shop-hero__title { font-size: 56px; } .bb-shop-hero__body { padding-bottom: 0; font-size: 17px; } } @media (max-width: 768px) { .bb-shop-hero { padding-top: 96px; } } @media (max-width: 640px) { .bb-shop-hero { padding: 80px 0 32px; } .bb-shop-hero__title { font-size: 40px; letter-spacing: -0.025em; } .bb-shop-hero__body { font-size: 16px; } } /* ----- Shop Collection — filter / sort / grid ----- */ .bb-shop-coll { padding: 0 0 96px; background: var(--bb-warm-white); } .bb-shop-coll__bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; gap: 18px; flex-wrap: wrap; background: var(--bb-snow); border: 1px solid var(--bb-border); border-radius: 8px; margin-bottom: 32px; } .bb-shop-coll__filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .bb-shop-coll__filters .bb-eyebrow { margin-right: 4px; } .bb-shop-coll__chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--bb-border); background: var(--bb-warm-white); color: var(--bb-fg-strong); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .bb-shop-coll__chip:hover { border-color: var(--bb-fg); } .bb-shop-coll__chip.is-active { background: var(--bb-deep-black); color: #fff; border-color: var(--bb-deep-black); } .bb-shop-coll__sort-wrap { display: flex; align-items: center; gap: 14px; } .bb-shop-coll__count { font-size: 13px; color: var(--bb-fg-muted); } .bb-shop-coll__sort { position: relative; } .bb-shop-coll__sort-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bb-warm-white); border: 1.5px solid var(--bb-border); border-radius: 6px; color: var(--bb-fg-strong); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 150ms ease; } .bb-shop-coll__sort-btn:hover { border-color: var(--bb-fg); } .bb-shop-coll__sort-btn strong { font-weight: 600; } .bb-shop-coll__sort-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--bb-warm-white); border: 1px solid var(--bb-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); padding: 4px; z-index: 10; } .bb-shop-coll__sort-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: 4px; background: transparent; border: none; font: inherit; font-size: 13px; color: var(--bb-fg-strong); cursor: pointer; text-align: left; } .bb-shop-coll__sort-item:hover { background: var(--bb-sand); } .bb-shop-coll__sort-item.is-active { background: var(--bb-snow); } .bb-shop-coll__sort-check { display: none; } .bb-shop-coll__sort-item.is-active .bb-shop-coll__sort-check { display: inline-flex; } /* Grid */ .bb-shop-coll__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } @media (max-width: 960px) { .bb-shop-coll__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .bb-shop-coll { padding-bottom: 72px; } .bb-shop-coll__bar { padding: 14px 16px; } .bb-shop-coll__grid { grid-template-columns: 1fr; gap: 28px; } } /* Card */ .bb-shop-coll__card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } /* Block global a:hover underline + sage color shift — card heeft eigen hover state (image swap, CTA gap/color). Anders krijgt 'Bekijken' een dubbele underline. */ .bb-shop-coll__card:hover { text-decoration: none; color: inherit; } .bb-shop-coll__card.is-hidden { display: none; } .bb-shop-coll__media > picture { display: contents; } .bb-shop-coll__media { position: relative; aspect-ratio: 4 / 5; background: var(--bb-sand); border-radius: 6px; overflow: hidden; margin-bottom: 18px; } .bb-shop-coll__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 350ms ease, transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .bb-shop-coll__img--hover { position: absolute; inset: 0; opacity: 0; } .bb-shop-coll__card:hover .bb-shop-coll__img--base { opacity: 0; } .bb-shop-coll__card:hover .bb-shop-coll__img--hover { opacity: 1; } .bb-shop-coll__card:hover .bb-shop-coll__img { transform: scale(1.03); } .bb-shop-coll__badge { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 10px; background: var(--bb-terracotta); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 4px; } .bb-shop-coll__card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .bb-shop-coll__card-title { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; color: var(--bb-deep-black); font-weight: 600; } .bb-shop-coll__card-price { font-size: 18px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .bb-shop-coll__card-meta { margin-top: 6px; font-size: 13px; color: var(--bb-fg-muted); } .bb-shop-coll__card-meta + .bb-shop-coll__card-meta { margin-top: 2px; } .bb-shop-coll__card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .bb-shop-coll__stock { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--bb-forest); } .bb-shop-coll__stock-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--bb-success); display: inline-block; } .bb-shop-coll__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--bb-fg-strong); font-size: 14px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap 200ms ease, color 150ms ease; } .bb-shop-coll__card:hover .bb-shop-coll__cta { gap: 14px; color: var(--bb-deep-black); } /* Mobile: horizontale cards — foto links, info rechts. Drie maten van hetzelfde product vergelijk je zo in één scherm i.p.v. drie schermen scrollen. Ná de basis-cardregels i.v.m. gelijke specificiteit. */ @media (max-width: 640px) { .bb-shop-coll__card { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 16px; } .bb-shop-coll__media { grid-row: 1 / -1; margin-bottom: 0; } .bb-shop-coll__badge { top: 8px; left: 8px; padding: 4px 7px; font-size: 9px; } .bb-shop-coll__card-head { flex-direction: column; align-items: flex-start; gap: 2px; } .bb-shop-coll__card-title { font-size: 17px; } .bb-shop-coll__card-price { font-size: 15px; } .bb-shop-coll__card-meta { font-size: 12.5px; } .bb-shop-coll__card-foot { align-self: end; margin-top: 10px; } .bb-shop-coll__cta { font-size: 13px; } } /* ----- Shop Size Finder ----- */ .bb-shop-sf { background: var(--bb-snow); border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); padding: 88px 0; } .bb-shop-sf__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; } .bb-shop-sf__lead .bb-eyebrow { margin-bottom: 14px; } .bb-shop-sf__title { margin: 0 0 18px; font-size: 40px; line-height: 1.1; letter-spacing: -0.028em; color: var(--bb-deep-black); font-weight: 700; text-wrap: balance; } .bb-shop-sf__body { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); max-width: 380px; } @media (max-width: 960px) { .bb-shop-sf { padding: 64px 0; } .bb-shop-sf__inner { grid-template-columns: 1fr; gap: 36px; } .bb-shop-sf__title { font-size: 32px; } } /* Size guide visual */ .bb-shop-sf__viz { position: relative; background: var(--bb-warm-white); border: 1px solid var(--bb-border); border-radius: 10px; padding: 28px 32px 24px; } .bb-shop-sf__viz-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 16px; } .bb-shop-sf__viz-title { font-size: 18px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.015em; margin-top: 4px; } .bb-shop-sf__viz-badge { padding: 4px 10px; border-radius: 999px; background: var(--bb-sand); color: var(--bb-charcoal); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .bb-shop-sf__svg { display: block; width: 100%; height: auto; } .bb-shop-sf__svg-label { font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--bb-forest); } .bb-shop-sf__ruler { position: relative; margin-top: 10px; margin-bottom: 26px; } .bb-shop-sf__ruler-bar { height: 4px; background: var(--bb-stone); border-radius: 999px; position: relative; } .bb-shop-sf__ruler-range { position: absolute; top: -3px; height: 10px; background: var(--bb-sage); border-radius: 999px; } .bb-shop-sf__ruler-range--s { left: 0; width: 33%; opacity: 0.55; } .bb-shop-sf__ruler-range--m { left: 33%; width: 34%; opacity: 1; } .bb-shop-sf__ruler-range--l { left: 67%; width: 33%; opacity: 0.75; } .bb-shop-sf__ruler-labels { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .bb-shop-sf__ruler-labels > div { text-align: center; } .bb-shop-sf__ruler-size { font-size: 14px; font-weight: 700; color: var(--bb-deep-black); } .bb-shop-sf__ruler-range-label { font-size: 13px; font-weight: 500; color: var(--bb-charcoal); margin-top: 4px; font-variant-numeric: tabular-nums; } /* ----- Shop Why Three Sizes ----- */ .bb-shop-why { padding: 96px 0; background: var(--bb-warm-white); } .bb-shop-why__head { max-width: 720px; margin-bottom: 56px; } .bb-shop-why__head .bb-eyebrow { margin-bottom: 14px; } .bb-shop-why__title { margin: 0 0 14px; font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; color: var(--bb-deep-black); font-weight: 700; text-wrap: balance; } .bb-shop-why__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--bb-charcoal); } .bb-shop-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .bb-shop-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--bb-sand); color: var(--bb-forest); margin-bottom: 18px; } .bb-shop-why__card-title { margin: 0 0 8px; font-size: 18px; line-height: 1.25; color: var(--bb-deep-black); font-weight: 600; letter-spacing: -0.01em; } .bb-shop-why__card-body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--bb-charcoal); } @media (max-width: 960px) { .bb-shop-why { padding: 72px 0; } .bb-shop-why__grid { grid-template-columns: 1fr; gap: 28px; } .bb-shop-why__title { font-size: 32px; } } /* ============================================================ MOTION — Pagina-entrance & scroll-reveal ============================================================ Geldt voor homepage + over / hoe-het-werkt / faq / blog. Twee lagen: 1. Hero — pure-CSS page-load choreografie (geen JS, geen flash, werkt ook zonder JS). Auto-plays bij eerste paint. 2. Secties — scroll-reveal via reveal.js (IntersectionObserver). JS zet .bb-reveal op secties ONDER de vouw en .is-revealed zodra ze in beeld komen. Content boven de vouw en zonder JS wordt nooit verborgen. Alle motion is uit bij prefers-reduced-motion (zie onderaan). Kalm, nooit bouncy — past bij de Rams-stijl van het merk. ============================================================ */ /* --- 1. Hero entrance ------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Video komt op uit een lichte zoom — verbergt de eerste-frame pop en geeft een rustig "licht gaat aan" effect onder de overlay. */ .bb-hero__video { animation: bb-hero-media 1400ms var(--bb-easing-out) both; } /* Voorgrond-content rijst gestaffeld omhoog. */ .bb-hero__inner > * { animation: bb-hero-rise var(--bb-duration-reveal) var(--bb-easing-out) both; } .bb-hero__inner > *:nth-child(1) { animation-delay: 60ms; } /* eyebrow */ .bb-hero__inner > *:nth-child(2) { animation-delay: 150ms; } /* title */ .bb-hero__inner > *:nth-child(3) { animation-delay: 240ms; } /* lead */ .bb-hero__inner > *:nth-child(4) { animation-delay: 330ms; } /* price-row */ .bb-hero__inner > *:nth-child(5) { animation-delay: 420ms; } /* actions */ .bb-hero__inner > *:nth-child(6) { animation-delay: 510ms; } /* footnote */ } /* LCP-safe reveal: elementen starten met opacity:1 zodat Lighthouse ze meteen als "painted" telt. De translateY/scale geeft de visuele "rise" nog steeds — alleen zonder fade-in-pause. */ @keyframes bb-hero-rise { from { transform: translateY(20px); } to { transform: none; } } @keyframes bb-hero-media { from { transform: scale(1.06); } to { transform: none; } } /* Sub-pagina hero's (Over / Hoe / FAQ / Blog / Artikel / Auteur): één rustige fade-up van het hero-blok. Geen per-child stagger — de homepage-hero is het signatuur-moment, sub-pagina's blijven kalm. */ @media (prefers-reduced-motion: no-preference) { .bb-about-hero__inner, .bb-how-hero__inner, .bb-faq-hero__inner, .bb-blog-hero__grid, .bb-article-head__inner, .bb-author-hero__grid { animation: bb-hero-rise var(--bb-duration-reveal) var(--bb-easing-out) both; } } /* --- 2. Sectie scroll-reveal ------------------------------ */ .bb-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--bb-duration-reveal) var(--bb-easing-out), transform var(--bb-duration-reveal) var(--bb-easing-out); } .bb-reveal.is-revealed { opacity: 1; transform: none; } /* --- 3. Reduced motion ------------------------------------ */ /* Respecteer de OS-voorkeur. Schakelt óók de bestaande cart- en stock-animaties uit (die deden dit nog niet). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .bb-reveal { opacity: 1 !important; transform: none !important; } } /* WC auto-injecteert een mini-cart-overlay in via z'n Interactivity API (data-wp-router-region "woocommerce/mini-cart-overlay"). De `render_block`-filter in inc/woocommerce.php returnt de wrapper-block leeg waardoor WC's mini-cart.css niet auto-enqueued wordt — dus de drawer-overlay staat zichtbaar zonder z'n eigen `--is-hidden` rule. Wij gebruiken `bb-cart-drawer`, dus deze WC-overlay nooit tonen. */ .wc-block-components-drawer__screen-overlay[data-wp-interactive="woocommerce/mini-cart"] { display: none !important; } /* ----- Cart page (/cart/) — barebase/cart block ----- */ .bb-cart-page { background: var(--bb-warm-white); padding-top: 80px; padding-bottom: 96px; } .bb-cart-page__body.is-busy { opacity: 0.55; pointer-events: none; transition: opacity 150ms ease; } .bb-cart-page__header { margin-bottom: 40px; } .bb-cart-page__title { font-family: var(--bb-font-sans); font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; color: var(--bb-deep-black); margin: 12px 0 16px; } .bb-cart-page__subline { font-size: 17px; line-height: 1.6; color: var(--bb-fg-muted, #6b675f); max-width: 520px; margin: 0; } /* Empty state */ .bb-cart-page__empty { max-width: 560px; } .bb-cart-page__empty .bb-cart-page__title { font-size: clamp(28px, 3.5vw, 40px); } .bb-cart-page__empty-body { font-size: 16px; line-height: 1.6; color: var(--bb-fg-muted, #6b675f); margin: 0 0 28px; } /* Grid: tabel links, overzicht rechts */ .bb-cart-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; } /* ----- Producttabel ----- */ .bb-cart-table { border-bottom: 1px solid var(--bb-stone); } .bb-cart-table__head { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 110px; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--bb-stone); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-fg-muted, #6b675f); } .bb-cart-table__head-subtotal { text-align: right; } .bb-cart-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 110px; gap: 16px; align-items: center; padding: 28px 0; } .bb-cart-table__row + .bb-cart-table__row { border-top: 1px solid var(--bb-stone); } .bb-cart-table__product { display: flex; gap: 18px; align-items: flex-start; min-width: 0; } .bb-cart-table__thumb img, .bb-cart-table__thumb-placeholder { display: block; width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--bb-sand); } .bb-cart-table__name { font-weight: 600; font-size: 16px; color: var(--bb-deep-black); } .bb-cart-table__name a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .bb-cart-table__name a:hover { color: var(--bb-terracotta); } .bb-cart-table__variant { font-size: 14px; color: var(--bb-fg-muted, #6b675f); margin-top: 2px; } .bb-cart-table__remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--bb-fg-muted, #6b675f); cursor: pointer; transition: color 150ms ease; } .bb-cart-table__remove:hover { color: var(--bb-terracotta); } .bb-cart-table__price, .bb-cart-table__subtotal { font-size: 15px; color: var(--bb-charcoal); } .bb-cart-table__subtotal { text-align: right; font-weight: 700; color: var(--bb-deep-black); } .bb-cart-table__was { margin-right: 6px; font-size: 13px; font-weight: 400; color: var(--bb-fg-muted, #6b675f); } .bb-cart-table__was--line { display: none; } /* desktop: originele prijs staat al in de Prijs-kolom */ /* Qty stepper (zelfde look als drawer) */ .bb-cart-stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--bb-stone); border-radius: var(--bb-radius-pill); padding: 6px 10px; } .bb-cart-stepper button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--bb-charcoal); cursor: pointer; transition: background 150ms ease; } .bb-cart-stepper button:hover:not(:disabled) { background: var(--bb-sand); } .bb-cart-stepper button:disabled { opacity: 0.35; cursor: default; } .bb-cart-stepper__value { min-width: 24px; text-align: center; font-weight: 600; font-size: 15px; } /* Verder winkelen + kortingscode */ .bb-cart-page__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; } .bb-cart-page__continue { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--bb-forest); text-decoration: none; } .bb-cart-page__continue svg { transform: rotate(180deg); } .bb-cart-page__continue:hover { color: var(--bb-deep-black); } .bb-cart-coupon { display: flex; gap: 10px; } .bb-cart-coupon input { width: 210px; padding: 14px 16px; border: 1px solid var(--bb-stone); border-radius: 6px; background: var(--bb-snow); font: inherit; font-size: 14px; color: var(--bb-charcoal); } .bb-cart-coupon input:focus { outline: 2px solid var(--bb-forest); outline-offset: -1px; } .bb-cart-coupon .bb-btn-secondary { padding: 13px 24px; } .bb-cart-coupon__msg { margin-top: 10px; font-size: 14px; text-align: right; color: var(--bb-forest); } .bb-cart-coupon__msg.is-error { color: var(--bb-terracotta); } /* ----- Overzicht-kaart ----- */ .bb-cart-summary { background: var(--bb-snow); border: 1px solid var(--bb-stone); border-radius: 12px; padding: 32px 28px; } .bb-cart-summary__title { font-size: 24px; font-weight: 700; color: var(--bb-deep-black); margin: 0 0 22px; } .bb-cart-summary__rows { display: grid; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--bb-stone); } .bb-cart-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--bb-fg-muted, #6b675f); } .bb-cart-summary__val { color: var(--bb-charcoal); font-weight: 500; } .bb-cart-summary__val--free { color: var(--bb-forest); font-weight: 600; } .bb-cart-summary__coupon-code { font-family: inherit; background: var(--bb-sand); border-radius: 4px; padding: 1px 6px; font-size: 13px; } .bb-cart-summary__coupon-remove { border: 0; background: none; color: var(--bb-fg-muted, #6b675f); cursor: pointer; font-size: 13px; margin-left: 4px; padding: 0 2px; } .bb-cart-summary__coupon-remove:hover { color: var(--bb-terracotta); } .bb-cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; font-weight: 700; color: var(--bb-deep-black); } .bb-cart-summary__total-amount { font-size: 32px; letter-spacing: -0.01em; } .bb-cart-summary__vat { text-align: right; font-size: 12px; color: var(--bb-fg-muted, #6b675f); margin-top: 2px; } .bb-cart-summary__rating { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 16px; font-size: 14px; color: var(--bb-fg-muted, #6b675f); } .bb-cart-summary__rating strong { color: var(--bb-deep-black); } .bb-cart-summary__stars { color: var(--bb-terracotta); font-size: 14px; letter-spacing: 2px; } .bb-cart-summary__cta { width: 100%; box-sizing: border-box; justify-content: center; } .bb-cart-summary__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--bb-fg-muted, #6b675f); } .bb-cart-summary__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bb-stone); } .bb-cart-summary__chips li { display: flex; } .bb-cart-summary__chips img { display: block; height: 32px; width: auto; border-radius: 5px; } .bb-cart-summary__usps { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bb-stone); display: grid; gap: 12px; } .bb-cart-summary__usps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--bb-charcoal); } .bb-cart-summary__usps svg { flex-shrink: 0; margin-top: 2px; color: var(--bb-forest); } /* ----- Responsive ----- */ @media (max-width: 1024px) { .bb-cart-page__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .bb-cart-summary { max-width: 560px; } } @media (max-width: 768px) { .bb-cart-table__head { display: none; } .bb-cart-table { border-top: 1px solid var(--bb-stone); } .bb-cart-table__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product product" "qty subtotal"; row-gap: 16px; padding: 22px 0; } .bb-cart-table__product { grid-area: product; } .bb-cart-table__price { display: none; } /* stuksprijs zit al in het regelsubtotaal */ .bb-cart-table__was--line { display: inline; } /* mobiel: Prijs-kolom weg, dus originele prijs hier */ .bb-cart-table__qty { grid-area: qty; } .bb-cart-table__subtotal { grid-area: subtotal; align-self: center; } .bb-cart-page__actions { flex-direction: column; align-items: stretch; } .bb-cart-coupon { width: 100%; } .bb-cart-coupon input { flex: 1; width: auto; } .bb-cart-coupon__msg { text-align: left; } .bb-cart-summary { max-width: none; } } @media (max-width: 480px) { .bb-cart-page { padding-top: 56px; padding-bottom: 64px; } .bb-cart-summary { padding: 24px 18px; } .bb-cart-table__thumb img, .bb-cart-table__thumb-placeholder { width: 60px; height: 60px; } } /* ----- Nieuwsbrief-popup (welkomstkorting) ----- */ .bb-popup { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; } .bb-popup[hidden] { display: none; } .bb-popup__overlay { position: absolute; inset: 0; background: var(--bb-overlay-dark); opacity: 0; transition: opacity 200ms ease; } .bb-popup__panel { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(1060px, 100%); max-height: min(720px, calc(100vh - 48px)); background: var(--bb-warm-white); border-radius: 16px; overflow: hidden; box-shadow: 0 32px 80px rgba(26, 26, 26, 0.35); opacity: 0; transform: translateY(24px); transition: opacity 220ms ease, transform 220ms ease; } .bb-popup.is-open .bb-popup__overlay { opacity: 1; } .bb-popup.is-open .bb-popup__panel { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .bb-popup__overlay, .bb-popup__panel { transition: none; transform: none; } } .bb-popup__image { position: relative; min-height: 540px; } .bb-popup__picture { position: absolute; inset: 0; display: block; } .bb-popup__photo { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-popup__badge { position: absolute; left: 28px; bottom: 28px; display: inline-flex; align-items: baseline; gap: 10px; background: var(--bb-deep-black); color: var(--bb-warm-white); padding: 14px 22px; border-radius: 8px; font-size: 14px; } .bb-popup__badge strong { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .bb-popup__content { padding: 56px 60px; display: flex; flex-direction: column; align-items: flex-start; overflow-y: auto; } @media (max-width: 1024px) { .bb-popup__content { padding: 44px 36px; } } .bb-popup__logo { height: 29px; width: auto; margin-bottom: 26px; } .bb-popup__eyebrow { font-size: var(--bb-text-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-sage); font-weight: 600; } .bb-popup__title { margin: 14px 0 16px; font-size: clamp(32px, 3.5vw, 44px); line-height: 1.05; letter-spacing: -0.025em; color: var(--bb-fg-strong); font-weight: 700; } .bb-popup__body { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: var(--bb-fg); } .bb-popup__form { display: flex; flex-direction: column; gap: 12px; width: 100%; } .bb-popup__input { padding: 16px 18px; font-size: 15px; border: 1px solid var(--bb-border); border-radius: 6px; background: var(--bb-snow); color: var(--bb-fg); width: 100%; box-sizing: border-box; } .bb-popup__input::placeholder { color: var(--bb-warm-grey); } .bb-popup__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bb-accent); color: var(--bb-accent-fg); padding: 18px 32px; border: none; border-radius: 6px; font-family: inherit; font-weight: 600; font-size: 16px; letter-spacing: 0.03em; cursor: pointer; transition: background 150ms ease; } .bb-popup__btn:hover { background: var(--bb-accent-hover); } .bb-popup__btn:disabled { opacity: 0.7; cursor: default; } .bb-popup__btn:disabled:hover { background: var(--bb-accent); } /* Honeypot: visueel én voor screenreaders weg (aria-hidden), wel submitbaar voor bots. */ .bb-popup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .bb-popup__status { margin: 4px 0 0; font-size: 14px; line-height: 1.5; } .bb-popup__status.is-error { color: var(--bb-error); } .bb-popup__status.is-success { color: var(--bb-success); } .bb-popup__note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; } .bb-popup__note-icon { color: var(--bb-sage); flex-shrink: 0; margin-top: 2px; display: inline-flex; } .bb-popup__note p { margin: 0; font-size: 13px; color: var(--bb-fg-muted); line-height: 1.5; } .bb-popup__later { margin-top: 18px; background: none; border: none; padding: 0; font-family: inherit; font-size: 14px; color: var(--bb-fg-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .bb-popup__later:hover { color: var(--bb-fg); } .bb-popup__close { position: absolute; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bb-snow); border: 1px solid var(--bb-border); color: var(--bb-fg); cursor: pointer; } .bb-popup__close:hover { border-color: var(--bb-border-strong); } .bb-popup__success { width: 100%; text-align: center; padding: 16px 0; } .bb-popup__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--bb-sage-tint-20); color: var(--bb-forest); margin-bottom: 16px; } .bb-popup__success-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--bb-fg-strong); } .bb-popup__success-body { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--bb-fg); } .bb-popup__code { display: block; width: 100%; box-sizing: border-box; padding: 14px 18px; margin: 0 0 16px; border: 1px dashed var(--bb-border-strong); border-radius: 6px; background: var(--bb-snow); font-size: 22px; font-weight: 700; letter-spacing: 0.18em; color: var(--bb-fg-strong); text-align: center; } .bb-popup__success .bb-popup__btn { width: 100%; } .bb-popup__success .bb-popup__status { text-align: center; } .bb-popup__success-note { margin: 14px 0 0; font-size: 13px; color: var(--bb-fg-muted); } .bb-popup__btn.is-applied { background: var(--bb-forest); cursor: default; } .bb-popup__btn.is-applied:hover { background: var(--bb-forest); } /* Mobiel: bottom-sheet zonder foto. De foto-kolom gaat hier dicht; loading="lazy" op de voorkomt dat de verborgen foto alsnog gedownload wordt (niet in viewport → browser haalt 'm niet op). */ @media (max-width: 768px) { .bb-popup { align-items: flex-end; padding: 0; } .bb-popup__panel { grid-template-columns: 1fr; width: 100%; max-height: 86vh; border-radius: 16px 16px 0 0; transform: translateY(100%); } .bb-popup.is-open .bb-popup__panel { transform: translateY(0); } .bb-popup__image { display: none; } .bb-popup__content { padding: 40px 20px 28px; } .bb-popup__title { font-size: var(--bb-text-h2-mobile); } } /* ============================================================ MAATGIDS-PAGINA — hero / steps / maattabel / faq (bron: Claude Design handoff maatkeuze/Maatkeuze.html) ============================================================ */ /* ============================================================ SECTIE 1 — bb-maatgids-hero (prototype .hero / .hero__grid / .chip / .hero__media / .float) ============================================================ */ .bb-maatgids-hero { padding: 64px 0 56px; background: var(--bb-warm-white); } .bb-maatgids-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .bb-maatgids-hero__col .bb-eyebrow { margin-bottom: 18px; } .bb-maatgids-hero__title { font-size: 52px; line-height: 1.06; letter-spacing: -0.025em; color: var(--bb-fg-strong); margin: 0 0 18px; } .bb-maatgids-hero__lead { font-size: 18px; line-height: 1.6; color: var(--bb-charcoal); max-width: 30em; margin: 0 0 28px; } .bb-maatgids-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; } .bb-maatgids-hero__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--bb-radius-pill); background: var(--bb-snow); border: 1px solid var(--bb-stone); font-size: 13px; font-weight: 500; color: var(--bb-charcoal); } .bb-maatgids-hero__chip svg { color: var(--bb-forest); flex-shrink: 0; } .bb-maatgids-hero__media { position: relative; border-radius: var(--bb-radius-lg); overflow: hidden; box-shadow: var(--bb-shadow-lg); background: var(--bb-sand); aspect-ratio: 4 / 3.4; } .bb-maatgids-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .bb-maatgids-hero__float { position: absolute; left: 18px; bottom: 18px; background: rgba(250, 248, 245, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 10px; padding: 12px 16px; box-shadow: var(--bb-shadow-md); display: flex; align-items: center; gap: 12px; } .bb-maatgids-hero__float-big { font-size: 22px; font-weight: 700; color: var(--bb-deep-black); letter-spacing: -0.01em; line-height: 1; } .bb-maatgids-hero__float-sub { font-size: 12px; color: var(--bb-fg-muted); line-height: 1.3; max-width: 14ch; } /* tablet — grid naar 1 kolom, foto onder de tekst */ @media (max-width: 1024px) { .bb-maatgids-hero { padding: 44px 0 40px; } .bb-maatgids-hero__grid { grid-template-columns: 1fr; gap: 36px; } } /* mobile type-scale */ @media (max-width: 768px) { .bb-maatgids-hero__title { font-size: 38px; } .bb-maatgids-hero__lead { font-size: 16px; } } @media (max-width: 640px) { .bb-maatgids-hero { padding: 40px 0 36px; } } /* ============================================================ SECTIE 2 — bb-maatgids-steps (prototype .meet / .meet__grid / .meet__fig .measure / .steps / .step) ============================================================ */ .bb-maatgids-steps { padding: 72px 0; background: var(--bb-warm-white); } .bb-maatgids-steps__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; } /* meet-figuur + measure-overlay */ .bb-maatgids-steps__fig { position: relative; margin: 0; border-radius: var(--bb-radius-lg); overflow: hidden; background: var(--bb-snow); border: 1px solid var(--bb-stone); box-shadow: var(--bb-shadow-sm); } .bb-maatgids-steps__fig img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .bb-maatgids-steps__measure { position: absolute; left: 8%; right: 8%; bottom: 22%; display: flex; align-items: center; } .bb-maatgids-steps__measure-line { flex: 1; height: 0; border-top: 2px dashed rgba(74, 103, 65, 0.9); position: relative; } .bb-maatgids-steps__measure-cap { width: 2px; height: 16px; background: var(--bb-forest); border-radius: 2px; } .bb-maatgids-steps__measure-tag { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); background: var(--bb-forest); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 12px; border-radius: var(--bb-radius-pill); white-space: nowrap; box-shadow: var(--bb-shadow-md); } .bb-maatgids-steps__measure-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--bb-forest); } /* tekst-kolom */ .bb-maatgids-steps__col .bb-eyebrow { margin-bottom: 18px; } .bb-maatgids-steps__title { font-size: 36px; letter-spacing: -0.015em; color: var(--bb-fg-strong); margin: 0 0 8px; } .bb-maatgids-steps__intro { font-size: 17px; color: var(--bb-charcoal); margin: 0 0 28px; line-height: 1.6; max-width: 34em; } /* stappen-lijst */ .bb-maatgids-steps__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .bb-maatgids-steps__step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--bb-stone); } .bb-maatgids-steps__step:last-child { border-bottom: 0; } .bb-maatgids-steps__num { width: 44px; height: 44px; border-radius: var(--bb-radius-pill); background: var(--bb-sage-tint); color: var(--bb-forest); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; } .bb-maatgids-steps__step-title { font-size: 19px; margin: 4px 0 6px; letter-spacing: -0.005em; color: var(--bb-fg-strong); } .bb-maatgids-steps__step-body { margin: 0; font-size: 15px; color: var(--bb-charcoal); line-height: 1.6; } .bb-maatgids-steps__step-body .em { color: var(--bb-forest); font-weight: 600; } /* tablet — grid naar 1 kolom, figuur boven de tekst */ @media (max-width: 1024px) { .bb-maatgids-steps__grid { grid-template-columns: 1fr; gap: 36px; } .bb-maatgids-steps__fig { order: -1; } } /* mobile type-scale */ @media (max-width: 768px) { .bb-maatgids-steps__title { font-size: 28px; } } @media (max-width: 640px) { .bb-maatgids-steps { padding: 52px 0; } } /* ========================================================================= 1. MAATTABEL — .bb-maatgids-table ========================================================================= */ .bb-maatgids-table { background: var(--bb-sand); padding: 112px 0; } .bb-maatgids-table__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); } /* ----- sec-head ----- */ .bb-maatgids-table__head { max-width: 620px; margin-bottom: 40px; } .bb-maatgids-table__head .bb-eyebrow { color: var(--bb-forest); margin-bottom: 18px; } .bb-maatgids-table__title { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -0.015em; line-height: 1.1; font-weight: 700; color: var(--bb-deep-black); } .bb-maatgids-table__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--bb-charcoal); } /* ----- size cards grid ----- */ .bb-maatgids-table__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .bb-maatgids-table__card { position: relative; background: var(--bb-snow); border: 1px solid var(--bb-stone); border-radius: 12px; padding: 28px 26px; transition: box-shadow var(--bb-duration-base) var(--bb-easing-standard), border-color var(--bb-duration-base) var(--bb-easing-standard), transform var(--bb-duration-base) var(--bb-easing-standard); } .bb-maatgids-table__card--popular { border-color: var(--bb-sage); box-shadow: var(--bb-shadow-md); } .bb-maatgids-table__pill { position: absolute; top: -12px; left: 26px; background: var(--bb-terracotta); color: var(--bb-snow); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .bb-maatgids-table__letter { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--bb-deep-black); } .bb-maatgids-table__range { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--bb-forest); } .bb-maatgids-table__desc { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--bb-fg-muted); } .bb-maatgids-table__hr { border: 0; border-top: 1px solid var(--bb-stone); margin: 20px 0 16px; } .bb-maatgids-table__meta { display: flex; flex-direction: column; gap: 9px; } .bb-maatgids-table__meta div { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; } .bb-maatgids-table__meta span:first-child { color: var(--bb-fg-muted); } .bb-maatgids-table__meta span:last-child { color: var(--bb-charcoal); font-weight: 600; } /* ----- table note ----- */ .bb-maatgids-table__note { margin-top: 24px; font-size: 13.5px; line-height: 1.55; color: var(--bb-fg-muted); display: flex; align-items: center; gap: 10px; } .bb-maatgids-table__note-icon { display: inline-flex; color: var(--bb-terracotta); flex-shrink: 0; } /* ----- responsive (maattabel) ----- */ @media (max-width: 1024px) { .bb-maatgids-table__inner { padding: 0 var(--bb-pad-tablet, 40px); } } @media (max-width: 768px) { .bb-maatgids-table__grid { grid-template-columns: 1fr; } /* popular-kaart bovenaan + pill gecentreerd op gestapelde weergave */ .bb-maatgids-table__card--popular { order: -1; } .bb-maatgids-table__card--popular .bb-maatgids-table__pill { left: 50%; transform: translateX(-50%); } } @media (max-width: 640px) { .bb-maatgids-table { padding: 72px 0; } .bb-maatgids-table__inner { padding: 0 var(--bb-pad-mobile, 16px); } .bb-maatgids-table__title { font-size: 28px; } } /* ========================================================================= 2. MAATGIDS FAQ — .bb-maatgids-faq ========================================================================= */ .bb-maatgids-faq { background: var(--bb-warm-white); padding: 112px 0; } .bb-maatgids-faq__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; align-items: start; } /* ----- sec-head (links) ----- */ .bb-maatgids-faq__head .bb-eyebrow { color: var(--bb-forest); margin-bottom: 18px; } .bb-maatgids-faq__title { margin: 0 0 12px; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.015em; line-height: 1.1; font-weight: 700; color: var(--bb-deep-black); } .bb-maatgids-faq__intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bb-charcoal); } .bb-maatgids-faq__mail { color: var(--bb-forest); text-decoration: underline; text-underline-offset: 3px; } .bb-maatgids-faq__mail:hover { color: var(--bb-sage); } /* ----- accordion (rechts) — native
      , plus-icoon roteert 45deg ----- */ .bb-maatgids-faq__list { display: flex; flex-direction: column; } .bb-maatgids-faq__item { border-bottom: 1px solid var(--bb-stone); } .bb-maatgids-faq__item:first-child { border-top: 1px solid var(--bb-stone); } .bb-maatgids-faq__item > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--bb-deep-black); } .bb-maatgids-faq__item > summary::-webkit-details-marker { display: none; } .bb-maatgids-faq__item-icon { flex-shrink: 0; display: inline-flex; color: var(--bb-fg-muted); transition: transform 200ms var(--bb-easing-standard), color 200ms var(--bb-easing-standard); } .bb-maatgids-faq__item[open] > summary .bb-maatgids-faq__item-icon { transform: rotate(45deg); color: var(--bb-terracotta); } .bb-maatgids-faq__item-answer { margin: 0; padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--bb-charcoal); max-width: 56ch; } /* ----- responsive (faq) ----- */ @media (max-width: 1024px) { .bb-maatgids-faq__inner { padding: 0 var(--bb-pad-tablet, 40px); gap: 32px; } } @media (max-width: 768px) { .bb-maatgids-faq__inner { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 640px) { .bb-maatgids-faq { padding: 72px 0; } .bb-maatgids-faq__inner { padding: 0 var(--bb-pad-mobile, 16px); } } /* ========================================================================= 3. MAATVINDER — .bb-maatgids-finder (prototype .finder / .finder__panel / .control / .result, r.193-297) ========================================================================= */ .bb-maatgids-finder { background: var(--bb-charcoal); color: var(--bb-warm-white); padding: 112px 0; } .bb-maatgids-finder__inner { max-width: var(--bb-content-max); margin: 0 auto; padding: 0 var(--bb-pad-desktop, 80px); } .bb-maatgids-finder__title { color: #fff; font-size: 38px; letter-spacing: -0.02em; margin: 0 0 12px; } .bb-maatgids-finder__sub { font-size: 17px; color: rgba(250, 248, 245, 0.72); margin: 0 0 40px; max-width: 32em; line-height: 1.6; } /* ----- panel ----- */ .bb-maatgids-finder__panel { background: var(--bb-warm-white); color: var(--bb-charcoal); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 44px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); } /* ----- control ----- */ .bb-maatgids-finder__lbl { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--bb-deep-black); margin-bottom: 4px; } .bb-maatgids-finder__lbl-aside { color: var(--bb-fg-muted); font-weight: 500; } .bb-maatgids-finder__readout { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .bb-maatgids-finder__readout-val { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--bb-deep-black); font-variant-numeric: tabular-nums; } .bb-maatgids-finder__readout-unit { font-size: 22px; font-weight: 600; color: var(--bb-fg-muted); } .bb-maatgids-finder__hint { font-size: 13px; color: var(--bb-fg-muted); margin: 0 0 24px; line-height: 1.5; } .bb-maatgids-finder__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--bb-stone); outline: none; margin: 18px 0 8px; } .bb-maatgids-finder__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 999px; background: var(--bb-forest); cursor: pointer; border: 4px solid var(--bb-warm-white); box-shadow: var(--bb-shadow-md); } .bb-maatgids-finder__slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 999px; background: var(--bb-forest); cursor: pointer; border: 4px solid var(--bb-warm-white); box-shadow: var(--bb-shadow-md); } .bb-maatgids-finder__slider:focus-visible { outline: 2px solid var(--bb-forest); outline-offset: 4px; } .bb-maatgids-finder__ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--bb-fg-muted); margin-top: 2px; } .bb-maatgids-finder__quick { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; } .bb-maatgids-finder__quick > span { font-size: 13px; color: var(--bb-fg-muted); align-self: center; margin-right: 2px; } .bb-maatgids-finder__quick button { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bb-stone); background: var(--bb-snow); color: var(--bb-charcoal); cursor: pointer; transition: 150ms var(--bb-easing-standard); } .bb-maatgids-finder__quick button:hover { border-color: var(--bb-sage); color: var(--bb-forest); } /* ----- result ----- */ .bb-maatgids-finder__result { background: var(--bb-snow); border: 1px solid var(--bb-stone); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; } .bb-maatgids-finder__result-top { display: flex; align-items: center; gap: 18px; } .bb-maatgids-finder__result-badge { width: 76px; height: 76px; flex-shrink: 0; border-radius: 14px; background: var(--bb-forest); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; } .bb-maatgids-finder__result-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-fg-muted); } .bb-maatgids-finder__result-size { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--bb-deep-black); margin-top: 2px; } .bb-maatgids-finder__result-range { font-size: 14px; color: var(--bb-forest); font-weight: 600; margin-top: 2px; } .bb-maatgids-finder__note { margin: 20px 0 0; padding: 14px 16px; background: var(--bb-sage-tint); border-radius: 8px; font-size: 13.5px; line-height: 1.55; color: var(--bb-charcoal); display: flex; gap: 10px; align-items: flex-start; } .bb-maatgids-finder__note-icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; color: var(--bb-forest); } .bb-maatgids-finder__note.is-warn { background: var(--bb-terracotta-tint); } .bb-maatgids-finder__note.is-warn .bb-maatgids-finder__note-icon { color: var(--bb-terracotta); } .bb-maatgids-finder__buy { margin-top: auto; padding-top: 22px; } .bb-maatgids-finder__price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .bb-maatgids-finder__price { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--bb-deep-black); } .bb-maatgids-finder__price-aside { font-size: 13px; color: var(--bb-fg-muted); } .bb-maatgids-finder__btn { width: 100%; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--bb-forest); color: #fff; font-size: 16px; font-weight: 600; padding: 16px 20px; border-radius: 8px; text-decoration: none; transition: background var(--bb-duration-fast) var(--bb-easing-standard); } .bb-maatgids-finder__btn:hover { background: var(--bb-charcoal); } .bb-maatgids-finder__btn:disabled { background: var(--bb-stone); color: var(--bb-fg-muted); cursor: not-allowed; } .bb-maatgids-finder__trust { display: flex; gap: 18px; margin-top: 16px; justify-content: center; flex-wrap: wrap; } .bb-maatgids-finder__trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bb-fg-muted); } .bb-maatgids-finder__trust svg { color: var(--bb-forest); } /* ----- responsive ----- */ @media (max-width: 1024px) { .bb-maatgids-finder__inner { padding: 0 var(--bb-pad-tablet, 40px); } .bb-maatgids-finder__panel { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 768px) { .bb-maatgids-finder__title { font-size: 28px; } .bb-maatgids-finder__readout-val { font-size: 46px; } .bb-maatgids-finder__result-badge { width: 64px; height: 64px; font-size: 32px; } } @media (max-width: 640px) { .bb-maatgids-finder { padding: 72px 0; } .bb-maatgids-finder__inner { padding: 0 var(--bb-pad-mobile, 16px); } .bb-maatgids-finder__panel { padding: 24px; } } /* ============================================ Landingpage-template (Google Ads) Gestripte chrome: logo-only nav, slanke footer, buy-box standalone buiten de PDP-grid. ============================================ */ /* Nav: alleen logo, gecentreerd */ .bb-nav--lp .bb-nav__inner { display: flex; justify-content: center; } /* Buy-box standalone: productfoto naast de koop-kolom */ .page-template-page-landing .bb-pdp-buybox { max-width: var(--bb-content-max); box-sizing: border-box; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media head" "media body"; column-gap: var(--bb-space-3xl); align-items: start; padding: var(--bb-space-2xl) var(--bb-pad-desktop, 80px); } @media (max-width: 1024px) { .page-template-page-landing .bb-pdp-buybox { padding-inline: var(--bb-pad-tablet, 40px); column-gap: var(--bb-space-xl); } } .page-template-page-landing .bb-pdp-buybox__media { grid-area: media; grid-template-columns: 1fr; /* één tile, geen 2-koloms gallery-grid */ } .page-template-page-landing .bb-pdp-buybox__head { grid-area: head; } .page-template-page-landing .bb-pdp-buybox__body { grid-area: body; } @media (max-width: 768px) { .page-template-page-landing .bb-pdp-buybox { grid-template-columns: 1fr; grid-template-areas: "media" "head" "body"; row-gap: var(--bb-space-md); padding: var(--bb-space-lg) var(--bb-pad-mobile, 16px); } } /* Slanke LP-footer */ .bb-footer--lp { padding: var(--bb-space-xl) 0; } .bb-footer--lp .bb-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--bb-space-sm) var(--bb-space-md); align-items: center; justify-content: space-between; } .bb-footer--lp .bb-footer__links--inline { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--bb-space-xs) var(--bb-space-sm); list-style: none; margin: 0; padding: 0; } .bb-footer--lp .bb-footer__bottom { padding-inline: var(--bb-space-md); } /* LP-uitlegsectie (vervangt content-body/TOC op landingpages) */ .bb-lp-explain { padding: var(--bb-space-2xl) 0; } .bb-lp-explain__inner { max-width: 720px; margin-inline: auto; } .bb-lp-explain h2 { margin: 0 0 var(--bb-space-md); } .bb-lp-explain p { margin: 0 0 1.2em; line-height: 1.7; } .bb-lp-explain p:last-child { margin-bottom: 0; } /* LP-pullquote: begrensd en gecentreerd i.p.v. full-width */ .bb-lp-quote { max-width: 720px; margin-inline: auto; } /* LP-hero: tekst + productfoto naast elkaar, met ATF-CTA */ .bb-content-hero--lp .bb-container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--bb-space-xl); align-items: center; } .bb-content-hero--lp .bb-content-hero__media { margin: 0; } .bb-content-hero--lp .bb-content-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--bb-radius-lg); } .bb-content-hero__cta { margin-top: var(--bb-space-md); } .bb-content-hero__note { margin-top: var(--bb-space-xs); font-size: 14px; color: var(--bb-charcoal); /* fg-muted haalt het WCAG-contrast niet op warm-white */ opacity: 0.85; } /* LP-hero rating: sterren in merk-terracotta (consistent met reviews/cart/PDP), niet het dove note-grijs */ .bb-content-hero__rating { opacity: 1; } .bb-content-hero__rating span[aria-hidden] { color: var(--bb-terracotta); letter-spacing: 2px; } @media (max-width: 768px) { .bb-content-hero--lp .bb-container { grid-template-columns: 1fr; gap: var(--bb-space-md); } }