/* ==========================================================================
The Fix Center — Elementor compatibility layer.
The design stylesheets (base/hero/sections) were written for hand-made
markup. Free Elementor wraps every widget in its own elements, so the
selectors that pointed at a bare or
are re-aimed here at the
widget's inner element. Nothing in here is design; it only lets the design
land on Elementor's DOM. Rules that style h2/h3/p *inside* a classed
wrapper (.section-head h2, .step h3, .cta-band p) already match Elementor's
inner tags and need nothing here.
========================================================================== */
/* ---- 1. Elementor's own spacing must not fight the design ---- */
.e-con { --gap: 0; --row-gap: 0; --column-gap: 0; }
/* Elementor geeft élke container 10px padding rondom. Het ontwerp regelt zijn
eigen ruimte, dus die standaard gaat overal uit; .container en .hero__center
zetten hun gutter verderop zelf terug. Zonder dit stond bijvoorbeeld de kop
van een sectie 10px naar binnen ten opzichte van het raster eronder. */
.e-con.e-con { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; }
/* De kit van Elementor zet Roboto op de widgets. Het ontwerp heeft zijn eigen
twee families; zonder dit rendert bijvoorbeeld de intro onder de kaarten in
Roboto in plaats van Inter (en klopt 62ch dus ook niet meer). */
.elementor .e-con .elementor-widget { font-family: var(--font-body); }
.elementor .e-con .elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); }
.e-con .elementor-widget:not(:last-child) { margin-block-end: 0; }
.e-con .elementor-widget-container { margin: 0; }
/* De breedte komt van het ontwerp zelf: .container in base.css (max-width
var(--container), margin-inline auto, padding-inline var(--gutter)). Die
stond hier eerst uitgezet met max-width:none — dáárdoor liep alles van rand
tot rand en werden de kaarten breder dan op de live site. */
/* ---- 2. Hero: the scrim and grain the old .hero__scrim/.hero__grain gave the photo ---- */
.e-con.hero { z-index: 0; }
/* Scrim en grain horen BINNEN .hero__media: dat is het enige blok met
overflow:hidden. Op .hero zelf stak de grain met inset:-20% 161px buiten de
sectie, en dat gaf op tablet een horizontale schuifbalk. */
.e-con.hero > .elementor-widget.hero__media::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(120% 90% at 50% 12%, oklch(30% 0.06 55 / 0.28) 0%, transparent 62%),
linear-gradient(180deg, oklch(18% 0.03 55 / 0.86) 0%, oklch(18% 0.03 55 / 0.68) 42%, oklch(20% 0.03 55 / 0.9) 100%);
}
.e-con.hero > .elementor-widget.hero__media::after {
content: ""; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
opacity: 0.06; mix-blend-mode: overlay;
}
.e-con.hero__center { align-items: center; text-align: center; }
/* .hero__title used to be the
itself; the class now sits on the widget. */
.hero__title .elementor-heading-title {
font-size: clamp(2.4rem, 1rem + 4.1vw, 4.3rem);
letter-spacing: -0.035em; line-height: 1;
margin: 0 auto 1.1rem; max-width: 18ch; color: inherit;
}
.hero__sub .elementor-widget-container > p {
font-size: var(--text-lead); color: var(--fg-dim); max-width: 46ch; margin: 0 auto 1.8rem;
}
.hero__sub b { color: var(--fg); font-weight: 600; }
.e-con.hero__picker { position: relative; z-index: 3; padding-top: clamp(1.1rem, 2.2vw, 1.8rem); }
.e-con.hero__trustwrap { padding-block: 1.6rem 0; }
/* ---- 3. Plain text widgets that wear a design class ---- */
.reparaties__lead .elementor-widget-container > p,
.note .elementor-widget-container > p,
.lead .elementor-widget-container > p,
.quote .elementor-widget-container > p { font: inherit; color: inherit; margin: 0; }
/* ---- 4. Elementor's button widget wears the design's .btn ---- */
.elementor-widget-button .elementor-button { all: unset; cursor: pointer; }
.elementor-widget-button .elementor-button-content-wrapper,
.elementor-widget-button .elementor-button-text { display: inline; }
.elementor-widget-button .elementor-button {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--font-display); font-weight: 600; font-size: 1rem;
padding: .95rem 1.5rem; border-radius: 999px;
background: var(--accent); color: var(--ink-950);
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); }
.elementor-widget-button .elementor-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--ghost .elementor-button { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.reparaties__cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
/* ---- 5. Icon boxes become the design's trust items, steps and USPs ---- */
.e-con.hero__trust {
flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start;
--gap: 1.2rem 2rem; gap: 1.2rem 2rem;
padding-top: 1.8rem; border-top: 1px solid color-mix(in oklch, white 18%, transparent);
}
.hero__trust .elementor-widget-icon-box { width: auto; flex: 0 1 auto; }
.hero__trust .elementor-icon-box-wrapper { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; row-gap: .15rem; align-items: center; text-align: left; }
.hero__trust .elementor-icon-box-icon { grid-row: 1 / span 2; margin: 0; }
.hero__trust .elementor-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent); background: color-mix(in oklch, var(--accent) 18%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent); font-size: 16px; }
.hero__trust .elementor-icon-box-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--fg); letter-spacing: -0.02em; margin: 0; }
.hero__trust .elementor-icon-box-title .accent { color: var(--accent); }
.hero__trust .elementor-icon-box-description { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); margin: 0; }
.e-con.step-grid { flex-direction: row; flex-wrap: wrap; --gap: 2rem; gap: 2rem; counter-reset: step; }
.e-con.step-grid > .e-con.step { flex: 1 1 calc(25% - 2rem); min-width: 12rem; }
.step .elementor-icon-box-wrapper { display: block; text-align: left; }
.step .elementor-icon-box-icon { margin: 0 0 .9rem; }
.step .elementor-icon { color: var(--accent-strong); font-size: 22px; }
.step .elementor-icon-box-title { margin: 0 0 .5rem; }
.step .elementor-icon-box-description { margin: 0; }
.e-con.usp-list { --gap: .2rem; gap: .2rem; }
.usp .elementor-icon-box-wrapper { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start; text-align: left; }
.usp .elementor-icon-box-icon { margin: 0; }
.usp .elementor-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); font-size: 16px; }
.usp .elementor-icon-box-title { margin: 0 0 .2rem; }
/* Gelijkspel met de kitregel (beide 0,2,0) en die laadt later, dus hier een klasse extra. */
.elementor .e-con .usp .elementor-icon-box-description { color: var(--fg-mute); margin: 0; }
/* ---- 6. The accordion wears the FAQ look (plus/minus, hairlines) ---- */
.faq .elementor-accordion { border-top: 1px solid var(--line); }
.faq .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--line); }
.faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem .2rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; cursor: pointer; border: 0; background: transparent; }
.faq .elementor-tab-title a { color: inherit; }
.faq .elementor-tab-title:hover, .faq .elementor-tab-title.elementor-active { color: var(--accent-text); }
.faq .elementor-tab-title .elementor-accordion-icon { order: 2; width: 22px; text-align: center; color: currentColor; }
.faq .elementor-tab-content { border: 0; padding: 0 .2rem 1.4rem; color: var(--ink-dim); max-width: 62ch; background: transparent; }
.faq .elementor-tab-content p { margin: 0; }
/* ---- 7. Layout rows the design expects as grids/flex ---- */
.e-con.waarom__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.e-con.vragen__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.e-con.cta-band__inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; --gap: 2rem; gap: 2rem; }
.e-con.cta-band__copy { flex: 1 1 28rem; }
.e-con.cta-band__actions { flex-direction: row; align-items: center; flex-wrap: wrap; --gap: 1.4rem; gap: 1.4rem; width: auto; }
.e-con.waarom__media .elementor-widget-image img { width: 100%; border-radius: 18px; }
.e-con.waarom__media .quote { margin-top: 1rem; }
@media (max-width: 900px) { .e-con.waarom__inner, .e-con.vragen__inner { grid-template-columns: 1fr; } }
/* ---- 8. The hero photo is an Image widget wearing .hero__media, so the shop
swaps it in Elementor; hero.css keeps the object-fit + slow pan on the img. ---- */
.e-con.hero > .elementor-widget.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; width: 100%; height: 100%; margin: 0; }
.hero__media .elementor-widget-container, .hero__media figure, .hero__media img { display: block; width: 100%; height: 100%; margin: 0; }
.e-con.hero > .elementor-widget.hero__media { height: auto; }
.e-con.hero .hero__media img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 38%; }
/* ---- 9. Elementor kit defaults (blue headings, green buttons, Roboto) must lose
to the design tokens. The kit prints its rules after the theme, so these
carry one extra class of specificity. ---- */
.e-con.hero { --padding-top: 74px; }
.e-con .elementor-widget-heading .elementor-heading-title {
color: inherit; font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em;
}
.e-con .hero__title .elementor-heading-title { line-height: 1; letter-spacing: -0.035em; }
.e-con .elementor-widget-button .elementor-button {
background-color: var(--accent); color: var(--accent-ink);
font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
white-space: nowrap; border-radius: 999px; padding: 0.95em 1.5em; border: 1px solid transparent;
box-shadow: 0 6px 20px var(--accent-glow);
}
.e-con .btn--ghost .elementor-button { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
/* ---- 10. Section heads are rows (the design aligns h2 and copy on the baseline);
icon-box titles/icons follow the surrounding text, not the kit palette. ---- */
.e-con.section-head { --flex-direction: row; flex-direction: row; }
.e-con .elementor-icon-box-title, .e-con .elementor-icon-box-title a { color: inherit; }
.e-con .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon { color: var(--accent-strong); }
.e-con .hero__trust .elementor-icon-box-icon .elementor-icon, .e-con .usp .elementor-icon-box-icon .elementor-icon { color: var(--accent); }
/* ---- 11. The transparent header sits on the dark hero until the page scrolls;
until then its text takes the hero's light tokens (only the CTA keeps orange). ---- */
body.home .site-header:not(.scrolled) { --fg: oklch(97% 0.006 85); --fg-dim: oklch(87% 0.008 80); --ink: oklch(97% 0.006 85); --ink-dim: oklch(87% 0.008 80); }
.e-con .elementor-widget-icon-box .elementor-icon-box-title,
.e-con .elementor-widget-icon-box .elementor-icon-box-title a { color: inherit; }
.e-con .elementor-widget-icon-box.elementor-view-default .elementor-icon-box-icon .elementor-icon { color: var(--accent-strong); }
.e-con .hero__trust .elementor-widget-icon-box.elementor-view-default .elementor-icon-box-icon .elementor-icon,
.e-con .usp.elementor-widget-icon-box.elementor-view-default .elementor-icon-box-icon .elementor-icon { color: var(--accent); }
/* ---- 12. Breedte en centrering terug bij het ontwerp ----
Elementor zet marge en padding van een container via eigen variabelen
(--margin-left, --padding-left, standaard 0 en 10px) en wint daarmee van
`.container` in base.css. Gevolg: elke sectie plakte links met 10px lucht
in plaats van gecentreerd met var(--gutter), en de kaarten werden daardoor
breder dan op de live site. Hier zetten we het ontwerp weer voorop. */
.e-con.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.e-con.hero__center {
max-width: 62rem;
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Elementor geeft elke widget in een container max-width:100%, en verdubbelt
daarvoor zijn eigen klasse (.e-con.e-con > …) om specificiteit te winnen. Om
de leesbreedtes uit het ontwerp terug te zetten moet dat hier dus ook. */
.elementor .e-con.e-con > .elementor-widget.reparaties__lead { max-width: 62ch; }
.elementor .e-con.e-con > .elementor-widget.note { max-width: 62ch; }
/* Het zoekveld in de hero is 46rem breed. Elementor maakt van de shortcode-widget
een flex-item dat om zijn inhoud heen krimpt, waardoor het veld op ~500px
uitkwam in plaats van 736. De widget mag de volle kolom, het veld begrenst
zichzelf en gaat in het midden staan. */
.e-con.hero__center > .elementor-widget { width: 100%; }
.hero__center .hero__search { margin-inline: auto; }
/* ---- 13. De kleuren van de Elementor-kit ----
post-.css (door Elementor per pagina gegenereerd) zet op elke widget de
kitkleuren: tekstwidgets #7A7A7A, koppen en iconen #6EC1E4. Die regels staan
op .elementor-widget-text-editor en .elementor-widget-icon-box … en laden ná
het thema, dus ze wonnen van het ontwerp — de intro onder de kaarten, de
subkop in de hero, de stap- en USP-teksten en de FAQ-antwoorden kwamen
daardoor in Elementors grijs in plaats van in de eigen tokens.
In plaats van elke kitregel te overschrijven geven we de vier variabelen
waar ze allemaal doorheen lopen de betekenis van het ontwerp. Dan levert
elke kitregel vanzelf de juiste kleur, ook regels die we hier niet kennen. */
.elementor .e-con {
--e-global-color-primary: var(--ink);
--e-global-color-secondary: var(--ink);
--e-global-color-text: var(--ink-dim);
--e-global-color-accent: var(--accent);
}
/* De donkere secties keren de tekstkleuren om. Ook de geneste containers
moeten mee: die zijn zelf ook .e-con en zouden de regel hierboven anders
opnieuw op de lichte waarde zetten (de subkop in de hero zit in
.hero__center en werd daardoor donkergrijs op de foto). */
.e-con.hero, .e-con.hero .e-con,
.e-con.cta-band, .e-con.cta-band .e-con {
--e-global-color-primary: var(--fg);
--e-global-color-secondary: var(--fg);
--e-global-color-text: var(--fg-dim);
}