). Neutral by default: .campaign-card__flip-inner/ * --front use display:contents so .campaign-card__media/__body remain * direct flex children of .campaign-card exactly as before (every * existing, non-flip grid is untouched); .campaign-card__face--back is * display:none so it never renders visually or affects layout unless * flip mode is actually on. */ .campaign-card__flip-inner, .campaign-card__face--front { display: contents; } .campaign-card__face--back { display: none; } /* Unconditional (desktop + mobile, 2026-07-23 fix): .pb-type--h3/ * .pb-type--body each set their own explicit color (#111111 default, * design-system.css) — explicit author color always beats inherited * color regardless of specificity, so without this the back title/text * rendered near-black on .campaign-card__face--back's solid black * background (invisible) instead of inheriting its white/custom * --campaign-card-back-text. Same "color:inherit is load-bearing" * pattern already fixed elsewhere in this file (.animated-statement__ * subtitle, .pb-image-text__body > *, etc.). Previously scoped only * inside the >=1024px block, which silently skipped mobile. */ .campaign-card__back-title, .campaign-card__back-text { color: inherit; } /* Structural flip mechanics — desktop only (matches this theme's * >=1024px desktop breakpoint everywhere else); mobile/tablet keep the * neutral display:contents/none above untouched, i.e. the existing * non-flip layout, per "no hover flip on tablet/mobile". */ @media (min-width: 1024px) { .campaign-grid--flip .campaign-card { perspective: 1200px; } .campaign-grid--flip .campaign-card__flip-inner { display: block; position: absolute; inset: 0; /* z-index:1 (2026-07-23 fix) — .campaign-card::after's dark * legibility gradient is generated content, painted last among * .campaign-card's own children; .campaign-card__body used to * beat it via its own z-index:1 back when __body was a direct * sibling of ::after. Now that flip mode wraps __body inside * this absolutely-positioned layer, THIS element is ::after's * direct competitor for paint order — without its own z-index it * defaulted to auto/DOM-order, so the overlay silently painted * on top of the title, washing the white text out. */ z-index: 1; transform-style: preserve-3d; } .campaign-grid--flip .campaign-card__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .campaign-grid--flip .campaign-card__face--back { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; transform: rotateY(180deg); background-color: var(--campaign-card-back-bg, #000000); /* Optional uploaded back-image (2026-07-23, backImage attribute) * — a fixed dark scrim layered on top (first background-image * layer painted above later ones) keeps the white title/text * readable over any photo; --campaign-card-back-image defaults * to "none" so cards without one show plain backBackgroundColor * exactly as before. */ background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--campaign-card-back-image, none); background-size: cover; background-position: center; color: var(--campaign-card-back-text, #ffffff); } .campaign-grid--flip .campaign-card__back-inner { max-width: 100%; position: relative; z-index: 1; } .campaign-grid--flip .campaign-card__back-title { margin: 0 0 0.75rem; } /* Front face shows the title only — the full description text is * reserved for the back (already rendered there, see * .campaign-card__face--back above), so it doesn't show twice at * once. */ .campaign-grid--flip .campaign-card__face--front .campaign-card__text { display: none; } } /* Smooth 3D flip — reduced-motion: the rotateY() state change below * still happens (hover/focus still "works"), just instantly, same * no-preference-guard convention as .pb-reviews-carousel-scroll and * the Hero Centered underline elsewhere in this file. */ @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .campaign-grid--flip .campaign-card__flip-inner { transition: transform 0.6s ease; } } /* Hover/focus flips only the hovered/focused card — plain :hover/ * :focus-within, no JS: leaving a card (mouse-leave or focus moving * elsewhere) reverts it automatically, and hovering a different card * only ever affects that card's own .campaign-card__flip-inner. */ @media (min-width: 1024px) and (hover: hover) { .campaign-grid--flip .campaign-card:hover .campaign-card__flip-inner, .campaign-grid--flip .campaign-card:focus-within .campaign-card__flip-inner { transform: rotateY(180deg); } } /* Mobile/tablet (2026-07-23) — no hover/tap on touch, so a flip-enabled * grid shows the back (full black card, full text) permanently instead * of requiring an interaction that doesn't exist there. Desktop's * >=1024px rules above are untouched. */ @media (max-width: 1023.98px) { .campaign-grid--flip .campaign-card__flip-inner { display: block; /* position+z-index (fix, same root cause as the desktop flip-inner * fix above): .campaign-card::after's dark overlay is positioned * (absolute) with no z-index, and a positioned element always * paints above non-positioned in-flow content regardless of * DOM order/z-index — without this, ::after silently covered the * now-static back-face text, making it unreadable/invisible. */ position: relative; z-index: 1; } .campaign-grid--flip .campaign-card__face--front { display: none; } .campaign-grid--flip .campaign-card__face--back { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 22rem; padding: 2rem; border-radius: inherit; background-color: var( --campaign-card-back-bg, #000000 ); background-image: linear-gradient( rgba( 0, 0, 0, 0.45 ), rgba( 0, 0, 0, 0.45 ) ), var( --campaign-card-back-image, none ); background-size: cover; background-position: center; color: var( --campaign-card-back-text, #ffffff ); } .campaign-grid--flip .campaign-card__back-inner { position: relative; z-index: 1; } } /* Alternating slide-in per card (2026-07-23), same reveal mechanism/ * "is-revealed" flip + IntersectionObserver already used for * .doelen-goals-grid .campaign-card above (main.js's shared observer * now also watches .campaign-grid--flip .campaign-card) — no separate * animation logic, once per page view. Desktop keeps its own hover- * flip interaction untouched; this opacity/slide only ever applies * below the 1024px breakpoint. */ @media (max-width: 1023.98px) { html.js .campaign-grid--flip .campaign-card { opacity: 0; } html.js .campaign-grid--flip .campaign-card.is-revealed { animation: pb-fade-in-left 0.8s ease forwards; } html.js .campaign-grid--flip .campaign-card:nth-child(even).is-revealed { animation-name: pb-fade-in-right; } } @media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) { .campaign-grid--flip .campaign-card { opacity: 1; animation: none; } } .campaign-card__media { position: absolute; inset: 0; background: linear-gradient(160deg, #2b2b2b 0%, #000 100%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .campaign-card:hover .campaign-card__media, .campaign-card:focus-within .campaign-card__media { transform: scale(1.07); } /* Dark text-legibility overlay — a dedicated ::after layer, not part of * .campaign-card__body's own background. It used to live on __body * itself, which worked fine while __body stretched full-width; once * __body got a fixed max-width (so title/text/link never reflow while * the card's own width animates on hover — see __body below), a * background living ON __body would only ever cover that fixed width, * leaving the newly-revealed, wider part of the card's image * undimmed on hover. inset:0 + border-radius:inherit means this layer * always matches the card's *current* box exactly, at any width, and * respects the card's own corner radius. pointer-events:none so it * never intercepts clicks meant for the real content/link in __body. */ .campaign-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 55%); transition: background 0.5s ease; } .campaign-card:hover::after, .campaign-card:focus-within::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.05) 55%); } /* Alternating card background, cycling every 4 cards — driven by real * sibling DOM position (:nth-child), not a PHP-computed * `campaign-card--N` class. Each card is its own pb/campaign-grid-item * child block since the Framework v1.0 editor-UX pass, so "which * position in the grid" is exactly what :nth-child already expresses; * nothing needs to be threaded from parent to child for this. */ .campaign-grid__inner .campaign-card:nth-child(4n + 1) .campaign-card__media { background: linear-gradient(160deg, #3a3a3a 0%, #0d0d0d 100%); } .campaign-grid__inner .campaign-card:nth-child(4n + 2) .campaign-card__media { background: linear-gradient(160deg, #ff4d2d 0%, #7a1500 100%); } .campaign-grid__inner .campaign-card:nth-child(4n + 3) .campaign-card__media { background: linear-gradient(160deg, #2b2b2b 0%, #000 100%); } .campaign-grid__inner .campaign-card:nth-child(4n + 4) .campaign-card__media { background: linear-gradient(160deg, #444 0%, #111 100%); } .campaign-card__body { position: relative; z-index: 1; max-width: 22rem; padding: 1.75rem; } /* Typography token-driven via PB Rich Heading's `.pb-type--h3` class — * "h3" reused as-is (weight 800 and letter-spacing -0.01em already * match) with a scoped override for size/transform/color. */ .campaign-card__title { margin: 0 0 0.4rem; font-size: clamp(1.35rem, 2.5vw, 1.75rem); text-transform: uppercase; color: #fff; /* Guaranteed legibility (2026-07-23) — the ::after gradient below * already darkens this area, but a lighter patch of a given photo * can still leave solid white looking washed out; this subtle dark * shadow keeps the title readable regardless of what's directly * behind it, without changing its color/size/position. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* "body" token already matches this text's weight (400); size and * color are this card's own nuance. Solid white (2026-07-23 — was * rgba(255,255,255,0.85)), same legibility reasoning as the title * above. */ .campaign-card__text { margin: 0 0 1rem; font-size: 0.9rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); max-width: 22rem; transition: opacity 0.45s ease, transform 0.45s ease; } /* Animated underline (same left-to-right reveal technique already * used for .main-navigation__menu a::after) instead of a static * border-bottom + opacity fade. */ /* Plain text-link CTA style only (cardCtaStyle "link") — a real button * (.pb-button, primary/secondary/ghost) carries its own complete look * and must not inherit this animated-underline treatment, so every * selector here is scoped to :not(.pb-button). */ .campaign-card__link:not(.pb-button) { position: relative; display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; padding-bottom: 0.2rem; } .campaign-card__link:not(.pb-button)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0.35); transform-origin: left; transition: transform 0.35s ease; } .campaign-card__link:not(.pb-button):hover::after, .campaign-card__link:not(.pb-button):focus-visible::after, .campaign-card:hover .campaign-card__link:not(.pb-button)::after, .campaign-card:focus-within .campaign-card__link:not(.pb-button)::after { transform: scaleX(1); } /* PB Coaching Card (2026-07-20) — pb/campaign-grid-item's InnerBlocks * path: Number/Image/Overlay/Heading/Paragraph as real child blocks. * Image/Overlay are full-bleed layers (image reuses .pb-hc-image — see * blocks/hero-centered-image — normally a contained "floating" image, * overridden to cover here); Heading/Paragraph reuse .pb-hc-heading/ * .pb-hc-body and sit above them via z-index, bottom-anchored by * .campaign-card's own flex column + justify-content:flex-end. */ .campaign-card > .pb-hc-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .campaign-card > .pb-hc-image .pb-hc-image__img { width: 100%; height: 100%; object-fit: cover; } .campaign-card > .pb-card-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .campaign-card > .pb-card-number { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; display: block; background: #fff; color: #111; font-weight: 800; font-size: 1.5rem; line-height: 1; padding: 0.6rem 0.85rem 0.5rem; border-radius: 0.75rem 0.75rem 0.75rem 0; } .campaign-card > .pb-hc-heading, .campaign-card > .pb-hc-body { position: relative; z-index: 1; padding: 0 1.75rem; } .campaign-card > .pb-hc-heading { margin: 0 0 0.4rem; } .campaign-card > .pb-hc-body { margin: 0 0 1.75rem; } .campaign-card > .pb-hc-heading .pb-hc-heading__text { font-size: clamp(1.35rem, 2.5vw, 1.75rem); text-transform: uppercase; } .campaign-card > .pb-hc-body .pb-hc-body__text { font-size: 0.9rem; opacity: 0.85; } /* >=640px: Coca-Cola-style hover expansion. Switching from CSS grid to * a wrapping flex row is what makes this possible with no JS and no * markup change: flex-wrap treats each wrapped line as its own * independent flex-grow context, so growing the hovered card's * flex-grow only redistributes space against its own row sibling (2 * cards per row, same 2x2 layout as before) — the other row is * unaffected. Mobile (<640px) keeps its original display:grid; * grid-template-columns:1fr stack untouched. */ @media (min-width: 640px) { .campaign-grid__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; } /* flex-basis is 0, not calc(50% - gap) — with a fixed ~50% basis, * 2 cards + the gap already consume exactly 100% of the row, leaving * zero free space for flex-grow to redistribute on hover (a hovered * card's higher flex-grow had nothing to actually grow into, so * cards never visibly resized). With basis:0, the entire row width * is allocated via flex-grow ratios instead — equal ratios (1:1) at * rest still split 50/50, but a higher hover ratio now has the * whole row to redistribute against, producing a real, visible * size change. */ .campaign-card { flex: 1 1 0%; transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .campaign-card:hover, .campaign-card:focus-within { flex-grow: 1.6; } /* Preview (first paragraph) at rest, full text on hover/focus — a * generous max-height on hover (not a tight 6rem cap) so real content * is never clipped, instead of the previous hidden-until-hover state. */ .campaign-card__text { max-height: 4.5rem; opacity: 1; overflow: hidden; transform: none; } .campaign-card:hover .campaign-card__text, .campaign-card:focus-within .campaign-card__text { max-height: 40rem; } } /* Confirmed still showing the full 1.5rem gap on real mobile/tablet * devices at exactly 768px (a common width — e.g. iPad portrait — * excluded by a 767.98px cutoff) and throughout the rest of the * 640-1023px range. Applies the tighter gap for the entire span this * component treats as non-desktop (up to the 1024px breakpoint where * .campaign-grid's own padding/.campaign-card sizing next changes), * without moving the 640px 2-column flex-wrap switch itself. Only true * desktop (>=1024px) keeps the unchanged 1.5rem gap from the block * above. */ @media (min-width: 640px) and (max-width: 1023.98px) { .campaign-grid__inner { gap: 0.25rem; } } @media (min-width: 1024px) { .campaign-grid { /* Symmetric top/bottom (was 2rem/6rem, 2026-07-17 fix, same * reasoning as the mobile-first base rule above). */ padding: 2rem 3rem; } .campaign-card { min-height: 26rem; } } @media (min-width: 1440px) { .campaign-grid { padding: 2rem 4rem; } } @media (min-width: 640px) and (prefers-reduced-motion: reduce) { .campaign-card, .campaign-card::after, .campaign-card__media, .campaign-card__body, .campaign-card__text, .campaign-card__link::after { transition: none !important; } .campaign-card:hover, .campaign-card:focus-within { flex-grow: 1; } .campaign-card__text { max-height: none; margin-bottom: 1rem; opacity: 1; transform: none; } } /* "icon" card style (2026-07-15, cardStyle:"icon") — a small, flat, * always-static card (icon + title + text, optional accent-color top * border), not the original full-bleed photo card with its Coca-Cola * hover-expansion. Scoped entirely to .campaign-card--icon so the * unmodified .campaign-card rules above (still the default, cardStyle * "photo") are completely unaffected. */ .campaign-card--icon { flex-grow: 1 !important; justify-content: flex-start; align-items: center; min-height: 0; padding: 2rem 1.5rem; text-align: center; background: var(--campaign-card-bg, #17171c); border-top: 3px solid var(--campaign-card-accent, #6848f4); border-radius: 0.75rem; } /* Bottom-align each card's CTA regardless of how many lines the title/ * text above it take — cards in the same row already stretch to equal * height (.campaign-grid__inner's default flex align-items:stretch), * so pushing just the CTA to the bottom of .__body (not the whole * body block) lines every button up on the same baseline. */ .campaign-card--icon .campaign-card__body { display: flex; flex-direction: column; flex: 1; align-self: stretch; } .campaign-card--icon .campaign-card__link { margin-top: auto; } .campaign-card--icon:hover, .campaign-card--icon:focus-within { flex-grow: 1 !important; } .campaign-card--icon::after { content: none; } .campaign-card--icon .campaign-card__icon { width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; } .campaign-card--icon .campaign-card__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .campaign-card--icon .campaign-card__body { position: static; max-width: none; padding: 0; } .campaign-card--icon .campaign-card__title { text-transform: none; font-size: 1.15rem; } .campaign-card--icon .campaign-card__text { max-height: none !important; margin-bottom: 0 !important; opacity: 1 !important; transform: none !important; overflow: visible; } /* Campaign banner */ .campaign-banner { /* Same custom property .hero also defines — .button--primary:hover * references it with no fallback, so without redefining it here * too, hovering this block's CTA resolved to an invalid custom * property (background-color's initial value, transparent), * making the button appear to vanish into the dark backdrop. */ --hero-accent: #ff4d2d; position: relative; display: flex; align-items: flex-end; min-height: 34rem; padding: 3rem 1.25rem; overflow: hidden; color: #fff; text-align: left; } .campaign-banner.alignfull { left: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; } .campaign-banner.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } .campaign-banner__media { position: absolute; inset: 0; background: linear-gradient(135deg, #1a1a1a 0%, #000 60%, #262626 100%); } .campaign-banner__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 60%); } .campaign-banner__content { position: relative; z-index: 1; max-width: 34rem; } .campaign-banner__eyebrow { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #ff4d2d; } /* Typography token-driven via PB Rich Heading's `.pb-type--h1` class — * "h1" reused as-is (its weight 800 matches) with a scoped override * for the rest, same pattern/reasoning as pb/hero's own title (every * Display token is already claimed by other blocks). */ .campaign-banner__title { margin: 0 0 0.6rem; font-size: clamp(2rem, 7vw, 3.75rem); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; } /* "body" token already matches this subtitle's weight (400); size and * color are this block's own nuance. */ .campaign-banner__subtitle { margin: 0 0 1.75rem; font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); } /* 2026-07-16: white-fill scoped override removed — campaign-banner's * "primary" CTA now renders the exact same sitewide .pb-button--primary * (design-system.css, purple #6848F4 / hover #7E6FEF) as every other * Primary CTA. No local color override left; default :hover/:focus * already comes from the shared rule. */ @media (min-width: 768px) { .campaign-banner { padding: 5rem 3rem; min-height: 38rem; } } @media (min-width: 1440px) { .campaign-banner { padding: 5rem 4rem; } } /* ========================================================================== * pb/campaign-banner-v2 — redesigned Campaign Banner (2026-07-15): * full-bleed dark 2-column split (text left, image right, stacks on * mobile — text first), recreating paperbrain.store's homepage * "Ontdek de kracht van een PaperBrain®" section. The 4 reorderable * child blocks (heading/body/cta/image) stay fully independent in the * editor, but the PHP render (inc/campaign-banner-v2-block.php) always * splits them into these two wrapper columns by TYPE rather than DOM * position — .pb-cb-text (normal block-stacking, auto height) and * .pb-cb-media (the image, vertically centered against it). A flat * "every child is its own CSS Grid item, image row-spans column 2" * version was tried first and dropped: an item spanning several auto * grid rows forces the browser to inflate every one of those rows to * jointly fit its height (CSS Grid track-sizing spec), which pushed * huge gaps between the short text children instead of them stacking * normally. Reuses the exact pb-hc-hide-(desktop|tablet|mobile)/pb-hc-animate responsive- * visibility + entrance-animation system already built for * pb/hero-centered's children rather than a duplicate set of rules — * those class names are attached by pb_hc_child_classes()/ * pb-hc-common.js regardless of which parent block a child belongs to. * ========================================================================*/ /* Full-bleed positioning moved inline (pb_render_campaign_banner_v2_block(), * inc/campaign-banner-v2-block.php) — the stylesheet version of this rule * was empirically not being applied in testing; inline verified working. */ /* Entrance animation override (2026-07-16, updated 2026-07-17) — scoped * to this block only, does not touch .pb-hc-animate's own rule (shared * with pb/hero-centered). Desktop: spins in from the right (image sits * on the right side of this layout); mobile below spins in from the * left instead — same pb-cb-spin-in-* technique, mirrored direction. */ .pb-campaign-banner .pb-hc-animate { animation: pb-cb-spin-in-right 1s ease 0s 1 forwards; } @keyframes pb-cb-spin-in-right { 0% { opacity: 0; transform: translateX(100%) rotate(0deg); } 100% { opacity: 1; transform: translateX(0) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pb-campaign-banner .pb-hc-animate { animation: none; } } /* Mobile-only scroll-triggered override (2026-07-17) — the desktop * spin above plays on paint (page load), which is fine on desktop * where the banner is already in view, but on mobile the banner sits * further down the stacked layout: the animation had already finished * before the user scrolled to it, so it just appeared static. Reuses * the site's existing IntersectionObserver + "is-revealed" class-flip * (main.js, same mechanism as .goal-step/.pb-image-text-compact — no * new observer). Mobile spins in from the left (opposite side from * desktop's spin-in-from-right above, matching each breakpoint's own * stacking order). */ @media (max-width: 767.98px) { html.js .pb-campaign-banner .pb-hc-animate { opacity: 0; animation: none; } html.js .pb-campaign-banner.is-revealed .pb-hc-animate { animation: pb-cb-spin-in-left 1s ease 0s 1 forwards; } } @keyframes pb-cb-spin-in-left { 0% { opacity: 0; transform: translateX(-100%) rotate(0deg); } 100% { opacity: 1; transform: translateX(0) rotate(360deg); } } @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { html.js .pb-campaign-banner .pb-hc-animate { opacity: 1; animation: none; } } /* Gap/padding measured live from paperbrain.store's own "Ontdek de * kracht van een PaperBrain®" section (2026-07-16, 1512px viewport): * section 96px top / 64px bottom padding, 0 horizontal (the 1200px * max-width + auto margins alone create the desktop gutter); 96px gap * between two ~552px columns (46/46% of 1200px). Horizontal padding * comes back at the mobile breakpoint below, where there's no 1200px * container left to create a gutter on its own. */ .pb-campaign-banner__inner { display: flex; align-items: center; gap: 6rem; max-width: 1200px; margin: 0 auto; padding: 6rem 0 4rem; } .pb-cb-text { flex: 1 1 50%; min-width: 0; } /* Desktop column position is controlled by the "direction" attribute * (pb-campaign-banner--image-left), independent of DOM order — DOM * order itself follows List View (mobile stacking), see * pb_render_campaign_banner_v2_block(). Only set above the mobile * stack breakpoint so mobile keeps natural DOM/List-View order. */ @media (min-width: 901px) { .pb-campaign-banner .pb-cb-text { order: 1; } .pb-campaign-banner .pb-cb-media { order: 2; } .pb-campaign-banner--image-left .pb-cb-text { order: 2; } .pb-campaign-banner--image-left .pb-cb-media { order: 1; } } .pb-cb-eyebrow { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #ff4d2d; } /* Per-instance typography override (2026-07-16, pb/campaign-banner-v2-* * children) — same pb_typography_css_vars()/pbSectionTypography pattern * already used by pb/hero-image-split's own sections. Only active when * the child's "Typografie override" panel is actually engaged (the * ".pb-cb-*--override" modifier class + "--cb?-*" vars are only ever * output then, see inc/campaign-banner-v2-block.php) — every existing * instance with no override stays on the plain rules above, untouched. */ .pb-cb-eyebrow--override .pb-cb-eyebrow { font-size: var(--cbe-eyebrow-desktop-size); line-height: var(--cbe-eyebrow-desktop-line-height); font-weight: var(--cbe-eyebrow-desktop-weight); letter-spacing: var(--cbe-eyebrow-desktop-spacing); } .pb-cb-heading { margin: 0 0 1.25rem; } /* !important required: .pb-cb-heading__text renders a real semantic tag * (h1-h6), and design-system.css's own bare h1..h6 rules already force * these 4 properties with !important — same conflict class already * fixed for pb/hero-image-split's own heading (inc/hero-image-split-block.php). */ .pb-cb-heading--override .pb-cb-heading__text { font-size: var(--cbh-heading-desktop-size) !important; line-height: var(--cbh-heading-desktop-line-height) !important; font-weight: var(--cbh-heading-desktop-weight) !important; letter-spacing: var(--cbh-heading-desktop-spacing) !important; } /* color:inherit (not a hardcoded white) — .pb-campaign-banner's own * "Tekstkleur" setting (bgColor's counterpart, default #ffffff for the * original dark-banner look) sets the actual color on the section * element; a hardcoded white here would go invisible the moment an * instance uses a light bgColor instead (e.g. the coachingstool page's * #efebe6 banner, which needs dark text) — same "color:inherit is * load-bearing" lesson as .animated-statement__text/__subtitle. */ /* Regular base weight, stands out — same pattern already used * by .pb-image-text__heading/.animated-statement__text. Without this, * the h2 preset's own 800 base weight (design-system.css) left almost * no visible difference against 's +100 (900) — bold looked * "already on" everywhere, so toggling it felt broken. !important * required for the same reason as .pb-cb-heading--override above: * design-system.css's bare h1..h6 rules set font-weight with * !important themselves. */ .pb-cb-heading__text { margin: 0; color: inherit; font-weight: 400 !important; } .pb-cb-heading__text strong { font-weight: 700; } .pb-cb-body { margin: 0 0 2rem; } .pb-cb-body__text { margin: 0; color: inherit; opacity: 0.75; max-width: 32rem; } .pb-cb-body--override .pb-cb-body__text { font-size: var(--cbb-body-desktop-size); line-height: var(--cbb-body-desktop-line-height); font-weight: var(--cbb-body-desktop-weight); letter-spacing: var(--cbb-body-desktop-spacing); } /* A bit more breathing room above the CTA (on top of .pb-cb-body's own * 2rem bottom margin) — was sitting too close to the paragraph above. */ .pb-cb-cta { margin-top: 2rem; } .pb-cb-cta--center { display: flex; justify-content: center; /* Standalone usage (not nested in .pb-image-text__body, e.g. right * after PB FAQ): FAQ already ends with 4rem of its own bottom * padding, so the base 2rem margin-top on top of that was too much; * margin-bottom keeps it from sitting flush against whatever * section follows. */ margin-top: 0; margin-bottom: 3rem; } .pb-cb-media { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; justify-content: center; } .pb-cb-image__img { display: block; width: var(--pcb-image-width, 420px); max-width: 100%; height: auto; /* No effect until a future instance sets a fixed aspect-ratio/crop * (object-position only matters together with object-fit) — see * inc/campaign-banner-v2-block.php's pb_render_campaign_banner_v2_image_block(). */ object-position: var(--pcb-focal-position, 50% 50%); } .pb-cb-image.has-shadow .pb-cb-image__img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); } /* Opt-in square crop (2026-07-16) — for source images authored as wide * backgrounds (object-fit:cover + the focal point picks out the square * worth showing), instead of the default natural-aspect-ratio render. */ .pb-cb-image--crop .pb-cb-image__img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; } @media (max-width: 900px) { /* !important: .pb-campaign-banner__inner/.pb-cb-text/.pb-cb-media now * carry inline layout styles (see pb_render_campaign_banner_v2_block(), * inc/campaign-banner-v2-block.php — same empirical reason as the * section's own full-bleed rule above), so this override must win * against inline, not just against another stylesheet rule. */ .pb-campaign-banner__inner { flex-direction: column !important; align-items: stretch !important; padding: 4rem 1.5rem !important; gap: 2.5rem !important; } .pb-cb-text, .pb-cb-media { flex-basis: auto !important; width: 100% !important; } .pb-cb-media { margin-top: 0; } .pb-cb-image__img { width: min(var(--pcb-image-width, 420px), 320px); } /* This block only has the one (900px) responsive breakpoint, so the * typography-override panel's separate "tablet"/"mobile" fields both * resolve here — mobile takes priority when both are filled in. */ .pb-cb-eyebrow--override .pb-cb-eyebrow { font-size: var(--cbe-eyebrow-mobile-size, var(--cbe-eyebrow-tablet-size, var(--cbe-eyebrow-desktop-size))); } .pb-cb-heading--override .pb-cb-heading__text { font-size: var(--cbh-heading-mobile-size, var(--cbh-heading-tablet-size, var(--cbh-heading-desktop-size))) !important; } .pb-cb-body--override .pb-cb-body__text { font-size: var(--cbb-body-mobile-size, var(--cbb-body-tablet-size, var(--cbb-body-desktop-size))); } } /* Team / category selector */ .team-selector { padding: 4rem 1.25rem; text-align: center; background: #f7f7f7; } .team-selector.alignfull { position: relative; left: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; } .team-selector.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } .team-selector__title { margin: 0 0 2.5rem; } .team-selector__title.pb-type--h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); text-transform: uppercase; } .team-selector__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; max-width: 960px; margin: 0 auto 2.5rem; } .team-selector__item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: #111; } .team-selector__logo { display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: linear-gradient(135deg, #ff4d2d 0%, #111 100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease; } .team-selector__item:hover .team-selector__logo, .team-selector__item:focus-visible .team-selector__logo { transform: scale(1.08); box-shadow: 0 8px 20px rgba(17, 17, 17, 0.15); } .team-selector__name { font-size: 0.85rem; font-weight: 600; transition: opacity 0.2s ease; } .team-selector__item:hover .team-selector__name { opacity: 0.7; } .button--ghost-dark { background: transparent; color: #111; border-color: rgba(17, 17, 17, 0.55); } .button--ghost-dark:hover, .button--ghost-dark:focus-visible { border-color: #111; background: rgba(17, 17, 17, 0.08); transform: translateY(-2px); outline: none; } .button--dark { background: #111; color: #fff; } .button--dark:hover, .button--dark:focus-visible { background: #ff4d2d; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17, 17, 17, 0.2); outline: none; } @media (min-width: 480px) { .team-selector__grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) { .team-selector__grid { grid-template-columns: repeat(8, 1fr); } } @media (min-width: 1024px) { .team-selector { padding: 6rem 3rem; } } /* Featured products carousel */ .products { padding: 4rem 1.25rem; background: #fff; } .products.alignfull { position: relative; left: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; } .products.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } .products__header { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto 1.75rem; } .products__title { margin: 0; } .products__title.pb-type--h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); text-transform: uppercase; } .products__nav { display: flex; gap: 0.5rem; } .products__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1.5px solid rgba(17, 17, 17, 0.25); border-radius: 50%; background: transparent; font-size: 1.25rem; line-height: 1; color: #111; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .products__nav-btn:hover, .products__nav-btn:focus-visible { border-color: #111; background: rgba(17, 17, 17, 0.06); transform: translateY(-1px); outline: none; } .products__nav-btn:active { transform: translateY(0) scale(0.94); } .products__track { display: flex; gap: 1.25rem; max-width: 1440px; margin: 0 auto; padding-bottom: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .products__track::-webkit-scrollbar { display: none; } .product-card { flex: 0 0 15rem; scroll-snap-align: start; } .product-card__media { position: relative; height: 15rem; margin-bottom: 1rem; overflow: hidden; border-radius: 0.75rem; background: linear-gradient(160deg, #eee 0%, #ccc 100%); } .product-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(17, 17, 17, 0); transition: background-color 0.3s ease; } .product-card:hover .product-card__media::after, .product-card:focus-within .product-card__media::after { background: rgba(17, 17, 17, 0.06); } .product-card__media--1 { background: linear-gradient(160deg, #f4d9d0 0%, #ff4d2d 100%); } .product-card__media--2 { background: linear-gradient(160deg, #e5e5e5 0%, #999 100%); } .product-card__media--3 { background: linear-gradient(160deg, #dfe7f0 0%, #7b93ab 100%); } .product-card__media--4 { background: linear-gradient(160deg, #eee 0%, #2b2b2b 100%); } .product-card__pill { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: #fff; color: #111; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .product-card__name { margin: 0 0 0.3rem; } .product-card__name.pb-type--h3 { font-size: 0.95rem; font-weight: 700; letter-spacing: normal; } .product-card__price { margin: 0; } .product-card__price.pb-type--small { font-size: 0.9rem; font-weight: 400; letter-spacing: normal; color: #666; } @media (min-width: 768px) { .product-card { flex-basis: 17rem; } } @media (min-width: 1024px) { .products { padding: 6rem 3rem; } } @media (min-width: 1440px) { .products { padding: 6rem 4rem; } } /* Verkooppunten */ .verkooppunten { padding: 4rem 1.25rem; background: #fff; } .verkooppunten__inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 1440px; margin: 0 auto 3rem; } .verkooppunten__title { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; } .verkooppunten__subtitle { margin: 0 0 1.5rem; font-size: 1rem; color: #666; max-width: 30rem; } .verkooppunten__search { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; max-width: 26rem; } .verkooppunten__input { width: 100%; padding: 0.9rem 1.15rem; border: 1.5px solid #ddd; border-radius: 999px; font-size: 0.9rem; font-family: inherit; color: #111; background: #f7f7f7; transition: border-color 0.2s ease, background-color 0.2s ease; } .verkooppunten__input::placeholder { color: #999; } .verkooppunten__input:focus-visible, .verkooppunten__input:focus { border-color: #111; background: #fff; outline: none; } .verkooppunten__partner-link { display: inline-block; margin-top: 1.25rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #111; border-bottom: 1.5px solid #111; padding-bottom: 0.15rem; transition: opacity 0.2s ease; } .verkooppunten__partner-link:hover, .verkooppunten__partner-link:focus-visible { opacity: 0.6; } .verkooppunten__map { position: relative; min-height: 23rem; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(135deg, #eef1f4 0%, #d7dde3 100%); } .verkooppunten__map .leaflet-container { width: 100%; height: 100%; min-height: 23rem; font-family: inherit; background: transparent; } @media (min-width: 768px) { .verkooppunten__map, .verkooppunten__map .leaflet-container { min-height: 28rem; } } /* * Custom PaperBrain marker (replaces the default Leaflet pin): a * circular red badge with a small white logo mark centered inside, * similar in feel to Nike's circular store-locator pins. */ .pb-marker { background: transparent; border: 0; } .pb-marker__pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sl-marker-bg, #ea3325); border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(17, 17, 17, 0.35); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease; } .pb-marker__pin img { display: block; width: 16px; height: 16px; } .pb-marker.is-active .pb-marker__pin { background: var(--sl-marker-active, #ea3325); transform: scale(1.3); box-shadow: 0 6px 16px rgba(17, 17, 17, 0.45); } /* * Custom popup: a large Google Maps-style card (image left, info * right) floating above the marker. Strips almost all default * Leaflet popup chrome and replaces it with our own rounded, * shadowed card — only the small centered tail is kept (restyled) * so the card still visually "points" at its marker. */ .pb-popup-wrapper { margin-bottom: 14px; } .pb-popup-wrapper .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--sl-popup-radius, 18px); box-shadow: var(--sl-popup-shadow, 0 22px 48px rgba(17, 17, 17, 0.28)); overflow: hidden; } .pb-popup-wrapper .leaflet-popup-content { margin: 0; width: 340px !important; } .pb-popup-wrapper .leaflet-popup-tip-container { margin-top: -1px; } .pb-popup-wrapper .leaflet-popup-tip { width: 16px; height: 16px; background: #fff; box-shadow: 0 8px 16px rgba(17, 17, 17, 0.18); } .pb-popup-wrapper .leaflet-popup-close-button { top: 0.6rem; right: 0.6rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(17, 17, 17, 0.55); color: #fff; font-size: 1.1rem; line-height: 1.75rem; text-align: center; } .pb-popup-wrapper .leaflet-popup-close-button:hover { background: rgba(17, 17, 17, 0.8); color: #fff; } .pb-popup { display: flex; align-items: stretch; font-family: inherit; color: #111; } /* * Google Maps popup only (dedicated Store Locator page) — added via * buildPopupHtml()'s `compact` flag, never present on the homepage's * Leaflet popup. Fixes width + height so every popup is identically * sized regardless of image aspect ratio or how much text a given * store has (e.g. "Bruna" vs "Nijenoord") — overflow is clipped * rather than growing the box. */ .pb-popup--compact { width: 300px; height: 110px; overflow: hidden; } .pb-popup__media { position: relative; flex: 0 0 100px; background: linear-gradient(160deg, #eee 0%, #ccc 100%); } .pb-popup__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .pb-popup__info { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; display: flex; flex-direction: column; justify-content: center; } .pb-popup__logo { display: block; max-height: 24px; margin-bottom: 0.3rem; } a.pb-popup__name:hover, a.pb-popup__name:focus-visible { text-decoration: underline; } .pb-popup__name { display: block; margin-bottom: 0.15rem; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .pb-popup__address, .pb-popup__hours { margin: 0 0 0.15rem; font-size: 0.76rem; line-height: 1.3; color: #767676; } .pb-popup__address { margin-bottom: 0.25rem; } .pb-popup__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; } /* * Homepage popup (Leaflet): the compact spacing above targets the * Google Maps popup on /verkooppunten. .pb-popup__info/__name/etc. * are shared classes, so restore the original, taller homepage * spacing here via the higher-specificity Leaflet-scoped selector — * the homepage popup stays pixel-identical to before. */ .pb-popup-wrapper .leaflet-popup-content .pb-popup__media img, .pb-popup-wrapper .leaflet-popup-content .pb-popup__media--placeholder { min-height: 120px; } .pb-popup-wrapper .leaflet-popup-content .pb-popup__info { padding: 0.85rem 0.9rem; display: block; } .pb-popup-wrapper .leaflet-popup-content .pb-popup__logo { margin-bottom: 0.4rem; } .pb-popup-wrapper .leaflet-popup-content .pb-popup__name { margin-bottom: 0.3rem; } .pb-popup-wrapper .leaflet-popup-content .pb-popup__address, .pb-popup-wrapper .leaflet-popup-content .pb-popup__hours { margin-bottom: 0.2rem; line-height: 1.35; } .pb-popup-wrapper .leaflet-popup-content .pb-popup__address { margin-bottom: 0.5rem; } .pb-popup-wrapper .leaflet-popup-content .pb-popup__actions { margin-top: 0.5rem; } /* * Homepage popup (Leaflet): this higher-specificity selector beats * Leaflet's own `.leaflet-container a { color: #0078A8; }` base rule, * which otherwise wins and shows through as bright blue link text. * Left unchanged — the homepage keeps its black/orange CTA. */ .pb-popup-wrapper .leaflet-popup-content a.pb-popup__route { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.85rem; border-radius: 999px; background: #111; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; transition: background-color 0.2s ease, transform 0.2s ease; } .pb-popup-wrapper .leaflet-popup-content a.pb-popup__route:hover, .pb-popup-wrapper .leaflet-popup-content a.pb-popup__route:focus-visible { background: #ff4d2d; color: #fff; transform: translateY(-1px); } /* * Locator page popup (Google Maps InfoWindow): the plain * `.pb-popup__route` selector only ever matches here, since the * homepage's popup content is always additionally wrapped in * `.pb-popup-wrapper .leaflet-popup-content`, which the more specific * rule above already covers. */ .pb-popup__route { display: inline-flex; align-items: center; justify-content: center; padding: 0.32rem 0.8rem; border-radius: 999px; background: var(--sl-popup-cta-bg, #6848f4); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sl-popup-cta-text, #fff); transition: background-color 0.2s ease, transform 0.2s ease; } .pb-popup__route:hover, .pb-popup__route:focus-visible { background: var(--sl-popup-cta-hover-bg, #5636c9); color: var(--sl-popup-cta-hover-text, #fff); transform: translateY(-1px); } .pb-popup-wrapper .leaflet-popup-content a.pb-popup__website, .pb-popup__website { display: inline-flex; align-items: center; justify-content: center; padding: 0.32rem 0.8rem; border-radius: 999px; border: 1px solid rgba(17, 17, 17, 0.15); background: transparent; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #111; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pb-popup-wrapper .leaflet-popup-content a.pb-popup__website:hover, .pb-popup-wrapper .leaflet-popup-content a.pb-popup__website:focus-visible, .pb-popup__website:hover, .pb-popup__website:focus-visible { background: #111; border-color: #111; color: #fff; } /* Google Maps InfoWindow: strip default chrome so it matches the Leaflet popup's rounded, shadowed card look. */ .gm-style .gm-style-iw-c { padding: 0 !important; top: 0 !important; border-radius: var(--sl-popup-radius, 18px); box-shadow: var(--sl-popup-shadow, 0 22px 48px rgba(17, 17, 17, 0.28)); } .gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; max-width: none !important; } .gm-style .gm-style-iw-ch { padding-top: 0 !important; } .gm-style .gm-style-iw-tc::after { background: #fff; } .gm-style .gm-ui-hover-effect { top: 6px !important; right: 6px !important; opacity: 0.9; } @media (max-width: 480px) { .pb-popup-wrapper .leaflet-popup-content { width: 270px !important; } .pb-popup__media { flex-basis: 85px; } .pb-popup__media img, .pb-popup__media--placeholder { min-height: 100px; } } .verkooppunten__list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1440px; margin: 0 auto; } .verkooppunt-card { padding: 1.5rem; border: 1px solid #ececec; border-radius: 0.75rem; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .verkooppunt-card:hover, .verkooppunt-card:focus-within { border-color: #111; box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08); transform: translateY(-3px); } .verkooppunt-card.is-active { border-color: #ff4d2d; box-shadow: 0 12px 28px rgba(255, 77, 45, 0.18); } .verkooppunt-card__name { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; } .verkooppunt-card__address, .verkooppunt-card__hours { margin: 0 0 0.25rem; font-size: 0.85rem; color: #666; } .verkooppunt-card__link { display: inline-block; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #111; border-bottom: 1.5px solid #111; padding-bottom: 0.1rem; transition: opacity 0.2s ease; } .verkooppunt-card__link:hover, .verkooppunt-card__link:focus-visible { opacity: 0.6; } /* * Extended card elements used on the full locator page: a full-width, * text-only list row — Nike-style clean rows separated by a subtle * border. Name (clickable, opens the single Verkooppunt page) sits * above the address on the left; "Bekijk locatie" sits as a plain * text link on the right (same target as the title). Selected state * is a subtle red accent bar, not a bold outline. */ .verkooppunt-card--full { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0; padding: 0.65rem 0.25rem; border: none; border-bottom: 1px solid #ececec; border-radius: var(--sl-list-radius, 0px); background: transparent; box-shadow: none; cursor: pointer; transition: background-color 0.2s ease; } /* * .verkooppunt-card--full sets its own `display: flex` — an author * rule, which (per the CSS cascade) always wins over the browser's * built-in `[hidden] { display: none }` default regardless of * selector specificity. Without this override, setting `.hidden = * true` in JS (filtering) had no visible effect on these rows. */ .verkooppunt-card--full[hidden] { display: none; } .verkooppunten-page__list .verkooppunt-card--full:last-child { border-bottom: none; } .verkooppunt-card--full:hover, .verkooppunt-card--full:focus-within { background: #fafafa; box-shadow: none; transform: none; } .verkooppunt-card--full.is-active { border-color: #ececec; background: var(--sl-list-active-bg, #fdf1ef); box-shadow: inset 3px 0 0 var(--sl-list-active-border, #ea3325); } .verkooppunt-card--full .verkooppunt-card__body { margin: 0; min-width: 0; } .verkooppunt-card--full .verkooppunt-card__name { margin: 0 0 0.2rem; font-size: 16px !important; font-weight: 700; line-height: 1.15; } .verkooppunt-card--full .verkooppunt-card__name a { color: inherit; } .verkooppunt-card--full .verkooppunt-card__name a:hover, .verkooppunt-card--full .verkooppunt-card__name a:focus-visible { text-decoration: underline; } .verkooppunt-card--full .verkooppunt-card__address { margin: 0; font-size: 0.76rem; line-height: 1.2; } .verkooppunt-card--full .verkooppunt-card__link { flex-shrink: 0; margin-top: 0; color: #000000; border-bottom: none; } .verkooppunt-card--full .verkooppunt-card__link:hover, .verkooppunt-card--full .verkooppunt-card__link:focus-visible { opacity: 1; color: var(--sl-button-primary-hover-bg, #5636c9); border-bottom-color: var(--sl-button-primary-hover-bg, #5636c9); } @media (min-width: 640px) { .verkooppunten__search { flex-direction: row; align-items: center; max-width: none; } .verkooppunten__input { flex: 1; } .verkooppunten__submit { white-space: nowrap; } .verkooppunten__list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .verkooppunten__inner { grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 3rem; } } @media (min-width: 1024px) { .verkooppunten { padding: 6rem 3rem; } } @media (min-width: 1440px) { .verkooppunten { padding: 6rem 4rem; } } /* Verkooppunten: full locator page (page-verkooppunten.php) */ .verkooppunten-page-wrap .entry-content > *:first-child { margin-top: 0; } .verkooppunten-page-wrap .entry-content > p:empty { display: none; } .verkooppunten-page-wrap .entry-content > .verkooppunten-page + * { margin-top: 0 !important; } .verkooppunten-page { padding: 2rem 1.25rem 30px; max-width: 1600px; margin: 0 auto; } .verkooppunten-page__breadcrumb { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; } .verkooppunten-page__breadcrumb.pb-type--small { color: #888; font-weight: 400; letter-spacing: normal; } .verkooppunten-page__breadcrumb a { color: #888; transition: color 0.2s ease; } .verkooppunten-page__breadcrumb a:hover, .verkooppunten-page__breadcrumb a:focus-visible { color: var(--wp--preset--color--secondary, #111); } .verkooppunten-page__breadcrumb [aria-current] { color: var(--wp--preset--color--secondary, #111); font-weight: 600; } .verkooppunten-page__title { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--h-2, clamp(1.65rem, 3vw, 2.1rem)); font-weight: 800; letter-spacing: -0.02em; } .verkooppunten-page__subtitle { margin: 0 0 1.5rem; color: #666; font-size: 0.92rem; line-height: 1.55; } /* * Mobile: single column, source order = map, partner CTA, sidebar. * !important on `display` only: when this layout is built from the * core Columns block (composable /verkooppunten blocks) instead of the * monolithic pb/store-locator block, WordPress's block-supports layout * feature adds its own generated `.wp-container-core-columns-is-layout-*` * class alongside `.is-layout-flex` — a 2-class compound selector in * wp-block-library's CSS that outranks this single class on `display` * and keeps the row flex, which collapses the map to 0 height at the * desktop breakpoint below. Every other property here already wins * normally (equal or higher specificity / later in source order). */ .verkooppunten-page__layout { display: flex !important; flex-direction: column; gap: 1.5rem; } .verkooppunten-page__map { order: 0; position: relative; margin-top: -2rem; margin-right: calc(-1.25rem - max(0px, (100vw - 1600px) / 2)); min-height: var(--sl-map-height-mobile, 26rem); border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #eef1f4 0%, #d7dde3 100%); } @media (max-width: 1023.98px) { .verkooppunten-page__map { margin-left: -1.25rem; margin-right: -1.25rem; border-radius: 0; width: auto; height: 600px; } .verkooppunten-page__partner-cta { display: none; } .verkooppunten-page__sidebar { height: 26rem; overflow: hidden; } .verkooppunten-page__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } } .verkooppunten-page__map .leaflet-container { width: 100%; height: 100%; min-height: var(--sl-map-height-mobile, 26rem); font-family: inherit; background: transparent; } .verkooppunten-page__map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; } .verkooppunten-page__map-fallback p { margin: 0; color: #666; font-size: 0.9rem; } .verkooppunten-page__partner-cta { order: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem 1.5rem; border-radius: 16px; background: var(--wp--preset--color--surface, #f7f7f7); } .verkooppunten-page__partner-text { margin: 0; } .verkooppunten-page__partner-text.pb-type--body { font-size: 0.95rem; font-weight: 700; color: var(--wp--preset--color--secondary, #111); } .verkooppunten-page__partner-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.65rem 1.25rem; border-radius: var(--wp--custom--radius--pill, 999px); background: var(--sl-button-primary-bg, var(--wp--preset--color--primary, #6848f4)); color: var(--sl-button-primary-text, #fff); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease; } .verkooppunten-page__partner-link:hover, .verkooppunten-page__partner-link:focus-visible { background: var(--sl-button-primary-hover-bg, #5636c9); transform: translateY(-1px); } /* * Scoped to the locator sidebar only, so the shared .button--dark * class used elsewhere on the site (homepage included) keeps its own * black/orange styling untouched. */ .verkooppunten-page__sidebar .verkooppunten__submit { background: var(--sl-button-primary-bg, #6848f4); color: var(--sl-button-primary-text, #fff); } .verkooppunten-page__sidebar .verkooppunten__submit:hover, .verkooppunten-page__sidebar .verkooppunten__submit:focus-visible { background: var(--sl-button-primary-hover-bg, #5636c9); color: var(--sl-button-primary-text, #fff); } /* Desktop and mobile — "Zoek verkooppunten" button removed, * search-as-you-type (assets/js/main.js, the input's own `input` * event listener) already runs the search without it, so * functionality is unchanged. Scoped to this page's sidebar only, * same convention as the rule above — the homepage/other search * instances are untouched. */ .verkooppunten-page__sidebar .verkooppunten__submit { display: none; } .verkooppunten-page__sidebar .verkooppunten__input { box-sizing: border-box; width: 100%; max-width: 416px; height: 56px; line-height: 56px; padding: 0 1.25rem 0 3.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 20px center; background-size: 18px 18px; } .verkooppunten-page__sidebar { order: 1; display: flex; flex-direction: column; } .verkooppunten__filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.25rem; } .verkooppunten__filter-type, .verkooppunten__filter-province { padding: 0.55rem 1rem; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 999px; font-size: 0.8rem; font-family: inherit; color: #111; background: #f7f7f7; } .verkooppunten__filter-province:disabled { opacity: 0.5; cursor: not-allowed; } /* Counter + filter share one row, at every viewport width (confirmed * 2026-07-11): .wp-block-pb-store-locator-filter (the filter block's * own wrapper — .verkooppunten__filters sits one level deeper, so * that class itself is never a direct flex item here) and * .verkooppunten-page__count are direct flex-column items of * .verkooppunten-page__sidebar (the count is exposed as one via the * list block's own .sl-passthrough/display:contents wrapper). CSS * Grid auto-placement was tried first to line them up without any * fixed pixel math, but proved unreliable in combination with that * display:contents wrapper (confirmed broken via direct measurement); * a fixed-height pull-up is the reliable fallback instead: the filter * is taken right-aligned (align-self:flex-end) with the exact "Row * margin: 16px 0", and .verkooppunten__filter-type's own height below * is fixed at 39px, so the count paragraph's `margin-top: -55px` * (39px content + 16px of the filter's own bottom margin) reliably * pulls it up to align with the filter's row regardless of content * above it. align-self:flex-start (overriding this rule's own * pre-existing align-self:center) plus a max-width keep the count * text starting at the left edge and wrapping within the space left * of the fixed-width filter, instead of overlapping it, at every * viewport width. */ .verkooppunten-page__sidebar .wp-block-pb-store-locator-filter { align-self: flex-end; margin: 16px 0; } /* Base .verkooppunten__filters rule above still carries its own * `margin: 1rem 0 1.25rem` — reset to 0 here so the wrapper's own * 16px/0 margin above is the only spacing contributing to its total * height, matching the -55px pull-up math on the count paragraph * below exactly. */ .verkooppunten-page__sidebar .verkooppunten__filters { margin: 0; } .verkooppunten-page__sidebar .verkooppunten-page__count { align-self: flex-start; max-width: calc(100% - 133px); margin-top: -55px; margin-bottom: 16px; } .verkooppunten-page__sidebar .verkooppunten__filter-type { width: 113.36px; height: 39px; padding: 6px 20px; box-sizing: border-box; border-radius: 999px; background: #ffffff; /* Sliders/filter icon replaces the native chevron on the right. */ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Ccircle cx='9' cy='6' r='2' fill='%23111111' stroke='none'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Ccircle cx='15' cy='12' r='2' fill='%23111111' stroke='none'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='11' cy='18' r='2' fill='%23111111' stroke='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; } .verkooppunten-page__count { margin: 0 0 1rem; font-size: 0.8rem; color: #888; } .verkooppunten-page__count-number { color: #111; font-weight: 700; } .verkooppunten-page__list { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: none; margin: 0; } .verkooppunten-page__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 3rem 1.5rem; text-align: center; color: #666; border: none; border-radius: 16px; background: #f7f7f7; } .verkooppunten-page__empty[hidden] { display: none; } /* "Bekijk alle verkooppunten" — mobile-only (main.js only ever reveals * it below the same 1023.98px breakpoint used elsewhere in this * component); [hidden] already covers the default/desktop/expanded * states, this just gives the visible mobile state a tappable, on- * brand look matching .verkooppunt-card--full's own link styling. */ .verkooppunten-page__show-all { display: block; width: 100%; margin: 1rem 0 0; padding: 0.9rem 1.25rem; border: 1.5px solid #111; border-radius: 999px; background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; color: #111; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .verkooppunten-page__show-all:hover, .verkooppunten-page__show-all:focus-visible { background: #111; color: #fff; outline: none; } .verkooppunten-page__show-all[hidden] { display: none; } .verkooppunten-page__empty-icon { font-size: 1.75rem; } .verkooppunten-page__empty strong { color: #111; font-size: 1.05rem; } /* * /verkooppunten built from the standalone Store Locator blocks inside * a core Columns block: .verkooppunten-page__layout's CSS Grid above * and .verkooppunten-page__list's flex:1 below both require their * target element to be a DIRECT child of a specific ancestor (the * layout grid / the sidebar flex box) — exactly like the original * single pb/store-locator block always rendered them. Columns and each * block's own render_callback each add one wrapper
around that * target element, which breaks that direct-child requirement. Adding * this class (via a block's "Additional CSS Class(es)" field) makes * that one wrapper box invisible to layout without changing anything * it wraps — used on the right-hand Column, and on the Map/Partner CTA/ * List blocks placed inside Columns. */ .sl-passthrough { display: contents; } @media (min-width: 1024px) { .verkooppunten-page { padding-top: 8px; } .verkooppunten-page__layout { display: grid !important; grid-template-columns: minmax(320px, 37%) 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "sidebar map" "sidebar cta"; align-items: stretch; gap: 1.5rem 2.5rem; height: var(--sl-map-height-desktop, 85vh); min-height: 20rem; } .verkooppunten-page__sidebar { grid-area: sidebar; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .verkooppunten-page__map { grid-area: map; min-height: 0; width: 900px !important; height: 630px !important; margin-top: -8px; justify-self: end; overflow: hidden; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .verkooppunten-page__map .leaflet-container { width: 900px !important; height: 630px !important; min-height: 0; } .verkooppunten-page__partner-cta { grid-area: cta; } .verkooppunten-page__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; box-sizing: border-box; padding-right: 0.5rem; /* Fades the top/bottom edge instead of hard-cutting a row in * half mid-scroll — purely visual, doesn't affect the actual * scrollable height or content. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); } } /* Footer (rebuilt 2026-07-09, npdigital.com/nl-inspired reference) — * every color below is a --pb-footer-* custom property (Appearance -> * Customize -> PaperBrain Design -> Footer / Footer kolom 1-4 / Footer * social links); nothing here is a final, unchangeable hardcoded * color. Structure: logo+pattern brand block, up to * PB_FOOTER_MAX_COLUMNS
/
columns (mobile-collapsible, * force-expanded on desktop — see the breakpoint override further * down), then a bottom bar with social icons + copyright. */ .site-footer { background: var(--pb-footer-background, #f6f3ee); color: var(--pb-footer-text, #6b6b6b); font-size: 0.9rem; } /* Base Material Symbols Rounded rule (Google's own recommended * baseline) — global (header icons, hero-split icons), not footer- * specific; kept here only because this used to be the footer USP * bar's own copy before the 2026-07-09 rebuild removed that bar. Also * defined in assets/css/woocommerce.css for PDP use — same rule, no * conflict, WooCommerce's copy just isn't guaranteed loaded everywhere * this one needs to work (every page, via the header). */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; } .site-footer__main { padding-top: 3rem; padding-bottom: 0.5rem; } /* Horizontal padding lives here, directly on the max-width:auto * element — same structure as .site-header__inner (2026-07-11; was on * the outer .site-footer__main instead, which only matches the header * pixel-for-pixel below ~1512px viewports — above that, max-width * caps at different points depending on which element the padding * sits on, since border-box padding subtracted before vs. after the * width comparison isn't the same math). */ .site-footer__inner { max-width: 1440px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } /* ---- Brand block: logo only — .site-footer__logo's --pb-footer-logo-width * custom property is set inline per pb_design_footer_logo_size * (Appearance -> Customize -> PaperBrain Design -> Footer), see * pb_footer_logo_size_px() in footer.php; no decorative pattern * (removed 2026-07-09). Two logo blocks always render * (--desktop/--mobile, each already resolved to Footer Image / Mobile * Footer Image / site logo in footer.php) — only one is ever visible * per breakpoint, toggled below and in the desktop media query * further down. */ .site-footer__brand { position: relative; margin-bottom: 2rem; } .site-footer__logo { position: relative; max-width: var(--pb-footer-logo-width, 144px); } .site-footer__logo--desktop { display: none; } .site-footer__logo img { display: block; height: auto; max-width: 100%; } @media (min-width: 1024px) { .site-footer__logo--desktop img { width: 310px; height: 310px; max-width: none; } } .site-footer__logo a { color: var(--pb-footer-heading, #111111); font-family: var(--wp--preset--font-family--theme-heading, inherit); font-size: 1.5rem; text-decoration: none; } /* ---- Columns: two separate, Customizer-managed column sets * (--desktop / --mobile — see pb_footer_get_column()'s $mobile param * and pb_footer_mobile_has_config() in inc/design-system-customizer.php), * both always in the DOM, CSS shows only the one matching the current * breakpoint (same "render both, toggle via CSS" technique already * used for the desktop/mobile logo blocks above). Column-level * accordion (open/close) is identical either way — only the content * differs. ---- */ .site-footer__columns { display: flex; flex-direction: column; } .site-footer__columns--desktop { display: none; } .site-footer__col { border-top: 1px solid var(--pb-footer-divider, rgba(17, 17, 17, 0.12)); } .site-footer__col:last-of-type { border-bottom: 1px solid var(--pb-footer-divider, rgba(17, 17, 17, 0.12)); } /* Either a plain