s here; an atomic e-flexbox is a 10px-padded ROW until told otherwise. `bhv-icon`: the host of an icon. It is collapsed with display:contents so the icon ITSELF is the flex item and the per-component size rules land on the right box. `bhv-svg` (4.C0, 2026-09-14): every icon is an atomic e-svg, not an HTML widget. Elementor inlines the file's highlight still wins on the element itself, so the approved orange (or, on the filled card, white) run is unaffected. ------------------- */ .elementor .band h1,.elementor .band h2,.elementor .band h3,.elementor .band h4, .elementor .bhv-cta-photo h1,.elementor .bhv-cta-photo h2,.elementor .bhv-cta-photo h3, .elementor .bhv-marcel-left h1,.elementor .bhv-marcel-left h2,.elementor .bhv-marcel-left h3, .elementor .bhv-small-cta h1,.elementor .bhv-small-cta h2,.elementor .bhv-small-cta h3, .elementor .bhv-why-card h3,.elementor .bhv-offer h3{color:var(--color-on-primary)} /* --- Flex-item width ------------------------------------------------------ MEASURED: `frontend.min.css` ships `.e-con{width:var(--width)}` and --width resolves to 100% for every atomic container, so an e-flexbox used as a flex ITEM demands the whole line - the first build laid the four chips out as four full-width rows. `.e-con` is (0,1,0), so the doubled component class at (0,3,0) overrides it cleanly. Every component row states the width of its own children rather than relying on content sizing. -------------------------------------- */ .elementor .bhv-chips.bhv-chips > *, .elementor .bhv-why-head.bhv-why-head > *, .elementor .bhv-cta-row.bhv-cta-row > *, .elementor .bhv-stats.bhv-stats > *, .elementor .bhv-hero-actions.bhv-hero-actions > *, .elementor .bhv-actions.bhv-actions > *, .elementor .bhv-marcel-cta.bhv-marcel-cta{width:auto} /* --- C2 hero (home only) --------------------------------------------------- PROTO paints the photo as a CSS background on .hero-img. It ships here as a real inside an absolutely positioned layer instead: identical geometry (object-fit:cover + object-position 60% 40% == background 60% 40%/cover), and it is the ONLY form that can carry fetchpriority, srcset/sizes, width/height and an alt - all four required by technical-seo-requirements 8.1, which names this photo as the LCP element. ------------------------------------------- */ .elementor .bhv-hero.bhv-hero{position:relative;overflow:hidden;background-color:var(--hero-bg)} .elementor .bhv-hero-img.bhv-hero-img{position:absolute;inset:0;left:34%;width:auto;padding:0;min-width:0} .elementor .bhv-hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block} /* QA round 1 M-01: both layers are atomic .e-con boxes, and frontend.min.css gives every .e-con width:var(--width) = 100%. With an explicit width the left/right pair is over-constrained and `right` is dropped, so since the C2 build the photo box was the full hero width starting at 34 % (1440 wide at 1440, cropped by overflow:hidden) and the fade spanned the whole hero. width:auto restores PROTO: the photo box is left 34 % to the right edge, and the fade sits over that same box (PROTO draws it as .hero-img::before), so its 0-48 % gradient covers the photo's left 48 %. */ .elementor .bhv-hero-fade.bhv-hero-fade{position:absolute;inset:0;left:34%;width:auto;padding:0;min-width:0; background:linear-gradient(90deg,var(--hero-bg) 0%, color-mix(in srgb,var(--hero-bg) 85%,transparent) 18%, color-mix(in srgb,var(--hero-bg) 0%,transparent) 48%)} .elementor .bhv-hero-body.bhv-hero-body{position:relative;z-index:1} .elementor .bhv-hero-copy.bhv-hero-copy{max-width:var(--measure-hero-copy); display:flex;flex-direction:column;padding:0;min-width:0} .elementor .bhv-hero-lead.bhv-hero-lead{margin:22px 0 30px;max-width:var(--measure-lead-hero)} .elementor .bhv-hero-actions.bhv-hero-actions{display:flex;flex-direction:row;flex-wrap:wrap; gap:var(--btn-gap);padding:0;min-width:0} /* ACC-6: below 900 the photo becomes a washed full-bleed backdrop and the navy H1 and lead sit on photographic pixels with no guaranteed contrast. Approved design; flagged in components.md C2, measured by Phase-5 QA, NOT changed here. */ @media(max-width:900px){ .elementor .bhv-hero-img.bhv-hero-img{left:0;opacity:.28} .elementor .bhv-hero-fade.bhv-hero-fade{display:none} } /* --- C2b USP bar (part of C2, home only) ---------------------------------- */ .elementor .bhv-usp.bhv-usp{position:relative;margin-block-start:var(--usp-overlap);z-index:2} .elementor .bhv-usp-bar.bhv-usp-bar{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;min-width:0; padding:22px clamp(18px,3vw,40px); background-color:color-mix(in srgb,var(--color-surface) 92%,transparent); border:var(--border-hairline) solid var(--color-border); border-radius:var(--radius-card);box-shadow:var(--shadow-card); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .elementor .bhv-usp-item.bhv-usp-item{display:flex;flex-direction:row;align-items:center; gap:var(--btn-gap);padding:0;min-width:auto; font-family:var(--stack-heading);font-weight:400;font-size:var(--text-usp);line-height:1.15} .elementor .bhv-usp-item .bhv-svg.bhv-svg{width:46px;height:46px;flex:none;color:var(--color-primary)} .elementor .bhv-usp-item .bhv-svg svg{stroke-width:2} .elementor .bhv-usp-item b{color:var(--color-accent);font-weight:inherit} /* Item 3 is the one USP the approved PDF paints in orange-2 #ff873c rather than the accent (design-tokens.md 2 / components.md C2b row 3). Keyed on position because is the only inline hook html-v3 gives us. */ .elementor .bhv-usp-item:nth-child(3) b{color:var(--orange-2)} @media(max-width:900px){.elementor .bhv-usp-bar.bhv-usp-bar{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.elementor .bhv-usp-bar.bhv-usp-bar{grid-template-columns:minmax(0,1fr)}} /* --- C3 page hero, variant A (photo) and variant B (simple) --------------- */ .elementor .bhv-page-hero.bhv-page-hero{background-color:var(--color-surface-alt); border-block-end:var(--border-hairline) solid var(--line-soft);padding:0; display:flex;flex-direction:column;align-items:center} .elementor .bhv-page-hero-grid.bhv-page-hero-grid{display:grid; grid-template-columns:1.1fr .9fr;gap:var(--split-gap);align-items:center; padding-block:var(--page-hero-pad);min-width:0} .elementor .bhv-page-hero-grid > *{min-width:0} .elementor .bhv-page-hero-lead.bhv-page-hero-lead{margin:18px 0 28px} /* Links inside a hero lead (task 6.0d: MC-3b on the 404; PROTO draws the same pattern in the /veelgestelde-vragen/ and /kennisbank/ leads, "Stel hem aan mij"): PROTO's base rule a{color:inherit} with the browser underline. Without it the v3 kit link colour (accent) paints them orange. (0,3,1) beats the kit link rules and the theme reset; no hover change. */ .elementor .bhv-page-hero-lead a:not([class]){color:inherit;text-decoration:underline} .elementor .bhv-page-hero-photo.bhv-page-hero-photo{border-radius:var(--radius-card); overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-card);padding:0;min-width:0} .elementor .bhv-page-hero-photo img{width:100%;height:100%;object-fit:cover;display:block} /* Variant B, declared after variant A so the single-column value wins the tie. */ .elementor .bhv-page-hero-simple.bhv-page-hero-simple{grid-template-columns:minmax(0,1fr)} @media(max-width:900px){.elementor .bhv-page-hero-grid.bhv-page-hero-grid{grid-template-columns:minmax(0,1fr)}} /* --- C4 facts row (course pages only) ------------------------------------- */ .elementor .bhv-facts.bhv-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--facts-gap);margin-block-start:var(--facts-overlap);position:relative;z-index:2; padding:0;min-width:0} .elementor .bhv-fact.bhv-fact{background-color:var(--color-surface); border:var(--border-hairline) solid var(--color-border);border-radius:var(--radius-md); padding:18px 20px;box-shadow:var(--shadow-card);min-width:0;overflow-wrap:anywhere; display:block} .elementor .bhv-fact-label.bhv-fact-label{display:block;font-family:var(--stack-body); font-weight:700;font-size:var(--text-fact-label);letter-spacing:.08em; text-transform:uppercase;color:var(--color-text-muted);line-height:1.6} .elementor .bhv-fact-value.bhv-fact-value{display:block;font-family:var(--stack-heading); font-weight:400;font-size:var(--text-fact-value);line-height:1.6;margin:4px 0 0} .elementor .bhv-fact-sub.bhv-fact-sub{display:block;font-family:var(--stack-body); font-weight:400;font-size:15px;line-height:calc(var(--text-fact-value) * 1.6);margin:0} @media(max-width:900px){.elementor .bhv-facts.bhv-facts{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.elementor .bhv-facts.bhv-facts{grid-template-columns:minmax(0,1fr)}} /* --- C5 chip ------------------------------------------------------------- The chip BOX is the `chip` / `chip-on` Global Class (self-sufficient, applied alone). Only the group and the orange dot live here. -------------------- */ .elementor .bhv-chips.bhv-chips{display:flex;flex-direction:row;flex-wrap:wrap; gap:var(--chip-gap);justify-content:center;padding:0;min-width:0} .elementor .bhv-chip-dot.bhv-chip-dot{width:26px;height:26px;min-width:0;padding:0; border-radius:50%;flex:none;background-color:var(--color-accent); display:inline-grid;place-items:center;color:var(--color-on-primary)} .elementor .bhv-chip-dot .bhv-svg.bhv-svg{width:14px;height:14px} /* D-BO (6.0g, 2026-09-15): no chip step at 900. PROTO's base .chips and .chip rules come AFTER its own 900 media query, so PROTO renders the row centred and the chip at 19px at every width, and D-BO rules that render approved. The row keeps its base rule above and the chip its Global Class (one mechanism). The earlier 900 step (flex-start, 17px) was removed here. */ /* --- C6 navy band -------------------------------------------------------- The band itself is the `band` Global Class. `.small-cta` is a SEPARATE, self-sufficient variant, not `band` plus a modifier - two rules of Global-Class weight setting the same property on one element is the cascade regression the design system explicitly forbids. D-K: radius-card 22px, not radius-md. ---- */ .elementor .bhv-band.bhv-band{display:flex;flex-direction:column;min-width:0} .elementor .bhv-small-cta.bhv-small-cta{background-color:var(--color-primary); color:var(--color-on-primary);border-radius:var(--radius-card);padding:28px; position:relative;overflow:hidden;display:flex;flex-direction:column; align-items:flex-start;gap:8px;min-width:0} .elementor .bhv-small-cta .text-h3{color:var(--color-on-primary)} .elementor .bhv-band-copy.bhv-band-copy{margin:12px 0 0;font-size:var(--text-lead)} /* --- C7 why-card x3 (inside C6, home only) ------------------------------- D-I: the middle card is white-on-orange at 2.69:1. That is a knowing, ruled acceptance. Build it, do not substitute a darker orange. D-K: radius-card. -- */ .elementor .bhv-why-head.bhv-why-head{display:flex;flex-direction:row; justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; margin-block-end:36px;padding:0;min-width:0} .elementor .bhv-why-grid.bhv-why-grid{display:grid; grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);padding:0;min-width:0} .elementor .bhv-why-card.bhv-why-card{min-width:auto;min-height:300px;display:flex; flex-direction:column;gap:var(--btn-gap);padding:30px 28px; border-radius:var(--radius-card); border:var(--border-hairline) solid color-mix(in srgb,var(--color-on-primary) 28%,transparent); background-color:color-mix(in srgb,var(--color-on-primary) 4%,transparent)} .elementor .bhv-why-card-hi.bhv-why-card-hi{background-color:var(--color-accent); border-color:var(--color-accent)} .elementor .bhv-why-card .bhv-svg.bhv-svg{width:56px;height:56px;color:var(--color-on-primary); margin-block-end:12px;flex:none} .elementor .bhv-why-card .bhv-svg svg{stroke-width:2} .elementor .bhv-why-card .text-h3{color:var(--color-on-primary);font-size:var(--text-why-title)} .elementor .bhv-why-card p{margin:0;opacity:.95} /* PROTO's `.w`: on the orange card the highlight must be white, because the fill is already the accent. (0,4,0) beats the generic highlight rule at (0,2,1). */ .elementor .bhv-why-card-hi .text-h3 b{color:var(--color-on-primary)} @media(max-width:900px){.elementor .bhv-why-grid.bhv-why-grid{grid-template-columns:minmax(0,1fr)}} /* --- C8 course card / C9 article card ------------------------------------ D-E: both are BORDERED. The card box is the `card` Global Class; the grid, the image slot, the body and the two badge positions live here. --------------- */ .elementor .bhv-cards.bhv-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap);padding:0;min-width:0} .elementor .bhv-cards-three.bhv-cards-three{grid-template-columns:repeat(3,minmax(0,1fr))} .elementor .bhv-cards > *{min-width:0} .elementor .bhv-card-img.bhv-card-img{aspect-ratio:4/3;width:100%;padding:0;min-width:0; background-color:var(--color-img-placeholder);display:block;position:relative} .elementor .bhv-card-img img{width:100%;height:100%;object-fit:cover;display:block} .elementor .bhv-card-body.bhv-card-body{padding:22px 22px 24px;display:flex; flex-direction:column;gap:var(--pill-gap);flex:1;min-width:0} .elementor .bhv-card-body p{margin:0} /* C8: centred, straddling the top edge. C9 "Nieuw": inside the image, top-right. */ .elementor .bhv-badge-center.bhv-badge-center{position:absolute;inset-block-start:-14px; inset-inline-start:50%;transform:translateX(-50%);z-index:2;white-space:nowrap} .elementor .bhv-badge-tr.bhv-badge-tr{position:absolute;inset-block-start:14px; inset-inline-end:16px;z-index:2;white-space:nowrap} @media(max-width:1000px){ .elementor .bhv-cards.bhv-cards, .elementor .bhv-cards-three.bhv-cards-three{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .elementor .bhv-cards.bhv-cards, .elementor .bhv-cards-three.bhv-cards-three{grid-template-columns:minmax(0,1fr)} } /* --- C10 photo CTA band (home only) -------------------------------------- The photo ships as a real in an absolutely positioned layer for the same reason as C2. The overlay is a sibling layer rather than a ::before so it can sit between the photo and the row without a stacking-context surprise. ----- */ .elementor .bhv-cta-photo.bhv-cta-photo{position:relative;overflow:hidden; border-radius:var(--radius-band);color:var(--color-on-primary);min-height:320px; display:flex;flex-direction:row;align-items:center;padding:var(--band-pad);min-width:0} .elementor .bhv-cta-photo-img.bhv-cta-photo-img{position:absolute;inset:0;padding:0;min-width:0} .elementor .bhv-cta-photo-img img{width:100%;height:100%;object-fit:cover;display:block} .elementor .bhv-cta-photo-overlay.bhv-cta-photo-overlay{position:absolute;inset:0; padding:0;min-width:0;background:linear-gradient(90deg, color-mix(in srgb,var(--color-primary) 82%,transparent) 0%, color-mix(in srgb,var(--color-primary) 55%,transparent) 55%, color-mix(in srgb,var(--color-primary) 35%,transparent) 100%)} /* C10 addendum (m-04, D-CB), on Marcel's sign-off list: at <=600px the copy spans the whole band, so the left-to-right gradient cannot hold it. Flat navy 87% is the least that passes the orange accent at 3:1 over any photo (solved: 0.865). Do not lower it. */ @media (max-width:600px){.elementor .bhv-cta-photo-overlay.bhv-cta-photo-overlay{background:color-mix(in srgb,var(--color-primary) 87%,transparent)}} .elementor .bhv-cta-row.bhv-cta-row{position:relative;z-index:1;width:100%;display:flex; flex-direction:row;justify-content:space-between;align-items:center;gap:32px; flex-wrap:wrap;padding:0;min-width:0} .elementor .bhv-cta-copy.bhv-cta-copy{max-width:var(--measure-band); font-size:var(--text-band-copy);margin:16px 0 0} /* --- C11 Marcel band (home only) ----------------------------------------- ASSET GAP, flagged not fixed: the approved design draws a background-REMOVED cut-out on the peach half. The only portrait for this slot has a cafe background, so the prototype's cover-crop ships (object-position 50% 20%, verbatim) until the manager rules. P-D: the peach half carries the orange cross layer the prototype defines but never renders - it is added here per the design, and with a cover-crop portrait filling the half it is COVERED, which is a consequence of the same asset gap and is reported, not worked around. - */ .elementor .bhv-marcel.bhv-marcel{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--radius-band); overflow:hidden;min-height:520px;padding:0;min-width:0} .elementor .bhv-marcel-left.bhv-marcel-left{min-width:0;position:relative; padding:var(--band-pad);background-color:var(--color-primary); color:var(--color-on-primary);display:flex;flex-direction:column;align-items:flex-start} .elementor .bhv-marcel-left::after{content:"";position:absolute;inset-inline-end:-1px; inset-block-start:50%;transform:translateY(-50%);border:26px solid transparent; border-inline-end:0;border-inline-start:30px solid var(--color-primary);z-index:2} .elementor .bhv-marcel-right.bhv-marcel-right{min-width:0;position:relative;overflow:hidden; background-color:var(--color-secondary);display:flex;flex-direction:row; align-items:flex-end;justify-content:center;padding:0} /* 2026-09-11 (4.A1, D-Z): the portrait is now the background-removed CUT-OUT (attachment 161, `-derived`, pending Marcel's sign-off), so it is contained and bottom-aligned on the peach, as the design PDF draws it — no longer a cover-crop of the cafe photo. That is what un-hides the crosses-peach layer (P-D / D-T). */ .elementor .bhv-marcel-right img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:50% 100%;display:block} .elementor .bhv-marcel-copy.bhv-marcel-copy{max-width:var(--measure-marcel);margin:18px 0 0} .elementor .bhv-marcel-cta.bhv-marcel-cta{margin-block-start:18px;padding:0;min-width:0; display:flex;flex-direction:row} .elementor .bhv-stats.bhv-stats{display:flex;flex-direction:row;gap:var(--footer-gap); flex-wrap:wrap;margin-block-start:36px;padding:0;min-width:0} .elementor .bhv-stat.bhv-stat{min-width:0;padding:0;display:flex;flex-direction:column} .elementor .bhv-stat-value.bhv-stat-value{display:block;font-family:var(--stack-heading); font-weight:400;font-size:var(--text-stat);line-height:1;margin:0} .elementor .bhv-stat-label.bhv-stat-label{display:block;font-family:var(--stack-body); font-weight:700;font-size:var(--text-stat-label);letter-spacing:.08em; text-transform:uppercase;opacity:.9;margin:6px 0 0;line-height:1.6} @media(max-width:900px){ .elementor .bhv-marcel.bhv-marcel{grid-template-columns:minmax(0,1fr)} .elementor .bhv-marcel-left::after{display:none} .elementor .bhv-marcel-right.bhv-marcel-right{min-height:420px} } /* --- C12 contact band (home only) --------------------------------------- D-K: `.offer` takes radius-card 22px. D-O: the WhatsApp row is in the blocked- content register - the component supports it, the link is NOT published until Marcel confirms the number carries WhatsApp, so it is absent here. -------- */ .elementor .bhv-contact-band.bhv-contact-band{display:grid;grid-template-columns:1.1fr .9fr; gap:var(--footer-gap);align-items:center;padding:0;min-width:0} .elementor .bhv-contact-band > *{min-width:0} .elementor .bhv-contact-copy.bhv-contact-copy{max-width:var(--measure-contact); font-size:var(--text-lead);margin:18px 0 0} .elementor .bhv-actions.bhv-actions{display:flex;flex-direction:row;gap:var(--btn-gap); flex-wrap:wrap;margin-block-start:28px;padding:0;min-width:0} .elementor .bhv-offer.bhv-offer{position:relative;padding:32px;border-radius:var(--radius-card); display:block;min-width:0; border:var(--border-hairline) solid color-mix(in srgb,var(--color-on-primary) 30%,transparent); background-color:color-mix(in srgb,var(--color-on-primary) 4%,transparent)} .elementor .bhv-offer-badge.bhv-offer-badge{position:absolute;inset-block-start:-18px; inset-inline-end:24px;z-index:2} .elementor .bhv-offer .text-h3{color:var(--color-on-primary);font-size:var(--text-h3-offer); margin:6px 0 10px} .elementor .bhv-offer p{margin:0} /* C16 check list, C12 instance: 28px disc, 16px tick, centred. The generic `.list-check` (26px / 15px / top-aligned) is task 4.16 and is NOT this rule. The tick is a white-KEYWORD SVG over a token background - no hex anywhere. */ .elementor .bhv-checks.bhv-checks{display:block;margin:0;width:100%} .elementor .bhv-checks ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:var(--btn-gap)} .elementor .bhv-checks li{display:flex;gap:var(--chip-gap);align-items:center; font-size:var(--text-body);margin:0} .elementor .bhv-checks li::before{content:"";width:28px;height:28px;border-radius:50%;flex:none; background:var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/16px no-repeat} @media(max-width:900px){.elementor .bhv-contact-band.bhv-contact-band{grid-template-columns:minmax(0,1fr)}} /* Demo-only stack for the C13 reference page's prose column. ⚠
is NOT in html-v3's allow-list on 4.2.4 - Document::save() strips it silently, measured on this build - so prose is ONE e-paragraph per paragraph and the spacing has to be a gap. Task 4.21 (C22 prose block) owns the real rule; this is a stand-in so the sidebar has something to stand beside. -------------------------------------- */ .elementor .bhv-prose-demo.bhv-prose-demo{gap:1em} /* --- C13 sidebar card (sticky) ------------------------------------------- BUILD TRAP (design-lessons 2026-09-02): without align-self:start the card stretches to the full height of the prose column, and a stretched element already fills its scrollport, so position:sticky silently does nothing. Both the grid child AND the card carry it - the `surface-cream` Global Class also sets it, which is a deliberate second belt. D-K keeps radius-card here. The /contact/ variant is 1.4fr 1fr and static, and is NOT sticky (approved). */ .elementor .bhv-article-grid.bhv-article-grid{display:grid; grid-template-columns:1fr var(--sidebar-w);gap:var(--article-gap);padding:0;min-width:0} .elementor .bhv-article-grid > *{min-width:0;align-self:start} .elementor .bhv-article-grid-contact.bhv-article-grid-contact{grid-template-columns:1.4fr 1fr} .elementor .bhv-side.bhv-side{position:sticky;inset-block-start:var(--sidebar-sticky-top); align-self:start;display:flex;flex-direction:column;align-items:stretch;min-width:0} .elementor .bhv-side-static.bhv-side-static{position:static} .elementor .bhv-side.bhv-side .text-h3.text-h3{margin:0 0 8px} .elementor .bhv-side-copy.bhv-side-copy{font-size:15px;margin:0 0 1em} .elementor .bhv-side-list.bhv-side-list{display:block;margin:0} .elementor .bhv-side-list ul{padding-inline-start:1.1em;margin:12px 0;font-size:15px} .elementor .bhv-side-copy + .bhv-side-list ul{margin-top:0} .elementor .bhv-side-list li{margin:0} /* (0,3,0) - beats the button Global Classes' own display/width in the later bucket. */ .elementor .bhv-side .btn-primary,.elementor .bhv-side .btn-secondary, .elementor .bhv-side .btn-primary-lg,.elementor .bhv-side .btn-ghost{ width:100%;margin-block-start:10px} @media(max-width:960px){ .elementor .bhv-article-grid.bhv-article-grid, .elementor .bhv-article-grid-contact.bhv-article-grid-contact{grid-template-columns:minmax(0,1fr)} .elementor .bhv-side.bhv-side{position:static} } /* =========================================================================================== BATCH 4B (2026-09-11) — C14 FAQ, C19 contact form, C20 agenda, C21 cursuskiezer. Same contract as 4A (memory 160): literal bhv-* hooks, doubled classes against base-desktop.css, every value a token unless it is single-use geometry (D-W). Four of these surfaces are v3 ISLANDS (design-tokens.md 5.2): a legacy container at page root that re-creates `section` + `container`, so the v3 widget inside never sits in a v4 wrapper. Their .elementor-kit-11s are deliberately heavier than Elementor's own per-widget rules (`.elementor- .elementor-element.elementor-element- ...` = 0,4,0 or 0,5,0). =========================================================================================== */ /* --- v3 island shell ------------------------------------------------------------------------ */ .elementor .e-con.bhv-island.bhv-island{ --padding-top:var(--section-pad);--padding-bottom:var(--section-pad); --padding-left:var(--container-pad);--padding-right:var(--container-pad); --gap:0px;--row-gap:0px;--column-gap:0px;align-items:center} .elementor .e-con.bhv-island.bhv-island > .elementor-element{ width:100%;max-width:calc(var(--container-max) - 2 * var(--container-pad))} /* --- C14 FAQ accordion (Elementor nested-accordion, v3) ------------------------------------- */ /* PROTO: a LEFT-aligned 820px column inside the 1160 container; one
per question. */ .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion{max-width:var(--measure-faq-col)} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item{ border:var(--border-hairline) solid var(--color-border);border-radius:var(--radius-sm); padding:0 22px;margin:0 0 12px;background-color:var(--color-surface);scroll-margin-top:110px} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item > .e-n-accordion-item-title{ display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px; padding:18px 0;margin:0;border:0;border-radius:0;background:none;cursor:pointer;list-style:none; font-family:var(--font-heading);font-weight:400;font-size:var(--text-summary);line-height:1.6; color:var(--color-primary)} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item-title::-webkit-details-marker{display:none} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item-title-header{flex:1 1 auto} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item-title-text{font:inherit;color:inherit} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item-title::after{ content:"+";flex:none;color:var(--color-accent);font-size:var(--text-summary-icon);line-height:1} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after{content:"\2013"} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .bhv-faq-a.bhv-faq-a{ --padding-top:0px;--padding-right:0px;--padding-bottom:20px;--padding-left:0px; border:0;background:none;max-width:var(--measure-prose); font-family:var(--font-body);font-size:var(--text-answer-body);line-height:1.6;color:var(--color-text)} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .bhv-faq-a .elementor-widget-text-editor{font:inherit;color:inherit} .elementor .elementor-element.elementor-widget-n-accordion.bhv-faq .bhv-faq-a p{margin:0} /* --- C19 contact form (Elementor Pro Form, v3) ---------------------------------------------- */ /* Grid, not Pro's padded flex columns. The honeypot's wrapper is not a field group and the hidden `datum` field has no visible form — both are taken out of the grid entirely. */ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-form-fields-wrapper{ display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-form-fields-wrapper > *{ width:auto;max-width:none;min-width:0;margin:0;padding:0} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-form-fields-wrapper > .elementor-col-100{grid-column:1 / -1} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-form-fields-wrapper > .elementor-field-type-hidden, .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-form-fields-wrapper > div:not(.elementor-field-group){display:none} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-group{display:block} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-label{ display:block;margin:0 0 6px;padding:0;font-family:var(--font-body);font-weight:700; font-size:var(--text-label);line-height:1.4;color:var(--color-text)} /* Mirrors the v4 `input-field` Global Class value for value — a v3 control cannot take it. */ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-textual{ width:100%;max-width:100%;min-height:var(--control-h);margin:0;padding:12px 16px; border:var(--border-control) solid var(--color-border);border-radius:var(--radius-input); background-color:var(--color-surface);color:var(--color-text);box-shadow:none; font-family:var(--font-body);font-size:var(--text-body);line-height:1.6} .elementor .elementor-widget-form.bhv-form.bhv-form select.elementor-field-textual{padding-inline-end:44px} .elementor .elementor-widget-form.bhv-form.bhv-form textarea.elementor-field-textual{min-height:140px;resize:vertical} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-select-wrapper{width:100%} /* Focus — components.md C19: 3px accent ring, offset 2px, accent border. Pro's own `.elementor-field-textual:focus{outline:0}` is (0,2,0); this is (0,6,0). */ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-textual:focus-visible{ border-color:var(--color-accent);outline:3px solid var(--color-accent);outline-offset:2px} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-type-acceptance .elementor-field-subgroup{display:block;width:100%} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-type-acceptance .elementor-field-option{ display:flex;gap:10px;align-items:flex-start;margin:0} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-acceptance-field{ flex:none;width:auto;min-height:0;margin:4px 0 0;accent-color:var(--color-accent)} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-acceptance-field:focus-visible{ outline:3px solid var(--color-accent);outline-offset:2px} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-type-acceptance label{ margin:0;font-family:var(--font-body);font-size:var(--text-consent);font-weight:400;line-height:1.5;color:var(--color-text)} /* The consent link sits inside the C24 marker; accent-on-marker would be unreadable. */ .elementor .tbc a,.elementor span[id^="tbc-"] a{color:inherit;text-decoration:underline} /* Submit — mirrors `btn-primary-lg`, full width (components.md C19). */ .elementor .elementor-widget-form.bhv-form.bhv-form .e-form__buttons .elementor-button{ width:100%;min-height:var(--control-h-lg);margin:0;padding:0 var(--control-pad-x-lg); display:inline-flex;align-items:center;justify-content:center;gap:8px; border:var(--border-control) solid var(--color-accent);border-radius:var(--radius-pill); background-color:var(--color-accent);color:var(--color-on-primary);box-shadow:none;cursor:pointer; font-family:var(--font-body);font-weight:700;font-size:var(--text-btn-lg);line-height:1.1;text-decoration:none} .elementor .elementor-widget-form.bhv-form.bhv-form .e-form__buttons .elementor-button:hover, .elementor .elementor-widget-form.bhv-form.bhv-form .e-form__buttons .elementor-button:focus-visible{ background-color:var(--orange-dark);border-color:var(--orange-dark);color:var(--color-on-primary)} .elementor .elementor-widget-form.bhv-form.bhv-form .e-form__buttons .elementor-button:focus-visible{ outline:3px solid var(--color-accent);outline-offset:3px} /* Error states — components.md C19 "never any red": Pro ships a red default on .elementor-message-danger; replaced here on every state. */ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-error .elementor-field-textual{ border-color:var(--orange-dark);background-color:var(--color-error-fill)} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-error .elementor-acceptance-field{ outline:2px solid var(--orange-dark);outline-offset:2px} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-group .elementor-message{ display:block;margin:6px 0 0;padding:0;border:0;background:none; font-family:var(--font-body);font-size:var(--text-label);font-weight:700;line-height:1.4; color:var(--color-error-text)} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-message::before{content:none;display:none} /* Form-level message base (C19 update 2026-09-21): the failure values, so no Pro message type can fall back to the [te bevestigen] marker look. Success and danger are set explicitly below (m-05 block). */ .elementor .elementor-widget-form.bhv-form.bhv-form form > .elementor-message{ margin:18px 0 0;padding:22px;border:var(--border-control) solid var(--orange-dark); border-radius:var(--radius-sm);background-color:var(--color-error-fill);color:var(--color-error-text); font-family:var(--font-body);font-size:var(--text-label);font-weight:700;line-height:1.4} /* --- C20 agenda ----------------------------------------------------------------------------- */ .elementor .bhv-agenda-top.bhv-agenda-top{padding-block-start:var(--section-pad)} .elementor .bhv-agenda-pills.bhv-agenda-pills{ display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--pill-gap);margin:26px 0 30px;padding:0} .elementor .bhv-agenda-pills.bhv-agenda-pills > *{width:auto;flex:none} .elementor .e-con.bhv-island.bhv-island-agenda{--padding-top:0px} .elementor .bhv-agenda .bhv-table-wrap{ overflow-x:auto;border:var(--border-hairline) solid var(--color-border); border-radius:var(--radius-md);background-color:var(--color-surface)} .elementor .bhv-agenda .bhv-agenda-table{ width:100%;margin:0;border-collapse:collapse;font-family:var(--font-body);font-size:var(--text-table)} .elementor .bhv-agenda .bhv-agenda-table th{ padding:12px 14px;border:0;border-bottom:var(--border-control) solid var(--color-border);background:none; text-align:start;font-size:var(--text-table-th);font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap} .elementor .bhv-agenda .bhv-agenda-table td{ padding:16px 14px;border:0;border-bottom:var(--border-hairline) solid var(--line-soft); background:none;vertical-align:middle;color:var(--color-text)} .elementor .bhv-agenda .bhv-agenda-table tbody tr:last-child td{border-bottom:0} .elementor .bhv-agenda .bhv-agenda-table tr[hidden]{display:none} .elementor .bhv-agenda .bhv-agenda-name{display:block} .elementor .bhv-agenda .bhv-agenda-duur{display:block;font-size:var(--text-small);color:var(--color-text-muted)} .elementor .bhv-agenda .bhv-agenda-btn{min-height:var(--control-h-min);padding:0 var(--control-pad-x-row);white-space:nowrap} .elementor .bhv-agenda .bhv-agenda-empty{padding:32px 22px;text-align:center} .elementor .bhv-agenda .bhv-agenda-empty p{margin:0;font-size:var(--text-lead);line-height:1.6;color:var(--color-text-muted)} .elementor .bhv-agenda .bhv-agenda-note{margin:12px 0 0;font-size:var(--text-small);color:var(--color-text-muted)} /* --- C21 cursuskiezer ----------------------------------------------------------------------- */ .elementor .bhv-kiezer.bhv-kiezer{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start;padding:0} .elementor .bhv-kiezer.bhv-kiezer > *{width:auto;min-width:0} .elementor .bhv-kiezer-options.bhv-kiezer-options > *{width:100%} .elementor .bhv-kiezer-chip.bhv-kiezer-chip{justify-content:flex-start;width:100%} .elementor .bhv-kiezer-answers.bhv-kiezer-answers{display:block;padding:0} .elementor .bhv-kiezer-panel.bhv-kiezer-panel{display:flex;flex-direction:column;padding:32px} /* `hidden` must survive every display rule above — the seven answers are in the HTML for crawlers (technical-seo 6.1) and invisible until chosen. */ .elementor .bhv-kiezer-panel.bhv-kiezer-panel[hidden]{display:none} .elementor .bhv-kiezer-h3.bhv-kiezer-h3{font-size:var(--text-h3-answer);margin:0 0 10px} .elementor .bhv-kiezer-actions.bhv-kiezer-actions{ display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--btn-gap);margin-block-start:22px;padding:0} .elementor .bhv-kiezer-actions.bhv-kiezer-actions > *{width:auto;flex:none} @media(max-width:900px){ .elementor .bhv-kiezer.bhv-kiezer{grid-template-columns:1fr} } @media(max-width:640px){ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-form-fields-wrapper{grid-template-columns:1fr} } /* --- 4B fixes found by measuring (2026-09-11) ----------------------------------------------- */ /* (1) Pro generates `.elementor- .elementor-element.elementor-element- .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background:#fff}` at (0,6,0) in post-.css, which loads AFTER the kit — it tied the error fill and won on order. This is (0,7,0). */ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-group.elementor-error .elementor-field-textual{ border-color:var(--orange-dark);background-color:var(--color-error-fill)} /* (2) Pro appends a select's error INSIDE its flex select-wrapper, and a checkbox's error inside the flex consent row, so both sat beside the control. Wrap them onto their own line, and pin the select caret to the select's own centre (border + padding + half the 1.6 line box) so it does not drift when the wrapper grows. */ .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-select-wrapper{flex-wrap:wrap} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-select-wrapper > select{flex:1 1 100%} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-select-wrapper > .elementor-message, .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-option > .elementor-message{flex:0 0 100%} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-field-type-acceptance .elementor-field-option{flex-wrap:wrap} .elementor .elementor-widget-form.bhv-form.bhv-form .elementor-select-wrapper .select-caret-down-wrapper{ top:calc(var(--border-control) + 12px + 0.8 * var(--text-body))} /* (3) Hello's reset gives `[tabindex]:not([tabindex="-1"]):focus-visible` a BLACK 2px ring plus a white box-shadow at (0,3,0), which beats the kit's `.elementor :focus-visible` (0,2,0) on any element carrying a tabindex — the FAQ
is one. Element-qualified replacement, same ring as everywhere else (wordpress-lessons 2026-09-10, Ausim). */ .elementor [tabindex]:not([tabindex="-1"]):focus-visible{ outline:3px solid var(--color-accent);outline-offset:3px;box-shadow:none} /* =========================================================================================== BATCH 4C (2026-09-14) — 4.C1 sticky header · C15 steps · C16 check list · C18 Kennisbank pills =========================================================================================== */ /* --- 4.C1 — the header actually sticks (decision D-AJ, finding E-C0-1) ------------------------ C1 / PROTO .header: `position:sticky; top:0; z-index:50`. Since Batch 3 that declaration sat on .s-bhv-headerbar, whose containing block is Elementor Pro's own location wrapper
. The wrapper is exactly as tall as the bar (87px), so the bar had no room to stick - measured bar top -1500 at scrollY 1500 on every width (worklog 4.C0). The wrapper is a direct child of ; body's overflow-x:clip creates no scroll container, so sticky on the WRAPPER resolves against the viewport. The bar keeps its own (now inert) sticky and its backdrop-filter. The drawer stays a body-level sibling at z-index 200, above this 50. (a) Logged in: the WordPress admin bar is position:fixed and publishes its height as --wp-admin--admin-bar--height (32px; 46px at <=782px) ONLY while it is shown, so for visitors the fallback is 0. At <=600px admin-bar.css makes the bar position:absolute and it scrolls away, so the header goes back to top:0 there. (b) Anchors: PROTO has no scroll-margin / scroll-padding (its router centres a hash target with scrollIntoView, which the C14 controller copies). A sticky bar would otherwise cover any target the browser scrolls to the top edge: a native #hash jump, or keyboard focus scrolling onto an element (WCAG 2.4.11). scroll-padding-top reserves exactly the bar: --header-h (86) + the 1px hairline = the measured 87px, plus the admin bar when present. :root (0,1,0) beats admin-bar.css's own `html{scroll-padding-top}` (0,0,1) in any order. (c) C13's sticky sidebar (top 110 = bar 87 + 23) keeps its gap below the header when the admin bar is present; for visitors the added term is 0, so nothing changes. */ .elementor.elementor-location-header{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50} :root{scroll-padding-top:calc(var(--header-h) + var(--border-hairline) + var(--wp-admin--admin-bar--height,0px))} @media(min-width:601px){ .elementor .bhv-side.bhv-side{inset-block-start:calc(var(--sidebar-sticky-top) + var(--wp-admin--admin-bar--height,0px))} } @media screen and (max-width:600px){ .elementor.elementor-location-header{top:0} :root{scroll-padding-top:calc(var(--header-h) + var(--border-hairline))} } /* --- C15 steps (task 4.15; /bhv-training/ only, strategy D7) ------------------------------------ PROTO: .steps{display:grid;gap:18px;counter-reset:s} .step{display:grid;grid-template-columns:56px 1fr;gap:18px;border:1px solid var(--line); border-radius:18px;padding:20px 22px;background:#fff} .step::before{counter-increment:s;content:counter(s);font-family:Caprasimo;font-size:30px; color:var(--orange);line-height:1} (weight 400 - PROTO's 900 is overridden by its own font-weight:400!important rule; Caprasimo has one weight) .step h4{font-size:20px;margin-bottom:4px} .step p{margin:0;font-size:16px} MEASURED in PROTO at 1440: step 93.19px tall (21.6 + 4 + 25.6 + 40 + 2), numeral box 56 wide, h4 line box 21.6 = PROTO's h1-h4 line-height 1.08. The design system's `text-h4` class carries line-height 1.2 (agency value) - the title class below restores PROTO's 1.08 (a listed one-off). The numeral is a CSS COUNTER (components.md C15 [ASSUMPTION]): adding, removing or reordering a step in the editor renumbers the list, and nobody types a digit. Border colour is --color-border (#80adea, design-tokens C-2), not PROTO's --line #c9d8ee. 🔴 TRAP: atomic containers are `.e-con`, and frontend.min.css gives `.e-con:before` the background-overlay layer (position:absolute, top/left, width/height max(100%...), opacity, mix-blend-mode, border, a .3s transition). The numeral IS that ::before, so each of those is reset here or the numeral would become an absolutely positioned layer over the step (wordpress-lessons 2026-09-11, Ausim). --------------------------------------------------------- */ .elementor .bhv-steps.bhv-steps{display:grid;gap:var(--facts-gap);counter-reset:bhv-step;padding:0;min-width:0} .elementor .bhv-steps.bhv-steps > *{width:auto;min-width:0} .elementor .bhv-step.bhv-step{display:grid;grid-template-columns:56px 1fr;gap:var(--facts-gap); border:var(--border-hairline) solid var(--color-border);border-radius:var(--radius-md); padding:20px 22px;background-color:var(--color-surface)} .elementor .bhv-step.bhv-step::before{counter-increment:bhv-step;content:counter(bhv-step); display:block;position:static;top:auto;left:auto;width:auto;height:auto;opacity:1; mix-blend-mode:normal;border:0;border-radius:0;transition:none; font-family:var(--stack-heading);font-weight:400;font-size:var(--text-step-num);line-height:1; color:var(--color-accent)} .elementor .bhv-step.bhv-step > *{width:auto;min-width:0} .elementor .bhv-step-title.bhv-step-title{margin:0 0 4px;line-height:1.08} .elementor .bhv-step-body.bhv-step-body{margin:0;font-size:var(--text-step-body);line-height:1.6} /* --- C16 check list, prose size (task 4.16) --------------------------------------------------- PROTO: .list-check{list-style:none;padding:0;margin:0;display:grid;gap:12px} .list-check li{display:flex;gap:12px;align-items:flex-start} .list-check li::before{26x26 orange disc, margin-top:2px, white tick centre/15px} ⚠ MEASURED IN PROTO, NOT READ OFF THE SPEC: all eight of PROTO's check lists sit inside .prose, and `.prose ul{padding-left:1.2em}` + `.prose li{margin:.35em 0}` (both 0,1,1) outrank `.list-check` (0,1,0). Rendered at 1440: ul padding-left 21px, li margin 6.125px top and bottom, gap 12px. components.md C16 lists padding 0 because it read the declaration; PROTO owns every dimension, so the rendered values are built (in em, so they follow the list's own font size). Built like C12's `.bhv-checks`: ONE e-paragraph (tag span) holding a real
- html-v3 allows ul / li / b on 4.2.4 and they survive Document::save() (measured at 4A). The tick is a white-KEYWORD SVG over the accent token, so the accent keeps exactly two homes. The C12 offer-card size (28px / 16px / centred) is `.bhv-checks` and is NOT this rule. ----------------------------------- */ .elementor .bhv-list-check.bhv-list-check{display:block;margin:0} .elementor .bhv-list-check ul{list-style:none;padding:0 0 0 1.2em;margin:0;display:grid;gap:var(--chip-gap)} .elementor .bhv-list-check li{display:flex;gap:var(--chip-gap);align-items:flex-start;margin:.35em 0} .elementor .bhv-list-check li::before{content:"";width:26px;height:26px;border-radius:50%;flex:none;margin-top:2px; background:var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/15px no-repeat} .elementor .bhv-list-check b{font-weight:700} /* 4.C3(b) / D-AV (human, 2026-09-14): at 374px and below the bold lead-in check list scrolled 2px sideways at 320px (li min-content 282.73px = 26 bullet + 12 gap + lead-in + 12 gap + longest word "tussenpersonen."). Tighter gap on lead-in items only (4px less per gap), scoped with :has(> b) so plain check lists keep 12px. No effect at 375px and up. Words never break (no overflow-wrap change). */ @media (max-width:374px){.elementor .bhv-list-check li:has(> b){gap:calc(var(--chip-gap) - 4px)}} /* --- C18 Kennisbank filter pills (task 4.17) ---------------------------------------------------- PROTO .filter{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px}. The
and its