/** * Homepage hero — bold stijl + typende kop + handgetekend rondje. * Alleen geladen op de voorpagina (zie functions.php enqueue-blok). */ /* ── Bold hero-kop (Hollandse stoere look) ──────────────────────────────── */ .home .lc-typewriter-h1 { /* gewicht/tracking/line-height = h1-canon (style.css); alleen de maat wijkt af (≥768px) */ line-height: 1.08; /* Reserveer 2 regels zodat het wisselende woord op regel 2 niks wegduwt (geen CLS). */ min-height: 2.16em; } @media ( min-width: 768px ) { .home .lc-typewriter-h1 { font-size: clamp( 36px, 4.8vw, 58px ); } } /* Het animerende woord + knipperende cursor. Cursor = border-right op het woord zelf → plakt altijd aan het woord en breekt nooit los naar de volgende regel. */ .lc-tw-word { color: var( --color-green-text ); /* tekst-veilige groentint (paletgroenen halen 3:1 niet) */ border-right: 3px solid var( --orange ); margin-right: 1px; animation: lc-tw-blink 1s step-end infinite; } @keyframes lc-tw-blink { 50% { border-color: transparent; } } /* ── Accent-onderstreping bij de prijs (veegt eenmalig in) ────────────────────────────────────── */ .lc-price-mark { position: relative; white-space: nowrap; } .lc-scribble { position: absolute; left: -0.05em; right: -0.05em; bottom: -0.16em; width: calc( 100% + 0.1em ); height: 0.55em; overflow: visible; pointer-events: none; } .lc-scribble path { fill: none; stroke: var( --main ); /* stroke-width via het pad-attribuut (per variant) — niet hier, anders wint CSS. */ stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: lc-scribble-in var(--lc-scr-dur, 1.3s) ease-out 0.4s forwards; transition: opacity 0.6s ease; /* vervaagt als inkt bij het wisselen van variant */ } /* Loop-variant: tekent heen en weer (blijft animeren binnen z'n 10s-venster). */ .lc-scribble--loop path { animation: lc-scribble-in var(--lc-scr-dur, 1.6s) ease-in-out 0.4s infinite alternate; } @keyframes lc-scribble-in { to { stroke-dashoffset: 0; } } /* ── Schuine zachtgroene rand onderin de hero ───────────────────────────── */ /* De standaard tilt-wig is 80px (style.css); op de home 120px zodat de formulier-kaart de schuine lijn onderin doorsnijdt, terwijl de lijn ÓNDER alle tekst van de linkerkolom blijft (USP's + reviews eindigen rond 610px diep, sectiebodem ±739px → lijn start links op ±620px). Was 320px in de oude layout (kaart in aparte sectie eronder) — dat sneed na de hero-verbouwing van 02-07 dwars door de USP-regels. */ /* Symmetrische punt (chevron omhoog in het midden) i.p.v. de schuine diagonaal: zelfde hoekige, zachtgroene taal, maar gecentreerd en recht i.p.v. scheef. Apex bovenaan het midden, schouders 68px lager aan de randen. */ .home .section-tilt-bottom::after { height: 120px; transform: none; clip-path: polygon(0 100%, 0 68px, 50% 0, 100% 68px, 100% 100%); } /* De wig is een ::after op de cover en schildert anders óver de content; til de inner-container erboven (de kaart zelf heeft al z-index 10). */ .home .section-tilt-bottom .wp-block-cover__inner-container { position: relative; z-index: 1; } /* Tweede, iets diepere wig ietsje hoger → gelaagd "papier"-effect dat het bestaande motief echoot (het oranje vel dat achter de groene formulier-kaart uitsteekt). Puur decoratief, in dezelfde groene hoekige taal; blijft met z-index onder de content zodat de linkerkolom-tekst er nooit door gesneden wordt en de kaart er (net als de hoofdwig) bovenop ligt. */ .home .section-tilt-bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 13px; height: 120px; background: #e8f5eb; /* zelfde mint als de band → de punt is één schone mint-kleur (keuze Bas 03-07, was #D3E9DA) */ transform: none; clip-path: polygon(0 100%, 0 68px, 50% 0, 100% 68px, 100% 100%); z-index: 0; pointer-events: none; } /* ── Formulier-kaart in de hero-rechterkolom ────────────────────────────── */ /* De kaart komt uit de opgeheven sectie ónder de hero en trok zich daar met margin-top:-145px (plugin-CSS) omhoog de tilt in. In de hero-kolom moet hij gewoon in de flow staan — maar alleen zolang de kolommen naast elkaar staan (core stapelt ze onder 782px; gestapeld geeft de negatieve marge juist een strakke aansluiting op de tekstkolom). De 32px duwt de kaart bewust iets omlaag (verzoek Bas 02-07): titel hangt hoog tegen de header (kolommen top-aligned, hero-padding 36px), de kaart start iets lager. */ @media ( min-width: 782px ) { .section-tilt-bottom .elf-home-card { margin-top: 32px; } } /* ── Hero-achtergrond: BIJNA WIT met een subtiel mint-zweempje (#f8fcfa) (keuze Bas 03-07: "nog lichter, bijna wit maar ietsjes anders"). Groen-kanaal ligt nét iets hoger dan rood/blauw → het is geen puur wit, maar het scheelt maar een tikje. Tekst (H1/intro/USP's) en de formulierkaart blijven donkergroen → contrast. Was eerder #f2f9f5 (lichte mint) / #faf5ec (crème). */ .home .section-tilt-bottom > .wp-block-cover__background { background-color: #f8fcfa !important; } /* ── Mobiele logo-balk naadloos op de hero laten aansluiten ─────────────────── Het echte "mint streepje" was de lege Neve .header-bottom-rij (mint bg) — die wordt op mobiel nu verborgen (style.css, max-width:960px blok). Zonder die rij grenst de mobiele logo-balk (.header-main.hide-on-desktop, puur wit) direct aan de hero (#f8fcfa). Om ook dat minieme #fff↔#f8fcfa-naadje te vermijden geven we die balk exact de hero-tint: met het oog identiek wit, maar geen enkele naad. Alleen HOME (enige pagina met #f8fcfa onder de header) én alleen de MOBIELE rij → desktop blijft 1-op-1 zoals nu. */ .home .hfg_header .header--row.header-main.hide-on-desktop, .home .hfg_header .header--row.header-main.hide-on-desktop .header-main-inner { background-color: #f8fcfa !important; } /* ══════════════════════════════════════════════════════════════════════ HERO-LAYOUT van de 02-07-verbouwing BEHOUDEN — alleen de KLEUREN zijn teruggedraaid (2026-07-03): volle hoogte tot de volgende sectie + formulier hoger op mobiel. Achtergrond/tekst/kaart blijven standaard (wit / donkergroen). Alles gescoped op .home. ══════════════════════════════════════════════════════════════════════ */ /* 1 ── Volle hoogte tot de volgende sectie (2-koloms desktop ≥783px). Topbar 51 + header 72 = 123px. svh → geen sprong door de mobiele adresbalk. !important verslaat de inline min-height:100% op de cover. */ @media ( min-width: 783px ) { .home .section-tilt-bottom { min-height: calc( 100svh - 123px ) !important; } } /* 2 ── Mobiel (<783px): formulier direct onder de titel. display:contents plat de kolommen zodat titel/subtitel/formulier/USP's/ reviews echte siblings worden → herordenen met flex `order`. */ @media ( max-width: 782px ) { .home .section-tilt-bottom .wp-block-columns, .home .section-tilt-bottom .wp-block-column { display: contents; } .home .section-tilt-bottom .wp-block-cover__inner-container { display: flex; flex-direction: column; } .home .section-tilt-bottom .lc-typewriter-h1 { order: 1; } .home .section-tilt-bottom .wp-block-group { order: 2; } /* subtitel */ .home .section-tilt-bottom .elf-home-card-wrap { order: 3; margin-top: 28px; } /* lucht tussen intro en de kaart op mobiel (verzoek Bas 03-07) */ .home .section-tilt-bottom .icon-check { order: 4; margin-top: 20px; } .home .section-tilt-bottom .lc-rvp { order: 5; } .home .section-tilt-bottom .wp-block-spacer { order: 6; } /* de kaart trok zich met -145px omhoog (oude layout) — hier niet */ .home .section-tilt-bottom .elf-home-card { margin-top: 0 !important; } /* Op mobiel GEEN punt (verzoek Bas 03-07): een gewone rechthoekige mint-afsluiting i.p.v. de chevron, en veel minder ruimte eronder. Desktop houdt de punt. */ .home .section-tilt-bottom::after { height: 32px; clip-path: none; /* recht i.p.v. chevron */ } .home .section-tilt-bottom::before { display: none; } /* 2e (decoratieve) chevron-laag weg */ .home .section-tilt-bottom { padding-bottom: 40px !important; } } /* ── Iets stoerdere homepage-knoppen ────────────────────────────────────── */ .home .wp-block-button__link { font-weight: 700; } /* ── Toegankelijkheid: geen beweging als de bezoeker dat wil ────────────── */ @media ( prefers-reduced-motion: reduce ) { .lc-tw-word { border-right-color: transparent; animation: none; } .lc-scribble path { animation: none; stroke-dashoffset: 0; } } /* PROCES "3-STAPPEN"-SECTIE: op 2026-07-03 (verzoek Bas) TERUG naar de oude DONKERGROENE kleur. De mint-overrides (2026-07-02) zijn hier weggehaald → de proces-cover toont weer z'n eigen deep-green overlay met de witte H2 + witte slider-dots (standaard). De `section-proces-mint`-class op de cover (post 9) is nu inert (geen CSS meer). */ /* ============================================================ 3-stappen-proces (.lcproc) — homepage VERPLAATST 2026-07-04 uit post 9 (wp:html-blok): de