/* ============================================================
4CEE — Design tokens & fundering (foundation.css)
Thema: "Act3 Child 4CEE".
FONTS worden NIET hier geladen, maar via het ACT3-fontsysteem:
- Google Fonts-URL (Onest + Instrument Serif) in css/_fonts.css
of in de Site header HTML;
- ACT3-fontvariabelen op 'Onest' zetten;
- Theme settings > Typography > Fonts: "Use external fonts" aan.
Hieronder verwijzen we alleen nog naar de fontnamen.
Alle modules verwijzen naar deze variabelen, zodat de
huisstijl op één centrale plek beheerd wordt.
LET OP — KOPPELING NOG NIET ACTIEF:
Dit bestand is nog niet betrouwbaar gekoppeld aan het thema
(geen werkende @import of -tag bevestigd). De modules
gebruiken momenteel ALLEMAAL hardcoded waarden in hun eigen
module.css, niet deze var(--...)-tokens. Dit bestand is
voorbereidend — pas bruikbaar zodra de koppeling werkt.
BUTTONS staan hier NIET — die staan, vanwege de koppeling-
problemen, voorlopig alleen in child.css. Zie Buttons-dubbel
audit voor de achtergrond.
VANAF DEZE UPDATE:
- Content width standaard: 1500px
- Donkere tekstkleur: #030024
- Subtitel: 18px / line-height 28px
- Body opacity: 0.85
============================================================ */
:root {
/* --- Kleuren ------------------------------------------- */
--c-dark: #030024; /* titels, donkere achtergrond, "cta second" */
--c-white: #FFFFFF; /* puur wit — RESERVEER voor tekst, cards, tabellen, illustraties */
/* Pagina achtergrond — subtiel off-white
Gebruik voor de globale body/page achtergrond.
Puur wit (--c-white) blijft alleen voor cards en tekst. */
--c-bg-page: #FAFAFA;
--c-purple-darkest: #231C74; /* icoon-symbool / lijnwerk (altijd) */
--c-purple-medium: #95A0F5; /* icoon-achtergrond, hoofdvariant */
--c-purple-light: #DDDEF4; /* icoon-achtergrond subtiel + lichte vulling */
--c-turquoise: #00BD94; /* accent: AI / status / bijzondere features */
--c-yellow: #FFCD3F; /* primaire button */
--c-line-focus: #8592F0; /* harde scheidingslijn (duidelijk breekpunt) — NIET actief gebruikt in modules, controleren of nog nodig */
--c-line-soft: #CDD1F8; /* zachte scheidingslijn — NIET actief gebruikt in modules (bls-4cee gebruikt nu een losse hex-waarde, niet dit token) */
--c-accent: #6E7FFB; /* paars-blauw accent — bullets, FAQ-lijn, hover-states */
--c-accent-hover: #6A3FC8; /* paars hover-kleur voor .btn-overig en links */
/* Tekstkleuren (bodytekst op 85% opacity — bijgewerkt volgens nieuwe standaard) */
--c-title: var(--c-dark);
--c-title-inverse: var(--c-white);
--c-body: rgba(3, 0, 36, .85);
--c-body-inverse: rgba(255, 255, 255, .85);
/* Tekstkleuren — uitgebreide hiërarchie ---
5-lagen systeem voor betere tekst-hiërarchie.
Van sterkst naar zachtst:
--c-ink 100% donker titels, headings
--c-ink-strong 90% donker strong body, emphasis
--c-body-mid 75% donker default body (nieuw default)
--c-body-soft 55% donker secondary body, captions
--c-mute 40% donker placeholders, footer fine print
Bestaande --c-title en --c-body blijven werken (backwards
compatible). Nieuwe modules gebruiken deze fijnere schaal.
*/
--c-ink: #030024; /* = --c-dark */
--c-ink-strong: rgba(3, 0, 36, 0.90); /* strong emphasis */
--c-body-mid: rgba(3, 0, 36, 0.85); /* default body — nieuwe standaard 0.85 */
--c-body-soft: rgba(3, 0, 36, 0.55);
--c-mute: rgba(3, 0, 36, 0.40);
/* --- Gradients ----------------------------------------- */
/* Merkgradient (waarden van de secundaire button) */
--gradient-brand: linear-gradient(135deg,
#6A3FC8 0%, #603EC6 5%, #4B3BC3 15%, #3C39C1 25%,
#3337BF 40%, #3037BF 55%, #6E7FFB 100%);
/* Lichte gradient voor rustige contentsecties */
--gradient-light: linear-gradient(180deg, #FFFFFF 0%, #DDDEF4 100%);
/* --- Elevation & shadows — Lotus-tinted shadow systeem ---
Alle shadows gebruiken Lotus Blue (rgba 110,127,251) als
tint met verschillende opacity's. Zo krijgt elke lift een
subtiele brand-signature ipv neutrale grijze shadow.
Gebruik:
box-shadow: var(--shadow-md);
Niveaus:
none = geen shadow — flat surfaces
xs = zeer subtiele lift — buttons resting
sm = subtle card lift — kaart hover
md = duidelijke hover lift — events/contact hover
lg = raised card — belangrijke kaart
xl = floating modal — dialog, dropdown
Alle waardes matchen 4CEE's huidige events + contact-card
hover-effect voor consistentie door de site heen.
*/
--shadow-none: none;
--shadow-xs: 0 1px 2px rgba(110, 127, 251, 0.04);
--shadow-sm: 0 4px 12px rgba(110, 127, 251, 0.06);
--shadow-md: 0 8px 30px rgba(110, 127, 251, 0.12);
--shadow-lg: 0 12px 40px rgba(110, 127, 251, 0.16);
--shadow-xl: 0 24px 60px rgba(110, 127, 251, 0.20);
/* --- Transitions — micro-interaction timings -----------
Standaardiseert hoe animaties over de site aanvoelen.
Gebruik vaste waardes zodat alle interacties familie zijn.
Gebruik:
transition: color var(--t-quick) var(--ease-out);
transition: transform var(--t-normal) var(--ease-out),
box-shadow var(--t-normal) var(--ease-out);
Duration cheat-sheet:
instant = 0ms — geen animatie
quick = 150ms — snelle feedback (color, opacity)
normal = 250ms — default (transform, shadow, hover)
smooth = 400ms — grote elementen, panels
slow = 600ms — atmospheric, hero animations
Easing cheat-sheet:
out = ease-out — snel starten, zacht eindigen (default)
in-out = ease-in-out — soepel begin+eind
spring = cubic-bezier(.33,1,.68,1) — subtiele "bounce" voel
*/
--t-instant: 0ms;
--t-quick: 150ms;
--t-normal: 250ms;
--t-smooth: 400ms;
--t-slow: 600ms;
--ease-out: ease-out;
--ease-in-out: ease-in-out;
--ease-spring: cubic-bezier(0.33, 1, 0.68, 1);
/* --- Hoeken (border-radius) ---------------------------- */
--radius-sm: 7px; /* kleine vlakken, illustraties */
--radius-md: 15px; /* contentvlakken, kaarten */
--radius-lg: 50px; /* grote vlakken: hero, footer */
--radius-button: 12px; /* buttons — bijgewerkt van 10px naar 12px (werkende waarde uit child.css) */
/* --- Hoeken (border-radius) — nieuw systeem voor nieuwe modules
Bestaande --radius-sm, --radius-md, --radius-lg, --radius-button
hierboven BLIJVEN werken en veranderen NIET.
Deze nieuwe --r-* tokens zijn voor toekomstige modules
zodat er stapsgewijs één cohesive systeem ontstaat.
Gebruik:
border-radius: var(--r-md);
Cheat-sheet:
xs = 4px — small chips, inline pills
sm = 8px — compact cards, kleine vlakken
md = 12px — buttons (matcht huidige button radius)
lg = 15px — content vlakken, kaarten (matcht huidige)
xl = 22px — hero cards, prominent vlakken
xxl = 50px — hero/footer specifiek (matcht huidige)
full = 9999px — pills, circulaire icoon-containers
*/
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 15px;
--r-xl: 22px;
--r-xxl: 50px;
--r-full: 9999px;
/* --- Typografie ---------------------------------------- */
/* Beide fonts worden geladen via het ACT3-fontsysteem (zie kop bovenaan). */
--font-primary: 'Onest', system-ui, sans-serif; /* alle koppen + tekst */
--font-accent: 'Instrument Serif', Georgia, serif; /* cursief accent (hero/H1/H2) */
/* --- Line-heights — leesritme per tekst-type -----------
Definieert vertical rhythm van tekst.
Kleiner getal = compacter, groter = luchtiger.
Gebruik:
line-height: var(--lh-body);
Cheat-sheet:
tight = 1.0 — buttons, single-line labels
display = 1.1 — grote titels (H1, H2)
heading = 1.3 — sub-headings (H3, H4)
subtitle = 1.55 — intro-zinnen, subtitles (18px @ 28px lh)
body = 1.65 — long-form reading text
*/
--lh-tight: 1.0;
--lh-display: 1.1;
--lh-heading: 1.3;
--lh-subtitle: 1.5;
--lh-body: 1.65;
/* --- Letter-spacing — tracking per tekst-type ----------
Negatieve waardes = tighter (editorial), positieve = airy.
Onderdeel van de "Webflow tight display" filosofie.
Gebruik:
letter-spacing: var(--ls-display);
Cheat-sheet:
display = -0.02em — grote titels, tight editorial
heading = -0.01em — sub-headings, subtle tighten
body = 0 — normale tekst, geen tracking
eyebrow = 0.1em — uppercase labels, airy caps
*/
--ls-display: -0.02em;
--ls-heading: -0.01em;
--ls-body: 0;
--ls-eyebrow: 0.1em;
/* --- Layout -------------------------------------------- */
/* Layout regel je via ACT3 (Theme Settings → Layout), NIET hier:
- Content width → 1500px (pas aan als ACT3 instelling wijzigt)
- 12-koloms grid, gutter 24px → ACT3 classes: row > col s6, col s4 ...
- Vertical space → verticale ruimte tussen secties via ACT3
Onderstaande tokens zijn beschikbaar voor eigen module-CSS: */
--section-spacing-lg: 96px; /* grote verticale ruimte tussen blokken */
--section-spacing-sm: 48px; /* kleine verticale ruimte tussen blokken */
--max-content: 1500px; /* maximale contentbreedte (= ACT3 content width) — bijgewerkt naar 1500px */
--max-canvas: 1600px; /* volledige canvasbreedte (hero, full-width) */
--side-padding: 110px; /* marge links/rechts op desktop */
/* --- Content widths — nieuw systeem voor tekst-kolommen ---
Bestaande --max-content en --max-canvas hierboven blijven werken.
Deze nieuwe --w-* tokens zijn voor tekst-kolommen en secties
binnen modules, waar je een specifieke leesbreedte wilt.
Gebruik:
max-width: var(--w-text);
Cheat-sheet:
narrow = 560px — smalle intro-zin, subtekst onder hero
text = 720px — reading column, blog-tekst, long-form
content = 1500px — brede content-secties, kaarten-grids
canvas = 1600px — max canvas voor prominent modules
*/
--w-narrow: 560px;
--w-text: 720px;
--w-content: 1500px;
--w-canvas: 1600px;
/* --- Spacing — 4CEE base 4px systeem -------------------
Alle spacing (padding, margin, gap) gebruikt vanaf nu deze
tokens. Base = 4px, met veelvouden voor grotere waardes.
Gebruik:
padding: var(--sp-lg);
gap: var(--sp-md);
margin-bottom: var(--sp-3xl);
Cheat-sheet:
xxs = 2px — extreem tight, alleen voor mini-adjustments
xs = 4px — icon padding, tight gaps
sm = 8px — small gaps, button padding vertical
md = 12px — button padding vertical, form spacing
lg = 16px — default gap, medium spacing
xl = 20px — button padding horizontal
2xl = 24px — card padding compact, grid gaps
3xl = 32px — card padding default, section internal
*/
--sp-xxs: 2px;
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 12px;
--sp-lg: 16px;
--sp-xl: 20px;
--sp-2xl: 24px;
--sp-3xl: 32px;
}
/* ============================================================
TYPOGRAFIE — helper-classes voor onze eigen modules.
Onest = basis, Instrument Serif = cursief accent.
Grote koppen schalen mee op mobiel via clamp().
BIJGEWERKT naar de nieuwe standaard:
- Subtitel: 18px / line-height 28px
- Body: opacity 0.85 via --c-body
============================================================ */
.t-h1 {
font-family: var(--font-primary); font-weight: 600;
font-size: clamp(48px, 6vw, 85px); line-height: 1;
letter-spacing: -.02em; color: var(--c-title);
}
.t-h1-sub { /* Hero-titel sub-pagina's — bewust kleiner dan .t-h1 */
font-family: var(--font-primary); font-weight: 600;
font-size: clamp(40px, 5vw, 68px); line-height: 1;
letter-spacing: -.02em; color: var(--c-title);
}
.t-h1-accent {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
font-size: calc(1em + 4px); line-height: 1; letter-spacing: 0;
}
.t-h2 {
font-family: var(--font-primary); font-weight: 500;
font-size: clamp(34px, 4vw, 53px); line-height: 1.1;
letter-spacing: -.02em; color: var(--c-title);
}
.t-h2-accent {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
font-size: calc(1em + 4px); line-height: 1.1; letter-spacing: 0;
}
.t-h3 { /* Subsectie-titel — overkoepelt een kaartgroep */
font-family: var(--font-primary); font-weight: 500;
font-size: 30px; line-height: 1.2; letter-spacing: -.01em;
color: var(--c-title);
}
.t-h4 { /* Kaarttitel — H4/H5 samen, geen los niveau */
font-family: var(--font-primary); font-weight: 500;
font-size: 24px; line-height: 1.3; letter-spacing: -.01em;
color: var(--c-title);
}
.t-subtitle { /* Grote intro-zin / belangrijke vraag — 18px/28px lh, opacity 1 */
font-family: var(--font-primary); font-weight: 500;
font-size: 19px; line-height: 1.5; color: var(--c-title);
}
.t-body {
font-family: var(--font-primary); font-weight: 400;
font-size: 17px; line-height: 1.65; color: var(--c-body);
}
.t-bullets {
font-family: var(--font-primary); font-weight: 500;
font-size: 17px; line-height: 1.65; color: var(--c-title);
}
.t-label { /* Kleine tags/pills */
font-family: var(--font-primary); font-weight: 500;
font-size: 14px; line-height: 1.2; color: var(--c-accent);
}
/* Binnen een sectie met klasse .on-dark wordt tekst licht */
.on-dark .t-h1, .on-dark .t-h1-sub, .on-dark .t-h2,
.on-dark .t-h3, .on-dark .t-h4 { color: var(--c-title-inverse); }
.on-dark .t-subtitle { color: var(--c-title-inverse); } /* opacity 1, dus inverse-title i.p.v. inverse-body */
.on-dark .t-body { color: var(--c-body-inverse); }
/* ============================================================
INSTRUMENT SERIF ITALIC — ACT3-systeemklassen
(los van onze eigen .rtext__content-regel die in child.css
staat, omdat ACT3's eigen modules andere wrapper-classes
gebruiken dan onze Brand-modules)
============================================================ */
.section-intro_title h1 em, .section-intro_title h1 i,
.section-intro_title h2 em, .section-intro_title h2 i,
.section-intro_title h3 em, .section-intro_title h3 i {
font-family: var(--font-accent) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: calc(1em + 4px) !important;
letter-spacing: 0 !important;
}
/* ============================================================
LABELS / PILLS ("Seminar" e.d.)
Waarschijnlijk via ACT3's Badge-functie — bekijken zodra we
labels nodig hebben.
============================================================ */
/* ============================================================
LAYOUT — gebruik ACT3's eigen systeem, NIET een eigen container/grid.
Structuur: section > container > row > col s12 / s6 / s4 ...
Responsive: voeg md-/sm-varianten toe, bijv. col s4 sm-s12.
Contentbreedte (1500px) en verticale ruimte via Theme settings.
============================================================ */
/* ============================================================
4CEE — child.css
Overrides op het ACT3-basisthema + globale brand-styling.
Alle site-brede regels die niet bij een specifieke module horen.
============================================================ */
/* ============================================================
0. GLOBALE PAGINA-ACHTERGROND
Off-white (#FAFAFA) als standaard achtergrondkleur van elke
pagina in de site. Puur wit (#FFFFFF) blijft gereserveerd
voor cards, tabellen, tekst en illustraties.
============================================================ */
html,
body,
.body-wrapper,
.page-center,
main {
background-color: #FAFAFA !important;
}
/* =========================================================
FULLWIDTH SECTION — bijgewerkt naar 1500px
========================================================= */
.custom-fullwidth-section {
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
/* =========================================================
HEADER 4
HubSpot child theme overrides
- top bar / hat height
- main header spacing
- sticky header spacing
- hide top-bar social icons
- mobile nav breakpoint fix
========================================================= */
/* TOP BAR / HAT */
.header--4 .header__section--top {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.header--4 .header__section--top .header__links a {
font-size: 13px !important;
}
/* remove social icon placeholder */
.header--4 .header__icons {
display: none !important;
}
.header--4 .header__links {
margin-right: 0 !important;
padding-right: 0 !important;
}
.header--4 .header__section--top .flex.flex-row.items-center.justify-end.no-shrink.wrap {
gap: 0 !important;
}
/* MAIN HEADER */
.header--4 .header__section--main {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.header--4 .header__section--main .header__center {
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.header--4 .header__section--main .row.items-center {
align-items: center !important;
}
/* STICKY HEADER */
.header--4.header--sticky-active .header__section--main .header__center {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* DESKTOP/TABLET: hide mobile nav */
.header--4 .header__mobile-nav {
display: none !important;
}
/* TABLET + MOBILE */
@media (max-width: 991px) {
.header--4 .header__section--top {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.header--4 .header__section--main .header__center {
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.header--4 .header__mobile-nav {
display: block !important;
margin-inline-start: 1.2rem !important;
}
}
/* SMALL MOBILE: match theme behavior */
@media (max-width: 767px) {
.header--4 .header__section--top,
.header--4 .header__buttons {
display: none !important;
}
.header--4 .header__section--main .header__center {
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* MAIN MENU FONT WEIGHT */
.header--4 .nav__link,
.header--4 .nav__link .mega-drop-1 {
font-weight: 500 !important;
}
/* HEADER MENU ITEM — samengevoegd uit eerder 2 losse regels */
.nav__mega-item-regular-title.important-text {
color: #777;
font-size: 15px !important;
line-height: 0.9 !important;
}
/* =========================================================
2. BRAND BUTTONS
Globaal beschikbaar voor alle modules op de site.
Bronbestand: Brand-buttons module (HTML + fields).
De Brand-buttons module.css is bewust leeg —
alle stijlen staan hier zodat ze overal werken.
BIJGEWERKT: donkere tekstkleur nu #030024
========================================================= */
/* ── Gedeelde basis voor geel en gradient ── */
.btn-geel, .btn-geel:visited,
.btn-gradient, .btn-gradient:visited {
display: inline-flex;
align-items: stretch;
gap: 12px;
min-height: 34px;
padding: 2px 2px 2px 12px; /* top 1px optisch gecorrigeerd */
border: 0;
border-radius: 12px;
font-family: 'Onest', system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
}
/* Tekstlabel verticaal centreren binnen de button */
.btn-geel .btn-label,
.btn-gradient .btn-label {
display: flex;
align-items: center;
}
/* ── Geel (primaire button) ── */
.btn-geel, .btn-geel:visited {
background: #FFCD3F !important;
color: #030024 !important;
}
.btn-geel:hover, .btn-geel:focus, .btn-geel:active {
opacity: 0.90;
text-decoration: none !important;
color: #030024 !important;
}
/* ── Gradient (secundaire button) ── */
.btn-gradient, .btn-gradient:visited {
background: linear-gradient(135deg, #6A3FC8 0%, #4B3BC3 15%, #3037BF 55%, #6E7FFB 100%) !important;
color: #ffffff !important;
}
.btn-gradient:hover, .btn-gradient:focus, .btn-gradient:active {
opacity: 0.90;
text-decoration: none !important;
color: #ffffff !important;
}
/* ── Wit pijltje-vlakje ── */
.btn-geel .button-arrow,
.btn-gradient .button-arrow {
position: relative;
align-self: stretch;
flex: 0 0 30px;
width: 30px;
border-radius: 10px;
background: #ffffff !important;
overflow: hidden;
}
.btn-geel .button-arrow { color: #030024; }
.btn-gradient .button-arrow { color: #6E7FFB; }
/* Beide SVG pijltjes gecentreerd gestapeld via absolute positie */
.btn-geel .button-arrow svg,
.btn-gradient .button-arrow svg {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
fill: none;
transform: translate(-50%, -50%);
}
/* a2 begint ver onder het vlakje (onzichtbaar) */
.btn-geel .button-arrow .a2,
.btn-gradient .button-arrow .a2 {
transform: translate(-50%, 250%);
}
/* ── Pijltje animatie ──
Hover-OUT: a2 vertrekt eerst (0.14s), a1 keert vertraagd terug (na 0.14s)
Hover-IN: a1 schiet omhoog weg, a2 schuift van onder naar midden
── */
/* Hover-OUT timing (base state = wat er gebeurt als je de muis weghaalt) */
.btn-geel .button-arrow .a2,
.btn-gradient .button-arrow .a2 {
transition: transform 0.14s ease-in 0s; /* a2 vertrekt direct */
}
.btn-geel .button-arrow .a1,
.btn-gradient .button-arrow .a1 {
transition: transform 0.14s ease-in 0.14s; /* a1 wacht tot a2 weg is */
}
/* Hover-IN animatie */
.btn-geel:hover .button-arrow .a1,
.btn-gradient:hover .button-arrow .a1 {
transform: translate(-50%, -250%); /* a1 schiet omhoog */
transition: transform 0.2s ease 0s;
}
.btn-geel:hover .button-arrow .a2,
.btn-gradient:hover .button-arrow .a2 {
transform: translate(-50%, -50%); /* a2 schuift naar midden */
transition: transform 0.2s ease 0.05s;
}
/* ── Overig (tertiaire tekstlink) ──
Standaard donker. In de hero module wordt dit wit overschreven
via .hero-4cee .btn-overig in de hero module.css
── */
.btn-overig, .btn-overig:visited {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 0 0 4px;
background: transparent !important;
border: 0;
border-bottom: 2px solid currentColor;
border-radius: 0;
color: #030024; /* donker — geen !important zodat hero kan overschrijven */
font-family: 'Onest', system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
line-height: 1;
}
.btn-overig:hover, .btn-overig:focus, .btn-overig:active {
opacity: 0.75;
color: #6A3FC8 !important; /* paars op hover — pas aan naar accent kleur */
text-decoration: none !important;
}
/* ── Instrument Serif italic in ACT3 rich text headings ── */
.rtext__content h1 em, .rtext__content h1 i,
.rtext__content h2 em, .rtext__content h2 i,
.rtext__content h3 em, .rtext__content h3 i,
.rtext__content h4 em, .rtext__content h4 i,
.rtext__content h5 em, .rtext__content h5 i,
.rtext__content h6 em, .rtext__content h6 i {
font-family: 'Instrument Serif', serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: calc(1em + 4px) !important;
letter-spacing: 0 !important;
}
/* Verticale slider fixes */
.image-content-vertical-slider__locker__section {
height: auto !important;
min-height: 0 !important;
padding: 150px 0 !important;
}
.image-content-vertical-slider_locker__container {
height: auto !important;
min-height: 400px !important;
top: 200px !important;
}
.image-content-vertical-slider__locker__section--1 {
justify-content: flex-start !important;
}
.image-content-vertical-slider_locker__content {
margin-top: -100px !important;
}
/* ============================================================
0B. THEMA .header REGEL NEUTRALISEREN
Het ACT3 thema gebruikt ".header" ook als generieke class,
wat per ongeluk content-blokken raakt binnen rich text.
We beperken de witte achtergrond tot alleen de site-header.
============================================================ */
/* Reset: elke .header binnen content wordt transparant */
.body-wrapper .header,
.body-wrapper .header__section--main,
main .header,
main .header__section--main,
.dnd-section .header,
.rtext .header {
background: transparent !important;
}
/* Behoud: alleen echte site-header (top van pagina) blijft wit */
body > .header,
body > header,
.site-header,
header.header--4,
header.header--5 {
/* Als je site-header wit MOET blijven, hier eventueel #FFFFFF terugzetten.
Nu blijft hij ook op FAFAFA. Verwijder deze regel als je hem alsnog wit wil. */
}
/* ============================================================
0C. INLINE STYLE OVERRIDES
Sommige custom-widgets en modules krijgen inline
background-color via HubSpot DnD editor.
Neutraliseer die op wrapper-niveau.
============================================================ */
.custom-widget[style*="background-color"],
.custom-widget[style*="background"],
.dnd_area-row .custom-widget,
.dnd_area-row-widget-1-vertical-alignment,
div[style*="background-color: #ffffff"],
div[style*="background-color: #fff"],
div[style*="background: #ffffff"],
div[style*="background: #fff"] {
background-color: transparent !important;
background: transparent !important;
}
/* ============================================================
0D. HUBSPOT WRAPPERS TRANSPARANT
============================================================ */
.hs_cos_wrapper_type_rich_text,
.hs_cos_wrapper_type_module,
.widget-type-rich_text,
.widget-type-cell,
.widget-type-custom_widget,
.row-fluid-wrapper,
.row-fluid,
.rtext,
.rtext__content,
section.section:not([class*="bg-"]):not(.q-hero):not(.q-main) {
background-color: transparent !important;
}
/* ============================================================
0E. INLINE STYLE OVERRIDES BINNEN SLIDER RICH TEXT
Rich-text plakwerk uit Word/Docs geeft soms een witte
background-color aan spans. Neutraliseer deze binnen alle
bas-slider en bas-mobile modules.
============================================================ */
.bas-slider span[style*="background"],
.bas-slider span[style*="background-color"],
.bas-mobile span[style*="background"],
.bas-mobile span[style*="background-color"],
.bas-step__body span[style],
.bas-step__body p span,
.bas-step__body h1 span,
.bas-step__body h2 span,
.bas-step__body h3 span,
.bas-step__body h4 span,
.bas-step__body li span,
.bas-mobile__block span[style] {
background-color: transparent !important;
background: transparent !important;
}
/* ============================================================
BRAND EYEBROW — category-label boven titels
Klein UPPERCASE label voor categorisering:
- Boven een sectie-titel ("OPLOSSING")
- Boven een pagina-titel ("PRODUCT")
- Boven een blog-artikel ("WHITEPAPER")
- Boven een klantcase ("CASE")
Gebruik in HTML (rich text of module):
Oplossing
Wordt automatisch UPPERCASE via CSS.
Kleur is standaard Lotus Blue (var(--c-accent)).
Optionele modifiers:
.brand-eyebrow--muted → gedimd, subtieler
.brand-eyebrow--dark → op donkere achtergrond
============================================================ */
.brand-eyebrow {
display: inline-block;
font-family: var(--font-primary);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-accent);
margin: 0 0 12px;
}
.brand-eyebrow--muted {
color: var(--c-body-soft);
}
.brand-eyebrow--dark {
color: var(--c-title-inverse);
opacity: 0.85;
}
/* ============================================================
4CEE — SUBTIELE GLASS-OVERGANG NAAR DE FOOTER
Zit vast aan de footer zelf (niet aan de viewport), dus
verschijnt altijd precies op de overgang naar de footer,
ongeacht scrollpositie. Geen JS nodig.
============================================================ */
footer {
position: relative; /* nodig zodat ::before zich hierop kan positioneren */
}
footer::before {
content: "";
position: absolute;
top: -50px; /* steekt 50px omhoog, in de content vlak vóór de footer */
left: 0;
right: 0;
height: 50px;
pointer-events: none;
z-index: 1;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
/* ============================================================
4CEE — GRADUAL BLUR (viewport bottom, pure CSS, sitewide)
Verdwijnt automatisch zodra je onderaan de pagina scrolt,
zodat de footer-info onvertroebeld leesbaar is.
============================================================
body::before,
body::after {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 160px;
z-index: 99999;
pointer-events: none;
}
/* Laag 1 — brede, zachte radiale gloed
body::before {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, black 0%, black 40%, transparent 85%);
mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, black 0%, black 40%, transparent 85%);
}
/* Laag 2 — sterkere kern, dichter bij de rand onderaan
body::after {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
-webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 100%, black 0%, black 55%, transparent 90%);
mask-image: radial-gradient(ellipse 55% 70% at 50% 100%, black 0%, black 55%, transparent 90%);
}