/* Theme Name: Interieur Reiniging Theme URI: https://www.interieur-reiniging.be Author: DMCC BV Author URI: https://www.interieur-reiniging.be Version: 1.24.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary Text Domain: ir-theme Tags: woocommerce, multilingual, local-seo, cleaning-service Description: Conversie-geoptimaliseerd WordPress theme voor Interieur Reiniging. WooCommerce-ready, lokale SEO. Volledige changelog: zie het CHANGELOG-blok hieronder. */ /* ══════════════════════════════════════════════════════════════════════ CHANGELOG — BEWUST BUITEN DE THEME-HEADER HIERBOVEN. LET OP (v1.12.1): WordPress leest enkel de EERSTE 8192 BYTES van style.css om theme-headers te parsen. De changelog stond in het Description-veld en groeide bij elke build; in v1.12.0 duwde dat "Version:" naar byte 8414 — buiten die 8KB. Gevolg: wp_get_theme()->get('Version') gaf een LEGE string, waardoor wp_enqueue_style() terugviel op de WordPress-kernversie (?ver=7.0.1). Die verandert nooit tussen builds, dus browsers bleven eeuwig een verouderde style.css cachen en CSS-wijzigingen kwamen nooit aan bij bezoekers. REGEL: hou de header kort en laat "Version:" ruim binnen de eerste 8KB staan. Nieuwe changelog-entries komen HIER, nooit meer in Description. ══════════════════════════════════════════════════════════════════════ v6: Frisgarantie hernoemd naar Hygiëne+ overal (incl. schema en FAQ). Behandelingen-structuur herwerkt naar 3 opties via WC variation-attribuut "Type behandeling", Standaard, Hygiëne+ (was vanaf €249, nu vanaf €199) en Type zetel "Vlek" voor lokale vlekverwijdering (vanaf €149). 38 variations (2 vlek + 36 zetel-combinaties). Juridische copy opgeschoond: geen "geurvrij", geen "1-2 jaar bescherming"-claim, geen "garantie"-belofte. v6.1: twee nieuwe secties op de service-pagina, namelijk concurrentie-differentiatie (Niet elke reiniging is hetzelfde) en een ondernemersblok (combinatie prive + professioneel, een factuur). v1.10.2: bugfixes (oneindige MutationObserver-lus in prijs-mirror opgelost; voor/na-slider JS nu geladen op product- en vasttapijtpagina's) + design-smoothing (behandelingen/inbegrepen/vergelijk-secties volledig naar het blauwe kleursysteem, consistente sectie-padding en kaart-radius, gebalanceerde koppen, mobiel-polish). v1.10.3: content-optimalisatie productpagina (leesbaarheid: kortere/front-loaded zinnen + scan-anchors; AEO: definitie- en 'hoe vaak'-FAQ toegevoegd aan zichtbare lijst én FAQPage-schema, vraag-geformuleerde methode-eyebrow; SEO: regionale intentie + interne link). v1.11.0: nieuwe homepage-hero "Kies. Plan. Proper." (verfijnde lichte look, --ir-* design-tokens, slogan met blauw "Plan.", trust-strip, chips, extractie-foto met prijstag/FBT-badge/stats) + merk-rode-draad §7: nieuwe processectie "Zo verloopt uw afspraak" (Kies/Plan/Proper), sectietitels herschreven (diensten + mid-cta), CTA-hiërarchie (WhatsApp overal als secundaire tekstlink). Baloo 2 wght 500 toegevoegd aan font-enqueue. v1.11.1: fixes. Over-ons/geur-vlek tijdlijn hersteld (oude conflicterende .ir-about-timeline__list li-CSS verwijderd die de nieuwe __item/__marker grid-layout overschreef). Boekbox-productpagina opgeschoond: ECO-teaser als opvallende groene band die mee vloeit met de banden eronder; dubbele prijs weg (native WC-variatieprijs verborgen, anchor spiegelt hem); zinloos "Op voorraad" groen vinkje verborgen; exacte prijs in huisblauw i.p.v. groen; features-kolom (Betaal ná / Verplaatsing / Voorbeoordeling / FBT) verwijderd om herhaalde "betaal ná"-boodschap te beperken. v1.11.2: homepage-hero balans — linkerkolom (slogan + copy) verticaal gecentreerd t.o.v. de hogere beeldkolom (align-items:center i.p.v. start), zodat de kolom niet langer klein/leeg oogt onder de tekst. v1.11.3: homepage-hero teruggezet naar het zwarte huisstijl-design (donkere hero met blauw grid + glow) met de slogan "Kies. Plan. Proper." (gestapeld, "Plan." in blauw); volledige dead-code opkuis voor productie-upload: verwijderd = service-template CSS-blok (~524 regels), de weesbestanden price-calculator.js + wa-booking.js + hun enqueues, dode main.js-functies (initBASliders/initCounters), de kennismakingskorting (functie + markup + CSS), discount/features-CSS, en ongebruikte helpers (ir_wa_base_url, ir_kortingspercentage, ir_geur_addons, ir_frisgarantie, ir_team_action_image_alt) + de service-metabox. v1.11.4: FIX — het in v1.11.3 verwijderde "service-template" CSS-blok bleek verkeerd gelabeld en bevatte LIVE stijlen (knoppen .ir-btn, how-to-cards, de trust-ribbon-basis); blok volledig hersteld zodat niets meer kapot is. Trust eyebrow-ribbon (🌿 100% Ecologisch · ...) verwijderd van product- en vasttapijtpagina (dubbel met de blauwe ticker erboven) + bijhorende CSS. v1.11.5: CLS-verbetering — expliciete width/height op de 4 responsieve content-afbeeldingen (homepage-hero-extractie, product-extractie/myth/team) zodat de browser de ruimte vooraf reserveert. Layout ONGEWIJZIGD (img{height:auto} bepaalt de weergavegrootte; de attributen reserveren enkel de juiste verhouding). Overige beelden zaten al in vaste aspect-ratio-containers. v1.11.6: kortingscommunicatie gecorrigeerd — ECO-teaser op de productpagina van "bespaar tot 15%" naar "bespaar tot 20%" conform de nieuwe kortingsregels (incl. bijhorende code-comment). v1.11.7: HOTFIX — init() in main.js riep drie niet-gedefinieerde functies aan (initStickyNav, initMobileMenu, initScrollReveal), waardoor een ReferenceError init() liet crashen vóór initBookingBridge() — de boekingsconfigurator (en mobiel menu, scroll-reveal, ticker, foto-uploads) initialiseerde niet. Aanroepen nu afgeschermd met typeof-guards zodat init() volledig doorloopt. Herstel de functiedefinities om de sticky-nav / mobiel-menu / scroll-reveal features weer te activeren. v1.11.8: FIX (echte fix i.p.v. v1.11.7-band-aid) — de drie ontbrekende functies opnieuw geïmplementeerd in main.js: initStickyNav (.ir-nav--scrolled bij scroll), initMobileMenu (hamburger toggelt #ir-mobile-menu, burger-animatie, body-scroll-lock, sluit bij link-klik/Escape/desktop-resize) en initScrollReveal (.ir-reveal → .ir-revealed via IntersectionObserver, no-op bij reduced-motion of geen elementen). typeof-guards verwijderd zodat init() weer clean is. Robuustheid: elke init-stap draait nu via een run()-wrapper met try/catch, zodat één falende stap de rest van de keten (o.a. de boekingsbrug) nooit meer kan afbreken. v1.11.9: FIX checkout-styling — de globale `woocommerce_enqueue_styles => __return_empty_array` filter stripte ALLE WooCommerce-stylesheets site-breed, waardoor /afrekenen ongestyled (bare HTML: factuurvelden, order-review-tabel, notice-balken) renderde. Filter nu conditioneel: op cart/checkout blijven WC's eigen stylesheets (woocommerce-layout/-smallscreen/-general) behouden zodat de checkout een nette layout krijgt; overal elders ongewijzigd uit (theme levert daar zelf de styling). Geen visuele impact buiten cart/checkout. v1.11.10: kortingscommunicatie teruggezet naar 15% — de ECO-teaser op de productpagina (boven "Configureer & boek") terug van "bespaar tot 20%" naar "bespaar tot 15%" (incl. code-comment), zodat de gecommuniceerde korting weer overeenkomt met de werkelijk toegepaste korting in de backend (route66-checkout ROUTE66_DISCOUNT_PCT = 15). Draait de v1.11.6-wijziging terug. v1.11.11: FIX regressie van v1.11.9 — door WooCommerce's stylesheets terug aan te zetten op cart/checkout laadde ook woocommerce-layout.css, met daarin `.woocommerce-page img { height:auto }` (specificiteit 0,1,1) dat de theme-regel `.ir-nav__logo-img { height:48px }` (0,1,0) overschreef → het nav-logo blies op tot ~359px op /afrekenen. Opgelost met een hogere-specificiteit override (`.ir-nav .ir-nav__logo-img`, 0,2,0) zodat het logo overal 48px blijft. Checkout-styling uit v1.11.9 blijft behouden. v1.11.12 (V6.2): checkout order-knop hernoemd van "Bestellen en betalen" naar "Afspraak inplannen" via de woocommerce_order_button_text filter (prioriteit 9999) in functions.php — betaling gebeurt achteraf, dus de CTA mag geen directe betaling suggereren. Knoptekst zat niet in de theme; nu wel als theme-side override. v1.12.0 (V6.2, klantfeedback 14/07): PRODUCTPAGINA — (1) "betaal pas ná de reiniging" stond 4x boven de vouw (subtitle, benefits-USP, lead, reassure-regel); teruggebracht naar 1x, en die staat nu in (2) een nieuw standout "Alles inbegrepen"-blok in de boekkolom (amber accent via --ir-incl-accent; één regel om naar var(--B) te switchen). Maakt de boekkolom lichter, zeker mobiel. (3) Kleine rode notificatie met link naar /linnen-viscose-herkennen/ op het beslismoment in de boekkolom, om boekingen voor niet-behandelbare stoffen te vermijden. (4) Reviews verplaatst van 9e naar 2e sectie, direct onder de hero/boekkolom (single-product.php); op vasttapijt naar 3e, direct ná de "geen losse tapijten"-disclaimer zodat die kwalificatie zichtbaar blijft. CHECKOUT — (5) cart-notice en coupon-balk deelden één identieke blauwe regel; gesplitst: coupon blijft slanke blauwe info-balk, cart-notice wordt rustige groene bevestiging met kleine secundaire "Winkelwagen bekijken"-link (multi-product checkout blijft dus werken). (6) "Factuurgegevens" hernoemd naar "Uw gegevens" (gettext) + optionele bedrijfsgegevens achter één vinkje (bedrijfsnaam, BTW-nummer, facturatieadres), bewaard als aparte order-meta zodat ze het reinigingsadres NOOIT overschrijven; toggle via nieuwe initCompanyToggle in main.js. v1.12.1: TWEE FIXES. (a) CACHE-BUG (kritiek): de changelog stond in het Description-veld en groeide elke build; in v1.12.0 duwde dat "Version:" naar byte 8414 — buiten de 8192 bytes die WordPress leest voor theme-headers. wp_get_theme()->get('Version') gaf daardoor een LEGE string en wp_enqueue_style() viel terug op de WordPress-kernversie (style.css?ver=7.0.1). Die verandert nooit tussen builds, dus browsers bleven eeuwig een verouderde style.css cachen: PHP-wijzigingen kwamen wel live, CSS-wijzigingen nooit. Header is nu kort (Version op byte ~143) en de changelog staat hier, buiten de header. (b) PLAATSING: het kosten-blok en de linnen/viscose-waarschuwing stonden ná woocommerce_template_single_add_to_cart(), maar de Route66-picker injecteert de VOLLEDIGE boekflow (adres → tijdslot → "Plan mijn afspraak") ín dat formulier — beide belandden dus ONDER de CTA (gemeten: CTA y=1314, waarschuwing y=1385). Een stofwaarschuwing ná het boeken is nutteloos. Beide staan nu BOVEN het variatieformulier, pal bij de stofkeuze. v1.12.2 (klantfeedback 15/07): ONJUISTE CLAIM + HERHALING WEG. (1) "Eerlijke voorbeoordeling vóór we starten" geschrapt uit het kosten-blok én uit de inbegrepen-sectie: we rijden niet apart langs om enkel te komen kijken — die claim klopte niet. (2) De hero zei alles 2 à 4 keer. Nu geldt: één boodschap = één plaats. Het amberblok is enkel nog de KOSTEN-belofte ("Alle kosten inbegrepen": geen meerkosten / BTW / verplaatsing); de trust-chips houden de credentials (ecologisch, probiotisch, stoffen, FBT); de benefits-lijst enkel duur+drogen; "betaal pas ná" komt enkel nog uit de picker + ticker. Verwijderd omdat het blok het al zegt: benefits-item "Vaste prijs · BTW + verplaatsing inbegrepen" (alle services), benefits-item "Heel Vlaanderen + Brussel", en de price-note onder de prijs. "Vaste prijs" staat nu enkel nog in de subtitle. Resultaat: geen enkele claim staat nog dubbel in de hero. v1.12.3: CHECKOUT-WRIJVING WEG + laatste copy-duplicaten. (1) De theme voegde twee checkout-velden toe die dateren van vóór de Route66-picker: 'ir_cleaning_date' ("Gewenste reinigingsdatum", VERPLICHT) en 'ir_cleaning_address' ("Reinigingsadres indien anders dan factuuradres"). Beide vroegen opnieuw wat de picker al exact vastlegt: die zet '_route66_slot' (het gekozen aankomstmoment) op de orderregel én vult de WC-factuurvelden al voor via set_billing_address_1/postcode/city. Een VERPLICHTE datum laten intypen ná het kiezen van een tijdslot was pure wrijving; een derde adresveld maakte bovendien onduidelijk wáár er gereinigd wordt. Beide velden verwijderd (definitie + opslag); ir_display_order_meta() blijft de oude meta tonen zodat historische orders niets verliezen. (2) Laatste copy-duplicaten: boekbox-intro "uw vaste prijs verschijnt meteen" -> "uw exacte prijs verschijnt meteen" (de subtitle claimt "vaste prijs" al, en "exacte" beschrijft de mechaniek beter), en de behandelingen-intro herhaalde "vaste prijs per zetelgrootte" terwijl beide behandelkaarten er pal onder al "Vaste prijs per grootte, all-inclusive" tonen. "Vaste prijs" op de zetelpagina: 13x -> 6x, telkens in een andere sectie met een eigen functie. v1.12.4 (Google Ads-feedback 16/07, theme-side P1): (1) PRIJSVERWACHTING — "vanaf €149" liet bezoekers ankeren op €149 terwijl een 2-3 zit €229 (Standaard) tot €289 (Hygiëne+) kost. De boekbox toont nu een statische prijsindicatie "de meeste zetels €229-€289" (per service via $si[price_hint]); "vanaf €149" blijft klein als ingangsprijs. (2) CONFIGURATOR-PRIJS LAG — de live MutationObserver-spiegel die de WC-variatieprijs naar de anchor kopieerde (en op trage toestellen een stap achterliep, dé prijs = dé belofte) is VERWIJDERD. De Route66-picker toont de exacte prijs nu als enige bron (route66-price-status, in de datum/tijd-kiezer). Native WC-variatieprijs blijft verborgen. (3) ONE CTA — primaire boek-CTA overal "Bereken prijs & boek": boekbox-titel (was "Configureer & boek"), sticky bar (+ "vanaf €149" weg), team- en resultaten-sectie (waren "Boek nu"/"Boek uw reiniging"). Uitzondering: de compacte top-nav-knop blijft "Boek nu →" (breedte); dat is navigatie, niet de pagina-CTA. (4) REVIEWS BIJ PRIJS — de score in de boekkop is nu een klikbare link naar de echte Google-reviews (sectie 2, #reviews). BEWUST GEEN verzonnen citaten: echte quotes moeten van Trustindex/Google komen, niet gefabriceerd. v1.12.5 (feedback 16/07): (1) subtitle "Vanaf €149, vaste prijs" onder de H1 op de ZETELpagina verwijderd (leeg gezet + hero-subtitle geguard zodat er geen lege

rendert) — €149 was daar de misleidende anker. (2) Prijs-label in de boekkolom is nu per service ($si[price_lbl]); voor zetel "vlekverwijdering vanaf €149,-" zodat duidelijk is dat €149 de enkele-vlek-prijs is, niet een hele zetel. Het bereik "de meeste zetels €229-€289" blijft eronder. Andere services vallen terug op "vanaf €149"; matras/stoel houden hun subtitle. v1.12.6 (feedback 16/07): FIX checkout-layout. Sinds v1.11.9 laadt woocommerce-layout.css mee op de checkout; die floatte BINNEN #customer_details de factuurvelden (.col-1) links 48% en de bestelnotities (.col-2) rechts 48%, ín de theme-grid-kolom. Resultaat: drie verkrampte kolommen (gegevens | notities | overzicht) met grote lege gaten i.p.v. de bedoelde 2-koloms grid (gegevens | bestelling). Opgelost door de WC-col2-set-floats te neutraliseren met hogere specificiteit (body.ir-default-checkout .col2-set .col-1, 0,3,1 > WC 0,2,0): velden + notities staan nu vol breed onder elkaar in kolom 1, en de theme-grid bepaalt de echte 2-koloms layout. Zelfde soort conflict als de logo-blowup (v1.11.11). + align-items:start op de grid zodat de kolommen bovenaan uitlijnen. v1.12.7 (feedback 16/07): CHECKOUT VOLLEDIG THEME-EIGEN (stabiel, geen tijdelijke overrides meer). WooCommerce's eigen stylesheets (layout/general/smallscreen) laden NIET meer op de checkout-formulierpagina; de theme stylet die nu 100% zelf (body.ir-default-checkout). Dit haalt de terugkerende WC↔theme-conflicten weg AAN DE WORTEL i.p.v. per geval (logo-blowup, col2-set-kolommen). Toegevoegd om self-contained te zijn: coupon-formulier + algemene .button-stijl (WC-general leverde die), Voornaam|Achternaam naast elkaar via eigen grid (WC-floats zijn weg), order-review-tabel width:100%, en mobiele polish. FIX grid: #customer_details spant beide rijen zodat de order-review-kop + tabel tight bovenaan kolom 2 stapelen (anders ~890px leeg gat, gemeten). Cart (/winkelwagen) en de bedankpagina (order-received) houden WC-styling (theme stylet die niet apart). GEVERIFIEERD via render: desktop 2-koloms net + mobiel (390px) 1-koloms, 0 horizontale overflow op beide. v1.13.0 (Document 1 "Theme & code-wijzigingen", 18/07): batch theme-feedback. A. KLEUR/CONTRAST (WCAG): bright-blue #00A0FD blijft de knopkleur maar met DONKERE tekst (--ir-ink #0f2233, ~5,7:1) i.p.v. wit (~2,8:1) op alle primaire CTA's (.btn-primary, .btn-white, .ir-nav__book, nav-ticker, single_add_to_cart, cro-stickybar). Announcement/ticker-tekst → donker. #0061A8 VOLLEDIG verwijderd (hero-subtitle, geurlink, stickybar-knop) → --ir-ink. Nieuwe kleur-tokens in :root (--ir-blue-bright/--ir-ink/ --ir-eco/--ir-whatsapp). Hover-blues iets lichter (#0089DB) zodat de donkere tekst óók bij hover de norm haalt. C. TEKST/STRUCTUUR: (C1) decimalen → komma (99,9% in hero/stats; review- score 4,9 via nieuw $sp[rating_display], schema houdt punt). (C2) het INTREN-blok herlabeld "B2B-reviews via INTREN · 4,8★" zodat het niet als tegenstrijdig IR-cijfer leest. (C3) dubbele "Kies. Plan. Proper." weg: proces-sectie heet nu "Zo verloopt uw afspraak". (C5) premium- differentiatie-strip (2-3u/zetel, superieure extractie, eigen probiotica) hoog op home + bovenaan single-product. (C6) "Waarom niet de goedkoopste?" naar boven, vlak na hero+prijs+reviews. (C7) Belgische identiteit expliciet (hero-eyebrow 🇧🇪, ticker-item, B2B-kop). (C8) compacte zakelijke laag op home (één afspraak, één factuur, BTW incl.). (C10) FAQ-tegenstrijdigheid opgelost: zelf online plannen i.p.v. "via WhatsApp binnen 24u". (C11) één canonieke "wat reinigen we niet"-lijst overal: "leer, linnen, Tencel en viscose". (C13) INTREN-render-glitch: banner-tekst in één span i.p.v. losse flex-items (geen kolom-splitsing / losse punt meer). (C14) klik-om-te-bellen in header (desktop) + mobiel menu; footer had het al. D. OVERLAYS: footer-onderkant ademruimte op mobiel zodat de zwevende widgets geen links meer afdekken. v1.13.1 (klantfeedback 19/07): mobiele zwevende boek-balk (.ir-cro-stickybar, "Bereken prijs & boek / Boek →") VERWIJDERD — markup + inline scroll-script in single-product.php én alle CSS. Ze botste op mobiel met de WhatsApp-float, de AI-bol en de echte boek-CTA eronder. De configurator + WhatsApp-float volstaan. v1.13.2 (klantfeedback 19/07): PRIJS METEEN ZICHTBAAR onder de keuzes. Probleem: de klant zag pas een exacte prijs ná het invullen van het adres (in de picker), en de boekkop herhaalde bijna dezelfde zin twee keer ("uw exacte prijs verschijnt meteen" + "…verschijnt hieronder zodra u type & moment kiest"), met een misleidende range "de meeste zetels €229–€289". Opgelost: (1) statische prijsindicatie (price_lbl + price_hint-range + tweede verschijnt-zin) verwijderd uit de boekkop; intro teruggebracht tot één zin. (2) De ECHTE WooCommerce-variatieprijs is TERUG zichtbaar (was `display:none !important`) → verschijnt als "Uw prijs: €229" pal onder de 3 keuzes, vóór het adres, via WC's eigen variation.js (geen custom mirror, geen lag). (3) Prijskleur → donker (--ir-ink) i.p.v. bright-blue (contrast op wit). PLUGIN-KANT (Route66, andere sessie): zorg dat de prijs in de tijdslot-toggle exact gelijk is aan deze basisprijs onder de keuzes (zelfde bron), met de eco-korting er enkel bovenop bij een voorkeurmoment. OPEN (geen code): C4 nav-CTA houdt bewust korte variant "Boek nu →"; C9 volle homepage-herordening deels (strip hoog toegevoegd, rest ongewijzigd); C12 dode /geur-vlekken/-link zit in een WP-menu, niet in de theme (footer wijst al naar /geuren-en-vlekken-verwijderen/) → oplossen in Weergave → Menu's of de pagina (her)publiceren met template-geur-vlek.php. v1.13.3 (klantfeedback 19/07): em-dashes (—) uit alle zichtbare copy gehaald en vervangen door komma's/punten (ze verraden AI-gebruik). Geraakt: boekkop-intro, hero-caption, compare-intro, ondernemers-factuurregel, b2b-banner; en-dash in de premium-strip ("1–2 jaar" → "1 tot 2 jaar"). Geen — / — meer in klant-tekst. v1.13.4 (klantvraag 19/07): styling toegevoegd voor de Eco-voordeel "was / nu"-prijs in de "Uw prijs"-regel: .woocommerce-variation-price ins (nieuwe prijs, prominent, geen underline) + herbruikbare .ir-eco-tag-badge ("🌿 Eco-voordeel 15%"). De del (oude prijs, doorstreept/grijs) was al gestyled. De THEME rekent niets uit; de Route66-plugin rendert €249,00 €211,65 + .ir-eco-tag zodra een voorkeurmoment gekozen is, en toont dezelfde prijs in picker + winkelwagen + afrekenen (zie ~/Downloads/BRIEF-route66-eco-prijsweergave.md). Beslissing: korting PAS ná het kiezen van een eco-moment, nooit speculatief. v1.14.0 (klantvraag 19/07): FORMAAT-AFBEELDING die meewisselt met de gekozen variatie. De klant heeft per-variatie afbeeldingen toegevoegd (Type zetel / grootte matras) om de formaten te tonen; de custom single-product.php renderde géén WC-productbeelden. Nieuw: een

in de boekkolom (onder de intro) die via WooCommerce's found_variation-event de variation.image toont en meewisselt bij elke keuze; caption = de gekozen maat. Verborgen tot er een echte afbeelding is (placeholder → verborgen) en bij reset_data. Werkt met >30 variaties (AJAX; image zit in het event). Puur additief, geen WC-gallery-override. LET OP: toont enkel als de variaties écht een afbeelding hebben (live API gaf leeg → controleer dat de beelden opgeslagen zijn + cache leeg). CSS: .ir-wc-booking__format* (object-fit:contain, 16/10, aspect-ratio → geen CLS). v1.14.1 (klantvraag 19/07): formaat-afbeelding verschijnt nu al zodra de EERSTE keuze (Type zetel / grootte matras) gemaakt is, niet pas bij een volledige variatie-match. single-product.php bouwt server-side een MAAT→afbeelding-map uit de variaties (één image per maat, in data-format-images op de figure); het script toont die bij elke select-change en neemt bij found_variation de exacte variation.image over. Verbergt netjes als een maat geen afbeelding heeft (graceful). v1.14.2 (klantfeedback 19/07): boekkolom "configure-first" opgeschoond (te druk). Weg boven het formulier: de losse intro-zin + het amber "Alle kosten inbegrepen"-blok (3 bullets). De kosten-belofte staat nu compact in ÉÉN regel ONDER de CTA (.ir-wc-booking__incl-line). De linnen/viscose-waarschuwing is van een groot rood blok naar een SLANKE zichtbare regel pal boven de keuzes (.ir-wc-booking__fabric-note) — bewust niet verstopt achter een toggle (moet foute boekingen blijven voorkomen). Nieuwe spine: eco-band → titel + reviews → stof-note → keuzes (+ formaat-afbeelding) → prijs → picker → CTA → kosten-regel. Oude .ir-wc-booking__incl* / __fabric-alert* CSS blijft (ongebruikt, schaadt niets). v1.14.3 (klantfeedback 19/07): de kosten-belofte (Vaste prijs / BTW & verplaatsing inbegrepen / Geen meerkosten achteraf) staat nu als klein TRUST-BLOK pal onder de titel "Bereken prijs & boek" (.ir-wc-booking__assure: rustige kaart, groene vinkjes in cirkels → "alles inbegrepen, geen zorgen"-gevoel), i.p.v. de losse regel onder de CTA (die is verwijderd). Nieuwe spine: header → trust-blok → stof-note → keuzes (+ formaat) → prijs → picker → CTA. v1.14.4 (klantfeedback 19/07): het trust-blok is nu kleine PREMIUM pills met een gouden shield-icoon i.p.v. de grijze kaart met groene vinkjes. Gouden gradient + gouden rand + diepgouden tekst (#8A6A1C, ~5:1 op wit) + inline SVG-shield (gouden fill). Pills wrappen netjes op smalle schermen. Zelfde markup (3
  • ), enkel de styling wijzigt. v1.24.0 (30/09/2026, overschrijvingen terug naar de bron — "clean code"): - Uitgangspunt: wat aan de bron fout was, is aan de bron verbeterd; de theme herschrijft die gegevens niet meer. - PLANNER (Route66): alle klantteksten (u-vorm, "Eco-moment", fotoblok, "Goed om te weten", wijzig-link) staan nu in de plugin zelf (route66-checkout 0.20.0). Weg uit de theme: de i18n- en DOM-vervanging in inc/content-v17.php en het ROUTE66_PHOTO-blok + de "je betaalt"-vervanging in inc/checkout.php. VEREIST route66-checkout >= 0.20.0. - MATRAS/STOEL: de variatiewaarden zijn in WooCommerce hernoemd ("Midi (120 tot 140 cm breed)", "6 stoelen", ...). Weg: ir_tidy_option_text() en ir_tidy_item_name() (+ hun filters). booking.js leest nu gewoon "Naam (uitleg)" i.p.v. aparte omzettingen voor "ZES (6)" en "MIDI: 120, 140cm breed". - DOCUMENTPAGINA'S (algemene voorwaarden, annulatiebeleid, privacy): Divi-/Enfold-resten, de eigen H1 en de titels in hoofdletters zijn in de pagina's zelf opgekuist. Weg uit page.php: het strippen van Divi-shortcodes, het schrappen van de eerste H1 en het omzetten van hoofdletters; weg uit inc/stad-page.php: ir_doc_sentence_case() en de document_title_parts-filter (die zette ook "btw" om naar "BTW", tegen de huisstijl in). - PROVINCIEPAGINA'S: de oude inhoud is in de pagina's leeggemaakt; enkel een commentaar in template-provincie.php. - Blijft bewust in de theme (weergave via officiële haken, geen correctie van foute data): optienamen "Formaat / Kussens / Pakket" (de attribuutsleutel type-zetel e.d. moet blijven), gettext-vertalingen van WooCommerce. v1.23.1 (27/09/2026, livetest v1.23.0): - FIX klikbewaking: GTM4WP luistert zelf in de capture-fase op document en kwam daardoor vóór onze controle, waardoor een klik zonder tijdslot nog als add_to_cart telde. De controle zit nu op window (komt altijd eerst). Livetest zetel/matras/stoel: mislukte klikken = 0 events; volledige keuze = 1 add_to_cart + 1 begin_checkout. - Productnaam met variatie netjes in winkelwagen, afrekenen, bedankpagina en e-mails: "Matrasreiniging aan huis · Midi (120 tot 140 cm breed)", "Stoelreiniging aan huis · 6 stoelen". v1.23.0 (27/09/2026, onderzoek conversie-analyse): - BOEKBLOK: klik op "Plan mijn afspraak" met een ontbrekende keuze (formaat, kussens, pakket, adres of tijdslot) wordt vóór alle andere scripts opgevangen: een rode melding in de pagina + scrollen naar de ontbrekende stap, i.p.v. de browser-pop-up van WooCommerce. Belangrijk voor de meting: GTM4WP telde zo'n mislukte klik vroeger toch als add_to_cart (valse "Add to cart"-conversie in Google Ads). Een volledige keuze gaat ongewijzigd door. - VLEK: kiest de klant "Vlek", dan staat "Vaste kussens" automatisch aan en is de kussenstap verborgen (alle kussenvarianten hebben bij Vlek dezelfde prijs). Samenvatting: "Vlek · ". - MATRAS/STOEL: alt-tekst van de extractiefoto per dienst (niet meer "uit een zetel"). - AFREKENEN/E-MAILS: matrasmaten netjes ("200, 210 cm breed" i.p.v. "200 210cm breed"), enkel weergave. v1.22.2 (25/09/2026, echte testboeking op live, bestelling 274118): - BEDANKPAGINA: volle breedte op gsm (de extra binnenmarge van 48px liet maar 239px over), "Wat gebeurt er nu?" bovenaan i.p.v. onderaan, kop "Bedankt! Uw afspraak is ingepland." i.p.v. "Bedankt. Je bestelling is ontvangen.", "Bestelgegevens" → "Uw afspraak", "Factuuradres" → "Uw gegevens", minder witruimte bovenaan. - AFREKENEN: "Coupon" → "Kortingscode" (melding, totaalregel, schermlezertekst), "Straat en huisnummer". - PLANNER: postcode smal en gemeente breed (gemeente werd afgekapt: "Mache…"); "Voorkeurmoment gekozen — u bespaart" → "Eco-moment: u bespaart". v1.22.1 (25/09/2026, klantencheck live als bezoeker via advertentie): - WHATSAPP-ONLY UITGELEGD: nieuwe FAQ "Kan ik jullie bellen?" op de homepage (ook in het schema), korte uitleg "Waarom niet telefonisch?" op de contactpagina, "(enkel berichten, geen oproepen)" in footer en Over ons. Schema: geen 'telephone' meer (Google toont dan een belknop), wel een ContactPoint met de WhatsApp-link. - AFBEELDINGEN: de 1536px-versie i.p.v. het origineel (hero homepage 1,7 MB → 198 KB; stads-/provincie-/over-ons-hero 1,55 MB → 160 KB). Schema-afbeelding niet meer de groepsfoto (los tapijt in beeld). - MATRAS/STOEL: stap "Nabehandeling" zonder pakketten/spray (die bestaan enkel voor zetels), Eco-rekenvoorbeeld in de FAQ per dienst, droogtijd per dienst, knoppen "4 stoelen" i.p.v. "Vier (4)", matrasmaten "160 tot 210 cm breed" en "kindermatras", geen bijschrift "Zo ziet een VIER (4) eruit". Matras-lead zonder "volledig verwijderd" (= tot 99,9%). - COPY: "Type zetel" → "Formaat" (zo heet de keuze in de configurator); "B2B-tak" → "zustermerk INTREN"; zetel-kop "…en anderen 30 minuten" → "Waarom een grondige zetelreiniging 2 à 3 uur duurt" (geen uitspraak over anderen). v1.22.0 (24/09/2026, volledige controle live: 60 URL's × gsm/desktop, 437 interne links, tekstscan op huisstijlregels): - STADSPAGINA'S (308 gemeenten): echte (template-stad.php) en virtuele pagina's delen nu één opbouw in het nieuwe systeem (template-parts/stad-page.php): lichte hero + kruimelpad Home / Werkgebied / Provincie / Stad, tegels met de juiste prijzen (stoelen vanaf €229 i.p.v. €149), lokale uitleg per provincie, 4 stappen (online boeken eerst), Eco-voordeel, FAQ (= schema), andere gemeenten in de provincie. Weg: groene kaarten, ✓-tekens, zoek-/filterbalk, "BTW" in hoofdletters, de kapotte "%s", de onbewezen belofte "kortingen voor nieuwe klanten". FAQPage + BreadcrumbList nu ook op de echte stadspagina's. - PROVINCIEPAGINA'S (/werkgebied-antwerpen/ ...): nieuwe template-provincie.php uit de gemeentedatabase. De oude pagina-inhoud (met "losse tapijten", "3-5 werkdagen", "1.800+ klanten", b2b@-adres, emoji-knoppen, geen H1) wordt niet meer getoond. - WERKGEBIED: lichte hero, provincienaam linkt naar de provinciepagina, nette voet. - DOCUMENTPAGINA'S (voorwaarden, annulatie, privacy): lichte kop + H1 = paginatitel, leeskolom; de H1 in hoofdletters (liep op gsm buiten het scherm) valt weg, tussentitels in hoofdletters → zinsvorm, "dmcc bv" → "DMCC BV". - LEGE WINKELWAGEN: eigen template (u-vorm + diensttegels) i.p.v. "Je winkelwagen is leeg" + lege productbeelden. - PRODUCTPAGINA'S: voor/na-slider enkel op de zetelpagina (cases zijn zetels); stap 1 en het Eco-rekenvoorbeeld per dienst (matras €149, set van 4 stoelen €229); kortere rij in de pakkettentabel. - CONTACT: "Liever meteen boeken?" bovenaan, één WhatsApp-regel i.p.v. twee; "Telefoon" → "Gsm-nummer" in alle formulieren. - REDIRECTS: /zetelreiniging-brussel-stad/ (404) → /zetelreiniging-brussel/, /linnen-viscose-herkennen/ (je-vorm, dubbel) → /gids/stof-herkennen/, /winkel/ en /product-category/* → de juiste dienst. - SITEMAP: nieuwe lijst met 308 steden + provincies + werkgebied + vasttapijt; doorverwijzende, WooCommerce-, auteur- en categoriepagina's eruit. - CACHE: CSS/JS-versie = themaversie + bestandstijd. Live laadde nog ?ver=1.14.4 (gecachte themagegevens) terwijl style.css al v1.21.3 was: bezoekers met een oude cache kregen de oude stijl. booking.js idem. - Gidsen: opsommingen tonen weer bolletjes/nummers; knop "Bereken prijs & boek" (canoniek). v1.21.3 (24/09/2026, volledige controle staging: 15 pagina's × gsm/desktop, 345 interne links, 0 dood): SEO: homepage schreef meta-description, canonical en og-tags DUBBEL (statische voorpagina is ook is_singular). Theme-tekst wint nu van oude handmatige meta (geur & vlekken stond in je-vorm, 218 tekens, "tapijt"). Kortere titels: geur & vlekken, over ons, werkgebied; echte stadspagina's "Zetelreiniging in , vanaf €149" (was "…, Vanaf €149 aan huis"). Over ons: nooit meer code tonen die per ongeluk in de pagina-inhoud staat (op staging zat daar een PHP-fragment "ONE-SHOT ABOUT-TEMPLATE BOOTSTRAP"). v1.21.2 (24/09/2026, na controle staging): OVER ONS herschreven in het nieuwe systeem (geen schuine badge, geen gekleurde randen, afspraakflow = online boeken + betalen ter plaatse, "1-2 jaar actief" i.p.v. "maandenlang"); groepsfoto (collega met opgerold los tapijt) niet meer in de hero. WhatsApp-nummer bleef leeg als de optie ir_phone_display leeg was (staging) → terugval op het vaste nummer. Comfort & Protect-meerprijs in FAQ/schema: "€40 tot €70" (5-6 zit en groter houden de oude Hygiëne+-prijs, beslissing 23/09). FLOW = ONLINE BOEKEN EERST (feedback eigenaar 24/09): header-knop "Boek nu" altijd zichtbaar (hing af van de oude WhatsApp-modus-optie); mobiel menu "Bereken prijs & boek". Stadspagina's (+ FAQ-schema): geen "wachttijd 3 à 5 werkdagen"/"reactie binnen 24 uur" meer maar "u ziet meteen de vrije momenten in de planner" + Eco-moment; knoppen "Bereken prijs & boek"; WhatsApp enkel nog als "eerst een vraag?"; stoelen vanaf €229, matras €149/€169; dubbel slotblok weg (footer-endcta). Werkgebied: primaire knop = boeken i.p.v. "offerte via WhatsApp". /boek/ en /vlekkenbescherming/ (lege pagina's, verdwenen template-service.php) → 301 naar de configurator; /zakelijke-dieptereiniging/ → 301 naar intren.be. v1.21.1 (livegang 23/09/2026, na de productexport van live): stoelen stonden overal op "vanaf €149" terwijl de goedkoopste set (4 stoelen) €229 kost → "vanaf €229" op de dienstentegels (home, 404, geur & vlekken), productsubtitel, paginatitel en meta-description. Prijs-FAQ van matras en stoel noemt nu de echte bedragen (matras €149 / groot €169; stoelen 4 = €229, 6 = €299, 8 = €399). Google-schema stoel: prijs €229 i.p.v. €149. FAQ "Wat is een set?": vaste prijs per 4/6/8/10/12 i.p.v. "prijs op maat". v1.21.0 (finale afwerking vóór livegang, feedback eigenaar 23/09/2026): VASTTAPIJT: te veel aanvragen voor losse tapijten. Vasttapijtpagina volledig herschreven in het nieuwe systeem (geen emoji, geen zetelfoto meer in de hero): rode melding "Enkel vasttapijt, géén losse tapijten" meteen onder de H1, wel/niet-overzicht + test ("kunt u het oprollen?"), methode, offerteflow, formulier met VERPLICHT vinkje "vasttapijt of traplopers, geen los tapijt" (ook server-side gecontroleerd, status 'novast'), FAQ + FAQPage-schema. Home: H1 "zetel-, matras- en vasttapijtreiniging", tegel "Muur tot muur en traplopers, geen losse tapijten", nieuwe home-FAQ "Reinigen jullie ook losse tapijten?". "tapijt" → "vasttapijt" in titels/meta, geur-vlekpagina en stadspagina's. 404 beloofde "Vasttapijt + losse tapijten": 404-pagina herschreven (tegels als op home, geen B2B-tegel). TOGGLES: één stijl voor alle uitklapvragen (product, home, vasttapijt, stad, boekpagina): ruimere marge (20px, antwoord lijnt uit met de vraag; was 4px), chevron in een rondje i.p.v. "+"/"×", lege witte strook van 96px boven de product-FAQ weg. Footer en garantievoorwaarden gebruiken dezelfde chevron. STAP 3 BOEKBLOK (Route66-planner, enkel stijl + teksten, geen logica gewijzigd): samenvatting "Uw keuze" met vaste prijs én Eco-momentprijs; planner in dezelfde vormtaal als stap 1-2 (witte tegels, blauw = gekozen), liep op gsm niet meer buiten het blok; "Toon beschikbare tijden" secundair en weg zodra de kalender er staat; legende + bolletjes weg (maakten geen onderscheid tussen Eco- en gewone dagen); gekozen afspraak als duidelijke bevestiging onder de uren; tussentijdse "Top, we komen bij u langs" weg; dubbele trustregel weg. OVERIG: emoji uit klantteksten (stad, over ons, contact, boekpagina, menu); over ons liep op gsm 26px buiten beeld (grid min-width). AFREKENEN (inc/checkout.php + CSS, GEEN checkout-logica gewijzigd: geen velden, validatie of order-meta; _ir_is_company blijft intact). Live = KLASSIEKE checkout (shortcode), staging = BLOK (oudere DB); beide afgewerkt. Kop "Bevestig uw afspraak" (page.php toonde geen titel), u-vorm i.p.v. je-vorm (gettext voor klassiek, load_script_translations voor blok, Route66-fotoblok via ROUTE66_PHOTO.i18n, "Goed om te weten ... u betaalt"), optienamen Formaat/Kussens/Pakket i.p.v. TYPE ZETEL/... (woocommerce_attribute_label, enkel frontend), overzicht als rustige kaart, betaalwijze blauw omrand, fotoblok zwart-wit i.p.v. groen, "toegevoegd aan je winkelwagen"- melding verborgen, kortingscode als tekstregel, grijs placeholderbeeld weg (blok). Land/regio (enkel België) verborgen; "Aanvullende informatie" → "Nog iets dat we moeten weten?". BETALING (feedback eigenaar): nooit "overschrijving binnen 7 dagen". FAQ home + product en de bedankpagina zeggen nu: meteen ter plaatse na de reiniging, via Payconiq, cash of overschrijving met betaalbewijs. v1.20.1 (formaatcontrole, feedback eigenaar 22/09/2026): de tekening "zo ziet dit formaat eruit" werkte nog, maar staging heeft geen variatie-afbeeldingen (database ouder dan de afbeeldingen) en live hadden enkel fauteuil, 3-4 en 5-6 zit er één. Nieuw: reserve-afbeeldingen in de theme (ir_format_fallback_images: fauteuil, 3-4, 5-6, 9-10 zit) voor elk formaat zonder variatie-afbeelding; de variatie-afbeelding uit wp-admin blijft voorrang hebben. Groter voorbeeld met bijschrift "Zo ziet een 3-4 zit (L-vorm) eruit". Foto-tekst in het boekblok verwijst nu naar de foto-upload bij het afrekenen i.p.v. WhatsApp (één kanaal, correcte communicatie). Nog geen tekening voor Vlek, 2-3 zit en 7-8 zit. IMPREGNATIE (zelfde versie, feedback eigenaar): vlekbescherming = de impregnatiespray, en die brengt de KLANT zelf aan, ten vroegste 24 u na de reiniging (drogen + verluchten). Overal herschreven zodat nergens meer staat dat wij impregneren: pakketkaarten, pakkettentabel (+ noot met *), FAQ + schema, gids "zetel ruikt muf", werkstap 4, bedankpagina (nazorgregel), en de "meenemen"-tekst van de agendacode (geen "impregnatiemiddel" meer). v1.20.0 (boekblok herbouwd, feedback eigenaar 22/09/2026: "te druk, groen en blauw ogen vreemd"): Van 10 gekleurde lagen (groene eco-band, blauwe kop, gouden pills, rode stip, paarse pakketkaart, groene eco-regel, groene planner-melding) naar 3 genummerde stappen met één accentkleur: 1 Uw zetel (tikbare knoppen voor formaat + kussens), 2 Kies uw pakket (3 kaarten met de échte prijs voor het gekozen formaat, uit een server-side prijskaart want WC laadt >30 variaties via AJAX), 3 Kies uw moment (prijs als totaalregel + Route66-planner). Eco staat nog één keer: in de planner (groen enkel daar). STOFWAARSCHUWING bewust prominent (eis eigenaar): zwart omrand vak in stap 1 met "Check uw stof" + "stuur een foto", én een herinnering pal boven de knop. Progressive enhancement (assets/js/booking.js): de WooCommerce-keuzelijsten blijven de bron van waarheid en worden enkel visueel verborgen zodra de knoppen staan; zonder JS blijft alles werken. Geen MutationObserver. Oude eco-regel onder de prijs verwijderd. v1.19.0 (desktop-check + "design sterker", 22/09/2026): lokaal gerenderd en gemeten op 1440px en 375px (geen horizontale overloop, geen tekst tegen de rand, alle beelden laden). DESKTOP: hero-tekst op de container-lijn (plakte links tegen de rand), geen gat meer tussen titel en voor/na-foto in de product-hero (grid-rows auto/1fr), reviewslink op de blauwe boekkop leesbaar, footer-copyright/juridische links leesbaar, koppen met text-wrap:balance (geen weeswoorden, bv. "…aan / huis"), iets minder witruimte tussen secties (84/56px). FOTO'S: de 5 stapfoto's op de productpagina's wezen naar 2024/11/…-1.jpg = 404 (ook live, sinds de oude methodesectie); nu echte foto's uit de shoot (ir_photo()): opzuigen, borstelen, extractie, nabehandeling, resultaat. Bewijs-sectie: technicus-foto + fotostrook (bus, opzuigen, nabehandeling). Tweede echte voor/na-case (ZERE-3). Foto-oproep "stuur een foto" op geur & vlekken en in de stofgids. Klantfoto's uit boekingen bewust NIET gebruikt. ICONEN: emoji 🌿/🇧🇪 vervangen door eigen SVG-iconen (ir_icon) en een CSS-vlag. BEDANKPAGINA: "Wat gebeurt er nu?" in 3 stappen (oude tekst beloofde een e-mail om de afspraak te bevestigen, terwijl klanten nu zelf plannen). AFREKENEN: 3 vertrouwensregels pal boven de knop (woocommerce_review_order_before_submit, enkel weergave). TAAL: "u wil" → "u wilt"; dubbel ge-escapete "&" in fotobijschriften opgelost. SEO: kortere paginatitels (≤ 65 tekens) en meta-descriptions (≤ 160), eigen description voor geur & vlekken en contact, contactpagina krijgt een H1, vasttapijt-description ingekort. FAQPage-schema telt op elke pagina exact evenveel vragen als er zichtbaar zijn (gecontroleerd). Zetelpagina: de "jaarlijks onderhouden"-foto toonde een LEREN zetel (wij reinigen geen leer) → vervangen door een resultaatfoto. Voor/na-kop gecentreerd. v1.18.0 (designsysteem + synergie over alle pagina's, feedback eigenaar 22/09/2026): (1) PAKKETTENTABEL zonder vanaf-prijzen (€149/€189/€239 waren Vlek-prijzen en gaven een vertekend beeld); nu een noot "uw exacte prijs ziet u in de configurator". Vlek-regel zonder prijs. (2) HEADER: lopende hoofdletter-ticker vervangen door een rustige zwarte trustbalk (4 vaste punten; op gsm één punt tegelijk met zachte fade, enkel CSS, reduced-motion = stil). (3) FOOTER herbouwd: afsluitende oproep (ir-endcta, fel blauw) op elke pagina behalve winkelmandje/afrekenen, context-afhankelijk (productpagina → #boek-titel, vasttapijt → WhatsApp-foto); trust-rij; kolommen Diensten/Gidsen/Werkgebied/Over ons die op gsm inklappen (was 2,5 schermen); B2B als één link. De losse slot-CTA's per template (stad, vasttapijt, over ons, productpagina, mid-cta) zijn daardoor verborgen/verwijderd. (4) MOBIELE ACTIEBALK: "Bereken prijs & boek" + WhatsApp in één zwevende balk, verschijnt na de hero, verdwijnt zolang de boekbox in beeld is; vervangt op gsm de zwevende WhatsApp-bol (één zwevend element i.p.v. twee, de reden waarom de sticky bar in v1.13.1 sneuvelde). (5) GEUR & VLEKKEN volledig herschreven in het nieuwe systeem: Bio-Enzym + terugkomgarantie, u-vorm, geen "vanaf €199", tegels per meubel, gidsen, Eco, FAQ + schema uit één array. (6) SYNERGIE: alle hoofdletter-labels (section-eyebrow) sitebreed verborgen; secundaire knoppen leesbaar op lichte hero's (stad, vasttapijt: was wit op wit); score overal met komma (stad, over ons); contactpagina en stadspagina's in u-vorm, geen "ik"-zinnen; claim "1 à 2 jaar bescherming" → "1-2 jaar actief"; over-ons-CTA zonder oude WhatsApp-datumvoorstel; geen dubbele merknaam in paginatitels. (7) FIXES v1.17: hero-tekst niet meer tegen de schermrand op gsm; teamfoto in de bewijs-sectie liggend i.p.v. schermvullend; matras/stoel krijgen eigen fotobijschrift (was "Wat zit er werkelijk in uw matras?." met dubbel leesteken) en enkel de relevante foto. v1.17.0 (herstructurering mobiel + SEO + Eco-voordeel, opdracht eigenaar 22/09/2026): Aanleiding: gemeten op staging (375px) was de homepage 18 schermen / 1.065 woorden en de zetelpagina 29 schermen / 2.146 woorden; het Eco-voordeel stond 0x op de homepage; de site oogde "AI" (14 hoofdletter-labels, zes koppen in het patroon "X. Y.", 22 vinkjesregels). HOMEPAGE (front-page.php): 12 → 8 secties. Hero: H1 = zoekterm "Zetel-, matras- en tapijtreiniging aan huis" (slogan "Kies. Plan. Proper." blijft groot, maar als

    ), groene Eco-badge, trust-chips + micro-regel weg. Diensten = 2×2-tegels. Nieuw: section-eco (3 stappen + rekenvoorbeeld €229 → €194,65). Waarom-wij veegbaar op gsm. Nieuw section-bewijs bundelt reviews + voor/na + team + referenties (vervangt stats, resultaten, reviews, team, b2b-trust, b2b-banner; "2 jaar bescherming" weg). FAQ 6 vragen. Contactformulier → compacte strook (formulier blijft op /contact/). Oude template-parts blijven staan (niet meer geladen op home). ZETELPAGINA (single-product.php, ook matras/stoel): H1 + één zin + score staan op gsm BOVEN de boekbox (grid-areas top/booking/intro). Uitlegsectie van 5,4 schermen → één vergelijkingstabel #pakketten. Premium + vergelijking + methode + extractie + myth + team → één sectie "ir-why" (stappen veegbaar). Eco-sectie toegevoegd. Inbegrepen ingekort (oude "impregnering apart verkrijgbaar" weg), ondernemersblok → één regel. FAQ 19 → 9-10, zoekbalk/tabs weg, links naar gidsen. Slot-CTA: online plannen i.p.v. WhatsApp-datum. Emoji uit de trust-chips, score overal met komma. ECO: badge in hero + ticker + mobiel menu + footer; regel onder de prijs in de configurator (woocommerce_single_variation prio 15), GEEN verlaagde prijs vooraf (beslissing juli). Planner-teksten van de Route66-plugin: je/jij → u, "voorkeurmoment" → "Eco-moment" via i18n-override + eenmalige tekstvervanging (tijdelijk, tot de plugin zelf aangepast is; geen MutationObserver). SEO: nieuwe paginatitels (scheidingsteken |) en meta-descriptions voor home en productpagina's; FAQPage-schema = exact de zichtbare FAQ (één bron, inc/content-v17.php). Nieuwe pagina's /eco-voordeel/ en 5 gidsen /gids// (kattenplas, hondenplas, braaksel, muffe geur, stof herkennen) met Article + Breadcrumb-schema, in wp-sitemap.xml; virtueel via 404-terugval (geen rewrite-flush nodig; een echte WP-pagina wint). /linnen-viscose-herkennen/ (404 op staging) → 301 naar /gids/stof-herkennen/. HUISSTIJL: alle klikbare tel:-links weg (header desktop + mobiel menu, footer, over ons, contact) → WhatsApp. Telefonisch niet bereikbaar. v1.16.3 (pakketnamen, beslissing eigenaar 22/09/2026): de drie behandelingen heten nu Essentieel / Comfort & Protect / Bio-Enzym. "Intensief" klonk als "de enige echte dieptereiniging" terwijl dat pakket vooral dierenplas, braaksel en geur aanpakt; "Comfort" werd "Comfort & Protect" omdat de impregnatiespray erbij zit. (1) Info-kaarten onder de dropdown hernoemd (ids/classes tier-bioenzym / info-bioenzym; alias 'intensief' → Bio-Enzym, oude 'hygi' → Comfort & Protect-kaart: zelfde prijsniveau, en zo verschijnt de terugkomgarantie nooit bij een oude Hygiëne+-keuze vóór de wp-admin-switch), Essentieel-tagline "volledige dieptereiniging" zodat het niet als lichte versie leest. (2) Uitlegsectie "Behandelingen" (was "Twee behandelingen" Standaard/Hygiëne+) herschreven naar drie kaarten via één loop (ir_zetel_behandelingen: keys essentieel/comfort/bioenzym, nieuwe velden price_meta en note_label), 3-koloms grid (.ir-wc-behandelingen__cards--3, 1 kolom onder 1024px), Bio-Enzym-kaart in zwart met badge "Terugkomgarantie" (merkpalet zwart/wit/blauw). Vanaf-prijzen = laagste variatie van elk pakket (Vlek): €149 / €189 / €239 (prijsregel eigenaar 22/09: Comfort & Protect-supplement groeit met het formaat, +€40 Vlek tot +€100 9-10 zit, want meer product; Bio-Enzym = Comfort & Protect + vaste €50, want een retourbezoek is ±1 uur ongeacht formaat). (3) FAQ zichtbaar + FAQPage-schema: "Standaard vs Hygiëne+" → de drie pakketten; alle "€199 met Hygiëne+"-verwijzingen → "vanaf €209 met Bio-Enzym". Geen "Hygiëne+" meer in klant-tekst. WP-ADMIN (eigenaar, vóór upload): attribuutwaarden "Essentieel | Comfort & Protect ★ Aanbevolen | Bio-Enzym" + 63 variaties, zie context/pakketten-zetel.md. (4) Essentieel-kaart: "(actief tot 2 jaar)" → "(1-2 jaar actief)", conform de canonieke claim in context/huisstijl.md (eigenaar 22/09). v1.16.2 (LIVE-release 02/08): tier 1 hernoemd van "Puur" naar "Essentieel" (beslissing eigenaar: geen verwarring met de eco/puur-merkbelofte). Kaart-titel, "Alles van Essentieel" in de Comfort-kaart, ids/classes (info-essentieel / tier-essentieel) en de tier-detectie hernoemd; 'puur' blijft als alias in de detectie. Testmodus-mapping nu Standaard → Essentieel-kaart. STAGING-label verwijderd: dit is de build voor de LIVE site, te uploaden NÁ de wp-admin-dataswitch (63 variaties, zie PRIJSLIJST-doc). v1.16.1 (STAGING, testmodus 31/07): tier-kaarten werken nu ook met de BESTAANDE wp-admin-data (2 waarden): oude Standaard → Essentieel-kaart, oude Hygiëne+ → Intensief-kaart (mapping = spec §2.2 prijstabel). De "€30 extra"-nudge in Essentieel toont enkel als er écht een Comfort-optie in de dropdown staat (geen valse belofte met 2-tier-data). Na de echte dataswitch pakken de nieuwe namen automatisch de juiste kaarten. v1.16.0 (STAGING, tier-redesign 31/07, zetelreiniging-tier-implementatie.md): theme-kant van de 3-tier behandeling (Essentieel / Comfort +30 / Intensief +60). (1) Dynamische info-kaart per tier onder de behandeling-dropdown (woocommerce_after_variations_table, enkel zetel): Essentieel grijs + upgrade-nudge naar Comfort, Comfort blauw + Aanbevolen-badge, Intensief paars + terugkomgarantie-blok met uitklapbare voorwaarden. (2) Wissel-script: jQuery-binding (WC triggert change via jQuery; native listeners missen dat), juiste selector attribute_type-behandeling (custom attribuut, GEEN pa_-slug; doc-selector aangepast) + pa_-fallback; kaart verbergt bij oude/onbekende waarden → veilig deploybaar vóór de wp-admin-dataswitch. (3) Comfort-default-fallback (Optie B) enkel als er niets voorgeselecteerd is (native default in wp-admin houdt voorrang). (4) Taglines zonder em-dashes (huisstijlregel). NIET in de theme (wp-admin, door eigenaar): attribuutwaarden hernoemen, 21 variaties + prijzen (spec §2.1), native Comfort-default (Optie A). LET OP: de ir-wc-behandelingen-sectie (ir_zetel_behandelingen: Standaard/Hygiëne+-verhaal) is nog NIET herschreven naar 3 tiers — aparte content-beslissing. v1.15.0 (STAGING, typografie-refactor 30/07): (1) FONTS SELF-HOSTED — Google Fonts CDN weg (GDPR + performance); variabele latin-woff2's in /fonts + @font-face hieronder, font-display:swap, preload van beide in wp_head. (2) ROL-SPLIT — Montserrat = tekst/UI (body, p, li, labels, inputs, h3/h4, faq, reviews), Baloo 2 = display (h1/h2, prijzen, CTA's, stats). (3) ECHTE gewichten — alle font-weight:800 → 800 (Baloo bestaat maar tot 800; 900 gaf synthetische "smeer"-bold). (4) TOKENS — type-scale (--fs-*), ritme (--space-section*), muted/hero-tekstkleuren; toegepast op sectie-paddings, koppen, hero-tekst. (5) SCROLL-REVEAL — start op opacity:.001 i.p.v. 0 + eerdere trigger + reduced-motion/no-JS volledig zichtbaar (geen blanco secties meer). (6) MICRO — contact- select-komma's weg, ticker pauzeert op hover, cookiewidget onder de CTA's. */ /* ═══════════════════════════════════════════════════════════════════════ SELF-HOSTED FONTS (v1.15.0 STAGING) — GDPR-veilig, geen Google CDN. Variabele latin-subset woff2's (dekken alle gebruikte gewichten in één bestand per familie). Baloo 2 = display, Montserrat = tekst/UI. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; /* Baloo 2-as loopt tot 800 (geen 900 → geen fake bold) */ font-display: swap; src: url('fonts/Baloo2-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/Montserrat-var-latin.woff2') format('woff2'); } /* ═══════════════════════════════════════ DESIGN TOKENS, 3 kleuren systeem ═══════════════════════════════════════ */ :root { --B: #00A0FD; --K: #000000; --W: #FFFFFF; --WG: #F5F7FA; --WGD: #EAEEF3; --B10: rgba(0,160,253,.10); --B20: rgba(0,160,253,.20); --B40: rgba(0,160,253,.40); --W10: rgba(255,255,255,.10); --W20: rgba(255,255,255,.20); --W40: rgba(255,255,255,.40); --W60: rgba(255,255,255,.60); --K05: rgba(0,0,0,.05); --K10: rgba(0,0,0,.10); --WA: #25D366; /* v1.15.0 (STAGING) ROL-SPLIT: --font = tekst/UI (Montserrat), --font-head = display (Baloo 2). Was omgekeerd: Baloo 2 stond op alle bodytekst. */ --font: 'Montserrat', system-ui, sans-serif; --font-head: 'Baloo 2', system-ui, sans-serif; --mono: 'Montserrat', system-ui, sans-serif; --r: 14px; --r-lg: 20px; --r-xl: 28px; --sh: 0 4px 24px rgba(0,0,0,.07); --sh-lg: 0 16px 56px rgba(0,0,0,.12); --sh-b: 0 8px 32px rgba(0,160,253,.28); --sh-b-lg: 0 20px 56px rgba(0,160,253,.42); --max: 1200px; --max-wide: 1400px; /* v1.15.0 (STAGING) verticaal ritme (Task 3): 96 / 64, vervangt 100/84/80/56-chaos. --sec-pad(-sm) blijven als alias zodat bestaande var(--sec-pad)-regels meeschuiven. */ --space-section: 96px; --space-section-sm: 64px; --sec-pad: var(--space-section); --sec-pad-sm: var(--space-section-sm); /* v1.15.0 (STAGING) type-scale (~1.25, hero gecapt) */ --fs-900: clamp(44px, 7vw, 76px); /* h1 */ --fs-700: clamp(32px, 5vw, 48px); /* h2 */ --fs-500: 24px; /* h3 (was ~19px, te dicht bij body) */ --fs-400: 20px; /* h4 / card-titel */ --fs-300: 17px; /* body */ --fs-200: 14px; /* labels / meta */ --lh-tight: 1.05; --lh-body: 1.6; --c-text-muted: #5a5f66; /* AA op wit, vervangt te lichte grijzen */ --c-hero-text: rgba(255,255,255,0.82); /* was .6 → onder comfort-drempel */ /* v1.11 "Kies. Plan. Proper." hero-tokens (handoff §1) */ --ir-blue: #00A0FD; /* huisblauw, accent + primaire knop */ --ir-blue-ink: #0C447C; /* donkerblauwe tekst op lichtblauwe vlakken */ --ir-blue-tint: #E6F1FB; /* lichtblauwe achtergrond voor chips/badges */ --ir-text: #1a1a1a; /* primaire tekst */ --ir-text-soft: #5f5e5a; /* secundaire tekst */ --ir-text-faint: #8a8a86; /* kicker / bijschrift */ --ir-surface: #f6f7f8; /* hero-achtergrond */ --ir-white: #ffffff; --ir-border: rgba(0,0,0,0.12); --ir-radius: 8px; --ir-radius-lg: 12px; /* v1.13.0 kleur/contrast-tokens (Document 1 §A). #0061A8 is bewust verwijderd — niet opnieuw introduceren. Bright-blue blijft de knopkleur, maar met donkere tekst i.p.v. wit (WCAG AA). */ --ir-blue-bright: #00A0FD; /* knoppen & grote vlakken — tekst hierop = --ir-ink */ --ir-ink: #0f2233; /* tekst op bright-blue knoppen + nadruk-tekst op wit */ --ir-eco: #2f9e5f; /* eco/besparing — los van WhatsApp-groen */ --ir-whatsapp: #25D366; /* uitsluitend WhatsApp (alias van --WA) */ } /* ═══════════════════════════════════════ RESET & BASE ═══════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); background: var(--W); color: var(--K); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font); border: none; background: none; } ul, ol { list-style: none; } /* ═══════════════════════════════════════════════════════════════════════ v1.15.0 (STAGING) ROL-SPLIT — Baloo 2 = display (koppen, prijzen, CTA's, stats), Montserrat = tekst/UI (body erft die). Koppen op echte 800 i.p.v. het synthetische 900 (Baloo bestaat maar tot 800). ═══════════════════════════════════════════════════════════════════════ */ h1, h2, .section-h, .ir-hero__h1, .ir-wc-hero__title, .ir-wc-booking__title, .ir-stats__val, .ir-hero__price-num, .ir-dienst-card__price, .btn { font-family: var(--font-head); } h1, h2, .section-h, .ir-hero__h1, .ir-wc-hero__title { font-weight: 800; } h3 { font-family: var(--font); font-weight: 700; font-size: var(--fs-500); line-height: 1.25; } h4 { font-family: var(--font); font-weight: 700; font-size: var(--fs-400); line-height: 1.3; } /* ═══════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════ */ .container { max-width: var(--max); margin: 0 auto; padding: 0 48px; } .container-wide { max-width: var(--max-wide); margin: 0 auto; padding: 0 48px; } .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--B); margin-bottom: 16px; } .section-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--B); border-radius: 2px; } .section-h { font-family: var(--font-head); font-size: var(--fs-700); /* clamp(32px,5vw,48px) */ font-weight: 800; letter-spacing: -.03em; color: var(--K); line-height: var(--lh-tight); margin-bottom: 14px; } .section-h--white { color: var(--W); } .section-sub { font-size: 17px; color: rgba(0,0,0,.5); max-width: 520px; line-height: 1.7; } /* ═══════════════════════════════════════ BUTTONS ═══════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: var(--r); font-size: 16px; font-weight: 800; font-family: var(--font-head); /* v1.15.0: CTA = display-font */ transition: all .2s; text-decoration: none; cursor: pointer; border: none; } .btn-primary { background: var(--B); color: var(--ir-ink); box-shadow: var(--sh-b); } .btn-primary:hover { background: #0089DB; transform: translateY(-2px); box-shadow: var(--sh-b-lg); } .btn-secondary { background: transparent; color: var(--W); border: 1.5px solid rgba(255,255,255,.25); } .btn-secondary:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); } .btn-white { background: var(--W); color: var(--ir-ink); box-shadow: 0 4px 20px rgba(0,0,0,.15); } .btn-white:hover { transform: translateY(-1px); } .btn-wa { background: var(--WA); color: var(--W); } .btn-wa:hover { background: #20BD5C; } .btn-outline-dark { background: transparent; color: var(--K); border: 1.5px solid rgba(0,0,0,.12); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .btn-outline-dark:hover { border-color: var(--B); color: var(--B); background: var(--B10); } /* ═══════════════════════════════════════ TRUST TICKER ═══════════════════════════════════════ */ .ir-ticker { background: var(--B); overflow: hidden; padding: 10px 0; } .ir-ticker__track { display: flex; gap: 0; animation: ir-ticker 30s linear infinite; white-space: nowrap; width: max-content; } @keyframes ir-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ir-ticker__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 40px; font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--ir-ink); letter-spacing: .06em; text-transform: uppercase; } .ir-ticker__sep { color: rgba(15,34,51,.35); font-size: 16px; } /* ═══════════════════════════════════════ NAVIGATIE ═══════════════════════════════════════ */ .ir-nav { background: var(--W); border-bottom: 1px solid rgba(0,0,0,.08); height: 70px; display: flex; align-items: center; position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 12px rgba(0,0,0,.06); } .ir-nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .ir-nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .ir-nav__logo-mark { width: 44px; height: 44px; background: var(--K); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 10px; } .ir-nav__logo-mark span { display: block; height: 2px; border-radius: 2px; background: var(--W); } .ir-nav__logo-mark span:nth-child(2) { width: 70%; background: var(--B); } .ir-nav__logo-mark span:nth-child(3) { width: 85%; } .ir-nav__logo-text { font-weight: 800; font-size: 16px; color: var(--K); line-height: 1.15; letter-spacing: -.02em; } .ir-nav__logo-text span { color: var(--B); } .ir-nav__links { display: flex; align-items: center; gap: 2px; } .ir-nav__links a { padding: 8px 13px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(0,0,0,.55); border-radius: 8px; transition: .15s; } .ir-nav__links a:hover, .ir-nav__links a.current { color: var(--B); background: var(--B10); } .ir-nav__b2b { display: flex; align-items: center; gap: 7px; padding: 7px 14px !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 8px !important; margin-left: 6px; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: rgba(0,0,0,.55) !important; transition: .15s; } .ir-nav__b2b:hover { border-color: var(--B) !important; color: var(--B) !important; background: var(--B10) !important; } .ir-nav__b2b-dot { width: 7px; height: 7px; background: var(--B); border-radius: 50%; box-shadow: 0 0 0 2px var(--B20); } .ir-nav__actions { display: flex; align-items: center; gap: 10px; } .ir-lang { display: flex; gap: 1px; background: rgba(0,0,0,.06); border-radius: 8px; padding: 3px; } .ir-lang a { padding: 5px 10px; font-family: var(--mono); font-size: 11px; font-weight: 800; color: rgba(0,0,0,.4); border-radius: 6px; letter-spacing: .06em; text-decoration: none; } .ir-lang a.active { background: var(--W); color: var(--K); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .ir-nav__wa { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; background: var(--WA); color: var(--W); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-decoration: none; transition: .2s; } .ir-nav__wa:hover { background: #20BD5C; } /* Klik-om-te-bellen in de nav (Document 1 §C14) */ .ir-nav__phone { display: inline-flex; align-items: center; gap: 6px; color: var(--ir-ink, #0f2233); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .02em; text-decoration: none; white-space: nowrap; transition: color .2s; } .ir-nav__phone:hover { color: var(--B); } .ir-nav__phone svg { flex-shrink: 0; color: var(--B); } @media (max-width: 1080px) { .ir-nav__phone { display: none; } } .ir-nav__book { display: flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 10px; background: var(--B); color: var(--ir-ink); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-decoration: none; box-shadow: var(--sh-b); transition: .2s; } .ir-nav__book:hover { background: #0089DB; transform: translateY(-1px); } /* Mobile hamburger */ .ir-nav__burger { display: none; flex-direction: column; gap: 5px; width: 30px; cursor: pointer; padding: 4px; } .ir-nav__burger span { display: block; height: 2px; background: var(--K); border-radius: 2px; transition: .3s; } /* ═══════════════════════════════════════ HERO ═══════════════════════════════════════ */ .ir-hero { background: var(--K); min-height: calc(100vh - 110px); display: flex; align-items: center; position: relative; overflow: hidden; } .ir-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,160,253,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,160,253,.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .ir-hero::after { content: ''; position: absolute; top: -200px; right: -200px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(0,160,253,.12) 0%, transparent 65%); pointer-events: none; } .ir-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: var(--space-section-sm) 0; position: relative; z-index: 1; width: 100%; } .ir-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--B40); border-radius: 30px; padding: 7px 18px; margin-bottom: 28px; font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--B); letter-spacing: .1em; text-transform: uppercase; background: var(--B10); } .ir-hero__dot { width: 7px; height: 7px; background: var(--B); border-radius: 50%; animation: ir-blink 2s infinite; } @keyframes ir-blink { 0%,100%{opacity:1} 50%{opacity:.2} } .ir-hero__h1 { font-size: clamp(52px, 5.5vw, 80px); font-weight: 800; line-height: .95; letter-spacing: -.04em; color: var(--W); margin-bottom: 28px; } .ir-hero__h1 span { display: block; } .ir-hero__h1 .blue { color: var(--B); } .ir-hero__sub { font-size: var(--fs-300); color: var(--c-hero-text); /* v1.15.0: was --W60 (.6, te licht) */ line-height: 1.75; margin-bottom: 32px; max-width: 480px; } .ir-hero__proof { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; } .ir-hero__stars { color: #FBBF24; font-size: 18px; letter-spacing: 2px; } .ir-hero__proof-label { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--W40); letter-spacing: .06em; } .ir-hero__proof-div { width: 1px; height: 36px; background: var(--W10); } .ir-hero__proof-num { font-size: 36px; font-weight: 800; color: var(--B); line-height: 1; letter-spacing: -.03em; } .ir-hero__proof-num-label { font-family: var(--mono); font-size: 11px; color: var(--W40); font-weight: 700; letter-spacing: .06em; margin-top: 2px; } .ir-hero__ctas { display: flex; flex-direction: column; gap: 12px; max-width: 460px; } .ir-hero__micro { font-family: var(--mono); font-size: 11px; color: var(--W40); text-align: center; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; gap: 8px; } .ir-hero__trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ir-hero__trust-chip { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--W60); background: var(--W10); border: 1px solid var(--W10); border-radius: 20px; padding: 5px 12px; letter-spacing: .04em; } .ir-hero__visual { position: relative; } .ir-hero__price-badge { position: absolute; bottom: -20px; right: -24px; background: var(--B); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--sh-b-lg); text-align: center; min-width: 140px; z-index: 3; } .ir-hero__price-from { font-family: var(--mono); font-size: 10px; font-weight: 800; color: rgba(255,255,255,.6); letter-spacing: .1em; text-transform: uppercase; } .ir-hero__price-num { font-size: 40px; font-weight: 800; color: var(--W); line-height: 1; letter-spacing: -.03em; } .ir-hero__price-sub { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.55); margin-top: 3px; } .ir-hero__fbt-badge { position: absolute; top: -16px; left: -16px; background: var(--W); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--sh-lg); display: flex; align-items: center; border: 2px solid var(--B20); z-index: 2; } .ir-hero__fbt-badge img { display: block; height: auto; max-width: 80px; width: 100%; } /* ═══════════════════════════════════════ B2B BRIDGE BANNER ═══════════════════════════════════════ */ .ir-b2b-banner { background: #F0F6FF; border-top: 1px solid rgba(0,160,253,.15); border-bottom: 1px solid rgba(0,160,253,.15); padding: 12px 0; } .ir-b2b-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ir-b2b-banner__text { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: rgba(0,0,0,.55); letter-spacing: .04em; } .ir-b2b-banner__dot { width: 8px; height: 8px; background: var(--B); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,160,253,.2); } /* ═══════════════════════════════════════ STATS BAR ═══════════════════════════════════════ */ .ir-stats { background: var(--K); } .ir-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .ir-stats__cell { padding: 40px 32px; border-right: 1px solid var(--W10); position: relative; overflow: hidden; transition: .3s; } .ir-stats__cell:last-child { border-right: none; } .ir-stats__cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--B); transform: scaleX(0); transform-origin: left; transition: .4s; } .ir-stats__cell:hover::before { transform: scaleX(1); } .ir-stats__val { font-size: clamp(36px, 3.5vw, 52px); font-weight: 800; color: var(--W); line-height: 1; letter-spacing: -.03em; } .ir-stats__val .accent { color: var(--B); } .ir-stats__name { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--W40); letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; } .ir-stats__detail { font-size: 14px; color: var(--W60); margin-top: 5px; font-weight: 600; } /* ═══════════════════════════════════════ DIENSTEN GRID ═══════════════════════════════════════ */ .ir-diensten { background: var(--W); padding: var(--space-section) 0; } .ir-diensten__header { margin-bottom: 60px; } .ir-diensten__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ir-dienst-card { border: 1.5px solid rgba(0,0,0,.08); border-radius: var(--r-lg); padding: 28px 24px; cursor: pointer; transition: .25s; position: relative; overflow: hidden; background: var(--W); text-decoration: none; color: inherit; display: block; } .ir-dienst-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--B); transform: scaleX(0); transform-origin: left; transition: .25s; } .ir-dienst-card:hover { border-color: var(--B); box-shadow: var(--sh-b); transform: translateY(-4px); } .ir-dienst-card:hover::after { transform: scaleX(1); } .ir-dienst-card__icon { width: 56px; height: 56px; background: var(--K); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; } .ir-dienst-card__name { font-size: 20px; font-weight: 800; color: var(--K); margin-bottom: 8px; letter-spacing: -.02em; } .ir-dienst-card__desc { font-size: 14px; color: rgba(0,0,0,.5); line-height: 1.6; margin-bottom: 24px; } .ir-dienst-card__price-from { font-family: var(--mono); font-size: 11px; font-weight: 700; color: rgba(0,0,0,.35); letter-spacing: .06em; text-transform: uppercase; } .ir-dienst-card__price { font-size: 34px; font-weight: 800; color: var(--B); line-height: 1; letter-spacing: -.03em; } .ir-dienst-card__price-note { font-family: var(--mono); font-size: 11px; color: rgba(0,0,0,.35); margin-top: 3px; } .ir-dienst-card__link { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--B); margin-top: 18px; letter-spacing: .04em; text-transform: uppercase; } /* ═══════════════════════════════════════ VOOR/NA RESULTATEN ═══════════════════════════════════════ */ .ir-resultaten { background: var(--WG); padding: var(--space-section) 0; } .ir-resultaten__header { margin-bottom: 60px; } .ir-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ir-ba-card { background: var(--W); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); border: 1px solid rgba(0,0,0,.06); } .ir-ba-card__img { position: relative; overflow: hidden; } .ir-ba-card__img img { width: 100%; height: 300px; object-fit: cover; } .ir-ba-card__split { display: flex; height: 300px; } .ir-ba-card__before, .ir-ba-card__after { flex: 1; position: relative; overflow: hidden; } .ir-ba-card__before img, .ir-ba-card__after img { width: 100%; height: 100%; object-fit: cover; } .ir-ba-card__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--W); transform: translateX(-50%); z-index: 2; } .ir-ba-card__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; background: var(--W); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.2); color: var(--B); font-size: 14px; font-weight: 800; z-index: 3; cursor: ew-resize; } .ir-ba-card__pill { position: absolute; top: 12px; padding: 3px 12px; background: rgba(0,0,0,.7); color: var(--W); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .14em; border-radius: 20px; z-index: 4; } .ir-ba-card__pill--before { left: 12px; } .ir-ba-card__pill--after { right: 12px; } .ir-ba-card__foot { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; } .ir-ba-card__title { font-size: 14px; font-weight: 800; color: var(--K); } .ir-ba-card__loc { font-family: var(--mono); font-size: 11px; color: rgba(0,0,0,.35); } .ir-ba-card__verified { font-family: var(--mono); font-size: 10px; font-weight: 800; color: var(--B); background: var(--B10); padding: 4px 12px; border-radius: 20px; border: 1px solid var(--B20); } /* ═══════════════════════════════════════ TEAM SECTIE ═══════════════════════════════════════ */ .ir-team { background: var(--K); padding: var(--space-section) 0; position: relative; overflow: hidden; } .ir-team::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,160,253,.06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .ir-team__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .ir-team__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--B); margin-bottom: 20px; } .ir-team__eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--B); border-radius: 2px; } .ir-team__h { font-size: clamp(36px, 3.5vw, 48px); font-weight: 800; color: var(--W); letter-spacing: -.03em; line-height: 1.0; margin-bottom: 20px; } .ir-team__h span { color: var(--B); } .ir-team__desc { font-size: 16px; color: var(--W60); line-height: 1.8; margin-bottom: 32px; } .ir-team__stats { display: flex; gap: 32px; flex-wrap: wrap; } .ir-team__stat-n { font-size: 40px; font-weight: 800; color: var(--B); line-height: 1; letter-spacing: -.03em; } .ir-team__stat-l { font-family: var(--mono); font-size: 11px; color: var(--W40); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; } .ir-team__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; position: relative; border: 1px solid var(--W10); } .ir-team__photo img { width: 100%; height: 100%; object-fit: cover; } .ir-team__photo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--B), transparent); z-index: 2; } /* v5.4.2: in nieuwere section-team.php is .ir-team__photo het element zelf, niet een container. We resetten de aspect-ratio + force object-fit op de img zelf zodat de foto niet meer vervormd wordt. */ img.ir-team__photo { aspect-ratio: auto; width: 100%; height: auto; max-height: 540px; object-fit: cover; object-position: center; border: 0; display: block; } img.ir-team__photo::before { content: none; } /* ═══════════════════════════════════════ REVIEWS & TRUSTINDEX ═══════════════════════════════════════ */ .ir-reviews { background: var(--W); padding: var(--space-section) 0; } .ir-reviews__top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; flex-wrap: wrap; gap: 24px; } .ir-reviews__score { display: flex; align-items: center; gap: 24px; } .ir-reviews__score-big { font-size: clamp(64px, 6vw, 88px); font-weight: 800; color: var(--K); line-height: 1; letter-spacing: -.05em; } .ir-reviews__score-stars { color: #FBBF24; font-size: 28px; letter-spacing: 3px; } .ir-reviews__score-based { font-family: var(--mono); font-size: 12px; color: rgba(0,0,0,.35); letter-spacing: .06em; margin-top: 6px; } .ir-reviews__google-badge { display: flex; align-items: center; gap: 10px; background: var(--WG); border: 1px solid var(--WGD); border-radius: 12px; padding: 12px 20px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: rgba(0,0,0,.5); } .ir-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } .ir-review-card { background: var(--WG); border: 1px solid var(--WGD); border-radius: var(--r); padding: 24px; } .ir-review-card__stars { color: #FBBF24; font-size: 14px; margin-bottom: 12px; letter-spacing: 1px; } .ir-review-card__text { font-size: 14px; color: rgba(0,0,0,.65); line-height: 1.75; margin-bottom: 18px; font-style: italic; } .ir-review-card__author { display: flex; align-items: center; gap: 10px; } .ir-review-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--B); color: var(--W); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; font-family: var(--mono); flex-shrink: 0; } .ir-review-card__name { font-size: 13px; font-weight: 800; color: var(--K); } .ir-review-card__meta { font-family: var(--mono); font-size: 11px; color: rgba(0,0,0,.35); } /* Trustindex widget zone */ .ir-trustindex-zone { border-radius: var(--r-lg); overflow: hidden; } .ir-trustindex-zone .trustindex-widget { /* WP plugin injects here */ } /* ═══════════════════════════════════════ MID CTA ═══════════════════════════════════════ */ .ir-mid-cta { background: var(--B); padding: var(--space-section-sm) 0; text-align: center; position: relative; overflow: hidden; } .ir-mid-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12), transparent 60%); pointer-events: none; } .ir-mid-cta__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; padding: 0 24px; } .ir-mid-cta__tag { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); display: block; margin-bottom: 20px; } .ir-mid-cta__h { font-size: clamp(36px, 4vw, 52px); font-weight: 800; color: var(--W); letter-spacing: -.03em; line-height: 1.0; margin-bottom: 14px; } .ir-mid-cta__p { font-size: 18px; color: rgba(255,255,255,.75); margin-bottom: 40px; } .ir-mid-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .ir-mid-cta__sub { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.45); margin-top: 20px; letter-spacing: .06em; } /* §7.B CTA-hiërarchie: WhatsApp als secundaire tekstlink (geen tweede grote knop) */ .ir-mid-cta__link { align-self: center; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 700; text-decoration: none; } .ir-mid-cta__link:hover { color: #fff; text-decoration: underline; } /* ═══════════════════════════════════════ PROCES, "Zo verloopt uw afspraak" (§7.A) ═══════════════════════════════════════ */ .ir-proces { background: var(--W); padding: var(--sec-pad, 84px) 0; } .ir-proces__header { text-align: center; max-width: 640px; margin: 0 auto 48px; } .ir-proces__header .section-eyebrow { justify-content: center; } .ir-proces__header .section-sub { margin-left: auto; margin-right: auto; } .ir-proces__header .section-h span { color: var(--B); } .ir-proces__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; list-style: none; padding: 0; counter-reset: none; } .ir-proces__step { background: var(--WG, #F5F7FA); border: 1px solid var(--WGD, #EAEEF3); border-radius: var(--r-lg, 20px); padding: 32px 28px; } .ir-proces__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--B10, rgba(0,160,253,.10)); color: var(--B, #00A0FD); font-family: var(--font, 'Baloo 2', sans-serif); font-weight: 800; font-size: 20px; margin-bottom: 16px; } .ir-proces__title { font-family: var(--font, 'Baloo 2', sans-serif); font-size: 20px; font-weight: 800; line-height: 1.25; margin: 0 0 8px; color: var(--K, #000); } .ir-proces__title span { color: var(--B, #00A0FD); } .ir-proces__desc { font-size: 15px; line-height: 1.6; color: rgba(0,0,0,.7); margin: 0; } .ir-proces__cta { text-align: center; margin-top: 40px; } @media (max-width: 820px) { .ir-proces__grid { grid-template-columns: 1fr; max-width: 460px; } } @media (max-width: 600px) { .ir-proces { padding: var(--sec-pad-sm, 56px) 0; } .ir-proces__step { padding: 24px 22px; } } /* ═══════════════════════════════════════ WAAROM WIJ / METHODE ═══════════════════════════════════════ */ .ir-waarom { background: var(--K); padding: var(--space-section) 0; } .ir-waarom__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .ir-waarom__bullets { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .ir-waarom__bullet { display: flex; align-items: flex-start; gap: 16px; } .ir-waarom__bullet-icon { width: 44px; height: 44px; background: var(--B10); border: 1px solid var(--B20); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ir-waarom__bullet-title { font-size: 15px; font-weight: 800; color: var(--W); margin-bottom: 4px; } .ir-waarom__bullet-desc { font-size: 13px; color: var(--W40); line-height: 1.6; } .ir-methode-card { background: var(--W10); border: 1px solid var(--W10); border-radius: var(--r-xl); padding: 32px; } .ir-methode-card__label { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--B); margin-bottom: 24px; } .ir-methode-step { display: flex; gap: 20px; padding-bottom: 28px; } .ir-methode-step:last-child { padding-bottom: 0; } .ir-methode-step__num-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; } .ir-methode-step__num { width: 36px; height: 36px; background: var(--B); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--W); flex-shrink: 0; } .ir-methode-step__line { width: 2px; flex: 1; background: var(--B20); margin-top: 8px; min-height: 32px; } .ir-methode-step__title { font-size: 15px; font-weight: 800; color: var(--W); margin-bottom: 6px; padding-top: 6px; } .ir-methode-step__desc { font-size: 13px; color: var(--W40); line-height: 1.7; } .ir-methode-card__science { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--W10); font-family: var(--mono); font-size: 11px; color: var(--W40); line-height: 1.7; } /* ═══════════════════════════════════════ STEDEN GRID (Lokale SEO) ═══════════════════════════════════════ */ .ir-steden { background: var(--WG); padding: 60px 0; } .ir-steden__header { text-align: center; margin-bottom: 40px; } .ir-steden__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 24px; } .ir-steden__province-label { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,.3); padding: 12px 0 4px; } .ir-steden__province-label:first-child { padding-top: 0; } .ir-steden__city { background: var(--W); border: 1.5px solid rgba(0,0,0,.08); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--K); text-decoration: none; text-align: center; transition: .2s; } .ir-steden__city:hover { border-color: var(--B); color: var(--B); background: var(--B10); } .ir-steden__city--active { background: var(--B); border-color: var(--B); color: var(--W); } .ir-steden__city--active:hover { background: #007ACC; } .ir-steden__footer { text-align: center; } .ir-steden__more { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--B); letter-spacing: .06em; text-decoration: none; } .ir-steden__note { font-family: var(--mono); font-size: 11px; color: rgba(0,0,0,.3); margin-top: 8px; } /* ═══════════════════════════════════════ OVER ONS SNIPPET (AI/Knowledge Graph) ═══════════════════════════════════════ */ .ir-about-snippet { background: var(--W); padding: 60px 0; border-bottom: 1px solid rgba(0,0,0,.06); } .ir-about-snippet__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; } .ir-about-snippet__accent { width: 40px; height: 3px; background: var(--B); border-radius: 2px; margin-top: 12px; } .ir-about-snippet__text p { font-size: 16px; color: rgba(0,0,0,.7); line-height: 1.85; margin-bottom: 20px; } .ir-about-snippet__text p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════ FAQ ═══════════════════════════════════════ */ .ir-faq { background: var(--W); padding: var(--space-section) 0; } .ir-faq__inner { max-width: 780px; margin: 0 auto; } .ir-faq__header { margin-bottom: 56px; } .ir-faq__item { border-bottom: 1px solid rgba(0,0,0,.07); } .ir-faq__q { display: flex; justify-content: space-between; align-items: center; padding: 22px 4px; cursor: pointer; gap: 16px; } .ir-faq__q-text { font-size: 16px; font-weight: 700; color: var(--K); } .ir-faq__q-btn, .ir-faq .ir-faq__q-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--B10); border: 1px solid var(--B20); display: flex; align-items: center; justify-content: center; color: var(--B); font-size: 18px; font-weight: 700; flex-shrink: 0; transition: .2s; } .ir-faq__item.open .ir-faq__q-btn, .ir-faq__item.open .ir-faq__q-icon, .ir-faq__item[open] .ir-faq__q-btn, .ir-faq__item[open] .ir-faq__q-icon { background: var(--B); color: var(--W); } .ir-faq__a { padding: 0 4px 22px; font-size: 15px; color: rgba(0,0,0,.55); line-height: 1.8; display: none; } .ir-faq__item.open .ir-faq__a, .ir-faq__item[open] .ir-faq__a { display: block; } /* v5.4.4: rotate "+" → "×" wanneer details open is, ook bij native toggle */ .ir-faq__item[open] .ir-faq__q-btn, .ir-faq__item[open] .ir-faq__q-icon { transform: rotate(45deg); } /* ═══════════════════════════════════════ WERKGEBIED ═══════════════════════════════════════ */ .ir-werkgebied { background: var(--WG); padding: var(--space-section) 0; } .ir-werkgebied__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .ir-werkgebied__provinces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .ir-werkgebied__prov { display: flex; align-items: center; gap: 8px; background: var(--W); border: 1.5px solid rgba(0,0,0,.08); border-radius: 30px; padding: 7px 16px; font-size: 14px; font-weight: 700; color: var(--K); } .ir-werkgebied__prov-dot { width: 8px; height: 8px; background: var(--B); border-radius: 50%; } .ir-werkgebied__map { background: var(--W); border: 1.5px solid var(--WGD); border-radius: var(--r-xl); aspect-ratio: 4/3; overflow: hidden; } .ir-werkgebied__map img { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════ FOOTER ═══════════════════════════════════════ */ .ir-footer { background: var(--K); padding: 72px 0 28px; border-top: 3px solid var(--B); } .ir-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; gap: 40px; margin-bottom: 56px; } .ir-footer__brand-name { font-size: 20px; font-weight: 800; color: var(--W); margin-bottom: 12px; letter-spacing: -.02em; } .ir-footer__brand-name span { color: var(--B); } .ir-footer__desc { font-size: 14px; color: var(--W40); line-height: 1.75; margin-bottom: 20px; } .ir-footer__contact { font-family: var(--mono); font-size: 12px; color: var(--W40); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .ir-footer__fbt { display: flex; align-items: center; gap: 12px; background: var(--W10); border: 1px solid var(--W10); border-radius: 10px; padding: 10px 14px; margin-top: 20px; max-width: 280px; } .ir-footer__fbt-img { display: block; height: auto; max-width: 60px; flex-shrink: 0; background: var(--W); padding: 4px; border-radius: 4px; } .ir-footer__fbt-desc { font-family: var(--mono); font-size: 11px; color: var(--W40); line-height: 1.4; } .ir-footer__col h4 { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--W20); margin-bottom: 20px; } .ir-footer__col ul li { margin-bottom: 12px; } .ir-footer__col a { font-size: 14px; color: var(--W60); text-decoration: none; font-weight: 600; transition: .15s; } .ir-footer__col a:hover { color: var(--B); } .ir-footer__wa-block { background: var(--W10); border: 1px solid var(--W10); border-radius: var(--r); padding: 20px; } .ir-footer__wa-title { font-size: 14px; font-weight: 800; color: var(--W); margin-bottom: 8px; } .ir-footer__wa-sub { font-family: var(--mono); font-size: 11px; color: var(--W40); margin-bottom: 16px; } .ir-footer__wa-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--WA); color: var(--W); border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 800; text-decoration: none; letter-spacing: .04em; } .ir-footer__b2b-block { background: var(--B10); border: 1px solid var(--B20); border-radius: var(--r); padding: 20px; } .ir-footer__b2b-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--B); margin-bottom: 12px; } .ir-footer__b2b-dot { width: 6px; height: 6px; background: var(--B); border-radius: 50%; } .ir-footer__b2b-title { font-size: 13px; font-weight: 800; color: var(--W); margin-bottom: 6px; line-height: 1.3; } .ir-footer__b2b-sub { font-family: var(--mono); font-size: 11px; color: var(--W40); margin-bottom: 14px; line-height: 1.6; } .ir-footer__b2b-services { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .ir-footer__b2b-service { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--W60); display: flex; align-items: center; gap: 7px; } .ir-footer__b2b-service::before { content: '→'; color: var(--B); font-size: 11px; } .ir-footer__b2b-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; background: var(--B); color: var(--W); border-radius: 8px; font-family: var(--mono); font-size: 11px; font-weight: 800; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; } .ir-footer__bottom { border-top: 1px solid var(--W10); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--W20); } .ir-footer__legal { display: flex; gap: 20px; } .ir-footer__legal a { color: var(--W20); text-decoration: none; } .ir-footer__legal a:hover { color: var(--B); } /* ═══════════════════════════════════════ FLOATING WHATSAPP ═══════════════════════════════════════ */ .ir-wa-float { position: fixed; bottom: 28px; right: 28px; width: 60px; height: 60px; background: var(--WA); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; z-index: 500; box-shadow: 0 4px 24px rgba(37,211,102,.5); cursor: pointer; text-decoration: none; animation: ir-wa-pop 3s ease-in-out infinite; } @keyframes ir-wa-pop { 0%,100% { box-shadow: 0 4px 24px rgba(37,211,102,.5); } 50% { box-shadow: 0 4px 40px rgba(37,211,102,.8); transform: scale(1.05); } } /* ═══════════════════════════════════════ WOOCOMMERCE OVERRIDES ═══════════════════════════════════════ */ .woocommerce-page .woocommerce { max-width: var(--max); margin: 0 auto; padding: 60px 48px; } .woocommerce button.button, .woocommerce a.button { background: var(--B) !important; color: var(--W) !important; border-radius: var(--r) !important; font-family: var(--font) !important; font-weight: 800 !important; font-size: 15px !important; padding: 14px 28px !important; box-shadow: var(--sh-b) !important; border: none !important; transition: .2s !important; } .woocommerce button.button:hover, .woocommerce a.button:hover { background: #007ACC !important; transform: translateY(-1px) !important; } .woocommerce .woocommerce-message { border-top-color: var(--B) !important; } .woocommerce ul.products li.product .woocommerce-Price-amount { color: var(--B) !important; font-weight: 800 !important; } .woocommerce div.product .woocommerce-Price-amount.amount { font-size: 36px !important; font-weight: 800 !important; color: var(--B) !important; } .woocommerce #payment #place_order { background: var(--B) !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border-radius: 8px !important; border: 1.5px solid rgba(0,0,0,.15) !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--B) !important; outline: none !important; box-shadow: 0 0 0 3px var(--B10) !important; } .woocommerce .cart_totals { border-radius: var(--r-lg) !important; } /* ═══════════════════════════════════════ PAGINA TEMPLATES, DIENSTENPAGINA ═══════════════════════════════════════ */ .ir-dienst-page__hero { background: var(--K); padding: 80px 0 60px; } .ir-dienst-page__breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--W40); margin-bottom: 24px; } .ir-dienst-page__breadcrumb a { color: var(--B); } .ir-dienst-page__h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; color: var(--W); letter-spacing: -.03em; margin-bottom: 16px; } .ir-dienst-page__sub { font-size: 18px; color: var(--W60); max-width: 560px; } .ir-dienst-page__content { padding: var(--space-section-sm) 0; } .ir-dienst-page__layout { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start; } /* Sticky prijs sidebar */ .ir-price-sidebar { position: sticky; top: 90px; } .ir-price-card { background: var(--W); border: 1.5px solid rgba(0,0,0,.1); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--sh-lg); } .ir-price-card__label { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--B); margin-bottom: 20px; } .ir-price-card__price-wrap { margin-bottom: 20px; } .ir-price-card__from { font-family: var(--mono); font-size: 12px; color: rgba(0,0,0,.4); margin-bottom: 4px; } .ir-price-card__price { font-size: 52px; font-weight: 800; color: var(--B); line-height: 1; letter-spacing: -.03em; } .ir-price-card__note { font-family: var(--mono); font-size: 12px; color: rgba(0,0,0,.4); margin-top: 6px; } .ir-price-card__features { margin-bottom: 24px; } .ir-price-card__feature { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: rgba(0,0,0,.7); padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); } .ir-price-card__feature:last-child { border: none; } .ir-price-card__feature-icon { color: var(--B); font-size: 16px; } .ir-price-card__ctas { display: flex; flex-direction: column; gap: 10px; } .ir-price-card__trust { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; } .ir-price-card__trust-item { font-family: var(--mono); font-size: 11px; font-weight: 700; color: rgba(0,0,0,.4); display: flex; align-items: center; gap: 5px; } /* ═══════════════════════════════════════ PRIJZENPAGINA ═══════════════════════════════════════ */ .ir-prijzen { padding: var(--space-section) 0; } .ir-prijzen__intro { max-width: 640px; margin-bottom: 64px; } .ir-prijzen__table-wrap { margin-bottom: 48px; } .ir-prijzen__table-title { font-size: 24px; font-weight: 800; color: var(--K); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .ir-prijzen__table { width: 100%; border-collapse: collapse; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); } .ir-prijzen__table thead tr { background: var(--K); } .ir-prijzen__table th { padding: 16px 20px; font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--W); text-align: left; } .ir-prijzen__table th:last-child { text-align: right; } .ir-prijzen__table td { padding: 16px 20px; font-size: 15px; color: rgba(0,0,0,.75); border-bottom: 1px solid rgba(0,0,0,.06); } .ir-prijzen__table td:last-child { text-align: right; font-weight: 800; font-size: 20px; color: var(--B); } .ir-prijzen__table tbody tr:nth-child(even) { background: var(--WG); } .ir-prijzen__table tbody tr:hover { background: var(--B10); } .ir-prijzen__note { background: var(--WG); border-left: 4px solid var(--B); border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; font-size: 14px; color: rgba(0,0,0,.6); margin-top: 16px; line-height: 1.7; } .ir-prijzen__cta-box { background: var(--B); border-radius: var(--r-xl); padding: 48px; text-align: center; margin-top: 64px; } .ir-prijzen__cta-box h2 { font-size: 32px; font-weight: 800; color: var(--W); letter-spacing: -.02em; margin-bottom: 12px; } .ir-prijzen__cta-box p { font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 28px; } /* ═══════════════════════════════════════ STAD/GEMEENTE PAGINA TEMPLATE ═══════════════════════════════════════ */ .ir-stad-hero { background: var(--K); padding: 80px 0 60px; } .ir-stad-hero__label { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--B); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .ir-stad-hero__h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; color: var(--W); letter-spacing: -.03em; margin-bottom: 20px; } .ir-stad-hero__sub { font-size: 18px; color: var(--W60); max-width: 560px; margin-bottom: 32px; } .ir-stad-hero__diensten { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; } .ir-stad-hero__dienst { display: flex; align-items: center; gap: 8px; background: var(--W10); border: 1px solid var(--W10); border-radius: var(--r); padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--W); text-decoration: none; transition: .2s; } .ir-stad-hero__dienst:hover { background: var(--B10); border-color: var(--B40); color: var(--B); } /* ═══════════════════════════════════════ RESPONSIVE, MOBIEL ═══════════════════════════════════════ */ @media (max-width: 1024px) { .container, .container-wide { padding: 0 32px; } .ir-stats__grid { grid-template-columns: repeat(2, 1fr); } .ir-diensten__grid { grid-template-columns: repeat(2, 1fr); } .ir-ba-grid { grid-template-columns: 1fr; } .ir-team__inner, .ir-waarom__inner, .ir-werkgebied__inner, .ir-about-snippet__inner { grid-template-columns: 1fr; gap: 48px; } .ir-reviews__grid { grid-template-columns: repeat(2, 1fr); } .ir-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .ir-steden__grid { grid-template-columns: repeat(4, 1fr); } .ir-nav__links { display: none; } .ir-nav__burger { display: flex; } .ir-dienst-page__layout { grid-template-columns: 1fr; } .ir-price-sidebar { position: static; } } @media (max-width: 640px) { .container, .container-wide { padding: 0 20px; } .ir-stats__grid { grid-template-columns: repeat(2, 1fr); } .ir-diensten__grid, .ir-footer__grid { grid-template-columns: 1fr; } .ir-reviews__grid { grid-template-columns: 1fr; } .ir-steden__grid { grid-template-columns: repeat(3, 1fr); } .ir-mid-cta__btns { flex-direction: column; align-items: center; } .ir-nav__wa { display: none; } .ir-prijzen__table { display: block; overflow-x: auto; } } /* === IR-THEME-ADDITIONS === */ /* ═══════════════════════════════════════ ir-theme, additions to style.css Voeg deze regels toe aan /wp-content/themes/ir-theme/style.css ═══════════════════════════════════════ */ /* ═══════════════════════════════════════ 1. Before/After Slider (ba-slider.js) ═══════════════════════════════════════ */ .ir-ba { position: relative; overflow: hidden; user-select: none; touch-action: none; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--K, #000); margin: 24px 0; } .ir-ba img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .ir-ba__before { clip-path: inset(0 50% 0 0); } .ir-ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: var(--W, #fff); transform: translateX(-50%); cursor: ew-resize; box-shadow: 0 0 12px rgba(0, 0, 0, .4); z-index: 2; } .ir-ba__handle:focus { outline: 2px solid var(--B, #00A0FD); outline-offset: 2px; } .ir-ba__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--W, #fff); color: var(--K, #000); display: grid; place-items: center; font-size: 20px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); pointer-events: none; } .ir-ba::before { content: 'Voor'; position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, .65); color: var(--W, #fff); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: Montserrat, sans-serif; letter-spacing: .04em; z-index: 3; } .ir-ba::after { content: 'Na'; position: absolute; top: 12px; right: 12px; background: var(--B, #00A0FD); color: var(--W, #fff); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: Montserrat, sans-serif; font-weight: 700; letter-spacing: .04em; z-index: 3; } /* ═══════════════════════════════════════ 2. Service hub page styling ═══════════════════════════════════════ */ .ir-service { max-width: 920px; margin: 0 auto; padding: 32px 24px; } .ir-service__lead { font-family: 'Baloo 2', sans-serif; font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--K, #000); background: var(--B10, rgba(0, 160, 253, .10)); border-left: 4px solid var(--B, #00A0FD); padding: 24px 28px; border-radius: 0 12px 12px 0; margin: 24px 0 40px; } .ir-service h2 { font-family: 'Baloo 2', sans-serif; font-size: 32px; font-weight: 800; margin: 48px 0 16px; } .ir-service h3 { font-family: 'Baloo 2', sans-serif; font-size: 22px; font-weight: 700; margin: 32px 0 12px; } .ir-service p { font-family: Montserrat, sans-serif; font-size: 17px; line-height: 1.7; margin: 12px 0; } .ir-service ul, .ir-service ol { font-family: Montserrat, sans-serif; font-size: 17px; line-height: 1.7; padding-left: 24px; } .ir-service ul li, .ir-service ol li { margin: 6px 0; } /* ═══════════════════════════════════════ 3. Pricing table ═══════════════════════════════════════ */ .ir-pricing { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: Montserrat, sans-serif; } .ir-pricing th, .ir-pricing td { padding: 14px 16px; border-bottom: 1px solid var(--WGD, #EAEEF3); text-align: left; } .ir-pricing th { background: var(--WG, #F5F7FA); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; } .ir-pricing td:last-child { font-weight: 700; color: var(--B, #00A0FD); text-align: right; } /* ═══════════════════════════════════════ 4. FAQ accordion (uses ir-faq from theme) ═══════════════════════════════════════ */ .ir-faq__answer { padding: 16px 0; font-family: Montserrat, sans-serif; line-height: 1.7; } /* ═══════════════════════════════════════ 5. CTA buttons (gebruik btn classes uit theme) ═══════════════════════════════════════ */ .ir-cta-block { background: var(--K, #000); color: var(--W, #fff); padding: 40px; border-radius: 16px; margin: 48px 0; text-align: center; } .ir-cta-block h2, .ir-cta-block h3 { color: var(--W, #fff); margin: 0 0 12px; } .ir-cta-block p { color: rgba(255, 255, 255, .8); margin-bottom: 24px; } /* === END IR-THEME-ADDITIONS === */ /* === IR-SERVICE-TEMPLATE-CSS === */ /* ═══════════════════════════════════════ IR-THEME, Service Hub template styling Voor template-service.php ═══════════════════════════════════════ */ .ir-service-page { color: var(--K, #000); font-family: Montserrat, sans-serif; } .ir-service-page .container, .ir-service-page .container-wide { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .ir-service-page .container { max-width: 920px; } /* ─────────────── BREADCRUMB ─────────────── */ .ir-breadcrumb { font-size: 13px; color: rgba(0, 0, 0, .55); margin-bottom: 20px; } .ir-breadcrumb a { color: rgba(0, 0, 0, .65); text-decoration: none; } .ir-breadcrumb a:hover { color: var(--B, #00A0FD); text-decoration: underline; } .ir-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: .4; } .ir-breadcrumb strong { color: var(--K, #000); font-weight: 600; } /* ─────────────── HERO + CALCULATOR GRID ─────────────── */ .ir-svc-hero { background: linear-gradient(180deg, var(--WG, #F5F7FA) 0%, #fff 100%); padding: 48px 0 64px; } .ir-svc-hero__grid { display: grid; grid-template-columns: 1fr 480px; gap: 48px; align-items: start; } .ir-svc-hero__intro { padding-top: 16px; } .ir-svc-hero__h1 { font-family: 'Baloo 2', sans-serif; font-size: 48px; line-height: 1.1; font-weight: 800; margin: 0 0 16px; color: var(--K, #000); } .ir-svc-hero__lead { font-size: 19px; line-height: 1.5; color: rgba(0, 0, 0, .75); margin: 0 0 24px; } .ir-svc-hero__benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ir-svc-hero__benefits li { font-size: 15px; font-weight: 600; padding: 6px 0; color: var(--K, #000); } @media (max-width: 960px) { .ir-svc-hero__grid { grid-template-columns: 1fr; gap: 32px; } .ir-svc-hero__h1 { font-size: 36px; } .ir-svc-hero__benefits { grid-template-columns: 1fr; } } /* ─────────────── CALCULATOR ─────────────── */ .ir-calc { background: #fff; border: 1px solid var(--WGD, #EAEEF3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, .08); padding: 24px; position: sticky; top: 100px; } .ir-calc__header { display: flex; align-items: center; gap: 10px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--WGD, #EAEEF3); } .ir-calc__icon { font-size: 22px; } .ir-calc__group { border: 0; padding: 0; margin: 0 0 20px; } .ir-calc__group legend { font-family: 'Baloo 2', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(0, 0, 0, .6); margin-bottom: 10px; } .ir-calc__options { display: flex; flex-direction: column; gap: 6px; } .ir-calc__opt { display: grid; grid-template-columns: 24px 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--WGD, #EAEEF3); border-radius: 10px; cursor: pointer; transition: all .15s ease; font-size: 14px; } .ir-calc__opt:hover { border-color: var(--B40, rgba(0, 160, 253, .4)); background: var(--B10, rgba(0, 160, 253, .08)); } .ir-calc__opt input[type="radio"] { margin: 0; accent-color: var(--B, #00A0FD); } .ir-calc__opt:has(input:checked) { border-color: var(--B, #00A0FD); background: var(--B10, rgba(0, 160, 253, .12)); box-shadow: 0 2px 8px rgba(0, 160, 253, .15); } .ir-calc__opt-icon { font-size: 18px; text-align: center; } .ir-calc__opt-text { display: flex; flex-direction: column; min-width: 0; } .ir-calc__opt-label { font-weight: 600; color: var(--K, #000); } .ir-calc__opt-sub { font-size: 12px; color: rgba(0, 0, 0, .55); margin-top: 1px; } .ir-calc__opt-delta { font-size: 13px; font-weight: 700; color: var(--B, #00A0FD); white-space: nowrap; font-variant-numeric: tabular-nums; } .ir-calc__total { margin: 24px 0 16px; padding: 20px; background: var(--K, #000); color: var(--W, #fff); border-radius: 12px; text-align: center; } .ir-calc__total-main { font-family: 'Baloo 2', sans-serif; font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .ir-calc__total-currency { font-size: 28px; vertical-align: top; opacity: .8; margin-right: 4px; } .ir-calc__total-amount { font-variant-numeric: tabular-nums; } .ir-calc__total-sub { font-size: 12px; color: rgba(255, 255, 255, .7); margin-top: 6px; font-weight: 500; } .ir-calc__cta { display: block; width: 100%; text-align: center; padding: 16px 24px; font-family: 'Baloo 2', sans-serif; font-size: 16px; font-weight: 700; border-radius: 10px; text-decoration: none; background: var(--B, #00A0FD); color: #fff !important; transition: transform .15s ease, box-shadow .15s ease; margin-bottom: 8px; } .ir-calc__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 160, 253, .35); } .ir-calc__guarantee { font-size: 12px; color: rgba(0, 0, 0, .55); text-align: center; margin: 0; } @media (max-width: 960px) { .ir-calc { position: static; } } /* ─────────────── SECTION GENERIC ─────────────── */ .ir-section-eyebrow { display: inline-block; font-family: var(--mono, 'Montserrat', sans-serif); /* v1.15.0: UI-label = tekstfont */ font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--B, #00A0FD); margin-bottom: 8px; } .ir-service-page section { padding: var(--space-section-sm) 0; } .ir-service-page section h2 { font-family: 'Baloo 2', sans-serif; font-size: 36px; font-weight: 800; margin: 0 0 16px; color: var(--K, #000); } /* ─────────────── WAT REINIGEN ─────────────── */ .ir-svc-what { background: #fff; } .ir-svc-what__intro { font-size: 17px; color: rgba(0, 0, 0, .75); line-height: 1.7; margin: 0 0 24px; } .ir-svc-what__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; } .ir-svc-what__list li { font-size: 16px; font-weight: 500; padding: 6px 0; } @media (max-width: 720px) { .ir-svc-what__list { grid-template-columns: 1fr; } } .ir-svc-what__warning { background: rgba(255, 200, 0, .12); border-left: 4px solid #FFB800; padding: 16px 20px; border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.6; } .ir-svc-what__warning strong { display: block; margin-bottom: 4px; } /* ─────────────── METHODE, 4 cards grid ─────────────── */ .ir-svc-method { background: var(--WG, #F5F7FA); } .ir-svc-method__intro { font-size: 17px; color: rgba(0, 0, 0, .75); margin: 0 0 32px; } .ir-svc-method__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ir-method-card { background: #fff; border-radius: var(--r, 14px); padding: 24px 20px; position: relative; border: 1px solid var(--WGD, #EAEEF3); } .ir-method-card__num { position: absolute; top: -14px; left: 20px; width: 32px; height: 32px; border-radius: 50%; background: var(--B, #00A0FD); color: #fff; display: grid; place-items: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; box-shadow: 0 2px 8px rgba(0, 160, 253, .35); } .ir-method-card__icon { font-size: 34px; margin-bottom: 12px; } .ir-method-card h3 { font-family: var(--font, 'Montserrat', sans-serif); /* v1.15.0: h3 = tekstfont */ font-size: 18px; font-weight: 700; margin: 0 0 8px; } .ir-method-card p { font-size: 14px; color: rgba(0, 0, 0, .7); line-height: 1.55; margin: 0; } @media (max-width: 960px) { .ir-svc-method__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .ir-svc-method__grid { grid-template-columns: 1fr; } } /* ─────────────── HOE WERKT, 3 cards ─────────────── */ .ir-svc-howto { background: #fff; } .ir-svc-howto__intro { font-size: 17px; color: rgba(0, 0, 0, .75); margin: 0 0 32px; } .ir-svc-howto__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ir-howto-card { text-align: center; padding: 32px 20px; background: var(--WG, #F5F7FA); border-radius: 14px; position: relative; } .ir-howto-card__icon { font-size: 48px; margin-bottom: 12px; } .ir-howto-card__num { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; background: var(--K, #000); color: #fff; display: grid; place-items: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; } .ir-howto-card h3 { font-family: var(--font, 'Montserrat', sans-serif); /* v1.15.0: h3 = tekstfont */ font-size: 20px; font-weight: 700; margin: 12px 0 8px; } .ir-howto-card p { font-size: 15px; color: rgba(0, 0, 0, .7); line-height: 1.6; margin: 0; } @media (max-width: 720px) { .ir-svc-howto__grid { grid-template-columns: 1fr; } } /* ─────────────── BA SLIDER SECTIE ─────────────── */ .ir-svc-baslider { background: var(--WG, #F5F7FA); } .ir-svc-baslider__intro { font-size: 17px; color: rgba(0, 0, 0, .75); margin: 0 0 24px; } .ir-svc-baslider .ir-ba { aspect-ratio: 16 / 9; } .ir-svc-baslider__quote { margin: 32px 0 0; padding: 24px 28px; background: #fff; border-radius: 12px; border-left: 4px solid var(--B, #00A0FD); } .ir-svc-baslider__quote blockquote { margin: 0 0 8px; font-size: 17px; font-style: italic; color: rgba(0, 0, 0, .85); line-height: 1.6; } .ir-stars { display: block; color: #FFB800; font-size: 18px; margin-bottom: 8px; } .ir-svc-baslider__quote figcaption { font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .6); } /* ─────────────── PAGE CONTENT (Block Editor) ─────────────── */ .ir-svc-content { background: #fff; padding: 32px 0; } .ir-svc-content__inner > *:first-child { margin-top: 0; } .ir-svc-content__inner > *:last-child { margin-bottom: 0; } /* ─────────────── FAQ ─────────────── */ .ir-svc-faq { background: #fff; } .ir-faq { margin-top: 24px; } .ir-faq__item { border: 1px solid var(--WGD, #EAEEF3); border-radius: 10px; margin-bottom: 8px; background: #fff; overflow: hidden; } .ir-faq__item[open] { border-color: var(--B, #00A0FD); } .ir-faq__q { padding: 16px 20px; cursor: pointer; font-family: var(--font, 'Montserrat', sans-serif); /* v1.15.0: FAQ = leestekst */ font-weight: 700; font-size: 17px; list-style: none; position: relative; padding-right: 48px; } .ir-faq__q::-webkit-details-marker { display: none; } .ir-faq__q::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--B, #00A0FD); transition: transform .2s ease; } .ir-faq__item[open] .ir-faq__q::after { content: '−'; } /* v5.4.2/3: als er al een eigen icon (q-icon of q-btn) binnen de summary zit (nieuwere FAQ-stijl), verberg dan de oude ::after-plus om te voorkomen dat er twee plusjes naast elkaar staan. */ .ir-faq__q:has(.ir-faq__q-icon)::after, .ir-faq__q:has(.ir-faq__q-btn)::after { content: none !important; display: none !important; } /* JS-fallback voor oudere browsers zonder :has() support */ .ir-faq__q--has-icon::after { content: none !important; display: none !important; } .ir-faq__answer { padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: rgba(0, 0, 0, .8); } .ir-faq__answer p { margin: 0; } /* ─────────────── INBEGREPEN / NIET INBEGREPEN ─────────────── */ .ir-svc-incl { background: var(--WG, #F5F7FA); } .ir-svc-incl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ir-incl-card { background: #fff; border-radius: var(--r, 14px); padding: 28px 24px; border: 1px solid var(--WGD, #EAEEF3); } .ir-incl-card h3 { font-family: var(--font, 'Montserrat', sans-serif); /* v1.15.0: h3 = tekstfont */ font-size: 22px; font-weight: 700; margin: 0 0 16px; } .ir-incl-card--yes h3 { color: var(--B, #00A0FD); } .ir-incl-card--no h3 { color: #DC2626; } .ir-incl-card ul { list-style: none; padding: 0; margin: 0; } .ir-incl-card li { padding: 8px 0; border-top: 1px solid var(--WGD, #EAEEF3); font-size: 15px; color: rgba(0, 0, 0, .8); } .ir-incl-card li:first-child { border-top: 0; padding-top: 0; } @media (max-width: 720px) { .ir-svc-incl__grid { grid-template-columns: 1fr; } } /* ─────────────── CLOSING CTA ─────────────── */ .ir-svc-cta { background: var(--K, #000); color: var(--W, #fff); text-align: center; } .ir-svc-cta h2 { color: #fff; font-size: 32px; margin: 0 0 12px; } .ir-svc-cta p { color: rgba(255, 255, 255, .8); margin: 0 0 24px; font-size: 17px; } .ir-svc-cta__buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ─────────────── BUTTONS ─────────────── */ .ir-btn { display: inline-block; padding: 14px 28px; font-family: 'Baloo 2', sans-serif; font-size: 15px; font-weight: 700; border-radius: 10px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; border: 0; cursor: pointer; } .ir-btn-primary { background: var(--B, #00A0FD); color: #fff; } .ir-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 160, 253, .35); } .ir-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .35); } .ir-btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); } /* === END IR-SERVICE-TEMPLATE-CSS === */ /* === IR-BOOKING-404-CSS === */ /* ═══════════════════════════════════════ IR-THEME, Booking + 404 + About styling Voeg toe aan einde van style.css ═══════════════════════════════════════ */ /* ═══════════════════════════════════════ 404 PAGE ═══════════════════════════════════════ */ .ir-404-page { color: var(--K, #000); font-family: Montserrat, sans-serif; } .ir-404-page .container { max-width: 1000px; margin: 0 auto; padding: 0 24px; } .ir-404-page section { padding: 64px 0; } .ir-404-hero { background: linear-gradient(180deg, var(--WG, #F5F7FA) 0%, #fff 100%); padding: 80px 0 !important; text-align: center; } .ir-404__icon { font-size: 80px; margin-bottom: 16px; } .ir-404__code { font-family: 'Baloo 2', sans-serif; font-size: 96px; font-weight: 800; line-height: 1; color: var(--B, #00A0FD); letter-spacing: -.04em; margin-bottom: 16px; } .ir-404__h1 { font-family: 'Baloo 2', sans-serif; font-size: 36px; font-weight: 800; margin: 0 0 16px; } .ir-404__lead { font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, .75); max-width: 580px; margin: 0 auto 32px; } .ir-404__cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .ir-404-services { background: #fff; } .ir-404-services h2 { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; margin: 0 0 24px; } .ir-404-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ir-404-tile { background: var(--WG, #F5F7FA); border: 1px solid var(--WGD, #EAEEF3); border-radius: 14px; padding: 24px 20px; text-decoration: none; color: var(--K, #000); text-align: center; transition: transform .15s ease, background .15s ease; } .ir-404-tile:hover { transform: translateY(-3px); background: var(--B10, rgba(0, 160, 253, .08)); } .ir-404-tile__icon { font-size: 36px; margin-bottom: 8px; } .ir-404-tile__title { font-family: var(--font, 'Montserrat', sans-serif); font-weight: 700; font-size: 17px; margin-bottom: 4px; } .ir-404-tile__sub { font-size: 13px; color: rgba(0, 0, 0, .65); } @media (max-width: 720px) { .ir-404-grid { grid-template-columns: 1fr 1fr; } } .ir-404-search { background: var(--WG, #F5F7FA); text-align: center; } .ir-404-search h3 { font-family: 'Baloo 2', sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 16px; } .ir-404-search form { display: inline-flex; max-width: 500px; width: 100%; gap: 8px; } .ir-404-search input[type="search"] { flex: 1; padding: 12px 16px; border: 1px solid var(--WGD, #EAEEF3); border-radius: 8px; font-size: 15px; } .ir-404-search button { padding: 12px 24px; background: var(--B, #00A0FD); color: #fff; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; } .ir-btn-secondary { background: var(--K, #000); color: #fff; } .ir-btn-secondary:hover { background: #1a1a1a; } /* === END IR-BOOKING-404-CSS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5, ADDITIONS Skip-link, mobile hero visual, WhatsApp float desktop hide, nieuwe section classes, form banners, honeypot, reduced-motion. ════════════════════════════════════════════════════════════ */ /* ── Skip link voor toetsenbord-gebruikers ── */ .ir-skip-link { position: absolute; top: -100px; left: 0; z-index: 10000; background: var(--K, #000); color: #fff; padding: 12px 20px; text-decoration: none; font-weight: 700; border-radius: 0 0 8px 0; } .ir-skip-link:focus { top: 0; } /* ── Nav: telefoon link + logo image ── */ .ir-nav__logo-img { height: 48px; width: auto; display: block; } /* v1.11.11: sinds v1.11.9 laadt woocommerce-layout.css mee op cart/checkout; die bevat `.woocommerce-page img { height:auto }` (specificiteit 0,1,1) dat de nav-logo-hoogte overschreef → gigantisch logo op /afrekenen. Deze hogere- specificiteit override (0,2,0) houdt het logo overal 48px, ook op de checkout. */ .ir-nav .ir-nav__logo-img, .ir-nav .ir-nav__logo .custom-logo { height: 48px; width: auto; max-width: none; } .ir-nav__phone { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-weight: 700; font-size: 14px; color: var(--K, #000); text-decoration: none; border-radius: 8px; transition: color .2s; } .ir-nav__phone:hover { color: var(--B, #00A0FD); } .ir-nav__phone svg { color: var(--B, #00A0FD); } @media (max-width: 1024px) { .ir-nav__phone { display: none; } } .ir-mobile-menu__phone { font-size: 17px !important; color: var(--B, #00A0FD) !important; margin-top: 12px; } /* ── WhatsApp float: hide on desktop ── */ @media (min-width: 1024px) { .ir-wa-float { display: none !important; } } /* ── Hero visual: ZICHTBAAR op mobiel (was hidden) ── */ @media (max-width: 1024px) { .ir-hero__inner { grid-template-columns: 1fr; gap: 32px; } .ir-hero__visual { display: block; max-width: 480px; margin: 0 auto; } .ir-hero__price-badge { display: none; } /* deze blijft verborgen op mobiel */ .ir-hero__fbt-badge { transform: scale(.85); top: 12px; left: 12px; } } /* ── Resultaten section ── */ .ir-resultaten { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-resultaten__header { text-align: center; max-width: 720px; margin: 0 auto 48px; } .ir-resultaten__single { max-width: 720px; margin: 0 auto; } .ir-resultaten__caption { text-align: center; margin-top: 16px; font-style: italic; color: rgba(0,0,0,.7); } .ir-resultaten__cta { text-align: center; margin-top: 40px; } .ir-ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* ── Team section ── */ .ir-team { padding: var(--space-section-sm) 0; background: #fff; } .ir-team__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .ir-team__inner { grid-template-columns: 1fr; } } .ir-team__visual { position: relative; } .ir-team__photo { width: 100%; height: auto; border-radius: 16px; display: block; } .ir-team__badge { position: absolute; bottom: 16px; left: 16px; background: rgba(255,255,255,.95); padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .ir-team__badge-mark { width: 48px; height: 48px; background: var(--B, #00A0FD); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .ir-team__badge-img { display: block; height: auto; max-width: 60px; background: #fff; padding: 4px; border-radius: 4px; flex-shrink: 0; } .ir-team__badge-info { font-size: 11px; line-height: 1.3; } .ir-team__lead { font-size: 17px; line-height: 1.7; margin: 16px 0 24px; } .ir-team__values { list-style: none; padding: 0; margin: 0 0 32px; } .ir-team__values li { padding: 8px 0; font-size: 16px; } .ir-team__cta { display: flex; gap: 12px; flex-wrap: wrap; } /* ── Werkgebied section ── */ .ir-werkgebied { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-werkgebied__header { text-align: center; max-width: 720px; margin: 0 auto 48px; } .ir-werkgebied__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; } .ir-werkgebied__card { background: #fff; padding: 24px; border-radius: 12px; text-align: center; border: 1px solid #EAEEF3; transition: transform .2s, box-shadow .2s; } .ir-werkgebied__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); } .ir-werkgebied__card-icon { font-size: 32px; margin-bottom: 12px; } .ir-werkgebied__card-name { font-weight: 800; font-size: 18px; margin-bottom: 4px; } .ir-werkgebied__card-cities { font-size: 13px; color: rgba(0,0,0,.6); } .ir-werkgebied__cta { text-align: center; } .ir-werkgebied__cta p { margin-bottom: 12px; color: rgba(0,0,0,.6); } /* ── Steden section ── */ .ir-steden { padding: 60px 0; background: #fff; } .ir-steden__header { text-align: center; margin-bottom: 32px; } .ir-steden__grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 800px; margin: 0 auto; } .ir-steden__chip { padding: 10px 18px; background: var(--WG, #F5F7FA); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--K, #000); text-decoration: none; transition: background .2s; } .ir-steden__chip:hover { background: var(--B, #00A0FD); color: #fff; } .ir-steden__more { text-align: center; margin-top: 24px; font-weight: 600; } /* ── Waarom section ── */ .ir-waarom { padding: var(--space-section-sm) 0; background: var(--K, #000); color: #fff; } .ir-waarom__header { text-align: center; max-width: 720px; margin: 0 auto 48px; } .ir-waarom .section-h { color: #fff; } .ir-waarom .section-eyebrow { color: var(--B, #00A0FD); } .ir-waarom .section-sub { color: rgba(255,255,255,.7); } .ir-waarom__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .ir-waarom__card { background: rgba(255,255,255,.04); padding: 28px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); } .ir-waarom__card-icon { font-size: 36px; margin-bottom: 12px; } .ir-waarom__card-title { font-weight: 800; font-size: 18px; margin-bottom: 8px; } .ir-waarom__card-desc { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.6; } /* ── About snippet ── */ .ir-about-snippet { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-about-snippet__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .ir-about-snippet__inner { grid-template-columns: 1fr; } } .ir-about-snippet__visual img { width: 100%; height: auto; border-radius: 16px; display: block; } .ir-about-snippet__text p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; } /* ── About page (template-about.php) ── */ .ir-about-hero { padding: 60px 0; } .ir-about-hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .ir-about-hero__inner { grid-template-columns: 1fr; } } .ir-about-hero__lead { font-size: 18px; line-height: 1.7; margin-top: 16px; color: rgba(0,0,0,.75); } .ir-about-hero__visual img { width: 100%; height: auto; border-radius: 16px; display: block; } .ir-about-values { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-about-values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .ir-about-value-card { background: #fff; padding: 28px 24px; border-radius: 12px; border: 1px solid #EAEEF3; } .ir-about-value-card__icon { font-size: 36px; margin-bottom: 12px; } .ir-about-value-card h3 { margin: 0 0 8px; font-size: 17px; } .ir-about-value-card p { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.7); margin: 0; } .ir-about-story { padding: 60px 0; } .ir-about-story__body { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; } .ir-about-info { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-about-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 960px; margin: 0 auto; } @media (max-width: 700px) { .ir-about-info__grid { grid-template-columns: 1fr; } } .ir-about-info ul { list-style: none; padding: 0; } .ir-about-info li { padding: 8px 0; border-bottom: 1px solid #EAEEF3; } .ir-about-info li:last-child { border-bottom: 0; } .ir-about-cta { padding: 60px 0; text-align: center; background: var(--K, #000); color: #fff; } .ir-about-cta h2 { color: #fff; margin-bottom: 12px; } .ir-about-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* ── Booking page (template-booking.php) ── */ .ir-booking-hero { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-booking-hero__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .ir-booking-hero__inner { grid-template-columns: 1fr; } } .ir-booking-hero__lead { font-size: 18px; line-height: 1.7; margin: 16px 0 32px; } .ir-booking-hero__options { display: flex; flex-direction: column; gap: 12px; } .ir-booking-option { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border-radius: 12px; text-decoration: none; color: var(--K, #000); border: 1px solid #EAEEF3; transition: transform .2s, border-color .2s; } .ir-booking-option:hover { transform: translateX(4px); border-color: var(--B, #00A0FD); } .ir-booking-option__icon { width: 56px; height: 56px; background: var(--WG, #F5F7FA); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .ir-booking-option__title { font-weight: 800; font-size: 17px; margin-bottom: 4px; } .ir-booking-option__desc { font-size: 14px; color: rgba(0,0,0,.6); } .ir-booking-option__arrow { margin-left: auto; font-size: 24px; color: var(--B, #00A0FD); } .ir-booking-hero__proof { background: #fff; border-radius: 16px; padding: 32px 24px; text-align: center; border: 1px solid #EAEEF3; } .ir-booking-hero__proof-stars { color: #FFB800; font-size: 28px; letter-spacing: 4px; } .ir-booking-hero__proof-rating { font-size: 56px; font-weight: 800; line-height: 1; margin: 8px 0 4px; } .ir-booking-hero__proof-num { font-size: 36px; font-weight: 800; color: var(--B, #00A0FD); } .ir-booking-hero__proof-label { font-size: 13px; color: rgba(0,0,0,.6); } .ir-booking-hero__proof-divider { height: 1px; background: #EAEEF3; margin: 20px 0; } .ir-booking-form-section { padding: 60px 0; } .ir-booking-form-section__header { text-align: center; max-width: 720px; margin: 0 auto 32px; } /* Form banners (success/error) */ .ir-form-banner { max-width: 720px; margin: 0 auto 24px; padding: 16px 20px; border-radius: 12px; font-weight: 600; } .ir-form-banner--ok { background: #DEFFE5; color: #064C1E; border: 1px solid #6BD988; } .ir-form-banner--err { background: #FFE5E5; color: #5A0F0F; border: 1px solid #E0A0A0; } .ir-booking-form { max-width: 720px; margin: 0 auto; background: #fff; padding: 32px; border-radius: 16px; border: 1px solid #EAEEF3; } .ir-booking-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ir-booking-form__grid .full { grid-column: 1 / -1; } @media (max-width: 600px) { .ir-booking-form__grid { grid-template-columns: 1fr; } } .ir-booking-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; } .ir-booking-form input, .ir-booking-form select, .ir-booking-form textarea { padding: 12px 14px; border: 1px solid #EAEEF3; border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; } .ir-booking-form input:focus, .ir-booking-form select:focus, .ir-booking-form textarea:focus { outline: 2px solid var(--B, #00A0FD); outline-offset: -1px; border-color: var(--B, #00A0FD); } .ir-consent { flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; font-weight: 400 !important; font-size: 13px !important; color: rgba(0,0,0,.7); } .ir-consent input { width: auto; flex-shrink: 0; margin-top: 3px; } .ir-consent a { color: var(--B, #00A0FD); } .ir-booking-form__submit { margin-top: 24px; width: 100%; padding: 16px; font-size: 16px; } .ir-booking-form__guarantee { text-align: center; margin-top: 16px; font-size: 13px; color: rgba(0,0,0,.6); } /* Honeypot, onzichtbaar voor mensen, vindbaar door bots */ .ir-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .ir-booking-faq { padding: 60px 0; background: var(--WG, #F5F7FA); } /* ── Stad page ── */ .ir-stad-hero { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-stad-hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .ir-stad-hero__inner { grid-template-columns: 1fr; } } .ir-stad-hero__lead { font-size: 17px; line-height: 1.7; margin: 16px 0 24px; } .ir-stad-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .ir-stad-hero__chips .chip { padding: 8px 14px; background: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid #EAEEF3; } .ir-stad-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; } .ir-stad-hero__visual img { width: 100%; height: auto; border-radius: 16px; display: block; } .ir-stad-diensten { padding: 60px 0; background: #fff; } .ir-stad-diensten__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; } .ir-stad-dienst-card { background: var(--WG, #F5F7FA); padding: 28px 24px; border-radius: 12px; text-decoration: none; color: var(--K, #000); text-align: center; border: 1px solid #EAEEF3; transition: transform .2s, border-color .2s; } .ir-stad-dienst-card:hover { transform: translateY(-2px); border-color: var(--B, #00A0FD); } .ir-stad-dienst-card__icon { font-size: 36px; margin-bottom: 8px; } .ir-stad-dienst-card h3 { margin: 0 0 4px; font-size: 17px; } .ir-stad-dienst-card p { margin: 0; font-size: 14px; color: rgba(0,0,0,.7); font-weight: 600; } .ir-stad-content { padding: 60px 0; } .ir-stad-content .container { max-width: 720px; } .ir-stad-waarom { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-stad-waarom__list { list-style: none; padding: 0; max-width: 600px; margin: 24px auto; font-size: 16px; } .ir-stad-waarom__list li { padding: 10px 0; border-bottom: 1px solid #EAEEF3; } .ir-stad-cta { padding: 60px 0; background: var(--K, #000); color: #fff; text-align: center; } .ir-stad-cta h2 { color: #fff; margin-bottom: 24px; } .ir-stad-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Prijzen page ── */ .ir-prijzen-hero { padding: 60px 0; text-align: center; } .ir-prijzen-hero__lead { font-size: 18px; line-height: 1.7; max-width: 720px; margin: 16px auto 24px; } .ir-prijzen-hero__chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .ir-prijzen-hero__chips .chip { padding: 8px 14px; background: var(--WG, #F5F7FA); border-radius: 999px; font-size: 13px; font-weight: 600; } .ir-prijzen-grid-section { padding: 40px 0; } .ir-prijzen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .ir-prijzen-card { background: #fff; border-radius: 16px; border: 1px solid #EAEEF3; overflow: hidden; display: flex; flex-direction: column; } .ir-prijzen-card__head { padding: 28px 24px 16px; text-align: center; } .ir-prijzen-card__icon { font-size: 36px; margin-bottom: 8px; } .ir-prijzen-card__name { font-size: 20px; margin: 0 0 6px; } .ir-prijzen-card__desc { font-size: 13px; color: rgba(0,0,0,.6); margin: 0; } .ir-prijzen-tiers { list-style: none; padding: 0 24px; margin: 16px 0; flex: 1; } .ir-prijzen-tiers li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #EAEEF3; font-size: 14px; } .ir-prijzen-tiers li:last-child { border-bottom: 0; } .ir-prijzen-tiers__label { color: rgba(0,0,0,.7); } .ir-prijzen-tiers__price { font-weight: 800; color: var(--B, #00A0FD); } .ir-prijzen-card__cta { display: block; padding: 14px; background: var(--K, #000); color: #fff; text-align: center; text-decoration: none; font-weight: 700; margin: 16px; border-radius: 8px; transition: background .2s; } .ir-prijzen-card__cta:hover { background: var(--B, #00A0FD); } .ir-prijzen-note { text-align: center; max-width: 720px; margin: 32px auto 0; font-size: 14px; color: rgba(0,0,0,.7); } .ir-prijzen-opties { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-prijzen-opties__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; } .ir-optie-card { background: #fff; padding: 24px; border-radius: 12px; border: 1px solid #EAEEF3; text-align: center; } .ir-optie-card__icon { font-size: 32px; margin-bottom: 8px; } .ir-optie-card__name { font-weight: 800; margin-bottom: 6px; font-size: 15px; } .ir-optie-card__desc { font-size: 13px; color: rgba(0,0,0,.6); margin-bottom: 12px; min-height: 36px; } .ir-optie-card__price { font-weight: 800; font-size: 22px; color: var(--B, #00A0FD); } .ir-prijzen-combi { padding: 40px 0; } .ir-prijzen-combi__inner { background: linear-gradient(135deg, var(--B, #00A0FD), #0073B8); color: #fff; border-radius: 20px; padding: 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; } @media (max-width: 800px) { .ir-prijzen-combi__inner { grid-template-columns: 1fr; text-align: center; } } .ir-prijzen-combi__icon { font-size: 56px; } .ir-prijzen-combi h2 { color: #fff; margin: 0 0 8px; font-size: 22px; } .ir-prijzen-combi p { margin: 0; opacity: .9; } .ir-prijzen-faq { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-prijzen-cta { padding: 60px 0; background: var(--K, #000); color: #fff; text-align: center; } .ir-prijzen-cta h2 { color: #fff; margin-bottom: 8px; } .ir-prijzen-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* ── FAQ items als

    styling ── */ details.ir-faq__item { border-bottom: 1px solid #EAEEF3; padding: 0; } details.ir-faq__item summary { cursor: pointer; list-style: none; padding: 18px 4px; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } details.ir-faq__item summary::-webkit-details-marker { display: none; } details.ir-faq__item summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--B, #00A0FD); transition: transform .2s; flex-shrink: 0; } details.ir-faq__item[open] summary::after { content: '−'; } details.ir-faq__item .ir-faq__answer, details.ir-faq__item .ir-faq__a { padding: 0 4px 18px; font-size: 15px; line-height: 1.7; color: rgba(0,0,0,.75); } /* ── Hidden helpers ── */ .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; } /* ── Blog index (index.php) ── */ .ir-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; } .ir-blog-card { background: #fff; border-radius: 12px; border: 1px solid #EAEEF3; overflow: hidden; } .ir-blog-card__thumb img { width: 100%; height: 200px; object-fit: cover; display: block; } .ir-blog-card__body { padding: 20px 24px; } .ir-blog-card__title { margin: 0 0 8px; font-size: 18px; } .ir-blog-card__title a { color: var(--K, #000); text-decoration: none; } .ir-blog-card__title a:hover { color: var(--B, #00A0FD); } .ir-blog-card__meta { font-size: 12px; color: rgba(0,0,0,.5); margin-bottom: 8px; } .ir-blog-card__excerpt { font-size: 14px; color: rgba(0,0,0,.7); margin-bottom: 12px; } .ir-blog-card__link { font-weight: 700; color: var(--B, #00A0FD); text-decoration: none; } .ir-pagination { margin-top: 40px; text-align: center; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .ir-ticker__track { animation: none !important; } .ir-reveal { opacity: 1 !important; transform: none !important; } } /* === END IR-THEME-V5-ADDITIONS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.1, ADDITIONS ════════════════════════════════════════════════════════════ */ /* === END IR-THEME-V5.1-ADDITIONS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.2, ADDITIONS WC single-product = volledige landing, homepage hero met extractie-foto, contactformulier section. ════════════════════════════════════════════════════════════ */ /* === Homepage hero, extractie foto in plaats van voor/na === */ .ir-hero__extraction { position: relative; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.15); } .ir-hero__extraction-img { width: 100%; height: auto; display: block; } .ir-hero__extraction-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 60%, transparent 100%); color: #fff; padding: 32px 24px 24px; font-size: 14px; line-height: 1.5; } .ir-hero__extraction-caption strong { display: block; font-size: 17px; margin-bottom: 6px; } /* Mobiel hero: caption korter */ @media (max-width: 760px) { .ir-hero__extraction-caption { padding: 20px 16px 16px; font-size: 12px; } .ir-hero__extraction-caption strong { font-size: 14px; } } /* === WooCommerce single-product, full landing === */ .ir-wc-page { background: #fff; } /* WC hero */ .ir-wc-hero { padding: 40px 0 60px; background: linear-gradient(180deg, var(--WG, #F5F7FA) 0%, #fff 100%); } .ir-wc-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; } @media (max-width: 1024px) { .ir-wc-hero__grid { grid-template-columns: 1fr; gap: 32px; } } .ir-wc-hero__h1 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.1; margin: 16px 0 8px; color: var(--K, #000); } @media (max-width: 760px) { .ir-wc-hero__h1 { font-size: 32px; } } .ir-wc-hero__subtitle { font-size: 18px; font-weight: 700; color: var(--B, #00A0FD); margin: 0 0 16px; } .ir-wc-hero__lead { font-size: 17px; line-height: 1.6; margin-bottom: 24px; color: rgba(0,0,0,.75); } .ir-wc-hero__benefits { list-style: none; padding: 0; margin: 0 0 24px; } .ir-wc-hero__benefits li { padding: 6px 0; font-size: 16px; font-weight: 600; } .ir-wc-hero__trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .ir-wc-hero__trust-chip { padding: 8px 14px; background: var(--WG, #F5F7FA); border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid #EAEEF3; } .ir-wc-hero__proof { display: flex; gap: 24px; align-items: center; padding: 20px; background: #fff; border: 1px solid #EAEEF3; border-radius: 12px; } .ir-wc-hero__stars { color: #FFB800; font-size: 20px; letter-spacing: 2px; } .ir-wc-hero__proof-label { font-size: 14px; font-weight: 600; margin-top: 4px; } .ir-wc-hero__proof-div { width: 1px; height: 40px; background: #EAEEF3; } .ir-wc-hero__proof-num { font-size: 28px; font-weight: 800; color: var(--B, #00A0FD); line-height: 1; } .ir-wc-hero__proof-num-label { font-size: 13px; color: rgba(0,0,0,.6); margin-top: 4px; } /* WC booking sidebar */ /* ════════════════════════════════════════════════════════════ WC BOEKINGSBOX, v5.3 redesign Clean, gestroomlijnde flow voor variant-keuze + add-to-cart. Native WooCommerce variations table is gestyled, niet vervangen. ════════════════════════════════════════════════════════════ */ .ir-wc-booking { position: sticky; top: 100px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 0; box-shadow: 0 12px 40px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); overflow: hidden; } @media (max-width: 1024px) { .ir-wc-booking { position: static; } } .ir-wc-booking__head { padding: 20px 24px; background: linear-gradient(135deg, var(--B, #00A0FD) 0%, #0080CC 100%); color: #fff; } .ir-wc-booking__head-text { display: flex; flex-direction: column; gap: 4px; } .ir-wc-booking__title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; } .ir-wc-booking__subtitle { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 500; } .ir-wc-booking__body { padding: 24px; } /* Native WooCommerce variations table, herwerkt voor cleaner look */ .ir-wc-booking .variations_form { margin: 0; } .ir-wc-booking .variations { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 8px; } /* Elke row wordt een blok met label boven select */ .ir-wc-booking .variations tr { display: flex; flex-direction: column; margin-bottom: 16px; } .ir-wc-booking .variations td { padding: 0; border: 0; vertical-align: top; } .ir-wc-booking .variations td.label, .ir-wc-booking .variations th.label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: rgba(0,0,0,.55); margin-bottom: 6px; padding: 0; } .ir-wc-booking .variations td.label label { display: block; } .ir-wc-booking .variations td.value { position: relative; } .ir-wc-booking .variations td.value select { width: 100%; padding: 14px 40px 14px 16px; border: 1.5px solid rgba(0,0,0,.12); border-radius: 10px; font-size: 15px; font-weight: 500; background-color: #fff; /* Custom dropdown-pijl */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .ir-wc-booking .variations td.value select:hover { border-color: var(--B, #00A0FD); } .ir-wc-booking .variations td.value select:focus { outline: 0; border-color: var(--B, #00A0FD); box-shadow: 0 0 0 3px rgba(0,160,253,.15); } .ir-wc-booking .reset_variations { display: inline-block; margin-top: 6px; font-size: 12px; color: rgba(0,0,0,.5); text-decoration: underline; } .ir-wc-booking .reset_variations:hover { color: var(--B, #00A0FD); } /* Single variation: prijs-display block */ .ir-wc-booking .single_variation_wrap { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); } .ir-wc-booking .woocommerce-variation { margin-bottom: 16px; } .ir-wc-booking .woocommerce-variation-description { font-size: 13px; color: rgba(0,0,0,.6); margin-bottom: 8px; } .ir-wc-booking .woocommerce-variation-price { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; color: var(--B, #00A0FD); margin-bottom: 8px; } .ir-wc-booking .woocommerce-variation-price .price { font-size: inherit; font-weight: inherit; color: inherit; } .ir-wc-booking .woocommerce-variation-price del { color: rgba(0,0,0,.4); font-weight: 600; font-size: 18px; margin-right: 8px; } .ir-wc-booking .woocommerce-variation-availability { font-size: 13px; font-weight: 600; color: #2e7d32; margin-bottom: 12px; } .ir-wc-booking .woocommerce-variation-availability::before { content: "✓ "; } /* Add-to-cart button, primary, prominent */ .ir-wc-booking .single_add_to_cart_button, .ir-wc-booking button.single_add_to_cart_button { width: 100%; padding: 18px 24px; background: var(--B, #00A0FD); color: var(--ir-ink, #0f2233); border: 0; border-radius: 12px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .2px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,160,253,.3); transition: transform .15s, background .2s, box-shadow .2s; } .ir-wc-booking .single_add_to_cart_button:hover { background: #0089DB; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,160,253,.4); } .ir-wc-booking .single_add_to_cart_button.disabled, .ir-wc-booking .single_add_to_cart_button[disabled] { background: rgba(0,0,0,.15); color: rgba(0,0,0,.45); box-shadow: none; cursor: not-allowed; transform: none; } /* Hide quantity input, service kan altijd maar 1 keer geboekt worden */ .ir-wc-booking .quantity, .ir-wc-booking .ir-qty-locked { display: none !important; } /* Cart-pagina: locked qty display */ .ir-cart-qty { display: inline-block; padding: 6px 14px; background: var(--WG, #F5F7FA); border: 1px solid rgba(0,0,0,.08); border-radius: 8px; font-weight: 700; font-size: 14px; } /* Bottom alt-CTA: WhatsApp */ .ir-wc-booking__alt { margin: 16px 24px 24px; padding: 16px 0 0; border-top: 1px solid rgba(0,0,0,.08); text-align: center; } .ir-wc-booking__alt p { margin: 0 0 10px; font-size: 13px; color: rgba(0,0,0,.55); } .ir-wc-booking__wa { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; background: #25D366; color: #fff; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px; transition: background .2s, transform .15s; } .ir-wc-booking__wa:hover { background: #1ea654; transform: translateY(-1px); } /* WC method, extraction, results, team, reviews, incl, faq, final-cta */ .ir-wc-method { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-wc-method__intro { text-align: center; max-width: 640px; margin: 0 auto 40px; color: rgba(0,0,0,.7); } .ir-wc-method__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; list-style: none; padding: 0; } .ir-wc-extraction { padding: var(--space-section-sm) 0; background: #fff; } .ir-wc-extraction__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .ir-wc-extraction__inner { grid-template-columns: 1fr; } } .ir-wc-extraction__visual img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.12); display: block; } .ir-wc-extraction__list { list-style: none; padding: 0; margin: 16px 0 0; } .ir-wc-extraction__list li { padding: 6px 0; font-weight: 600; } .ir-wc-results { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-wc-results__intro { text-align: center; color: rgba(0,0,0,.7); margin-bottom: 32px; } .ir-wc-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; } .ir-wc-result__caption { text-align: center; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.7); margin-top: 12px; } .ir-wc-team { padding: var(--space-section-sm) 0; background: #fff; } .ir-wc-team__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .ir-wc-team__inner { grid-template-columns: 1fr; } } .ir-wc-team__visual img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.12); display: block; } .ir-wc-team__values { list-style: none; padding: 0; margin: 24px 0; } .ir-wc-team__values li { padding: 6px 0; font-weight: 600; } .ir-wc-reviews { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-wc-reviews__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; padding: 24px; background: #fff; border-radius: 12px; } .ir-wc-reviews__score { display: flex; align-items: center; gap: 16px; } .ir-wc-reviews__score-big { font-size: 56px; font-weight: 800; color: var(--K, #000); line-height: 1; } .ir-wc-reviews__score-stars { color: #FFB800; font-size: 24px; letter-spacing: 2px; } .ir-wc-reviews__score-based { font-size: 13px; color: rgba(0,0,0,.6); margin-top: 4px; } .ir-wc-reviews__google-badge { font-size: 13px; color: rgba(0,0,0,.7); font-weight: 600; } .ir-wc-reviews__google-badge span { display: inline-block; width: 20px; height: 20px; background: #4285F4; color: #fff; border-radius: 50%; text-align: center; line-height: 20px; font-weight: 800; margin-right: 6px; vertical-align: middle; } .ir-wc-incl { padding: 60px 0; background: #fff; } .ir-wc-incl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin: 0 auto; } @media (max-width: 700px) { .ir-wc-incl__grid { grid-template-columns: 1fr; } } .ir-wc-incl .ir-incl-card { background: var(--WG, #F5F7FA); border-radius: var(--r, 14px); padding: 28px 24px; } .ir-wc-incl .ir-incl-card--yes { border-left: 4px solid var(--B, #00A0FD); } .ir-wc-incl .ir-incl-card--no { border-left: 4px solid #DC2626; } .ir-wc-incl .ir-incl-card h3 { margin: 0 0 16px; font-size: 19px; } .ir-wc-incl .ir-incl-card ul { list-style: none; padding: 0; margin: 0; } .ir-wc-incl .ir-incl-card li { padding: 6px 0; font-size: 15px; line-height: 1.5; } .ir-wc-faq { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-wc-faq .ir-faq { max-width: 800px; margin: 32px auto 0; } .ir-wc-final-cta { padding: 60px 0; background: var(--K, #000); color: #fff; text-align: center; } .ir-wc-final-cta h2 { color: #fff; margin-bottom: 12px; } .ir-wc-final-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* === Contact section homepage === */ .ir-contact { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-contact__inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .ir-contact__inner { grid-template-columns: 1fr; } } .ir-contact__methods { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .ir-contact__method { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border-radius: 12px; text-decoration: none; color: var(--K, #000); border: 1px solid #EAEEF3; transition: transform .2s, border-color .2s; } .ir-contact__method:hover { transform: translateX(4px); border-color: var(--B, #00A0FD); } .ir-contact__method-icon { width: 48px; height: 48px; background: var(--WG, #F5F7FA); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .ir-contact__method-text { display: flex; flex-direction: column; } .ir-contact__method-text strong { font-weight: 800; } .ir-contact__method-text span { font-size: 13px; color: rgba(0,0,0,.6); } .ir-contact__form-wrap { background: #fff; padding: 32px; border-radius: 16px; border: 1px solid #EAEEF3; } @media (max-width: 600px) { .ir-contact__form-wrap { padding: 20px; } } .ir-contact__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .ir-contact__form-grid .full { grid-column: 1 / -1; } @media (max-width: 600px) { .ir-contact__form-grid { grid-template-columns: 1fr; } } .ir-contact__form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; } .ir-contact__form input, .ir-contact__form select, .ir-contact__form textarea { padding: 12px 14px; border: 1px solid #EAEEF3; border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; } .ir-contact__form input:focus, .ir-contact__form select:focus, .ir-contact__form textarea:focus { outline: 2px solid var(--B, #00A0FD); outline-offset: -1px; border-color: var(--B, #00A0FD); } .ir-contact__submit { width: 100%; padding: 16px; font-size: 16px; } .ir-contact__guarantee { text-align: center; margin-top: 12px; font-size: 13px; color: rgba(0,0,0,.6); } /* Voor/na case caption (homepage resultaten) */ .ir-ba-card__caption { text-align: center; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.7); margin: 12px 0 0; } /* === END IR-THEME-V5.2-ADDITIONS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.2.1, ADDITIONS Vasttapijt info-page + 'op aanvraag' variant van dienst-card. ════════════════════════════════════════════════════════════ */ /* Diensten-card 'Op aanvraag' variant */ .ir-dienst-card--quote { display: flex; flex-direction: column; cursor: default; /* deze kaart is niet zelf clickable */ text-decoration: none; color: var(--K, #000); } .ir-dienst-card--quote .ir-dienst-card__price--quote { color: var(--B, #00A0FD); font-size: 24px; } .ir-dienst-card__quote-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .ir-dienst-card__wa, .ir-dienst-card__more { display: block; padding: 12px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px; text-align: center; transition: background .2s, transform .15s; } .ir-dienst-card__wa { background: #25D366; color: #fff; } .ir-dienst-card__wa:hover { background: #1ea654; transform: translateY(-1px); } .ir-dienst-card__more { background: var(--WG, #F5F7FA); color: var(--K, #000); border: 1px solid #EAEEF3; } .ir-dienst-card__more:hover { background: #EAEEF3; } /* === Vasttapijt info-page === */ .ir-vasttapijt-page { background: #fff; } .ir-vt-hero { padding: 40px 0 60px; background: linear-gradient(180deg, var(--WG, #F5F7FA) 0%, #fff 100%); } .ir-vt-hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } @media (max-width: 1024px) { .ir-vt-hero__inner { grid-template-columns: 1fr; gap: 32px; } } .ir-vt-hero__h1 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.1; margin: 16px 0 8px; } @media (max-width: 760px) { .ir-vt-hero__h1 { font-size: 32px; } } .ir-vt-hero__subtitle { font-size: 18px; font-weight: 700; color: var(--B, #00A0FD); margin: 0 0 16px; } .ir-vt-hero__lead { font-size: 17px; line-height: 1.6; margin-bottom: 24px; color: rgba(0,0,0,.75); } .ir-vt-hero__benefits { list-style: none; padding: 0; margin: 0 0 24px; } .ir-vt-hero__benefits li { padding: 6px 0; font-size: 16px; font-weight: 600; } .ir-vt-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .ir-vt-hero__micro { font-size: 13px; color: rgba(0,0,0,.55); margin: 0; } .ir-vt-hero__visual img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.12); display: block; } .ir-vt-disclaimer { padding: 24px 0; background: #fff; } .ir-vt-disclaimer__box { display: flex; gap: 16px; padding: 20px 24px; background: #FFF8E1; border-left: 4px solid #F59F00; border-radius: 8px; font-size: 15px; line-height: 1.6; max-width: 1000px; margin: 0 auto; } .ir-vt-disclaimer__icon { font-size: 24px; flex-shrink: 0; } .ir-vt-wat { padding: 60px 0; background: #fff; } .ir-vt-wat__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; } .ir-vt-wat__card { background: var(--WG, #F5F7FA); padding: 28px 24px; border-radius: 12px; border: 1px solid #EAEEF3; } .ir-vt-wat__icon { font-size: 36px; margin-bottom: 12px; } .ir-vt-wat__card h3 { margin: 0 0 8px; font-size: 18px; } .ir-vt-wat__card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.7); } .ir-vt-method { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-vt-method__intro { text-align: center; max-width: 640px; margin: 0 auto 32px; color: rgba(0,0,0,.7); } .ir-vt-method__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; } .ir-vt-results { padding: var(--space-section-sm) 0; background: #fff; } .ir-vt-results__intro { text-align: center; color: rgba(0,0,0,.7); margin-bottom: 32px; } .ir-vt-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; } .ir-vt-result__caption { text-align: center; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.7); margin-top: 12px; } .ir-vt-howto { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-vt-howto__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; list-style: none; padding: 0; margin-top: 32px; } .ir-vt-reviews { padding: var(--space-section-sm) 0; background: #fff; } .ir-vt-form { padding: var(--space-section-sm) 0; background: var(--WG, #F5F7FA); } .ir-vt-form__inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .ir-vt-form__inner { grid-template-columns: 1fr; } } .ir-vt-form__methods { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .ir-vt-faq { padding: var(--space-section-sm) 0; background: #fff; } .ir-vt-faq .ir-faq { max-width: 800px; margin: 32px auto 0; } .ir-vt-final-cta { padding: 60px 0; background: var(--K, #000); color: #fff; text-align: center; } .ir-vt-final-cta h2 { color: #fff; margin-bottom: 8px; } .ir-vt-final-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* === END IR-THEME-V5.2.1-ADDITIONS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3, ADDITIONS FBT-image-styling consolidatie + Futy.io chat coexistence. ════════════════════════════════════════════════════════════ */ /* Wanneer Futy.io actief is, verbergen we onze eigen WA floating bubble (mocht die ooit toegevoegd worden) om dubbele chats te vermijden. */ body.ir-futy-active .ir-wa-fab, body.ir-futy-active [data-ir-wa-fab] { display: none !important; } /* Mobile aanpassing voor FBT badge zodat overlap met prijs minder voorkomt */ @media (max-width: 760px) { .ir-hero__fbt-badge { top: 8px; left: 8px; padding: 8px 10px; } .ir-hero__fbt-badge img { max-width: 64px; } } @media (max-width: 480px) { .ir-hero__fbt-badge { /* op echt smalle schermen: rechtsboven om prijs (rechtsonder) te ontwijken */ left: auto; right: 8px; top: 8px; } } /* === END IR-THEME-V5.3-ADDITIONS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.1, DEFAULT WC CHECKOUT BEAUTIFICATION Polished WooCommerce native checkout look-and-feel. Wordt vervangen door echte multi-step in v5.4 (Phase 1 chat). ════════════════════════════════════════════════════════════ */ body.ir-default-checkout #main, body.ir-default-checkout .woocommerce { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; } body.ir-default-checkout .woocommerce-billing-fields h3, body.ir-default-checkout #order_review_heading, body.ir-default-checkout .woocommerce-shipping-fields h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 24px; color: var(--K, #000); margin: 32px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--B, #00A0FD); } body.ir-default-checkout .form-row { margin-bottom: 16px; } body.ir-default-checkout .form-row label { display: block; font-weight: 600; font-size: 13px; color: rgba(0,0,0,.7); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } body.ir-default-checkout .form-row input.input-text, body.ir-default-checkout .form-row textarea, body.ir-default-checkout .form-row select, body.ir-default-checkout .select2-selection { width: 100%; padding: 12px 14px !important; border: 1.5px solid rgba(0,0,0,.12); border-radius: 10px; font-size: 15px; font-family: 'Montserrat', sans-serif; background: #fff; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; height: auto !important; min-height: 48px; } body.ir-default-checkout .form-row input.input-text:focus, body.ir-default-checkout .form-row textarea:focus, body.ir-default-checkout .form-row select:focus { outline: 0; border-color: var(--B, #00A0FD); box-shadow: 0 0 0 3px rgba(0,160,253,.15); } body.ir-default-checkout .select2-container--default .select2-selection--single { border: 1.5px solid rgba(0,0,0,.12) !important; border-radius: 10px !important; height: 48px !important; padding: 8px 14px !important; } body.ir-default-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px !important; padding-left: 0 !important; } body.ir-default-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px !important; right: 8px !important; } body.ir-default-checkout .woocommerce-checkout-review-order-table { width: 100%; /* v1.12.7: WC's eigen width:100% is uit → zelf zetten (mobiel-safe) */ border-collapse: collapse; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; margin-bottom: 24px; background: #fff; } body.ir-default-checkout .woocommerce-checkout-review-order-table th, body.ir-default-checkout .woocommerce-checkout-review-order-table td { padding: 14px 16px !important; border-bottom: 1px solid rgba(0,0,0,.06) !important; } body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total { background: var(--WG, #F5F7FA); font-size: 18px; font-weight: 800; } body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--B, #00A0FD); font-size: 22px; } body.ir-default-checkout #payment { background: var(--WG, #F5F7FA); border-radius: 14px; padding: 24px; margin-top: 16px; } body.ir-default-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; } body.ir-default-checkout #payment ul.payment_methods li { margin-bottom: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 14px 16px; } body.ir-default-checkout #payment ul.payment_methods li label { display: inline-block; font-weight: 600; cursor: pointer; margin-left: 6px; } body.ir-default-checkout #payment .payment_box { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 14px; margin-top: 10px; font-size: 14px; } body.ir-default-checkout #place_order { width: 100%; background: var(--B, #00A0FD); color: #fff; border: 0; padding: 18px 24px; border-radius: 12px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; cursor: pointer; margin-top: 16px; box-shadow: 0 4px 14px rgba(0,160,253,.3); transition: background .2s, transform .15s, box-shadow .2s; } body.ir-default-checkout #place_order:hover { background: #0080cc; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,160,253,.4); } body.ir-default-checkout #place_order:disabled { background: rgba(0,0,0,.15); color: rgba(0,0,0,.4); box-shadow: none; cursor: not-allowed; transform: none; } body.ir-default-checkout .woocommerce-terms-and-conditions-wrapper { margin: 16px 0; padding: 16px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; font-size: 14px; } /* v6.2: cart-notice en coupon-balk deelden één identieke blauwe regel, waardoor ze even hard schreeuwden en op elkaar leken (klantfeedback 14/07). Nu gesplitst: de coupon blijft de blauwe info-affordance (maar slanker), de cart-notice wordt een rustige groene bevestiging met een kleine, secundaire link. */ body.ir-default-checkout .woocommerce-info { background: #E3F4FF; border-left: 3px solid var(--B, #00A0FD); padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 12px; list-style: none; } body.ir-default-checkout .woocommerce-message { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(37,211,102,.08); border-left: 3px solid var(--WA, #25D366); padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #14663A; margin-bottom: 12px; list-style: none; } /* "Winkelwagen bekijken" mag geen primaire CTA zijn naast "Afspraak inplannen" */ body.ir-default-checkout .woocommerce-message .button { margin-left: auto; padding: 5px 12px; font-size: 12px; font-weight: 700; line-height: 1.4; min-height: 0; background: transparent; color: #14663A; border: 1px solid rgba(20,102,58,.35); border-radius: 999px; box-shadow: none; text-transform: none; } body.ir-default-checkout .woocommerce-message .button:hover { background: rgba(37,211,102,.14); color: #0E4C2B; } /* v6.2: optionele bedrijfsgegevens. Verborgen tot het vinkje "Ik bestel als bedrijf" aan staat (JS: initCompanyToggle). Houdt de checkout licht voor de ~meeste particuliere klanten. */ body.ir-default-checkout .ir-company-field { display: none; } body.ir-default-checkout .ir-company-field.is-visible { display: block; } body.ir-default-checkout .ir-company-toggle { margin: 4px 0 10px; padding: 10px 12px; background: var(--WG, #F5F7FA); border: 1px solid var(--WGD, #EAEEF3); border-radius: 8px; } body.ir-default-checkout .ir-company-toggle label { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--K, #000); } body.ir-default-checkout .ir-company-toggle input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--B, #00A0FD); flex: 0 0 auto; cursor: pointer; } /* Toelichting onder het facturatieadres: benadrukt dat dit het reinigingsadres niet overschrijft. */ body.ir-default-checkout .ir-company-field .description { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: #5B6675; } body.ir-default-checkout .woocommerce-error { background: #FFEBEE; border-left: 4px solid #C62828; padding: 14px 18px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; color: #B71C1C; list-style: none; } body.ir-default-checkout abbr.required { color: #C62828; text-decoration: none; font-weight: 700; } body.ir-default-checkout .form-row.woocommerce-invalid input.input-text, body.ir-default-checkout .form-row.woocommerce-invalid select { border-color: #C62828 !important; } /* ──────────────────────────────────────────────────────────────── v1.12.7: SELF-CONTAINED CHECKOUT — dekt wat WC's eigen stylesheets (nu uitgeschakeld op de checkout) voorheen leverden, zodat niets bare rendert. Alles hieronder is theme-eigen, geen WC-CSS nodig. ──────────────────────────────────────────────────────────────── */ /* Voornaam | Achternaam naast elkaar op desktop (WC deed dit via form-row-first/last floats; die floats zijn nu weg → zelf regelen). */ @media (min-width: 560px) { body.ir-default-checkout .woocommerce-billing-fields__field-wrapper, body.ir-default-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } body.ir-default-checkout .form-row-first { grid-column: 1; } body.ir-default-checkout .form-row-last { grid-column: 2; } /* Volle-breedte velden en losse toggles spannen beide kolommen. */ body.ir-default-checkout .form-row-wide, body.ir-default-checkout .ir-company-toggle, body.ir-default-checkout .ir-company-field, body.ir-default-checkout .form-row.notes, body.ir-default-checkout .form-row[id*="comments"] { grid-column: 1 / -1; } } /* Coupon-formulier (verschijnt na klik op "Heb je een coupon?"). WC-general stylede dit vroeger; nu theme-eigen zodat input + knop niet bare zijn. */ body.ir-default-checkout .checkout_coupon { border: 1px solid var(--WGD, #EAEEF3); border-radius: 10px; padding: 16px; margin-bottom: 16px; background: #fff; } body.ir-default-checkout .checkout_coupon .form-row { margin-bottom: 12px; } body.ir-default-checkout .checkout_coupon .form-row:last-child { margin-bottom: 0; } /* Algemene WC-knop (.button) — o.a. "Coupon toepassen". WC-general leverde de basisknop; die is nu weg, dus een nette theme-basis (place_order houdt zijn eigen, sterkere stijl hierboven; .woocommerce-message .button eveneens). */ body.ir-default-checkout .button, body.ir-default-checkout button:not(#place_order):not(.ir-nav__burger) { display: inline-block; background: var(--B, #00A0FD); color: #fff; border: 0; padding: 12px 20px; border-radius: 10px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; transition: background .15s; text-decoration: none; } body.ir-default-checkout .button:hover, body.ir-default-checkout button:not(#place_order):not(.ir-nav__burger):hover { background: #0080cc; } /* De groene cart-notice-knop en de coupon-toggle-link houden hun eigen look. */ body.ir-default-checkout .woocommerce-message .button { background: transparent; } /* Order-review meta (variatie-opties + "Aankomstmoment" + Eco-voordeel-regel) leesbaar houden binnen de cel. */ body.ir-default-checkout .woocommerce-checkout-review-order-table .cart_item td { font-size: 14px; line-height: 1.5; } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation, body.ir-default-checkout .woocommerce-checkout-review-order-table .wc-item-meta { margin: 6px 0 0; font-size: 13px; color: #5B6675; } /* Mobiel: alles vol breed, ruime tapdoelen, geen horizontale overflow. */ @media (max-width: 899px) { body.ir-default-checkout #main, body.ir-default-checkout .woocommerce { padding: 20px 16px 48px; } body.ir-default-checkout #order_review_heading { margin-top: 28px; } body.ir-default-checkout .woocommerce-checkout-review-order-table th, body.ir-default-checkout .woocommerce-checkout-review-order-table td { padding: 12px 12px !important; } body.ir-default-checkout #payment { padding: 18px; } body.ir-default-checkout #place_order { font-size: 17px; padding: 16px 20px; } } /* v1.12.6: FIX checkout-layout. woocommerce-layout.css (sinds v1.11.9 mee geladen op de checkout) floatte BINNEN #customer_details de .col-1 (factuurvelden) links 48% en .col-2 (bestelnotities) rechts 48%. Dat gaf DRIE verkrampte kolommen (gegevens | notities | overzicht) met grote lege gaten, i.p.v. de bedoelde 2-koloms grid. Neutraliseer die WC-floats (hogere specificiteit, 0,3,0 > 0,2,0) zodat factuurvelden + notities vol breed onder elkaar staan in kolom 1 en de theme-grid hieronder de echte layout bepaalt. Geldt op alle breedtes. */ body.ir-default-checkout .col2-set, body.ir-default-checkout .col2-set .col-1, body.ir-default-checkout .col2-set .col-2 { float: none; width: 100%; padding: 0; } /* Responsive: 2-kolom layout op desktop, 1 op mobile */ @media (min-width: 900px) { body.ir-default-checkout form.checkout { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 40px; align-items: start; } /* v1.12.7: #customer_details spant BEIDE rijen in kolom 1; de order-review-kop (rij 1) en de order-review-tabel (rij 2) stapelen tight bovenaan in kolom 2. Zonder de expliciete grid-row plaatst de auto-flow de tabel ONDER de hoge details-kolom → ~890px leeg gat rechts (gemeten). */ body.ir-default-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } body.ir-default-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; } body.ir-default-checkout #order_review { grid-column: 2; grid-row: 2; } } /* === END IR-THEME-V5.3.1-CHECKOUT-BEAUTIFICATION === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.2, WHATSAPP BOEK-MODE Tijdelijke flow tot multi-step checkout (Phase 1) live is. Vervangt native WC add-to-cart op product-pagina's door een WhatsApp-knop die de gekozen varianten meestuurt. ════════════════════════════════════════════════════════════ */ /* In WA-mode: verberg de native add-to-cart knop volledig. De WhatsApp-knop overneemt de submit-actie. */ body.ir-wa-booking-mode .ir-wc-booking--wa-mode .single_add_to_cart_button { display: none !important; } /* WC's variation prijs-display blijft tonen, handig voor de klant om te zien wat een variant kost vooraleer hij op WhatsApp klikt */ body.ir-wa-booking-mode .ir-wc-booking--wa-mode .single_variation_wrap { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); } /* WC quantity input mag niet getoond worden in WA-mode */ body.ir-wa-booking-mode .ir-wc-booking--wa-mode .quantity { display: none !important; } /* === WhatsApp boek-knop (groot, prominent, groen) === */ .ir-wa-book-btn { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 18px 22px; background: #25D366; color: #fff; border-radius: 12px; text-decoration: none; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; box-shadow: 0 4px 14px rgba(37,211,102,.3); transition: background .2s, transform .15s, box-shadow .2s, opacity .2s; } .ir-wa-book-btn:hover { background: #1ea654; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,.4); color: #fff; text-decoration: none; } .ir-wa-book-btn[aria-disabled="true"] { background: rgba(0,0,0,.12); color: rgba(0,0,0,.45); box-shadow: none; cursor: not-allowed; pointer-events: none; } .ir-wa-book-btn.is-ready { /* Subtiele "klaar om te klikken" pulse */ animation: ir-wa-pulse 2s ease-in-out infinite; } @keyframes ir-wa-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,.3); } 50% { box-shadow: 0 4px 18px rgba(37,211,102,.55); } } .ir-wa-book-btn__icon { font-size: 28px; line-height: 1; flex-shrink: 0; } .ir-wa-book-btn__text { display: flex; flex-direction: column; gap: 3px; text-align: left; } .ir-wa-book-btn__main { font-size: 17px; font-weight: 700; } .ir-wa-book-btn__sub { font-size: 13px; font-weight: 500; opacity: .9; } /* Onderhouds-melding onder de knop */ .ir-wa-book-note { margin: 14px 0 0; padding: 12px 14px; background: #FFF8E1; border-left: 3px solid #F59F00; border-radius: 6px; font-size: 12.5px; line-height: 1.5; color: #6B5300; } /* === END IR-THEME-V5.3.2-ADDITIONS === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.3, BOEKINGSBOX VERFRAAID Mooiere weergave van de configureer-en-boek sectie: discount banner, prominente prijs, herwerkte features-cards. ════════════════════════════════════════════════════════════ */ /* === Header herwerkt === */ .ir-wc-booking__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px 20px; background: linear-gradient(135deg, var(--B, #00A0FD) 0%, #0080CC 100%); color: #fff; } .ir-wc-booking__eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.75); margin-bottom: 4px; } .ir-wc-booking__title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.2px; } .ir-wc-booking__head-trust { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; } .ir-wc-booking__head-stars { color: #FFD54F; font-size: 14px; letter-spacing: 1px; line-height: 1; } .ir-wc-booking__head-rating { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.95); margin-top: 4px; } /* === Body intro === */ .ir-wc-booking__intro { margin: 0 0 18px; padding: 0; font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.65); } /* === Variation labels, nummerteken vooraan === */ .ir-wc-booking .variations { counter-reset: variation-step; } .ir-wc-booking .variations tr { position: relative; padding-left: 0; counter-increment: variation-step; } .ir-wc-booking .variations td.label { display: flex !important; align-items: center; gap: 8px; } .ir-wc-booking .variations td.label::before { content: counter(variation-step); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--WG, #F5F7FA); border: 1.5px solid rgba(0,0,0,.1); border-radius: 50%; color: rgba(0,0,0,.55); font-size: 11px; font-weight: 800; flex-shrink: 0; font-family: 'Montserrat', sans-serif; letter-spacing: 0; text-transform: none; } /* Wanneer een waarde gekozen is: nummer wordt blauw (via :has selector) */ .ir-wc-booking .variations tr:has(select:not([value=""])) td.label::before, .ir-wc-booking .variations tr.ir-step-done td.label::before { background: var(--B, #00A0FD); border-color: var(--B, #00A0FD); color: #fff; content: '✓'; font-size: 12px; } /* ═══════════════════════════════════════════════════════════════════════ v1.16.0 (STAGING, tier-redesign 31/07): dynamische info-kaart per behandelings-tier (Essentieel / Comfort / Intensief), onder de behandeling- dropdown. Kleuren per tier: grijs / blauw / paars (spec §5.1). De kaarten renderen [hidden] en worden door JS getoond per gekozen tier. ═══════════════════════════════════════════════════════════════════════ */ .behandeling-info { margin-top: 8px; margin-bottom: 16px; border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.6; transition: all 0.2s ease; } .behandeling-info[hidden] { display: none; } .behandeling-info.tier-essentieel { background: #f8f9fa; border: 1px solid #e5e7eb; } .behandeling-info.tier-comfort { background: #eff6ff; border: 1px solid #bfdbfe; } .behandeling-info.tier-bioenzym { background: #f5f3ff; border: 1px solid #ddd6fe; } /* v1.16.3: was .tier-intensief */ .behandeling-info__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .behandeling-info__title { font-size: 15px; font-weight: 700; } .behandeling-info__badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 8px; white-space: nowrap; } .behandeling-info__badge--aanbevolen { background: #2563eb; color: #ffffff; } .behandeling-info__badge--garantie { background: #7c3aed; color: #ffffff; } .behandeling-info__tagline { font-size: 13px; color: #6b7280; margin-bottom: 10px; } .behandeling-info__features { list-style: none; padding: 0; margin: 0; } .behandeling-info__features li { padding: 3px 0 3px 22px; position: relative; font-size: 14px; } .behandeling-info__features li .icon { position: absolute; left: 0; top: 4px; font-size: 13px; } .behandeling-info__features li .icon--check { color: #22c55e; } .behandeling-info__features li .icon--star { color: #2563eb; } .behandeling-info__features li .icon--shield { color: #7c3aed; } .behandeling-info__nudge { font-size: 13px; color: #2563eb; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(37, 99, 235, 0.1); cursor: pointer; } .behandeling-info__nudge:hover { text-decoration: underline; } .behandeling-info__garantie { margin-top: 10px; padding: 8px 12px; background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.12); border-radius: 6px; font-size: 13px; } .behandeling-info__garantie-title { font-weight: 700; color: #7c3aed; margin-bottom: 3px; } .behandeling-info__garantie-details { display: none; margin-top: 6px; padding: 8px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 5px; font-size: 12px; color: #6b7280; line-height: 1.5; } .behandeling-info__garantie-trigger { color: #7c3aed; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } /* v1.14.0: formaat-afbeelding in de boekkolom, wisselt mee met de gekozen variatie (found_variation). object-fit:contain zodat het hele formaat zichtbaar blijft. */ .ir-wc-booking__format { margin: 14px 0 0; border: 1px solid var(--K10, rgba(0,0,0,.10)); border-radius: 12px; overflow: hidden; background: var(--WG, #F5F7FA); } .ir-wc-booking__format[hidden] { display: none; } .ir-wc-booking__format-img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: contain; background: #fff; display: block; } .ir-wc-booking__format-cap { font-family: var(--mono, 'Montserrat', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ir-ink, #0f2233); padding: 8px 12px; text-align: center; } /* v1.14.2: "configure-first" — slanke stof-waarschuwing (vervangt het rode blok) en een compacte kosten-belofte onder de CTA (vervangt het amber blok bovenaan). */ .ir-wc-booking__fabric-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 0; font-family: var(--mono, 'Montserrat', sans-serif); font-size: 12.5px; line-height: 1.45; font-weight: 600; color: rgba(0,0,0,.6); } .ir-wc-booking__fabric-note a { color: var(--ir-ink, #0f2233); text-decoration: underline; font-weight: 700; } .ir-wc-booking__fabric-note a:hover { color: var(--B, #00A0FD); } /* v1.14.4: kosten-belofte als kleine PREMIUM pills met gouden shield-icoon, pal onder de titel ("alles inbegrepen, geen zorgen, betrouwbaar"-gevoel). Het shield-icoon is een inline SVG (gouden fill) → crisp, geen extra request, robuuste fallback. */ .ir-wc-booking__assure { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ir-wc-booking__assure li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: linear-gradient(180deg, rgba(184,134,11,.14), rgba(184,134,11,.05)); border: 1px solid rgba(184,134,11,.42); box-shadow: 0 1px 2px rgba(138,106,28,.10); font-family: var(--mono, 'Montserrat', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: .01em; color: #8A6A1C; white-space: nowrap; } .ir-wc-booking__assure li::before { content: ''; flex: 0 0 auto; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%238A6A1C'%3E%3Cpath%20d='M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4z'/%3E%3C/svg%3E") center / contain no-repeat; } /* === Variation prijs-display: prominenter === */ .ir-wc-booking .single_variation_wrap { margin: 20px 0 0; padding: 18px 16px; border: 0; background: linear-gradient(180deg, var(--WG, #F5F7FA) 0%, #fff 100%); border-radius: 12px; border: 1px solid rgba(0,0,0,.06); } .ir-wc-booking .woocommerce-variation { margin: 0; } .ir-wc-booking .woocommerce-variation-description { font-size: 13px; color: rgba(0,0,0,.55); margin-bottom: 10px; line-height: 1.5; } .ir-wc-booking .woocommerce-variation-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: 1; margin-bottom: 10px; } .ir-wc-booking .woocommerce-variation-price::before { content: 'Uw prijs:'; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(0,0,0,.5); width: 100%; margin-bottom: 4px; } .ir-wc-booking .woocommerce-variation-price .price { font-size: 42px; color: var(--ir-ink, #0f2233); /* v1.13.2: donker i.p.v. bright-blue (contrast op wit) */ font-weight: inherit; } .ir-wc-booking .woocommerce-variation-price del { font-size: 20px; color: rgba(0,0,0,.4); font-weight: 600; margin-right: 0; text-decoration: line-through; } /* v1.13.4: Eco-voordeel "was / nu"-weergave. Zodra een voorkeurmoment gekozen is, rendert de Route66-plugin in de "Uw prijs"-regel: €249,00 €211,65 Eco-voordeel 15% (zie ~/Downloads/BRIEF-route66-eco-prijsweergave.md). De del-regel hierboven zet de oude prijs klein/grijs door; de ins is de nieuwe, prominente prijs. */ .ir-wc-booking .woocommerce-variation-price ins { text-decoration: none; color: var(--ir-ink, #0f2233); font-weight: inherit; } /* Eco-voordeel-badge (herbruikbaar: boekkolom + winkelwagen + afrekenen) */ .ir-eco-tag { display: inline-flex; align-items: center; gap: 6px; align-self: center; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0E7A45; background: rgba(47,158,95,.14); border: 1px solid rgba(47,158,95,.30); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .ir-eco-tag::before { content: '🌿'; font-size: 12px; } .ir-wc-booking .woocommerce-variation-availability { font-size: 13px; font-weight: 600; color: #2e7d32; margin: 0; display: flex; align-items: center; gap: 6px; } .ir-wc-booking .woocommerce-variation-availability::before { content: '✓'; background: #2e7d32; color: #fff; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } /* === WhatsApp knop verbeterd === */ .ir-wa-book-btn { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 16px; padding: 18px 22px; background: #25D366; color: #fff; border-radius: 14px; text-decoration: none; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; box-shadow: 0 6px 20px rgba(37,211,102,.35); transition: background .2s, transform .15s, box-shadow .2s, opacity .2s; position: relative; overflow: hidden; } .ir-wa-book-btn::before { /* subtle hover shine */ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition: left .6s; } .ir-wa-book-btn:hover::before { left: 100%; } .ir-wa-book-btn:hover { background: #1ea654; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.45); color: #fff; text-decoration: none; } .ir-wa-book-btn[aria-disabled="true"] { background: rgba(0,0,0,.12); color: rgba(0,0,0,.45); box-shadow: none; cursor: not-allowed; pointer-events: none; } .ir-wa-book-btn.is-ready { animation: ir-wa-pulse 2.2s ease-in-out infinite; } .ir-wa-book-btn__icon { font-size: 30px; line-height: 1; flex-shrink: 0; } .ir-wa-book-btn__text { display: flex; flex-direction: column; gap: 3px; text-align: left; flex: 1; } .ir-wa-book-btn__main { font-size: 17px; font-weight: 700; } .ir-wa-book-btn__sub { font-size: 13px; font-weight: 500; opacity: .92; } .ir-wa-book-btn__arrow { font-size: 22px; flex-shrink: 0; transition: transform .2s; } .ir-wa-book-btn:hover .ir-wa-book-btn__arrow { transform: translateX(4px); } /* === Onderhoudsmelding hertoond === */ .ir-wa-book-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; background: #FFF8E1; border-left: 3px solid #F59F00; border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: #6B5300; } .ir-wa-book-note__icon { font-size: 16px; line-height: 1.2; flex-shrink: 0; } @media (max-width: 760px) { } /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.4, METHODE 5 STAPPEN MET FOTO'S Upgrade van .ir-method-card: ondersteunt nu zowel foto-cards (in WC product page) als de oude tekst-only variant. ════════════════════════════════════════════════════════════ */ /* 5-staps grid: 5 kolommen op desktop, herschalend op kleinere schermen */ .ir-wc-method__grid--5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; padding: 0; margin: 32px 0 0; } @media (max-width: 1100px) { .ir-wc-method__grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .ir-wc-method__grid--5 { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 480px) { .ir-wc-method__grid--5 { grid-template-columns: 1fr; } } /* Card met foto: uniforme verticale layout */ .ir-wc-method__grid--5 .ir-method-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 4px 14px rgba(0,0,0,.04); transition: transform .25s, box-shadow .25s; } .ir-wc-method__grid--5 .ir-method-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); } /* Foto-zone bovenaan met genummerd badge erop */ .ir-method-card__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--WG, #F5F7FA); } .ir-method-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .ir-wc-method__grid--5 .ir-method-card:hover .ir-method-card__photo img { transform: scale(1.06); } /* Nummer-badge linksboven op de foto */ .ir-wc-method__grid--5 .ir-method-card__num { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--B, #00A0FD); display: grid; place-items: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.2); margin: 0; /* Override van de oude .ir-method-card__num style die top:-14px zette */ } /* Tekst-zone onder de foto */ .ir-method-card__body { padding: 18px 18px 22px; flex: 1; display: flex; flex-direction: column; } .ir-method-card__body h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 8px; color: var(--K, #000); line-height: 1.25; } .ir-method-card__body p { font-size: 13.5px; color: rgba(0,0,0,.7); line-height: 1.55; margin: 0; } /* Note onderaan de methode-sectie */ .ir-wc-method__note { text-align: center; margin: 32px auto 0; padding: 14px 20px; background: var(--WG, #F5F7FA); border-radius: 10px; font-size: 14px; color: rgba(0,0,0,.75); max-width: 640px; } .ir-wc-method__note a { color: var(--B, #00A0FD); font-weight: 700; text-decoration: none; } .ir-wc-method__note a:hover { text-decoration: underline; } /* Intro paragraaf wat luchtiger maken nu hij langer is */ .ir-wc-method__intro { text-align: center; max-width: 760px; margin: 0 auto 8px; color: rgba(0,0,0,.7); line-height: 1.65; } .ir-wc-method__intro strong { display: block; margin-top: 4px; color: var(--K, #000); font-size: 15px; } /* === END IR-THEME-V5.3.4-METHODE === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.5, MYTH-BUSTER SECTIE "Zelfs een jaarlijks onderhouden zetel zit vol verborgen vuil" Met foto van vuil water op pre-onderhoud klant. ════════════════════════════════════════════════════════════ */ .ir-wc-myth { padding: var(--space-section-sm) 0; background: linear-gradient(180deg, #fff 0%, var(--WG, #F5F7FA) 100%); position: relative; } .ir-wc-myth__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; } @media (max-width: 960px) { .ir-wc-myth__inner { grid-template-columns: 1fr; gap: 32px; } } .ir-wc-myth__text h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; line-height: 1.15; margin: 12px 0 20px; color: var(--K, #000); text-wrap: balance; } @media (max-width: 760px) { .ir-wc-myth__text h2 { font-size: 28px; } .ir-wc-myth__text h2 br { display: none; } } .ir-wc-myth__lead { font-size: 17px; line-height: 1.6; color: rgba(0,0,0,.8); margin-bottom: 18px; } .ir-wc-myth__lead em { background: var(--B10, rgba(0,160,253,.10)); padding: 2px 6px; border-radius: 4px; font-style: italic; font-weight: 500; color: #075985; } .ir-wc-myth__text p { font-size: 15px; line-height: 1.7; margin-bottom: 14px; color: rgba(0,0,0,.75); } .ir-wc-myth__tag { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 16px 18px; background: rgba(0, 160, 253, .08); border-left: 4px solid var(--B, #00A0FD); border-radius: 8px; font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.85); } .ir-wc-myth__tag-icon { font-size: 22px; line-height: 1; flex-shrink: 0; } .ir-wc-myth__tag strong { color: var(--B, #00A0FD); } /* Visuele kant */ .ir-wc-myth__visual figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.15); background: #000; } .ir-wc-myth__visual img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; } .ir-wc-myth__visual figcaption { padding: 14px 18px; background: rgba(0,0,0,.85); color: #fff; font-size: 13px; line-height: 1.4; } .ir-wc-myth__visual figcaption strong { color: #FFD54F; display: block; margin-bottom: 2px; font-weight: 700; } /* Alert-variant van section-eyebrow */ .ir-section-eyebrow--alert { color: #C62828; } .ir-section-eyebrow--alert::before { background: #C62828 !important; } /* === END IR-THEME-V5.3.5-MYTH-BUSTER === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.6, MOBIELE NAVIGATIE FIX .ir-mobile-menu styling toevoegen + burger hamburger animatie. Eerdere versies misten deze styling waardoor het menu niet zichtbaar was. ════════════════════════════════════════════════════════════ */ .ir-mobile-menu { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 998; /* Default: gesloten */ visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 16px 40px rgba(0,0,0,.08); } .ir-mobile-menu.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease, visibility 0s; } .ir-mobile-menu__inner { display: flex; flex-direction: column; gap: 4px; padding: 24px 20px 40px; max-width: 100%; } .ir-mobile-menu__inner > a { display: block; padding: 14px 16px; border-radius: 10px; text-decoration: none; color: var(--K, #000); font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; transition: background .15s, color .15s; border-bottom: 1px solid rgba(0,0,0,.05); } .ir-mobile-menu__inner > a:hover, .ir-mobile-menu__inner > a:focus { background: var(--WG, #F5F7FA); color: var(--B, #00A0FD); } .ir-mobile-menu__inner > a.btn { margin-top: 12px; border-bottom: 0; border-radius: 12px; } .ir-mobile-menu__inner > a.btn-wa { background: #25D366; color: #fff; } .ir-mobile-menu__inner > a.btn-wa:hover { background: #1ea654; color: #fff; } /* Body lock-class wanneer menu open */ body.ir-menu-locked { overflow: hidden; touch-action: none; } /* === Burger animatie naar X wanneer actief === */ .ir-nav__burger { background: transparent; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 12px; position: relative; z-index: 999; flex-direction: column; justify-content: space-around; } .ir-nav__burger span { width: 100%; display: block; height: 2px; background: var(--K, #000); border-radius: 2px; transform-origin: center; transition: transform .3s, opacity .2s; } .ir-nav__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ir-nav__burger.is-active span:nth-child(2) { opacity: 0; } .ir-nav__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Boven 960px: mobile menu nooit zichtbaar */ @media (min-width: 960px) { .ir-mobile-menu, .ir-mobile-menu.is-open { display: none !important; } } /* === END IR-THEME-V5.3.6-MOBILE-MENU === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.6, METHODE, FAQ, STAD-SERVICES UPGRADE ════════════════════════════════════════════════════════════ */ /* === METHODE: persoonlijker + animaties === */ .ir-method__h2-accent { background: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(0,160,253,.18) 50%, rgba(0,160,253,.18) 100%); padding: 0 4px; } .ir-wc-method h2 { text-align: center; font-size: 36px; line-height: 1.2; margin: 8px 0 16px; } @media (max-width: 760px) { .ir-wc-method h2 { font-size: 26px; } } /* Stagger reveal animatie voor cards */ .ir-wc-method__grid--5 .ir-method-card { opacity: 0; transform: translateY(24px); animation: ir-method-reveal .6s cubic-bezier(.22, .61, .36, 1) forwards; } .ir-wc-method__grid--5 .ir-method-card:nth-child(1) { animation-delay: .05s; } .ir-wc-method__grid--5 .ir-method-card:nth-child(2) { animation-delay: .15s; } .ir-wc-method__grid--5 .ir-method-card:nth-child(3) { animation-delay: .25s; } .ir-wc-method__grid--5 .ir-method-card:nth-child(4) { animation-delay: .35s; } .ir-wc-method__grid--5 .ir-method-card:nth-child(5) { animation-delay: .45s; } @keyframes ir-method-reveal { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ir-wc-method__grid--5 .ir-method-card { opacity: 1; transform: none; animation: none; } } /* "Hero" card (stap 3) krijgt extra prominentie */ .ir-wc-method__grid--5 .ir-method-card--hero { border-color: var(--B, #00A0FD); box-shadow: 0 8px 24px rgba(0,160,253,.18); } .ir-method-card__hero-badge { position: absolute; bottom: 12px; left: 12px; right: 12px; background: var(--B, #00A0FD); color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 6px 10px; border-radius: 6px; pointer-events: none; box-shadow: 0 4px 12px rgba(0,160,253,.4); } /* Tag boven titel in card body */ .ir-method-card__tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--B, #00A0FD); background: rgba(0,160,253,.08); padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; } /* Hover-zoom indicator (rechtsboven op foto) */ .ir-method-card__zoom { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; } .ir-wc-method__grid--5 .ir-method-card:hover .ir-method-card__zoom { opacity: 1; transform: translateY(0); } /* Footer onder de methode-cards: garantie + WA */ .ir-wc-method__footer { margin-top: 40px; padding: 20px 24px; background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 800px; margin-left: auto; margin-right: auto; } .ir-wc-method__guarantee { display: flex; gap: 14px; align-items: center; } .ir-wc-method__guarantee-icon { font-size: 32px; line-height: 1; flex-shrink: 0; } .ir-wc-method__guarantee strong { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 2px; } .ir-wc-method__guarantee span { font-size: 13.5px; color: rgba(0,0,0,.65); line-height: 1.4; } .ir-wc-method__ask { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; background: #25D366; color: #fff; text-decoration: none; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; transition: background .2s, transform .15s; } .ir-wc-method__ask:hover { background: #1ea654; transform: translateY(-1px); } /* === FAQ: cleaner met categorieën + search === */ .ir-wc-faq__header { text-align: center; margin-bottom: 32px; } .ir-wc-faq h2 { font-size: 36px; margin: 8px 0 12px; } @media (max-width: 760px) { .ir-wc-faq h2 { font-size: 26px; } } .ir-wc-faq__intro { max-width: 640px; margin: 0 auto; color: rgba(0,0,0,.7); font-size: 15px; line-height: 1.6; } .ir-wc-faq__intro a { color: var(--B, #00A0FD); font-weight: 700; text-decoration: none; } .ir-faq-tool { max-width: 800px; margin: 0 auto 28px; background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.04); } .ir-faq-tool__search { position: relative; } .ir-faq-tool__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; opacity: .5; } .ir-faq-tool__input { width: 100%; padding: 12px 14px 12px 40px; border: 1.5px solid rgba(0,0,0,.1); border-radius: 10px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .ir-faq-tool__input:focus { outline: 0; border-color: var(--B, #00A0FD); box-shadow: 0 0 0 3px rgba(0,160,253,.15); } .ir-faq-tool__tabs { display: flex; flex-wrap: wrap; gap: 8px; } .ir-faq-tab { background: var(--WG, #F5F7FA); border: 1.5px solid transparent; padding: 8px 14px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; color: rgba(0,0,0,.7); transition: all .2s; } .ir-faq-tab:hover { background: #fff; border-color: var(--B, #00A0FD); color: var(--B, #00A0FD); } .ir-faq-tab.is-active { background: var(--B, #00A0FD); color: #fff; border-color: var(--B, #00A0FD); } /* FAQ items zelf, clean, geen heavy borders */ .ir-wc-faq .ir-faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .ir-wc-faq .ir-faq__item { background: #fff; border-radius: var(--r, 14px); border: 1px solid rgba(0,0,0,.08); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .ir-wc-faq .ir-faq__item:hover { border-color: rgba(0,160,253,.3); } .ir-wc-faq .ir-faq__item[open] { border-color: var(--B, #00A0FD); box-shadow: 0 8px 24px rgba(0,160,253,.08); } .ir-wc-faq .ir-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-family: var(--font, 'Montserrat', sans-serif); /* v1.15.0: FAQ = leestekst */ font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--K, #000); transition: color .15s; } .ir-wc-faq .ir-faq__q::-webkit-details-marker { display: none; } .ir-wc-faq .ir-faq__q-text { flex: 1; } .ir-wc-faq .ir-faq__q-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--WG, #F5F7FA); color: var(--B, #00A0FD); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; transition: transform .25s, background .2s; } .ir-wc-faq .ir-faq__item[open] .ir-faq__q-icon { background: var(--B, #00A0FD); color: #fff; transform: rotate(45deg); } .ir-wc-faq .ir-faq__answer { padding: 0 22px 22px; font-size: 14.5px; line-height: 1.65; color: rgba(0,0,0,.75); } .ir-wc-faq .ir-faq__answer p { margin: 0 0 12px; } .ir-wc-faq .ir-faq__answer p:last-child { margin-bottom: 0; } .ir-wc-faq .ir-faq__answer a { color: var(--B, #00A0FD); font-weight: 700; text-decoration: none; } .ir-wc-faq .ir-faq__answer a:hover { text-decoration: underline; } /* Hidden state voor filter */ .ir-wc-faq .ir-faq__item[hidden] { display: none !important; } /* === STAD: rijkere dienst-cards === */ .ir-stad-diensten__intro { text-align: center; max-width: 600px; margin: 8px auto 32px; font-size: 15px; color: rgba(0,0,0,.7); } .ir-stad-diensten__grid--rich { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .ir-stad-diensten__grid--rich .ir-stad-dienst-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 24px 22px; text-decoration: none; color: var(--K, #000); transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; } .ir-stad-diensten__grid--rich .ir-stad-dienst-card::before { /* subtle gradient hint van de blauwe accent */ content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--B, #00A0FD), #66C7FF); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .ir-stad-diensten__grid--rich .ir-stad-dienst-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); border-color: rgba(0,160,253,.3); } .ir-stad-diensten__grid--rich .ir-stad-dienst-card:hover::before { transform: scaleX(1); } .ir-stad-diensten__grid--rich .ir-stad-dienst-card__icon { font-size: 36px; line-height: 1; margin-bottom: 12px; } .ir-stad-diensten__grid--rich .ir-stad-dienst-card h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 19px; margin: 0 0 8px; } .ir-stad-dienst-card__desc { font-size: 13.5px; color: rgba(0,0,0,.65); line-height: 1.5; flex: 1; margin: 0 0 16px; } .ir-stad-dienst-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.06); } .ir-stad-dienst-card__price { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; color: var(--K, #000); } .ir-stad-dienst-card__cta { font-size: 13px; font-weight: 700; color: var(--B, #00A0FD); transition: transform .2s; } .ir-stad-diensten__grid--rich .ir-stad-dienst-card:hover .ir-stad-dienst-card__cta { transform: translateX(3px); } .ir-stad-dienst-card__highlight { position: absolute; top: 14px; right: 14px; background: linear-gradient(135deg, #FFE066 0%, #FFB800 100%); color: #4A3A00; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(255,184,0,.3); } /* === END IR-THEME-V5.3.6-UPGRADES === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.3.7, STADSPAGINA + OVER-ONS UPGRADE ════════════════════════════════════════════════════════════ */ /* === STADSPAGINA: lokale uitleg-sectie === */ .ir-stad-local { padding: 64px 0; background: #fff; } .ir-stad-local__inner { max-width: 800px; margin: 0 auto; } .ir-stad-local__inner h2 { margin-bottom: 20px; } .ir-stad-local__text { font-size: 16px; line-height: 1.7; color: rgba(0,0,0,.78); } .ir-stad-local__text p { margin-bottom: 14px; } .ir-stad-local__deelgem { margin-top: 24px; padding: 16px 20px; background: var(--WG, #F5F7FA); border-radius: 10px; font-size: 14px; line-height: 1.6; } .ir-stad-local__deelgem strong { display: block; margin-bottom: 4px; color: var(--K, #000); } /* === STADSPAGINA: boek-stappen === */ .ir-stad-boeken { padding: 64px 0; background: linear-gradient(180deg, #fff 0%, var(--WG, #F5F7FA) 100%); } .ir-stad-boeken h2 { text-align: center; } .ir-stad-boeken__intro { text-align: center; max-width: 600px; margin: 8px auto 40px; color: rgba(0,0,0,.7); font-size: 15px; } .ir-stad-boeken__note { text-align: center; max-width: 600px; margin: 18px auto 0; color: rgba(0,0,0,.55); font-size: 13px; } .ir-stad-boeken__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin-left: auto; margin-right: auto; } .ir-stad-boeken__step { background: #fff; border: 1.5px solid rgba(0,0,0,.08); border-radius: 14px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; transition: transform .2s, box-shadow .2s, border-color .2s; } .ir-stad-boeken__step:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.06); } .ir-stad-boeken__step--primary { border-color: #25D366; background: linear-gradient(135deg, #fff 0%, rgba(37,211,102,.04) 100%); position: relative; overflow: hidden; } .ir-stad-boeken__step--primary::after { content: 'Aanbevolen'; position: absolute; top: 14px; right: 14px; background: #25D366; color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; } .ir-stad-boeken__step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--B, #00A0FD); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; flex-shrink: 0; } .ir-stad-boeken__step--primary .ir-stad-boeken__step-num { background: #25D366; } .ir-stad-boeken__step-body { flex: 1; } .ir-stad-boeken__step-body h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 8px; } .ir-stad-boeken__step-body p { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,.7); margin: 0 0 12px; } .ir-stad-boeken__step-body .btn { font-size: 13px; padding: 10px 16px; } /* === OVER-ONS: hero met badge === */ .ir-about-hero__chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .ir-about-hero__visual { position: relative; } .ir-about-hero__badge { position: absolute; bottom: 20px; right: 20px; background: rgba(255,255,255,.96); padding: 14px 18px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); text-align: center; backdrop-filter: blur(8px); } .ir-about-hero__badge strong { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; color: var(--B, #00A0FD); line-height: 1; } .ir-about-hero__badge span { font-size: 12px; line-height: 1.3; color: rgba(0,0,0,.7); font-weight: 600; } /* === OVER-ONS: ons verhaal, split layout === */ .ir-about-story { padding: var(--space-section-sm) 0; background: #fff; } .ir-about-story__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; } @media (max-width: 960px) { .ir-about-story__inner { grid-template-columns: 1fr; gap: 32px; } } .ir-about-story__text h2 { margin: 8px 0 20px; } .ir-about-story__body { font-size: 16px; line-height: 1.7; color: rgba(0,0,0,.78); } .ir-about-story__body p { margin-bottom: 14px; } .ir-about-story__visual { position: relative; } .ir-about-story__visual img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 16px 40px rgba(0,0,0,.12); } .ir-about-story__caption { margin-top: 12px; text-align: center; font-size: 13.5px; color: rgba(0,0,0,.6); font-style: italic; } .ir-about-story__caption strong { color: var(--B, #00A0FD); font-style: normal; } /* Oude timeline-CSS (li > div) verwijderd — botste met de nieuwe __item/__marker/__content layout (v1.11.1) */ /* === OVER-ONS: B2B-link naar INTREN === */ .ir-about-b2b { padding: 60px 0; background: linear-gradient(135deg, #1a2a3a 0%, #0d1825 100%); color: #fff; } .ir-about-b2b__inner { max-width: 800px; margin: 0 auto; text-align: center; } .ir-about-b2b .section-eyebrow { color: #66C7FF; } .ir-about-b2b .section-eyebrow::before { background: #66C7FF !important; } .ir-about-b2b h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 28px; margin: 8px 0 16px; color: #fff; } .ir-about-b2b p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.85); margin: 0 auto 24px; max-width: 640px; } .ir-about-b2b .btn-secondary { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.3); } .ir-about-b2b .btn-secondary:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; } /* === END IR-THEME-V5.3.7-UPGRADES === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.4.1, FAQ MARKER FIX Verwijdert ALLE native details/summary markers cross-browser. Voorheen werd alleen de webkit-marker verborgen → in Firefox / nieuwe browsers verscheen een tweede plusje naast onze custom. ════════════════════════════════════════════════════════════ */ /* Verberg native marker in alle browsers, meerdere fallbacks omdat browser support voor ::marker op summary pas recent is */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary::marker { display: none; content: ''; } /* Specifiek voor onze FAQ items, force de fix met hoge specificity */ .ir-faq .ir-faq__item summary, .ir-wc-faq .ir-faq__item summary { list-style: none !important; } .ir-faq .ir-faq__item summary::-webkit-details-marker, .ir-wc-faq .ir-faq__item summary::-webkit-details-marker { display: none !important; } .ir-faq .ir-faq__item summary::marker, .ir-wc-faq .ir-faq__item summary::marker { display: none !important; content: '' !important; } /* === END IR-THEME-V5.4.1-FAQ-MARKER-FIX === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.4.2, VASTTAPIJT PROJECTGALERIJ ════════════════════════════════════════════════════════════ */ .ir-vt-gallery { padding: 64px 0; background: var(--WG, #F5F7FA); } .ir-vt-gallery h2 { text-align: center; margin: 8px 0 8px; } .ir-vt-gallery__intro { text-align: center; color: rgba(0,0,0,.7); margin: 0 auto 32px; max-width: 560px; font-size: 15px; } /* 1 foto: groot, gecentreerd */ .ir-vt-gallery__grid--one { display: flex; justify-content: center; } .ir-vt-gallery__grid--one .ir-vt-gallery__item { max-width: 720px; width: 100%; } /* Meerdere foto's: responsive grid */ .ir-vt-gallery__grid--multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; } .ir-vt-gallery__item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); margin: 0; transition: transform .2s, box-shadow .2s; } .ir-vt-gallery__item:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.1); } .ir-vt-gallery__item img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; object-position: center; display: block; aspect-ratio: 4/3; } .ir-vt-gallery__grid--one .ir-vt-gallery__item img { max-height: 480px; aspect-ratio: 16/10; } .ir-vt-gallery__item figcaption { padding: 14px 18px; font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 14px; color: var(--K, #000); text-align: center; border-top: 1px solid rgba(0,0,0,.05); } /* === END IR-THEME-V5.4.2-VT-GALLERY === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.4.3, FORM PHOTO UPLOAD ════════════════════════════════════════════════════════════ */ .ir-form-upload { margin: 4px 0; } .ir-form-upload__label { display: block; cursor: pointer; background: var(--WG, #F5F7FA); border: 1.5px dashed rgba(0,160,253,.3); border-radius: 12px; padding: 18px 20px; transition: border-color .2s, background .2s; } .ir-form-upload__label:hover { border-color: var(--B, #00A0FD); background: rgba(0,160,253,.04); } .ir-form-upload__title { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; color: var(--K, #000); margin-bottom: 4px; } .ir-form-upload__optional { color: rgba(0,0,0,.5); font-weight: 500; font-size: 13px; } .ir-form-upload__hint { display: block; font-size: 12.5px; color: rgba(0,0,0,.6); margin-bottom: 10px; } .ir-form-upload__input { display: block; width: 100%; font-size: 13px; cursor: pointer; } .ir-form-upload__input::file-selector-button { background: var(--B, #00A0FD); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; margin-right: 12px; transition: background .15s; } .ir-form-upload__input::file-selector-button:hover { background: #0086d6; } .ir-form-upload__filelist { display: block; margin-top: 10px; font-size: 12.5px; } .ir-form-upload__filelist:empty { display: none; } .ir-form-upload__file { display: block; color: rgba(0,0,0,.7); padding: 2px 0; line-height: 1.5; } .ir-form-upload__warn { display: block; color: #c97400; background: #fff8e6; padding: 6px 10px; border-radius: 6px; margin-top: 6px; border: 1px solid #ffd866; } /* === END IR-THEME-V5.4.3-FORM-UPLOAD === */ /* ════════════════════════════════════════════════════════════ IR-THEME v5.6, WERKGEBIED PAGE (HTML SITEMAP) ════════════════════════════════════════════════════════════ */ .ir-werkgebied-page { background: var(--W, #fff); } /* Hero */ .ir-werkgebied-hero { padding: 80px 0 60px; background: var(--WG, #F5F7FA); text-align: center; } .ir-werkgebied-hero__h1 { margin: 8px 0 16px; font-size: clamp(32px, 5vw, 48px); } .ir-werkgebied-hero__subtitle { font-size: 18px; color: rgba(0,0,0,.7); max-width: 640px; margin: 0 auto 28px; } .ir-werkgebied-hero__cta { margin-top: 8px; } /* Search bar */ .ir-werkgebied-tools { padding: 32px 0 0; position: sticky; top: 0; background: var(--W, #fff); z-index: 10; border-bottom: 1px solid rgba(0,0,0,.06); } .ir-werkgebied-search { max-width: 600px; margin: 0 auto; padding-bottom: 24px; } .ir-werkgebied-search__input { width: 100%; padding: 14px 18px; font-size: 16px; border: 1.5px solid rgba(0,0,0,.12); border-radius: 12px; font-family: inherit; transition: border-color .2s, box-shadow .2s; } .ir-werkgebied-search__input:focus { outline: 0; border-color: var(--B, #00A0FD); box-shadow: 0 0 0 3px rgba(0,160,253,.15); } .ir-werkgebied-search__hint { margin: 8px 4px 0; font-size: 13px; color: rgba(0,0,0,.6); min-height: 18px; } .ir-werkgebied-search__hint:empty { display: none; } /* Province blocks */ .ir-werkgebied-list { padding: 40px 0 80px; } .ir-province-block { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(0,0,0,.06); } .ir-province-block:last-child { border-bottom: 0; margin-bottom: 0; } .ir-province-block__title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 20px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 26px; } .ir-province-block__name { color: var(--K, #000); } .ir-province-block__count { font-size: 14px; font-weight: 500; color: rgba(0,0,0,.5); font-family: 'Montserrat', sans-serif; } /* City links grid */ .ir-province-block__cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; } .ir-city-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; font-size: 15px; color: rgba(0,0,0,.75); text-decoration: none; border-radius: 6px; transition: color .15s, background .15s, padding .15s; } .ir-city-link:hover { color: var(--B, #00A0FD); background: rgba(0,160,253,.06); padding-left: 10px; } .ir-city-link--high { font-weight: 600; color: var(--K, #000); } .ir-city-link__star { color: var(--B, #00A0FD); font-size: 12px; line-height: 1; } /* Foot CTA */ .ir-werkgebied-footcta { padding: 60px 0; background: var(--WG, #F5F7FA); text-align: center; } .ir-werkgebied-footcta h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); } .ir-werkgebied-footcta p { max-width: 540px; margin: 0 auto 24px; color: rgba(0,0,0,.7); font-size: 16px; } /* Mobile */ @media (max-width: 600px) { .ir-werkgebied-hero { padding: 56px 0 40px; } .ir-province-block__title { font-size: 22px; } .ir-province-block__cities { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .ir-city-link { font-size: 14px; } } /* ════════════════════════════════════════════════════════════ IR-THEME v5.6, STAD CUSTOM LOCAL CONTENT ════════════════════════════════════════════════════════════ */ .ir-stad-localcontent { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-stad-localcontent__inner { max-width: 720px; margin: 0 auto; } .ir-stad-localcontent__body { font-size: 16px; line-height: 1.8; color: rgba(0,0,0,.78); } .ir-stad-localcontent__body p { margin: 0 0 16px; } .ir-stad-localcontent__body p:last-child { margin-bottom: 0; } .ir-stad-localcontent__body strong { color: var(--K, #000); } .ir-stad-localcontent__body a { color: var(--B, #00A0FD); text-decoration: underline; } .ir-stad-localcontent__body a:hover { text-decoration: none; } /* ════════════════════════════════════════════════════════════ IR-THEME v5.7, B2B BANNER BUTTON STYLING ════════════════════════════════════════════════════════════ */ .ir-b2b-banner__btn { font-size: 12px; padding: 8px 18px; font-family: var(--mono, 'JetBrains Mono', monospace); letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; } @media (max-width: 600px) { .ir-b2b-banner__inner { flex-direction: column; gap: 10px; } .ir-b2b-banner__text { text-align: center; font-size: 13px; } .ir-b2b-banner__sentence { display: block; } } /* ═══════════════════════════════════════ PREMIUM-DIFFERENTIATIE-STRIP (Document 1 §C5) ═══════════════════════════════════════ */ .ir-premium { padding: var(--sec-pad-sm) 0; background: var(--WG); } .ir-premium__header { text-align: center; max-width: 640px; margin: 0 auto 40px; } .ir-premium__header .section-eyebrow { justify-content: center; } .ir-premium__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto; } .ir-premium__card { background: var(--W); border: 1px solid var(--K10); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--sh); } .ir-premium__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 14px; background: var(--B10); margin-bottom: 16px; } .ir-premium__title { font-size: 19px; font-weight: 800; color: var(--K); margin-bottom: 8px; letter-spacing: -.01em; } .ir-premium__desc { font-size: 15px; line-height: 1.6; color: rgba(0,0,0,.62); } @media (max-width: 860px) { .ir-premium__grid { grid-template-columns: 1fr; gap: 14px; } .ir-premium__card { padding: 22px 20px; } } /* ════════════════════════════════════════════════════════════ IR-THEME v5.7, B2B TRUST SECTION (homepage social proof) ════════════════════════════════════════════════════════════ */ .ir-b2b-trust { padding: var(--space-section) 0; background: linear-gradient(180deg, var(--W, #fff) 0%, var(--WG, #F5F7FA) 100%); position: relative; overflow: hidden; } .ir-b2b-trust::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 4px; background: linear-gradient(90deg, transparent, var(--B, #00A0FD), transparent); } .ir-b2b-trust__header { text-align: center; max-width: 720px; margin: 0 auto 48px; } .ir-b2b-trust__title { margin: 8px 0 16px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; } .ir-b2b-trust__title .blue { color: var(--B, #00A0FD); } .ir-b2b-trust__lead { font-size: 17px; line-height: 1.6; color: rgba(0,0,0,.72); margin: 0; } .ir-b2b-trust__lead a { color: var(--B, #00A0FD); text-decoration: none; border-bottom: 2px solid currentColor; transition: opacity .15s; } .ir-b2b-trust__lead a:hover { opacity: 0.7; } /* Client grid */ .ir-b2b-trust__clients { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .ir-b2b-trust__client { background: #fff; padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(0,160,253,.10); box-shadow: 0 4px 16px rgba(0,0,0,.04); transition: transform .2s, box-shadow .2s, border-color .2s; text-align: left; } .ir-b2b-trust__client:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: rgba(0,160,253,.25); } .ir-b2b-trust__client-name { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px; color: var(--K, #000); margin-bottom: 4px; } .ir-b2b-trust__client-meta { display: block; font-size: 13px; color: rgba(0,0,0,.55); font-family: 'Montserrat', sans-serif; } /* Foot stats + cta */ .ir-b2b-trust__foot { text-align: center; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.08); padding-top: 36px; } .ir-b2b-trust__stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 24px; } .ir-b2b-trust__stat { display: flex; flex-direction: column; align-items: center; } .ir-b2b-trust__stat-num { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 32px; color: var(--B, #00A0FD); line-height: 1; } .ir-b2b-trust__stat-label { font-size: 13px; color: rgba(0,0,0,.6); margin-top: 4px; } .ir-b2b-trust__cta-note { font-size: 14px; color: rgba(0,0,0,.65); margin: 0; } .ir-b2b-trust__cta-note a { color: var(--B, #00A0FD); text-decoration: none; font-weight: 600; } .ir-b2b-trust__cta-note a:hover { text-decoration: underline; } /* Mobile */ @media (max-width: 600px) { .ir-b2b-trust { padding: 64px 0; } .ir-b2b-trust__stats { gap: 24px; } .ir-b2b-trust__stat-num { font-size: 26px; } } /* ════════════════════════════════════════════════════════════ IR-THEME v5.7, STAD REVIEWS TEASER (stad-context proof) ════════════════════════════════════════════════════════════ */ .ir-stad-reviews-teaser { padding: 32px 0; background: #fff; border-top: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05); } .ir-stad-reviews-teaser__inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 20px; text-align: left; flex-wrap: wrap; justify-content: center; } .ir-stad-reviews-teaser__rating { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ir-stad-reviews-teaser__stars { color: #ffb400; font-size: 18px; letter-spacing: 2px; } .ir-stad-reviews-teaser__num { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--K, #000); } .ir-stad-reviews-teaser__text { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(0,0,0,.72); flex: 1; min-width: 220px; } .ir-stad-reviews-teaser__text strong { color: var(--K, #000); } @media (max-width: 600px) { .ir-stad-reviews-teaser__inner { flex-direction: column; text-align: center; } .ir-stad-reviews-teaser__text { text-align: center; } } /* ════════════════════════════════════════════════════════════ IR-THEME v5.9.2, OVER ONS PAGINA (volledig herzien) ════════════════════════════════════════════════════════════ */ /* Page wrapper */ .ir-about-page { color: var(--K, #000); font-family: 'Montserrat', sans-serif; } .ir-about-page section { padding: var(--space-section) 0; } .ir-about-page section + section { border-top: 1px solid rgba(0, 0, 0, .04); } /* ─── Section eyebrow style (reused across page) ─── */ .ir-about-page .ir-section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--B, #00A0FD); margin-bottom: 14px; } .ir-about-page .ir-section-eyebrow::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--B, #00A0FD); border-radius: 1px; } .ir-about-page .ir-section-eyebrow--light { color: rgba(255, 255, 255, .9); } .ir-about-page .ir-section-eyebrow--light::before { background: rgba(255, 255, 255, .8); } /* ════════════════════════════════════════════════════════════ HERO, dark gradient backdrop, subtle grid overlay ════════════════════════════════════════════════════════════ */ .ir-about-hero { position: relative; background: var(--K, #000); color: #fff; padding: 100px 0 110px; overflow: hidden; isolation: isolate; } .ir-about-hero__bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 160, 253, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 160, 253, .05) 1px, transparent 1px); background-size: 48px 48px; background-position: center center; z-index: -1; opacity: 0.7; } .ir-about-hero::after { content: ''; position: absolute; bottom: -150px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(0, 160, 253, .15) 0%, transparent 70%); z-index: -1; pointer-events: none; } .ir-about-hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } .ir-about-hero__content { position: relative; z-index: 2; } .ir-about-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; background: rgba(0, 160, 253, .12); border: 1px solid rgba(0, 160, 253, .25); border-radius: 100px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--B, #00A0FD); margin-bottom: 24px; } .ir-about-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--B, #00A0FD); animation: ir-pulse-dot 2s infinite; box-shadow: 0 0 0 0 rgba(0, 160, 253, .6); } @keyframes ir-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 160, 253, .6); } 50% { box-shadow: 0 0 0 8px rgba(0, 160, 253, 0); } } .ir-about-hero__h1 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; margin: 0 0 24px; color: #fff; } .ir-about-hero__h1 .blue { color: var(--B, #00A0FD); } .ir-about-hero__lead { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 0 0 36px; max-width: 540px; } .ir-about-hero__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .ir-about-hero__chip { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; min-width: 140px; } .ir-about-hero__chip-icon { font-size: 13px; color: #FFB800; line-height: 1; letter-spacing: 1px; } .ir-about-hero__chip strong { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px; color: #fff; } .ir-about-hero__chip-meta { font-size: 11.5px; color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } /* Hero visual, team foto met badge */ .ir-about-hero__visual { position: relative; } .ir-about-hero__visual-frame { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); transform: rotate(-1deg); transition: transform .4s; } .ir-about-hero__visual-frame:hover { transform: rotate(0deg) scale(1.02); } .ir-about-hero__visual-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; } .ir-about-hero__visual-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .35) 100%); pointer-events: none; } .ir-about-hero__badge { position: absolute; bottom: -28px; left: -28px; background: #fff; color: var(--K, #000); padding: 18px 24px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); text-align: center; transform: rotate(-2deg); transition: transform .3s; } .ir-about-hero__badge:hover { transform: rotate(0deg) scale(1.05); } .ir-about-hero__badge strong { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 32px; line-height: 1; color: var(--B, #00A0FD); } .ir-about-hero__badge span { display: block; font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .65); margin-top: 6px; line-height: 1.35; } /* ════════════════════════════════════════════════════════════ ONS VERHAAL, story + extractie-foto ════════════════════════════════════════════════════════════ */ .ir-about-story { background: var(--W, #fff); } .ir-about-story__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } .ir-about-story__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin: 0 0 28px; color: var(--K, #000); } .ir-about-story__body { font-size: 16px; line-height: 1.75; color: rgba(0, 0, 0, .76); } .ir-about-story__body p { margin: 0 0 18px; } .ir-about-story__body p:last-child { margin-bottom: 0; } .ir-about-story__body strong { color: var(--K, #000); font-weight: 700; } .ir-about-story__lead { font-size: 18px !important; color: rgba(0, 0, 0, .85) !important; padding: 16px 20px; background: rgba(0, 160, 253, .04); border-left: 3px solid var(--B, #00A0FD); border-radius: 6px; margin-bottom: 24px !important; } .ir-about-story__punchline { font-size: 16px !important; padding: 20px 24px; background: var(--K, #000); color: rgba(255, 255, 255, .9) !important; border-radius: 12px; margin-top: 32px !important; } .ir-about-story__punchline strong { color: #fff !important; } /* Story visual */ .ir-about-story__visual { position: sticky; top: 100px; } .ir-about-story__visual-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .08); } .ir-about-story__visual-frame img { display: block; width: 100%; height: auto; } .ir-about-story__caption { margin: 16px 0 0; font-size: 14px; color: rgba(0, 0, 0, .65); text-align: center; font-style: italic; } .ir-about-story__caption strong { font-style: normal; font-weight: 700; color: var(--K, #000); } /* ════════════════════════════════════════════════════════════ ONZE WAARDEN, 4 cards met kleur-accent links ════════════════════════════════════════════════════════════ */ .ir-about-values { background: linear-gradient(180deg, var(--WG, #F5F7FA) 0%, #fff 100%); } .ir-about-values__header { text-align: center; max-width: 640px; margin: 0 auto 56px; } .ir-about-values__header .ir-section-eyebrow { justify-content: center; } .ir-about-values__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 14px; } .ir-about-values__lead { font-size: 16px; color: rgba(0, 0, 0, .65); margin: 0; line-height: 1.6; } .ir-about-values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .ir-about-value-card { position: relative; background: #fff; border-radius: 16px; padding: 32px 28px 28px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 4px 20px rgba(0, 0, 0, .04); transition: transform .3s, box-shadow .3s, border-color .3s; overflow: hidden; } .ir-about-value-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--B, #00A0FD); transition: width .3s; } .ir-about-value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, .1); } .ir-about-value-card:hover::before { width: 100%; opacity: 0.04; } .ir-about-value-card--blue::before { background: #00A0FD; } .ir-about-value-card--green::before { background: #15803d; } .ir-about-value-card--leaf::before { background: #65a30d; } .ir-about-value-card--gold::before { background: #d97706; } .ir-about-value-card__icon { font-size: 36px; margin-bottom: 16px; line-height: 1; } .ir-about-value-card__title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 19px; margin: 0 0 12px; color: var(--K, #000); } .ir-about-value-card__desc { font-size: 14.5px; line-height: 1.65; color: rgba(0, 0, 0, .68); margin: 0; } /* ════════════════════════════════════════════════════════════ TIMELINE, verticaal met geanimeerde marker ════════════════════════════════════════════════════════════ */ .ir-about-timeline { background: #fff; } .ir-about-timeline__header { text-align: center; margin-bottom: 56px; } .ir-about-timeline__header .ir-section-eyebrow { justify-content: center; } .ir-about-timeline__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); margin: 0; } .ir-about-timeline__list { list-style: none; padding: 0; margin: 0; max-width: 760px; margin: 0 auto; position: relative; } .ir-about-timeline__list::before { content: ''; position: absolute; left: 23px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, var(--B, #00A0FD), rgba(0, 160, 253, .15)); z-index: 0; } .ir-about-timeline__item { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 0 0 32px; position: relative; z-index: 1; } .ir-about-timeline__item:last-child { padding-bottom: 0; } .ir-about-timeline__marker { width: 48px; height: 48px; border-radius: 50%; background: var(--B, #00A0FD); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; box-shadow: 0 4px 16px rgba(0, 160, 253, .35); position: relative; z-index: 2; } .ir-about-timeline__marker--last { background: #15803d; box-shadow: 0 4px 16px rgba(21, 128, 61, .35); } .ir-about-timeline__num { display: block; line-height: 1; } .ir-about-timeline__content { background: var(--WG, #F5F7FA); border-radius: 14px; padding: 20px 24px; border: 1px solid rgba(0, 0, 0, .04); transition: transform .2s, box-shadow .2s; } .ir-about-timeline__item:hover .ir-about-timeline__content { transform: translateX(4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); } .ir-about-timeline__content h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--K, #000); } .ir-about-timeline__content p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(0, 0, 0, .7); } /* ════════════════════════════════════════════════════════════ B2B BANNER, dark, prominent ════════════════════════════════════════════════════════════ */ .ir-about-b2b { background: var(--K, #000); color: #fff; position: relative; overflow: hidden; } .ir-about-b2b::before { content: ''; position: absolute; top: -100px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 160, 253, .12) 0%, transparent 70%); pointer-events: none; } .ir-about-b2b::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 160, 253, .08) 0%, transparent 70%); pointer-events: none; } .ir-about-b2b__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; } .ir-about-b2b__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 16px; color: #fff; } .ir-about-b2b__lead { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); margin: 0 0 32px; max-width: 620px; margin-left: auto; margin-right: auto; } .ir-about-b2b__lead strong { color: #fff; font-weight: 700; } .ir-about-b2b__clients { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ir-about-b2b__clients li { display: inline-block; padding: 8px 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 100px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .9); transition: background .2s, transform .2s; } .ir-about-b2b__clients li:hover { background: rgba(0, 160, 253, .15); transform: translateY(-2px); } .ir-about-b2b__cta { font-size: 15px; padding: 14px 32px; } /* ════════════════════════════════════════════════════════════ BEDRIJFSGEGEVENS + CERTIFICERINGEN, 2 cards ════════════════════════════════════════════════════════════ */ .ir-about-info { background: var(--WG, #F5F7FA); } .ir-about-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 960px; margin: 0 auto; } .ir-about-info-card { background: #fff; border-radius: 16px; padding: 32px; border: 1px solid rgba(0, 0, 0, .05); box-shadow: 0 4px 20px rgba(0, 0, 0, .04); } .ir-about-info-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 0, 0, .06); } .ir-about-info-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0, 160, 253, .1); border-radius: 10px; font-size: 20px; color: var(--B, #00A0FD); } .ir-about-info-card--certifications .ir-about-info-card__icon { background: rgba(21, 128, 61, .1); color: #15803d; } .ir-about-info-card__head h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; margin: 0; color: var(--K, #000); } .ir-about-info-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .ir-about-info-card__list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; font-size: 14.5px; line-height: 1.55; align-items: start; } .ir-about-info-card__label { font-weight: 700; color: rgba(0, 0, 0, .55); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11.5px; padding-top: 3px; } .ir-about-info-card__list a { color: var(--B, #00A0FD); text-decoration: none; border-bottom: 1px solid currentColor; } .ir-about-info-card__list a:hover { opacity: 0.7; } /* Certifications list, anders dan info-card list */ .ir-about-cert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .ir-about-cert-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: rgba(21, 128, 61, .04); border-left: 3px solid #15803d; border-radius: 6px; } .ir-about-cert-list li strong { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; color: var(--K, #000); } .ir-about-cert-list li span { font-size: 13px; color: rgba(0, 0, 0, .6); } /* ════════════════════════════════════════════════════════════ CLOSING CTA ════════════════════════════════════════════════════════════ */ .ir-about-cta { background: linear-gradient(135deg, var(--B, #00A0FD) 0%, #0080cc 100%); color: #fff; text-align: center; position: relative; overflow: hidden; } .ir-about-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .1) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, .08) 0%, transparent 40%); pointer-events: none; } .ir-about-cta__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .ir-about-cta__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; color: #fff; } .ir-about-cta__lead { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0 0 32px; } .ir-about-cta__buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .ir-about-cta__btn { min-width: 200px; } .ir-about-cta .btn-primary { background: #fff; color: var(--B, #00A0FD); } .ir-about-cta .btn-primary:hover { background: rgba(255, 255, 255, .9); color: var(--B, #00A0FD); } .ir-about-cta .btn-secondary { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); } .ir-about-cta .btn-secondary:hover { background: rgba(255, 255, 255, .2); color: #fff; } /* ════════════════════════════════════════════════════════════ RESPONSIVE, Tablet en mobile ════════════════════════════════════════════════════════════ */ @media (max-width: 980px) { .ir-about-page section { padding: 64px 0; } .ir-about-hero { padding: 72px 0 80px; } .ir-about-hero__inner { grid-template-columns: 1fr; gap: 48px; } .ir-about-hero__visual { max-width: 380px; margin: 0 auto; } .ir-about-hero__badge { left: auto; right: -20px; bottom: -20px; } .ir-about-story__inner { grid-template-columns: 1fr; gap: 48px; } .ir-about-story__visual { position: static; max-width: 420px; margin: 0 auto; } .ir-about-info__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .ir-about-page section { padding: var(--space-section-sm) 0; } .ir-about-hero__chips { flex-direction: column; gap: 8px; } .ir-about-hero__chip { width: 100%; } .ir-about-value-card { padding: 24px 22px; } .ir-about-timeline__list::before { left: 18px; } .ir-about-timeline__item { grid-template-columns: 36px 1fr; gap: 16px; } .ir-about-timeline__marker { width: 36px; height: 36px; font-size: 16px; } .ir-about-timeline__content { padding: 16px 18px; } .ir-about-info-card { padding: 24px 22px; } .ir-about-info-card__list li { grid-template-columns: 1fr; gap: 4px; } .ir-about-cta__buttons { flex-direction: column; } .ir-about-cta__btn { width: 100%; } } /* ════════════════════════════════════════════════════════════ IR-THEME v6, ZETEL BEHANDELINGEN (Standaard / Hygiëne+ / Vlek) Vervangt oude ir-wc-geur sectie. Sluit aan op WC variation-attribuut "Type behandeling" hierboven in de configurator. ════════════════════════════════════════════════════════════ */ .ir-wc-behandelingen { padding: var(--space-section-sm) 0; background: #fff; position: relative; } .ir-wc-behandelingen::before { content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--B, #00A0FD); border-radius: 2px; } /* Header */ .ir-wc-behandelingen__header { text-align: center; max-width: 760px; margin: 0 auto 48px; } .ir-wc-behandelingen__title { margin: 8px 0 20px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; font-family: 'Baloo 2', sans-serif; font-weight: 800; text-wrap: balance; } .ir-wc-behandelingen__title-accent { color: var(--B, #00A0FD); font-weight: 700; } .ir-wc-behandelingen__intro { font-size: 16px; line-height: 1.7; color: rgba(0,0,0,.78); margin: 0; } .ir-wc-behandelingen__intro strong { color: var(--K, #000); } /* Two cards layout */ .ir-wc-behandelingen__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin: 0 auto 32px; } /* v1.16.3: drie pakketten (Essentieel / Comfort & Protect / Bio-Enzym) naast elkaar */ .ir-wc-behandelingen__cards--3 { grid-template-columns: repeat(3, 1fr); max-width: 1140px; gap: 20px; } @media (max-width: 1024px) { .ir-wc-behandelingen__cards--3 { grid-template-columns: 1fr; max-width: 560px; } } @media (max-width: 760px) { .ir-wc-behandelingen__cards { grid-template-columns: 1fr; } } .ir-wc-behand-card { background: #fff; border-radius: var(--r-lg, 20px); padding: 28px 28px 24px; border: 2px solid rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 20px; position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; } .ir-wc-behand-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); } .ir-wc-behand-card--essentieel { border-color: rgba(0,0,0,.10); } .ir-wc-behand-card--essentieel:hover { border-color: rgba(0,0,0,.22); } .ir-wc-behand-card--comfort { border-color: var(--B, #00A0FD); background: linear-gradient(180deg, #f2f9ff 0%, #fff 60%); } /* v1.16.3: Bio-Enzym-kaart in zwart (merkpalet zwart/wit/blauw), badge "Terugkomgarantie" */ .ir-wc-behand-card--bioenzym { border-color: var(--K, #000); } .ir-wc-behand-card--bioenzym::after { content: 'Terugkomgarantie'; position: absolute; top: -11px; right: 20px; background: var(--K, #000); color: #fff; font-family: var(--mono, 'Montserrat', sans-serif); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.22); } .ir-wc-behand-card--bioenzym .ir-wc-behand-card__eyebrow { color: var(--K, #000); } .ir-wc-behand-card--bioenzym .ir-wc-behand-card__price { color: var(--K, #000); } .ir-wc-behand-card--bioenzym .ir-wc-behand-card__when li::before { color: var(--K, #000); } .ir-wc-behand-card--bioenzym .ir-wc-behand-card__note { background: rgba(0,0,0,.05); border-left-color: var(--K, #000); } .ir-wc-behand-card--bioenzym .ir-wc-behand-card__note strong { color: var(--K, #000); } /* "Aanbevolen" hint op de Comfort & Protect-kaart, subtiel binnen het blauwe systeem */ .ir-wc-behand-card--comfort::after { content: 'Aanbevolen'; position: absolute; top: -11px; right: 20px; background: var(--B, #00A0FD); color: #fff; font-family: var(--mono, 'Montserrat', sans-serif); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,160,253,.30); } .ir-wc-behand-card__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,.08); } .ir-wc-behand-card__eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(0,0,0,.55); } .ir-wc-behand-card--essentieel .ir-wc-behand-card__eyebrow { color: rgba(0,0,0,.55); } .ir-wc-behand-card--comfort .ir-wc-behand-card__eyebrow { color: var(--B, #00A0FD); } .ir-wc-behand-card__name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; margin: 4px 0 0; color: var(--K, #000); line-height: 1.1; } .ir-wc-behand-card__tagline { font-size: 14px; color: rgba(0,0,0,.6); margin-top: 2px; } /* Price block */ .ir-wc-behand-card__price-block { display: flex; flex-direction: column; gap: 2px; } .ir-wc-behand-card__price-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: rgba(0,0,0,.55); } .ir-wc-behand-card__price { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.1; color: var(--K, #000); } .ir-wc-behand-card--essentieel .ir-wc-behand-card__price { color: var(--K, #000); } .ir-wc-behand-card--comfort .ir-wc-behand-card__price { color: var(--B, #00A0FD); } .ir-wc-behand-card__price-meta { font-size: 13px; color: rgba(0,0,0,.6); margin-top: 2px; } .ir-wc-behand-card__desc { font-size: 15px; line-height: 1.6; color: rgba(0,0,0,.78); margin: 0; } /* When-list */ .ir-wc-behand-card__when { font-size: 14px; } .ir-wc-behand-card__when strong { display: block; margin-bottom: 8px; color: var(--K, #000); font-weight: 700; } .ir-wc-behand-card__when ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .ir-wc-behand-card__when li { font-size: 13.5px; line-height: 1.5; color: rgba(0,0,0,.7); padding-left: 20px; position: relative; } .ir-wc-behand-card__when li::before { content: '→'; position: absolute; left: 0; font-weight: 700; } .ir-wc-behand-card--essentieel .ir-wc-behand-card__when li::before { color: var(--B, #00A0FD); } .ir-wc-behand-card--comfort .ir-wc-behand-card__when li::before { color: var(--B, #00A0FD); } /* Note onderaan plus-card */ .ir-wc-behand-card__note { background: var(--B10, rgba(0,160,253,.10)); border-left: 3px solid var(--B, #00A0FD); padding: 12px 14px; border-radius: 4px; font-size: 12.5px; line-height: 1.55; color: rgba(0,0,0,.78); margin-top: auto; } .ir-wc-behand-card__note strong { color: #007ACC; } /* ──── VLEK BLOK (apart, onder de twee cards) ──── */ .ir-wc-behand-vlek { max-width: 960px; margin: 0 auto 48px; background: var(--B10, #eff6ff); border: 2px solid var(--B20, rgba(0,160,253,.2)); border-radius: var(--r-lg, 20px); padding: 24px 28px; } .ir-wc-behand-vlek__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; } @media (max-width: 760px) { .ir-wc-behand-vlek__inner { grid-template-columns: 1fr; gap: 16px; text-align: center; } } .ir-wc-behand-vlek__icon { font-size: 40px; line-height: 1; } .ir-wc-behand-vlek__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; margin: 0 0 6px; color: var(--K, #000); } .ir-wc-behand-vlek__desc { font-size: 14.5px; line-height: 1.55; color: rgba(0,0,0,.72); margin: 0 0 10px; } .ir-wc-behand-vlek__price { margin: 0; font-size: 14px; color: rgba(0,0,0,.78); } .ir-wc-behand-vlek__price strong { color: var(--B, #00A0FD); font-weight: 700; } .ir-wc-behand-vlek__price-alt { display: inline-block; margin-left: 4px; color: rgba(0,0,0,.55); font-size: 13px; } .ir-wc-behand-vlek__cta { white-space: nowrap; } /* ──── How it works (3 stappen) ──── */ .ir-wc-behandelingen__how { max-width: 760px; margin: 0 auto 40px; } .ir-wc-behandelingen__subtitle { text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 28px; color: var(--K, #000); } .ir-wc-behandelingen__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .ir-wc-behandelingen__step { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--r, 14px); padding: 20px 24px; box-shadow: var(--sh, 0 4px 24px rgba(0,0,0,.07)); } .ir-wc-behandelingen__step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--B10, rgba(0,160,253,.10)); color: var(--B, #00A0FD); display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; } .ir-wc-behandelingen__step-body { flex: 1; } .ir-wc-behandelingen__step-title { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; color: var(--K, #000); margin-bottom: 4px; } .ir-wc-behandelingen__step-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(0,0,0,.72); } /* ──── Limitations (collapsible) ──── */ .ir-wc-behandelingen__limitations { max-width: 760px; margin: 0 auto 40px; background: #fff; border: 1px dashed rgba(0,0,0,.18); border-radius: 10px; padding: 14px 20px; } .ir-wc-behandelingen__limitations summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.72); list-style: none; } .ir-wc-behandelingen__limitations summary::-webkit-details-marker { display: none; } .ir-wc-behandelingen__limitations-icon { color: rgba(0,0,0,.5); font-size: 16px; } .ir-wc-behandelingen__limitations-toggle { margin-left: auto; color: var(--B, #00A0FD); font-size: 18px; font-weight: 700; transition: transform .2s; } .ir-wc-behandelingen__limitations[open] .ir-wc-behandelingen__limitations-toggle { transform: rotate(45deg); } .ir-wc-behandelingen__limitations-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); } .ir-wc-behandelingen__limitations-body ul { margin: 0 0 14px; padding-left: 20px; } .ir-wc-behandelingen__limitations-body li { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.7); margin-bottom: 6px; } .ir-wc-behandelingen__limitations-note { font-size: 14px; color: rgba(0,0,0,.78); margin: 0; padding: 12px 14px; background: var(--B10, rgba(0,160,253,.10)); border-left: 3px solid var(--B, #00A0FD); border-radius: 4px; } /* ──── CTA ──── */ .ir-wc-behandelingen__cta { text-align: center; background: #fff; padding: 28px 24px; border-radius: 12px; border: 1px solid rgba(0,0,0,.06); max-width: 820px; margin: 0 auto; } .ir-wc-behandelingen__cta p { margin: 0 0 18px; font-size: 15px; color: rgba(0,0,0,.72); } .ir-wc-behandelingen__cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .ir-wc-behandelingen__cta-btn { background: var(--B, #00A0FD); color: #fff; box-shadow: var(--sh-b, 0 8px 32px rgba(0,160,253,.28)); } .ir-wc-behandelingen__cta-btn:hover { background: #007ACC; color: #fff; } /* Secundaire CTA staat op een WITTE kaart, dus donkere outline i.p.v. de witte btn-secondary (die zou onzichtbaar zijn op wit). */ .ir-wc-behandelingen__cta-btn-alt { background: #fff; color: var(--K, #000); border: 1.5px solid rgba(0,0,0,.15); } .ir-wc-behandelingen__cta-btn-alt:hover { border-color: var(--B, #00A0FD); color: var(--B, #00A0FD); background: var(--B10, rgba(0,160,253,.06)); } /* ──── Mobile tweaks ──── */ @media (max-width: 600px) { .ir-wc-behandelingen { padding: var(--space-section-sm) 0; } .ir-wc-behand-card { padding: 22px 20px; } .ir-wc-behand-card__name { font-size: 24px; } .ir-wc-behand-card__price { font-size: 30px; } .ir-wc-behand-vlek { padding: 20px; } .ir-wc-behandelingen__step { padding: 16px; gap: 14px; } .ir-wc-behandelingen__step-num { width: 32px; height: 32px; font-size: 16px; } .ir-wc-behandelingen__cta-actions { flex-direction: column; } .ir-wc-behandelingen__cta-actions .btn { width: 100%; } } /* ════════════════════════════════════════════════════════════ IR-THEME v6, MOBILE CONVERSIE-OPTIMALISATIES (productpagina) Doel: klant minder scrollen vóór hij bij de configurator komt + altijd bereikbare CTA via sticky bottom bar. ════════════════════════════════════════════════════════════ */ /* === Order flip op mobile: configurator boven, intro-tekst eronder === */ @media (max-width: 1024px) { /* Hero grid: zorg dat booking-box visueel BOVEN intro komt op mobile */ .ir-wc-hero__grid { display: flex; flex-direction: column; } .ir-wc-hero__grid .ir-wc-booking { order: 1; } .ir-wc-hero__grid .ir-wc-hero__intro { order: 2; } /* Maak hero compact op mobile zodat configurator sneller zichtbaar is */ .ir-wc-hero { padding: 24px 0 40px; } .ir-wc-hero__intro { /* Onder de booking-box volstaat een compactere intro */ padding-top: 12px; } /* H1 iets kleiner op mobile zodat de booking-box hoger komt */ .ir-wc-hero__h1 { font-size: 28px; margin-top: 8px; } /* Discount eyebrow + lead onbelangrijker visueel op mobile */ .ir-wc-hero__lead { font-size: 15px; margin: 8px 0 16px; } /* Benefits-list compact */ .ir-wc-hero__benefits { margin: 12px 0; } .ir-wc-hero__benefits li { padding: 6px 0; font-size: 14px; } } @media (max-width: 640px) { .ir-wc-hero__h1 { font-size: 26px; line-height: 1.15; } .ir-wc-hero__subtitle { font-size: 15px; } /* Trust-row chips wrappen netjes */ .ir-wc-hero__trust-row { gap: 6px; } .ir-wc-hero__trust-chip { font-size: 12px; padding: 4px 10px; } } /* === Mobile configurator UX-verbetering === */ @media (max-width: 760px) { /* WC variation dropdowns groter en duimvriendelijker */ .ir-wc-booking--wa-mode .variations select { min-height: 48px; font-size: 16px; /* voorkomt iOS zoom-in */ padding: 10px 14px; } /* Variation table-rows als gestapelde labels boven dropdowns op mobile */ .ir-wc-booking--wa-mode .variations tr { display: block; margin-bottom: 12px; } .ir-wc-booking--wa-mode .variations th, .ir-wc-booking--wa-mode .variations td { display: block; padding: 0; } .ir-wc-booking--wa-mode .variations th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(0,0,0,.65); margin-bottom: 4px; } /* WhatsApp boek-btn groter op mobile */ .ir-wa-book-btn { padding: 14px 18px; font-size: 15px; min-height: 56px; } } /* ═══════════════════════════════════════ v6.1, CONCURRENTIE-DIFFERENTIATIE & ONDERNEMERS ═══════════════════════════════════════ */ /* --- Niet elke reiniging is hetzelfde --- */ .ir-wc-compare { padding: 60px 0; background: var(--WG, #F5F7FA); } .ir-wc-compare h2 { font-family: var(--font-head); font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1.15; margin: 6px 0 18px; } .ir-compare__accent { color: var(--B); } .ir-wc-compare__intro { max-width: 760px; font-size: 17px; color: rgba(0,0,0,.78); margin: 0 0 32px; } .ir-wc-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; } @media (max-width: 700px) { .ir-wc-compare__grid { grid-template-columns: 1fr; } } .ir-compare-card { background: #fff; border-radius: var(--r, 14px); padding: 28px 24px; border: 1px solid var(--WGD, #EAEEF3); } .ir-compare-card h3 { font-family: var(--font); font-size: 20px; font-weight: 700; margin: 0 0 16px; } .ir-compare-card ul { list-style: none; padding: 0; margin: 0; } .ir-compare-card li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid var(--WGD, #EAEEF3); font-size: 15px; color: rgba(0,0,0,.82); } .ir-compare-card li:first-child { border-top: 0; } .ir-compare-card--cheap h3 { color: rgba(0,0,0,.70); } .ir-compare-card--cheap li::before { content: "\2715"; position: absolute; left: 0; color: #DC2626; font-weight: 700; } .ir-compare-card--ours { border-color: var(--B40, rgba(0,160,253,.4)); box-shadow: var(--sh, 0 4px 24px rgba(0,0,0,.07)); } .ir-compare-card--ours h3 { color: var(--B); } .ir-compare-card--ours li::before { content: "\2713"; position: absolute; left: 0; color: var(--B); font-weight: 700; } .ir-wc-compare__foot { max-width: 760px; margin: 28px 0 0; font-size: 16px; font-weight: 600; color: rgba(0,0,0,.85); } /* --- Voor ondernemers --- */ .ir-wc-ondernemers { padding: 60px 0; background: #fff; } .ir-ondernemers-panel { max-width: 960px; margin: 0 auto; background: linear-gradient(135deg, var(--B10, rgba(0,160,253,.10)), var(--WG, #F5F7FA)); border: 1px solid var(--B20, rgba(0,160,253,.2)); border-radius: var(--r-lg, 20px); padding: 40px; } @media (max-width: 700px) { .ir-ondernemers-panel { padding: 28px 22px; } } .ir-wc-ondernemers h2 { font-family: var(--font-head); font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; margin: 6px 0 14px; } .ir-wc-ondernemers__intro { max-width: 680px; font-size: 16px; color: rgba(0,0,0,.78); margin: 0 0 20px; } .ir-ondernemers-panel__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; } .ir-ondernemers-panel__list li { position: relative; padding-left: 28px; font-size: 15px; color: rgba(0,0,0,.84); } .ir-ondernemers-panel__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--B); font-weight: 700; } .ir-ondernemers-panel__cta { display: inline-block; background: var(--WA, #25D366); color: #fff; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 999px; box-shadow: 0 8px 24px rgba(37,211,102,.3); } .ir-ondernemers-panel__cta:hover { filter: brightness(1.05); } .ir-ondernemers-panel__fineprint { margin: 14px 0 0; font-size: 13px; color: rgba(0,0,0,.55); } /* #1: online boeken primair, WhatsApp als kleine secundaire vraag-link */ .ir-wa-question { margin: 12px 0 0; text-align: center; } .ir-wa-question__link { font-size: 14px; color: #128C7E; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; justify-content: center; } .ir-wa-question__link:hover { text-decoration: underline; } /* Mobiel: voorkom iOS-zoom op block-cart/checkout-velden (minimaal 16px). */ .wc-block-components-text-input input, .wc-block-components-text-input .components-text-control__input, .wc-block-checkout__form input, .wc-block-components-address-form input, .wc-block-components-totals-coupon__input input, .wc-block-components-quantity-selector__input__input { font-size: 16px; } /* ═══════════════════════════════════════════════════════════════════════ CRO OVERRIDES v1.1 — additief blok, laatst in bronvolgorde. Bevat: (1) contrastfix lichtblauwe tekst, (2) VOOR/NA hero-bewijsfoto, (3) reassurance-microcopy onder de boekknop, (4) zwevende mobiele boek-balk. Verwijder dit hele blok om alle CRO-wijzigingen terug te draaien. ═══════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } #boek-titel { scroll-margin-top: 96px; } /* (1) Contrastfix: lichtblauwe tekst op wit haalde ~2,9:1 (< WCAG AA 4,5:1). v1.13.0: #0061A8 volledig vervangen door --ir-ink (Document 1 §A2b). */ .ir-wc-hero__subtitle { color: var(--ir-ink, #0f2233); } .ir-wc-hero__geurlink a { color: var(--ir-ink, #0f2233); } /* (2) VOOR/NA bewijsfoto in de hero */ .ir-ba-hero { margin: 0 0 22px; } .ir-ba-hero__frame { position: relative; border-radius: var(--r, 14px); overflow: hidden; box-shadow: var(--sh, 0 4px 24px rgba(0,0,0,.07)); line-height: 0; } .ir-ba-hero__frame img { width: 100%; height: auto; display: block; } .ir-ba-hero__tag { position: absolute; bottom: 12px; font-family: var(--mono, 'Montserrat', sans-serif); font-weight: 700; font-size: 12px; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; color: #fff; } .ir-ba-hero__tag--before { left: 12px; background: rgba(0,0,0,.68); } .ir-ba-hero__tag--after { right: 12px; background: var(--B, #00A0FD); } .ir-ba-hero__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: rgba(255,255,255,.85); } .ir-ba-hero__caption { margin: 8px 2px 0; font-size: 13px; line-height: 1.45; color: #5A6473; font-family: var(--mono, 'Montserrat', sans-serif); } /* (3) v1.12.1: standout "alles inbegrepen"-blok + linnen/viscose-waarschuwing. Beide staan BOVEN het variatieformulier: de Route66-picker injecteert de hele boekflow (adres → tijdslot → CTA) ín dat formulier, dus alles erná belandt onder de boekknop — daar is een stofwaarschuwing nutteloos (klant heeft dan al geboekt). De oude .ir-wc-booking__reassure microcopy is vervallen; de "betaal ná"-boodschap komt bewust enkel nog uit de picker zelf, om de herhaling niet te heropvoeren. */ /* Kleine rode notificatie: stoffen die we niet reinigen (linnen/viscose). */ .ir-wc-booking__fabric-alert { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 11px; border: 1px solid rgba(214,45,45,.28); border-left: 3px solid #D62D2D; border-radius: 8px; background: rgba(214,45,45,.05); font-family: var(--mono, 'Montserrat', sans-serif); font-size: 12.5px; line-height: 1.45; font-weight: 600; color: #8E1B1B; } .ir-wc-booking__fabric-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #D62D2D; } .ir-wc-booking__fabric-alert a { color: #B01F1F; text-decoration: underline; } .ir-wc-booking__fabric-alert a:hover { color: #8E1B1B; } /* Standout "alles inbegrepen"-blok. Het accent staat als variabele: één regel volstaat om naar het blauwe huissysteem te switchen (--ir-incl-accent: var(--B)). */ .ir-wc-booking__incl { --ir-incl-accent: #F5A623; margin: 12px 0 0; padding: 13px 15px; border: 1px solid rgba(245,166,35,.42); border-radius: var(--r, 14px); background: linear-gradient(180deg, rgba(245,166,35,.14), rgba(245,166,35,.07)); } .ir-wc-booking__incl-title { display: block; margin-bottom: 8px; font-family: var(--mono, 'Montserrat', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6B4A05; } .ir-wc-booking__incl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; } .ir-wc-booking__incl-list li { position: relative; padding-left: 20px; font-family: var(--mono, 'Montserrat', sans-serif); font-size: 13px; line-height: 1.45; font-weight: 600; color: #4A3403; } .ir-wc-booking__incl-list li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--ir-incl-accent); } .ir-wc-booking__incl-list strong { font-weight: 800; color: #2E2101; } /* Mobiel: compacter zodat de boekkolom licht blijft (klantfeedback 14/07) */ @media (max-width: 600px) { .ir-wc-booking__incl { padding: 11px 13px; } .ir-wc-booking__incl-list li { font-size: 12.5px; } .ir-wc-booking__fabric-alert { font-size: 12px; } } /* (4) v1.13.1: de zwevende mobiele boek-balk (.ir-cro-stickybar) is VERWIJDERD — ze botste op mobiel met de WhatsApp-float, de AI-bol en de echte boek-CTA. */ /* ═══════════════════════════════════════════════════════════════════════ ZWEVENDE WIDGETS, overlap-fix (Document 1 §D1/D2) De AI-bol (sg-ai-studio) en de Cookiebot-pill overlapten de footer-links. We geven de onderkant ademruimte zodat de zwevende hoek-widgets geen klikbare links meer afdekken. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { .ir-footer { padding-bottom: 96px; } } /* v1.15.0 (STAGING, Task 5): cookiewidget (bekend id) onder de CTA's/nav houden, zodat de pill nooit de boek-CTA of nav overlapt. Blijft ruim boven page-content (z-index 400) en dus bereikbaar, maar onder de WhatsApp-float (500) en nav-lagen. */ #CookiebotWidget { z-index: 400 !important; } /* (5) ECO-teaser bovenaan de boekbox — v1.11.1: vollere groene band die opvalt én mee vloeit met de gekleurde banden (korting + kop) eronder. Full-bleed (geen marge/radius): de box-overflow rondt de bovenhoeken af. */ .ir-wc-booking__eco{ display:flex; align-items:center; gap:10px; margin:0; padding:12px 20px; background:linear-gradient(135deg, #17B368 0%, #0E8E5A 100%); border:0; border-radius:0; font-family:var(--mono,'Montserrat',sans-serif); font-size:13.5px; line-height:1.4; font-weight:600; color:#fff; } .ir-wc-booking__eco-icon{ font-size:18px; line-height:1.2; filter:brightness(0) invert(1); } .ir-wc-booking__eco-text{ color:#fff; } .ir-wc-booking__eco-text strong{ color:#fff; font-weight:800; } /* (6) Live prijs-anchor in de boekbox (CRO v1.1) */ .ir-wc-booking__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--K10, rgba(0,0,0,.1)); } /* v1.12.4: statische prijsindicatie (geen live spiegel meer). "vanaf €149" is de kleine ingangsprijs; het prijsbereik is de nadruk (realistische verwachting). */ .ir-wc-booking__price{ display:flex; flex-direction:column; gap:3px; } .ir-wc-booking__price-lbl{ font-family:var(--mono,'Montserrat',sans-serif); font-size:12px; font-weight:700; color:#5A6473; text-transform:uppercase; letter-spacing:.04em; } .ir-wc-booking__price-range{ font-family:var(--font,'Baloo 2',sans-serif); font-weight:800; font-size:22px; line-height:1.15; color:var(--K,#000); } .ir-wc-booking__price-note{ font-family:var(--mono,'Montserrat',sans-serif); font-size:12px; line-height:1.4; color:#5A6473; } /* v1.12.4: klikbare review-proof bij de CTA → scrollt naar de echte reviews. */ a.ir-wc-booking__head-trust{ text-decoration:none; display:flex; flex-direction:column; align-items:flex-end; gap:1px; } .ir-wc-booking__head-reviews{ font-family:var(--mono,'Montserrat',sans-serif); font-size:11px; font-weight:700; color:var(--B,#00A0FD); white-space:nowrap; } a.ir-wc-booking__head-trust:hover .ir-wc-booking__head-reviews{ text-decoration:underline; } /* v1.13.2 (klantfeedback 19/07): native WC-variatieprijs TERUG ZICHTBAAR. De klant ziet de exacte, vaste prijs nu meteen onder de 3 keuzes (Type zetel/kussens/ behandeling), vóór het adres. WooCommerce's eigen variation.js vult ".price" in zodra alle 3 gekozen zijn (geen custom mirror → geen lag). De picker toont ná het adres dezelfde basisprijs (+ eco-korting bij een voorkeurmoment). De "Op voorraad"- melding blijft verborgen (betekenisloos voor een dienst). */ .ir-wc-booking .woocommerce-variation-availability { display: none !important; } .ir-wc-booking__price-note{ flex:1 1 100%; font-family:var(--mono,'Montserrat',sans-serif); font-size:12px; color:#5A6473; } /* ═══════════════════════════════════════════════════════════════════════ v6.1 SMOOTHING, consistent sectie-ritme (productpagina) Eén bron voor de verticale sectie-padding zodat alle ir-wc-secties hetzelfde ademende ritme delen (voorheen mix van 60/80px). Longhand (padding-top/bottom) zodat de horizontale padding 0 intact blijft. ═══════════════════════════════════════════════════════════════════════ */ .ir-wc-method, .ir-wc-compare, .ir-wc-extraction, .ir-wc-myth, .ir-wc-behandelingen, .ir-wc-results, .ir-wc-team, .ir-wc-reviews, .ir-wc-incl, .ir-wc-ondernemers, .ir-wc-faq, .ir-wc-final-cta { padding-top: var(--sec-pad, 84px); padding-bottom: var(--sec-pad, 84px); } @media (max-width: 600px) { .ir-wc-method, .ir-wc-compare, .ir-wc-extraction, .ir-wc-myth, .ir-wc-behandelingen, .ir-wc-results, .ir-wc-team, .ir-wc-reviews, .ir-wc-incl, .ir-wc-ondernemers, .ir-wc-faq, .ir-wc-final-cta { padding-top: var(--sec-pad-sm, 56px); padding-bottom: var(--sec-pad-sm, 56px); } } /* v6.1 SMOOTHING, gebalanceerde koppen: voorkomt lelijke wees-woorden (één woord op de laatste regel) bij alle sectiekoppen op de productpagina. */ .ir-wc-method h2, .ir-wc-compare h2, .ir-wc-extraction h2, .ir-wc-results h2, .ir-wc-team h2, .ir-wc-reviews h2, .ir-wc-ondernemers h2, .ir-wc-faq h2, .ir-wc-final-cta h2, .ir-wc-behandelingen__intro, .ir-wc-results__intro, .ir-wc-faq__intro { text-wrap: balance; } /* v6.1 SMOOTHING, inbegrepen/niet-inbegrepen iconen erven de kop-kleur (blauw = wél, rood = niet) i.p.v. losse groene/gele emoji. */ .ir-incl-card__icon { font-weight: 800; margin-right: 4px; font-size: .92em; } /* ═══════════════════════════════════════════════════════════════════════ v6.1 SMOOTHING, mobiel-polish (productpagina) Fijnere afwerking voor telefoon-gebruik: minder verspilde breedte in kaarten, een compactere trust-ribbon en rustiger sectie-intro's. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* Kaarten benutten de smalle schermbreedte beter (minder side-padding) */ .ir-compare-card { padding: 22px 18px; } .ir-wc-incl .ir-incl-card { padding: 22px 18px; } .ir-method-card { padding: 20px 16px; } .ir-ondernemers-panel { padding: 26px 20px; } /* Sectie-intro's iets rustiger op mobiel */ .ir-wc-compare__intro, .ir-wc-ondernemers__intro, .ir-wc-behandelingen__intro { font-size: 15px; } /* Voor/na-slider houdt een prettige hoogte op smalle schermen */ .ir-ba { aspect-ratio: 4 / 3; } } /* ═══════════════════════════════════════════════════════════════════════ v1.17.0 HERSTRUCTURERING (22/09/2026): mobiel eerst, minder tekst, Eco-voordeel in de kijker. Palet: zwart / wit / fel blauw; groen UITSLUITEND voor Eco. ═══════════════════════════════════════════════════════════════════════ */ /* ── Gedeeld: horizontaal veegbare rij op gsm ───────────────────────── */ @media (max-width: 760px) { .ir-swipe { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 4px 20px 14px; scrollbar-width: none; } .ir-swipe::-webkit-scrollbar { display: none; } .ir-swipe > * { flex: 0 0 82%; scroll-snap-align: start; } } /* ── Homepage hero ───────────────────────────────────────────────────── */ .ir-hero__eyebrow { text-transform: none; letter-spacing: .02em; font-size: 13px; } .ir-hero__slogan { margin-bottom: 18px; } .ir-hero__title { font-family: var(--font-head); font-weight: 800; color: var(--W); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px; max-width: 520px; } .ir-hero__sub { margin-bottom: 22px; } .ir-hero__eco { display: inline-flex; align-items: center; gap: 10px; max-width: 480px; background: linear-gradient(135deg, #17B368 0%, #0E8E5A 100%); color: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; font-size: 15px; line-height: 1.4; text-decoration: none; box-shadow: 0 8px 24px rgba(23,179,104,.28); transition: transform .2s; } .ir-hero__eco:hover { transform: translateY(-1px); } .ir-hero__eco strong { color: #fff; } .ir-hero__eco-leaf { font-size: 20px; } .ir-hero__eco-arrow { margin-left: auto; font-weight: 800; } .ir-hero__ctas { margin-bottom: 28px; } .ir-hero__cta-main { font-size: 18px; padding: 18px 36px; } .ir-hero__wa-link { color: var(--c-hero-text); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; } .ir-hero__wa-link:hover { color: var(--W); } @media (max-width: 900px) { .ir-hero { min-height: 0; } .ir-hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 36px 0 48px; } .ir-hero__h1.ir-hero__slogan { font-size: 44px; margin-bottom: 14px; } .ir-hero__h1.ir-hero__slogan span { display: inline; margin-right: 8px; } .ir-hero__eyebrow { margin-bottom: 18px; } .ir-hero__ctas { max-width: none; } .ir-hero__cta-main { width: 100%; } .ir-hero__eco { display: flex; } } /* ── Diensten-tegels ─────────────────────────────────────────────────── */ .ir-dtiles { padding: var(--space-section-sm) 0; background: var(--W); } .ir-dtiles__h { text-align: center; margin-bottom: 28px; } .ir-dtiles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ir-dtile { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border: 1.5px solid var(--K10); border-radius: var(--r-lg); background: var(--W); text-decoration: none; color: var(--K); transition: border-color .2s, transform .2s; } .ir-dtile:hover { border-color: var(--B); transform: translateY(-2px); } .ir-dtile__name { font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1.1; } .ir-dtile__desc { font-size: 14px; color: var(--c-text-muted); line-height: 1.45; flex: 1; } .ir-dtile__price { font-weight: 800; font-size: 15px; color: var(--ir-ink); margin-top: 6px; } .ir-dtiles__note { text-align: center; font-size: 13px; color: var(--c-text-muted); margin-top: 14px; } @media (max-width: 760px) { .ir-dtiles__grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ir-dtile { padding: 16px 14px; } .ir-dtile__name { font-size: 19px; } .ir-dtile__desc { font-size: 13px; } } /* ── Eco-voordeel (home, productpagina, /eco-voordeel/) ──────────────── */ .ir-eco { padding: var(--space-section-sm) 0; background: var(--W); } .ir-eco__card { max-width: 980px; margin: 0 auto; border-radius: var(--r-xl); padding: 40px; background: linear-gradient(180deg, #EFFAF4 0%, #fff 100%); border: 1.5px solid #BFE8D2; } .ir-eco__pill { display: inline-block; background: #0E8E5A; color: #fff; font-weight: 800; font-size: 13px; border-radius: 30px; padding: 5px 14px; margin-bottom: 14px; } .ir-eco__title { font-family: var(--font-head); font-size: var(--fs-700); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--K); margin-bottom: 10px; } .ir-eco__lead { font-size: 16px; color: var(--c-text-muted); max-width: 620px; margin-bottom: 26px; } .ir-eco__steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ir-eco__steps li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #D5EFE1; border-radius: var(--r); padding: 16px; } .ir-eco__steps strong { display: block; font-size: 15px; color: var(--K); } .ir-eco__steps span:not(.ir-eco__num) { font-size: 14px; color: var(--c-text-muted); } .ir-eco__num { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #0E8E5A; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; } .ir-eco__example { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1.5px dashed #0E8E5A; border-radius: var(--r); padding: 14px 18px; margin-bottom: 22px; } .ir-eco__ex-label { font-size: 14px; color: var(--c-text-muted); } .ir-eco__ex-prices del { color: var(--c-text-muted); margin-right: 8px; } .ir-eco__ex-prices strong { font-family: var(--font-head); font-size: 26px; color: #0E8E5A; } .ir-eco__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ir-eco__more { font-weight: 700; color: #0E8E5A; } @media (max-width: 760px) { .ir-eco__card { padding: 26px 18px; border-radius: var(--r-lg); } .ir-eco__steps { grid-template-columns: 1fr; gap: 8px; } .ir-eco__steps li { padding: 12px 14px; } .ir-eco__actions .btn { width: 100%; } } /* Regel onder de prijs in de configurator */ .ir-eco-line { margin: 6px 0 12px; font-size: 14px; color: #0E6B45; background: #EFFAF4; border-radius: 10px; padding: 8px 12px; } .ir-eco-line a { color: #0E6B45; font-weight: 700; } .ir-wc-booking__eco-text a { color: #fff; text-decoration: underline; } /* ── Waarom (homepage) ───────────────────────────────────────────────── */ .ir-premium__header .section-h { margin-bottom: 0; } /* ── Bewijs, gebundeld ───────────────────────────────────────────────── */ .ir-proof { padding: var(--space-section) 0; background: var(--W); } .ir-proof__head { text-align: center; margin-bottom: 20px; } .ir-proof__score { font-size: 16px; color: var(--c-text-muted); } .ir-proof__score strong { font-family: var(--font-head); font-size: 28px; color: var(--K); } .ir-proof__score span { color: #FBBF24; letter-spacing: 2px; } .ir-proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; align-items: stretch; } .ir-proof__ba figcaption { font-size: 14px; color: var(--c-text-muted); margin-top: 8px; } .ir-proof__ba .ir-ba { border-radius: var(--r-lg); overflow: hidden; } .ir-proof__team { display: grid; grid-template-columns: 38% 1fr; gap: 18px; background: var(--WG); border-radius: var(--r-lg); overflow: hidden; } .ir-proof__team img { width: 100%; height: 100%; object-fit: cover; } .ir-proof__team-text { padding: 22px 20px 22px 0; align-self: center; } .ir-proof__team-text h3 { font-size: 20px; margin-bottom: 8px; } .ir-proof__team-text p { font-size: 15px; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 10px; } .ir-proof__team-text a { font-weight: 700; color: var(--ir-ink); } .ir-proof__refs { margin-top: 32px; text-align: center; } .ir-proof__refs-label { font-size: 14px; color: var(--c-text-muted); margin-bottom: 12px; } .ir-proof__refs-label a { color: var(--ir-ink); font-weight: 700; } .ir-proof__refs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ir-proof__refs-list li { border: 1px solid var(--K10); border-radius: 30px; padding: 6px 14px; font-size: 13px; font-weight: 700; color: rgba(0,0,0,.7); } @media (max-width: 860px) { .ir-proof { padding: var(--space-section-sm) 0; } .ir-proof__grid { grid-template-columns: 1fr; margin-top: 24px; } .ir-proof__team { grid-template-columns: 1fr; } .ir-proof__team img { max-height: 220px; } .ir-proof__team-text { padding: 0 18px 20px; } .ir-proof__refs-list li { font-size: 12px; padding: 5px 11px; } } /* ── Proces / FAQ / contactstrook (home) ─────────────────────────────── */ .ir-proces__header { text-align: center; } .ir-faq__header { margin-bottom: 28px; } .ir-cstrip { background: var(--K); color: var(--W); padding: 44px 0; } .ir-cstrip__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ir-cstrip__h { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--W); margin-bottom: 4px; } .ir-cstrip__p { color: var(--c-hero-text); font-size: 15px; } .ir-cstrip__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ir-cstrip__link { color: var(--W); font-weight: 700; font-size: 15px; } @media (max-width: 760px) { .ir-cstrip__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; } .ir-cstrip__actions .btn { width: 100%; } } /* ── Productpagina: hero in 3 blokken (top / boekbox / rest) ─────────── */ .ir-wc-hero__grid { grid-template-areas: "top booking" "intro booking"; } .ir-wc-hero__top { grid-area: top; } .ir-wc-hero__grid .ir-wc-hero__intro { grid-area: intro; } .ir-wc-hero__grid .ir-wc-booking { grid-area: booking; } .ir-wc-hero__top .ir-wc-hero__lead { margin: 6px 0 10px; } .ir-wc-hero__score { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--c-text-muted); text-decoration: none; } .ir-wc-hero__score span[aria-hidden] { color: #FBBF24; letter-spacing: 1px; } .ir-wc-hero__score strong { color: var(--K); } .ir-wc-hero__facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .ir-wc-hero__facts li { position: relative; padding-left: 22px; font-size: 15px; color: rgba(0,0,0,.75); } .ir-wc-hero__facts li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--B); } .ir-wc-hero__geurlink { margin: 14px 0 0; font-size: 15px; } .ir-wc-hero__geurlink a { font-weight: 700; color: var(--ir-ink); } @media (max-width: 1024px) { .ir-wc-hero__grid .ir-wc-hero__top { order: 0; } .ir-wc-hero__grid .ir-wc-booking { order: 1; } .ir-wc-hero__grid .ir-wc-hero__intro { order: 2; padding-top: 0; } .ir-wc-hero__top .ir-wc-hero__h1 { margin-top: 0; } } /* ── Pakkettentabel ──────────────────────────────────────────────────── */ .ir-tiers { padding: var(--space-section) 0; background: var(--WG); } .ir-tiers .section-h, .ir-tiers__intro { text-align: center; } .ir-tiers__intro { color: var(--c-text-muted); font-size: 16px; margin-bottom: 26px; } .ir-tiers__wrap { max-width: 920px; margin: 0 auto; background: var(--W); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; } .ir-tiers__table { width: 100%; border-collapse: collapse; table-layout: fixed; } .ir-tiers__table th, .ir-tiers__table td { padding: 13px 12px; text-align: center; border-bottom: 1px solid var(--K05); font-size: 15px; vertical-align: middle; } .ir-tiers__table thead th { font-family: var(--font-head); font-size: 18px; font-weight: 800; padding-top: 22px; color: var(--K); } .ir-tiers__table tbody th { text-align: left; font-weight: 600; color: rgba(0,0,0,.75); width: 40%; } .ir-tiers__table td { color: var(--B); font-weight: 800; font-size: 18px; } .ir-tiers__table td.is-no { color: rgba(0,0,0,.25); } .ir-tiers__table .is-rec { background: rgba(0,160,253,.06); } .ir-tiers__badge { display: block; width: max-content; margin: 6px auto 0; background: var(--B); color: var(--ir-ink); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 20px; padding: 3px 9px; } .ir-tiers__for td { font-size: 13px; font-weight: 600; color: rgba(0,0,0,.65); line-height: 1.35; } .ir-tiers__price td { font-family: var(--font-head); font-size: 22px; color: var(--K); } .ir-tiers__vlek, .ir-tiers__garantie { max-width: 920px; margin: 18px auto 0; font-size: 15px; } .ir-tiers__garantie summary { cursor: pointer; font-weight: 700; color: var(--ir-ink); } .ir-tiers__garantie p { margin-top: 8px; color: var(--c-text-muted); font-size: 14px; } .ir-tiers__cta { text-align: center; margin-top: 24px; } @media (max-width: 760px) { .ir-tiers { padding: var(--space-section-sm) 0; } .ir-tiers .container { padding: 0 12px; } .ir-tiers__table th, .ir-tiers__table td { padding: 10px 5px; font-size: 13px; } .ir-tiers__table thead th { font-size: 13px; line-height: 1.15; } .ir-tiers__table tbody th { width: 37%; font-size: 12.5px; line-height: 1.3; } .ir-tiers__table td { font-size: 16px; } .ir-tiers__badge { font-size: 8.5px; padding: 2px 6px; } .ir-tiers__for td { font-size: 11.5px; } .ir-tiers__price td { font-size: 17px; } .ir-tiers__vlek, .ir-tiers__garantie { padding: 0 8px; } .ir-tiers__cta .btn { width: 100%; } } /* ── Waarom (productpagina): vergelijking + stappen + foto's ─────────── */ .ir-why { padding: var(--space-section) 0; background: var(--W); } .ir-why .section-h { max-width: 760px; } .ir-why__intro { font-size: 16px; color: var(--c-text-muted); max-width: 720px; margin-bottom: 28px; } .ir-why__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; } .ir-why__col { border-radius: var(--r-lg); padding: 22px 22px 18px; } .ir-why__col h3 { font-size: 18px; margin-bottom: 10px; } .ir-why__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ir-why__col li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; } .ir-why__col--cheap { background: var(--WG); color: rgba(0,0,0,.6); } .ir-why__col--cheap li::before { content: '✕'; position: absolute; left: 0; color: rgba(0,0,0,.35); font-weight: 800; } .ir-why__col--ours { background: var(--K); color: var(--W); } .ir-why__col--ours h3 { color: var(--W); } .ir-why__col--ours li::before { content: '✓'; position: absolute; left: 0; color: var(--B); font-weight: 800; } .ir-why__sub { font-size: 20px; margin-bottom: 14px; } .ir-why__steps { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .ir-why__step { background: var(--WG); border-radius: var(--r-lg); overflow: hidden; } .ir-why__step img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .ir-why__step-body { padding: 14px 14px 16px; } .ir-why__step-num { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--B); color: var(--ir-ink); font-weight: 800; font-size: 13px; align-items: center; justify-content: center; margin-right: 6px; } .ir-why__step strong { font-size: 15px; } .ir-why__step p { font-size: 14px; color: var(--c-text-muted); line-height: 1.5; margin-top: 6px; } .ir-why__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ir-why__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); display: block; } .ir-why__photos figcaption { font-size: 14px; color: var(--c-text-muted); margin-top: 8px; line-height: 1.5; } @media (max-width: 1024px) { .ir-why__steps { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .ir-why { padding: var(--space-section-sm) 0; } .ir-why__compare { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; } .ir-why__steps > * { flex-basis: 72%; } .ir-why__photos { grid-template-columns: 1fr 1fr; gap: 10px; } .ir-why__photos figcaption { font-size: 12.5px; } } /* ── Inbegrepen + ondernemersregel + gidsen-links ────────────────────── */ .ir-wc-incl__biz { margin-top: 18px; font-size: 15px; color: var(--c-text-muted); text-align: center; } .ir-gids-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; font-size: 14px; } .ir-gids-links span { font-weight: 700; margin-right: 4px; } .ir-gids-links a { border: 1px solid var(--K10); border-radius: 30px; padding: 6px 12px; color: var(--ir-ink); text-decoration: none; font-weight: 600; } .ir-gids-links a:hover { border-color: var(--B); } /* ── Artikelpagina's (/eco-voordeel/ en /gids/...) ───────────────────── */ .ir-article { background: var(--W); } .ir-article__narrow { max-width: 760px; } .ir-article__hero { background: var(--WG); padding: 48px 0 36px; } .ir-article__crumbs { font-size: 13px; color: var(--c-text-muted); margin-bottom: 14px; } .ir-article__crumbs a { color: var(--ir-ink); } .ir-article__h1 { font-family: var(--font-head); font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 14px; } .ir-article__intro { font-size: 18px; line-height: 1.6; color: rgba(0,0,0,.72); } .ir-article__body { padding: 36px 0 var(--space-section-sm); } .ir-article__body h2 { font-family: var(--font-head); font-size: 26px; font-weight: 800; margin: 30px 0 10px; } .ir-article__body p { font-size: 17px; line-height: 1.7; color: rgba(0,0,0,.78); margin-bottom: 12px; } .ir-article__list { margin: 0 0 12px; padding-left: 20px; } .ir-article__list li { font-size: 17px; line-height: 1.6; margin-bottom: 8px; color: rgba(0,0,0,.78); } .ir-article__table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 16px; } .ir-article__table th, .ir-article__table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--K10); } .ir-article__table td strong { color: #0E8E5A; } .ir-article__cta { background: var(--K); color: var(--W); border-radius: var(--r-lg); padding: 24px; margin: 34px 0 10px; } .ir-article__cta p { color: var(--c-hero-text); margin-bottom: 14px; } .ir-article__cta strong { color: var(--W); } .ir-article__related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ir-article__related a { display: inline-block; border: 1px solid var(--K10); border-radius: 30px; padding: 8px 14px; color: var(--ir-ink); text-decoration: none; font-weight: 600; } .ir-article .ir-eco { padding-top: 32px; } @media (max-width: 760px) { .ir-article__hero { padding: 28px 0 22px; } .ir-article__intro { font-size: 16px; } .ir-article__body p, .ir-article__list li { font-size: 16px; } .ir-article__cta .btn { width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════ v1.18.0 DESIGNSYSTEEM: één ritme over alle pagina's ═══════════════════════════════════════════════════════════════════════ */ /* ── Rust: geen hoofdletter-labels boven secties (oogden als sjabloon) ── */ .section-eyebrow, .ir-section-eyebrow { display: none !important; } /* ── Knoppen: secundaire knop leesbaar op lichte achtergronden ───────── */ .ir-vt-hero .btn-secondary, .ir-stad-hero .btn-secondary, .ir-contact .btn-secondary, .ir-team .btn-secondary, .ir-wc-team .btn-secondary { color: var(--K); border-color: rgba(0,0,0,.22); background: transparent; } .ir-vt-hero .btn-secondary:hover, .ir-stad-hero .btn-secondary:hover { border-color: var(--K); background: rgba(0,0,0,.04); } /* ── Dubbele slot-oproepen per pagina weg: de footer heeft er nu één ─── */ .ir-stad-cta, .ir-vt-final-cta, .ir-about-cta, .ir-wc-final-cta, .ir-mid-cta { display: none !important; } /* ── Homepage-hero: tekst niet meer tegen de schermrand op gsm ───────── */ @media (max-width: 900px) { .ir-hero__inner { padding: 32px 20px 44px !important; } } /* Teamfoto in de bewijs-sectie: liggend kader i.p.v. een volle portretfoto */ @media (max-width: 860px) { .ir-proof__team img { height: auto !important; max-height: none !important; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; } } /* ── Trustbalk (vervangt de lopende ticker) ──────────────────────────── */ .ir-topbar { background: var(--K); color: rgba(255,255,255,.86); font-size: 13px; } .ir-topbar__list { list-style: none; margin: 0 auto; display: flex; justify-content: center; gap: 36px; padding-top: 8px; padding-bottom: 8px; } .ir-topbar__list li { white-space: nowrap; } .ir-topbar__list strong { color: #fff; font-weight: 700; } .ir-topbar__list a { color: #fff; text-decoration: none; } .ir-topbar__list a strong { color: #6EE7A8; } .ir-topbar__stars { color: #FBBF24; letter-spacing: 1px; } @media (max-width: 900px) { .ir-topbar__list { position: relative; height: 34px; padding: 0; display: block; } .ir-topbar__list li { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: ir-topbar-fade 16s infinite; } .ir-topbar__list li:nth-child(2) { animation-delay: 4s; } .ir-topbar__list li:nth-child(3) { animation-delay: 8s; } .ir-topbar__list li:nth-child(4) { animation-delay: 12s; } } @keyframes ir-topbar-fade { 0% { opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .ir-topbar__list li { animation: none; } .ir-topbar__list li:first-child { opacity: 1; } } /* ── Afsluitende oproep (elke pagina) ────────────────────────────────── */ .ir-endcta { background: var(--B); padding: 48px 0; } .ir-endcta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .ir-endcta__h { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.1; color: var(--ir-ink); letter-spacing: -.02em; margin-bottom: 6px; } .ir-endcta__p { color: var(--ir-ink); font-size: 16px; } .ir-endcta__eco { display: inline-block; margin-left: 6px; background: #fff; color: #0E8E5A; font-weight: 800; font-size: 13px; border-radius: 30px; padding: 3px 10px; text-decoration: none; } .ir-endcta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .ir-endcta .btn-primary { background: var(--K); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); } .ir-endcta .btn-primary:hover { background: #1a1a1a; } .ir-endcta__wa { color: var(--ir-ink); font-weight: 700; font-size: 15px; } @media (max-width: 760px) { .ir-endcta { padding: 36px 0; } .ir-endcta__actions { width: 100%; } .ir-endcta .btn-primary { width: 100%; } .ir-endcta__eco { margin: 8px 0 0; } } /* ── Footer: trust-rij + compacte kolommen ───────────────────────────── */ .ir-footer__trust { list-style: none; margin: 0 0 40px; padding: 0 0 28px; border-bottom: 1px solid var(--W10); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ir-footer__trust li { font-size: 14px; color: var(--W60); } .ir-footer__trust strong { color: var(--W); } .ir-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } .ir-footer__muted { color: var(--W40); } .ir-footer__contact a { color: var(--W60); } .ir-footer__acc summary { list-style: none; cursor: default; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--W40); margin-bottom: 16px; } .ir-footer__acc summary::-webkit-details-marker { display: none; } .ir-footer__acc ul { list-style: none; margin: 0; padding: 0; } .ir-footer__acc li { margin-bottom: 10px; } .ir-footer__acc a { font-size: 14px; color: var(--W60); text-decoration: none; font-weight: 600; } .ir-footer__acc a:hover { color: var(--B); } @media (max-width: 760px) { .ir-footer { padding-top: 36px; } .ir-footer__trust { grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 24px; padding-bottom: 20px; } .ir-footer__trust li { font-size: 13px; } .ir-footer__grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 24px; } .ir-footer__brand { margin-bottom: 16px; } .ir-footer__acc { border-top: 1px solid var(--W10); } .ir-footer__acc summary { cursor: pointer; margin: 0; padding: 16px 0; font-size: 12px; color: var(--W60); display: flex; justify-content: space-between; } .ir-footer__acc summary::after { content: '+'; font-size: 18px; line-height: 1; color: var(--B); } .ir-footer__acc[open] summary::after { content: '−'; } .ir-footer__acc ul { padding-bottom: 12px; } .ir-footer__bottom { flex-direction: column; align-items: flex-start; } .ir-footer__legal { flex-wrap: wrap; gap: 12px 18px; } body.has-actionbar .ir-footer { padding-bottom: 84px; } } /* ── Mobiele actiebalk ───────────────────────────────────────────────── */ .ir-actionbar { display: none; } @media (max-width: 760px) { .ir-actionbar { display: flex; gap: 10px; align-items: center; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 450; padding: 8px; border-radius: 18px; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 32px rgba(0,0,0,.28); transform: translateY(140%); transition: transform .28s ease; } .ir-actionbar[hidden] { display: none; } .ir-actionbar.is-visible { transform: translateY(0); } .ir-actionbar__main { flex: 1; text-align: center; background: var(--B); color: var(--ir-ink); font-family: var(--font-head); font-weight: 800; font-size: 16px; padding: 14px 12px; border-radius: 12px; text-decoration: none; } .ir-actionbar__wa { flex: 0 0 50px; height: 50px; border-radius: 12px; background: var(--WA); color: #fff; display: flex; align-items: center; justify-content: center; } .ir-wa-float.ir-wa-float--has-bar { display: none !important; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .ir-actionbar { transition: none; } } /* ── Pakkettentabel: prijsnoot i.p.v. vanaf-prijzen ──────────────────── */ .ir-tiers__note { max-width: 920px; margin: 16px auto 0; text-align: center; font-size: 15px; color: var(--c-text-muted); } /* ── Waarom (matras/stoel): één foto ─────────────────────────────────── */ .ir-why__photos--one { grid-template-columns: 1fr; max-width: 620px; } /* ── Landingspagina's (geur & vlekken) ───────────────────────────────── */ .ir-lp-hero { background: var(--WG); padding: 40px 0 48px; } .ir-lp-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .ir-lp-hero__h1 { font-family: var(--font-head); font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 14px; } .ir-lp-hero__lead { font-size: 18px; line-height: 1.6; color: rgba(0,0,0,.72); margin-bottom: 22px; } .ir-lp-hero__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .ir-lp-hero__link { font-weight: 700; color: var(--ir-ink); } .ir-lp-hero__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--c-text-muted); } .ir-lp-hero__trust span[aria-hidden] { color: #FBBF24; } .ir-lp-hero__trust a { color: #0E8E5A; font-weight: 700; } .ir-lp-hero__visual img { width: 100%; border-radius: var(--r-xl); aspect-ratio: 4 / 3; object-fit: cover; display: block; } .ir-lp-hero__visual figcaption { font-size: 14px; color: var(--c-text-muted); margin-top: 8px; } .ir-lp-sec { padding: var(--space-section-sm) 0; background: var(--W); } .ir-lp-sec--grey { background: var(--WG); } .ir-lp-center { text-align: center; } .ir-lp-p { font-size: 17px; line-height: 1.7; color: rgba(0,0,0,.75); margin-bottom: 12px; } .ir-lp-steps { list-style: none; padding: 0; margin: 24px auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ir-lp-steps li { background: var(--W); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh); } .ir-lp-steps strong { display: block; font-size: 16px; margin: 10px 0 6px; } .ir-lp-steps p { font-size: 14px; color: var(--c-text-muted); line-height: 1.55; } .ir-lp-steps__n { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--B); color: var(--ir-ink); font-weight: 800; align-items: center; justify-content: center; } .ir-lp .ir-dtiles__grid { margin-top: 24px; } @media (max-width: 900px) { .ir-lp-hero__grid { grid-template-columns: 1fr; gap: 24px; } .ir-lp-hero { padding: 24px 0 32px; } .ir-lp-hero__lead { font-size: 16px; } .ir-lp-hero__ctas .btn { width: 100%; } .ir-lp-steps { grid-template-columns: 1fr 1fr; gap: 10px; } .ir-lp-steps li { padding: 14px; } } /* ═══════════════════════════════════════════════════════════════════════ v1.19.0 VERFIJNING: desktop-check, echte foto's, iconen, bedankpagina ═══════════════════════════════════════════════════════════════════════ */ /* ── Iconen ──────────────────────────────────────────────────────────── */ .ir-ico { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; } .ir-hero__eco .ir-ico, .ir-eco__pill .ir-ico, .ir-endcta__eco .ir-ico { color: currentColor; } .ir-topbar .ir-ico, .ir-lp-hero__trust .ir-ico { color: #6EE7A8; } .ir-lp-hero__trust .ir-ico { color: #0E8E5A; } .ir-eco-line .ir-ico { color: #0E8E5A; } .ir-wc-booking__eco-icon .ir-ico { color: #fff; } .ir-wc-booking__eco-icon { filter: none !important; } /* Belgische vlag in CSS (vlag-emoji toont op Windows als "BE") */ .ir-flag-be { display: inline-flex; width: 18px; height: 12px; border-radius: 2px; overflow: hidden; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); } .ir-flag-be i { flex: 1; } .ir-flag-be i:nth-child(1) { background: #000; } .ir-flag-be i:nth-child(2) { background: #FDDA24; } .ir-flag-be i:nth-child(3) { background: #EF3340; } /* ── Koppen: geen weeswoorden meer (sitebreed) ───────────────────────── */ h1, h2, .section-h, .ir-hero__title { text-wrap: balance; } /* ── Desktop: hero-tekst op dezelfde lijn als de rest van de site ────── */ @media (min-width: 901px) { .ir-hero__inner { padding-left: 48px !important; padding-right: 48px !important; } } /* ── Desktop productpagina: geen gat tussen titel en voor/na-foto ────── */ @media (min-width: 1025px) { .ir-wc-hero__grid { grid-template-rows: auto 1fr; row-gap: 20px; } .ir-wc-hero__grid .ir-wc-booking { grid-row: 1 / span 2; align-self: start; } .ir-wc-hero__top, .ir-wc-hero__grid .ir-wc-hero__intro { align-self: start; } } /* Link "243+ echte Google-reviews" op de blauwe boekkop: leesbaar */ .ir-wc-booking__head-reviews { color: rgba(255,255,255,.9) !important; } /* ── Footer: juridische links en copyright leesbaar (was te licht) ───── */ .ir-footer__bottom, .ir-footer__legal a { color: var(--W60) !important; } /* ── Iets minder witruimte tussen secties op desktop ─────────────────── */ @media (min-width: 901px) { :root { --space-section: 84px; --space-section-sm: 56px; } } /* ── Bewijs: fotostrook (echte foto's) ───────────────────────────────── */ .ir-proof__strip { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ir-proof__strip li { position: relative; border-radius: var(--r-lg); overflow: hidden; } .ir-proof__strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .ir-proof__strip span { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 8px; } .ir-proof__team img { object-position: center 35%; } @media (max-width: 760px) { .ir-proof__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 20px -20px 0; padding: 0 20px 6px; gap: 10px; scrollbar-width: none; } .ir-proof__strip::-webkit-scrollbar { display: none; } .ir-proof__strip li { flex: 0 0 70%; scroll-snap-align: start; } } /* ── Foto-oproep (geur & vlekken) + figuur in gidsen ─────────────────── */ .ir-photo-cta { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; background: var(--WG); border-radius: var(--r-xl); overflow: hidden; margin: 32px auto 0; max-width: 920px; } .ir-photo-cta img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; display: block; } .ir-photo-cta > div { padding: 22px 24px 22px 0; } .ir-photo-cta h3 { font-size: 20px; margin-bottom: 6px; } .ir-photo-cta p { font-size: 15px; color: var(--c-text-muted); margin-bottom: 14px; } @media (max-width: 760px) { .ir-photo-cta { grid-template-columns: 1fr; gap: 0; } .ir-photo-cta img { min-height: 0; aspect-ratio: 16 / 9; } .ir-photo-cta > div { padding: 18px; } .ir-photo-cta .btn { width: 100%; } } .ir-article__fig { margin: 24px 0 0; } .ir-article__fig img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; display: block; } .ir-article__fig figcaption { font-size: 14px; color: var(--c-text-muted); margin-top: 6px; } /* ── Bedankpagina + vertrouwen bij het afrekenen ─────────────────────── */ .ir-thanks { background: #fff; border: 1.5px solid var(--B20); border-radius: var(--r-lg); padding: 24px; margin: 24px 0; } .ir-thanks__h { font-family: var(--font-head); font-size: 26px; font-weight: 800; margin-bottom: 14px; } .ir-thanks__steps { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 12px; } .ir-thanks__steps strong { display: block; font-size: 16px; } .ir-thanks__steps span { font-size: 15px; color: var(--c-text-muted); line-height: 1.55; } .ir-thanks__help { font-size: 15px; margin: 0; } .ir-checkout-trust { list-style: none; margin: 0 0 14px; padding: 12px 14px; background: #EFFAF4; border-radius: 10px; display: grid; gap: 6px; font-size: 14px; } .ir-checkout-trust .ir-ico { color: #0E8E5A; margin-right: 4px; } /* v1.19.0: voor/na-kop gecentreerd en op sectiegrootte (stond links, klein) */ .ir-wc-results h2 { text-align: center; font-family: var(--font-head); font-size: var(--fs-700); font-weight: 800; letter-spacing: -.02em; } .ir-wc-results__intro { text-align: center; } /* v1.19.0: ruimte tussen sterren en score in de trustbalk op gsm (flex slikte de spatie in) */ @media (max-width: 900px) { .ir-topbar__list li { gap: 5px; } } /* ═══════════════════════════════════════════════════════════════════════ v1.20.0 BOEKBLOK: 3 stappen, 1 accentkleur, rustig op gsm ═══════════════════════════════════════════════════════════════════════ */ .ir-wc-booking { background: #fff; border: 1px solid var(--K10); border-radius: var(--r-xl); box-shadow: 0 10px 40px rgba(0,0,0,.08); overflow: hidden; } .ir-bk-head { padding: 22px 22px 6px; } .ir-bk-head__title { font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--K); margin: 0 0 6px; letter-spacing: -.01em; } .ir-bk-head__trust { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--c-text-muted); } .ir-bk-head__trust a { color: var(--c-text-muted); text-decoration: none; } .ir-bk-head__trust a span { color: #F5A623; } .ir-bk-head__trust > span::before { content: '·'; margin-right: 14px; color: rgba(0,0,0,.25); } .ir-wc-booking__body { padding: 8px 22px 22px; } /* Stappen */ .ir-bk__step { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--K); margin: 18px 0 10px; } .ir-bk__n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--K); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .ir-bk__group { margin-bottom: 12px; } .ir-bk__glabel { font-size: 13px; font-weight: 700; color: rgba(0,0,0,.6); margin: 0 0 6px; } /* Knoppen (chips) */ .ir-bk__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .ir-bk__chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--K10); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; font-family: var(--font); transition: border-color .15s, background .15s; } .ir-bk__chip:hover { border-color: rgba(0,0,0,.3); } .ir-bk__chip-main { font-size: 15px; font-weight: 700; color: var(--K); line-height: 1.2; } .ir-bk__chip-sub { font-size: 12px; color: var(--c-text-muted); line-height: 1.2; } .ir-bk__chip.is-on { border-color: var(--B); background: rgba(0,160,253,.08); box-shadow: inset 0 0 0 1px var(--B); } .ir-bk__chip:disabled { opacity: .35; cursor: not-allowed; } .ir-bk__chip:focus-visible, .ir-bk__tier:focus-visible { outline: 2px solid var(--B); outline-offset: 2px; } /* Formaatbeeld klein onder de knoppen */ .ir-bk__format { margin: 10px 0 0 !important; max-width: 260px; } .ir-bk__format img { border-radius: 10px; max-height: 150px; width: auto !important; object-fit: contain; } /* Stofwaarschuwing: duidelijk, maar rustig (zwart-wit, geen rood) */ .ir-bk-fabric { display: flex; gap: 12px; align-items: flex-start; background: var(--WG); border: 1.5px solid var(--K); border-radius: 12px; padding: 12px 14px; margin: 6px 0 4px; font-size: 14px; line-height: 1.45; color: var(--K); } .ir-bk-fabric strong { display: block; margin-bottom: 2px; } .ir-bk-fabric span { color: rgba(0,0,0,.72); } .ir-bk-fabric a { color: var(--K); font-weight: 700; } .ir-bk-fabric__icon { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--K); color: #fff !important; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; } /* Pakketkaarten */ .ir-bk__tiers { display: grid; gap: 8px; } .ir-bk__tier { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--K10); border-radius: 12px; background: #fff; cursor: pointer; font-family: var(--font); transition: border-color .15s, background .15s; } .ir-bk__tier:hover { border-color: rgba(0,0,0,.3); } .ir-bk__tier.is-on { border-color: var(--B); background: rgba(0,160,253,.08); box-shadow: inset 0 0 0 1px var(--B); } .ir-bk__tier-top { display: flex; align-items: center; gap: 8px; } .ir-bk__tier-name { font-size: 16px; font-weight: 800; color: var(--K); } .ir-bk__tier-badge { font-size: 11px; font-weight: 800; background: var(--K); color: #fff; border-radius: 20px; padding: 2px 8px; } .ir-bk__tier-price { margin-left: auto; font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--K); } .ir-bk__tier-line { display: block; font-size: 13px; color: var(--c-text-muted); margin-top: 3px; line-height: 1.4; } .ir-bk__tiers.is-waiting .ir-bk__tier-price::after { content: ''; } .ir-bk__compare { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ir-ink); } /* Originele keuzelijsten verbergen zodra de knoppen er staan (blijven werken) */ .ir-bk-on table.variations { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ir-bk-on .reset_variations { font-size: 13px; } .ir-bk-enhanced .behandeling-info, .ir-bk-enhanced .ir-wc-booking__assure, .ir-bk-enhanced .ir-wc-booking__eco { display: none !important; } /* Stap 3: prijs als totaalregel, planner rustiger */ .ir-bk-on .woocommerce-variation-price { display: flex; align-items: baseline; justify-content: space-between; background: var(--WG); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; } .ir-bk-on .woocommerce-variation-price::before { content: 'Uw prijs, alles inbegrepen'; font-size: 13px; font-weight: 700; color: rgba(0,0,0,.6); } .ir-bk-on .woocommerce-variation-price .price { font-family: var(--font-head); font-size: 26px !important; font-weight: 800; color: var(--K) !important; } .ir-wc-booking [class*="route66-eco-callout"] { background: #EFFAF4 !important; border: 0 !important; border-radius: 12px !important; color: #0E6B45 !important; box-shadow: none !important; } .ir-bk-remind { margin: 10px 0 8px; font-size: 13px; color: rgba(0,0,0,.65); line-height: 1.5; } .ir-bk-remind .ir-ico { color: #0E8E5A; margin-right: 4px; } .ir-bk-remind__warn { font-weight: 700; color: var(--K); } @media (max-width: 760px) { .ir-wc-booking { border-radius: 18px; box-shadow: 0 6px 24px rgba(0,0,0,.07); } .ir-bk-head { padding: 18px 16px 4px; } .ir-bk-head__title { font-size: 23px; } .ir-wc-booking__body { padding: 4px 16px 18px; } .ir-bk__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ir-bk__chip { padding: 7px 9px; min-height: 46px; } .ir-bk__chip-main { font-size: 14px; } .ir-bk__step { font-size: 17px; margin: 16px 0 8px; } } /* v1.20.0 verfijning: geen doos-in-doos in stap 3, rustige vertrouwensregel */ .ir-bk-on .single_variation_wrap { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } .ir-bk-on .woocommerce-variation-price::before { text-transform: none !important; letter-spacing: 0 !important; } .ir-bk-head__trust > span::before { content: none; } .ir-bk-head__trust .ir-ico { color: #0E8E5A; margin-right: 2px; } /* v1.20.0: boekblok is nu hoger dan het scherm → niet meer sticky (anders onbereikbare onderkant) */ .ir-wc-booking.ir-bk-enhanced { position: relative; top: auto; } @media (min-width: 761px) { .ir-bk__chips { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } } /* v1.20.1: formaatvoorbeeld groter en duidelijk (klant checkt of het klopt met zijn zetel) */ .ir-bk__format { max-width: none !important; background: var(--WG); border-radius: 12px; padding: 12px; margin: 10px 0 0 !important; } .ir-bk__format img { display: block; width: 100% !important; max-height: 190px; object-fit: contain; background: #fff; border-radius: 8px; } .ir-bk__format figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; } .ir-bk__format .ir-wc-booking__format-cap { display: block; font-weight: 700; color: var(--K); } .ir-bk__format-help { display: block; color: var(--c-text-muted); } .ir-bk__format-help a { color: var(--K); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ v1.21.0 TOGGLES: één stijl voor alle uitklapvragen (FAQ product, home, vasttapijt, stad, boekpagina) + footer + garantie-voorwaarden. Ruimere binnenmarge (tekst niet meer tegen de rand), antwoord lijnt uit met de vraag, en een rustig chevron-icoon i.p.v. "+" / "×". ═══════════════════════════════════════════════════════════════════════ */ :root { --ir-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); } /* De lijst-wrapper erfde de sectiestijl van .ir-faq (96px witte strook erboven) */ .ir-faq[data-faq-list], .ir-wc-faq .ir-faq { padding: 0 !important; margin: 0 !important; background: none !important; } details.ir-faq__item { background: #fff !important; border: 1px solid var(--K10) !important; border-radius: 14px !important; margin: 0 0 10px !important; padding: 0 !important; box-shadow: none !important; overflow: hidden; transition: border-color .2s ease; } details.ir-faq__item:hover { border-color: rgba(0,0,0,.22) !important; } details.ir-faq__item[open] { border-color: rgba(0,0,0,.28) !important; } details.ir-faq__item > summary.ir-faq__q { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px !important; margin: 0 !important; min-height: 60px; cursor: pointer; list-style: none; font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--K); background: none !important; border: 0 !important; } details.ir-faq__item > summary.ir-faq__q::-webkit-details-marker { display: none; } details.ir-faq__item > summary.ir-faq__q:focus-visible { outline: 2px solid var(--B); outline-offset: -2px; border-radius: 14px; } details.ir-faq__item .ir-faq__q-text { font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--K) !important; } /* Icoon: een chevron in een lichtgrijs rondje; zwart als de vraag open staat */ details.ir-faq__item .ir-faq__q-icon, details.ir-faq__item > summary.ir-faq__q::after { content: '' !important; position: relative; display: block !important; flex: 0 0 28px; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--WG) !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; color: var(--K) !important; transform: none !important; margin: 0 !important; transition: background .2s ease; } details.ir-faq__item .ir-faq__q-icon::before { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ir-chev) center / contain no-repeat; mask: var(--ir-chev) center / contain no-repeat; transition: transform .2s ease; } /* Vraag zonder eigen icoon-element (boekpagina): chevron via ::after */ details.ir-faq__item > summary.ir-faq__q::after { background: var(--K) !important; -webkit-mask: var(--ir-chev) center / 14px no-repeat; mask: var(--ir-chev) center / 14px no-repeat; transition: transform .2s ease; } details.ir-faq__item > summary.ir-faq__q:has(.ir-faq__q-icon)::after { display: none !important; } details.ir-faq__item[open] .ir-faq__q-icon { background: var(--K) !important; color: #fff !important; } details.ir-faq__item[open] .ir-faq__q-icon::before, details.ir-faq__item[open] > summary.ir-faq__q::after { transform: rotate(180deg) !important; } details.ir-faq__item > .ir-faq__answer, details.ir-faq__item > .ir-faq__a { display: block !important; padding: 0 20px 20px !important; margin: 0 !important; max-width: none !important; font-size: 15px; line-height: 1.65; color: rgba(0,0,0,.72); border: 0 !important; background: none !important; } details.ir-faq__item > .ir-faq__answer p, details.ir-faq__item > .ir-faq__a p { margin: 0 0 10px !important; font-size: 15px !important; line-height: 1.65 !important; } details.ir-faq__item > .ir-faq__answer p:last-child, details.ir-faq__item > .ir-faq__a p:last-child { margin-bottom: 0 !important; } details.ir-faq__item > .ir-faq__answer a, details.ir-faq__item > .ir-faq__a a { color: var(--K); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .ir-faq__inner, .ir-wc-faq .container > .ir-faq { max-width: 820px; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 760px) { details.ir-faq__item > summary.ir-faq__q { padding: 16px 16px 16px 18px !important; min-height: 56px; gap: 12px; } details.ir-faq__item .ir-faq__q-text, details.ir-faq__item > summary.ir-faq__q { font-size: 15.5px !important; } details.ir-faq__item > .ir-faq__answer, details.ir-faq__item > .ir-faq__a { padding: 0 18px 18px !important; } } /* Footer (gsm): zelfde chevron i.p.v. + / − */ @media (max-width: 760px) { .ir-footer__acc summary { align-items: center; } .ir-footer__acc summary::after { content: '' !important; width: 14px; height: 14px; background: var(--W60, rgba(255,255,255,.6)); -webkit-mask: var(--ir-chev) center / contain no-repeat; mask: var(--ir-chev) center / contain no-repeat; transition: transform .2s ease; } .ir-footer__acc[open] summary::after { content: '' !important; transform: rotate(180deg); } } /* Voorwaarden terugkomgarantie (pakkettentabel) */ .ir-tiers__garantie summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; padding: 6px 0; } .ir-tiers__garantie summary::-webkit-details-marker { display: none; } .ir-tiers__garantie summary::after { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ir-chev) center / contain no-repeat; mask: var(--ir-chev) center / contain no-repeat; transition: transform .2s ease; } .ir-tiers__garantie[open] summary::after { transform: rotate(180deg); } /* ═══════════════════════════════════════════════════════════════════════ v1.21.0 VASTTAPIJT: "géén losse tapijten" in het rood + wel/niet-overzicht ═══════════════════════════════════════════════════════════════════════ */ .ir-vt-only { display: flex; gap: 12px; align-items: flex-start; background: #FEF2F2; border: 1.5px solid #DC2626; border-radius: 14px; padding: 14px 16px; margin: 0 0 22px; } .ir-vt-only__icon { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #DC2626; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .ir-vt-only > div > strong { display: block; color: #B91C1C; font-size: 17px; line-height: 1.3; margin-bottom: 3px; } .ir-vt-only > div > span { display: block; font-size: 15px; line-height: 1.5; color: #7F1D1D; } .ir-vt-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; margin: 24px auto 0; } .ir-vt-scope__card { border-radius: var(--r-lg); padding: 22px; border: 1.5px solid var(--K10); background: #fff; } .ir-vt-scope__card--no { border-color: #FCA5A5; background: #FEF2F2; } .ir-vt-scope__card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; margin: 0 0 12px; } .ir-vt-scope__mark { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #0E8E5A; } .ir-vt-scope__card--no .ir-vt-scope__mark { background: #DC2626; } .ir-vt-scope__card--no h3 { color: #B91C1C; } .ir-vt-scope__card ul { list-style: none; margin: 0; padding: 0; } .ir-vt-scope__card li { padding: 9px 0; border-top: 1px solid var(--K10); font-size: 15px; line-height: 1.45; } .ir-vt-scope__card--no li { border-top-color: rgba(220,38,38,.18); color: #7F1D1D; } .ir-vt-scope__card li:first-child { border-top: 0; padding-top: 0; } .ir-vt-scope__test { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: 15px; color: var(--c-text-muted); line-height: 1.55; } .ir-vt-scope__test strong { color: var(--K); } .ir-lp-steps--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; } .ir-vt-form__only { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #B91C1C; margin: 4px 0 18px; } .ir-consent--vast { background: #FEF2F2; border-radius: 10px; padding: 12px 14px !important; } .ir-contact__method-icon { color: var(--K); } .ir-contact__method-icon .ir-ico { display: block; } .ir-form-upload__title .ir-ico { vertical-align: -3px; margin-right: 4px; } .ir-vt .ir-trustindex-zone { margin-top: 20px; } @media (max-width: 760px) { .ir-vt-only { padding: 12px 14px; gap: 10px; } .ir-vt-only > div > strong { font-size: 16px; } .ir-vt-scope { grid-template-columns: 1fr; gap: 12px; } .ir-vt-scope__card { padding: 18px; } .ir-lp-steps--3 { grid-template-columns: 1fr; } } /* 404 */ .ir-404__code { font-family: var(--font-head); font-size: 64px; font-weight: 800; line-height: 1; color: var(--B); margin: 0 0 6px; } .ir-404__ctas { justify-content: center; } .ir-lp .ir-404__grid { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin-left: auto; margin-right: auto; } .ir-404__wa { margin-top: 20px; font-size: 15px; } .ir-404__wa a { font-weight: 700; color: var(--K); } @media (max-width: 760px) { .ir-lp .ir-404__grid { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════════════ v1.21.0 STAP 3 "Kies uw adres en moment": de Route66-planner in dezelfde vormtaal als stap 1 en 2 (witte tegels, 1.5px rand, blauw = gekozen). Eén blauwe knop (Plan mijn afspraak); "Toon tijden" is secundair en verdwijnt zodra de kalender er staat. Volgorde via flex-order: Eco-uitleg → adres → tijden → gekozen afspraak → extra's. ═══════════════════════════════════════════════════════════════════════ */ /* Samenvatting "Uw keuze" (booking.js) */ .ir-bk-sum { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--WG); margin: 0 0 16px; } .ir-bk-sum__main { min-width: 0; } .ir-bk-sum__label { display: block; font-size: 12px; font-weight: 700; color: rgba(0,0,0,.55); margin-bottom: 2px; } .ir-bk-sum__what { display: block; font-size: 15px; font-weight: 700; color: var(--K); line-height: 1.35; } .ir-bk-sum__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--K10); } .ir-bk-sum__price strong { font-family: var(--font-head); font-size: 30px; font-weight: 800; line-height: 1; color: var(--K); } .ir-bk-sum__eco { font-size: 13px; font-weight: 700; color: #0E7A45; } .ir-bk-sum.is-empty .ir-bk-sum__label { display: none; } .ir-bk-sum.is-empty .ir-bk-sum__what { font-weight: 600; color: var(--c-text-muted); font-size: 14px; } .ir-bk-sum.is-empty .ir-bk-sum__price { display: none; } .ir-bk-on .woocommerce-variation-price, .ir-bk-on .woocommerce-variation-description, .ir-bk-on .woocommerce-variation-availability { display: none !important; } .ir-bk-on .woocommerce-variation.single_variation { margin: 0 !important; } /* Planner-kader: geen kaart-in-kaart, geen negatieve marges (liep buiten het blok op gsm) */ .ir-wc-booking .route66-picker { display: flex; flex-direction: column; gap: 0; margin: 0 !important; padding: 0 !important; max-width: none !important; border: 0 !important; border-radius: 0 !important; background: none !important; --r66-accent: #0E7A45; --r66-accent-soft: #EFFAF4; --r66-border: var(--K10); --r66-muted: rgba(0,0,0,.6); } .ir-wc-booking .route66-require-msg { order: -1; border-radius: 12px; } .ir-wc-booking .route66-eco-callout { order: 1; } .ir-wc-booking .route66-field--search { order: 2; } .ir-wc-booking .route66-addr { order: 3; } .ir-wc-booking .route66-load { order: 4; } .ir-wc-booking .route66-result { order: 5; } .ir-wc-booking .route66-zone { order: 6; } .ir-wc-booking .route66-wa-note { order: 7; } .ir-wc-booking .route66-baw { order: 8; } .ir-wc-booking .route66-trust { display: none !important; } /* staat al in de regel boven de knop */ /* Eco-uitleg: één rustige groene strook met blad-icoon */ .ir-wc-booking .route66-eco-callout { display: flex !important; gap: 10px !important; align-items: flex-start; padding: 12px 14px !important; margin: 0 0 16px !important; background: #EFFAF4 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; } .ir-wc-booking .route66-eco-callout__icon { display: block !important; flex: 0 0 22px; width: 22px; height: 22px; font-size: 0 !important; background: #0E7A45 !important; border-radius: 0 !important; padding: 0 !important; margin-top: 1px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c6 0 13-4 14-15-8 0-14 3-15 10-.3 2 .2 3.6 1 5'/%3E%3Cpath d='M5 19c2-4 5-7 9-9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c6 0 13-4 14-15-8 0-14 3-15 10-.3 2 .2 3.6 1 5'/%3E%3Cpath d='M5 19c2-4 5-7 9-9'/%3E%3C/svg%3E") center / contain no-repeat; } .ir-wc-booking .route66-eco-callout__icon img, .ir-wc-booking .route66-eco-callout__icon * { display: none !important; } .ir-wc-booking .route66-eco-callout__text { gap: 2px !important; background: none !important; padding: 0 !important; } .ir-wc-booking .route66-eco-callout__text strong { font-size: 15px !important; color: #0E6B45 !important; line-height: 1.35; } .ir-wc-booking .route66-eco-callout__text span { font-size: 13px !important; color: rgba(0,0,0,.68) !important; line-height: 1.45; } /* Adresvelden: zelfde velden als het offerteformulier */ .ir-wc-booking .route66-field label { font-size: 13px !important; font-weight: 700 !important; color: rgba(0,0,0,.6) !important; margin: 0 0 6px !important; } .ir-wc-booking .route66-input { min-height: 50px !important; padding: 12px 14px !important; font-size: 16px !important; font-family: var(--font) !important; color: var(--K) !important; border: 1.5px solid var(--K10) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; } .ir-wc-booking .route66-input:focus { border-color: var(--B) !important; box-shadow: 0 0 0 3px rgba(0,160,253,.15) !important; outline: none !important; } .ir-wc-booking .route66-field--search { margin: 0 0 12px !important; } .ir-wc-booking .route66-help { margin: 8px 0 0 !important; } .ir-wc-booking .route66-help a { font-size: 13px; font-weight: 600; color: rgba(0,0,0,.6) !important; } .ir-wc-booking .route66-addr { gap: 10px !important; margin: 0 0 4px; grid-template-columns: 1fr 96px !important; } .ir-wc-booking .route66-ac-dd { border: 1px solid var(--K10) !important; border-radius: 12px !important; } .ir-wc-booking .route66-ac-dd__item:hover, .ir-wc-booking .route66-ac-dd__item.is-active { background: rgba(0,160,253,.08) !important; } /* "Toon beschikbare tijden": secundair, en weg zodra de tijden er staan */ .ir-wc-booking .route66-picker .button.route66-load, .ir-wc-booking .route66-picker .button.route66-retry { width: 100% !important; min-height: 48px !important; margin: 12px 0 0 !important; padding: 12px 16px !important; background: #fff !important; color: var(--K) !important; border: 1.5px solid var(--K) !important; border-radius: 12px !important; box-shadow: none !important; font-family: var(--font) !important; font-size: 15px !important; font-weight: 700 !important; transform: none !important; } .ir-wc-booking .route66-picker .button.route66-load:hover { background: var(--WG) !important; } .ir-wc-booking .route66-picker:has(.route66-cal) .route66-load { display: none !important; } .ir-wc-booking .route66-result { margin: 16px 0 0 !important; } .ir-wc-booking .route66-result:empty { display: none; } .ir-wc-booking .route66-hint, .ir-wc-booking .route66-none { font-size: 14px !important; color: rgba(0,0,0,.6) !important; } /* Snelkeuze-momenten: zelfde tegels als stap 1 */ .ir-wc-booking .route66-suggest { margin: 0 0 16px !important; } .ir-wc-booking .route66-suggest__label { font-size: 13px !important; font-weight: 700 !important; color: rgba(0,0,0,.6) !important; margin: 0 0 8px !important; } .ir-wc-booking .route66-suggest__row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; } .ir-wc-booking .route66-suggest__chip, .ir-wc-booking .route66-slot { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px !important; text-align: left !important; min-height: 64px; padding: 10px 12px !important; border: 1.5px solid var(--K10) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; cursor: pointer; font-family: var(--font) !important; transition: border-color .15s, background .15s; } .ir-wc-booking .route66-suggest__chip:hover, .ir-wc-booking .route66-slot:hover { border-color: rgba(0,0,0,.3) !important; } .ir-wc-booking .route66-suggest__chip-date { font-size: 13px !important; font-weight: 700 !important; color: var(--K) !important; } .ir-wc-booking .route66-slot__time { font-size: 15px !important; font-weight: 800 !important; color: var(--K) !important; line-height: 1.2 !important; } .ir-wc-booking .route66-slot__price { font-size: 13px !important; font-weight: 700 !important; color: rgba(0,0,0,.6) !important; } .ir-wc-booking .route66-slot__price--eco { color: #0E7A45 !important; } .ir-wc-booking .route66-slot__tag { order: -1; display: inline-block; margin-bottom: 3px; padding: 2px 8px; border-radius: 20px; background: #0E7A45; color: #fff !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .02em; text-transform: none !important; } /* Eco-moment: groene rand; gekozen: blauw, net als de knoppen in stap 1 en 2 */ .ir-wc-booking .route66-suggest__chip--pref, .ir-wc-booking .route66-slot--preferred { border-color: #7CCBA2 !important; background: #F4FBF7 !important; } .ir-wc-booking .route66-slot.is-selected { border-color: var(--B) !important; background: rgba(0,160,253,.08) !important; box-shadow: inset 0 0 0 1px var(--B) !important; } .ir-wc-booking .route66-slot.is-selected .route66-slot__time, .ir-wc-booking .route66-slot.is-selected .route66-slot__price { color: var(--K) !important; } .ir-wc-booking .route66-slot.is-selected .route66-slot__price--eco { color: #0E7A45 !important; } .ir-wc-booking .route66-slot.is-selected .route66-slot__tag { color: #fff !important; } /* Kalender */ .ir-wc-booking .route66-cal { border: 1.5px solid var(--K10) !important; border-radius: 14px !important; overflow: hidden; background: #fff; } .ir-wc-booking .route66-cal__head { background: #fff !important; border-bottom: 1px solid var(--K10) !important; padding: 10px 12px !important; } .ir-wc-booking .route66-cal__title { font-family: var(--font-head); font-size: 17px !important; font-weight: 800 !important; text-transform: capitalize; } .ir-wc-booking .route66-cal__nav { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1.5px solid var(--K10) !important; background: #fff !important; color: var(--K) !important; font-size: 20px !important; padding: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; } .ir-wc-booking .route66-cal__nav:disabled { opacity: .3 !important; } .ir-wc-booking .route66-cal__grid { gap: 4px !important; padding: 10px !important; } .ir-wc-booking .route66-cal__dow { font-size: 11px !important; color: rgba(0,0,0,.45) !important; } .ir-wc-booking .route66-cal__day { aspect-ratio: auto !important; height: 42px; border-radius: 10px !important; font-size: 14px !important; font-family: var(--font) !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; } .ir-wc-booking .route66-cal__day--off { color: rgba(0,0,0,.22) !important; background: none !important; } .ir-wc-booking .route66-cal__day--available { background: rgba(0,160,253,.08) !important; color: var(--K) !important; font-weight: 800 !important; } .ir-wc-booking .route66-cal__day--available:hover { background: rgba(0,160,253,.18) !important; } .ir-wc-booking .route66-cal__day.is-selected { background: var(--B) !important; color: #fff !important; } /* De bolletjes en legende maakten geen onderscheid tussen Eco- en gewone dagen: weg. De Eco-momenten staan als tegels bovenaan en met een label bij de uren. */ .ir-wc-booking .route66-cal__dot, .ir-wc-booking .route66-legend { display: none !important; } .ir-wc-booking .route66-times { margin: 16px 0 0 !important; } .ir-wc-booking .route66-times__title { font-size: 14px !important; font-weight: 800 !important; color: var(--K) !important; margin: 0 0 8px !important; } .ir-wc-booking .route66-times__title::first-letter { text-transform: uppercase; } .ir-wc-booking .route66-times__chips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } /* Gekozen afspraak: duidelijke bevestiging onder de tijden */ .ir-wc-booking .route66-zone { margin: 14px 0 0 !important; font-size: 14px !important; line-height: 1.45; } .ir-wc-booking .route66-zone:empty { display: none; } .ir-wc-booking .route66-zone--info { color: rgba(0,0,0,.65) !important; font-weight: 600; } .ir-wc-booking .route66-zone--ok { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(0,160,253,.08); color: var(--K) !important; font-weight: 700 !important; border: 1.5px solid var(--B); } .ir-wc-booking .route66-zone--ok::before { content: ''; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--B) 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='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center / 14px no-repeat; } /* Extra's onderaan: klein en rustig */ .ir-wc-booking .route66-wa-note { margin: 14px 0 0 !important; font-size: 13px !important; color: rgba(0,0,0,.6) !important; } .ir-wc-booking .route66-wa-note a { color: var(--K) !important; font-weight: 700; } .ir-wc-booking .route66-baw { margin: 8px 0 0 !important; } .ir-wc-booking .route66-baw__toggle { color: rgba(0,0,0,.6) !important; font-size: 13px !important; font-weight: 600 !important; padding: 2px 0 !important; background: none !important; box-shadow: none !important; } .ir-wc-booking .route66-baw__row { gap: 8px !important; } .ir-wc-booking .route66-picker .button.route66-baw__apply { background: var(--K) !important; color: #fff !important; border-radius: 12px !important; padding: 0 16px !important; min-height: 50px !important; box-shadow: none !important; font-size: 14px !important; } .ir-wc-booking .route66-baw__badge { background: #EFFAF4 !important; color: #0E6B45 !important; border-color: #BFE3CB !important; } /* Laatste regel boven de knop */ .ir-wc-booking .ir-bk-remind { margin: 18px 0 12px !important; padding-top: 14px; border-top: 1px solid var(--K10); } @media (max-width: 760px) { .ir-bk-sum { padding: 12px 14px; } .ir-bk-sum__price strong { font-size: 28px; } .ir-wc-booking .route66-addr { grid-template-columns: 1fr 84px !important; } .ir-wc-booking .route66-times__chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* v1.21.0: over ons op gsm liep 26px buiten beeld (grid-kolom kromp niet onder de inhoud) */ .ir-about-story__inner > * { min-width: 0; } @media (max-width: 960px) { .ir-about-story__inner { grid-template-columns: minmax(0, 1fr) !important; } } .ir-about-story__title { overflow-wrap: break-word; } /* v1.21.0: FAQ-antwoord op desktop even breed als de vraagtekst (niet onder het icoon) */ @media (min-width: 761px) { details.ir-faq__item > .ir-faq__answer, details.ir-faq__item > .ir-faq__a { padding-right: 68px !important; } } /* ═══════════════════════════════════════════════════════════════════════ v1.21.0 AFREKENEN: zelfde vormtaal als het boekblok (klassiek = live, blok = staging). Rustige witte kaarten, 1.5px randen, 12px hoeken, zwarte koppen, blauw enkel voor de knop en de gekozen betaalwijze. ═══════════════════════════════════════════════════════════════════════ */ .ir-co-head { max-width: 1100px; margin: 0 auto 22px; } .ir-co-head__title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 6px; } .ir-co-head__sub { margin: 0; font-size: 15px; color: var(--c-text-muted); } .ir-co-head__sub .ir-ico { color: #0E8E5A; vertical-align: -2px; margin: 0 2px 0 4px; } body.ir-default-checkout .ir-page-content > .container { padding-top: 32px !important; } /* Route66-fotoblok */ body.ir-default-checkout .route66-cophoto { max-width: 1100px; margin: 0 auto 22px; padding: 16px 18px; border: 1.5px solid var(--K10); border-radius: 14px; background: var(--WG); } body.ir-default-checkout .route66-cophoto__title { font-size: 16px; font-weight: 800; color: var(--K); margin-bottom: 4px; } body.ir-default-checkout .route66-cophoto__hint { font-size: 14px; color: rgba(0,0,0,.65); line-height: 1.5; } body.ir-default-checkout .route66-cophoto__btn { background: #fff; color: var(--K); border: 1.5px solid var(--K); border-radius: 12px; min-height: 46px; padding: 10px 18px; font-weight: 700; font-size: 15px; } body.ir-default-checkout .route66-cophoto__btn:hover { background: var(--WG); } body.ir-default-checkout .route66-cophoto__ok { color: #0E7A45; } #route66-edit-cart { max-width: 1100px; margin: 0 auto 16px; font-size: 14px; } #route66-edit-cart a { color: rgba(0,0,0,.6); font-weight: 600; } /* ── Klassiek (live) ── */ body.ir-default-checkout .woocommerce-billing-fields h3, body.ir-default-checkout .woocommerce-additional-fields h3, body.ir-default-checkout #order_review_heading { font-family: var(--font-head); font-size: 22px; font-weight: 800; margin: 8px 0 14px; padding: 0; border: 0; } body.ir-default-checkout .form-row label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: rgba(0,0,0,.6); } body.ir-default-checkout .form-row input.input-text, body.ir-default-checkout .form-row textarea, body.ir-default-checkout .form-row select { border: 1.5px solid var(--K10); border-radius: 12px; min-height: 50px; font-size: 16px; } body.ir-default-checkout .form-row textarea { min-height: 90px; } /* "is toegevoegd aan je winkelwagen" + knop: overbodig op de afrekenpagina */ body.ir-default-checkout .woocommerce-message:has(a.wc-forward) { display: none; } /* Kortingscode: een rustige tekstregel i.p.v. een blauwe balk */ body.ir-default-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: none; border: 0; padding: 0; margin: 0 0 14px; font-size: 14px; color: rgba(0,0,0,.6); } body.ir-default-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; } body.ir-default-checkout .woocommerce-form-coupon-toggle a { color: var(--K); font-weight: 700; } body.ir-default-checkout .checkout_coupon { border: 1.5px solid var(--K10); border-radius: 14px; } /* Bedrijfsvinkje in dezelfde stijl als de velden */ body.ir-default-checkout .ir-company-toggle { border: 1.5px solid var(--K10); background: #fff; border-radius: 12px; padding: 12px 14px; } /* Overzicht als kaart */ body.ir-default-checkout .woocommerce-checkout-review-order-table { border: 1.5px solid var(--K10); border-radius: 14px; border-collapse: separate; border-spacing: 0; } body.ir-default-checkout .woocommerce-checkout-review-order-table thead { display: none; } body.ir-default-checkout .woocommerce-checkout-review-order-table .cart_item .product-name { font-weight: 800; font-size: 15px; } body.ir-default-checkout .woocommerce-checkout-review-order-table .product-quantity { display: none; } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation { display: block; margin: 8px 0 0; font-weight: 400; line-height: 1.55; } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation dt { display: inline; float: none; font-weight: 700; color: rgba(0,0,0,.55); margin: 0 4px 0 0; } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation dd { display: inline; float: none; margin: 0; color: var(--K); } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation dd::after { content: ''; display: block; } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation dd p { display: inline; margin: 0; } body.ir-default-checkout .woocommerce-checkout-review-order-table td.product-total { text-align: right; vertical-align: top; white-space: nowrap; font-weight: 700; } body.ir-default-checkout .woocommerce-checkout-review-order-table tfoot th { text-align: left; font-weight: 600; } body.ir-default-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; } body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total th, body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total td { border-bottom: 0 !important; } body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--K); font-family: var(--font-head); font-size: 26px; } body.ir-default-checkout .woocommerce-checkout-review-order-table .includes_tax { display: block; font-size: 12px; font-weight: 500; color: rgba(0,0,0,.5); margin-top: 2px; } body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total .includes_tax .amount { font-family: var(--font); font-size: 12px; font-weight: 500; color: rgba(0,0,0,.5); } body.ir-default-checkout .woocommerce-checkout-review-order-table .order-total th { vertical-align: top; } body.ir-default-checkout .ir-page-body > .woocommerce { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } body.ir-default-checkout .route66-cophoto__hint { margin-bottom: 12px; } body.ir-default-checkout #payment ul.payment_methods li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; } body.ir-default-checkout #payment ul.payment_methods li > input { margin: 0; width: 18px; height: 18px; } body.ir-default-checkout #payment ul.payment_methods li > label { margin: 0 !important; font-size: 15px; font-weight: 700; line-height: 1.35; } body.ir-default-checkout #payment ul.payment_methods li > .payment_box { grid-column: 1 / -1; padding: 2px 0 0 28px; font-size: 14px; } body.ir-default-checkout #payment ul.payment_methods li > .payment_box p { margin: 0; } /* Betaalwijze: één witte kaart, de gekozen optie in het blauw zoals in het boekblok */ body.ir-default-checkout #payment { background: none; padding: 0; margin-top: 18px; } body.ir-default-checkout #payment ul.payment_methods li { border: 1.5px solid var(--B); background: rgba(0,160,253,.06); border-radius: 12px; padding: 14px 16px; } body.ir-default-checkout #payment ul.payment_methods li input { accent-color: var(--B); } body.ir-default-checkout #payment .payment_box { background: none; border: 0; padding: 4px 0 0 26px; margin: 0; color: rgba(0,0,0,.65); } body.ir-default-checkout #payment .payment_box::before { display: none; } body.ir-default-checkout .woocommerce-terms-and-conditions-wrapper { background: none; border: 0; padding: 0; margin: 14px 0; font-size: 13px; color: rgba(0,0,0,.6); } body.ir-default-checkout .woocommerce-privacy-policy-text p { margin: 0; } body.ir-default-checkout .ir-checkout-trust { background: var(--WG); border-radius: 12px; } body.ir-default-checkout #place_order { border-radius: 14px; font-size: 18px; min-height: 58px; } /* ── Blok (staging) ── */ .wc-block-checkout { font-family: var(--font); } .wc-block-checkout .wc-block-components-checkout-step__title, .wc-block-components-checkout-order-summary__title-text, .wc-block-checkout .wc-block-components-title { font-family: var(--font-head) !important; font-size: 22px !important; font-weight: 800 !important; color: var(--K) !important; } .wc-block-checkout__guest-checkout-notice { display: none !important; } .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-blocks-components-select__select, .wc-block-checkout .wc-block-components-textarea { border: 1.5px solid var(--K10) !important; border-radius: 12px !important; background: #fff !important; } .wc-block-checkout .wc-block-components-text-input input:focus, .wc-block-checkout .wc-blocks-components-select__select:focus { border-color: var(--B) !important; box-shadow: 0 0 0 3px rgba(0,160,253,.15) !important; outline: 0 !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-option, .wc-block-checkout .wc-block-components-radio-control__option { border-radius: 12px !important; } .wc-block-checkout .wc-block-components-radio-control--highlight-checked { border: 0 !important; } .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: inset 0 0 0 1.5px var(--B) !important; background: rgba(0,160,253,.06) !important; border-radius: 12px !important; } .wc-block-checkout .wc-block-components-radio-control__input:checked { border-color: var(--B) !important; } .wc-block-checkout .wc-block-components-radio-control__input:checked::before { background: var(--B) !important; } .wc-block-checkout .wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--B) !important; border-color: var(--B) !important; } .wc-block-checkout .wc-block-components-address-card { border: 1.5px solid var(--K10) !important; border-radius: 12px !important; } .wc-block-checkout a, .wc-block-checkout .wc-block-components-address-card__edit { color: var(--K) !important; } .wc-block-checkout .wc-block-components-checkout-place-order-button { background: var(--B) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; min-height: 58px !important; font-family: var(--font-head) !important; font-size: 18px !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(0,160,253,.3) !important; } .wc-block-checkout .wc-block-components-totals-coupon__button { background: var(--K) !important; color: #fff !important; border-radius: 12px !important; } .wc-block-checkout .wc-block-components-totals-coupon__button:disabled { opacity: .35 !important; } .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block, .checkout-order-summary-block-fill { border: 1.5px solid var(--K10) !important; border-radius: 14px !important; background: #fff; overflow: hidden; } .checkout-order-summary-block-fill-wrapper { border: 0 !important; background: none !important; } .checkout-order-summary-block-fill-wrapper > .wc-block-components-checkout-step__heading { margin: 0 0 12px !important; } .wc-block-components-checkout-order-summary__title { padding: 16px 16px !important; margin: 0 !important; } .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content { padding: 0 !important; } .wc-block-checkout__sidebar .wc-block-components-totals-wrapper, .checkout-order-summary-block-fill .wc-block-components-totals-wrapper { padding-left: 16px !important; padding-right: 16px !important; } .wc-block-components-order-summary .wc-block-components-order-summary-item { padding-left: 0 !important; } .wc-block-components-order-summary-item__image img[src*="placeholder"] { display: none !important; } .wc-block-components-order-summary-item__image:has(img[src*="placeholder"]) { display: none !important; } .wc-block-components-order-summary-item:has(img[src*="placeholder"]) .wc-block-components-order-summary-item__description { padding-left: 0 !important; margin-left: 0 !important; } .wc-block-components-order-summary-item__quantity { display: none !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-weight: 800 !important; font-size: 15px !important; } .wc-block-components-order-summary-item__individual-prices { display: none !important; } .wc-block-components-product-details { font-size: 13px !important; line-height: 1.55 !important; color: rgba(0,0,0,.7) !important; margin: 6px 0 0 !important; } .wc-block-components-product-details > span { display: block !important; } .wc-block-components-product-details > span > span[aria-hidden] { display: none !important; } .wc-block-components-product-details__name { font-weight: 700 !important; color: rgba(0,0,0,.55) !important; } .wc-block-components-product-details > span.wc-block-components-product-details__goed-om-te-weten { display: none !important; } /* staat al in de kop bovenaan */ .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--font-head) !important; font-size: 26px !important; font-weight: 800 !important; } .wc-block-components-checkout-order-summary__title-price { font-weight: 800 !important; } body.ir-default-checkout .woocommerce-checkout-review-order-table dl.variation .variation-Goedomteweten { display: none; } @media (min-width: 900px) { body.ir-default-checkout form.checkout { grid-template-rows: auto 1fr; } body.ir-default-checkout #order_review_heading { margin-bottom: 14px; } } /* v1.21.0: "Land/regio: België" is de enige keuze → niet tonen (het verborgen veld blijft meesturen) */ body.ir-default-checkout #billing_country_field { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ v1.21.1 OVER ONS (nieuw systeem) ═══════════════════════════════════════════════════════════════════════ */ .ir-lp-prose p { font-size: 17px; line-height: 1.7; color: rgba(0,0,0,.78); margin: 0 0 14px; } .ir-about2-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1100px; margin: 24px auto 0; } .ir-about2-values__card { background: #fff; border: 1px solid var(--K10); border-radius: var(--r-lg); padding: 22px; } .ir-about2-values__card h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; } .ir-about2-values__card p { font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0; } .ir-about2 .ir-about-b2b__title { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; } .ir-about2-info { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; max-width: 920px; margin: 24px auto 0; } .ir-about2-info__card { margin: 0; padding: 20px 22px; border: 1px solid var(--K10); border-radius: var(--r-lg); background: #fff; } .ir-about2-info__card > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--K10); font-size: 15px; } .ir-about2-info__card > div:first-child { border-top: 0; padding-top: 0; } .ir-about2-info__card dt { font-weight: 700; color: rgba(0,0,0,.55); } .ir-about2-info__card dd { margin: 0; } .ir-about2-info__card a { color: var(--K); font-weight: 700; } .ir-about2-info__muted { color: var(--c-text-muted); font-size: 13px; } .ir-about2-info__certs { list-style: none; display: grid; gap: 12px; align-content: start; } .ir-about2-info__certs li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; } .ir-about2-info__certs .ir-ico { color: #0E8E5A; flex: 0 0 16px; margin-top: 3px; } .ir-about2-info__certs strong { display: block; } .ir-about2-info__certs span { color: var(--c-text-muted); } .ir-about2-info__certs strong { color: var(--K); } @media (max-width: 900px) { .ir-about2-values { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .ir-about2-values { grid-template-columns: 1fr; gap: 10px; } .ir-about2-values__card { padding: 18px; } .ir-about2-info { grid-template-columns: 1fr; } .ir-about2-info__card > div { grid-template-columns: 100px 1fr; } .ir-lp-prose p { font-size: 16px; } } /* ═══════════════════════════════════════════════════════════════════════ v1.22.0 STADS-, PROVINCIE- EN DOCUMENTPAGINA'S ═══════════════════════════════════════════════════════════════════════ */ .ir-lp-sub { font-size: 16px; color: var(--c-text-muted); margin: 6px 0 0; } .ir-stad2__cta { margin-top: 24px; } .ir-stad2__nearby { list-style: none; padding: 0; margin: 20px auto 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ir-stad2__nearby a { display: inline-block; padding: 10px 16px; border: 1px solid var(--K10, rgba(0,0,0,.1)); border-radius: 999px; background: var(--W); color: var(--ir-ink, #000); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .15s, color .15s; } .ir-stad2__nearby a:hover { border-color: var(--B); color: var(--B); } .ir-stad2__all { margin-top: 18px; font-size: 15px; } .ir-stad2__all a { font-weight: 700; color: var(--ir-ink, #000); } .ir-prov__all { list-style: none; padding: 0; margin: 24px auto 0; max-width: 1040px; columns: 4 200px; column-gap: 24px; } .ir-prov__all li { break-inside: avoid; } .ir-prov__all a { display: block; padding: 7px 0; font-size: 15px; color: rgba(0,0,0,.75); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.05); } .ir-prov__all a:hover { color: var(--B); } .ir-stad2 .ir-lp-prose p:last-child { margin-bottom: 0; } /* Werkgebied: provincienaam = link naar de provinciepagina; hero-knoppen netjes onder elkaar op gsm */ .ir-province-block__name { text-decoration: none; } a.ir-province-block__name:hover { color: var(--B); } .ir-werkgebied-page .ir-lp-hero__ctas { justify-content: center; } .ir-werkgebied-page .ir-lp-hero { padding-bottom: 32px; } /* Documentpagina's (algemene voorwaarden, annulatiebeleid, privacy) */ .ir-doc__hero { padding: 32px 0 28px; } .ir-doc__hero .ir-lp-hero__h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 0; overflow-wrap: anywhere; } .ir-doc__body { font-size: 16px; line-height: 1.7; color: rgba(0,0,0,.8); overflow-wrap: anywhere; } .ir-doc__body h2, .ir-doc__body h3, .ir-doc__body h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.2; color: var(--ir-ink, #000); text-transform: none; letter-spacing: 0; margin: 28px 0 10px; } .ir-doc__body h2 { font-size: 22px; } .ir-doc__body h3, .ir-doc__body h4 { font-size: 18px; } .ir-doc__body p { margin: 0 0 12px; } .ir-doc__body ul, .ir-doc__body ol { margin: 0 0 14px; padding-left: 22px; } .ir-doc__body ul { list-style: disc; } .ir-doc__body ol { list-style: decimal; } .ir-doc__body li { margin-bottom: 6px; } .ir-doc__body a { color: var(--B); text-decoration: underline; } .ir-doc__body table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 14px; display: block; overflow-x: auto; } .ir-doc__body th, .ir-doc__body td { border: 1px solid rgba(0,0,0,.1); padding: 8px 10px; text-align: left; vertical-align: top; } .ir-doc > .ir-lp-sec { padding-top: 36px; } /* Gidsen: opsommingen tonen weer hun bolletjes/nummers */ ul.ir-article__list { list-style: disc; } ol.ir-article__list { list-style: decimal; } .ir-article__list li::marker { color: var(--B); font-weight: 700; } /* Lege winkelwagen */ .ir-cart-empty { max-width: 1040px; margin: 0 auto; text-align: center; } .ir-cart-empty .ir-lp-hero__h1 { font-size: clamp(28px, 4vw, 42px); } .ir-cart-empty .ir-lp-hero__lead { max-width: 620px; margin-left: auto; margin-right: auto; } .ir-cart-empty .ir-dtiles__grid { text-align: left; margin-top: 8px; } .woocommerce-cart .return-to-shop, .woocommerce-cart .cart-empty.woocommerce-info { display: none; } @media (max-width: 700px) { .ir-stad2__nearby { gap: 8px; } .ir-stad2__nearby a { padding: 9px 14px; font-size: 14px; } .ir-prov__all { columns: 2; column-gap: 16px; } .ir-prov__all a { font-size: 14px; } .ir-doc__hero { padding: 20px 0 18px; } .ir-doc__body { font-size: 15px; } } /* Contact: "Liever meteen boeken?" boven de contactkanalen (v1.22.0) */ .ir-contact__book { display: block; margin: 18px 0 14px; padding: 16px 18px; border: 1.5px solid var(--B); border-radius: 14px; background: #F0F9FF; color: var(--ir-ink, #000); text-decoration: none; } .ir-contact__book strong { display: block; font-size: 17px; margin-bottom: 4px; } .ir-contact__book span { display: block; font-size: 14px; color: rgba(0,0,0,.7); line-height: 1.5; } .ir-contact__book .ir-contact__book-cta { margin-top: 8px; font-weight: 800; color: var(--ir-ink, #000); font-size: 15px; } .ir-contact__book:hover { background: #E0F2FE; } .ir-contact__book .ir-contact__book-cta span { display: inline; margin: 0; font-size: inherit; color: inherit; } .ir-contact__nophone { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: rgba(0,0,0,.65); } .ir-contact__nophone strong { color: var(--ir-ink, #000); } /* ═══════════════════════════════════════════════════════════════════════ v1.22.2 TESTBOEKING-FIXES (25/09/2026) ═══════════════════════════════════════════════════════════════════════ */ /* Planner: postcode smal, gemeente breed (was omgekeerd: "Mache…") */ .ir-wc-booking .route66-addr { grid-template-columns: 96px 1fr 96px !important; } .ir-wc-booking .route66-field--street { grid-column: 1 / 3 !important; } .ir-wc-booking .route66-field--nr { grid-column: 3 / 4 !important; } .ir-wc-booking .route66-field--pc { grid-column: 1 / 2 !important; } .ir-wc-booking .route66-field--city { grid-column: 2 / 4 !important; } @media (max-width: 700px) { .ir-wc-booking .route66-addr { grid-template-columns: 84px 1fr 84px !important; } } /* Bedankpagina: volle breedte op gsm (48px extra binnenmarge liet maar 239px over) en "Wat gebeurt er nu?" bovenaan */ .woocommerce-order-received .ir-page-body > .woocommerce { padding-left: 0 !important; padding-right: 0 !important; } .woocommerce-order-received .woocommerce-order { display: flex; flex-direction: column; } .woocommerce-order-received .woocommerce-order > .woocommerce-notice { order: 0; } .woocommerce-order-received .woocommerce-order > .ir-thanks { order: 1; margin: 8px 0 28px; } .woocommerce-order-received .woocommerce-order > .woocommerce-order-overview { order: 2; } .woocommerce-order-received .woocommerce-order > .woocommerce-order-details { order: 3; } .woocommerce-order-received .woocommerce-order > .woocommerce-customer-details { order: 4; } .woocommerce-order-received .woocommerce-notice--success { font-family: var(--font-head); font-size: clamp(26px, 5vw, 36px); font-weight: 800; line-height: 1.15; color: var(--ir-ink, #000); margin: 0 0 16px; } @media (max-width: 700px) { .woocommerce-order-received .ir-thanks { padding: 18px !important; } } .woocommerce-order-received .ir-page-content > .container { padding-top: 28px !important; } .woocommerce-order-received .woocommerce-order > .woocommerce-notice { margin-top: 0; } /* ═══════════════════════════════════════════════════════════════════════ v1.23.0 CONVERSIE-ANALYSE (27/09/2026) ═══════════════════════════════════════════════════════════════════════ */ .ir-bk__group.is-hidden { display: none; } .ir-bk-warn { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; font-size: 14px; font-weight: 700; line-height: 1.4; } .ir-bk__group.is-missing .ir-bk__chips .ir-bk__chip { border-color: #DC2626; } .ir-bk__tiers.is-missing .ir-bk__tier { border-color: #DC2626; } .ir-wc-booking .route66-field.is-missing .route66-input { border-color: #DC2626 !important; } .ir-wc-booking .route66-cal.is-missing, .ir-wc-booking [data-route66-result].is-missing { outline: 2px solid #DC2626; outline-offset: 4px; border-radius: 14px; }