/* ============================================================ bconnect-lu.css — gedeelde basis van de lu-*-familie (/live-chat-uitbesteden/). Elf lu-widgets delen deze regels: het sectie-ritme met de twee achtergrondwassen, de reveal, de koppen en lopende tekst, de linkregel, de tekstlink, de kaart met zijn binnenraster, het lijnicoon (los of in een gradient-tegel), de beeldkolom en het `.lu-split`-raster dat lu-werkt, lu-split en lu-tarieven alle drie gebruiken. Bewust NIET sitewide geënqueued en bewust geen kopie per widget: elke lu-widget noemt `bconnect-lu` in get_style_depends(), dus het laadt alleen waar een lu-widget staat en kan niet stil wegvallen. Overgenomen uit de Claude Design-export "Live chat uitbesteden (standalone).html" (upgrade-uitbesteden.css, 23-09-2026), met drie correcties op de bron: 1. DE REVEAL IS GESCOPED OP .lu-sec, NIET OP .au-sec. Zie punt 1 van het HARDENING-blok onderaan. 2. DE 4:3-RATIODOOS IN .lu-figure IS ERUIT. Zie punt 2 van het HARDENING-blok onderaan. 3. `.lu-figure-col` KRIJGT EIGEN REGELS. De bron rendert die wrapper wel maar stijlt hem nergens. Als rasterkind van .lu-split heeft hij `min-width: 0` nodig, anders kan een breed beeld de kolom oprekken voorbij `minmax (0, 1fr)`. ============================================================ */ /* GEEN EIGEN FAMILIEVARIABELE VOOR DE GRADIENT. Hier stond `:root { --lu-gradient: var(--gradient-brand, ...) }`, en de regels hieronder gebruikten die alias. Dat overleeft de Autoptimize-minificatie niet betrouwbaar: op 23-09-2026 bleek de `:root`-regel volledig te ontbreken uit de geminificeerde kopie van bconnect-lu.css (55 regels in de bron, 54 geserveerd, en dat ene verschil was precies deze regel). Met `?ao_noptimize=1` werkte alles. Elke `var(--lu-gradient)` viel daardoor terug op niets: accentwoorden transparant, icoontegels leeg, stapnummers wit-op-wit. De families die dit nooit hadden — ac, dk en lg — gebruiken rechtstreeks `--brand-gradient` uit tokens.css, dat via de handle `bconnect-tokens` overal laadt. Dat doet deze familie nu ook. Er is geen familievariabele meer om te verliezen, en dus ook geen fallback-kleur nodig. LES VOOR DE VOLGENDE FAMILIE: definieer geen eigen gradient-token in een familie-stylesheet. Gebruik `var(--brand-gradient)` uit tokens.css. */ /* ---- sectie-ritme + achtergrondwassen ---------------------- */ .lu-sec { position: relative; display: block; width: 100%; box-sizing: border-box; padding: clamp(56px, 6vw, 96px) 0; overflow: hidden; } .lu-bg-light { background: #fff; } .lu-bg-lav { background: #EEF1F8; } .lu-bg-light::before, .lu-bg-lav::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(620px 340px at 88% 8%, rgba(35, 1, 251, .045), transparent 60%), radial-gradient(520px 300px at 2% 92%, rgba(168, 2, 144, .035), transparent 58%); } .lu-sec > .container { position: relative; z-index: 1; } /* ---- reveal ------------------------------------------------- Gescoped op .lu-sec; zie het HARDENING-blok onderaan. De klasse is-inview komt van window.Bconnect.reveal() uit bconnect-shared.js, is-settled zet de transitie daarna uit zodat er niets blijft hangen. .lu-in is de aparte hero-variant: die sectie revealt bij het laden en niet bij scroll, dus hij hangt niet aan .lu-sec. */ @media (prefers-reduced-motion: no-preference) { .lu-sec .lu-rise { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .lu-sec:not(.is-inview) .lu-rise { opacity: 0; transform: translateY(16px); } .lu-sec.is-settled .lu-rise { transition: none; opacity: 1; transform: none; } .lu-in { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } .lu-in.is-in { opacity: 1; transform: none; } } /* ---- koppen en lopende tekst ------------------------------- */ .lu-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: 16px; } .lu-h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.025em; color: var(--c-navy); margin: 0; text-wrap: balance; } .lu-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(27px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -.02em; color: var(--c-navy); margin: 0; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; } .lu-h1 .accent, .lu-h2 .accent { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .lu-intro { font-size: var(--fs-lead); line-height: 1.62; color: var(--c-text-muted); margin: 18px 0 0; max-width: 62ch; text-wrap: pretty; } .lu-body { font-size: 16.5px; line-height: 1.68; color: var(--c-text-muted); margin: 16px 0 0; max-width: 62ch; text-wrap: pretty; } .lu-head { display: block; width: 100%; box-sizing: border-box; max-width: 860px; } .lu-head.is-center { margin: 0 auto; text-align: center; max-width: 760px; } .lu-head.is-center .lu-intro, .lu-head.is-center .lu-body { margin-left: auto; margin-right: auto; } .lu-closing { text-align: center; margin: clamp(30px, 3.4vw, 42px) auto 0; max-width: 58ch; font-size: 15.5px; line-height: 1.6; color: var(--c-text-soft); text-wrap: pretty; } /* ---- linkregel ---------------------------------------------- De onderstreepte link binnen een sectie. De bron schrijft dit als `.lu-sec a:not(.btn):not(.lu-textlink):not(.lu-subnav-link)` — (0,4,1) met de negaties meegerekend. Dat is zwaar genoeg om de knoppen en de subnav-links met rust te laten en licht genoeg om onder het HARDENING-blok van een widget door te gaan. */ .lu-linkline { font-size: 15.5px; line-height: 1.65; color: var(--c-text-muted); margin: 26px 0 0; max-width: 72ch; text-wrap: pretty; } .lu-linkline.is-center { text-align: center; margin-left: auto; margin-right: auto; } .lu-sec a:not(.btn):not(.lu-textlink):not(.lu-subnav-link), .lu-faq-a-inner a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 20, 100, .28); text-underline-offset: 3px; transition: color .18s var(--ease); } .lu-sec a:not(.btn):not(.lu-textlink):not(.lu-subnav-link):hover, .lu-faq-a-inner a:hover { color: var(--c-magenta); text-decoration-color: var(--c-magenta); } /* ---- CTA-rij ------------------------------------------------ */ .lu-ctarow { display: flex; width: 100%; box-sizing: border-box; justify-content: center; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: clamp(26px, 3vw, 36px); } /* De knop in .lu-ctarow komt uit bconnect_section_cta(), en die rendert zijn eigen `.bc-sec-cta` met display:flex, justify-content:center en een eigen margin-top. Twee bovenmarges op elkaar en twee keer centreren is niet de bedoeling: de rij bepaalt de plaatsing, het blok binnenin niet. `.bc-sec-cta` staat op (0,1,0) in bconnect-shared.css, dus (0,2,0) hieronder wint daar zonder van laadorde af te hangen. */ .lu-ctarow .bc-sec-cta { display: flex; width: auto; box-sizing: border-box; margin-top: 0; justify-content: center; } /* ---- tekstlink met pijl ------------------------------------ */ .lu-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; transition: color .18s var(--ease), gap .18s var(--ease); } .lu-textlink:hover { color: var(--c-magenta); gap: 11px; } .lu-textlink .arr { transition: transform .18s var(--ease); } .lu-textlink:hover .arr { transform: translateX(3px); } /* ---- kaart -------------------------------------------------- `.lu-cards3`, `.lu-grid2` en `.lu-row4` staan elk in het stylesheet van hun eigen widget; de kaart die ze alle drie vullen staat hier. Het binnenraster zet het icoon links en de kop ernaast, met de alinea eronder over de volle breedte — vandaar `display: contents` op de
die kop en alinea in de markup bij elkaar houdt. */ .lu-card { display: block; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #E3DFF5; border-radius: 12px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .lu-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); } .lu-card h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 17.5px; line-height: 1.28; letter-spacing: -.01em; color: var(--c-navy); margin: 0; } .lu-card p { font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 8px 0 0; text-wrap: pretty; } .lu-cards3 .lu-card, .lu-grid2 .lu-card, .lu-row4 .lu-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 14px; } .lu-cards3 .lu-card > div, .lu-grid2 .lu-card > div, .lu-row4 .lu-card > div { display: contents; } .lu-cards3 .lu-card p, .lu-grid2 .lu-card p, .lu-row4 .lu-card p { grid-column: 1 / -1; margin: 0; } /* ---- lijnicoon ---------------------------------------------- Los 64px navy (lu-wanneer, lu-kanalen), of in een 48px gradient-tegel met een wit icoon van 24px (lu-zonder). De SVG zelf komt uit line_icon() in de trait: viewBox 0 0 24 24, stroke currentColor, stroke-width 1.75 voor alle veertien iconen van deze familie. */ .lu-ico { display: flex; align-items: center; justify-content: center; flex: none; color: var(--c-navy, #141464); } .lu-ico svg { display: block; width: 64px; height: 64px; } .lu-ico.is-tile { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-gradient); box-shadow: 0 6px 16px rgba(168, 2, 142, .22); color: #fff; } .lu-ico.is-tile svg { width: 24px; height: 24px; } /* ============================================================ .lu-split — tekst naast beeld, en de beeldkolom erin. Gedeeld door lu-werkt, lu-split (twee exemplaren) en lu-tarieven. Daarom hier en niet in één van de drie widget-stylesheets: dan zou de rest hem missen zodra die alleen op de pagina staat. ============================================================ */ .lu-split { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; } .lu-split.is-top { align-items: start; } .lu-figure-col { display: block; width: 100%; min-width: 0; box-sizing: border-box; } /* GEEN ratiodoos. Zie punt 2 van het HARDENING-blok onderaan. `overflow: hidden` blijft staan voor de afgeronde hoek; zonder de ratiodoos kan hij niets afsnijden, want de hoogte volgt uit het beeld zelf. `.is-bare` is het beeld zonder kader (lu-werkt). */ .lu-figure { position: relative; display: block; width: 100%; box-sizing: border-box; border-radius: 12px; overflow: hidden; background: #F4F2FB; border: 1px solid #E3DFF5; box-shadow: 0 16px 40px rgba(20, 20, 100, .08); } .lu-figure > img { display: block; width: 100%; height: auto; } .lu-figure.is-bare { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } @media (max-width: 1024px) { .lu-split { grid-template-columns: 1fr; gap: 32px; } .lu-split .lu-order-fig { order: 2; } } @media (max-width: 768px) { .lu-sec { padding: 64px 0; } } /* ============================================================ HARDENING 1. DE REVEAL IS GESCOPED OP .lu-sec, NIET OP .au-sec. In de bron staat `.au-sec:not(.is-inview) .lu-rise` terwijl de secties alleen `.lu-sec` dragen. Die selector matcht dus nooit en de reveal is dood. De dk-familie loste dat op door `au-sec` óók op de sectie te zetten; dat maakt een afhankelijkheid tussen twee widgetfamilies die niets met elkaar te maken hebben, en automotive.css laadt op deze pagina niet eens. Dit is de DERDE keer dat een Claude Design-export een vreemde sectie-class meebracht: ac (02-09-2026), cf (03-09-2026) en nu lu. De oorzaak is steeds dezelfde en staat in bconnect-cf.css uitgeschreven: `useReveal()` komt uit automotive.jsx en de `cls()` daarin plakt onvoorwaardelijk " au-sec" achter elke sectieklasse. Elke pagina die die hook leent, erft de class. Meet het in de browser, lees het niet uit deze bron: een reveal die niet matcht laat de sectie gewoon op opacity 1 staan en geeft geen enkel signaal af. 2. GEEN RATIODOOS IN .lu-figure. De bron zet `.lu-figure::before { padding-top: 75% }` naast `overflow: hidden`, en drukt dat vervolgens weg met `.lu-figure.is-img::before { display: none }`. Alle drie de beeldaanroepen in de bron geven een src mee en krijgen dus `is-img`, waardoor de ratiodoos in de hele export dode code is. Die constructie is niet overgenomen. Een doos met een vaste verhouding én overflow hidden is een plafond in plaats van een verhouding: zodra de inhoud hoger wordt dan de ratio toelaat, wordt de rest weggesneden zonder dat je het aan de layout ziet. Dat is precies wat bij .ac-herofig gebeurde (commit 4bf557c: 4 tot 127px werd er afgesneden, afhankelijk van de vensterbreedte). Door de doos eruit te halen in plaats van `is-img` te borgen, kan de fout niet terugkomen via een vergeten klasse. De krijgt width/height-attributen via img() uit de trait, zodat er geen layout shift ontstaat nu de doos de ruimte niet meer reserveert. `.lu-figure-lbl` (het monospace-label "bestandsnaam · 4:3" onder de placeholder) en de `image-slot`-regel zijn om dezelfde reden weg: dat is gereedschap van de ontwerpomgeving, niet van deze site. 3. `.container` binnen een lu-sectie. Elementor zet op zijn eigen containers box-sizing en display, en een sectie die als widget in een Elementor-kolom staat erft daar een width van. Expliciet dus, op (0,2,0) zodat het boven een kale `.container` uitkomt. 4. Dit bestand heeft zelf geen -regels behalve die in `.lu-figure` — de rest staat per widget, in het HARDENING-blok van dat stylesheet, gescoped onder .elementor-widget-bconnect_lu_. Zie lu-logos.css en lu-track.css voor de scherpste gevallen. ============================================================ */ .lu-sec > .container { display: block; width: 100%; box-sizing: border-box; }