/* tokens-referentie.css --------------------------------------------------------------------------- De globale laag van randoco.com, uitgemeten op 390, 768, 1280, 1440 en 1920 en teruggerekend naar de formules erachter. Niets in dit bestand is geschat. HET SYSTEEM De referentie zet de root-fontgrootte op 12px, en op mobiel op 16px. Elke maat op de site is vervolgens min(A * 1rem + B * 1vw, maximum), waarbij het maximum precies op 1440 bereikt wordt en daarboven blijft staan. Dat A en B kloppen is niet aangenomen maar nagerekend: uit de metingen op 768 en 1440 volgen A en B, en die zijn daarna getoetst op 1280 en op 390. Op 390 valt de root van 12px naar 16px, en juist daar valt te zien dat het klopt. Een paar voorbeelden, gemeten tegen berekend: body font-size 0.75rem + 0.625vw 390: 12 + 2.4375 = 14.4375 gemeten 14.4375 768: 9 + 4.8 = 13.8 gemeten 13.8 1280: 9 + 8 = 17 gemeten 17 kop 75 1.75rem + 3.75vw 390: 28 + 14.625 = 42.625 gemeten 42.625 1280: 21 + 48 = 69 gemeten 69 kop 135 1.95rem + 7.75vw 390: 31.2 + 30.225 = 61.425 gemeten 61.425 1280: 23.4 + 99.2 = 122.6 gemeten 122.6 knop padding-x 1.125rem + 0.625vw 390: 18 + 2.4375 = 20.4375 gemeten 20.4375 sectiepadding 2.75rem + 5vw 390: 44 + 19.5 = 63.5 gemeten 63.5 hoekradius klein 0.875rem + 1.875vw 390: 14 + 7.3125 = 21.3125 gemeten 21.3125 Waarom dit ertoe doet: onze eigen koppen stonden op clamp-waarden die op 1440 uitkwamen op 72, 111.04, 64.51, 85.86, 129.6 en 74.88px, zes verschillende maten waar de referentie er twee heeft (75 en 135). Zolang de schaal niet klopt, blijft elke losse correctie een pleister. Dit bestand definieert alleen; het past nog niets toe. Dat gebeurt stap voor stap, met een meting per stap. --------------------------------------------------------------------------- */ :root { /* ---- kleuren, exacte rgb uit de meting ---------------------------------- */ --ref-zwart: rgb(0, 0, 0); /* body, koppen, alineas: 86 van de 104 koppen */ --ref-grijs: rgb(115, 115, 115); /* secundaire alineas: 84 voorkomens */ --ref-wit: rgb(255, 255, 255); --ref-blauw: #0F172A; /* elke knop, zonder uitzondering */ --ref-geel: #F59E0B; /* elk geel vlak, zonder uitzondering */ --ref-vlak-licht: #F8FAFC; /* lichte sectie-achtergrond */ --ref-vlak-zwart: rgb(0, 0, 0); /* donkere sectie-achtergrond */ /* ---- typografie --------------------------------------------------------- */ --ref-font: Arial, Helvetica, sans-serif; --ref-tekst: min(calc(0.75rem + 0.625vw), 18px); --ref-tekst-lh: 1.4; /* 25.2/18, 19.32/13.8, 20.2125/14.4375 */ /* De referentie kent twee grote kopmaten en een handvol kleine. Meer zijn er niet; alles wat er bij ons tussenin zat is een eigen bedenksel. */ --ref-kop-xxl: min(calc(1.95rem + 7.75vw), 135px); --ref-kop-xxl-lh: 1; /* 135/135 */ --ref-kop-xxl-ls: max(calc(-0.0875rem - 0.1875vw), -3.75px); --ref-kop-xl: min(calc(1.75rem + 3.75vw), 75px); --ref-kop-xl-lh: 1.2; /* 90/75 */ --ref-kop-xl-ls: max(calc(-0.033rem - 0.04125vw), -0.99px); --ref-kop-l: min(calc(1.4rem + 3vw), 60px); /* hero-kop */ --ref-kop-l-lh: 1.2; /* 72/60 */ --ref-kop-m: min(calc(1.1rem + 1.375vw), 33px); --ref-kop-m-lh: 1.4; /* 46.2/33 */ --ref-kop-s: min(calc(1.2rem + 0.875vw), 27px); --ref-kop-s-lh: 1.1; /* 29.7/27 */ --ref-kop-xs: 15px; /* vast op elke breedte boven 768 */ --ref-kop-xs-lh: 1.4; /* 21/15 */ --ref-kop-gewicht: 700; --ref-kop-kleur: var(--ref-zwart); /* ---- knoppen ------------------------------------------------------------ */ /* Op 1440: 53px hoog, #0F172A, 18px/700, padding 12/22.5, hoekradius 0 15px 0 15px. Die hoogte is geen ingestelde waarde maar het gevolg van padding plus regelhoogte, dus die staat hier bewust niet. */ --ref-knop-bg: var(--ref-blauw); --ref-knop-kleur: var(--ref-wit); --ref-knop-fs: min(calc(1.2rem + 0.25vw), 18px); --ref-knop-gewicht: 700; --ref-knop-pad-y: min(calc(0.7rem + 0.25vw), 12px); --ref-knop-pad-x: min(calc(1.125rem + 0.625vw), 22.5px); --ref-knop-radius: min(calc(0.95rem + 0.25vw), 15px); /* De referentie zet een rand van 2px in dezelfde kleur als de vulling. Die is niet te zien maar telt wel mee: met border-box komt de knop daardoor op 12 + 25.2 + 12 + 2 + 2 = 53.2px in plaats van 49.2px. Wij haalden 53px met een min-height, wat toevallig bijna hetzelfde getal gaf maar niet meebeweegt met de breedte. */ --ref-knop-rand: 2px; /* ---- ruimte ------------------------------------------------------------- */ --ref-sectie-groot: min(calc(2.75rem + 5vw), 105px); --ref-sectie-klein: min(calc(2rem + 2.5vw), 60px); /* ---- hoekradii ---------------------------------------------------------- */ /* De referentie zet ze diagonaal: twee tegenoverliggende hoeken rond, de andere twee scherp. Vandaar dat ze per hoek apart genoemd worden. */ --ref-radius-s: min(calc(0.875rem + 1.875vw), 37.5px); --ref-radius-l: min(calc(0.5rem + 3.75vw), 60px); /* ---- containers --------------------------------------------------------- */ /* Gemeten maxima op 1440 en 1920, waar ze niet meer meegroeien. */ --ref-container-xl: 1410px; --ref-container-l: 1350px; --ref-container-m: 1305px; --ref-container-s: 1245px; --ref-container-xs: 975px; } /* De root-fontgrootte is de spil van het hele systeem. Zonder deze twee regels klopt geen enkele rem-waarde hierboven. */ html { font-size: 12px; } @media (max-width: 767px) { html { font-size: 16px; } } /* =========================================================================== TOEPASSING - stap 1: de typografieschaal op de homepage --------------------------------------------------------------------------- Gemeten op 1440, referentie tegenover ons voor de correctie: sectie referentie wij wordt hero 60px 60px 60px (stond al goed) Onze projecten 75px 72px 75px Zij vertrouwen op ons 75px 72px 75px Wat Wij Bieden 75px 72px 75px Onze vestigingen 75px 64.512px 75px Volg ons op social 75px 74.88px 75px Wij Gaan Voor U aan de Slag 135px 111.037px 135px Klanten aan het woord 135px 85.86px 135px Onze kennisbank 135px 129.6px 135px Offerte aanvragen 135px 135px 135px (stond al goed) De referentie kent twee grote kopmaten. Wij hadden er zes, allemaal via een eigen clamp die net iets anders uitpakte. Dat is de reden dat dit via de tokens gaat en niet per kop wordt bijgesteld. !important is hier nodig omdat de bestaande kopregels in style.css het zelf ook gebruiken; zonder dat wint de oudere regel ongeacht de vololgorde. =========================================================================== */ body{ font-family:var(--ref-font) !important; font-size:var(--ref-tekst) !important; line-height:var(--ref-tekst-lh) !important; color:var(--ref-zwart) !important; } /* 60px: de hero-kop */ .hp-hero-slider h1, .hp-hs-title{ font-size:var(--ref-kop-l) !important; line-height:var(--ref-kop-l-lh) !important; letter-spacing:normal !important; } /* 75px */ .hp-portfolio h2, .v2-ps h2, .v2-band h2, .hp-services h2, .v2-wwo h2, .hp-locaties h2, .v2-loc-kop, .hp-social h2, .v2-social-kop{ font-size:var(--ref-kop-xl) !important; line-height:var(--ref-kop-xl-lh) !important; letter-spacing:var(--ref-kop-xl-ls) !important; } /* 135px */ .hp-waarom h2, .v2-statement h2, .hp-testi h2, .v2-testi h2, .hp-res h2, .v2-res-kop, .hp-cta h2, .v2-cta-kop{ font-size:var(--ref-kop-xxl) !important; line-height:var(--ref-kop-xxl-lh) !important; letter-spacing:var(--ref-kop-xxl-ls) !important; } /* Knoppen: een enkele bron voor vorm en kleur, in plaats van per component. De outline-variant hoort hier NIET in: "Kies een categorie" is bij de referentie wit met blauwe rand en blauwe tekst (gemeten 390: wit vlak, #0F172A 700, rand 2px, plus rechts via space-between); door hem in deze gevulde regel te zetten waren beide knoppen dik blauw. */ .btn, .btn-primary, .hp-hs-btn, .v2-cta-knop{ background:var(--ref-knop-bg) !important; color:var(--ref-knop-kleur) !important; font-size:var(--ref-knop-fs) !important; font-weight:var(--ref-knop-gewicht) !important; line-height:var(--ref-tekst-lh) !important; padding:var(--ref-knop-pad-y) var(--ref-knop-pad-x) !important; border-radius:0 var(--ref-knop-radius) 0 var(--ref-knop-radius) !important; border:var(--ref-knop-rand) solid var(--ref-knop-bg) !important; min-height:auto !important; box-sizing:border-box !important; } /* =========================================================================== Wat Wij Bieden: een lijst met links, geen accordeon --------------------------------------------------------------------------- De referentie heeft daar zeven -elementen op volle breedte, elk met een dunne scheidingslijn eronder. Geen uitklap, geen knop, geen beschrijvende tekst. Wij hadden er een accordeon van drie items staan met per item een alinea en een knop "Meer informatie". Gemeten aan de referentie op alle vijf de breedtes: lettergrootte 768: 18.6 1280: 25 1440: 27 1920: 27 formule 0.75rem + 1.25vw, op 390 berekend 16.875, gemeten 16.875 regelafstand 1.4 op elke breedte (37.8/27, 26.04/18.6, 23.625/16.875) padding onder 768: 22.05 1280: 25.25 1440: 26.25 1920: 26.25 formule 1.4375rem + 0.625vw, op 390 berekend 25.4375, gemeten 25.4375 scheidingslijn 1px solid rgb(225,225,225), op elke breedte gelijk gewicht 700, kleur rgb(0,0,0), geen onderstreping De koptekst van onze accordeonknop stond al op 61px hoog en 27px, dus de maatvoering klopte; het uitklapdeel eronder was de eigen toevoeging. =========================================================================== */ .v2-dl { display:block; } .v2-dl .v2-dl-link{ display:block; font-family:var(--ref-font); font-size:min(calc(0.75rem + 1.25vw), 27px); line-height:1.4; font-weight:700; color:var(--ref-zwart); text-decoration:none; padding:0 0 min(calc(1.4375rem + 0.625vw), 26.25px) 0; margin-top:min(calc(1.4375rem + 0.625vw), 26.25px); border-bottom:1px solid rgb(225, 225, 225); outline:0; } /* De binnenkant van zo'n link, ook uitgemeten op alle vijf de breedtes. De zichtbare tekst zit in een die kleiner is dan de link zelf, en rechts staat een plus-teken in het blauw van de knoppen. Het geheel is een grid met de tekst op 1fr en het teken op zijn eigen breedte. icoon 0.5625rem + 1.875vw 768: 21.15 1280: 30.75 1440: 33.75 op 390 berekend 16.3125, gemeten 16.3125 gap 0.75rem + 0.9375vw 768: 16.2 1280: 21 1440: 22.5 op 390 berekend 15.65625, gemeten 15.6562 strong 1.1625rem + 0.4375vw 768: 17.31 1280: 19.55 1440: 20.25 op 390 berekend 20.30625, gemeten 20.3062 regelafstand 1.4, op elke breedte Waarom de span op grid staat en niet inline: een inline span laat de line-box de hoogte bepalen, dus 37.8 + 26.25 + 1 = 65.05px. Als grid neemt hij de hoogte van de hoogste cel, en dat is 33.75 + 26.25 + 1 = 61px. */ .v2-dl .v2-dl-wrap{ display:grid; grid-template-columns:1fr min(calc(0.5625rem + 1.875vw), 33.75px); align-items:center; gap:min(calc(0.75rem + 0.9375vw), 22.5px); } .v2-dl .v2-dl-wrap strong{ font-size:min(calc(1.1625rem + 0.4375vw), 20.25px); line-height:1.4; font-weight:700; color:inherit; } .v2-dl .v2-dl-icon{ display:block; width:min(calc(0.5625rem + 1.875vw), 33.75px); height:min(calc(0.5625rem + 1.875vw), 33.75px); color:var(--ref-blauw); } .v2-dl .v2-dl-icon svg{ width:100%; height:100%; display:block; } /* =========================================================================== Wat Wij Bieden: de sectie-indeling --------------------------------------------------------------------------- Gemeten aan de referentie op alle vijf de breedtes plus een zoektocht naar het breekpunt (800, 900, 1000 gestapeld; 1024, 1100, 1200 naast elkaar): breedte beeld inhoud 390 390 volle breedte, gestapeld 768 768 volle breedte, gestapeld 1024 512 (de helft) 512 op x=512 <- hier kantelt het 1280 640 (de helft) 640 op x=640 1440 720 (de helft) 720 op x=720 1920 720 op x=240 720 op x=960 <- geheel max 1440, gecentreerd inhoud padding-top 1.125rem + 5.3125vw 1280: 81.5 1440: 90 op 390 berekend 38.72, gemeten 38.7188 inhoud padding-right 1rem + 1.25vw 1280: 28 1440: 30 op 390 berekend 20.875, gemeten 20.875 inhoud padding-bottom 1rem + 7.5vw 1280: 108 1440: 120 op 390 berekend 45.25, gemeten 45.25 inhoud padding-left 2.5rem + 3.125vw 1280: 70 1440: 75 onder 1024 gelijk aan rechts, want dan is het blok gestapeld en dus symmetrisch sectie padding-onder --ref-sectie-klein 1280: 56 1440: 60 Wat er stond: een grid van 50vw 1fr met de foto op margin-left 8vw en 42.8vw breed, met een comment erbij dat de referentie 616px op x=115 zou hebben. De referentie heeft daar 720px op x=0. =========================================================================== */ .hp-services.v2-wwo{ display:block !important; grid-template-columns:none !important; /* GEEN max-width:1440px. De foto in dit blok wordt in vw uitgerekend (img width:50vw, hoogte calc(a + b*vw)) en bevriest pas op 1920, waar body en section ook op staan. Een sectie die al op 1440 stopt terwijl de foto op 50vw doorgroeit, laat die foto tussen 1441 en 1920 over de tekstkolom schuiven: de dienstnamen worden dan onleesbaar. Gemeten 09-09-2026: foto 800 (op 1600) resp. 960 (op 1920) breed in een kolom van 720. De sectie volgt nu dezelfde 1920-grens als de rest. */ max-width:1920px; margin-inline:auto; padding:0 0 var(--ref-sectie-klein) !important; } .hp-services.v2-wwo .v2-wwo-foto{ margin:0 !important; width:100% !important; max-width:none !important; border-radius:0 !important; aspect-ratio:auto !important; } /* De ronde hoek zit bij de referentie niet op de omhullende figure maar op de img zelf: 0 0 60px 0 op 1440, ofwel rechtsonder --ref-radius-l. De figure en de picture eromheen staan allebei op 0. */ .hp-services.v2-wwo .v2-wwo-foto img{ border-radius:0 0 var(--ref-radius-l) 0 !important; } .hp-services.v2-wwo .v2-wwo-inhoud{ max-width:none !important; padding:min(calc(1.125rem + 5.3125vw), 90px) min(calc(1rem + 1.25vw), 30px) min(calc(1rem + 7.5vw), 120px) min(calc(1rem + 1.25vw), 30px) !important; } @media (min-width: 1024px){ .hp-services.v2-wwo{ display:grid !important; grid-template-columns:1fr 1fr !important; align-items:stretch; } .hp-services.v2-wwo .v2-wwo-inhoud{ padding-left:min(calc(2.5rem + 3.125vw), 75px) !important; } } /* =========================================================================== Desktopheader op de gemeten referentiewaarden (autonome ronde 21-08) --------------------------------------------------------------------------- Gemeten op 1440 (spec/homepage-ref-1440.json): header 1440x105, geen eigen padding, geen achtergrondverloop logo x=45, vak 90x105, beeld verticaal gecentreerd nav-items eerste op x=210, 16.5px/400, zwart, onderlinge stap 37.5-37.9 cta x=1246.5, 148.48x45, tekst 18/700 zwart, hoekradius 0 telefoonvlak 47x41, #0F172A, radius 5px, wit icoon, rechts van de tekst Container: wrapper xlarge = max 1410 gecentreerd met 30px padding; dat geeft x=45 op 1440 en x=285 op 1920, beide gelijk aan de meting. =========================================================================== */ @media (min-width: 901px){ .nav{ height:105px !important; background-image:none !important; color:rgb(0,0,0) !important; } .nav-inner{ height:105px !important; max-width:1410px !important; margin-inline:auto !important; padding:0 30px !important; } .nav-logo{ height:105px !important; display:flex !important; align-items:center !important; } .nav-links{ margin-left:75px !important; margin-right:auto !important; gap:37.5px !important; } .nav-links > li > a{ font-size:16.5px !important; font-weight:400 !important; color:rgb(0,0,0) !important; letter-spacing:normal !important; } /* de referentie zet geen streep onder het actieve item */ .nav-links > li > a::after, .nav-links > li.is-active > a::after, .nav-links > li > a.is-active::after{ content:none !important; } .nav-links > li > a{ text-decoration:none !important; border-bottom:0 !important; } /* gemaskeerde pixels: ref blauw op x1260, wit op x1350; het telefoonvlak staat dus LINKS van de tekst, zoals bij ons origineel */ .nav-bel{ gap:22.5px !important; } .nav-bel-tekst{ font-size:18px !important; font-weight:700 !important; color:rgb(0,0,0) !important; } .nav-bel-cirkel{ width:47px !important; height:41px !important; border-radius:5px !important; background:#0F172A !important; color:#fff !important; } } /* [STAP 3] Instagram en Facebook horen niet in de menubalk; de referentie heeft daar geen sociale iconen. Geldt voor elke breedte. */ .nav .nav-social{ display:none !important; } /* Herzien na de live-schot van de referentie: hun foto begint gewoon op y=0 (figuur 692x717 op y0), maar hun header is een WITTE DEKKENDE balk van 105px die eroverheen ligt. Het wit boven de foto is dus de header zelf, geen fotomarge. De foto blijft daarom op top:0 en de header krijgt de witte achtergrond. */ @media (min-width: 901px){ .hp-hero-slides{ top:0 !important; height:717px !important; } /* Herzien voor de tweede keer, nu op een werkend masker: de referentie- header is TRANSPARANT en hun herofoto loopt tot y=0 door; wat eerder wit leek was de lichte lucht bovenin hun foto plus een ingestorte img in het masker. De subpagina-donkerregel uit style.css gaat wel plat, want de referentie kent geen donkere headerbalk. */ body.has-subhero .nav:not(.scrolled){ background:transparent !important; } } /* s5 (Wij Gaan Voor U aan de Slag): gemaskeerde pixels ref rgb(102) overal in het fotovlak, ons rgb(11). 128*0.8=102.4: hun overlay is 20% zwart over een foto op volle sterkte. Bij ons stond de foto op opacity .16 op een zwarte sectie met nog eens 45% zwart erover: 128*.16*.55 = 11. Hoogte ref 1095, ons 900. */ @media (min-width: 901px){ .hp-waarom{ min-height:1095px !important; height:auto !important; } } .hp-waarom .v2-st-bg{ opacity:1 !important; } .hp-waarom::before{ background:rgba(0,0,0,.2) !important; } /* s6 (locaties): ref-sectie 1440x1172, bij ons 900. */ @media (min-width: 901px){ .hp-locaties{ min-height:1172px !important; } .hp-locaties .v2-loc-beeld, .hp-locaties .v2-loc-paneel{ min-height:1172px !important; } } /* s7 (testimonials): ref op wit (transparant op de witte body), bij ons op #F8FAFC; ref-sectie 1350 hoog met 60px boven- en onderrand, slider 929, knop 53. Bij ons 874 met 39.8/39.8 en dia 520. */ .hp-testi, .v2-testi{ background:transparent !important; } @media (min-width: 901px){ .hp-testi{ padding-top:60px !important; padding-bottom:60px !important; } .v2-testi-dia{ height:929px !important; } /* ref swiper gemeten 1350x929 */ } /* s3 (Zij Vertrouwen op Ons): live-schot van de referentie op y1500. Elke partnerrij is 517 breed (x795..1312): logo links op eigen maat (151x60, 125x24, 158x60, 158x18, 158x37), de naam rechts uitgelijnd, en een lijn van 1px rgb(225,225,225) eronder. Bij ons stonden losse blokjes zonder lijnen. */ .v2-band-lijst{ width:517px !important; max-width:100% !important; margin-left:auto !important; } .v2-band-lijst li{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; width:100% !important; border-bottom:1px solid rgb(225,225,225) !important; padding:22px 0 !important; margin:0 !important; } .v2-band-lijst li img{ margin:0 !important; } .v2-band-lijst li span{ text-align:right !important; } /* Het gele accent boven de dienstenfoto: ref 280x120 met een ronde hoek rechtsonder, bij ons 396x134. */ .v2-wwo-accent{ width:280px !important; height:120px !important; } /* s10 (Offerte aanvragen): ref-sectie 1440x586, bij ons 517. */ @media (min-width: 901px){ .hp-cta{ min-height:586px !important; } } /* s1: de hero-knop staat bij de referentie op y=447, bij ons op y=479. */ @media (min-width: 901px){ .hp-hero-slider .hp-hs-btn{ position:relative; top:-32px; } } /* s9: de kop begint bij de referentie 135px onder de sectierand, bij ons 105; de beeldenkolom staat al exact goed (x825, 518x482, y+105). */ @media (min-width: 901px){ .v2-social-tekst h2, .hp-social h2{ margin-top:30px !important; } } /* footer: de referentie heeft geen knop in de footer, en de copyrightbalk is rgb(15,15,15) in plaats van doorzichtig op zwart. [STAP 3: wat de referentie niet heeft gaat eruit] */ footer .v2-ft-knop{ display:none !important; } .footer-bottom{ background:rgb(15,15,15) !important; } /* Mobiel (390): de donkere subhero-headerbalk bestaat niet op de referentie; hun header is op elke pagina transparant. De eerdere neutralisatie stond alleen in het 901px-blok en de offertepagina kwam op 390 zwart uit het masker (86.32%). */ body.has-subhero .nav:not(.scrolled){ background:transparent !important; } /* Mobiele sectiehoogtes homepage, ref gemeten op 390: s3 546 (ons 626: te hoog), s6 1273, s7 1093, s8 1617, s9 684, s10 421 */ @media (max-width: 900px){ .v2-band{ min-height:0 !important; } .v2-band .v2-band-inner{ padding-top:42px !important; padding-bottom:42px !important; } .hp-locaties, .hp-locaties .v2-loc-beeld, .hp-locaties .v2-loc-paneel{ min-height:0 !important; } .hp-locaties{ min-height:1273px !important; } .hp-testi{ min-height:1093px !important; } .hp-res{ min-height:1617px !important; } .hp-social{ min-height:684px !important; } .hp-cta{ min-height:421px !important; } } /* Subpagina-hero's, ref gemeten: projecten 1440: 385 (ons 279) 390: 307 (ons 166) kennisbank 1440: 802 (ons 787) 390: 733 (ons 795) over-ons 1440: 1354 (ons 1314) 390: 744 (ons 877) */ @media (min-width: 901px){ .v2-pj-kop, main .v2-pj-hero, .projecten-hero{ min-height:385px !important; } .v2-au-hero{ min-height:1354px !important; } } @media (max-width: 900px){ .v2-pj-kop, main .v2-pj-hero, .projecten-hero{ min-height:307px !important; } .v2-au-hero{ min-height:0 !important; max-height:744px !important; overflow:hidden !important; } } /* Kennisbank-hero: de referentie heeft daar geen foto. Gemeten: wit vlak bovenaan (header op wit), dan een panel dat op 58px onder de sectierand begint met een ronde linkerbovenhoek, vlak rgb(51,51,51) en onderin aflopend naar zwart (y500: 38, y700: 12). Bij ons stond een foto met een grijsverloop erachter. */ .v2-kb-hero{ background:rgb(255,255,255) !important; position:relative; } .v2-kb-hero .v2-kbh-foto{ display:none !important; } .v2-kb-hero::after{ background:none !important; } .v2-kb-hero::before{ content:"" !important; position:absolute !important; inset:58px 0 0 0 !important; background:linear-gradient(rgb(51,51,51) 0%, rgb(51,51,51) 50%, rgb(0,0,0) 94%) !important; border-top-left-radius:60px !important; z-index:0 !important; } .v2-kb-hero > *{ position:relative; z-index:1; } /* Offerte-hero (v2-gh): referentie 1276 hoog op 1440 en 671 op 390, foto met een lichte laag van 20% wit (gemeten strip rgb(153) = 128*0.8 + 255*0.2). Bij ons: 900/844 hoog met 72% zwart. Tekst gaat mee naar zwart, anders is hij onleesbaar op de licht gehouden foto. */ .v2-gh{ background:rgb(255,255,255) !important; } .v2-gh::after{ background:rgba(255,255,255,.2) !important; background-image:none !important; } .v2-gh, .v2-gh h1, .v2-gh p, .v2-gh span, .v2-gh a:not(.btn){ color:rgb(0,0,0) !important; } @media (min-width: 901px){ .v2-gh{ min-height:1276px !important; height:auto !important; } } @media (max-width: 900px){ .v2-gh{ min-height:0 !important; height:671px !important; } } /* Mobiel s3: ref-rijen zijn compact (logopitch 49-80, logo's 86 breed, sectiepadding 41.75 boven en 94.8 onder). Onze rijen stonden op de desktopmaat met 22px padding en logo's van 151. */ @media (max-width: 900px){ .v2-band .v2-band-inner{ padding-top:41.75px !important; padding-bottom:94.8px !important; } .v2-band-lijst li{ padding:11px 0 !important; } .v2-band-lijst li img{ width:86px !important; height:auto !important; } } /* Mobiel s4: ref-foto 390x369, daarna de inhoud van 712 met links van 57. */ @media (max-width: 900px){ .hp-services.v2-wwo .v2-wwo-foto{ height:369px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ height:100% !important; object-fit:cover !important; } } /* Mobiel s3, tweede slag: de 11px verloor op specificiteit van een oudere li-regel (gemeten padding bleef ~20). Met de sectieklasse erbij wint deze, en 34 logo + 2x9 padding + 1 lijn = 53 per rij, gelijk aan de ref-pitch. */ @media (max-width: 900px){ /* style.css zet ook een vaste height:75px (en op desktop 121px) op de li; de padding won al, de hoogte nog niet */ .v2-band .v2-band-lijst li, section.v2-band .v2-band-lijst li{ padding:9px 0 !important; height:auto !important; min-height:0 !important; } } /* Over-ons hero: het hele vlak week met een vaste marge af (ref/ons op dezelfde y: 28/36, 85/114, 162/191, 210/218): onze zwarte toplaag was te zwak en de witte vervaging te vroeg en te sterk. Gefit op de gemeten punten: zwart 0.78 aflopend naar 0 op 62%, wit vanaf 40% naar 0.66. De brightness op de foto vervalt: de referentie regelt alles in de lagen. */ .v2-au-hero-foto img{ filter:none !important; } .v2-au-hero-foto::before{ background:linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0) 70%) !important; } .v2-au-hero-foto::after{ background:linear-gradient(rgba(255,255,255,0) 71%, rgba(255,255,255,.68) 97%) !important; } /* Kennisbank: de referentiesectie begint op y=105, onder de header, met wit erboven; bij ons stond het donkere panel al vanaf y=58 achter de transparante header (headerstrip 43.83%). Zelfde verhaal op mobiel met de headerhoogte van 64. */ @media (min-width: 901px){ .v2-kb-hero{ margin-top:105px !important; } } @media (max-width: 900px){ .v2-kb-hero{ margin-top:64px !important; } } /* Offerte-hero op mobiel: ref-strip rgb(179) = 40% wit over de foto; de 20% uit de desktopfit was daar te licht. */ @media (max-width: 900px){ .v2-gh::after{ background:rgba(255,255,255,.4) !important; } } /* s4-foto hersteld: de referentiefoto is 720x1068 en begint op -157, hij steekt de logoband boven de sectie in; het vak eronder houdt 911 over (1068-157). Mijn sectie-herbouw had de negatieve marge en de verhouding platgeslagen naar een gestrekte 720x824 op y0, waardoor de foto los kwam te hangen onder het gele blok. */ @media (min-width: 901px){ .hp-services.v2-wwo .v2-wwo-foto{ height:911px !important; overflow:visible !important; } .hp-services.v2-wwo .v2-wwo-foto img{ margin-top:-157px !important; height:1068px !important; width:100% !important; object-fit:cover !important; } } /* Meer info-sectie op de dienstpagina's. Deze sectie bestond bij ons niet; bij het nabouwen van de dienstenpagina is hij overgeslagen (in de git- historie komt hij op geen enkele revisie voor). Gemeten aan de referentie op /solutions/market-segments-and-products-types/ op 1440: sectie 1440x984, achtergrond #F8FAFC kop op x98, y+60, 75px foto's 285x236 op x98, hoekradius 0 37.5 0 37.5, rijen op y+225 en +612 tekstkolom op x454, 889 breed; blokkop 33px, alinea 21px zwart scheidingslijn tussen de rijen */ .v2-ms-info{ background:#F8FAFC; padding:60px 0 105px; } .v2-ms-info .v2-ms-wrap{ max-width:1245px; margin-inline:auto; padding:0 20px; } .v2-ms-info h2{ font-size:var(--ref-kop-xl) !important; line-height:var(--ref-kop-xl-lh) !important; color:rgb(0,0,0) !important; margin:0 0 min(calc(2rem + 2.9vw), 105px); } .v2-ms-info-rij{ display:grid; grid-template-columns:285px 1fr; gap:min(calc(2rem + 3.3vw), 71px); align-items:start; } .v2-ms-info-rij img{ width:285px; height:236px; object-fit:cover; border-radius:0 var(--ref-radius-s) 0 var(--ref-radius-s); } .v2-ms-info-tekst h3{ font-size:var(--ref-kop-m) !important; line-height:var(--ref-kop-m-lh) !important; color:rgb(0,0,0) !important; margin:44px 0 18px; } .v2-ms-info-tekst p{ font-size:min(calc(1.05rem + 0.625vw), 21px); color:rgb(0,0,0); max-width:889px; margin:0; } .v2-ms-info-lijn{ display:block; height:1px; background:rgb(225,225,225); margin:75px 0; } @media (max-width: 900px){ .v2-ms-info-rij{ grid-template-columns:1fr; } .v2-ms-info-rij img{ width:100%; height:auto; aspect-ratio:285/236; } .v2-ms-info-tekst h3{ margin-top:20px; } .v2-ms-info-lijn{ margin:42px 0; } } /* Mobiele header, nameting op de telefoonscreenshots van Dikkie (21-08): 1. De lichte plaat achter telefoon en hamburger was backdrop-filter blur(14px) saturate(1.5) op .nav-cta; de referentie heeft daar niets, hun knoppen staan los op de foto. 2. Onze herofoto stond op object-fit:fill en werd in 390x320 geperst, waardoor het huis klein en vervormd in beeld hing; de referentie vult met cover (390x309) en toont het gebouw groot. 3. De hoek: bij de referentie is alleen rechtsonder rond, links recht. */ .nav-cta{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } @media (max-width: 900px){ .hp-hero-slides{ height:79.23vw !important; border-radius:0 0 60px 0 !important; overflow:hidden !important; } .hp-hero-slides img{ object-fit:cover !important; width:100% !important; height:100% !important; } } /* Het grijze logowatermerk op de herofoto: bij de referentie een pseudo- element op de fotowrapper (hun beeldmerk, opacity .6, size contain, op mobiel 241x227 rechts op de foto). Bij ons ontbrak hij op elke breedte. */ .hp-hero-slides{ position:relative; } .hp-hero-slides::after{ content:"" !important; position:absolute !important; z-index:2 !important; background:url("../assets/img/logo-white.png") no-repeat center / contain !important; opacity:.25 !important; pointer-events:none !important; } @media (max-width: 900px){ .hp-hero-slides::after{ right:-18% !important; top:12% !important; width:62vw !important; height:76% !important; left:auto !important; } } @media (min-width: 901px){ .hp-hero-slides::after{ left:22% !important; top:12% !important; width:48% !important; height:76% !important; } } /* De outline-knop op de gemeten ref-waarden. */ .v2-btn-outline, .btn.v2-btn-outline, button.v2-btn-outline{ background:rgb(255,255,255) !important; color:#0F172A !important; border:2px solid #0F172A !important; font-weight:700 !important; display:flex !important; justify-content:space-between !important; align-items:center !important; border-radius:0 var(--ref-knop-radius) 0 var(--ref-knop-radius) !important; } /* Geel accent bij Wat Wij Bieden op mobiel, nagemeten op de telefoonshots (ref-shot 736px breed, teruggerekend naar 390 css): blok ~147x49 linksboven op de foto, ronde hoek rechtsonder, geen tandjes-clip en geen losse gele streep ernaast. Bij ons stond het blok op 280x120 met een tandenrand en een extra streep van 140x14 rechts. */ @media (max-width: 900px){ .v2-wwo-accent{ width:37.7vw !important; height:12.6vw !important; clip-path:none !important; border-radius:0 0 5vw 0 !important; top:auto !important; bottom:100% !important; margin-bottom:-1px !important; } .v2-wwo-streep{ display:none !important; } } /* Naverificatie live (21-08 22:00): 1. De slidertitels stonden nog in Barlow Condensed; de referentie zet ook deze tekst gewoon in Arial. 2. Het gele blok hing 48px boven de foto (hij was verankerd aan de sectie, niet aan de foto). Nu als pseudo op de fotowrapper zelf: onderrand gelijk aan de fototop, op elke breedte. 3. Het watermerk stond op opacity .25 en viel op de lichte lucht weg; ref-waarde is .6. */ .v2-cs-title, .v2-cs-cat, .v2-cs-loc{ font-family:var(--ref-font) !important; letter-spacing:normal !important; text-transform:none !important; } @media (max-width: 900px){ .v2-wwo-accent{ display:none !important; } .hp-services.v2-wwo .v2-wwo-foto{ position:relative !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ content:"" !important; position:absolute !important; left:0 !important; bottom:100% !important; margin-bottom:-1px !important; width:37.7vw !important; height:12.6vw !important; background:var(--ref-geel) !important; border-radius:0 0 5vw 0 !important; } } .hp-hero-slides::after{ opacity:.6 !important; } /* =========================================================================== referentie-390.css doorgevoerd (bestand van Dikkie, 21-08, leidend). --------------------------------------------------------------------------- Kern: de min()-caps op de knoptokens zijn desktopmaxima. Op 390 staat de root op 16px en komen de formules erBOVEN uit: fontgrootte 20.175 waar de cap 18 afknipt, padding 12.175 waar 12 afknipt, radius 16.175 waar 15 afknipt. Gemeten in het bestand, dus de caps gaan op mobiel los. =========================================================================== */ @media (max-width: 900px){ :root{ --ref-knop-fs: calc(1.2rem + 0.25vw); /* 390: 20.175 */ --ref-knop-pad-y: calc(0.7rem + 0.25vw); /* 390: 12.175 */ --ref-knop-pad-x: calc(1.125rem + 0.625vw); /* 390: 20.4375 */ --ref-knop-radius: calc(0.95rem + 0.25vw); /* 390: 16.175 */ } /* knop: lh 28.245 = 1.4 x 20.175 (volgt de lh-token al); gewicht was bij ons 800, het bestand zegt 700 */ .btn, .btn-primary, .hp-hs-btn, .v2-cta-knop, .v2-btn-outline{ font-weight:700 !important; } /* header: logo 44x43 contain (stond 91 breed op fill), burger 40 breed zodat hij op x329 eindigt met 21 marge rechts */ .nav-logo img{ width:44px !important; height:43px !important; object-fit:contain !important; } .nav-logo{ width:44px !important; } .nav-cta .nav-burger, .nav-burger{ width:40px !important; } .nav-burger span, .nav-burger span::before, .nav-burger span::after{ width:40px !important; } /* hero-foto: 390x309 en radius 0 op het beeldvlak (de ronde hoek van 60 die wij hadden staat niet in de meting); een oudere regel hield de wrap op 320, vandaar de dubbele selector om die te verslaan */ .hp-hero-slider .hp-hero-slides, .hp-hero-slides{ height:79.23vw !important; /* 390: 309 */ border-radius:0 !important; } /* kop -> tekst: bestand meet exact 11px tussenruimte; bij ons stond 12 marge onder de kop plus 15 boven de tekst */ .hp-hs-title{ margin-bottom:0 !important; } .hp-hs-static-content p{ margin-top:11px !important; color:rgb(0,0,0) !important; } /* kaartvlak: asymmetrisch 0 21.75 0 21.75 (wij hadden 0 30 0 30) en de kaart 309x183 (wij 309x160) */ .v2-hero-featured .project-card{ border-radius:0 21.75px 0 21.75px !important; height:46.92vw !important; /* 390: 183 */ } .v2-hero-featured .v2-hero-showall{ border-radius:0 21.75px 0 21.75px !important; } } /* referentie-390, tweede slag: drie regels verloren op specificiteit. - .hp-hero-slider .hp-hs-desc (0,2,0) hield de tekstmarge op 15 waar het bestand 11 meet - .hp-hs-static-content .hp-hs-btn (0,2,0) hield het knopgewicht op 800 waar het bestand 700 meet - de burger bleef 44 breed renderen; flex-basis en min/max erbij */ @media (max-width: 900px){ .hp-hero-slider .hp-hs-static-content p, .hp-hero-slider .hp-hs-desc, .hp-hs-static-content .hp-hs-desc{ margin-top:11px !important; } .hp-hs-static-content .hp-hs-btn, .hp-hs-slide.is-active .hp-hs-btn, .hp-hero-slider .hp-hs-btn{ font-weight:700 !important; } .nav-cta .nav-burger, .nav-burger{ width:40px !important; min-width:40px !important; max-width:40px !important; flex:0 0 40px !important; box-sizing:border-box !important; } } /* =========================================================================== referentie-390.css, aanvulling van 22-08 (bestand blijft leidend) --------------------------------------------------------------------------- Hamburger: al conform (twee lijnen, 40x2 #0F172A, hartafstand 10px, span zelf transparant; een derde lijn is er niet). Show All-blok naast de kaart: bij ons blauw rgb(10,130,230) met witte vette tekst van 12 en de kaart-radius; het bestand meet GEEL #F59E0B met zwarte tekst 12.525/400, padding 20.4375/10.875 en ALLEEN linksonder rond (20.875). Maat en positie klopten al (51x183 op x339, 9px naast de kaart). De kleur geldt ook op desktop (daar is hij bij de referentie evengoed geel); de 390-maten alleen mobiel. Geel decoratief vlak in de social-sectie: 108x109 op z2; bij ons 109.7x111.1 op z1. */ .v2-hero-showall{ background:#F59E0B !important; color:rgb(0,0,0) !important; } @media (max-width: 900px){ .v2-hero-showall{ font-size:12.525px !important; font-weight:400 !important; padding:20.4375px 10.875px !important; border-radius:0 0 0 20.875px !important; } .v2-social-vlak{ width:108px !important; height:109px !important; border-radius:0 !important; z-index:2 !important; } } /* referentie-390, naslag: de linksonder-radius van de Show All verloor van mijn eigen eerdere kaartvlak-regel met een dubbele klasse; het bestand wint, dus hier met dezelfde specificiteit en later in de cascade. */ @media (max-width: 900px){ .v2-hero-featured .v2-hero-showall, .v2-hero-showall{ border-radius:0 0 0 20.875px !important; } } /* Het gele vlak stond op left:246 binnen zijn ouder (die op x18 begint) en kwam zo op x264 uit; het bestand meet x261, dus left 243. */ @media (max-width: 900px){ .v2-social-vlak{ left:243px !important; right:auto !important; } } /* =========================================================================== Volledige homepage-meting 390 (elementdump Dikkie 22-08). Sectie voor sectie doorgevoerd; de dump is leidend. Alleen mobiel. =========================================================================== */ @media (max-width: 900px){ /* -- gutter: elke ref-kop staat op x21; een deel van onze wrappers stond op 16. Ref-uitzondering: de partnerband-kop staat op x11. */ .v2-ps-head, .v2-st-inner, .v2-testi-inner, .v2-social-inner, .v2-band-inner{ padding-left:21px !important; padding-right:21px !important; } .v2-band h2{ margin-left:-10px !important; } /* ref: x11 */ /* -- kopschaal per sectie, exact uit de dump: s2 42.625/700/51.15 | s3,s4,s6,s9 42.625/400/51.15 | s5,s10 61.425/400/61.425 | s7 46.125/400/46.125 center | s8 44.2125/700/ 44.2125. Onze koppen stonden allemaal op 700 en s5/s6/s7/s8 op eigen maten (51.48, 30, 46.02, 61.425). */ .hp-portfolio h2{ font-size:42.625px !important; font-weight:700 !important; line-height:51.15px !important; } .v2-band h2, .hp-services h2, .hp-locaties h2, .hp-social h2{ font-size:42.625px !important; font-weight:400 !important; line-height:51.15px !important; } .hp-waarom h2, .hp-cta h2{ font-size:61.425px !important; font-weight:400 !important; line-height:61.425px !important; } .hp-testi h2{ font-size:46.125px !important; font-weight:400 !important; line-height:46.125px !important; text-align:center !important; } .hp-res h2{ font-size:44.2125px !important; font-weight:700 !important; line-height:44.2125px !important; } .hp-social h2{ text-align:center !important; } .hp-cta h2{ text-align:center !important; margin-bottom:18.4275px !important; } /* -- omlijnde knop [48]: 16.35/700, padding 14.175 20.4375, tekst links */ .v2-btn-outline{ font-size:16.35px !important; padding:14.175px 20.4375px !important; text-align:left !important; } /* -- s2-kaarten [50-52]: beeld 287x189, titel 22.6125/700/24.8738 (22.6125 was op desktop 27; mobiel is dit de gemeten maat) */ .v2-cs .project-card, .v2-cs .v2-pc, .v2-cs .v2-pc-img img{ } .v2-cs-title{ font-size:22.6125px !important; line-height:24.8738px !important; } /* -- s4-foto [67]: x -10, breedte 390, ronde hoek rechtsonder 32.1875 */ .hp-services.v2-wwo .v2-wwo-foto{ margin-left:-10px !important; width:390px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ border-radius:0 0 32.1875px 0 !important; } /* -- s5 [76]: sectiepadding 63.5 boven en onder */ .hp-waarom{ padding-top:63.5px !important; padding-bottom:63.5px !important; } /* -- s6 [84-88]: zwart paneel met ronde onderhoeken 20.875 en padding 41.425/20.025; locatiefoto's 107x107 rond naast elkaar */ .v2-loc-paneel{ border-radius:0 0 20.875px 20.875px !important; padding:41.425px 20.025px !important; } .v2-loc-fotos{ display:flex !important; gap:16px !important; } .v2-loc-fotos img{ width:107px !important; height:107px !important; border-radius:50% !important; object-fit:cover !important; } /* -- s8 [110-113]: blauw vlak ACHTER de kaartfoto met ronde hoek rechtsboven 22.625; titel 22.6125/700, marge onder 15.6562; de knop Alle artikelen 21.3125 onder de kop */ .hp-res .tip-card figure, .hp-res .v2-res-kaart, .hp-res article figure, .hp-res .hp-tips-card .tip-figure{ background:#0F172A !important; border-radius:0 22.625px 0 0 !important; } .hp-res h3{ font-size:22.6125px !important; line-height:24.8738px !important; margin-bottom:15.6562px !important; } .hp-res .v2-res-cta{ margin-top:21.3125px !important; } /* -- s10 [130-133]: cirkelbeeld 156x156, gecentreerd, steekt boven de sectierand uit; knop gecentreerd met marge 10.4375 boven */ .v2-cta-cirkel{ width:156px !important; height:156px !important; margin-inline:auto !important; } .v2-cta-cirkel img{ width:156px !important; height:156px !important; border-radius:50% !important; } .hp-cta .btn{ margin-top:10.4375px !important; } .v2-cta-inner{ text-align:center !important; } /* -- footer [135-169]: links 16.0875/700/20.9137 met 5.0875 padding, copyright 18/400/23.94 in rgb(115) op rgb(15,15,15) met 15.35 padding, iconen 40x40 met 10 padding */ footer .v2-ft a{ font-size:16.0875px !important; font-weight:700 !important; line-height:20.9137px !important; padding:5.0875px 0 !important; } .footer-bottom{ font-size:18px !important; line-height:23.94px !important; color:rgb(115,115,115) !important; padding:15.35px 0 !important; } footer .v2-ft-social a, footer [class*=social] a{ width:40px !important; height:40px !important; padding:10px !important; } } /* Dump 390, tweede slag: vier regels verloren op specificiteit. */ @media (max-width: 900px){ .hp-waarom h2, .hp-waarom .v2-st-kop, .v2-statement h2.kop-xxl, section.hp-waarom h2.kop-xxl{ font-size:61.425px !important; line-height:61.425px !important; font-weight:400 !important; } .v2-locaties h2.v2-loc-kop, .hp-locaties h2.v2-loc-kop, h2.v2-loc-kop{ font-size:42.625px !important; line-height:51.15px !important; font-weight:400 !important; } /* button.btn (0,1,1) hield de outline op 18px; hier met twee klassen */ .btn.v2-btn-outline, button.v2-btn-outline, a.v2-btn-outline{ font-size:16.35px !important; padding:14.175px 20.4375px !important; } .v2-cta-inner{ padding-left:21px !important; padding-right:21px !important; } /* footer: ref-links staan links uitgelijnd op x21, niet gecentreerd */ footer .v2-ft{ text-align:left !important; padding-left:21px !important; padding-right:21px !important; } footer .v2-ft a{ text-align:left !important; } } /* Dump 390, derde slag: de s5-kop verloor van .v2-statement .v2-st-kop h2.kop-xxl (0,3,1) met clamp(32,13.2vw,60) = 51.48 op 390. Zelfde selector, verderop in de cascade. */ @media (max-width: 900px){ .v2-statement .v2-st-kop h2.kop-xxl, .hp-waarom .v2-st-kop h2.kop-xxl{ font-size:61.425px !important; line-height:61.425px !important; } } /* Footerlinks stonden op x39: de buitencontainer droeg al 18px en de 21 van .v2-ft kwam daar bovenop. Buitenpadding weg, dan is de som de ref-gutter. */ @media (max-width: 900px){ footer .container{ padding-left:0 !important; padding-right:0 !important; } } /* =========================================================================== referentie-390.css + referentie-1440.css, volledige doorvoer 22-08. Sectie voor sectie; de bestanden zijn leidend. =========================================================================== */ /* -- header 1440: logo-x was 54 door nav-pad 24 + inner-pad 30; ref x45 = (1440-1410)/2 + 30. Logo-vak 90x60 contain op y43 (pad-top 43 in de 105-header). Navlinks 16.5/23.1/400 pad 1 0 0, marge 0 9 0 0. Telefoonknop 45 hoog. */ @media (min-width: 901px){ .nav{ padding-left:0 !important; padding-right:0 !important; } .nav-logo{ padding-top:43px !important; align-items:flex-start !important; } .nav-logo img{ width:90px !important; height:60px !important; object-fit:contain !important; } .nav-links > li > a{ line-height:23.1px !important; padding:1px 0 0 !important; margin:0 9px 0 0 !important; } .nav-bel{ height:45px !important; } /* showall desktop: padding 22.5, hoek linksonder exact 30 */ .v2-hero-showall{ padding:22.5px !important; border-radius:0 0 0 30px !important; } /* s3/s5-containers stonden op 1200 met 24 pad; ref-content is 1244 op x98 */ .v2-band-inner, .v2-st-inner{ max-width:1244px !important; padding-left:0 !important; padding-right:0 !important; } .v2-band h2{ margin-left:30px !important; } /* ref-kop x128 = 98 + 30 */ /* s5- en s7-koppen bleven op clamps (111.04 en 85.86); ref: 135/135 */ .v2-statement .v2-st-kop h2.kop-xxl, .hp-waarom h2{ font-size:135px !important; line-height:135px !important; } .hp-testi h2{ font-size:135px !important; line-height:135px !important; } /* s6-paneel: padding 120/81, onderhoeken 30 */ .v2-loc-paneel{ padding:120px 81px !important; border-radius:0 0 30px 30px !important; } .v2-locaties .v2-loc-route{ margin-top:21px !important; } /* s8: blauw vlak achter de kaartfoto, hoek rechtsboven 60; titelmarge 22.5; knop 37.5 onder de kop */ .v2-res-kaart .v2-res-beeld{ background:#0F172A !important; border-radius:0 60px 0 0 !important; } .hp-res h3{ margin-bottom:22.5px !important; } .v2-res-cta{ margin-top:37.5px !important; } /* s9-iconen 45x45 met 7.5 padding */ .v2-social-iconen a{ padding:7.5px !important; box-sizing:border-box !important; } /* s10-kop: marge 40.5 onder, geen eigen padding */ .hp-cta h2{ padding-top:0 !important; margin-bottom:40.5px !important; } /* outline-knop desktop: padding 13.5/22.5 */ .btn.v2-btn-outline, button.v2-btn-outline, a.v2-btn-outline{ padding:13.5px 22.5px !important; } /* footer: linkpadding 5.25, logo 90x90 contain, copyright 17.25 pad en 52.5 marge erboven */ footer .v2-ft-menus a{ padding:5.25px 0 !important; } .v2-ft-logo img{ width:90px !important; height:90px !important; object-fit:contain !important; } .footer-bottom{ padding:17.25px 0 !important; margin-top:52.5px !important; } } @media (max-width: 900px){ /* Get Directions ontsnapte aan het knoptoken: rgb(10,130,230) */ .v2-loc-route, .v2-locaties a.btn.v2-loc-route{ background:#0F172A !important; } .v2-locaties .v2-loc-route{ margin-top:28px !important; } /* de portretrij begint bij de ref op x20 */ .v2-loc-fotos{ padding-left:20px !important; } /* Alle artikelen-knop had een eigen klein stijltje (14px, r9); het token */ .v2-res-cta{ font-size:20.175px !important; line-height:28.245px !important; border-radius:0 16.175px 0 16.175px !important; padding:12.175px 20.4375px !important; } /* s8-kaartvlak: blauw achter de foto, hoek rechtsboven 22.625 */ .v2-res-kaart .v2-res-beeld{ background:#0F172A !important; border-radius:0 22.625px 0 0 !important; } /* s9-iconen: ref 41x41 met 10 padding (wij 38 zonder) */ .v2-social-iconen a{ width:41px !important; height:41px !important; padding:10px !important; box-sizing:border-box !important; } /* s10-kop zonder eigen padding */ .hp-cta h2{ padding-top:0 !important; } /* footerlogo 82x82 */ .v2-ft-logo img{ width:82px !important; height:82px !important; object-fit:contain !important; } .footer-bottom{ padding:15.35px 0 !important; } } /* Slotslag doorvoer beide bestanden: zes regels wonnen op specificiteit. */ @media (max-width: 900px){ .v2-res .v2-res-cta{ font-size:20.175px !important; line-height:28.245px !important; border-radius:0 16.175px 0 16.175px !important; } .footer .footer-bottom{ margin-top:46.0938px !important; padding:15.35px 0 !important; } .v2-testi h2.v2-testi-kop, .hp-testi h2.v2-testi-kop{ font-size:46.125px !important; line-height:46.125px !important; } .v2-car{ padding-left:21px !important; } /* kaarten op x21, stond 24 */ } @media (min-width: 901px){ .footer .footer-bottom{ margin-top:52.5px !important; padding:17.25px 0 !important; } .v2-testi h2.v2-testi-kop, .hp-testi h2.v2-testi-kop{ font-size:135px !important; line-height:135px !important; } .v2-car{ padding-left:98px !important; } /* kaarten op x98, stond 144 */ /* de bandkop kreeg 30 pad EN 30 marge: een van de twee eraf */ .v2-band h2{ margin-left:0 !important; } /* eerste navitem op x210 (logo-einde 135 + 75); de li droeg 24 extra */ .nav-links{ margin-left:51px !important; } } /* Get Directions: .v2-locaties .v2-loc-route hield var(--bronze) */ .v2-locaties .v2-loc-route, .v2-loc-route, a.btn.v2-loc-route{ background:#0F172A !important; } /* =========================================================================== Portretbeelden in het locatieblok. Correctie op mijn eerdere melding: ze BESTAAN al in de HTML als de drie vestigingstabs (.v2-loc-cirkel met pandfoto's), dus er hoeft niets bij. Ze startten al exact op x801 (desktop) en x20 (mobiel); alleen de maat en de tussenruimte weken af. Ref: 203x203 met pitch 285/284 op 1440, 107x107 met pitch 123/124 op 390. De uniforme flex-gap kan geen wisselende pitch maken; de derde staat daardoor 1px van de ref (1371 om 1370, 266 om 267). Daarnaast terugdraaien: mijn eerdere regel maakte de grote SLIDEFOTO 107x107 rond, maar dat hoorde bij deze portretjes; de ref-slidefoto is 390x381 vlak op x0. */ @media (min-width: 901px){ .v2-loc-cirkel, .v2-loc-cirkel img{ width:203px !important; height:203px !important; } .v2-loc-cirkels{ gap:82px !important; } } @media (max-width: 900px){ .v2-loc-cirkel, .v2-loc-cirkel img{ width:107px !important; height:107px !important; } .v2-loc-cirkels{ gap:16px !important; } .v2-loc-fotos{ padding-left:0 !important; } .v2-loc-fotos img{ width:100% !important; height:97.69vw !important; /* 390: 381 */ border-radius:0 !important; object-fit:cover !important; } } /* De portretbreedte bleef op 184/76 hangen: de tab is een flex-item met een eigen basis en maximum. Alle drie de assen vastgezet. */ @media (min-width: 901px){ .v2-loc-cirkel{ flex:0 0 203px !important; min-width:203px !important; max-width:203px !important; } } @media (max-width: 900px){ .v2-loc-cirkel{ flex:0 0 107px !important; min-width:107px !important; max-width:107px !important; } } /* Geel blok en gele lijn bij Wat Wij Bieden, desktop. Ref gemeten als pseudo-elementen: het blok hangt aan de fotofiguur met inset left -1440, loopt dus van ver buiten de linkerrand tot x281.25, is 135 hoog met beide onderhoeken 37.5 rond (de linker valt buiten beeld) en begint exact op de fototop (y2170 = -157 t.o.v. de sectie). De lijn hangt aan de sectie: RECHT, 210x3, op x720 precies op de sectiegrens; geen tandje. Bij ons stond het blok als 280x120 los van de rand en de streep als 210x18 met haaientand op x627. */ @media (min-width: 901px){ .v2-wwo-accent{ left:0 !important; right:auto !important; top:-157px !important; bottom:auto !important; margin:0 !important; width:281.25px !important; height:135px !important; clip-path:none !important; border-radius:0 0 37.5px 0 !important; z-index:2 !important; } .v2-wwo-streep{ left:720px !important; right:auto !important; top:0 !important; width:210px !important; height:3px !important; clip-path:none !important; margin:0 !important; } } /* =========================================================================== Herofoto en geel s4-vlak, nameting 22-08 (ref gemeten op 390, 1440 en 1680; waarden hieronder per element genoemd in het antwoord). --------------------------------------------------------------------------- Ref-hero: de img heeft zelf radius 0; de ronde hoek zit op de WRAPPER (overflow hidden) en is 0 0 32.1875 0 op 390 en 0 0 60 0 op 1440. De img meet 390x309 en 692x717 op y0. Bij ons stonden de slides op 1440 op y76 (sectie-padding, slides in de flow) en was de mobiele hoek 0. =========================================================================== */ @media (min-width: 901px){ .hp-hero-slides{ margin-top:-76px !important; } /* foto naar y0, content blijft op y135 */ } @media (max-width: 900px){ .hp-hero-slider .hp-hero-slides, .hp-hero-slides{ height:79.2308vw !important; /* 390: 309.0 exact */ border-radius:0 0 32.1875px 0 !important; /* ref-wrapper, rechtsonder */ overflow:hidden !important; } } /* Geel vlak bij Wat Wij Bieden: pixeltest op 1680 (geel op x10..320, foto vanaf x120) bewijst dat het vlak VOOR de foto ligt en tot de schermrand doorloopt; de rechterrand ligt op sectie-x + 281.25. Onze sectie is max 1440 gecentreerd, dus left:0 gaf op brede schermen de sectierand (x104 bij Dikkie). min() houdt hem op 0 zolang het scherm smaller is dan de sectie. */ @media (min-width: 901px){ .v2-wwo-accent{ left:min(0px, calc((1440px - 100vw) / 2)) !important; width:calc(281.25px - min(0px, (1440px - 100vw) / 2)) !important; } /* de placeholderfoto toont bovenin vooral strakblauwe lucht die als een effen blauw vlak leest; de uitsnede naar de onderkant zet het gebouw in beeld zoals bij de referentie */ .hp-services.v2-wwo .v2-wwo-foto img{ object-position:center bottom !important; } } /* Herofoto mobiel: de hoogte werd niet door height bepaald maar door flex:1 1 auto in een sectie met min-height:100svh; op schermen hoger dan 844 groeide de foto mee met de restruimte (900 hoog gaf 365.7). De ref houdt de foto vast op 309 ongeacht de schermhoogte. */ @media (max-width: 900px){ .hp-hero-slides{ flex:0 0 auto !important; } } /* =========================================================================== FLUID: de vloeiende formules van de referentie, gefit op de gemeten punten 390/440/768/1280/1440 (spec/fluid-meting.json). Kern: hun caps staan in rem en de root wisselt van 16 naar 12 op 768; daardoor dekt een formule mobiel en desktop tegelijk en vervallen de vaste tussenmaat- pixels die op 440 mis zaten. Dit blok staat NA de oudere px-regels en wint met dezelfde selectors. =========================================================================== */ :root{ --ref-knop-fs: min(calc(1.2rem + 0.25vw), 1.5rem); /* 390:20.175 1440:18 */ --ref-knop-pad-y: min(calc(0.7rem + 0.25vw), 1rem); --ref-knop-pad-x: min(calc(1.125rem + 0.625vw), 1.875rem); --ref-knop-radius: min(calc(1rem + 0.25vw), 1.25rem); /* 390:16.175 1440:15 */ } /* koppen: 75-reeks en 135-reeks via de bestaande tokens, de afwijkende testimonial- en resource-koppen met hun eigen gefitte formule */ .hp-portfolio h2, .v2-band h2, .hp-services h2, .hp-locaties h2, .v2-locaties h2.v2-loc-kop, .hp-social h2{ font-size:var(--ref-kop-xl) !important; line-height:1.2 !important; } .hp-waarom h2, .v2-statement .v2-st-kop h2.kop-xxl, .hp-cta h2{ font-size:var(--ref-kop-xxl) !important; line-height:1 !important; } .hp-testi h2, .v2-testi h2.v2-testi-kop{ font-size:min(calc(0.75rem + 8.75vw), 135px) !important; /* 390:46.125 768:76.2 1280:121 */ line-height:1 !important; } .hp-res h2{ font-size:min(calc(0.6rem + 8.875vw), 135px) !important; /* 390:44.2125 768:75.36 1280:120.8 */ line-height:1 !important; } .hp-hero-slider h1, .hp-hs-title{ font-size:var(--ref-kop-l) !important; line-height:0.9 !important; letter-spacing:max(calc(-0.1rem - 0.125vw), -3px) !important; /* 390:-2.0875 1440:-3 */ } .hp-res h3{ font-size:min(calc(1.2rem + 0.875vw), 27px) !important; line-height:1.1 !important; margin-bottom:min(calc(0.75rem + 0.9375vw), 22.5px) !important; } .v2-cs-title{ font-size:min(calc(1.2rem + 0.875vw), 27px) !important; line-height:1.1 !important; } /* omlijnde knop: fs en padding gefit op 390/768/1440 (14.64 op 768 klopt met de eerdere ref-meting) */ .v2-btn-outline, .btn.v2-btn-outline, button.v2-btn-outline, a.v2-btn-outline{ font-size:calc(0.9rem + 0.5vw) !important; padding:calc(0.825rem + 0.25vw) calc(1.125rem + 0.625vw) !important; } /* sectiepaddings */ section.hp-portfolio{ padding-top:min(calc(1rem + 1.25vw), 30px) !important; padding-bottom:var(--ref-sectie-klein) !important; } section.v2-band .v2-band-inner, .v2-band-inner{ padding-top:var(--ref-sectie-klein) !important; padding-bottom:min(calc(4.25rem + 6.875vw), 150px) !important; /* 390:94.8125 768:103.8 */ } section.hp-social{ padding-top:var(--ref-sectie-groot) !important; padding-bottom:min(calc(56px + 7.5vw), 164px) !important; /* 390:85.25 768:113.6 */ min-height:0 !important; } /* locatieblok */ .v2-loc-paneel{ padding:min(calc(0.7rem + 7.75vw), 120px) min(calc(-0.15rem + 5.75vw), 81px) !important; border-radius:0 0 min(calc(1rem + 1.25vw), 30px) min(calc(1rem + 1.25vw), 30px) !important; } /* footer */ footer .v2-ft-menus a{ font-size:min(calc(0.975rem + 0.125vw), 18px) !important; padding:min(calc(0.2875rem + 0.125vw), 7px) 0 !important; } .footer .footer-bottom, .footer-bottom{ font-size:1.125rem !important; /* 390:18 1440:13.5 */ padding:min(calc(0.8375rem + 0.5vw), 17.25px) 0 !important; margin-top:min(calc(2.5rem + 1.5625vw), 52.5px) !important; } /* hoekradii op vlakken: kennisbankfiguur volgt de grote radiustoken, de herowrapper zijn eigen gefitte formule (390:32.1875 768:39 1280:55) */ .v2-res-kaart .v2-res-beeld{ border-radius:0 var(--ref-radius-l) 0 0 !important; } .hp-hero-slider .hp-hero-slides, .hp-hero-slides{ border-radius:0 0 min(calc(1.25rem + 3.125vw), 60px) 0 !important; } /* FLUID, naslag: hun notatie ((100vw - 20rem)/100) bevat een verborgen -0.2rem-term; 1rem + 0.25*((100vw-20rem)/100) is dus 0.95rem + 0.25vw. Bij het letterlijk overnemen was die 0.05rem weggevallen en stond de knopradius overal 0.6-0.8px te hoog. */ :root{ --ref-knop-radius: min(calc(0.95rem + 0.25vw), 1.25rem); } /* de herokop bleef op vaste 34.1/60 hangen door oudere regels met hogere specificiteit; zelfde formule, zwaardere selector */ section.hp-hero-slider .hp-hs-title, .hp-hero-slider h1.hp-hs-title, .hp-hero-static .hp-hs-title{ font-size:var(--ref-kop-l) !important; line-height:0.9 !important; letter-spacing:max(calc(-0.1rem - 0.125vw), -3px) !important; } /* =========================================================================== Gecombineerde ronde 22-08: referentie-geel-390.css + de zevenpuntslijst. =========================================================================== */ /* 1. Reveal-failsafe: de genoemde koppen en knoppen stonden op opacity 0 in een meting zonder scroll; de observer zet ze bij scrollen wel aan, maar een gemiste intersectie mag nooit permanente onzichtbaarheid geven. Na 2.2s komt alles wat nog geen in-view heeft alsnog op. Lost ook de twee testimonial-citaten op die buiten de actieve dia nooit in-view kregen. */ @keyframes dpsRevealFallback{ to{ opacity:1; transform:none; } } .fade-in:not(.in-view), .reveal:not(.in-view), .reveal-x:not(.in-view), .reveal-x-r:not(.in-view), .reveal-up:not(.in-view){ animation:dpsRevealFallback .6s ease 2.2s forwards; } /* 2. Manrope-restanten: de bron waren de vars zelf. */ :root{ --font-heading: Arial, Helvetica, sans-serif; --font-body: Arial, Helvetica, sans-serif; } .nav-links > li > a, .nav-bel-tekst, .mobile-menu, .mobile-menu *, .v2-ps-head button, .hp-portfolio .v2-btn-outline, .agbot, .agbot-launch{ font-family: Arial, Helvetica, sans-serif !important; } /* 3. Patroondekking gelijkgetrokken op de ref-meting: lichte sectievlakken 0.03 (hun core-section::before), donkere banden lijnen op ~0.81 gemeten (gemiddelde lichtwaarde 206 op zwart); elementopacity overal 1 zodat de dekking alleen nog in de tegel zit. */ :root{ --v2-traanplaat: url("data:image/svg+xml,"); --v2-traanplaat-band: var(--v2-traanplaat); --v2-traanplaat-licht: url("data:image/svg+xml,"); --v2-traanplaat-wit-band: var(--v2-traanplaat-licht); --v2-traanplaat-fel: var(--v2-traanplaat-licht); } .v2-loc-patroon, .v2-testi-patroon, .v2-social-patroon, [class*='-patroon']{ opacity:1 !important; } /* 4. Het patroonvlak van 143px bij de statement-sectie bestaat op de referentie niet (niets gemeten op x1297); het svg-vlak van 75x325 op x615/x636 bestaat daar wel en blijft. */ .v2-st-patroon{ display:none !important; } /* 5+6. Gewichten: referentie overal 700. */ .hp-hs-btn, a.hp-hs-btn.dps-cta-gold, .dps-cta-gold{ font-weight:700 !important; } .hp-hs-title strong, .hp-hero-static .hp-hs-title strong{ font-weight:700 !important; } /* ---- referentie-geel-390 ---- */ /* accentstreep op de projectkaart: 87.84x2.08 linksboven op de kaart (ref: ::after op de kaart, right 221.625 bottom 181.016 op 309x183); bij ons ontbrak hij op mobiel en was de sectiestreep 14px dik. */ @media (max-width: 900px){ .v2-hero-featured .project-card{ position:relative; } .v2-hero-featured .project-card::after{ content:"" !important; position:absolute !important; left:0 !important; top:0 !important; width:22.524vw !important; height:0.5328vw !important; /* 390: 87.84 x 2.08 */ background:#F59E0B !important; z-index:2 !important; border-radius:0 !important; } /* geel blok Wat Wij Bieden: een bron (de ::before; de losse span is uit de HTML). Ref: 549.84 breed vanaf -390 (loopt van buiten beeld tot onder de foto door), 55.69 hoog, half boven de fotorand, BEIDE onderhoeken 21.3125. Onze oude: 147x49 met een hoek. */ .hp-services.v2-wwo .v2-wwo-foto::before{ left:-100vw !important; bottom:auto !important; margin-bottom:0 !important; top:-7.117vw !important; /* 27.75 boven de fotorand */ width:140.98vw !important; height:14.279vw !important; /* 390: 549.84 x 55.69 */ border-radius:0 0 21.3125px 21.3125px !important; z-index:5 !important; background:#F59E0B !important; } /* halve cirkel bij de offerte-cta: ref 233.34x116.67 met offsets -38.89 rondom de 156-wrapper en radius 500 (bij ons 210x105 met 999). */ .v2-cta-cirkel{ position:relative; } .v2-cta-halve{ position:absolute !important; top:77.7812px !important; left:-38.8906px !important; right:-38.8906px !important; bottom:-38.8906px !important; width:auto !important; height:auto !important; border-radius:0 0 500px 500px !important; z-index:1 !important; background:#F59E0B !important; } } /* De losse accent-span is uit de HTML; de desktopmaten (gemeten 22-08: tot x281.25 vanaf buiten de schermrand, 135 hoog, op de fototop, hoek rechtsonder 37.5) verhuizen mee naar de ::before zodat er op elke breedte een bron is. */ @media (min-width: 901px){ .hp-services.v2-wwo .v2-wwo-foto{ position:relative !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ content:"" !important; position:absolute !important; left:min(0px, calc((1440px - 100vw) / 2 - 0px)) !important; top:-157px !important; bottom:auto !important; margin:0 !important; width:calc(281.25px - min(0px, (1440px - 100vw) / 2)) !important; height:135px !important; background:#F59E0B !important; border-radius:0 0 37.5px 0 !important; z-index:2 !important; } .v2-wwo-accent{ display:none !important; } /* restant-css op de oude span */ } /* =========================================================================== PATROONCOMPONENT (referentie-patroon.css + hermeting 22-08). De referentie gebruikt een png-traanplaattextuur; sinds 22-08 gebruiken wij hun eigen bestand (assets/img/texture.png, 1153x464, noppen rgb(31) vol dekkend). De lichtheid per plek komt uit een filter of lage opacity, nooit uit het bestand. Een basisregel, negen varianten met gemeten fluid boxen. =========================================================================== */ :root{ --dps-patroon: url("/assets/img/texture.png"); --v2-tegel: 617.5px auto; } /* oude svg-tegels verwijzen voortaan naar dezelfde png, zodat elk bestaand patroonelement op elke pagina automatisch de echte textuur krijgt */ :root{ --v2-traanplaat: var(--dps-patroon); --v2-traanplaat-band: var(--dps-patroon); --v2-traanplaat-licht: var(--dps-patroon); --v2-traanplaat-wit-band: var(--dps-patroon); --v2-traanplaat-fel: var(--dps-patroon); } /* component: basis. Elke laag draagt het echte texture.png; boxen, sizes en filters zijn per plek bij randoco gemeten op 390 EN 1440 en als calc(a·px + b·vw) door beide punten gefit. Drie filters komen voor: none, brightness(0.4) invert(1) (partners: noppen -> L243) en brightness(0) invert(1) (callout/offerte: noppen -> wit). */ .dps-patroon, section.hp-portfolio::before, .hp-waarom::after, .v2-loc-patroon, section.hp-res::before, .v2-social-patroon, .v2-cta-cirkel::after, .footer-bottom::before{ background-image:var(--dps-patroon) !important; background-repeat:repeat !important; background-position:50% 0% !important; background-attachment:scroll !important; mix-blend-mode:normal !important; filter:none !important; pointer-events:none !important; } section.hp-portfolio, section.hp-res, .footer-bottom, .hp-waarom, .hp-locaties, .hp-social{ position:relative; } section.hp-portfolio::before, section.hp-res::before, .footer-bottom::before, .hp-waarom::after, .v2-cta-cirkel::after{ content:"" !important; position:absolute !important; z-index:0 !important; } /* hero: strook op het zwarte decorblok, alleen desktop (ref-decoration is 0x0 op 390); size 617.5 -> 750. Mobiel houdt ::after zijn scrimfunctie. */ @media (min-width:768px){ .hp-hero-slider::after{ background-image:var(--dps-patroon) !important; background-repeat:repeat !important; background-position:50% 0% !important; background-size:calc(568.285px + 12.619vw) !important; opacity:1 !important; filter:none !important; } } /* projecten: blok linksboven 408.75x292.27 -> 450x319.75, size 626.25 -> 900 */ section.hp-portfolio::before{ top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; width:calc(393.429px + 3.9286vw) !important; height:calc(282.058px + 2.6175vw) !important; background-size:calc(524.571px + 26.0714vw) !important; opacity:0.03 !important; } /* partners: de laag staat op .v2-band::after (eigen blok hierboven); de oude kop-laag blijft uit */ /* callout: blokje tegen de rechterbovenhoek 75.25x160.13 -> 142.5x450, wit patroon (brightness 0 + invert) over de foto, z2 */ .hp-waarom::after{ top:0 !important; right:0 !important; left:auto !important; bottom:auto !important; width:calc(50.271px + 6.4048vw) !important; height:calc(52.455px + 27.6071vw) !important; background-size:cover !important; opacity:0.9 !important; filter:brightness(0) invert(1) !important; z-index:2 !important; } /* vestigingen: dunne strook onder het locatieblok, 390x29.56 op x0 -> 564x48 op x801, size 600 -> 712.5, t.o.v. de sectie */ .v2-loc-patroon{ position:absolute !important; left:calc(-297.514px + 76.2857vw) !important; top:calc(792.114px + 23.0476vw) !important; width:calc(325.371px + 16.5714vw) !important; height:calc(22.712px + 1.756vw) !important; margin:0 !important; background-size:calc(558.214px + 10.7143vw) !important; opacity:1 !important; } /* kennisbank: hoge kolom linksboven 181.44x504.53 -> 487.5x862.5 */ section.hp-res::before{ top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; width:calc(67.757px + 29.1488vw) !important; height:calc(371.573px + 34.0923vw) !important; background-size:calc(524.571px + 26.0714vw) !important; opacity:0.03 !important; } /* social: vlak linksboven, 390x684 -> 1127.39x750.67, size auto */ .v2-social-patroon{ position:absolute !important; top:0 !important; left:0 !important; width:calc(116.114px + 70.2276vw) !important; height:calc(659.243px + 6.3497vw) !important; background-size:auto !important; opacity:0.03 !important; } /* offerte: wit patroonvlak over de ronde foto (wrapper 155.6 -> 372, bij ons identiek), 373.34x186.67 op -108.89/77.78 -> 892.8x446.39 op -260.39/186; z2, cover */ .v2-cta-cirkel::after{ top:calc(37.586px + 10.3065vw) !important; left:calc(-52.62px - 14.4286vw) !important; right:auto !important; bottom:auto !important; width:calc(180.404px + 49.4717vw) !important; height:calc(90.205px + 24.7351vw) !important; background-size:cover !important; opacity:0.13 !important; filter:brightness(0) invert(1) !important; z-index:2 !important; } /* copyright: strook direct BOVEN de copyrightbalk, 390x46.09 -> 1440x52.5, size 624px (160% van 390) -> 1153px (auto) */ .footer-bottom::before{ top:calc(-43.714px - 0.6101vw) !important; left:0 !important; right:auto !important; bottom:auto !important; width:100% !important; height:calc(43.714px + 0.6101vw) !important; background-size:calc(427.51px + 50.381vw) !important; opacity:1 !important; } .footer-bottom{ overflow:visible !important; } /* content boven de patroonlaag houden */ section.hp-portfolio > *, section.hp-res > *, .footer-bottom > *{ position:relative; z-index:1; } /* WATERMERK-component: eigen logo, contain, no-repeat, gecentreerd; de grayscale-filter maakt ons kleurenlogo lichtgrijs zoals hun svg-asset. */ .v2-band::before{ background:url(/assets/img/logo.png) 50% 50% / contain no-repeat !important; filter:grayscale(1) !important; opacity:0.3 !important; } .v2-social-watermerk{ filter:grayscale(1) !important; opacity:0.3 !important; } /* ---- nieuwskaarten (s8) ---- */ /* de foto dekt bij de referentie de blauwe figuur volledig (604x552 op dx0/dy0); het blauw is alleen een laadfallback en ligt nooit over tekst */ .v2-res-kaart .v2-res-beeld img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } /* Lees verder: compact, tokenvorm, ref-kleur (was 146x49 vol rgb(10,130,230)) */ .v2-res-kaart .v2-res-lees, .v2-res-kaart .btn.v2-res-lees{ background:#0F172A !important; border:2px solid #0F172A !important; color:#fff !important; font-size:var(--ref-knop-fs) !important; line-height:1.4 !important; padding:var(--ref-knop-pad-y) var(--ref-knop-pad-x) !important; border-radius:0 var(--ref-knop-radius) 0 var(--ref-knop-radius) !important; width:auto !important; align-self:flex-start !important; flex:0 0 auto !important; } /* ---- testimonials (s7) ---- */ /* kop: metingen Dikkie 390: Arial 46.125/46.125, 700, center */ .hp-testi h2, .v2-testi h2.v2-testi-kop{ font-weight:700 !important; } /* golfrand onder de locatiefoto bestaat bij de referentie niet (geen clip, geen mask op hun sectie): rechte onderkant */ .v2-loc-kartel{ display:none !important; } .v2-loc-fotos.toon-kartel .v2-loc-kartel{ opacity:0 !important; } .v2-loc-foto[data-vorm="kartel"]{ clip-path:none !important; mask-image:none !important; -webkit-mask-image:none !important; } /* ---- partnerband (s3) ---- */ .v2-band .v2-band-kop h2, .v2-band h2{ font-weight:400 !important; } .v2-band-lijst img{ filter:grayscale(1) !important; opacity:0.3 !important; border:0 !important; } /* Fontopruiming 22-08: de laatste vier plekken die nog Inter of Barlow renderden expliciet op de systeemstack. */ .nav-lang-btn, .v2-mm-tab, .v2-hero-showall, .v2-ft-slogan{ font-family: Arial, Helvetica, sans-serif !important; } /* =========================================================================== GELE ELEMENTEN FLUID (referentie-geel-390 + referentie-geel-1440). Elke maat is calc(a·px + b·vw) exact door beide meetpunten, zodat ook tussenmaten kloppen; geen breekpunt-takken meer. Dit blok staat na de eerdere per-breekpunt-regels en vervangt ze in de cascade. =========================================================================== */ /* 1. accentstreep op de projectkaart: 87.84x2.08 -> 112.5x3, linksboven */ .v2-hero-featured .project-card{ position:relative; } .v2-hero-featured .project-card::after{ content:"" !important; position:absolute !important; left:0 !important; top:0 !important; width:calc(78.686px + 2.3482vw) !important; height:calc(1.7355px + 0.0878vw) !important; background:#F59E0B !important; z-index:2 !important; border-radius:0 !important; } /* 2. Show All: radius linksonder 20.875 -> 30, breedte 50.97 -> 87, padding 20.4375/10.875 -> 22.5/22.5 */ .v2-hero-featured .v2-hero-showall, .v2-hero-showall{ width:calc(37.585px + 3.4317vw) !important; border-radius:0 0 0 calc(17.485px + 0.869vw) !important; padding:calc(19.671px + 0.1964vw) calc(6.557px + 1.1071vw) !important; } /* 3. geel blok Wat Wij Bieden: rechterrand 159.84 -> 281.25 vanaf een volle schermbreedte links buiten beeld; hoogte 55.69 -> 135; beide onderhoeken 21.3125 -> 37.5; boventop -27.75 -> -67.75 */ .hp-services.v2-wwo .v2-wwo-foto::before{ content:"" !important; position:absolute !important; left:-100vw !important; right:auto !important; bottom:auto !important; margin:0 !important; width:calc(114.75px + 111.5625vw) !important; height:calc(26.228px + 7.5536vw) !important; top:calc(45.421px - 18.7619vw) !important; /* -27.75 (390) -> -224.75 t.o.v. de wrapper: de img zit op desktop -157 boven de wrapper en het accent hoort op img-top -67.5 (scherm 2102.5) */ border-radius:0 0 calc(15.3px + 1.5417vw) calc(15.3px + 1.5417vw) !important; background:#F59E0B !important; z-index:5 !important; } /* 4. sectielijn Wat Wij Bieden: 0 breed op 390, 210x3 op 1440, gecentreerd bovenaan de sectie */ .v2-wwo-streep{ display:block !important; position:absolute !important; left:50% !important; transform:translateX(-50%) !important; top:0 !important; right:auto !important; width:clamp(0px, calc(20vw - 78px), 210px) !important; height:3px !important; clip-path:none !important; margin:0 !important; background:#F59E0B !important; z-index:20 !important; } /* 5. losse kennisbank-lijn (SPAN.line, alleen desktop): bestaat bij ons al als .v2-res-tand, 210x3 naast de kop, mobiel uit - conform. */ /* 6. geel vlak social: 107.95x109.19 -> 211.5x232.5, host-relatief left 239.98 -> 306, top 150.75 -> 249.17 */ .v2-social-vlak{ width:calc(69.49px + 9.8624vw) !important; height:calc(63.394px + 11.7440vw) !important; left:calc(215.458px + 6.2878vw) !important; right:auto !important; top:calc(114.194px + 9.3735vw) !important; border-radius:0 !important; z-index:2 !important; } /* 7. halve cirkel offerte: exact proportioneel aan de beeldwrapper (offsets 0.25x, top 0.5x: 38.89/156 en 93/372 zijn beide 0.25); de radius meet 500 op 390 en 375 op 1440 - beide ruim boven de halve breedte, dus visueel identiek volrond; de formule geeft de gemeten computed-waarde */ .v2-cta-cirkel{ position:relative; } .v2-cta-halve{ position:absolute !important; top:50% !important; left:-25% !important; right:-25% !important; bottom:-25% !important; width:auto !important; height:auto !important; border-radius:0 0 calc(546.43px - 11.9048vw) calc(546.43px - 11.9048vw) !important; background:#F59E0B !important; z-index:1 !important; } /* De kennisbank-lijn (SPAN.line-equivalent, ref 210x3 op desktop) werd door de oude wrap-guard al op 1440 tot 186 geknepen; dezelfde fluid-formule als de sectielijn geeft exact 210 op 1440 en krimpt daaronder netjes. */ .hp-res .v2-res-tand{ width:clamp(0px, calc(20vw - 78px), 210px) !important; height:3px !important; } /* =========================================================================== PARTNERSECTIE-PATROON HERSTELD (meting randoco 22-08). Referentie heeft in deze sectie EEN patroonelement: een blok op de kopkolom, z-1 achter de kop, size 220%, opacity 1 (de lichtheid komt uit de grote tegelschaal, niet uit een dekking). Gemeten box t.o.v. de sectie: 390: 390x228.94 op top -73, left 0; 1440: 622.5x345 op top 303, left -161. Bij ons stapelden twee lagen: de oude bandlaag op een 29.7px-minitegel (bijna dicht) plus de componentlaag over het hele kopblok. Een laag blijft, op de sectie zelf zodat de positie niet van onze kolombreedte afhangt. =========================================================================== */ .v2-band{ isolation:isolate; } .v2-band::after{ content:"" !important; position:absolute !important; width:calc(303.643px + 22.1429vw) !important; height:calc(185.829px + 11.0535vw) !important; top:calc(-212.657px + 35.8095vw) !important; left:calc(59.8px - 15.3333vw) !important; right:auto !important; bottom:auto !important; background-image:var(--dps-patroon) !important; background-size:220% !important; background-repeat:repeat !important; background-position:50% 0% !important; opacity:1 !important; z-index:-1 !important; pointer-events:none !important; /* ref heeft filter brightness(0.4) invert(1) op de patroonlaag: de rgb(31)-noppen renderen daardoor op L243 tegen bg 247 (gemeten). De lichtheid komt hiervandaan, niet uit opacity of het png. */ filter:brightness(0.4) invert(1) !important; mix-blend-mode:normal !important; } .v2-band-kop::after{ display:none !important; } /* kop en watermerk boven de patroonlaag, zoals ref (patroon z-1) */ .v2-band::before{ z-index:0 !important; } /* De offer-foto begint bij de referentie boven de sectiegrens; de img draagt die -157 op desktop al zelf, dus de wrapper blijft op 0 (een extra wrapper-marge verdubbelde de overlap). */ .hp-services.v2-wwo .v2-wwo-foto{ margin-top:0 !important; } /* =========================================================================== ZES MOBIELE PUNTEN (meting randoco 390, 22-08) =========================================================================== */ /* 1. nieuwskaarten: ref-kaart is transparant met zwarte titel 22.6125/700, meta 12.525/700 rgb(115,115,115) en de knop op mobiel LINKS ONDER de meta (meta y6840, knop y6878, beide x21 - gemeten). Ons blauwe kaartvlak met zwarte tekst erop vervalt; het blauw op .v2-res-beeld blijft als laadfallback achter de foto. */ .v2-res-kaart{ background:transparent !important; box-shadow:none !important; } .v2-res-kaart h3 a, .v2-res-kaart h3{ color:rgb(0,0,0) !important; } .v2-res-kaart .v2-res-meta, .v2-res-kaart .v2-res-cat, .v2-res-kaart .v2-res-datum{ color:rgb(115,115,115) !important; font-size:12.525px !important; font-weight:700 !important; background:transparent !important; } .v2-res-voet{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; padding:0 !important; background:transparent !important; } .v2-res-voet .v2-res-meta{ order:-1 !important; margin:16px 0 20.5px !important; } .v2-res-kaart .btn.v2-res-lees{ margin:0 !important; transform:none !important; } /* 2a. footerlogo: ref logo-footer.svg 81.8x81.8 gecentreerd */ .v2-ft-logo img{ width:82px !important; height:81.8px !important; object-fit:contain !important; } /* 2b. footer-iconen: ref is plat wit, 40x40, zonder cirkel of merkkleur */ footer .v2-si, .footer .v2-si{ border:0 !important; border-radius:0 !important; background:transparent !important; color:#fff !important; width:40px !important; height:40px !important; padding:10px !important; } footer .v2-si svg{ fill:currentColor; } /* 2c. footerknop + scheidingslijn (elementen via HTML toegevoegd): knop 143.1x56.6 gecentreerd; hr 2px op containerbreedte, 31px onder de knop, ref-computed border 1px inset grijs met wit vlak */ .v2-ft-cta{ display:inline-block; margin:18px auto 0 !important; } .v2-ft-lijn{ border:0 !important; height:2px !important; background:rgb(230,230,230) !important; margin:31px 21px 0 !important; opacity:.35; } /* 2d. copyrightbalk: wrapper vol breed met padding 0 21, tekst gecentreerd, niets buiten de schermrand */ .footer-bottom{ padding:15.35px 21px !important; } .footer-bottom, .footer-bottom *{ max-width:100% !important; overflow-wrap:break-word; } .footer-bottom{ text-align:center !important; } /* 3. social: het gele vlak hoort ACHTER de foto's (ref: ::before op de fotowrapper, z auto onder figures z1/z2), scherm-doelen gemeten: 390: x261/y297-in-sectie; 1440: x1131/y364. De kleine foto (DOM-laatste) ligt er rechtsonder overheen. */ .hp-social{ position:relative; } .hp-social .v2-social-vlak{ position:absolute !important; top:calc(272.114px + 6.381vw) !important; left:calc(-62.143px + 82.857vw) !important; right:auto !important; bottom:auto !important; z-index:0 !important; margin:0 !important; } .hp-social .v2-social-inner img:not(.v2-social-watermerk){ position:relative; z-index:1; } /* 4. offerte: de ronde foto staat bij ref GECENTREERD (wrapper x117 op 390, x534 op 1440 = telkens het schermmidden); de gele halve ligt eronder met de foto in het midden erop. */ .v2-cta-cirkel{ position:relative !important; margin-inline:auto !important; float:none !important; left:auto !important; right:auto !important; } .v2-cta-foto, .v2-cta-cirkel img{ position:relative !important; z-index:2 !important; border-radius:50% !important; } .v2-cta-halve{ z-index:1 !important; } /* 5. reviews: kaartradius exact ref (390: 0 21.3125) */ @media (max-width:767px){ .v2-testi-kaart{ border-radius:0 21.3125px !important; } } /* correcties na nameting van de zes punten */ /* kaart-bg: .hp-res .v2-res-kaart won op specificiteit */ .hp-res .v2-res-kaart, .hp-res article.v2-res-kaart{ background:transparent !important; box-shadow:none !important; } .v2-res-voet{ gap:0 !important; } /* ref: meta-einde -> knop 20.5px */ .v2-res-voet .v2-res-meta{ margin:0 0 20.5px !important; } /* footerknop werd op mobiel verborgen door de bronregel; ref toont hem (143x56.6, gecentreerd) */ .footer .v2-ft-knop{ display:block !important; width:fit-content !important; margin:18px auto 0 !important; } /* cta-cirkel: translateX(-78) duwde hem uit het midden; ref-wrapper is gecentreerd en steekt 50% (78px op 390) boven de sectiegrens uit */ .v2-cta-cirkel{ transform:none !important; margin-top:-78px !important; } /* social-vlak en kleine foto: anker is onze .v2-social-beelden (x21/290 op 390, x825/105 op 1440); offsets zo gefit dat de SCHERMposities exact de referentie zijn: vlak x261/y297-in-sectie -> x1131/y364, kleine foto x261/y448 -> op het vlak (ref-notitie 1440: "met foto erop") */ .hp-social .v2-social-vlak{ position:absolute !important; left:calc(215.486px + 6.2857vw) !important; top:calc(-13.4px - 0.6667vw) !important; /* anker verschoof door de paddingronde */ /* 7 (390) -> 0 (1440): ref-::before zit op top 0 van de fotowrapper, dus op kophoogte deels achter de foto */ right:auto !important; bottom:auto !important; z-index:0 !important; margin:0 !important; } .v2-social-beelden{ position:relative !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ position:absolute !important; left:calc(215.486px + 6.2857vw) !important; top:calc(124.2px + 8.6667vw) !important; /* 158 (390) -> 249 (1440): rechts naast de grote foto, deels eroverheen, met het gele blok erboven */ width:calc(69.49px + 9.8624vw) !important; height:calc(63.394px + 11.744vw) !important; margin:0 !important; z-index:2 !important; object-fit:cover !important; } /* oude mobiele compensatie (translateX -117) op de halve is overbodig nu de cirkel zelf gecentreerd staat */ .v2-cta-halve{ transform:none !important; } /* footerknop op de ref-knoptokens (ref 390: fs 20.175, pad 12.175/20.44, 143x56.6) */ .footer .v2-ft-knop{ font-size:var(--ref-knop-fs) !important; line-height:1.4 !important; padding:var(--ref-knop-pad-y) var(--ref-knop-pad-x) !important; } .footer .v2-ft-knop{ border:2px solid #0F172A !important; } /* reviews: gemeten ref-achtergrond 247 met witte kaart erop (kaart zelf heeft geen schaduw); bij ons was alles wit waardoor de kaart wegviel */ .hp-testi, .v2-testi{ background:#F8FAFC !important; } /* cta: margin-collapse brak de -78; padding breekt de collapse en de cirkel steekt fluid -78 -> -186 boven de sectiegrens uit (ref) */ .hp-cta.v2-cta{ padding-top:0.05px !important; overflow:visible !important; } .v2-cta-cirkel{ margin-top:calc(-37.886px - 10.2857vw) !important; } /* footerknop in het ref-blauw */ .footer .v2-ft-knop{ background:#0F172A !important; } /* footer-iconen: ook de instagram-gradientring uit (ref is plat wit) */ footer .v2-si::before, footer .v2-si::after, .footer .v2-si::before, .footer .v2-si::after{ display:none !important; } /* =========================================================================== WAT WIJ BIEDEN op 1440 (referentie-1440.css): de partnerband droeg de sectiepadding 60/0/150 dubbel (sectie EN inner: 60+815+150=1025 tegen ref 840), waardoor alles eronder 185px te laag begon. Padding een keer, inner op de ref-inhoudshoogte 630. Daarmee start de wwo-sectie op 2327, de foto op 2170, het accent op 2102.5 en de streep op de sectietop. =========================================================================== */ @media (min-width:768px){ .v2-band .v2-band-inner, section.v2-band .v2-band-inner{ padding-top:0 !important; padding-bottom:0 !important; min-height:630px !important; } } /* de foto toont zonder positie-instelling vooral lucht (oogt als egaal blauw vlak); onderkant van het beeld in beeld, ref-hoek 0 0 60 0 */ .hp-services.v2-wwo .v2-wwo-foto img{ object-fit:cover !important; object-position:center bottom !important; } @media (min-width:768px){ .hp-services.v2-wwo .v2-wwo-foto img{ border-radius:0 0 60px 0 !important; } } /* social/offerte 1440 (meting 22-08): het cta-patroonvlak hoort ONDER de ronde foto en de gele halve (alleen zichtbaar op de zwarte sectie), en de sectie-patroonlaag van de social-sectie bestaat op desktop niet zichtbaar bij de referentie */ .v2-cta-cirkel::after{ z-index:0 !important; } @media (min-width:768px){ .v2-social-patroon{ display:none !important; } } /* social-iconen sitewide plat zoals de referentie (sectie: zwart 40.9x40.9 pad 10 op licht; footer houdt de witte variant): geen cirkel, geen merkkleur, geen gradientring */ .v2-si{ border:0 !important; border-radius:0 !important; background:transparent !important; background-image:none !important; color:rgb(0,0,0) !important; width:40.9px !important; height:40.9px !important; padding:10px !important; } .v2-si::before, .v2-si::after{ display:none !important; } .v2-si svg{ fill:currentColor; } /* de witte footervariant blijft winnen door de latere, specifiekere regel */ footer .v2-si, .footer .v2-si{ color:#fff !important; width:40px !important; height:40px !important; } /* HERO-WATERMERK (meting DIV.background::before op randoco, 22-08). De 50%/50% in referentie-patroon.css was een ander watermerk; de hero heeft een eigen box: 390: 241.27x227 op left 290.95 (steekt 142.2 rechts uit), 1440: 546x514.5 op left 370.875 (steekt 225 uit), top 0, opacity 0.6, contain, gecentreerd in de eigen box; de container knipt hem op de fotorand af (overflow hidden staat er al). */ .hp-hero-slides::after{ width:calc(128.079px + 29.0223vw) !important; height:calc(120.214px + 27.381vw) !important; left:calc(261.268px + 7.6116vw) !important; top:0 !important; right:auto !important; bottom:auto !important; background-size:contain !important; background-position:50% 50% !important; background-repeat:no-repeat !important; opacity:0.6 !important; transform:none !important; margin:0 !important; } /* CTA-kop en social-iconen 1440-ronde (meting 22-08). Kop hoort vlak bij de onderrand van de gele halve: 390 +6.6, 1440 -50 t.o.v. de halve-onderkant (was +83.8 / +112); de inner-padding draagt het verschil. Kop gecentreerd (ref x21 / x45). */ .v2-cta-inner{ padding-top:calc(46.828px - 0.302vw) !important; } .v2-cta-kop{ margin-inline:auto !important; } /* social-iconen: ref 390 40.9x40.9 pad 10 -> 1440 45x45 pad 7.5 */ .v2-si{ width:calc(39.377px + 0.3905vw) !important; height:calc(39.377px + 0.3905vw) !important; padding:calc(10.929px - 0.2381vw) !important; } footer .v2-si, .footer .v2-si{ width:calc(39.377px + 0.3905vw) !important; height:calc(39.377px + 0.3905vw) !important; } /* de social-tekstkolom start bij ref op de 98-gutter (ons 57): kop en iconenrij schuiven op desktop samen 41px naar rechts */ @media (min-width:768px){ .v2-social-tekst{ margin-left:41px !important; } } /* oude -40-compensatie op de cta-kop: weg; de kop centreert dan exact (ref x45 op 1440, x21 op 390) */ .v2-cta-kop{ transform:none !important; } /* =========================================================================== TUSSENMATEN-CORRECTIE (meting 1126, 22-08). Randoco's maten zijn rem+vw-formules en hun root-font springt op 768px van 16 naar 12px; een lineaire fit door 390/1440 mist die sprong op elke tussenmaat (op 1126 zichtbaar op het wwo-accent, de cta-radius en de iconen). Daarom per element twee takken: desktop exact door de metingen op 1126 en 1440, mobiel door 390 met dezelfde vw-helling. =========================================================================== */ @media (min-width:768px){ .hp-services.v2-wwo .v2-wwo-foto::before{ width:calc(78.73px + 114.0637vw) !important; height:calc(18.042px + 8.121vw) !important; top:calc(-166.28px - 4.0605vw) !important; border-radius:0 0 calc(10.5px + 1.875vw) calc(10.5px + 1.875vw) !important; } .v2-wwo-streep{ width:clamp(0px, calc(-79.354px + 20.0936vw), 210px) !important; height:calc(-0.224px + 0.2239vw) !important; } .hp-social .v2-social-vlak{ left:calc(131.734px + 12.1019vw) !important; top:0 !important; width:calc(47.71px + 11.3749vw) !important; height:calc(43.47px + 13.1271vw) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:calc(131.734px + 12.1019vw) !important; top:calc(85.24px + 11.3725vw) !important; width:calc(47.71px + 11.3749vw) !important; height:calc(43.47px + 13.1271vw) !important; } .v2-cta-cirkel{ width:calc(51.443px + 22.2611vw) !important; height:calc(51.443px + 22.2611vw) !important; margin-top:calc(-25.722px - 11.1306vw) !important; } .v2-cta-halve{ border-radius:0 0 375px 375px !important; } .v2-si{ width:calc(27.121px + 1.2417vw) !important; height:calc(27.121px + 1.2417vw) !important; padding:7.5px !important; } footer .v2-si, .footer .v2-si{ width:calc(27.121px + 1.2417vw) !important; height:calc(27.121px + 1.2417vw) !important; } .v2-social-tekst{ margin-left:calc(59.35px - 1.274vw) !important; } } @media (max-width:767px){ .hp-services.v2-wwo .v2-wwo-foto::before{ width:calc(104.995px + 114.0637vw) !important; height:calc(24.0px + 8.121vw) !important; top:calc(-11.914px - 4.0605vw) !important; border-radius:0 0 calc(14px + 1.875vw) calc(14px + 1.875vw) !important; } .hp-social .v2-social-vlak{ left:calc(192.802px + 12.1019vw) !important; top:calc(-13.4px - 0.6667vw) !important; /* anker verschoof door de paddingronde */ width:calc(63.591px + 11.3749vw) !important; height:calc(57.992px + 13.1271vw) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:calc(192.802px + 12.1019vw) !important; top:calc(75.62px + 14.968vw) !important; width:calc(63.591px + 11.3749vw) !important; height:calc(57.992px + 13.1271vw) !important; } .v2-cta-cirkel{ width:calc(68.782px + 22.2611vw) !important; height:calc(68.782px + 22.2611vw) !important; margin-top:calc(-34.391px - 11.1306vw) !important; } .v2-cta-halve{ border-radius:0 0 500px 500px !important; } .v2-si{ width:calc(36.057px + 1.2417vw) !important; height:calc(36.057px + 1.2417vw) !important; padding:10px !important; } } /* kopafstand nagekalibreerd op de drie meetpunten (6.6 / -35.2 / -50) */ @media (min-width:768px){ .v2-cta-inner{ padding-top:calc(32.62px + 0.6847vw) !important; } } @media (max-width:767px){ .v2-cta-inner{ padding-top:calc(42.98px + 0.6847vw) !important; } } /* De social-sectielaag hoort er op desktop WEL te zijn (ref ::before, opacity 0.03, size auto, top0 left0): het subtiele strookje boven het gele vierkant. De eerdere display:none gold de grove patroonfouten en is hiermee teruggedraaid; box per tak gemeten (1126: 886.94x623.31, 1440: 1127.39x750.67; mobiel 390x684 via de bestaande formules). */ @media (min-width:768px){ .v2-social-patroon{ display:block !important; width:calc(24.68px + 76.5771vw) !important; height:calc(166.612px + 40.5605vw) !important; top:0 !important; left:0 !important; background-size:auto !important; opacity:0.03 !important; } } /* =========================================================================== SECTIEHOOGTE-SCHALING (meting 22-08, zes breedtes). Randoco's paddings vormen een stelsel: basis 2rem+2.5vw (rem springt 16 -> 12 op 768), partnerband-onderkant 4.25rem+6.875vw, callout/kennisbank-onderkant 2.75rem+5vw, social-onderkant 56px+7.5vw (remvrij). De hero heeft drie takken: mobiel vast 844, 768-1023 calc(401.7px+48.08vw) (gemeten op 768 en 820), vanaf 1024 calc(240.46px+37.26vw). Onze vaste 1440- paddings hielden elke sectie op tussenmaten te hoog. =========================================================================== */ :root{ --ru: calc(24px + 2.5vw); --ru-half: calc(12px + 1.25vw); --ru-band-pb: calc(51px + 6.875vw); --ru-groot: calc(33px + 5vw); --ru-social-pb: calc(56px + 7.5vw); } @media (max-width:767px){ :root{ --ru: calc(32px + 2.5vw); --ru-half: calc(16px + 1.25vw); --ru-band-pb: calc(68px + 6.875vw); --ru-groot: calc(44px + 5vw); } } .hp-hero-slider{ height:calc(240.46px + 37.26vw) !important; min-height:0 !important; } @media (max-width:1023px){ .hp-hero-slider{ height:calc(401.7px + 48.08vw) !important; } } @media (max-width:767px){ .hp-hero-slider{ height:calc(636px + 53.3333vw) !important; } } /* ref mobiel: 828@360 -> 856@414, lineair */ section.hp-portfolio{ padding-top:var(--ru-half) !important; padding-bottom:var(--ru) !important; } .v2-band{ padding-top:var(--ru) !important; padding-bottom:var(--ru-band-pb) !important; } .v2-band .v2-band-inner, section.v2-band .v2-band-inner{ padding-top:0 !important; padding-bottom:0 !important; min-height:calc(-76.1px + 49.038vw) !important; } @media (min-width:768px) and (max-width:1023px){ .v2-band .v2-band-inner{ min-height:478px !important; } } @media (max-width:767px){ .v2-band .v2-band-inner{ min-height:calc(218.152px + 49.038vw) !important; } } .hp-services.v2-wwo{ padding-top:0 !important; padding-bottom:var(--ru) !important; } .hp-waarom{ padding-top:var(--ru-groot) !important; padding-bottom:var(--ru-groot) !important; } .hp-locaties{ padding-top:0 !important; padding-bottom:0 !important; } .v2-testi, .hp-testi{ padding-top:var(--ru) !important; padding-bottom:var(--ru) !important; } section.hp-res{ padding-top:var(--ru) !important; padding-bottom:var(--ru-groot) !important; } .hp-social, .v2-social{ padding-top:var(--ru-groot) !important; padding-bottom:var(--ru-social-pb) !important; } .hp-cta.v2-cta{ padding-bottom:var(--ru) !important; } /* interne componenten op de ref-schaal (meting 1126+1440, 22-08) */ @media (min-width:768px){ /* partnerband: li's krimpen mee (ref-inhoud 476 -> 630) */ .v2-band-lijst li{ height:calc(1.8px + 8.2803vw) !important; padding-block:0 !important; display:flex !important; align-items:center !important; box-sizing:border-box !important; } /* wwo-foto: hoogte 950 -> 1068, overlap -154 -> -158 (was vast 1068/-157) */ .hp-services.v2-wwo .v2-wwo-foto img{ height:calc(526.8px + 37.5796vw) !important; margin-top:calc(-139.66px - 1.2739vw) !important; width:50vw !important; max-width:none !important; object-fit:cover !important; } /* accent-top herfit op de fluid img-offset (doel -55 -> -67.5 t.o.v. de foto) */ .hp-services.v2-wwo .v2-wwo-foto::before{ top:calc(-149.84px - 5.2548vw) !important; } /* testimonials: het beeldblok schaalt (sectie-doel 1103 -> 1350) */ .v2-testi-beeld{ height:calc(-107.4px + 71.9745vw) !important; } .v2-testi-dia{ height:auto !important; } /* kennisbank: kaartbeeld 475 -> 552 */ .v2-res-kaart .v2-res-beeld{ height:calc(198.88px + 24.5223vw) !important; } } /* zwarte callout: achtergrond bepaalt de sectiehoogte; ref 991 -> 1095, 768-1023: 710, mobiel vast 839 */ .v2-st-bg{ height:calc(618.05px + 33.1211vw) !important; } @media (min-width:768px) and (max-width:1023px){ .v2-st-bg{ height:710px !important; } } @media (max-width:767px){ .v2-st-bg{ height:839px !important; } } /* sectiehoogtes: vaste 1095/911/586-waarden los; ref-takken erop */ .hp-waarom{ height:calc(618.05px + 33.1211vw) !important; min-height:0 !important; } @media (min-width:768px) and (max-width:1023px){ .hp-waarom{ height:710px !important; } } @media (max-width:767px){ .hp-waarom{ height:839px !important; } } @media (min-width:768px){ .hp-services.v2-wwo, .hp-services.v2-wwo .v2-wwo-foto{ height:auto !important; min-height:0 !important; } .hp-cta.v2-cta{ min-height:calc(191.6px + 27.3885vw) !important; height:auto !important; } } /* herfits: kennisbankbeeld (+29 op 1126) en testi-beeld (-22 op 1440) */ @media (min-width:768px){ .v2-res-kaart .v2-res-beeld{ height:calc(228.5px + 22.53vw) !important; } .v2-testi-beeld{ height:calc(-28.5px + 64.9682vw) !important; } } /* mobiele nakalibratie: de band-tak verloor op specificiteit van de basisregel; wwo-inhoud en social-inner op de gemeten ref-minima */ @media (max-width:767px){ .v2-band .v2-band-inner, section.v2-band .v2-band-inner{ min-height:calc(218.152px + 49.038vw) !important; } .v2-wwo-inhoud{ min-height:712px !important; } .v2-social-inner{ min-height:535px !important; } } /* =========================================================================== ZES PUNTEN 1126-RONDE (22-08). Plus 1920-meting: randoco capt boven 1440 alle maten op de 1440-waarde en centreert de content. =========================================================================== */ /* 1. koppen boven het beeld: onze NL-koppen zijn breder dan hun EN */ .hp-social h2, .v2-social-kop{ position:relative !important; z-index:3 !important; } .v2-cta-kop{ position:relative !important; z-index:3 !important; } /* 2. grote social-foto: ref 397.7x266 (1024) -> 427.1x286 (1126) -> 517.5x346.7 (1440, cap); positie via marge t.o.v. onze wrapper */ @media (min-width:1024px){ .v2-social-beelden img:not(.v2-social-foto2){ width:min(calc(103.04px + 28.7898vw), 517.5px) !important; height:min(calc(68.79px + 19.2994vw), 346.7px) !important; max-width:none !important; object-fit:cover !important; /* de bron verschuift de foto zelf al fluid; alleen de gemeten restdelta erbovenop (23 -> 53 tussen 1024 en 1280, 0 vanaf 1440) */ margin-left:calc(-99.16px + 11.9vw) !important; } } @media (max-width:767px){ .v2-social-beelden img:not(.v2-social-foto2){ width:calc(206.92px + 28.7898vw) !important; height:calc(138.53px + 19.2994vw) !important; object-fit:cover !important; } } /* 3. kleine foto: scherm-doel sectie+291 (1126) -> +354 (1440, cap) */ @media (min-width:768px){ .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ top:min(calc(33.46px + 14.968vw), 249px) !important; } } /* caps >=1440 voor het vierkant, de kleine foto en de cta */ @media (min-width:1440px){ .hp-social .v2-social-vlak{ left:306px !important; top:0 !important; width:211.5px !important; height:232.5px !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:306px !important; width:211.5px !important; height:232.5px !important; } .v2-cta-cirkel{ width:372px !important; height:372px !important; margin-top:-186px !important; } .v2-cta-inner{ padding-top:42.48px !important; } .v2-si{ width:45px !important; height:45px !important; } .v2-social-tekst{ margin-left:41px !important; } .v2-band-lijst li{ height:121px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ height:1068px !important; margin-top:-158px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:-224.75px !important; } .v2-testi-beeld{ height:907px !important; } .v2-res-kaart .v2-res-beeld{ height:552.9px !important; } .hp-waarom{ height:1095px !important; } .hp-cta.v2-cta{ min-height:586px !important; } .hp-hero-slider{ height:777px !important; } .v2-social-beelden img:not(.v2-social-foto2){ margin-left:1px !important; } } /* =========================================================================== FOOTER-RONDE (meting 22-08 op 390/1126/1440) =========================================================================== */ /* slogan: 3 regels, fs 22.96 -> 28.68 -> 33, regelafstand 1.18 */ .v2-ft-slogan{ font-size:calc(13.2px + 1.375vw) !important; line-height:1.18 !important; font-weight:700 !important; } @media (max-width:767px){ .v2-ft-slogan{ font-size:calc(17.6px + 1.375vw) !important; } } @media (min-width:1440px){ .v2-ft-slogan{ font-size:33px !important; } } /* vestigingskolommen: grijze kop (0.95rem+0.25vw) met wit nummer (0.975rem+0.125vw, 700) eronder */ .v2-ft-gegevens .v2-ft-titel{ color:rgb(115,115,115) !important; font-weight:700 !important; font-size:calc(11.4px + 0.25vw) !important; } .v2-ft-gegevens .v2-ft-regels a{ color:#fff !important; font-weight:700 !important; font-size:calc(11.7px + 0.125vw) !important; } @media (max-width:767px){ .v2-ft-gegevens .v2-ft-titel{ font-size:calc(15.2px + 0.25vw) !important; } .v2-ft-gegevens .v2-ft-regels a{ font-size:calc(15.6px + 0.125vw) !important; } } @media (min-width:1440px){ .v2-ft-gegevens .v2-ft-titel{ font-size:15px !important; } .v2-ft-gegevens .v2-ft-regels a{ font-size:13.5px !important; } } /* knop -> scheidingslijn: desktop 74, mobiel 31 */ .v2-ft-lijn{ margin-top:74px !important; } @media (max-width:767px){ .v2-ft-lijn{ margin-top:31px !important; } } /* verhuisde juridische links: als gewone kolomlinks, de knop als link */ .v2-ft-kolom .cookie-settings-open{ background:none !important; border:0 !important; padding:0 !important; color:inherit !important; font:inherit !important; cursor:pointer; text-align:left !important; } /* ref: de knop eindigt onderaan de merkkolom, gelijk met de onderkant van de menukolommen; zo is de afstand tot de lijn overal de vaste 74 */ @media (min-width:768px){ .v2-ft-merk{ display:flex !important; flex-direction:column !important; align-self:stretch !important; } .footer .v2-ft-knop{ margin-top:auto !important; margin-bottom:0 !important; align-self:center !important; } } /* =========================================================================== TABLET 768-1023 (meting randoco 768/900/1023, 22-08): hun layout stapelt tot 1024; de maten hieronder zijn de gemeten tablet-takken. =========================================================================== */ @media (min-width:768px) and (max-width:1023px){ .hp-services.v2-wwo .v2-wwo-foto img{ width:555px !important; height:300px !important; margin:0 auto !important; display:block !important; max-width:100% !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:calc(-11.914px - 4.0605vw) !important; } .v2-band .v2-band-inner, section.v2-band .v2-band-inner{ min-height:calc(205.9px + 35.4118vw) !important; } .v2-loc-paneel{ min-height:calc(486.1px + 42.8235vw) !important; height:auto !important; } .v2-loc-beeld{ height:96vw !important; } .v2-testi-beeld{ height:calc(-21.6px + 61.6078vw) !important; } .v2-res-kaart .v2-res-beeld{ height:calc(-12.7px + 53.3725vw) !important; } .v2-social-beelden img:not(.v2-social-foto2){ width:calc(-7.36px + 84.4697vw) !important; height:auto !important; margin-left:0 !important; margin-top:calc(4.9px + 4.3137vw) !important; } .hp-social .v2-social-vlak{ left:calc(-70.5px + 85.6431vw) !important; top:0 !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:calc(-70.5px + 85.6431vw) !important; top:auto !important; bottom:0 !important; } } @media (min-width:900px) and (max-width:1023px){ .v2-social-beelden img:not(.v2-social-foto2){ width:calc(608.63px + 16.0163vw) !important; } } /* tablet-nakalibratie: slides 2-op-rij (384 -> 474.8), wwo-lijstminimum, testi tweekoloms zoals ref (kaart naast foto), locatiepaneel-minimum */ @media (min-width:768px) and (max-width:1023px){ .v2-car .v2-cs{ width:calc(110.6px + 35.6061vw) !important; flex:0 0 auto !important; } .v2-wwo-inhoud{ min-height:calc(439.6px + 31.8431vw) !important; } .v2-testi-dia{ display:grid !important; grid-template-columns:1fr calc(-17px + 48.3922vw) !important; align-items:start !important; column-gap:14px !important; } .hp-locaties .v2-loc-paneel.v2-loc-paneel{ min-height:calc(486.1px + 42.8235vw) !important; height:auto !important; } .hp-locaties .v2-loc-beeld.v2-loc-beeld{ height:96vw !important; } } /* tablet-restpunten (768-1023): testi-minhoogte los (flow = ref), project- en kennisbankknoppen compact op een rij, kaartgap 29 zoals ref */ @media (min-width:768px) and (max-width:1023px){ .v2-testi, .hp-testi{ min-height:0 !important; height:auto !important; } .v2-ps-knoppen{ display:flex !important; flex-direction:row !important; gap:12px !important; align-items:center !important; } .v2-ps-knoppen .btn{ width:auto !important; flex:0 0 auto !important; } section.hp-res .v2-res-kop ~ .btn, section.hp-res a.btn.v2-res-alle{ width:auto !important; display:inline-block !important; } .v2-res-kaart{ margin-bottom:29px !important; } } /* tablet-iteratie 2: ref-kop wrapt daar niet (onze vaste br uit), knoppen op hun rem12-maat (fs 14.4px+0.25vw -> h 47), kopzones op de ref-y's, projectfoto op de gemeten tablet-hoogte */ @media (min-width:768px) and (max-width:1023px){ .v2-res-kop br{ display:none !important; } .v2-res-kop{ margin-bottom:34px !important; } section.hp-res .v2-res-kop ~ .btn, section.hp-res a.btn.v2-res-alle{ margin-bottom:29px !important; } .btn, .v2-hero-showall{ font-size:calc(14.4px + 0.25vw) !important; padding-top:11px !important; padding-bottom:11px !important; } .v2-ps-kop{ margin-bottom:16px !important; } .v2-ps-knoppen{ margin-bottom:34px !important; } section.hp-portfolio .project-card img{ height:calc(72.7px + 23.4848vw) !important; object-fit:cover !important; } } /* tablet-iteratie 3 */ @media (min-width:768px) and (max-width:1023px){ /* oude vaste locatiehoogte (1172) uit; de tablet-takken gelden */ .hp-locaties, .hp-locaties .v2-loc-beeld, .hp-locaties .v2-loc-paneel{ min-height:0 !important; } .hp-locaties .v2-loc-beeld.v2-loc-beeld{ height:96vw !important; } /* knoppen: specificiteit boven de oude tokenregels */ .btn.btn, a.btn.btn, .v2-hero-showall.v2-hero-showall{ font-size:calc(14.4px + 0.25vw) !important; padding-top:11px !important; padding-bottom:11px !important; } /* projecten: rij-marge en scrollzone op ref */ .v2-ps-knoppen{ margin-bottom:12px !important; } .v2-car-wrap > .container{ max-height:28px !important; } /* social: foto zonder mobiele %-offset, ref-aspect per subtak, wrapper met de symmetrische onderruimte */ .v2-social-foto1, .v2-social-beelden img:not(.v2-social-foto2){ position:relative !important; top:0 !important; left:0 !important; } .v2-social-beelden img:not(.v2-social-foto2){ height:calc(-4.93px + 56.59vw) !important; } .v2-social-beelden{ padding-bottom:calc(4.9px + 4.3137vw) !important; height:auto !important; } } @media (min-width:900px) and (max-width:1023px){ .v2-social-beelden img:not(.v2-social-foto2){ height:calc(407.78px + 10.73vw) !important; } } /* tablet-iteratie 4: knoppadding-specificiteit, kopzones strak, laatste kaart zonder marge, fotomarge onderin weg */ @media (min-width:768px) and (max-width:1023px){ .btn.btn.btn, a.btn.btn.btn{ font-size:calc(14.4px + 0.25vw) !important; padding-top:11px !important; padding-bottom:11px !important; } .v2-res-kop{ margin-bottom:12px !important; } section.hp-res .v2-res-box .btn{ margin-top:0 !important; margin-bottom:0 !important; } .v2-res-box{ margin-bottom:29px !important; } section.hp-res .v2-res-kolom .v2-res-kaart:last-child{ margin-bottom:0 !important; } .v2-social-beelden img:not(.v2-social-foto2){ margin-bottom:0 !important; } .v2-ps-kop{ margin-bottom:12px !important; } } /* tablet-iteratie 5: knoppen met zwaardere selector, foto als block (inline-witruimte), carrouselmarge op de ref-afstand */ @media (min-width:768px) and (max-width:1023px){ .v2-ps-knoppen .btn.btn, section.hp-res .btn.btn, .v2-res-box .btn.btn{ font-size:calc(14.4px + 0.25vw) !important; line-height:1.4 !important; padding-top:11px !important; padding-bottom:11px !important; } .v2-social-beelden img:not(.v2-social-foto2){ display:block !important; } .v2-car-wrap{ margin-top:0 !important; } .v2-car{ margin-top:20px !important; } } /* tablet-iteratie 6: de head-marge droeg 49 (ref 37-20), en de social-fotospan kreeg nog een oude mobiele offset */ @media (min-width:768px) and (max-width:1023px){ .v2-ps-head{ margin-bottom:20px !important; } .v2-social-foto1{ margin:0 !important; top:0 !important; transform:none !important; } } /* tablet-iteratie 7: de overlay-span overlapt de foto exact (zijn vaste negatieve marge schaalde niet mee met de fotoformule) */ @media (min-width:768px) and (max-width:1023px){ .v2-social-foto1{ margin-top:calc(4.93px - 56.59vw) !important; height:calc(-4.93px + 56.59vw) !important; } } @media (min-width:900px) and (max-width:1023px){ .v2-social-foto1{ margin-top:calc(-407.78px - 10.73vw) !important; height:calc(407.78px + 10.73vw) !important; } } /* tablet: de geërfde vw-fontgrootte maakte van de witruimte tussen de foto's een lineboks van ~50-117px; fs 0 op de fotowrapper */ @media (min-width:768px) and (max-width:1023px){ .v2-social-beelden{ font-size:0 !important; line-height:0 !important; } } /* tablet: fotowrapper hard op de gemeten ref-hoogte (505.8 -> 592 -> 616) */ @media (min-width:768px) and (max-width:1023px){ .v2-social-beelden{ height:calc(4.87px + 65.21vw) !important; min-height:0 !important; } } @media (min-width:900px) and (max-width:1023px){ .v2-social-beelden{ height:calc(417.58px + 19.35vw) !important; } } /* tablet-slotcorrectie: laatste gemeten restjes per subtak */ @media (min-width:768px) and (max-width:1023px){ .v2-ps-head{ margin-bottom:calc(-74.2px + 9.41vw) !important; } .v2-social-beelden{ margin-bottom:calc(9.4px + 2.29vw) !important; } } @media (min-width:900px) and (max-width:1023px){ .v2-social-beelden{ margin-bottom:calc(227.6px - 21.95vw) !important; } } /* =========================================================================== MOBIELE RONDE (meting 360-430, 22-08): sectieknoppen op de fluid knoptokens (ref 20.1 -> 20.275, wij hadden vast 18), iconen-fluid afgedwongen, en de cta-ring droeg onbedoeld de patroontextuur (ref heeft 9 dragers, wij hadden er 10 zichtbaar). =========================================================================== */ @media (max-width:767px){ .btn, a.btn{ font-size:var(--ref-knop-fs) !important; padding-top:var(--ref-knop-pad-y) !important; padding-bottom:var(--ref-knop-pad-y) !important; line-height:1.4 !important; } .v2-si.v2-si{ width:calc(36.057px + 1.2417vw) !important; height:calc(36.057px + 1.2417vw) !important; } } .v2-cta-ring{ background-image:none !important; } /* =========================================================================== DIENSTPAGINA-TABLETRONDE (meting /solutions/construction 768/900/1023, 22-08): hun herofoto is op heel tablet VAST 375px hoog met de kop 51px eronder; onze foto groeide met 112.6vw door (865 -> 1152, de +467). Scope bewust beperkt tot .v2-ms-hero. =========================================================================== */ @media (min-width:768px) and (max-width:1023px){ .v2-ms-hero-inner{ display:block !important; } .v2-ms-hero-beeld{ height:375px !important; min-height:0 !important; } .v2-ms-hero-tekst{ padding-top:51px !important; max-width:none !important; } .v2-ms-hero-tekst h1{ margin-top:0 !important; } } /* dienstenhero: sectiehoogte op de ref-doelen (810/842/914) via padding-onder-subtakken (hun tekstzone schaalt met hun typografie) */ @media (min-width:768px) and (max-width:899px){ .v2-ms-hero{ padding-bottom:calc(-135.2px + 24.24vw) !important; } } @media (min-width:900px) and (max-width:1023px){ .v2-ms-hero{ padding-bottom:calc(-429.2px + 56.91vw) !important; } } /* =========================================================================== MOBIELE ZESPUNTENRONDE (meting 390, 22-08 avond) =========================================================================== */ @media (max-width:767px){ /* 1. het accent werd door de wrapper-overflow afgeknipt (computed klopte, de verf niet): ref toont het geel vanaf de schermrand, 28px boven en deels op de foto */ .hp-services.v2-wwo .v2-wwo-foto{ overflow:visible !important; } /* 2. footer: ref-gaten 390 (offices-iconen 48, iconen-logo 20, logo-slogan 60, slogan-knop 60) */ .v2-ft-gegevens{ margin-bottom:48px !important; } .v2-ft-volg{ margin-bottom:20px !important; } .v2-ft-logo{ margin-bottom:60px !important; display:block !important; } .v2-ft-slogan{ margin:0 0 60px !important; } .footer .v2-ft-knop{ margin-top:0 !important; } /* 3. watermerk boven de foto's */ .v2-social-watermerk{ z-index:3 !important; } /* 4. social-iconen gecentreerd (middelste icoon op de haaientand) */ .v2-social-iconen{ display:flex !important; justify-content:center !important; width:100% !important; margin:0 !important; padding:0 !important; position:relative !important; left:0 !important; transform:none !important; } /* 5. lucht onder dunnere placeholdercontent: de ref-sectiehoogte niet meer afdwingen (bewust: mobiele sectiestarts wijken dan van ref tot de klantcontent de ruimte vult) */ .v2-wwo-inhoud{ min-height:0 !important; } .v2-testi, .hp-testi{ min-height:0 !important; height:auto !important; } } /* watermerk boven de fotocontext: .v2-social-inner is zelf een stacking context op z3, dus het watermerk (eerder in de DOM) verloor bij gelijke z */ .v2-social-watermerk{ z-index:4 !important; } /* mobiele feedbackronde (shots 20:11): footer compacter, korte copyrightregel, dienstenhero-knop gecentreerd */ @media (max-width:767px){ .v2-ft-merk{ gap:0 !important; } .v2-ft-logo{ margin-bottom:24px !important; } .v2-ft-slogan{ margin:0 0 28px !important; } .v2-ft-gegevens{ margin-bottom:32px !important; } .v2-ft-volg{ margin-bottom:24px !important; } /* copyrightbalk: op mobiel alleen de korte regel */ .footer-bottom .fb-copy, .footer-bottom .fb-sep, .footer-bottom > a{ display:none !important; } .footer-bottom .fb-kort{ display:inline !important; font-size:13.5px !important; } /* dienstenhero: knop gecentreerd, overal waar dit blok staat */ .v2-ms-hero-tekst .btn{ display:block !important; width:fit-content !important; position:relative !important; left:calc(50vw - 17px) !important; transform:translateX(-50%) !important; margin-left:0 !important; margin-right:0 !important; } } .footer-bottom .fb-kort{ display:none; } /* =========================================================================== MOBIELE SPATIERINGSRONDE subpagina's (feedback 20:17): geen strakke randen, geen dode lucht; vaste desktophoogtes los op mobiel. =========================================================================== */ @media (max-width:767px){ .v2-au-hero{ padding-bottom:40px !important; } .v2-au-waarden{ min-height:0 !important; padding:56px 0 !important; } .v2-au-waarden::before{ bottom:0 !important; } .v2-au-comp{ margin-bottom:40px !important; } .v2-au-waarden-grid{ gap:48px !important; row-gap:48px !important; } .v2-au-lid{ padding:24px 0 32px !important; } .v2-au-lid h3{ margin-top:24px !important; } .v2-au-lid p{ margin-top:10px !important; } .v2-au-vac{ padding-bottom:48px !important; } .v2-au-maat-zwart{ padding-top:60px !important; } .v2-au-cijfers, .v2-au-awards, .v2-au-visie, .v2-au-tijd{ padding-bottom:56px !important; } .hp-locaties{ min-height:0 !important; } .hp-locaties .v2-loc-beeld, .hp-locaties .v2-loc-paneel{ min-height:0 !important; } } /* sitebreed mobiel: schermvullende minima en vaste desktop-onderruimtes maken lucht op telefoons; content + eigen padding bepalen de hoogte */ @media (max-width:767px){ .v2-pd-hero, .v2-gh, .v2-ts, .v2-faq{ min-height:0 !important; } .v2-pj{ padding-bottom:64px !important; } .v2-kb-lijst{ padding-bottom:64px !important; } .v2-au-hero.v2-au-hero{ padding-bottom:56px !important; } } /* generieke hero en over-ons-hero: vaste hoogte los op mobiel zodat de content (incl. knop) er niet onderuit steekt */ @media (max-width:767px){ .v2-gh{ height:auto !important; } .v2-au-hero{ height:auto !important; min-height:0 !important; } } /* de oude 744-cap (ref-meting) knelde nu de content + knop af */ @media (max-width:767px){ .v2-au-hero{ max-height:none !important; } } /* Boven 1440 centreert de sectie (max-width 1440) en knipte overflow-x:clip het gele wwo-accent op de contentrand af; op kleinere schermen viel die kniprand precies samen met de schermrand waardoor het nooit zichtbaar was. Vanaf 1441: clip los en het accent van de SCHERMrand tot de vaste 1440-rechterrand (281.25 in de sectie), conform randoco's cap-gedrag. */ @media (min-width:1441px){ .hp-services.v2-wwo{ overflow-x:visible !important; overflow:visible !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ /* 80px voorbij de schermrand beginnen zodat de linker ronde hoek buiten beeld blijft: links een rechte streep, zoals bij ref */ left:calc(640px - 50vw) !important; width:calc(50vw - 358.75px) !important; height:135px !important; top:-224.75px !important; } } /* feedback: de traanplaatstrook naast de reviewkaart definitief weg op alle breedtes, en de offerte-kop (met knop) altijd boven het geel */ .v2-testi-patroon{ display:none !important; } .v2-cta-inner{ position:relative !important; z-index:4 !important; } /* footerherindeling (feedback): dienstenkolom in EEN kolom onder elkaar; de contactgegevens-kolom komt ernaast */ .v2-ft-kolom.v2-ft-breed ul{ grid-template-columns:1fr !important; } /* mobiel: knop vlak onder de tekst erboven, slogan eronder met wat lucht */ @media (max-width:767px){ .v2-ft-merk{ display:flex !important; flex-direction:column !important; } .v2-ft-logo{ order:1 !important; margin-bottom:20px !important; } .footer .v2-ft-knop{ order:2 !important; margin:0 auto 20px !important; } .v2-ft-slogan{ order:3 !important; margin:0 0 8px !important; } } .v2-ft-gegeven{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; } /* de knop hoort direct onder de slogan, ook op desktop (de eerdere margin-top:auto duwde hem naar de kolombodem) */ @media (min-width:768px){ .footer .v2-ft-knop{ margin:28px 0 0 !important; align-self:flex-start !important; } } /* =========================================================================== BREEDSCHERM-FREEZE (22-08-2026): boven 1920 schaalt html{zoom} de hele layout proportioneel mee (zoals randoco met de rem-sprong op 2001 doet). vw- en vh-eenheden rekenen onder zoom tegen het FYSIEKE scherm en zouden dubbel schalen; daarom staat hier elke declaratie met zo'n eenheid die boven 1920 actief is bevroren op zijn 1920-waarde (1vw = 19.2px; vh via --vh1920 = 1vh gedeeld door de zoomfactor). Per selector+eigenschap is de volledige reeks declaraties in bronvolgorde herhaald zodat de cascade dezelfde winnaar houdt. GEGENEREERD met gereedschap/maak-freeze.js; niet met de hand bijwerken maar opnieuw genereren. =========================================================================== */ @media (min-width:1921px){ body{ max-width:1920px; } h1{ font-family:var(--font-kop); } h1{ font-size:clamp(38px,107.52px,72px); } h2{ font-size:clamp(30px,72.96px,48px); } h3{ font-size:clamp(22px,46.08px,30px); } h4{ font-size:clamp(18px,30.72px,22px); } h4{ font-weight:700; } .mobile-menu{ height:calc(100 * var(--vh1920,1vh)); } .hero{ height:calc(100 * var(--vh1920,1vh)); } .hero-subline{ font-size:clamp(17px,26.88px,20px); } .subhero{ height:calc(62 * var(--vh1920,1vh)); } .subhero h1{ font-size:clamp(34px,84.48px,60px); } .subhero-sub{ font-size:clamp(16px,23.04px,19px); } .calc-low,.calc-high{ font-size:clamp(34px,96px,52px); } .hp-hero-slider{ height:calc(100 * var(--vh1920,1vh)); } .hp-hs-content{ max-width:var(--container); } .hp-hs-title{ font-family:var(--font-kop); } .hp-hs-title{ font-weight:700; } .hp-hs-title{ font-size:clamp(48px,134.4px,104px); } .hp-hs-desc{ font-size:18px; } .hp-intro-text h2{ font-family:var(--font-display); } .hp-intro-text h2{ font-weight:700; } .hp-intro-text h2{ font-size:clamp(32px,69.12px,48px); } .hp-fans-text h2{ font-family:var(--font-display); } .hp-fans-text h2{ font-weight:700; } .hp-fans-text h2{ font-size:clamp(56px,153.6px,112px); } .hp-why-watermark{ font-family:var(--font-heading); } .hp-why-watermark{ font-weight:800; } .hp-why-watermark{ font-size:clamp(180px,537.6px,420px); } .hp-why-intro-text h2{ font-family:var(--font-display); } .hp-why-intro-text h2{ font-weight:700; } .hp-why-intro-text h2{ font-size:clamp(56px,134.4px,108px); } .seo-content h2{ font-size:clamp(28px,57.6px,40px); } .rfc-inner h2{ font-family:var(--font-display); } .rfc-inner h2{ font-weight:700; } .rfc-inner h2{ font-size:clamp(34px,76.8px,52px); } .of-info h1{ font-family:var(--font-kop); } .of-info h1{ font-weight:700; } .of-info h1{ font-size:clamp(34px,76.8px,56px); } .hpgr-track{ scroll-padding:4px; } .hp-why-pin{ height:calc(380 * var(--vh1920,1vh)); } .hp-why-sticky{ height:calc(100 * var(--vh1920,1vh)); } .hp-why-reasons-track{ padding:0 153.6px; } .hp-why-progress{ bottom:40px; } .hp-why-progress{ left:153.6px; } .hp-why-progress{ right:153.6px; } .hp-hero{ min-height:calc(100 * var(--vh1920,1vh)); } .hp-contact{ padding:100px 0; } .hp-hero-slider{ height:calc(100 * var(--vh1920,1vh)); } .hp-hs-content{ max-width:760px; } .hp-hs-title{ font-family:var(--font-kop); } .hp-hs-title{ font-weight:700; } .hp-hs-title{ font-size:calc(46px * var(--hero-scale,1)); } .hp-hs-desc{ font-size:calc(16px * var(--hero-scale,1)); } .hpgr-track{ scroll-padding:230.4px; } html,body{ max-width:1920px; } .hp-hs-content{ max-width:none !important; } body{ max-width:1920px; } section{ max-width:1920px; } .hp-hero-slider{ height:calc(100 * var(--vh1920,1vh)); } .hp-hero-slider{ max-width:1920px; } .hp-hero-slides{ width:100%; } .hp-hero-slides{ max-width:1920px; } .hp-hs-slide{ max-width:1920px !important; } .hp-hs-content{ max-width:1920px !important; } .hp-hero-slider{ max-width:1920px !important; } .hp-hs-title{ font-size:calc(clamp(28px, 53.376px, 44px) * var(--hero-scale,1)) !important; } .hp-hs-desc{ font-size:calc(clamp(15px, 24px, 20px) * var(--hero-scale,1)) !important; } .hp-hs-content{ max-width:1200px !important; } .hp-hero-slider{ height:calc(716.16px + 240px) !important; } .hp-hs-static-content{ left:50%; } .hp-hs-static-content{ top:44%; } .hp-hs-static-content{ bottom:auto; } .hp-hs-static-content{ width:100%; } .tip-modal-panel{ width:1632px; } .tip-modal-panel{ max-height:calc(85 * var(--vh1920,1vh)); } body{ max-width:1920px; } html[data-lang]:not([data-lang="nl"]) .hp-why-card h3{ font-size:clamp(20px, 49.92px, 28px); } .agbot-panel{ max-width:calc(1920px - 48px); } .hp-contact{ padding:110px 0 !important; } .hp-contact > .container > h2{ font-size:clamp(34px,76.8px,50px) !important; } .hp-contact{ padding-top:clamp(64px, 153.6px, 112px) !important; } .agbot-panel{ max-height:calc(calc(100 * var(--vh1920,1vh)) - 110px); } .agbot.expanded .agbot-panel{ height:calc(80 * var(--vh1920,1vh)); } .agbot.expanded .agbot-panel{ max-height:calc(calc(100 * var(--vh1920,1vh)) - 90px); } .hp-waarom-head h2{ font-size:clamp(28px,65.28px,40px); } .agbot-panel{ max-height:min(calc(72 * var(--vh1920,1vh)),560px) !important; } .agbot-body{ max-height:calc(48 * var(--vh1920,1vh)) !important; } .hp-insta-head h2{ font-size:clamp(28px,65.28px,40px); } .wg-landelijk h2{ font-family:var(--font-display); } .wg-landelijk h2{ font-weight:700; } .wg-landelijk h2{ font-size:clamp(24px,57.6px,32px); } :root{ --sec-y:clamp(72px, 172.8px, 128px); } :root{ --kop-xl:clamp(34px, 96px, 72px); } :root{ --kop-xxl:clamp(46px, 172.8px, 132px); } .hp-insta, .hp-contact{ padding-block:clamp(64px, 153.6px, 112px); } .hp-hero-slider{ height:calc(100 * var(--vh1920,1vh)); } .hp-hero-slides{ width:921.6px; } .hp-hero-slider::before{ right:0; } .hp-hero-slider::before{ width:280.32px; } .hp-hero-slider::before{ top:clamp(94px, 139.968px, 105px); } .hp-hero-slider::before{ bottom:0; } .hp-hero-slider::after{ right:0; } .hp-hero-slider::after{ top:clamp(94px, 139.968px, 105px); } .hp-hero-slider::after{ bottom:0; } .hp-hero-slider::after{ width:80.256px; } .hp-hero-slider::after{ background-image:var(--v2-traanplaat-licht); } .hp-hero-slider::after{ background-size:var(--v2-tegel); } .hp-hs-static-content{ left:998.4px; } .hp-hs-static-content{ right:auto; } .hp-hs-static-content{ top:clamp(121px, 180px, 138px) !important; } .hp-hs-static-content{ bottom:auto !important; } .hp-hs-static-content{ width:595.2px; } .hp-hs-static-content .hp-hs-desc{ max-width:595.2px !important; } .v2-hero-featured{ gap:24px; } .v2-hero-featured .project-card{ width:382.08px; } .v2-hero-featured .project-card{ height:360px; } .v2-hero-showall{ width:115.968px; } .v2-hero-showall{ border-radius:0 0 24px 0; } .v2-hero-showall{ border-radius:0 0 0 clamp(20px, 39.936px, 30px); } .v2-car{ gap:163.968px; } .v2-car{ padding:0 24px 0 max(24px, calc((1920px - var(--container))/2 + 24px)); } .v2-car{ scroll-padding-left:max(24px, calc((1920px - var(--container))/2 + 24px)); } .v2-cs{ gap:48px; } .v2-cs-img{ width:811.968px; } .v2-cs-info{ width:260.16px; } .v2-cs-title{ font-family:var(--font-display); } .v2-cs-title{ font-weight:700; } .v2-cs-title{ font-size:27px; } .v2-band::after{ left:0; } .v2-band::after{ top:calc(105px + 1.96 * var(--kop-xl) + 8px); } .v2-band::after{ bottom:calc(157px + 44.64px); } .v2-band::after{ width:614.4px; } .v2-band-lijst li{ height:121px; } .v2-wwo-accent{ left:0; } .v2-wwo-accent{ top:calc(-157px - 89.28px); } .v2-wwo-accent{ width:calc(153.6px + 374.4px); } .v2-wwo-accent{ height:178.56px; } .v2-wwo-accent{ border-radius:0 0 45.312px 0; } .v2-wwo{ grid-template-columns:960px 1fr; } .v2-wwo-streep{ left:calc(975.36px - 105px); } .v2-wwo-streep{ top:0; } .v2-wwo-streep{ width:210px; } .v2-wwo-streep{ height:calc(var(--tand-h) + var(--lijn-d)); } .v2-wwo-foto{ margin-top:-157px; } .v2-wwo-foto{ margin-left:153.6px; } .v2-wwo-foto{ width:821.76px; } .v2-wwo-inhoud{ padding:90px 24px 40px 99.84px; } .v2-statement{ --st:min(19.2px, calc(1.316 * var(--vh1920,1vh))); } .v2-st-bg{ height:100%; } .v2-st-patroon{ width:190.08px; } .v2-st-inner{ gap:49.92px; } .v2-st-kop{ width:971.52px; } .v2-st-kop .kop-xxl{ font-size:180px !important; } .v2-st-kolommen{ width:639.36px; } .v2-locaties{ --lt:min(19.2px, calc(1.28 * var(--vh1920,1vh))); } .v2-locaties{ --lt-pad-x:clamp(20px, calc(5.625 * var(--lt)), 81px); } .v2-locaties{ --lt-cirkel:clamp(76px, calc(14.06 * var(--lt)), 203px); } .v2-locaties{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-locaties{ grid-template-columns:960px 1fr; } .v2-loc-paneel{ border-radius:0 0 var(--lt-hoek) var(--lt-hoek); } .v2-loc-paneel{ padding:var(--lt-pad) var(--lt-pad-x); } .v2-loc-patroon{ left:var(--lt-pad-x); } .v2-loc-patroon{ right:calc(var(--lt-pad-x) * .926); } .v2-loc-patroon{ bottom:0; } .v2-loc-patroon{ height:clamp(20px, calc(3.33 * var(--lt)), 48px); } .v2-loc-patroon{ background-image:var(--v2-traanplaat-fel); } .v2-loc-patroon{ background-size:var(--v2-tegel); } .v2-locaties h2.v2-loc-kop{ font-size:clamp(30px, calc(5.208 * var(--lt)), 75px); } .v2-loc-intro{ font-size:clamp(15px, calc(1.458 * var(--lt)), 21px); } .v2-locaties{ --lt-pad-x:clamp(20px, 108px, 81px); } .v2-locaties{ --lt-cirkel:clamp(76px, min(269.952px, calc(18 * var(--lt))), 203px); } .v2-locaties h2.v2-loc-kop{ font-size:min(calc(5.208 * 19.2px), calc(6.2 * var(--lt))) !important; } .v2-loc-intro{ font-size:min(calc(1.458 * 19.2px), calc(1.75 * var(--lt))) !important; } .v2-locaties{ --lt-cirkel:clamp(76px, min(269.952px, calc(16 * var(--lt))), 203px); } .v2-locaties h2.v2-loc-kop{ font-size:min(calc(5.208 * 19.2px), calc(5.6 * var(--lt))) !important; } .v2-loc-intro{ font-size:min(calc(1.458 * 19.2px), calc(1.62 * var(--lt))) !important; } .v2-loc-intro{ font-size:max(15px, min(calc(1.458 * 19.2px), calc(1.62 * var(--lt)))) !important; } .v2-locaties h2.v2-loc-kop{ font-size:max(30px, min(calc(5.208 * 19.2px), calc(5.6 * var(--lt)))) !important; } .v2-loc-cirkelrand::before, .v2-loc-cirkelrand::after{ width:clamp(28px, 76.8px, 64px); } .v2-loc-cirkelrand::before, .v2-loc-cirkelrand::after{ width:clamp(24px, 49.92px, 44px); } .v2-testi{ --tt:min(19.2px, calc(1.06 * var(--vh1920,1vh))); } .v2-testi h2.v2-testi-kop{ font-size:max(34px, min(180px, calc(9 * var(--tt)))) !important; } .v2-testi-naam{ font-weight:700; } .v2-testi-naam{ font-size:max(17px, min(32.0064px, calc(2.3 * var(--tt)))); } .v2-testi-rol{ font-size:max(14px, min(24px, calc(1.75 * var(--tt)))); } .v2-testi-citaat{ font-size:max(14px, min(24px, calc(1.75 * var(--tt)))); } .v2-res{ padding:clamp(28px, 80.064px, 60px) 0 clamp(48px, 140.16px, 105px) !important; } .v2-res-inner{ padding:0 clamp(18px, 39.936px, 30px); } .v2-res-grid{ column-gap:clamp(20px, 49.92px, 37.5px); } .v2-res-box{ padding-top:clamp(12px, 39.936px, 30px); } .v2-res-box{ margin-bottom:clamp(28px, 90.048px, 67.5px); } .v2-res h2.v2-res-kop{ margin:0 0 clamp(16px, 49.92px, 38px); } .v2-res-tand{ margin:0 clamp(12px, 49.92px, 37.5px); } .v2-res-tand{ width:clamp(96px, 280.32px, 210px); } .v2-res .v2-res-cta{ font-size:clamp(14px, 24px, 18px) !important; } .v2-res .v2-res-cta{ border-radius:0 clamp(9px, 19.968px, 15px) !important; } .v2-res-kaart{ margin-bottom:clamp(40px, 169.92px, 127.5px); } .v2-res-beeld{ border-radius:0 clamp(24px, 80.064px, 60px) 0 0; } .v2-res-beeld{ height:clamp(200px, 735.36px, 552px); } .v2-res-kaart h3{ font-size:clamp(19px, 36px, 27px); } .v2-res-kaart h3{ font-weight:700; } .v2-res-kaart h3{ margin:clamp(14px, 45.312px, 34px) 0 clamp(10px, 30px, 22.5px); } .v2-res-samenvatting{ font-size:clamp(14px, 24px, 18px); } .v2-res-voet{ gap:clamp(12px, 30.72px, 24px); } .v2-res-voet{ margin-top:clamp(14px, 39.936px, 30px); } .v2-res .v2-res-lees{ padding:clamp(9px, 15.9936px, 12px) clamp(16px, 30px, 22.5px) !important; } .v2-res .v2-res-lees{ font-size:clamp(14px, 24px, 18px) !important; } .v2-res .v2-res-lees{ border-radius:0 clamp(9px, 19.968px, 15px) !important; } .v2-res-meta{ gap:clamp(10px, 19.968px, 15px); } .v2-res-meta{ font-size:clamp(13px, 24px, 18px); } .v2-res-cat{ padding-right:clamp(10px, 19.968px, 15px); } .v2-statement .v2-st-kolommen{ width:min(639.36px, 480px); } .v2-social{ padding:clamp(48px, 140.16px, 105px) 0 clamp(64px, 218.88px, 164px) !important; } .v2-social-paneel{ width:1363.2px; } .v2-social-patroon{ width:1503.36px; } .v2-social-watermerk{ left:-159.36px; } .v2-social-watermerk{ top:50%; } .v2-social-watermerk{ width:455.04px; } .v2-social-inner{ padding:0 clamp(18px, 39.936px, 30px); } .v2-social-tekst{ padding-right:clamp(16px, 57.6px, 48px); } .v2-social h2.v2-social-kop{ font-size:clamp(32px, 99.84px, 75px); } .v2-social h2.v2-social-kop{ margin:0 0 clamp(14px, 34.944px, 26px); } .v2-social-tand{ width:100%; } .v2-social-iconen{ gap:clamp(14px, 43.968px, 33px); } .v2-social-iconen{ margin:clamp(24px, 80.064px, 60px) 0 0; } .v2-si{ width:clamp(38px, 60px, 45px); } .v2-si{ height:clamp(38px, 60px, 45px); } .v2-social-vlak{ right:0; } .v2-social-vlak{ top:0; } .v2-social-vlak{ width:40.9%; } .v2-social-vlak{ height:48.3%; } .v2-cta{ padding:0 0 clamp(28px, 80.064px, 60px) !important; } .v2-cta-cirkel{ width:clamp(140px, 495.36px, 372px); } .v2-cta-cirkel{ height:clamp(140px, 495.36px, 372px); } .v2-cta-cirkel{ margin-top:calc(clamp(140px, 495.36px, 372px) / -2); } .v2-cta-halve{ width:clamp(210px, 744px, 558px); } .v2-cta-halve{ height:clamp(105px, 372.48px, 279px); } .v2-cta-halve{ border-radius:0 0 999px 999px; } .v2-cta-ring{ width:clamp(340px, 1190.4px, 893px); } .v2-cta-ring{ height:clamp(170px, 595.2px, 446px); } .v2-cta-inner{ padding:clamp(88px, 272.64px, 205px) clamp(18px, 39.936px, 30px) 0; } .v2-cta h2.v2-cta-kop{ font-size:clamp(34px, 180px, 135px); } .v2-cta h2.v2-cta-kop{ margin:0 0 clamp(16px, 53.952px, 40.5px); } .v2-ps::before{ width:600px; } .v2-ps::before{ height:426.24px; } .v2-res::before{ width:650.88px; } .v2-res::before{ height:1150.08px; } .footer .footer-bottom::before{ width:1920px; } .footer .footer-bottom::before{ height:70.08px; } .v2-social-tand{ width:calc(100% + clamp(16px, 57.6px, 48px)); } .footer .container{ padding:0 clamp(18px, 39.936px, 30px); } .v2-ft{ padding:clamp(48px, 120px, 90px) 0 0; } .v2-ft-merk{ gap:clamp(18px, 39.936px, 30px); } .v2-ft-merk .v2-ft-logo img{ width:clamp(130px, 240px, 180px); } .v2-ft-slogan{ font-family:var(--font-display); } .v2-ft-slogan{ font-size:clamp(22px, 43.968px, 33px); } .v2-ft-slogan{ font-weight:700; } .footer .v2-ft-knop{ padding:clamp(9px, 15.9936px, 12px) clamp(16px, 30px, 22.5px) !important; } .footer .v2-ft-knop{ font-size:clamp(14px, 24px, 18px) !important; } .footer .v2-ft-knop{ border-radius:0 clamp(9px, 19.968px, 15px) !important; } .v2-ft-menus{ gap:clamp(36px, 99.072px, 74px); } .v2-ft-top{ gap:clamp(24px, 80.064px, 60px); } .v2-ft-kolom.v2-ft-breed ul{ column-gap:clamp(20px,80.064px,60px); } .v2-ft-gegevens{ gap:clamp(24px, 80.064px, 60px); } .v2-ft-volg{ gap:clamp(12px, 39.936px, 30px); } .v2-ft-lijn{ margin:clamp(32px, 60px, 45px) 0 0; } .footer .footer-bottom{ margin-top:clamp(129px, 190.08px, 142.5px); } .v2-sol section, section.v2-sol{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-solhero{ grid-template-columns:904.32px 904.32px; } .v2-solhero{ gap:111.936px; } .v2-solhero{ padding:0 0 clamp(28px, 80.064px, 60px) !important; } .v2-solhero{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-solhero-inhoud{ max-width:800.64px; } .v2-sol h1.v2-solhero-kop{ font-size:clamp(30px, 80.064px, 60px); } .v2-sol h1.v2-solhero-kop{ margin:0 0 clamp(14px, 39.936px, 30px); } .v2-solhero-tekst{ font-size:clamp(15px, 27.9936px, 21px); } .v2-solhero-tekst{ margin:0 0 clamp(16px, 43.008px, 32px); } .v2-sol .v2-sol-knop{ padding:clamp(9px, 15.9936px, 12px) clamp(16px, 30px, 22.5px) !important; } .v2-sol .v2-sol-knop{ font-size:clamp(14px, 24px, 18px) !important; } .v2-sol .v2-sol-knop{ border-radius:0 clamp(9px, 19.968px, 15px) !important; } .v2-solthumb{ padding:clamp(32px, 80.064px, 60px) 0 !important; } .v2-sol-inner{ padding:0 clamp(18px, 39.936px, 30px); } .v2-sol h2.v2-solthumb-kop{ font-size:clamp(30px, 99.84px, 75px); } .v2-sol h2.v2-solthumb-kop{ margin:0 0 clamp(14px, 30.72px, 24px); } .v2-solthumb-tand{ margin:0 0 clamp(20px, 63.36px, 48px); } .v2-solthumb-rij{ grid-template-columns:380.16px 1fr; } .v2-solthumb-rij{ gap:clamp(18px, 95.04px, 71px); } .v2-solthumb-rij{ padding:clamp(20px, 49.92px, 38px) 0; } .v2-sol h3.v2-solthumb-titel{ font-size:clamp(20px, 43.968px, 33px); } .v2-sol h3.v2-solthumb-titel{ margin:0 0 clamp(8px, 19.968px, 15px); } .v2-solthumb-rij p{ font-size:clamp(15px, 27.9936px, 21px); } .v2-solclaim{ padding:clamp(48px, 199.68px, 150px) 0 clamp(36px, 140.16px, 105px) !important; } .v2-solclaim-inner{ padding:0 clamp(18px, 39.936px, 30px); } .v2-solclaim-eyebrow{ font-size:clamp(16px, 32.0064px, 24px); } .v2-solclaim-eyebrow{ font-weight:700; } .v2-solclaim-eyebrow{ margin:0 0 clamp(12px, 30.72px, 24px); } .v2-sol h2.v2-solclaim-kop{ font-size:clamp(20px, 43.968px, 33px); } .v2-solclaim-merk{ left:-169.92px; } .v2-solclaim-merk{ top:50%; } .v2-solclaim-merk{ width:408px; } .v2-solcards{ padding:clamp(32px, 80.064px, 60px) 0 !important; } .v2-sol h2.v2-solcards-kop{ font-size:clamp(30px, 80.064px, 60px); } .v2-sol h2.v2-solcards-kop{ margin:0 0 clamp(20px, 59.52px, 45px); } .v2-sl-spoor{ gap:clamp(12px, 32.064px, 24px); } .v2-sl-kaart{ flex:0 0 clamp(240px, 526.08px, 395px); } .v2-sl-kaart{ border-radius:0 clamp(18px, 49.92px, 37.5px); } .v2-sl-kaart{ padding:clamp(20px, 49.92px, 38px); } .v2-sl-kaart{ flex-direction:column; } .v2-sl-kaart{ gap:clamp(12px, 30.72px, 22px); } .v2-sl-kaart img{ width:clamp(80px, 163.968px, 123px); } .v2-sl-kaart img{ height:clamp(80px, 163.968px, 123px); } .v2-sl-kaart h3{ font-size:clamp(17px, 27.9936px, 21px); } .v2-sl-kaart p{ font-size:clamp(14px, 24px, 18px); } .v2-sl-bar{ margin-top:clamp(20px, 59.52px, 45px); } .v2-sol-inner{ padding:0 clamp(21px, 39.936px, 30px); } .v2-dd section{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-dd .v2-dd-inhoud, .v2-dd .v2-dd-projecten, .v2-dd .v2-dd-links{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-dd-hero{ grid-template-columns:904.32px 904.32px; } .v2-dd-hero{ gap:111.936px; } .v2-dd-hero{ padding:0 0 clamp(28px, 80.064px, 60px) !important; } .v2-dd-hero-inhoud{ max-width:800.64px; } .v2-dd h1{ font-size:clamp(30px, 80.064px, 60px); } .v2-dd h1{ margin:0 0 clamp(14px, 39.936px, 30px); } .v2-dd-intro{ font-size:clamp(15px, 27.9936px, 21px); } .v2-dd-intro{ margin:0 0 clamp(16px, 43.008px, 32px); } .v2-dd-claim{ padding:clamp(48px, 199.68px, 150px) 0 clamp(36px, 140.16px, 105px) !important; } .v2-dd-claim-inner{ padding:0 clamp(21px, 39.936px, 30px); } .v2-dd-eyebrow{ font-size:clamp(16px, 32.0064px, 24px); } .v2-dd-eyebrow{ font-weight:700; } .v2-dd-eyebrow{ margin:0 0 clamp(12px, 30.72px, 24px); } .v2-dd h2.v2-dd-claim-kop{ font-size:clamp(20px, 43.968px, 33px); } .v2-dd-inhoud{ padding:clamp(40px, 140.16px, 105px) 0 clamp(40px, 140.16px, 105px) !important; } .v2-dd-inhoud-inner{ padding:0 clamp(21px, 39.936px, 30px); } .v2-dd h2.v2-dd-kop{ font-size:clamp(28px, 66.624px, 50px); } .v2-dd h2.v2-dd-kop{ margin:0 0 clamp(12px, 26.88px, 20px); } .v2-dd-tand{ margin:0 0 clamp(20px, 53.76px, 40px); } .v2-dd-tekst h3{ font-size:clamp(19px, 37.248px, 28px); } .v2-dd-tekst h3{ margin:clamp(20px, 46.08px, 34px) 0 clamp(8px, 17.28px, 13px); } .v2-dd-tekst p{ font-size:clamp(15px, 24px, 18px); } .v2-dd-vinkjes{ margin:clamp(18px, 46.08px, 34px) 0 0; } .v2-dd-vinkjes li{ font-size:clamp(15px, 24px, 18px); } .v2-dd-links{ grid-template-columns:960px 960px; } .v2-dd-links-lijst{ padding:clamp(28px, 80.064px, 60px) clamp(21px, 80.064px, 60px); } .v2-dd h2.v2-dd-links-kop{ font-size:clamp(24px, 53.376px, 40px); } .v2-dd h2.v2-dd-links-kop{ margin:0 0 clamp(14px, 34.56px, 26px); } .v2-dd-links-lijst a{ padding:clamp(12px, 24px, 18px) 0; } .v2-dd-links-lijst a{ font-size:clamp(16px, 27.9936px, 21px); } .v2-dd-links-lijst a{ font-weight:700; } .v2-dd-links-beeld{ border-radius:0 0 0 clamp(24px, 80.064px, 60px); } .v2-dd-projecten{ padding:clamp(40px, 140.16px, 105px) 0 clamp(20px, 39.936px, 30px) !important; } .v2-dd h2.v2-dd-projecten-kop{ font-size:clamp(30px, 99.84px, 75px); } .v2-dd h2.v2-dd-projecten-kop{ margin:0 0 clamp(20px, 65.28px, 49px); } .v2-dd-projecten .v2-sl-kaart{ flex:0 0 clamp(260px, 812.16px, 609px); } .v2-dd-projecten .v2-sl-spoor{ gap:clamp(16px, 73.344px, 55px); } .v2-dd-usp{ padding:clamp(32px, 80.064px, 60px) 0 !important; } .v2-dd h2.v2-dd-usp-kop{ font-size:clamp(30px, 80.064px, 60px); } .v2-dd h2.v2-dd-usp-kop{ margin:0 0 clamp(20px, 59.52px, 45px); } .v2-dd-tips{ padding:clamp(40px, 120px, 90px) 0 !important; } .v2-dd h2.v2-dd-tips-kop{ font-size:clamp(28px, 66.624px, 50px); } .v2-dd h2.v2-dd-tips-kop{ margin:0 0 clamp(20px, 59.52px, 45px); } .v2-wrap{ padding-inline:clamp(21px, 39.936px, 30px); } .v2-pkop{ padding:clamp(95px, 200.064px, 150px) 0 clamp(21px, 39.936px, 30px); } .v2-pkop h1{ font-size:clamp(61px, 180px, 135px); } .v2-pkop-intro{ margin:clamp(18px, 39.936px, 30px) auto 0; } .v2-pkop-intro{ font-size:clamp(16px, 24px, 18px); } .v2-plijst{ padding:clamp(21px, 39.936px, 30px) 0 clamp(149px, 382.656px, 287px); } .v2-plijst{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-pf{ gap:clamp(10px, 14.016px, 10.5px); } .v2-pf-toggle{ font-family:var(--font-body); } .v2-pf-toggle{ font-size:clamp(16.35px, 24px, 18px); } .v2-pf-toggle{ font-weight:700; } .v2-pf-wis{ padding:12px clamp(16px, 30px, 22.5px); } .v2-pf-wis{ font-family:var(--font-body); } .v2-pf-wis{ font-weight:700; } .v2-pf-wis{ font-size:clamp(16px, 24px, 18px); } .v2-pf-binnen{ gap:clamp(24px, 49.92px, 37.5px); } .v2-pf-binnen{ padding:clamp(22px, 44.928px, 33.75px) 0 clamp(16px, 29.952px, 22.5px); } .v2-pf-opt{ font-size:clamp(15px, 22.0032px, 16.5px); } .v2-pf-opt{ font-weight:500; } .v2-pf-status{ gap:10px clamp(10px, 14.016px, 10.5px); } .v2-pf-status{ padding:clamp(18px, 35.904px, 27px) 0 0; } .v2-pf-teller{ font-size:clamp(15px, 24px, 18px); } .v2-pgrid{ column-gap:27px; } .v2-pgrid{ row-gap:clamp(42px, 80.064px, 60px); } .v2-pgrid{ padding-top:clamp(24px, 49.92px, 37.5px); } .v2-cs--grid{ gap:clamp(14px, 24px, 18px); } .v2-cs--grid .v2-cs-title{ margin-bottom:clamp(10px, 19.968px, 15px); } .v2-pleeg{ min-height:clamp(260px, 533.76px, 400px); } .v2-pleeg{ margin-top:clamp(24px, 49.92px, 37.5px); } .v2-pleeg{ padding:clamp(36px, 80.064px, 60px) clamp(24px, 49.92px, 37.5px); } .v2-pleeg h2{ font-size:clamp(24px, 39.936px, 30px); } .v2-pleeg p{ font-size:clamp(15px, 24px, 18px); } .v2-pleeg p{ margin:0 0 clamp(18px, 35.904px, 27px); } .no-js .v2-pgrid{ padding-top:clamp(24px, 49.92px, 37.5px); } .v2-pd-hero{ padding:clamp(95px, 200.064px, 150px) 0 clamp(42px, 80.064px, 60px); } .v2-pd-hero{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-pd-hero-grid{ gap:clamp(24px, 80.064px, 60px); } .v2-pd-eyebrow{ margin:0 0 clamp(12px, 24px, 18px); } .v2-pd-eyebrow{ font-size:clamp(14px, 22.0032px, 16.5px); } .v2-pd-eyebrow{ font-weight:500; } .v2-pd-hero h1{ font-size:clamp(42.6px, 100.032px, 75px); } .v2-pd-hero h1{ font-weight:700; } .v2-pd-plaats{ margin:clamp(14px, 28.032px, 21px) 0 0; } .v2-pd-plaats{ font-size:clamp(15px, 24px, 18px); } .v2-pd-rond{ width:clamp(130px, 437.376px, 328px); } .v2-pd-rond{ margin-right:clamp(0px, 89.28px, 67px); } .v2-pd-gal{ padding:clamp(63.5px, 139.968px, 105px) 0; } .v2-pd-gal{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-pd-gal .v2-sl-spoor{ gap:clamp(12px, 58.752px, 44px); } .v2-pd-gal .v2-sl-spoor{ padding-left:max(21px, calc((1920px - 1245px)/2)); } .v2-pd-gal .v2-sl-spoor{ padding-right:max(21px, calc((1920px - 1245px)/2)); } .v2-pd-gal .v2-sl-spoor{ scroll-padding-left:max(21px, calc((1920px - 1245px)/2)); } .v2-pd-dia{ width:clamp(280px, 1400.064px, 1050px); } .v2-pd-gal-voet{ gap:clamp(16px, 39.936px, 30px); } .v2-pd-gal-voet{ padding:clamp(24px, 60.096px, 45px) clamp(21px, 39.936px, 30px) 0; } .v2-pd-teller{ font-size:clamp(15px, 24px, 18px); } .v2-pd-teller{ font-variant-numeric:tabular-nums; } .v2-pd-rijen{ padding:0 0 clamp(63.5px, 139.968px, 105px); } .v2-pd-rijen{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-pd-rij{ gap:clamp(18px, 60.096px, 45px); } .v2-pd-rij{ padding:clamp(30px, 72px, 54px) 0; } .v2-pd-rij h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-pd-rij h2{ font-weight:400; } .v2-pd-rij p{ font-size:clamp(16px, 24px, 18px); } .v2-pd-getal{ font-family:var(--font-display); } .v2-pd-getal{ font-size:clamp(42.6px, 100.032px, 75px); } .v2-pd-getal{ font-weight:400; } .v2-pd-getal small{ font-family:var(--font-body); } .v2-pd-getal small{ font-size:clamp(15px, 24px, 18px); } .v2-pd-getal small{ font-weight:400; } .v2-kb-hero{ padding:clamp(95px, 200.064px, 150px) 0 clamp(42px, 80.064px, 60px); } .v2-kb-hero h1{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-kb-hero h1{ font-weight:700; } .v2-kbh-featrij::after{ left:calc((100% - 1920px) / 2); } .v2-kbh-featrij::after{ width:1920px; } .v2-kbh-featrij::after{ bottom:-15px; } .v2-kbh-spoor{ width:calc(100% + (1920px - 100%) / 2); } .v2-kbl-item::after{ left:0; } .v2-kbl-item::after{ right:-1920px; } .v2-kbl-item::after{ bottom:0; } .v2-art-hero{ padding:clamp(95px, 200.064px, 150px) 0 clamp(24px, 49.92px, 37.5px); } .v2-art-hero{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-art-hero h1{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-art-hero h1{ font-weight:700; } .v2-art-beeld{ margin-top:clamp(24px, 60.096px, 45px); } .v2-art-body{ padding:clamp(42px, 80.064px, 60px) 0 clamp(63.5px, 139.968px, 105px); } .v2-art-body{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-art-kolom h2{ font-size:clamp(25.6px, 60px, 45px); } .v2-art-kolom h2{ font-weight:400; } .v2-art-kolom h2{ margin:clamp(30px, 60.096px, 45px) 0 clamp(12px, 24px, 18px); } .v2-art-kolom h3{ font-size:clamp(19px, 29.376px, 22px); } .v2-art-kolom h3{ font-weight:700; } .v2-art-kolom h3{ margin:clamp(22px, 39.936px, 30px) 0 8px; } .v2-art-kolom p, .v2-art-kolom li{ font-size:clamp(16px, 24px, 18px); } .v2-gh{ padding:clamp(119px, 306.048px, 230px) 0; } .v2-gh{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-gh h1, .v2-gh .v2-gh-kop{ font-size:clamp(46.125px, 180px, 135px); } .v2-gh h1, .v2-gh .v2-gh-kop{ font-weight:400; } .v2-gh p{ margin:clamp(20px, 49.92px, 37.5px) auto 0; } .v2-gh p{ font-size:clamp(16px, 24px, 18px); } .v2-gh .btn{ margin-top:clamp(20px, 39.936px, 30px); } .v2-wb{ padding:clamp(63.5px, 139.968px, 105px) 0; } .v2-wb{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-wb-grid{ gap:clamp(24px, 80.064px, 60px); } .v2-wb-foto{ width:clamp(193px, 453.12px, 340px); } .v2-wb h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-wb h2{ font-weight:400; } .v2-wb h2{ margin:0 0 clamp(14px, 28.032px, 21px); } .v2-wb p{ font-size:clamp(16px, 24px, 18px); } .v2-wb-lijst{ margin:clamp(18px, 35.904px, 27px) 0 0; } .v2-wb-lijst li{ font-size:clamp(15px, 24px, 18px); } .v2-ts{ padding:clamp(21px, 39.936px, 30px) 0 clamp(42px, 80.064px, 60px); } .v2-ts{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-ts-kop{ margin:0 0 clamp(20px, 49.92px, 37.5px); } .v2-ts .v2-sl-spoor{ gap:clamp(16px, 159.936px, 120px); } .v2-ts .v2-sl-spoor{ padding-inline:max(21px, calc((1920px - 1245px)/2)); } .v2-ts .v2-sl-spoor{ scroll-padding-left:max(21px, calc((1920px - 1245px)/2)); } .v2-ts-dia{ width:clamp(280px, 1394.688px, 1046px); } .v2-ts-dia h3{ font-size:clamp(25.575px, 60px, 45px); } .v2-ts-dia h3{ font-weight:400; } .v2-ts-dia h3{ margin:clamp(16px, 35.904px, 27px) 0 clamp(8px, 15.936px, 12px); } .v2-ts-dia p{ font-size:clamp(16px, 24px, 18px); } .v2-ts .v2-sl-bar{ margin-inline:auto; } .v2-ts .v2-sl-bar{ margin-top:clamp(24px, 60.096px, 45px); } .v2-tl{ padding:clamp(42px, 80.064px, 60px) 0; } .v2-tl{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-tl .v2-sl-spoor{ gap:clamp(48px, 62.592px, 47px); } .v2-tl .v2-sl-spoor{ padding-inline:max(21px, calc((1920px - 1245px)/2)); } .v2-tl .v2-sl-spoor{ scroll-padding-left:max(21px, calc((1920px - 1245px)/2)); } .v2-tl-punt{ width:clamp(230px, 630.72px, 473px); } .v2-tl-jaar{ margin:clamp(14px, 28.032px, 21px) 0 6px; } .v2-tl-jaar{ font-family:var(--font-display); } .v2-tl-jaar{ font-size:clamp(28px, 60px, 45px); } .v2-tl-jaar{ font-weight:700; } .v2-tl-punt h3{ font-size:clamp(18px, 29.376px, 22px); } .v2-tl-punt h3{ font-weight:700; } .v2-tl-punt p{ font-size:clamp(15px, 22.0032px, 16.5px); } .v2-tl .v2-sl-bar{ margin-inline:auto; } .v2-tl .v2-sl-bar{ margin-top:clamp(24px, 60.096px, 45px); } .v2-st{ padding:clamp(63.5px, 139.968px, 105px) 0; } .v2-st{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-st-bg{ height:100%; } .v2-st h2{ font-size:clamp(27.325px, 100.032px, 75px); } .v2-st h2{ font-weight:400; } .v2-st h2{ margin:0 auto clamp(30px, 72px, 54px); } .v2-st-rij{ gap:clamp(24px, 60.096px, 45px); } .v2-st-getal{ font-family:var(--font-display); } .v2-st-getal{ font-size:clamp(42px, 100.032px, 75px); } .v2-st-getal{ font-weight:700; } .v2-st-cel p{ margin:clamp(8px, 15.936px, 12px) auto 0; } .v2-st-cel p{ font-size:clamp(15px, 24px, 18px); } .v2-eb{ padding:clamp(63.5px, 139.968px, 105px) 0; } .v2-eb{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-eb-foto{ width:clamp(223px, 600px, 450px); } .v2-eb-foto{ margin:0 auto clamp(24px, 49.92px, 37.5px); } .v2-eb h2{ font-size:clamp(42.625px, 100.032px, 75px); } .v2-eb h2{ font-weight:400; } .v2-eb h2{ margin:0 0 clamp(8px, 19.968px, 15px); } .v2-eb-rol{ margin:0 0 clamp(16px, 35.904px, 27px); } .v2-eb-rol{ font-size:clamp(15px, 24px, 18px); } .v2-eb-rol{ font-weight:700; } .v2-eb p{ font-size:clamp(16px, 24px, 18px); } .v2-eb p:last-of-type{ margin-bottom:clamp(20px, 39.936px, 30px); } .v2-form-sec{ padding:clamp(42px, 80.064px, 60px) 0 clamp(63.5px, 139.968px, 105px); } .v2-form-sec{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-form-grid{ gap:clamp(28px, 80.064px, 60px); } .v2-form-zij h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-form-zij h2{ font-weight:400; } .v2-form-zij h2{ margin:0 0 clamp(14px, 28.032px, 21px); } .v2-form-zij p{ font-size:clamp(16px, 24px, 18px); } .v2-form-zij ul{ margin:clamp(18px, 35.904px, 27px) 0 0; } .v2-form-zij li{ font-size:clamp(15px, 24px, 18px); } .v2-formkaart{ padding:clamp(24px, 60.096px, 45px); } .v2-formkaart .of-row{ margin-bottom:clamp(14px, 28.032px, 21px); } .v2-formkaart .of-row-2{ gap:clamp(12px, 24px, 18px); } .v2-formkaart .of-field > span{ font-size:clamp(14px, 19.968px, 15px); } .v2-formkaart .of-field > span{ font-weight:700; } .v2-formkaart .of-akkoord{ margin:clamp(14px, 28.032px, 21px) 0; } .v2-formkaart .of-akkoord{ font-size:clamp(14px, 19.968px, 15px); } .v2-ck{ padding:clamp(42px, 80.064px, 60px) 0; } .v2-ck{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-ck h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-ck h2{ font-weight:400; } .v2-ck h2{ margin:0 auto clamp(28px, 60.096px, 45px); } .v2-ck-grid{ gap:clamp(18px, 39.936px, 30px); } .v2-ck-kaart{ padding:clamp(26px, 49.92px, 37.5px) clamp(20px, 39.936px, 30px); } .v2-ck-ico{ margin:0 auto clamp(14px, 28.032px, 21px); } .v2-ck-kaart h3{ font-size:clamp(19px, 29.376px, 22px); } .v2-ck-kaart h3{ font-weight:700; } .v2-ck-kaart p{ font-size:clamp(15px, 24px, 18px); } .v2-kaartsec{ padding:0 0 clamp(42px, 80.064px, 60px); } .v2-kaart-facade strong{ font-size:clamp(16px, 24px, 18px); } .v2-vac{ padding:clamp(42px, 80.064px, 60px) 0; } .v2-vac{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-vac h2{ font-size:clamp(41.75px, 80.064px, 60px); } .v2-vac h2{ font-weight:700; } .v2-vac h2{ margin:0 0 clamp(20px, 39.936px, 30px); } .v2-vac-rij{ gap:clamp(14px, 39.936px, 30px); } .v2-vac-rij{ padding:clamp(20px, 39.936px, 30px) 0; } .v2-vac-rij h3{ font-size:clamp(20px, 36px, 27px); } .v2-vac-rij h3{ font-weight:700; } .v2-vac-rij p{ font-size:clamp(14px, 22.0032px, 16.5px); } .v2-rg{ padding:clamp(42px, 80.064px, 60px) 0 clamp(63.5px, 139.968px, 105px); } .v2-rg{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-rg h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-rg h2{ font-weight:400; } .v2-rg h2{ margin:0 auto clamp(28px, 60.096px, 45px); } .v2-rg-grid{ gap:clamp(18px, 39.936px, 30px); } .v2-rg-tekst{ padding:clamp(18px, 35.904px, 27px); } .v2-rg-tekst h3{ font-size:clamp(19px, 29.376px, 22px); } .v2-rg-tekst h3{ font-weight:700; } .v2-rg-tekst p{ font-size:clamp(15px, 22.0032px, 16.5px); } .v2-rg-lees{ font-weight:800; } .v2-rg-lees{ font-size:clamp(15px, 22.0032px, 16.5px); } .v2-tb{ padding:clamp(42px, 80.064px, 60px) 0; } .v2-tb{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-tb-grid{ gap:clamp(24px, 80.064px, 60px); } .v2-tb h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-tb h2{ font-weight:400; } .v2-tb h2{ margin:0 0 clamp(14px, 28.032px, 21px); } .v2-tb h3{ font-size:clamp(19px, 29.376px, 22px); } .v2-tb h3{ font-weight:700; } .v2-tb h3{ margin:clamp(22px, 39.936px, 30px) 0 8px; } .v2-tb p{ font-size:clamp(16px, 24px, 18px); } .v2-tb-vink{ margin:clamp(18px, 35.904px, 27px) 0 0; } .v2-tb-vink li{ font-size:clamp(15px, 24px, 18px); } .v2-faq{ padding:clamp(42px, 80.064px, 60px) 0 clamp(63.5px, 139.968px, 105px); } .v2-faq{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-faq h2{ font-size:clamp(34.1px, 80.064px, 60px); } .v2-faq h2{ font-weight:400; } .v2-faq h2{ margin:0 auto clamp(24px, 49.92px, 37.5px); } .v2-faq .faq-q{ padding:clamp(18px, 35.904px, 27px) 0; } .v2-faq .faq-q{ font-family:var(--font-display); } .v2-faq .faq-q{ font-size:clamp(17px, 29.376px, 22px); } .v2-faq .faq-q{ font-weight:700; } .v2-faq .faq-a-inner{ padding:0 0 clamp(18px, 35.904px, 27px); } .v2-faq .faq-a-inner{ font-size:clamp(16px, 24px, 18px); } .v2-tekst{ padding:clamp(42px, 80.064px, 60px) 0 clamp(63.5px, 139.968px, 105px); } .v2-tekst{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-tekst-kolom h2{ font-size:clamp(25.6px, 60px, 45px); } .v2-tekst-kolom h2{ font-weight:400; } .v2-tekst-kolom h2{ margin:clamp(30px, 60.096px, 45px) 0 clamp(10px, 19.968px, 15px); } .v2-tekst-kolom h3{ font-size:clamp(18px, 29.376px, 22px); } .v2-tekst-kolom h3{ font-weight:700; } .v2-tekst-kolom h3{ margin:clamp(22px, 39.936px, 30px) 0 8px; } .v2-tekst-kolom p, .v2-tekst-kolom li, .v2-tekst-kolom td, .v2-tekst-kolom th{ font-size:clamp(16px, 24px, 18px); } .v2-sm-grid{ gap:clamp(24px, 60.096px, 45px); } .v2-sm-groep h2{ font-size:clamp(19px, 29.376px, 22px); } .v2-sm-groep h2{ font-weight:700; } .v2-sm-groep a{ font-size:clamp(15px, 22.0032px, 16.5px); } .v2-ft{ padding-top:90px !important; } .v2-ft{ padding-bottom:0 !important; } .v2-ft-menus{ gap:0 !important; } .v2-ms-hero-inner{ gap:clamp(40px,113.28px,85px); } .v2-ms-hero-beeld{ height:clamp(400px,1018.752px,764px); } .v2-ms-hero-geel{ right:0; } .v2-ms-hero-geel{ top:clamp(62px,165.12px,124px); } .v2-ms-hero-geel{ width:clamp(73px,195.072px,146px); } .v2-ms-hero-geel{ height:clamp(322px,853.44px,640px); } .v2-ms-hero-geel{ border-radius:clamp(30px,80.064px,60px) 0; } .v2-ms .v2-ms-hero-tekst h1{ font-size:clamp(36px,80.064px,60px) !important; } .v2-ms-watermerk{ left:-57.6px; } .v2-ms-watermerk{ top:50%; } .v2-ms-watermerk{ width:268.8px; } .v2-ms-acc-inner{ grid-template-columns:minmax(0,1fr) 960px; } .v2-ms-acc-inner{ gap:clamp(24px,53.76px,40px); } .v2-ms-acc-beeld{ min-height:min(864px,646px); } .v2-ms-acc-geel{ right:0; } .v2-ms-acc-geel{ top:calc(-1 * clamp(34px,89.28px,67px)); } .v2-ms-acc-geel{ width:clamp(140px,374.4px,281px); } .v2-ms-acc-geel{ height:clamp(66px,177.408px,133px); } .v2-ms-info h2{ font-size:clamp(44px,99.84px,75px); } .v2-ms-info h2{ font-weight:700; } .v2-ms-info h2{ margin:0 0 75px; } .v2-ms-info-rij{ gap:71px; } .v2-ms-info-rij h3{ font-size:clamp(24px,43.968px,33px); } .v2-ms-info-rij h3{ font-weight:700; } .v2-ms-info::after{ height:clamp(34px,72.96px,55px); } .v2-ms-os{ padding:clamp(48px,120px,90px) 0; } .v2-ms-certs{ padding:clamp(52px,132.48px,100px) 0; } .v2-ms-proj{ padding:clamp(52px,132.48px,100px) 0; } .v2-ms-awards{ padding:clamp(48px,120px,90px) 0; } .v2-ms-kb{ padding:clamp(52px,132.48px,100px) 0; } .v2-ms-os{ padding:60px 0; } .v2-ms-os h2{ font-size:clamp(44px,99.84px,75px); } .v2-ms-os h2{ font-weight:700; } .v2-ms-oskaart{ flex:0 0 clamp(320px,1094.4px,822px); } .v2-ms-oskaart{ grid-template-columns:minmax(0,1fr) clamp(160px,408.96px,307px); } .v2-ms-oskaart h3{ font-size:clamp(24px,43.968px,33px); } .v2-ms-oskaart h3{ font-weight:700; } .v2-ms-certs{ padding:60px 0; } .v2-ms-certs h2, .v2-ms-awards h2{ font-size:clamp(38px,80.064px,60px); } .v2-ms-certs h2, .v2-ms-awards h2{ font-weight:700; } .v2-ms-certs h2, .v2-ms-awards h2{ margin:0 0 clamp(60px,199.68px,150px); } .v2-ms-zegel{ flex:0 0 clamp(300px,569.28px,427px); } .v2-ms-awards{ padding:60px 0; } .v2-ms-proj{ padding:105px 0 30px; } .v2-ms-proj::before{ width:595.2px; } .v2-ms-proj-kop h2{ font-size:clamp(44px,99.84px,75px); } .v2-ms-projkaart{ flex:0 0 clamp(300px,812.16px,609px); } .v2-ms-kb{ padding:60px 0 105px; } .v2-ms-kb-intro h2{ font-size:clamp(64px,180px,135px); } .v2-ms-kb-intro h2{ font-weight:700; } .v2-ms-os-spoor, .v2-ms-proj-spoor, .v2-ms-certs .v2-ms-zegels, .v2-ms-awards .v2-ms-zegels{ width:1920px; } .v2-ms-os-spoor, .v2-ms-proj-spoor, .v2-ms-certs .v2-ms-zegels, .v2-ms-awards .v2-ms-zegels{ margin-left:calc(50% - 960px); } .v2-ms-os-spoor, .v2-ms-proj-spoor, .v2-ms-certs .v2-ms-zegels, .v2-ms-awards .v2-ms-zegels{ padding-left:max(20px, calc(960px - 622.5px)); } .v2-ms-os-spoor, .v2-ms-proj-spoor, .v2-ms-certs .v2-ms-zegels, .v2-ms-awards .v2-ms-zegels{ padding-right:max(20px, calc(960px - 622.5px)); } .v2-ms-os-spoor, .v2-ms-proj-spoor, .v2-ms-certs .v2-ms-zegels, .v2-ms-awards .v2-ms-zegels{ scroll-padding-left:max(20px, calc(960px - 622.5px)); } .v2-pj-kop h1{ font-size:clamp(48px,128.064px,96px); } .v2-pj-kop h1{ font-weight:700; } .v2-pj-groep h2{ font-size:clamp(38px,80.064px,60px); } .v2-pj-groep h2{ font-weight:700; } .v2-pj-aantal{ font-size:clamp(64px,159.36px,120px); } .v2-pj-aantal{ font-weight:700; } .v2-pd2 h1{ font-size:clamp(42.6px,100.032px,75px); } .v2-pd2 h1{ font-weight:700; } .v2-pd2-os-foto{ left:0; } .v2-pd2-os-foto{ right:0; } .v2-pd2-os-foto{ top:max(-255px, -340.032px); } .v2-pd2-os-foto{ height:min(925.248px, 694px); } .v2-au-hero{ padding:min(calc(201.6px + 78.4px), 280px) 0; } .v2-au-hero{ min-height:calc(100 * var(--vh1920,1vh)); } .v2-au-hero h1{ font-family:var(--font-kop); } .v2-au-hero h1{ font-size:min(calc(168px + 9px), 135px); } .v2-au-hero h1{ font-weight:700; } .v2-au-visie .v2-sl-spoor{ padding-left:max(21px, calc((1920px - 1245px)/2)); } .v2-au-visie .v2-sl-spoor{ padding-right:max(21px, calc((1920px - 1245px)/2)); } .v2-au-visie .v2-sl-spoor{ scroll-padding-left:max(21px, calc((1920px - 1245px)/2)); } .v2-au-vkaart{ flex:0 0 min(1046px, 1651.2px); } .v2-au-team h2{ font-size:clamp(54px,180.48px,135px); } .v2-au-team h2{ font-weight:700; } .v2-au-loc{ --lt:19.2px; } .hp-res .v2-res-kop{ font-size:clamp(30px, 180px, 135px); } .hp-res .v2-res-tand{ width:min(210px, calc(280.32px - 24px)); } .v2-au-callout h2{ font-size:clamp(54px,180.48px,135px); } .v2-au-callout h2{ font-weight:700; } h1{ font-family:var(--font-kop); } .v2-cs-title{ font-size:27px !important; } .v2-cs-title{ font-weight:700 !important; } :root{ --ref-tekst:min(calc(0.75rem + 12px), 18px); } :root{ --ref-kop-xxl:min(calc(1.95rem + 148.8px), 135px); } :root{ --ref-kop-xxl-ls:max(calc(-0.0875rem - 3.6px), -3.75px); } :root{ --ref-kop-xl:min(calc(1.75rem + 72px), 75px); } :root{ --ref-kop-xl-ls:max(calc(-0.033rem - 0.792px), -0.99px); } :root{ --ref-kop-l:min(calc(1.4rem + 57.6px), 60px); } :root{ --ref-kop-m:min(calc(1.1rem + 26.4px), 33px); } :root{ --ref-kop-s:min(calc(1.2rem + 16.8px), 27px); } :root{ --ref-knop-fs:min(calc(1.2rem + 4.8px), 18px); } :root{ --ref-knop-pad-y:min(calc(0.7rem + 4.8px), 12px); } :root{ --ref-knop-pad-x:min(calc(1.125rem + 12px), 22.5px); } :root{ --ref-knop-radius:min(calc(0.95rem + 4.8px), 15px); } :root{ --ref-sectie-groot:min(calc(2.75rem + 96px), 105px); } :root{ --ref-sectie-klein:min(calc(2rem + 48px), 60px); } :root{ --ref-radius-s:min(calc(0.875rem + 36px), 37.5px); } :root{ --ref-radius-l:min(calc(0.5rem + 72px), 60px); } .hp-hero-slider h1, .hp-hs-title{ letter-spacing:normal !important; } .v2-dl .v2-dl-link{ font-family:var(--ref-font); } .v2-dl .v2-dl-link{ font-size:min(calc(0.75rem + 24px), 27px); } .v2-dl .v2-dl-link{ font-weight:700; } .v2-dl .v2-dl-link{ padding:0 0 min(calc(1.4375rem + 12px), 26.25px) 0; } .v2-dl .v2-dl-link{ margin-top:min(calc(1.4375rem + 12px), 26.25px); } .v2-dl .v2-dl-wrap{ grid-template-columns:1fr min(calc(0.5625rem + 36px), 33.75px); } .v2-dl .v2-dl-wrap{ gap:min(calc(0.75rem + 18px), 22.5px); } .v2-dl .v2-dl-wrap strong{ font-size:min(calc(1.1625rem + 8.4px), 20.25px); } .v2-dl .v2-dl-wrap strong{ font-weight:700; } .v2-dl .v2-dl-icon{ width:min(calc(0.5625rem + 36px), 33.75px); } .v2-dl .v2-dl-icon{ height:min(calc(0.5625rem + 36px), 33.75px); } .hp-services.v2-wwo .v2-wwo-inhoud{ padding:min(calc(1.125rem + 102px), 90px) min(calc(1rem + 24px), 30px) min(calc(1rem + 144px), 120px) min(calc(1rem + 24px), 30px) !important; } .hp-services.v2-wwo .v2-wwo-inhoud{ padding-left:min(calc(2.5rem + 60px), 75px) !important; } .hp-waarom{ height:auto !important; } .v2-wwo-accent{ width:280px !important; } .v2-wwo-accent{ height:120px !important; } .v2-au-hero{ min-height:1354px !important; } .v2-gh{ min-height:1276px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ margin-top:-157px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ height:1068px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ width:100% !important; } .v2-ms-info h2{ font-size:var(--ref-kop-xl) !important; } .v2-ms-info h2{ margin:0 0 min(calc(2rem + 55.68px), 105px); } .v2-ms-info-rij{ gap:min(calc(2rem + 63.36px), 71px); } .v2-ms-info-tekst p{ font-size:min(calc(1.05rem + 12px), 21px); } .hp-hero-slides::after{ left:22% !important; } .hp-hero-slides::after{ top:12% !important; } .hp-hero-slides::after{ width:48% !important; } .hp-hero-slides::after{ height:76% !important; } .v2-hero-showall{ border-radius:0 0 0 30px !important; } .v2-loc-paneel{ padding:120px 81px !important; } .v2-loc-paneel{ border-radius:0 0 30px 30px !important; } .hp-res h3{ margin-bottom:22.5px !important; } footer .v2-ft-menus a{ padding:5.25px 0 !important; } .footer .footer-bottom{ margin-top:52.5px !important; } .v2-car{ padding-left:98px !important; } .v2-wwo-accent{ left:0 !important; } .v2-wwo-accent{ right:auto !important; } .v2-wwo-accent{ top:-157px !important; } .v2-wwo-accent{ bottom:auto !important; } .v2-wwo-accent{ width:281.25px !important; } .v2-wwo-accent{ height:135px !important; } .v2-wwo-accent{ border-radius:0 0 37.5px 0 !important; } .v2-wwo-streep{ left:720px !important; } .v2-wwo-streep{ right:auto !important; } .v2-wwo-streep{ top:0 !important; } .v2-wwo-streep{ width:210px !important; } .v2-wwo-streep{ height:3px !important; } .v2-wwo-accent{ left:min(0px, calc((1440px - 1920px) / 2)) !important; } .v2-wwo-accent{ width:calc(281.25px - min(0px, (1440px - 1920px) / 2)) !important; } :root{ --ref-knop-fs:min(calc(1.2rem + 4.8px), 1.5rem); } :root{ --ref-knop-pad-y:min(calc(0.7rem + 4.8px), 1rem); } :root{ --ref-knop-pad-x:min(calc(1.125rem + 12px), 1.875rem); } :root{ --ref-knop-radius:min(calc(1rem + 4.8px), 1.25rem); } .hp-testi h2, .v2-testi h2.v2-testi-kop{ font-size:min(calc(0.75rem + 168px), 135px) !important; } .hp-res h2{ font-size:min(calc(0.6rem + 170.4px), 135px) !important; } .hp-hero-slider h1, .hp-hs-title{ letter-spacing:max(calc(-0.1rem - 2.4px), -3px) !important; } .hp-res h3{ font-size:min(calc(1.2rem + 16.8px), 27px) !important; } .hp-res h3{ margin-bottom:min(calc(0.75rem + 18px), 22.5px) !important; } .v2-cs-title{ font-size:min(calc(1.2rem + 16.8px), 27px) !important; } .v2-btn-outline, .btn.v2-btn-outline, button.v2-btn-outline, a.v2-btn-outline{ font-size:calc(0.9rem + 9.6px) !important; } .v2-btn-outline, .btn.v2-btn-outline, button.v2-btn-outline, a.v2-btn-outline{ padding:calc(0.825rem + 4.8px) calc(1.125rem + 12px) !important; } section.hp-portfolio{ padding-top:min(calc(1rem + 24px), 30px) !important; } section.hp-portfolio{ padding-bottom:var(--ref-sectie-klein) !important; } section.v2-band .v2-band-inner, .v2-band-inner{ padding-top:var(--ref-sectie-klein) !important; } section.v2-band .v2-band-inner, .v2-band-inner{ padding-bottom:min(calc(4.25rem + 132px), 150px) !important; } section.hp-social{ padding-top:var(--ref-sectie-groot) !important; } section.hp-social{ padding-bottom:min(calc(56px + 144px), 164px) !important; } .v2-loc-paneel{ padding:min(calc(0.7rem + 148.8px), 120px) min(calc(-0.15rem + 110.4px), 81px) !important; } .v2-loc-paneel{ border-radius:0 0 min(calc(1rem + 24px), 30px) min(calc(1rem + 24px), 30px) !important; } footer .v2-ft-menus a{ font-size:min(calc(0.975rem + 2.4px), 18px) !important; } footer .v2-ft-menus a{ padding:min(calc(0.2875rem + 2.4px), 7px) 0 !important; } .footer .footer-bottom, .footer-bottom{ padding:min(calc(0.8375rem + 9.6px), 17.25px) 0 !important; } .footer .footer-bottom, .footer-bottom{ margin-top:min(calc(2.5rem + 30px), 52.5px) !important; } .hp-hero-slider .hp-hero-slides, .hp-hero-slides{ border-radius:0 0 min(calc(1.25rem + 60px), 60px) 0 !important; } :root{ --ref-knop-radius:min(calc(0.95rem + 4.8px), 1.25rem); } section.hp-hero-slider .hp-hs-title, .hp-hero-slider h1.hp-hs-title, .hp-hero-static .hp-hs-title{ letter-spacing:max(calc(-0.1rem - 2.4px), -3px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ left:min(0px, calc((1440px - 1920px) / 2 - 0px)) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:-157px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ bottom:auto !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ width:calc(281.25px - min(0px, (1440px - 1920px) / 2)) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ height:135px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ border-radius:0 0 37.5px 0 !important; } .hp-hero-slider::after{ background-image:var(--dps-patroon) !important; } .hp-hero-slider::after{ background-repeat:repeat !important; } .hp-hero-slider::after{ background-position:50% 0% !important; } .hp-hero-slider::after{ background-size:calc(568.285px + 242.2848px) !important; } section.hp-portfolio::before{ width:calc(393.429px + 75.4291px) !important; } section.hp-portfolio::before{ height:calc(282.058px + 50.256px) !important; } section.hp-portfolio::before{ background-size:calc(524.571px + 500.5709px) !important; } .hp-waarom::after{ width:calc(50.271px + 122.9722px) !important; } .hp-waarom::after{ height:calc(52.455px + 530.0563px) !important; } .v2-loc-patroon{ left:calc(-297.514px + 1464.6854px) !important; } .v2-loc-patroon{ top:calc(792.114px + 442.5139px) !important; } .v2-loc-patroon{ width:calc(325.371px + 318.1709px) !important; } .v2-loc-patroon{ height:calc(22.712px + 33.7152px) !important; } .v2-loc-patroon{ background-size:calc(558.214px + 205.7146px) !important; } section.hp-res::before{ width:calc(67.757px + 559.657px) !important; } section.hp-res::before{ height:calc(371.573px + 654.5722px) !important; } section.hp-res::before{ background-size:calc(524.571px + 500.5709px) !important; } .v2-social-patroon{ width:calc(116.114px + 1348.3699px) !important; } .v2-social-patroon{ height:calc(659.243px + 121.9142px) !important; } .v2-cta-cirkel::after{ top:calc(37.586px + 197.8848px) !important; } .v2-cta-cirkel::after{ left:calc(-52.62px - 277.0291px) !important; } .v2-cta-cirkel::after{ right:auto !important; } .v2-cta-cirkel::after{ bottom:auto !important; } .v2-cta-cirkel::after{ width:calc(180.404px + 949.8566px) !important; } .v2-cta-cirkel::after{ height:calc(90.205px + 474.9139px) !important; } .footer-bottom::before{ top:calc(-43.714px - 11.7139px) !important; } .footer-bottom::before{ left:0 !important; } .footer-bottom::before{ right:auto !important; } .footer-bottom::before{ bottom:auto !important; } .footer-bottom::before{ height:calc(43.714px + 11.7139px) !important; } .footer-bottom::before{ background-size:calc(427.51px + 967.3152px) !important; } .hp-testi h2, .v2-testi h2.v2-testi-kop{ font-weight:700 !important; } .v2-hero-featured .project-card::after{ width:calc(78.686px + 45.0854px) !important; } .v2-hero-featured .project-card::after{ height:calc(1.7355px + 1.6858px) !important; } .v2-hero-featured .v2-hero-showall, .v2-hero-showall{ width:calc(37.585px + 65.8886px) !important; } .v2-hero-featured .v2-hero-showall, .v2-hero-showall{ border-radius:0 0 0 calc(17.485px + 16.6848px) !important; } .v2-hero-featured .v2-hero-showall, .v2-hero-showall{ padding:calc(19.671px + 3.7709px) calc(6.557px + 21.2563px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ left:-1920px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ right:auto !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ bottom:auto !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ width:calc(114.75px + 2142px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ height:calc(26.228px + 145.0291px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:calc(45.421px - 360.2285px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ border-radius:0 0 calc(15.3px + 29.6006px) calc(15.3px + 29.6006px) !important; } .v2-wwo-streep{ left:50% !important; } .v2-wwo-streep{ top:0 !important; } .v2-wwo-streep{ right:auto !important; } .v2-wwo-streep{ width:clamp(0px, calc(384px - 78px), 210px) !important; } .v2-wwo-streep{ height:3px !important; } .v2-social-vlak{ width:calc(69.49px + 189.3581px) !important; } .v2-social-vlak{ height:calc(63.394px + 225.4848px) !important; } .v2-social-vlak{ left:calc(215.458px + 120.7258px) !important; } .v2-social-vlak{ right:auto !important; } .v2-social-vlak{ top:calc(114.194px + 179.9712px) !important; } .v2-cta-halve{ width:auto !important; } .v2-cta-halve{ height:auto !important; } .v2-cta-halve{ border-radius:0 0 calc(546.43px - 228.5722px) calc(546.43px - 228.5722px) !important; } .hp-res .v2-res-tand{ width:clamp(0px, calc(384px - 78px), 210px) !important; } .v2-band::after{ width:calc(303.643px + 425.1437px) !important; } .v2-band::after{ height:calc(185.829px + 212.2272px) !important; } .v2-band::after{ top:calc(-212.657px + 687.5424px) !important; } .v2-band::after{ left:calc(59.8px - 294.3994px) !important; } .v2-band::after{ right:auto !important; } .v2-band::after{ bottom:auto !important; } footer .v2-si, .footer .v2-si{ width:40px !important; } footer .v2-si, .footer .v2-si{ height:40px !important; } .v2-ft-lijn{ margin:31px 21px 0 !important; } .hp-social .v2-social-vlak{ top:calc(272.114px + 122.5152px) !important; } .hp-social .v2-social-vlak{ left:calc(-62.143px + 1590.8544px) !important; } .hp-social .v2-social-vlak{ right:auto !important; } .hp-social .v2-social-vlak{ bottom:auto !important; } .v2-cta-cirkel{ margin-inline:auto !important; } .v2-res-voet{ gap:0 !important; } .v2-cta-cirkel{ margin-top:-78px !important; } .hp-social .v2-social-vlak{ left:calc(215.486px + 120.6854px) !important; } .hp-social .v2-social-vlak{ top:calc(-13.4px - 12.8006px) !important; } .hp-social .v2-social-vlak{ right:auto !important; } .hp-social .v2-social-vlak{ bottom:auto !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:calc(215.486px + 120.6854px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ top:calc(124.2px + 166.4006px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ width:calc(69.49px + 189.3581px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ height:calc(63.394px + 225.4848px) !important; } .footer .v2-ft-knop{ font-size:var(--ref-knop-fs) !important; } .footer .v2-ft-knop{ padding:var(--ref-knop-pad-y) var(--ref-knop-pad-x) !important; } .v2-cta-cirkel{ margin-top:calc(-37.886px - 197.4854px) !important; } .v2-band .v2-band-inner, section.v2-band .v2-band-inner{ min-height:630px !important; } .v2-si{ width:40.9px !important; } .v2-si{ height:40.9px !important; } .v2-si{ padding:10px !important; } footer .v2-si, .footer .v2-si{ width:40px !important; } footer .v2-si, .footer .v2-si{ height:40px !important; } .hp-hero-slides::after{ width:calc(128.079px + 557.2282px) !important; } .hp-hero-slides::after{ height:calc(120.214px + 525.7152px) !important; } .hp-hero-slides::after{ left:calc(261.268px + 146.1427px) !important; } .hp-hero-slides::after{ top:0 !important; } .hp-hero-slides::after{ right:auto !important; } .hp-hero-slides::after{ bottom:auto !important; } .v2-cta-inner{ padding-top:calc(46.828px - 5.7984px) !important; } .v2-si{ width:calc(39.377px + 7.4976px) !important; } .v2-si{ height:calc(39.377px + 7.4976px) !important; } .v2-si{ padding:calc(10.929px - 4.5715px) !important; } footer .v2-si, .footer .v2-si{ width:calc(39.377px + 7.4976px) !important; } footer .v2-si, .footer .v2-si{ height:calc(39.377px + 7.4976px) !important; } .v2-social-tekst{ margin-left:41px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ width:calc(78.73px + 2190.023px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ height:calc(18.042px + 155.9232px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:calc(-166.28px - 77.9616px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ border-radius:0 0 calc(10.5px + 36px) calc(10.5px + 36px) !important; } .v2-wwo-streep{ width:clamp(0px, calc(-79.354px + 385.7971px), 210px) !important; } .v2-wwo-streep{ height:calc(-0.224px + 4.2989px) !important; } .hp-social .v2-social-vlak{ left:calc(131.734px + 232.3565px) !important; } .hp-social .v2-social-vlak{ top:0 !important; } .hp-social .v2-social-vlak{ width:calc(47.71px + 218.3981px) !important; } .hp-social .v2-social-vlak{ height:calc(43.47px + 252.0403px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:calc(131.734px + 232.3565px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ top:calc(85.24px + 218.352px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ width:calc(47.71px + 218.3981px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ height:calc(43.47px + 252.0403px) !important; } .v2-cta-cirkel{ width:calc(51.443px + 427.4131px) !important; } .v2-cta-cirkel{ height:calc(51.443px + 427.4131px) !important; } .v2-cta-cirkel{ margin-top:calc(-25.722px - 213.7075px) !important; } .v2-cta-halve{ border-radius:0 0 375px 375px !important; } .v2-si{ width:calc(27.121px + 23.8406px) !important; } .v2-si{ height:calc(27.121px + 23.8406px) !important; } .v2-si{ padding:7.5px !important; } footer .v2-si, .footer .v2-si{ width:calc(27.121px + 23.8406px) !important; } footer .v2-si, .footer .v2-si{ height:calc(27.121px + 23.8406px) !important; } .v2-social-tekst{ margin-left:calc(59.35px - 24.4608px) !important; } .v2-cta-inner{ padding-top:calc(32.62px + 13.1462px) !important; } .v2-social-patroon{ width:calc(24.68px + 1470.2803px) !important; } .v2-social-patroon{ height:calc(166.612px + 778.7616px) !important; } :root{ --ru:calc(24px + 48px); } :root{ --ru-half:calc(12px + 24px); } :root{ --ru-band-pb:calc(51px + 132px); } :root{ --ru-groot:calc(33px + 96px); } :root{ --ru-social-pb:calc(56px + 144px); } .hp-hero-slider{ height:calc(240.46px + 715.392px) !important; } section.hp-portfolio{ padding-top:var(--ru-half) !important; } section.hp-portfolio{ padding-bottom:var(--ru) !important; } .v2-band .v2-band-inner, section.v2-band .v2-band-inner{ min-height:calc(-76.1px + 941.5296px) !important; } .v2-band-lijst li{ height:calc(1.8px + 158.9818px) !important; } .hp-services.v2-wwo .v2-wwo-foto img{ height:calc(526.8px + 721.5283px) !important; } .hp-services.v2-wwo .v2-wwo-foto img{ margin-top:calc(-139.66px - 24.4589px) !important; } .hp-services.v2-wwo .v2-wwo-foto img{ width:960px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:calc(-149.84px - 100.8922px) !important; } .v2-testi-beeld{ height:calc(-107.4px + 1381.9104px) !important; } .v2-res-kaart .v2-res-beeld{ height:calc(198.88px + 470.8282px) !important; } .v2-st-bg{ height:calc(618.05px + 635.9251px) !important; } .hp-waarom{ height:calc(618.05px + 635.9251px) !important; } .hp-cta.v2-cta{ min-height:calc(191.6px + 525.8592px) !important; } .v2-res-kaart .v2-res-beeld{ height:calc(228.5px + 432.576px) !important; } .v2-testi-beeld{ height:calc(-28.5px + 1247.3894px) !important; } .v2-social-beelden img:not(.v2-social-foto2){ width:min(calc(103.04px + 552.7642px), 517.5px) !important; } .v2-social-beelden img:not(.v2-social-foto2){ height:min(calc(68.79px + 370.5485px), 346.7px) !important; } .v2-social-beelden img:not(.v2-social-foto2){ margin-left:calc(-99.16px + 228.48px) !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ top:min(calc(33.46px + 287.3856px), 249px) !important; } .hp-social .v2-social-vlak{ left:306px !important; } .hp-social .v2-social-vlak{ top:0 !important; } .hp-social .v2-social-vlak{ width:211.5px !important; } .hp-social .v2-social-vlak{ height:232.5px !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ left:306px !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ width:211.5px !important; } .v2-social-beelden .v2-social-foto2, img.v2-social-foto2{ height:232.5px !important; } .v2-cta-cirkel{ width:372px !important; } .v2-cta-cirkel{ height:372px !important; } .v2-cta-cirkel{ margin-top:-186px !important; } .v2-cta-inner{ padding-top:42.48px !important; } .v2-si{ width:45px !important; } .v2-si{ height:45px !important; } .v2-social-tekst{ margin-left:41px !important; } .v2-band-lijst li{ height:121px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ height:1068px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ margin-top:-158px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:-224.75px !important; } .v2-testi-beeld{ height:907px !important; } .v2-res-kaart .v2-res-beeld{ height:552.9px !important; } .hp-waarom{ height:1095px !important; } .hp-cta.v2-cta{ min-height:586px !important; } .hp-hero-slider{ height:777px !important; } .v2-social-beelden img:not(.v2-social-foto2){ margin-left:1px !important; } .v2-ft-slogan{ font-size:calc(13.2px + 26.4px) !important; } .v2-ft-slogan{ font-weight:700 !important; } .v2-ft-slogan{ font-size:33px !important; } .v2-ft-gegevens .v2-ft-titel{ font-weight:700 !important; } .v2-ft-gegevens .v2-ft-titel{ font-size:calc(11.4px + 4.8px) !important; } .v2-ft-gegevens .v2-ft-regels a{ font-weight:700 !important; } .v2-ft-gegevens .v2-ft-regels a{ font-size:calc(11.7px + 2.4px) !important; } .v2-ft-gegevens .v2-ft-titel{ font-size:15px !important; } .v2-ft-gegevens .v2-ft-regels a{ font-size:13.5px !important; } .v2-ft-lijn{ margin-top:74px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ left:calc(640px - 960px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ width:calc(960px - 358.75px) !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ height:135px !important; } .hp-services.v2-wwo .v2-wwo-foto::before{ top:-224.75px !important; } } /* Breedscherm-zoom, no-JS-basis: exact randoco's rem-sprong (2001px, x4/3). main.js verfijnt dit naar continu zoom = breedte/1920 en zet --vh1920 op (1920/breedte)vh, zodat elk scherm boven 1920 hetzelfde beeld toont als 1920. Zonder JS geldt de vaste sprong hieronder. */ @media (min-width:1921px){ :root{ --vh1920: 1vh; } } @media (min-width:2001px){ /* zoom op body, niet op html: zoom op de root-scroller maakt in sommige Chrome-versies de onderkant van de pagina onbereikbaar (scrollbereik wordt op de ongezoomde hoogte geklemd). Vaste 1920-breedte zodat de layout altijd het 1920-beeld is. */ body{ width:1920px; zoom:1.3333333; } :root{ --vh1920: 0.75vh; } } /* =========================================================================== Correctieronde na vastlegging (22-08, avond) 1) kaartkop op de ref-formule: ref 390 = 22.6125/24.8738, 1440 = 27/29.7, dat is exact --ref-kop-s met lh 1.1 (stond 16/19.2 en 22/23.76). =========================================================================== */ .project-card .project-meta h3, .v2-hero-featured .project-meta h3{ font-size:var(--ref-kop-s) !important; line-height:var(--ref-kop-s-lh) !important; font-weight:700 !important; } /* =========================================================================== LEESBAARHEIDSRONDE 09-09-2026 (build Haarlemse Glas Centrale) --------------------------------------------------------------------------- Alles hieronder is GEMETEN, niet geschat: contrast in geverfde pixels op 390, 768, 1280, 1440, 1920 en 2560, met de tekst een keer zichtbaar en een keer onzichtbaar zodat de letterkern tegen de echte ondergrond gelegd kon worden. Elke regel loste een gemeten waarde onder 4,5:1 op, of een blok dat over de tekst heen schoof. De vorm van de referentie blijft gelijk. =========================================================================== */ /* 1. TEKSTGRIJS. De referentie zet lopende tekst op rgb(115,115,115). Dat haalt op wit 4,04:1 en op het lichte vlak #F8FAFC nog maar 3,9:1, dus onder de vaste DPS-eis van 4,5:1. rgb(90,90,90) haalt 5,6:1 en blijft optisch hetzelfde grijs. Donkere secties houden hun witte tekst; die staan hieronder in de :not()-lijst. */ :root{ --ref-grijs: rgb(90,90,90); } :is(p, li, .v2-res-samenvatting, .v2-ms-oskaart p, .v2-tb-vink span, .hp-hs-desc, .v2-ms .v2-ms-hero-tekst p, .v2-band-lijst span, .v2-ms-acc-item p, .v2-res-meta, .v2-cs-cat, .v2-cs-loc):not( .v2-statement *, .hp-waarom *, .footer *, footer *, .v2-cta *, .hp-cta *, .v2-loc-paneel *, .v2-ms-awards *, .hp-hs-static-content *, .dpscb *, .dps-concept-modal *, .mobile-menu *, .v2-mega *){ color:rgb(90,90,90); } /* 2. REVIEWTEKST in de Google-carrousel stond op #7d858e (3,79:1). Google's eigen tekstgrijs #5f6368 haalt 5,9:1 en blijft herkenbaar Google. */ .hpgr-text, .hpgr-card-head .hpgr-meta span{ color:#5f6368 !important; } /* 3. WIT OP HET ACCENT. De accentkleur is per klant vaak licht; wit erop haalde bij deze build 2,17:1. Tekst op een accentvlak is daarom altijd zwart. (Vaste DPS-regel: zwarte tekst op de accentkleur.) */ .dpscb-btn.dpscb-accept, .dpscb-accept, .v2-ms-osster, .v2-hero-showall{ color:#000 !important; } /* 4. MENUTEKST OVER EEN DONKERE HEROFOTO. De referentie geeft de nav zwarte tekst zonder balk. Staat er een donkere klantfoto onder, dan is dat onleesbaar (gemeten 2,74:1). Oplossing: een lichte waas over de bovenrand van het beeld; de foto blijft zichtbaar, de tekst leesbaar. Nooit de menutekst zelf omkleuren, dan verschilt hij per pagina. */ .hp-hero-slider .hp-hs-overlay{ background:linear-gradient(to bottom, rgba(255,255,255,.92) 0, rgba(255,255,255,.72) 62px, rgba(255,255,255,.28) 118px, rgba(255,255,255,0) 175px) !important; } .v2-ms-hero-beeld::after{ content:""; position:absolute; inset:0 0 auto 0; height:180px; z-index:3; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.92) 0, rgba(255,255,255,.7) 64px, rgba(255,255,255,.26) 122px, rgba(255,255,255,0) 180px); } .v2-gh::before{ content:""; position:absolute; inset:0 0 auto 0; height:175px; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 100%); } /* De werkgebiedhero legt 20% wit over de foto en zet de tekst op zwart. Dat werkt alleen bij een rustige, lichte foto; bij een gewone klantfoto werd de kop onleesbaar. 62% wit houdt de foto zichtbaar en de tekst leesbaar. */ .v2-gh::after{ background:rgba(255,255,255,.62) !important; } /* 5. HET LOGO IN DE BALK. Het referentielogovak is bijna vierkant (90x60 op desktop, 44x43 op mobiel). Een breed woordmerk wordt daarin piepklein of vervormd. Het vak volgt daarom de verhouding van het echte logobestand: breedte vast, hoogte automatisch, nooit uitrekken. */ .nav-logo{ width:auto !important; } .nav-logo img{ width:200px !important; height:auto !important; max-height:48px !important; object-fit:contain !important; } @media (max-width:900px){ .nav-logo, .nav-inner .nav-logo{ width:auto !important; max-width:170px !important; } .nav-logo img{ width:150px !important; height:auto !important; max-height:34px !important; } .mmx-logo img{ width:150px !important; height:auto !important; } } /* Staat het logo op een witte ondergrond, dan krijgt het op zwart een lichte pill; het logo zelf wordt nooit herkleurd (vaste DPS-regel). */ .v2-ft-logo{ display:inline-block; background:#fff; padding:12px 16px; border-radius:0 15px 0 15px; } .v2-ft-logo img{ display:block; width:210px !important; height:auto !important; max-width:100%; } .mmx-logo{ display:inline-block; background:#fff; padding:6px 10px; border-radius:0 12px 0 12px; } /* 6. FOOTERTEKST. Op puur zwart haalde rgb(115,115,115) 4,43:1 en het primaire blauw 2,52:1. Beide lichter gezet. */ .footer .v2-ft-titel, .v2-ft-onder .v2-ft-titel, footer .v2-ft-titel{ color:#c9c9c9 !important; } .fb-copy, .fb-kort, .footer-bottom a{ color:#bdbdbd !important; } .fb-made, .footer-bottom a.fb-made{ color:#69bafc !important; } /* 7. HET HERO-WATERMERK is bij de referentie een beeldmerk zonder achtergrond. Bij een woordmerk op wit geeft het een witte vlek over de foto, dus staat het uit tenzij de klant een echt beeldmerk heeft. Het pad klopte bovendien niet: vanaf css/ is ../../assets/img/ een niveau te hoog. */ .hp-hero-slides::after{ content:none !important; } .v2-social-watermerk{ display:none !important; } /* 8. TITEL OP EEN FOTOKAART. De projectkaart legt een gradient onder de titel (90% zwart onderaan, 55% halverwege). Bij een lichte klantfoto staat de kop op mobiel in het zwakke deel: gemeten 3,71:1 op 390. De gradient houdt dezelfde vorm maar dekt halverwege 72% en loopt hoger door. */ .project-meta, .v2-hero-project .project-meta{ background:linear-gradient(to top, rgba(20,22,24,.94) 0%, rgba(20,22,24,.78) 45%, rgba(20,22,24,.42) 78%, rgba(20,22,24,0) 100%) !important; } @media (max-width:900px){ /* Op mobiel is de kaart kleiner en staat de kop hoger in de gradient. */ .project-meta, .v2-hero-project .project-meta{ background:linear-gradient(to top, rgba(20,22,24,.96) 0%, rgba(20,22,24,.88) 55%, rgba(20,22,24,.5) 82%, rgba(20,22,24,0) 100%) !important; } } /* 9. UITLIJNING OP BREDE SCHERMEN. De accordeonlijst op de dienstpagina begint bij de referentie op x=0 met 30px marge. Tot 1440 klopt dat met de rest van de pagina, maar daarboven staat de tekst tegen de schermrand terwijl de inhoud eromheen op 1245 gecentreerd blijft: gemeten 30px marge naast 338px bij "Meer info" op 1920. Boven 1440 volgt de lijst daarom dezelfde leesmarge. Onder 1440 verandert er niets aan de vastgelegde layout. */ @media (min-width:1441px){ /* De lijst schuift op naar de leesmarge EN groeit even hard mee, zodat de tekstkolom zijn gemeten 615px houdt en de koppen niet gaan afbreken. */ .v2-ms-acc-lijst{ padding-left:max(30px, calc((100vw - 1245px) / 2)) !important; max-width:calc(645px + max(0px, (100vw - 1245px) / 2 - 30px)) !important; } } @media (min-width:1921px){ /* Boven 1920 staat de body vast op 1920 met zoom; 100vw wijst dan naar het fysieke scherm en zou de marge laten doorgroeien. Daarom hier de vaste 1920-waarden, net als in het breedscherm-freezeblok: (1920-1245)/2 = 337,5 marge en 645 + 307,5 breedte, zodat de tekstkolom 615 blijft. */ .v2-ms-acc-lijst{ padding-left:337.5px !important; max-width:952.5px !important; } } /* 10. VASTE SECTIEHOOGTEN MOGEN NOOIT TEKST AFKAPPEN. De referentiehoogtes (1095 desktop, 710 tablet, 839 mobiel) zijn gemeten op de tekstlengte van randoco. Een klant met een langere alinea liep eroverheen: gemeten 09-09-2026 viel op 390 de laatste regel 29px buiten de sectie, die overflow:hidden heeft. De hoogte wordt daarom een MINIMUM: tot aan de referentietekst identiek, daarna groeit het blok mee. */ .hp-waarom{ height:auto !important; min-height:1095px !important; } @media (min-width:768px) and (max-width:1023px){ .hp-waarom{ height:auto !important; min-height:710px !important; } } @media (max-width:767px){ .hp-waarom{ height:auto !important; min-height:839px !important; padding-bottom:48px !important; } } /* 11. DE HERO-HOOGTE IS EEN MINIMUM, GEEN MAXIMUM. De referentiehoogtes zijn gemeten op de tekstlengte van randoco. Bij een langere klantkop of een extra regel liep de inhoud eronderuit: gemeten 09-09-2026 stond de CTA-knop op 768 en 900 buiten de sectie en viel de uitgelichte kaart op 600 t/m 767 er 150 tot 200px buiten. De sectie heeft overflow:hidden, dus dat werd gewoon afgesneden. Tot aan de referentietekst is de hoogte identiek, daarna groeit de hero mee. Desktop blijft ongewijzigd. */ @media (max-width:767px){ .hp-hero-slider, .hp-hero-slider.hp-hero-static{ height:auto !important; min-height:calc(636px + 53.3333vw) !important; } } @media (min-width:768px) and (max-width:1023px){ .hp-hero-slider, .hp-hero-slider.hp-hero-static{ height:auto !important; min-height:calc(401.7px + 48.08vw) !important; } } /* ============================================================ KLANTLAAG DEHAAS (Welding & Quality Desk) ============================================================ */ /* Logo: breed woordmerk op een zwart blok (2,49:1). Vak volgt de verhouding van het echte bestand; nooit uitrekken, nooit herkleuren. */ .nav-logo{ width:auto !important; max-width:200px !important; } .nav-logo img{ width:150px !important; height:auto !important; max-height:60px !important; object-fit:contain !important; } .mmx-logo img{ width:150px !important; height:auto !important; } .v2-ft-logo img{ width:190px !important; height:auto !important; } @media (max-width:900px){ .nav-logo, .nav-inner .nav-logo{ width:auto !important; max-width:140px !important; } .nav-logo img{ width:120px !important; } .mmx-logo img{ width:130px !important; } } /* Hero-watermerk uit: het logo is een breed woordmerk op een zwart blok, als halfdoorzichtig watermerk wordt dat een donkere vlek op de foto. */ .hp-hero-slides::after{ display:none !important; } /* Menutekst over de donkere herofoto: lichte waas over de bovenrand van het beeld, de foto blijft zichtbaar, de tekst leesbaar. Nooit tekst omkleuren. */ .hp-hero-slider .hp-hs-overlay{ background:linear-gradient(to bottom, rgba(255,255,255,.92) 0, rgba(255,255,255,.72) 62px, rgba(255,255,255,.28) 118px, rgba(255,255,255,0) 175px) !important; } .v2-ms-hero-beeld::after{ content:""; position:absolute; inset:0 0 auto 0; height:180px; z-index:3; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.92) 0, rgba(255,255,255,.7) 64px, rgba(255,255,255,.26) 122px, rgba(255,255,255,0) 180px); } /* Wit op het accent (#F59E0B) haalt maar ~2,2:1. Tekst op een accentvlak is daarom altijd zwart (vaste DPS-regel). */ .dpscb-btn.dpscb-accept, .dpscb-accept, .v2-ms-osster, .v2-hero-showall{ color:#000 !important; } /* Statement: zwaardere waas, de kop staat op een donker en druk lasbeeld. */ .v2-statement::before{ background:rgba(0,0,0,.6) !important; } /* Videoblok in het statement: eigen beeldmateriaal van de klant. Zelfde asymmetrische hoeken als elk beeldvlak in deze template. */ .dh-videosec{ background:#000; padding:0 24px 96px; margin-top:-1px; } .dh-video{ margin:0 auto; max-width:640px; } .dh-video video{ display:block; width:100%; height:auto; border-radius:0 21.75px 0 21.75px; } @media (max-width:900px){ .dh-video{ margin-top:36px; max-width:100%; } } /* Kaarttitels breken alleen af als het echt niet anders kan. */ .v2-cs-title, .v2-ms-projkaart h3{ overflow-wrap:break-word !important; word-break:normal !important; hyphens:auto; } /* Videoblok onder de statement-flexrij, gecentreerd boven het patroon. */ /* ============================================================ KLANTLAAG DEHAAS, VOLLEDIGE SITE (SEO-uitbouw 11-09-2026) ============================================================ */ /* Vast vraag/CTA-blok op elke pagina (ASK / VERIFY / EXECUTE / CONTACT) */ .dh-vraag{ background:#0F172A; padding:72px 24px; } .dh-vraag-inner{ max-width:820px; margin-inline:auto; text-align:center; } .dh-vraag h2{ color:#fff !important; font-size:clamp(26px,3.2vw,44px); line-height:1.1; margin:0 0 14px; } .dh-vraag p{ color:rgba(244,247,250,.85); font-size:clamp(15px,1.25vw,18px); line-height:1.5; margin:0 0 26px; } .dh-vraag-knoppen{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .dh-vraag .btn{ border-radius:0 15px 0 15px; } .dh-vraag .dps-cta-gold{ background:#F59E0B; color:#000 !important; font-weight:700; padding:14px 26px; box-shadow:0 10px 26px -8px rgba(245,158,11,.5); } .dh-vraag .btn-primary{ background:#fff; color:#0F172A !important; padding:14px 26px; } .dh-vraag .btn-ghost{ border:1px solid rgba(255,255,255,.45); color:#fff !important; padding:14px 26px; } @media (max-width:640px){ .dh-vraag-knoppen{ flex-direction:column; align-items:stretch; } } /* Heroknoppen op dienstpagina's */ .dh-heroknoppen{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; } .dh-heroknoppen .dps-cta-gold{ background:#F59E0B; color:#000 !important; font-weight:700; border-radius:0 15px 0 15px; padding:13px 22px; box-shadow:0 10px 26px -8px rgba(245,158,11,.5); } @media (max-width:640px){ .dh-heroknoppen{ flex-direction:column; align-items:center; } .dh-heroknoppen .btn{ width:100%; max-width:340px; text-align:center; } } /* Kaartgrids voor diensten- en kennisbankoverzicht */ .dh-overzicht{ max-width:1180px; margin-inline:auto; } .dh-overzicht > p{ max-width:760px; font-size:clamp(15px,1.25vw,18px); line-height:1.55; } .dh-overzicht h2{ margin:44px 0 18px; scroll-margin-top:110px; } .dh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .dh-kaart a{ display:flex; flex-direction:column; height:100%; background:#fff; border-radius:0 21.75px 0 21.75px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 4px 6px rgba(37,42,45,.04),0 10px 25px rgba(37,42,45,.07); transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1); } .dh-kaart a:hover{ transform:translateY(-4px); box-shadow:0 12px 20px rgba(37,42,45,.08),0 30px 55px rgba(37,42,45,.12); } .dh-kaart img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; } .dh-kaart-tekst{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .dh-kaart-tekst h3{ font-size:18px; line-height:1.25; margin:0; } .dh-kaart-tekst p{ font-size:14.5px; line-height:1.5; color:rgb(90,90,90); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .dh-kaart-meer{ margin-top:auto; font-weight:700; color:#0F172A; font-size:14px; } .dh-kaart-meer::after{ content:" \2192"; color:#F59E0B; } @media (max-width:1023px){ .dh-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .dh-grid{ grid-template-columns:1fr; } } /* Artikel- en dienstbody: rustige leesbreedte, nette lijsten */ .v2-art-kolom h2{ margin-top:1.6em; } .v2-art-kolom ul{ padding-left:1.2em; } .v2-art-kolom li{ margin:.35em 0; line-height:1.55; } .v2-art-kolom a{ color:#0F172A; text-decoration:underline; text-decoration-color:#F59E0B; text-underline-offset:3px; } .dh-dienst-body{ padding-top:26px; } /* FAQ-accordeon los van de ms-layout bruikbaar */ .dh-faq .v2-ms-acc-inner{ display:block; max-width:900px; margin-inline:auto; } .dh-faq h2{ margin-bottom:18px; } .dh-faq .v2-ms-acc-item > p, .dh-faq .v2-ms-acc-item > div{ } /* dienst-hero: 4 groene vinkjes */ .v2-dd-vinkjes svg{ color:#1d9e46; } /* Formulieren en contactkaart */ .dh-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:26px 0 34px; } .dh-form-rij{ display:flex; flex-direction:column; gap:6px; } .dh-vol{ grid-column:1 / -1; } .dh-form label{ font-weight:700; font-size:14px; color:#0F172A; } .dh-form input, .dh-form select, .dh-form textarea{ font:inherit; font-size:16px; padding:12px 14px; border:1px solid #cbd5e1; border-radius:0 10px 0 10px; background:#fff; color:#0F172A; } .dh-form input:focus, .dh-form select:focus, .dh-form textarea:focus{ outline:2px solid #F59E0B; outline-offset:1px; border-color:#F59E0B; } .dh-form small, .dh-klein{ font-size:13px; color:rgb(90,90,90); } .dh-form .dps-cta-gold{ background:#F59E0B; color:#000 !important; font-weight:700; border:0; border-radius:0 15px 0 15px; padding:14px 30px; cursor:pointer; } .dh-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } .dh-contactkaart{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0; } .dh-contactkaart > div{ background:#F8FAFC; border-radius:0 21.75px 0 21.75px; padding:22px; text-align:center; } .dh-contactkaart h3{ margin:0 0 8px; font-size:17px; } .dh-contactkaart p{ margin:0; } @media (max-width:640px){ .dh-form{ grid-template-columns:1fr; } .dh-contactkaart{ grid-template-columns:1fr; } } .dh-herobel{ border-radius:0 15px 0 15px; } @media print{ .nav, .mobile-menu, .wa-widget, .agbot, .dh-vraag, .sticky-cta, footer{ display:none !important; } body{ color:#000; } } /* DEHAAS-knoppen: de template zet elke .btn met !important op de merkkleur. Deze regels winnen op specificiteit, zodat accentknoppen oranje met zwarte tekst blijven (wit op #F59E0B haalt maar 2,2:1). */ :root{ --gold-dark:#D97706; } .btn.dps-cta-gold, a.btn.dps-cta-gold, .hp-hs-btn.dps-cta-gold, button.dps-cta-gold{ background:#F59E0B !important; color:#000 !important; border-color:#F59E0B !important; box-shadow:0 10px 26px -8px rgba(245,158,11,.5) !important; } .btn.dps-cta-gold:hover, a.btn.dps-cta-gold:hover, .hp-hs-btn.dps-cta-gold:hover, button.dps-cta-gold:hover, .dps-cta-gold:focus-visible{ background:#D97706 !important; color:#000 !important; } .dh-vraag .btn.btn-primary{ background:#fff !important; color:#0F172A !important; border-color:#fff !important; } .dh-vraag .btn.btn-primary:hover{ background:#F8FAFC !important; color:#0F172A !important; } .dh-vraag .btn.btn-ghost{ background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.55) !important; } .dh-vraag .btn.btn-ghost:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; } .dh-vraag p{ color:rgba(244,247,250,.88) !important; } /* Hero: de uitgelichte projectkaart hangt vast aan de rechterrand en schuift op sommige breedtes over de introtekst en de twee heroknoppen (gemeten op 1024 en 1920; de referentie heeft er ook last van). Op desktop daarom weg, op mobiel en tablet staat hij los onder de knoppen. */ @media (min-width:901px){ .hp-hero-slider .v2-hero-featured{ display:none !important; } } /* Twee heroknoppen naast elkaar met een vaste tussenruimte. */ .hp-hs-static-content .dh-heroknoppen{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px !important; } .hp-hs-static-content .dh-heroknoppen > a{ margin:0 !important; position:static !important; top:auto !important; } @media (max-width:900px){ .hp-hs-static-content .dh-heroknoppen{ flex-direction:column; align-items:stretch; } .hp-hs-static-content .dh-heroknoppen > a{ justify-content:center; text-align:center; } } /* ============================================================ WELDING & QUALITY ASSISTANT (AI-chat) ============================================================ */ .agbot-msg.bot.dh-antwoord{ max-width:100%; } .dh-tekst p{ margin:0 0 .6em; line-height:1.5; } .dh-tekst p:last-child{ margin-bottom:0; } .dh-tekst ul{ margin:.3em 0 .7em; padding-left:1.15em; } .dh-tekst li{ margin:.2em 0; line-height:1.45; } .dh-tekst a{ color:#0F172A; text-decoration:underline; text-decoration-color:#F59E0B; text-underline-offset:2px; font-weight:600; } .dh-label{ display:inline-block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#92400E; background:#FEF3C7; border:1px solid #FDE68A; border-radius:999px; padding:2px 9px; margin-bottom:6px; } .dh-acties{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; } .dh-knop{ display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:8px 13px; border-radius:0 10px 0 10px; text-decoration:none; border:1px solid #0F172A; background:#fff; color:#0F172A; line-height:1.2; } .dh-knop-abo{ background:#F59E0B; border-color:#F59E0B; color:#000; } .dh-knop-spec{ background:#0F172A; color:#fff; } .dh-knop:hover{ filter:brightness(.95); } .dh-voet{ font-size:12px; color:#475569; padding:7px 14px 10px; border-top:1px solid #E2E8F0; display:flex; flex-wrap:wrap; gap:4px; align-items:center; } .dh-voet button, .dh-voet a{ font:inherit; font-size:12px; font-weight:700; color:#0F172A; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:#F59E0B; } .dh-denkt{ color:#64748B; font-style:italic; } .dh-denkt i{ display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%; background:#F59E0B; animation:dhPuls 1.2s ease-in-out infinite; } .dh-denkt i:nth-child(2){ animation-delay:.2s } .dh-denkt i:nth-child(3){ animation-delay:.4s } @keyframes dhPuls{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } } .dh-specform{ display:flex; flex-direction:column; gap:8px; max-width:100%; } .dh-specform label{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:700; color:#0F172A; } .dh-specform input, .dh-specform textarea{ font:inherit; font-size:14px; font-weight:400; padding:8px 10px; border:1px solid #CBD5E1; border-radius:0 8px 0 8px; background:#fff; color:#0F172A; } .dh-specform .dh-uitleg{ margin:0; font-size:13px; } .dh-link{ word-break:break-all; font-size:12.5px; background:#F8FAFC; padding:6px 8px; border-radius:6px; } .dh-abo-melding{ font-size:13.5px; margin-top:10px; color:#334155; } .dh-abo-melding a{ color:#0F172A; font-weight:700; } /* inline chat op de assistentpagina */ .dh-chatsectie{ padding:10px 24px 60px; } .dh-chatsectie h2{ text-align:center; margin:0 0 6px; } .dh-chatsectie > p{ text-align:center; max-width:720px; margin:0 auto 22px; color:#475569; } .dh-inline{ max-width:860px; margin:0 auto; background:#fff; border:1px solid #E2E8F0; border-radius:0 21.75px 0 21.75px; box-shadow:0 10px 30px rgba(15,23,42,.08); display:flex; flex-direction:column; overflow:hidden; } .dh-inline .agbot-body{ height:min(520px, 62vh); overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:#F8FAFC; } .dh-inline .agbot-quick{ padding:10px 14px 0; display:flex; flex-wrap:wrap; gap:6px; } .dh-inline .agbot-input{ display:flex; gap:8px; padding:12px 14px; } .dh-inline .agbot-input input{ flex:1; font:inherit; font-size:16px; padding:12px 14px; border:1px solid #CBD5E1; border-radius:0 12px 0 12px; } .dh-inline .agbot-input button{ width:48px; border:0; border-radius:0 12px 0 12px; background:#F59E0B; color:#000; cursor:pointer; } .dh-inline .agbot-input button svg{ width:20px; height:20px; } .dh-inline .agbot-msg{ max-width:88%; } .dh-inline .agbot-msg.user{ align-self:flex-end; } /* abonnementen */ .dh-plannen{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:28px 0 12px; } .dh-plan{ background:#fff; border:1px solid #E2E8F0; border-radius:0 21.75px 0 21.75px; padding:24px 20px; text-align:center; display:flex; flex-direction:column; gap:10px; } .dh-plan.dh-uitgelicht{ border:2px solid #F59E0B; box-shadow:0 14px 34px -12px rgba(245,158,11,.45); } .dh-plan h3{ margin:0; font-size:20px; letter-spacing:.04em; } .dh-prijs{ font-size:30px; font-weight:800; color:#0F172A; line-height:1; } .dh-prijs small{ display:block; font-size:12.5px; font-weight:400; color:#64748B; margin-top:6px; } .dh-plan ul{ width:fit-content; margin:6px auto; text-align:left; list-style:none; padding:0; } .dh-plan li{ display:flex; gap:8px; align-items:flex-start; margin:6px 0; font-size:14.5px; line-height:1.4; } .dh-plan .dh-knop{ margin-top:auto; padding:12px 16px; font-size:15px; } .dh-badge{ align-self:center; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#F59E0B; color:#000; border-radius:999px; padding:3px 10px; } @media (max-width:1100px){ .dh-plannen{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .dh-plannen{ grid-template-columns:1fr; } .dh-inline .agbot-body{ height:58vh; } } /* De template verbergt de chatbot op subpagina's; de Welding Assistant hoort op elke pagina. */ body.subpage .agbot{ display:block !important; } /* De Randoco-schil verbergt alle zwevende knoppen (style.css regel "ALLE zwevende knoppen vervallen"). Voor DEHAAS is de Welding Assistant de kern van de site: die komt op elke breedte terug. WhatsApp en sticky-balk blijven weg. */ html body .agbot{ display:block !important; } html body .agbot-launch{ display:flex !important; } html body #agbot.open .agbot-launch{ display:none !important; } @media (min-width:769px){ html body #agbot.open .agbot-launch{ display:flex !important; } } /* Zwevende assistentknop: tekstknop in de DEHAAS-vorm, niet de ronde templateknop. */ html body .agbot-launch{ width:auto !important; height:auto !important; min-width:0 !important; white-space:nowrap !important; padding:14px 22px !important; border-radius:0 15px 0 15px !important; font-weight:700 !important; font-size:15px !important; background:#F59E0B !important; color:#000 !important; box-shadow:0 12px 28px -10px rgba(245,158,11,.6) !important; } /* Lijstitems in lopende tekst: de template maakt elke
  • een flexrij met een vinkje, waardoor tekst na een een eigen kolom werd ("De assiste nt"). Vinkje absoluut links, tekst loopt als gewone regel door. */ .v2-art-kolom li{ display:block !important; position:relative !important; padding-left:28px !important; } .v2-art-kolom li::before{ position:absolute !important; left:0 !important; top:.28em !important; } /* pakketten breder dan de leeskolom, knoppen zonder tekstlink-opmaak */ .v2-art-kolom .dh-plannen{ width:min(1200px, calc(100vw - 48px)); position:relative; left:50%; transform:translateX(-50%); } .v2-art-kolom a.dh-knop{ text-decoration:none !important; } .v2-art-kolom a.dh-knop-spec{ color:#fff !important; } .v2-art-kolom a.dh-knop-abo{ color:#000 !important; } .dh-plan li{ text-align:left; } /* ============================================================ LASBEGRIPPEN-LEXICON (/lasbegrippen/ en /en/welding-glossary/) ============================================================ */ .dh-lexicon { max-width: 1000px; margin-inline: auto; } .dh-abc{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:32px auto 48px; padding:20px; max-width:100%; background:var(--ref-vlak-licht); border-radius:14px; } .dh-abc a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:var(--ref-wit); color:var(--ref-blauw); font-weight:700; font-size:15px; text-decoration:none; border:1px solid rgba(15,23,42,.10); transition:background .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1), border-color .25s; } .dh-abc a:hover{ background:var(--ref-blauw); color:var(--ref-wit); border-color:var(--ref-blauw); } .dh-lexicon h2{ margin:56px 0 18px; padding-bottom:10px; border-bottom:3px solid var(--ref-geel); color:var(--ref-blauw); scroll-margin-top:120px; } .dh-termen{ margin:0 0 8px; padding:0; } .dh-term{ padding:22px 24px; margin:0 0 12px; background:var(--ref-vlak-licht); border-radius:14px; border-left:4px solid var(--ref-geel); scroll-margin-top:120px; } .dh-term dt{ margin:0 0 8px; font-weight:700; font-size:clamp(17px,1.1rem,20px); color:var(--ref-blauw); display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .dh-term-norm{ display:inline-block; padding:3px 11px; border-radius:999px; background:var(--ref-wit); border:1px solid var(--ref-geel); color:var(--ref-grijs); font-size:12px; font-weight:600; letter-spacing:.02em; white-space:nowrap; } .dh-term dd{ margin:0; color:var(--ref-zwart); line-height:1.6; } .dh-term-meer{ display:block; margin-top:10px; font-size:14px; color:var(--ref-grijs); } .dh-term-meer a{ color:var(--ref-blauw); font-weight:600; } @media (max-width:640px){ .dh-abc{ gap:6px; padding:14px; } .dh-abc a{ width:36px; height:36px; font-size:14px; } .dh-term{ padding:18px 16px; } .dh-term dt{ font-size:16px; } } @media print{ .dh-abc{ display:none; } .dh-term{ background:none; border-left:2px solid #000; page-break-inside:avoid; } } /* ---- inhoudsblok op de homepage ---- */ .dh-uitleg{ padding:clamp(56px,8vw,104px) 0; background:var(--ref-wit); } .dh-uitleg .v2-wrap{ max-width:1000px; margin-inline:auto; } .dh-uitleg h2{ margin:44px 0 14px; color:var(--ref-blauw); } .dh-uitleg h2:first-child{ margin-top:0; } .dh-uitleg p{ line-height:1.65; margin:0 0 14px; } .dh-uitleg-lijst{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; } .dh-uitleg-lijst li{ position:relative; padding-left:28px; line-height:1.6; } .dh-uitleg-lijst li::before{ content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-radius:3px; background:var(--ref-geel); } .dh-uitleg-kolom{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; } .dh-uitleg-lijst a{ color:var(--ref-blauw); font-weight:600; } @media (max-width:760px){ .dh-uitleg-kolom{ grid-template-columns:1fr; } }