/* 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: #4A42DD; /* elke knop, zonder uitzondering */ --ref-geel: var(--gold,#4A42DD); /* elk geel vlak, zonder uitzondering */ --ref-vlak-licht: rgb(247, 247, 247); /* 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, #4A42DD, 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, #4A42DD 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; max-width:1440px; 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, #4A42DD, 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:#4A42DD !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 rgb(247,247,247); 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 rgb(247,247,247) 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:rgb(247,247,247); 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:#4A42DD !important; border:2px solid #4A42DD !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 #4A42DD, 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 #3AA7A4 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:var(--gold,#4A42DD) !important; /* wit i.p.v. het gemeten zwart: op de paars-blauwe gradient is zwart onleesbaar, en tekst op donker is bij ons altijd wit */ color:#fff !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, ronde hoek rechtsonder 32.1875. De breedte stond op een vaste 390px, de maat van het meetscherm. Daardoor eindigde de foto altijd op x 380 en bleef er wit staan rechts: 10px op een scherm van 390, 34px op 414 en 50px op 430. Nu loopt hij mee met het scherm, dus altijd van -10 tot de rechterrand. */ .hp-services.v2-wwo .v2-wwo-foto{ margin-left:-10px !important; width:calc(100% + 10px) !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:#4A42DD !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, .v2-cta-cirkel .v2-cta-bol3d{ 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:#4A42DD !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:#4A42DD !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:#4A42DD !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:#4A42DD !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. */ /* AANGEPAST 02-09: deze noodregel maakte na 2,2 seconden ALLES zichtbaar, ook secties ver buiten beeld. Daardoor was de invlieg-animatie al gespeeld voordat je er was. Het vangnet zit nu in JavaScript en kijkt wel naar het scherm (zie main.js en het ag-anim-blok); zonder JavaScript staat alles gewoon zichtbaar via de no-js-regels hieronder. */ .no-js .fade-in, .no-js .reveal, .no-js .reveal-x, .no-js .reveal-x-r, .no-js .reveal-up, .no-js .stagger > *{ opacity:1 !important; transform:none !important; } /* 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:var(--gold,#4A42DD) !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:var(--gold,#4A42DD) !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:var(--gold,#4A42DD) !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:var(--gold,#4A42DD) !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.webp, 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.webp"); --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.webp; 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:#4A42DD !important; border:2px solid #4A42DD !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:var(--gold,#4A42DD) !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:var(--gold,#4A42DD) !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:var(--gold,#4A42DD) !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:var(--gold,#4A42DD) !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, .v2-cta-cirkel .v2-cta-bol3d{ 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 #4A42DD !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:rgb(247,247,247) !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:#4A42DD !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){ html{ 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; } /* DPS-correctie (23-08-2026, verzoek Dikkie): het brede DPS-logo hing 21px onder de menuregel door de ref-maat padding-top:43 (gemeten op het vierkante randoco-beeldmerk). Het logo staat nu verticaal exact op de menuregel: boxmidden 52.5px = het gemeten midden van de menulinks in rust. */ @media (min-width: 901px){ /* horizontaal highres-logo (cirkel + tekst ernaast, keuze A van Dikkie 23-08): 46px hoog, boxmidden op het menuregel-midden van 52.5px */ .nav-logo{ padding-top: 29.5px !important; align-items: flex-start !important; width: auto !important; } .nav-logo img{ width: auto !important; height: 46px !important; object-fit: contain !important; } } @media (max-width: 900px){ .nav-logo img{ width: auto !important; height: 38px !important; object-fit: contain !important; } .nav-logo{ width: auto !important; } } /* DPS-watermerk (23-08-2026, verzoek Dikkie): alleen het grijze beeldmerk (D met pijl, zonder tekst), herkenbaar en halverwege de herofoto gecentreerd; vervangt het eerdere volledige logo met tekst. De foto is 48vw breed op desktop, dus het merk centreert op 24vw. */ .hp-hero-slides::after{ background-image:url("../../assets/img/beeldmerk-grijs-sm.webp") !important; opacity:.22 !important; /* echt als watermerk op de achtergrond (Dikkie 23-08) */ } /* kleiner en half over de rechterrand van de foto (helft zichtbaar), zoals de referentie; de fotowrapper knipt hem af. */ @media (min-width: 901px){ .hp-hero-slides::after{ width:24vw !important; height:24vw !important; left:calc(48vw - 20.5vw) !important; /* ~15% valt over de rand */ top:calc(50% - 12vw) !important; } } @media (max-width: 900px){ .hp-hero-slides::after{ width:40vw !important; height:40vw !important; left:calc(100vw - 34vw) !important; right:auto !important; top:calc(50% - 20vw) !important; } } /* Menubalk in Manrope 800 (keuze Dikkie 23-08-2026 uit vier varianten): stevig en vriendelijk; geldt voor de balk, de contactknop en het mobiele menu. De mega-paneelinhoud houdt de referentiestijl. */ .nav-links > li > a, .nav-links a{ font-family:'Manrope', Arial, Helvetica, sans-serif !important; font-weight:800 !important; font-size:16.5px !important; letter-spacing:0 !important; text-transform:none !important; } .nav-bel-tekst{ font-family:'Manrope', Arial, Helvetica, sans-serif !important; font-weight:800 !important; font-size:16px !important; } .mmx-scroll a, .mmx-scroll button, .mmx-acc-btn{ font-family:'Manrope', Arial, Helvetica, sans-serif !important; font-weight:800 !important; } /* Google-waardering-badge linksonder in de herofoto (verzoek Dikkie 23-08): witte kaart in de vormtaal van de template (hoek 0/15), G-logo, waardering 4,7 en vijf gouden sterren. */ .hp-hero-slides .v2-google-badge{ position:absolute; left:24px; bottom:24px; z-index:4; display:inline-flex; align-items:center; gap:10px; background:none; border-radius:0; padding:0; box-shadow:none; pointer-events:none; } .v2-grb-g svg{ width:22px; height:22px; display:block; } .v2-grb-tekst{ font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#fff; white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.55); } .v2-grb-tekst b{ font-weight:700; } .v2-grb-sterren{ display:inline-flex; gap:2px; } .v2-grb-sterren svg{ width:16px; height:16px; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); } @media (max-width: 900px){ .hp-hero-slides .v2-google-badge{ left:14px; bottom:14px; gap:8px; } .v2-grb-g svg{ width:18px; height:18px; } .v2-grb-tekst{ font-size:12.5px; } .v2-grb-sterren svg{ width:13px; height:13px; } } /* ============================================================ HUISSTIJL-UPDATE (na de referentiemetingen, 24-08-2026) Alle GEVULDE knoppen dragen de paars-blauwe gradient uit het DPS-logo (token --gold in style.css). Outline-, ghost- en WhatsApp-knoppen blijven buiten schot. De vlakke --ref-knop-bg blijft eronder staan als vangnet. Dit blok staat bewust helemaal onderaan: het bestand wint op volgorde, dus alleen hier verslaat de gradient de gemeten knopregels. ============================================================ */ .btn-primary.btn-primary, .hp-hs-btn.hp-hs-btn, .v2-cta-knop.v2-cta-knop, .v2-locaties .v2-loc-route, .of-submit.of-submit, .rucalc-btn.rucalc-btn, .lp-submit.lp-submit, .agbot-launch.agbot-launch, .dps-cta-gold.dps-cta-gold, .v2-res .v2-res-lees, .v2-res-kaart .btn.v2-res-lees, .v2-locaties a.btn.v2-loc-route, a.btn.v2-loc-route{ background-image:var(--gold,none) !important; border-color:transparent !important; } .btn-primary.btn-primary:hover, .hp-hs-btn.hp-hs-btn:hover, .v2-cta-knop.v2-cta-knop:hover, .v2-locaties .v2-loc-route:hover, .of-submit.of-submit:hover, .rucalc-btn.rucalc-btn:hover, .lp-submit.lp-submit:hover, .agbot-launch.agbot-launch:hover, .dps-cta-gold.dps-cta-gold:hover, .dps-cta-gold.dps-cta-gold:focus-visible, .v2-res .v2-res-lees:hover, .v2-res-kaart .btn.v2-res-lees:hover, .v2-locaties a.btn.v2-loc-route:hover, a.btn.v2-loc-route:hover{ background-image:var(--gold-dark,none) !important; } /* Hero-alinea's: sinds de langere ruggengraat-tekst lopen de alinea's en de knop door tot naast het kantoorkaartje rechtsonder. Smaller houden dan de kaartrand, zodat de tekst het witte vlak naar BENEDEN vult in plaats van achter de foto te verdwijnen. Alleen desktop; mobiel staat de kaartrij onder de tekst. */ @media (min-width:1024px){ .hp-hs-static-content .hp-hs-desc{ max-width:20vw !important; } } /* Hero-alinea's in zwart, gelijk aan de kop, in plaats van het grijze rgb(61,65,69) uit de bodytekst. */ .hp-hs-static-content .hp-hs-desc{ color:#000 !important; } @media (min-width:1024px) and (max-width:1366px){ .hp-hs-static-content .hp-hs-desc{ margin:8px 0 12px !important; } } /* De punt achter de hero-kop in de huisstijlgradient. Via background-clip, want een gewone color kan geen gradient dragen. */ .hp-hs-title .hs-punt{ /* horizontaal, niet 135deg: de punt staat onderin zijn regelvak en pakte daardoor alleen het blauwe uiteinde van de schuine gradient */ background:linear-gradient(90deg,#C10FFF,#0D8CFF); -webkit-background-clip:text; background-clip:text; color:transparent; } /* De kennismakingsknop iets lager in de hero. Op 1280-1366 is de restruimte onder de knop maar een paar pixels, dus daar een kleinere stap. */ @media (min-width:1367px){ .hp-hs-static-content .hp-hs-btn{ margin-top:16px !important; } } @media (min-width:1024px) and (max-width:1366px){ .hp-hs-static-content .hp-hs-btn{ margin-top:5px !important; } } /* De eerste hero-alinea ook iets lager, meer lucht onder de kop. */ @media (min-width:1367px){ .hp-hs-static-content .hp-hs-title + .hp-hs-desc{ margin-top:14px !important; } } @media (min-width:1024px) and (max-width:1366px){ .hp-hs-static-content .hp-hs-title + .hp-hs-desc{ margin-top:9px !important; } } /* ============================================================ EXPERTISESECTIE ONDER DE HERO (24-08-2026) De sectie is naar de tweede positie verhuisd. De oude meetregels lieten de foto 157px boven de sectie uitsteken (img margin-top:-157, hoogte 1068, figure 911) omdat hij toen onder de logoband stond. Op zijn nieuwe plek viel de foto daardoor over de hero en de kop heen, en op schermen tussen 1440 en 1700 breed schoof hij over de tekstkolom. Hier wordt dat vervangen door een gewoon tweekoloms grid dat op elke schermbreedte sluitend is: de foto vult exact zijn eigen kolom en groeit mee met de hoogte van de lijst. ============================================================ */ @media (min-width:1024px){ .hp-services.v2-wwo{ display:grid !important; grid-template-columns:1fr 1fr !important; align-items:stretch !important; overflow:hidden !important; } .hp-services.v2-wwo .v2-wwo-foto{ height:auto !important; min-height:0 !important; overflow:hidden !important; position:relative !important; margin:0 !important; } .hp-services.v2-wwo .v2-wwo-foto img{ margin-top:0 !important; width:100% !important; height:100% !important; min-height:640px; object-fit:cover !important; display:block !important; } .hp-services.v2-wwo .v2-wwo-inhoud{ min-width:0 !important; } } /* De paarse accentbalk bovenop de expertisesectie terug. Hij stond op top:-157px (meting van de oude sectiepositie) en werd door de overflow:hidden van de responsieve fix weggeknipt. Nu op top:0, dus op de bovenrand van de foto zelf, en de overflow weer vrij. */ @media (min-width:1024px){ .hp-services.v2-wwo{ overflow:visible !important; } .hp-services.v2-wwo .v2-wwo-foto{ overflow:visible !important; } /* referentieverhouding: de fototop ligt op de HELFT van de balk (balk 135 hoog, dus 67.5 erboven), en de streep ligt 157 onder de fototop, zoals in het origineel waar de foto 157 boven de sectie uitstak */ .hp-services.v2-wwo .v2-wwo-foto::before{ top:-67.5px !important; } .hp-services.v2-wwo .v2-wwo-foto img{ border-radius:0 0 var(--ref-radius-l) 0 !important; } .v2-wwo-streep{ top:157px !important; } } /* Lucht tussen de hero en de expertisesectie (de balk hing tegen de herofoto aan), de kop met de lijst onder de begeleidingslijn (die ligt op 157), en een eigen gebroken-witte achtergrond zodat de sectie zich als nieuw onderwerp aftekent tegen het witte vlak erboven. */ /* Referentiegedrag (randoco, gemeten): het grijs van de vertrouwensband loopt ononderbroken door tot 157px onder de fototop, precies tot de streep, en slaat daar om naar wit. De kop staat dus op wit, het grijs eindigt op de streep. Geen kier tussen band en sectie. */ .hp-services.v2-wwo{ background:#F7F7F7 !important; } @media (min-width:1024px){ /* Zoals de referentie: de sectie schuift 157px de vertrouwensband in. De fototop steekt daardoor in het grijs van de band zelf, en de streep (op 157) valt exact op de onderrand van de band, waar het grijs full-bleed ophoudt. De bovenste 157px van de sectie is doorzichtig zodat de band erdoorheen toont; daaronder wit. Geen pseudo-lagen meer nodig. */ .hp-services.v2-wwo{ margin-top:-157px !important; background:linear-gradient(to bottom,transparent 0,transparent 157px,#fff 157px) !important; } .hp-services.v2-wwo .v2-wwo-inhoud{ padding-top:184px !important; } } /* Bandwatermerk gelijk aan de header/hero (verzoek 24-08): alleen het grijze beeldmerk (D met pijl), niet het volledige logo met tekst. Zelfde bestand als het herowatermerk. */ .v2-band::before{ background:url(/assets/img/beeldmerk-grijs-sm.webp) 50% 50% / contain no-repeat !important; /* het bestand is #F0F0F0 op een #F7F7F7-achtergrond: op de oude opacity .3 was hij onzichtbaar. Iets donkerder trekken en vol tonen, dan is hij net zo aanwezig als het oude tekstwatermerk. */ filter:brightness(.92) !important; opacity:1 !important; /* naar referentievoorbeeld: groter, verder naar rechts en lager, zodat hij rechts van de kop hangt en eronder uitzakt */ width:390px !important; height:390px !important; left:30% !important; top:95px !important; } /* De expertisefoto met de paarse balk een stuk omhoog, inclusief de grijze zone en de streep: de band wordt 70px korter, waardoor het hele ensemble dichter onder de logo's komt en de sectie minder vlak oogt. */ @media (min-width:1024px){ .v2-band{ padding-bottom:calc(var(--ru-band-pb) - 70px) !important; } } /* Bandkop in hetzelfde gewicht als "Onze Expertises" (verzoek 24-08): de gemeten referentie had hier 400, maar wij zetten alle sectiekoppen vet. De grootte was al gelijk (beide --ref-kop-xl). */ .v2-band .v2-band-kop h2, .v2-band h2{ font-weight:700 !important; } /* Wereldbol in de CTA-cirkel (24-08, v3): doorzichtige hologrambol in de stijl van het aangeleverde beeld. Twee lagen van dezelfde kaart (oceaan is doorzichtig): de gedimde, gespiegelde ACHTERKANT draait de ene kant op, de heldere voorkant de andere kant op, dus je kijkt er echt doorheen. De overlay geeft bolschaduw, een lichtvlek en de magenta/blauwe zijden; de rand gloeit via box-shadow. Bij prefers-reduced-motion staat alles stil. */ .v2-cta-bol3d{ display:block; overflow:hidden; background-color:#030524; background-image:url(/assets/img/wereldbol-achter.webp); background-size:200% 100%; background-repeat:repeat-x; animation:dpsAarde 70s linear infinite reverse; /* paarse neongloed (spec 24-08): scherpe rand, neon eromheen, links het sterkst, zacht uitlopend tot ~8% buiten de bol */ box-shadow:0 0 0 2px rgba(159,30,236,.55), 0 0 18px 4px rgba(225,73,250,.5), -26px 0 85px 12px rgba(159,30,236,.42), 0 0 60px 14px rgba(97,33,223,.38), 0 0 130px 34px rgba(97,33,223,.22), inset 0 0 40px rgba(9,17,111,.5); } .v2-cta-bol3d::before{ content:""; position:absolute; inset:0; border-radius:50%; background-image:url(/assets/img/wereldbol-voor.webp); background-size:200% 100%; background-repeat:repeat-x; animation:dpsAarde 70s linear infinite; } @keyframes dpsAarde{ from{ background-position-x:0; } to{ background-position-x:200%; } } .v2-cta-bol3d::after{ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 33% 27%, rgba(242,247,255,.08), transparent 42%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,2,29,.30) 82%, rgba(97,33,223,.35) 96%, rgba(159,30,236,.5) 100%); } @media (prefers-reduced-motion:reduce){ .v2-cta-bol3d, .v2-cta-bol3d::before{ animation:none; } } /* Waarden-blok op de over-ons pagina (24-08): de betonschijf is eruit, de draaiende wereldbol vult nu het hele vlak. De witte cirkel blijft als ring eromheen staan. */ .v2-au-comp-beton{ display:none !important; } .v2-au-comp-bol.v2-cta-bol3d{ background-color:#030524 !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; z-index:2; } .v2-au-comp-lijn{ display:none !important; } /* Case-hero: de betontextuur in de halve cirkel is een restant van de referentiesite en past niet bij de huisstijl. Vervangen door de paars-blauwe gradient; de zwarte rechterhelft blijft, de casefoto blijft erop staan. */ /* Case-hero: de halve schijven zijn eruit, de draaiende wereldbol vult nu de hele cirkel, net als in de footer en het waarden-blok. De casefoto zelf staat gewoon in de galerij eronder. */ .v2-pd2-c-grijs, .v2-pd2-c-zwart{ display:none !important; } .v2-pd2-c-foto.v2-cta-bol3d{ left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; width:400px !important; height:400px !important; background-color:#030524 !important; z-index:2; } @media (max-width:900px){ .v2-pd2-c-foto.v2-cta-bol3d{ width:74vw !important; height:74vw !important; max-width:328px !important; max-height:328px !important; } } /* Wapperende vlag op de herofoto (24-08). Losse laag met exact dezelfde afmetingen en dezelfde cover-instelling als de herofoto, dus hij valt op elk schermformaat precies samen. Bevat alleen de vlag; de rest is transparant. De animatie zit in het webp-bestand zelf. */ .hp-hs-vlag{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; background-repeat:no-repeat; pointer-events:none; } /* Leesbaarheid op de nieuwe statementfoto (24-08): het beeld heeft felle schermen aan de rechterkant, precies waar de tekstkolom staat. De egale 20%-laag was daar te licht. Basis iets donkerder plus een gradient die naar rechts aanzet, zodat de foto links open blijft en de tekst rechts leesbaar. */ .hp-waarom::before{ background: linear-gradient(100deg, rgba(0,0,0,0) 38%, rgba(4,6,16,.42) 68%, rgba(4,6,16,.58) 100%), rgba(0,0,0,.34) !important; } /* Expertise-foto: op mobiel is het fotovak bijna vierkant, waardoor de ref-uitsnede (50% 100%) alleen de tafel toonde. Uitsnede naar de mensen toe zodat het onderwerp in beeld staat (foto-wissel Dikkie 26-08). */ @media (max-width: 900px){ /* zelfde specificiteit als de ref-regel op regel ~1144 (center bottom), anders wint die en zie je alleen de tafel */ .hp-services.v2-wwo .v2-wwo-foto img{ object-position:50% 20% !important; } } /* Locatiegegevens: label boven, volledige waarde eronder (verzoek Dikkie 26-08). Het telefoonnummer brak af achter 'Telefoon:' waardoor 5505 op een losse regel viel; label en waarde staan nu netjes onder elkaar en het nummer breekt niet meer. */ .v2-loc-contact .label{ display:block !important; opacity:.7; } .v2-loc-tel a, .v2-loc-mail a, .v2-loc-adres{ white-space:nowrap; } .v2-loc-contact > span{ display:block; } /* Locatiesectie, twee correcties (Dikkie 26-08): 1. de inactieve vestiging was met grayscale(1)/opacity .3 vrijwel onzichtbaar; nu goed leesbaar maar duidelijk minder prominent, en de actieve licht op met volle kleur plus een ring in de accentkleur. 2. de gegevensblokken stonden ONDER elkaar in plaats van gestapeld (grid-area 1/1 werkte niet omdat de container geen grid was), waardoor Epe een gat van ~151px kreeg. Beide blokken beginnen nu op dezelfde hoogte. */ .v2-loc-gegevens{ display:grid !important; } .v2-loc-item{ grid-area:1 / 1 !important; } .v2-loc-cirkel img{ filter:grayscale(.45) !important; opacity:.72 !important; } .v2-loc-cirkel:hover img{ filter:grayscale(.2) !important; opacity:.88 !important; } .v2-loc-cirkel.is-actief img, .v2-loc-cirkel.is-actief:hover img{ filter:none !important; opacity:1 !important; } .v2-loc-cirkel{ box-shadow:0 0 0 0 rgba(255,255,255,0); transition:box-shadow .25s; } .v2-loc-cirkel.is-actief{ box-shadow:0 0 0 3px var(--bronze); } /* Kantoorpagina's: fotohero met leeslaag en witte tekst (vaste regel: tekst over een foto krijgt altijd een donkere laag ertussen). De algemene v2-gh-regels maken de hero wit met zwarte tekst, afgestemd op de lichte offerte-hero van de referentie; deze variant geldt alleen hier. */ .v2-gh.v2-gh-foto{ background:#000 !important; } .v2-gh.v2-gh-foto::after{ /* bovenin lichter zodat het logo in de header leesbaar blijft, in het midden en onderin donkerder voor de kop en de tekst */ background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.52) 40%, rgba(0,0,0,.72) 100%) !important; background-image:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.52) 40%, rgba(0,0,0,.72) 100%) !important; } /* contactknop-tekst wit op deze donkere hero's (de menulinks zijn dat al via v2-nav-licht); geldt alleen zolang de balk transparant is */ body.v2-hero-donker .nav:not(.v2-sticky) .nav-bel-tekst{ color:#fff !important; } .v2-gh.v2-gh-foto, .v2-gh.v2-gh-foto h1, .v2-gh.v2-gh-foto p, .v2-gh.v2-gh-foto span, .v2-gh.v2-gh-foto a:not(.btn){ color:#fff !important; } .v2-gh.v2-gh-foto .v2-kruimel a{ color:rgba(255,255,255,.85) !important; } /* Social-sectie, twee accenten (Dikkie 27-08): 1. de kop loopt over de donkere foto (kop z3, foto z1), waardoor de laatste letter van "media" wegviel: witte contour om de letters, inclusief de binnenvorm van de a. Op de lichte achtergrond is die contour onzichtbaar, over de foto maakt hij de letter leesbaar. 2. blauwe lijn om de kleine rechterfoto, in exact de blauwe eindkleur van de accentstreep die door de grote foto loopt: rgb(0,159,255). */ .v2-social-kop{ color:#000 !important; /* pikzwart, geen contour op de kop zelf */ -webkit-text-stroke:0 !important; } /* alleen de laatste letter valt over de foto: die krijgt de blauwe contour */ .v2-social-kop .v2-social-a{ color:#000; -webkit-text-stroke:2px #009FFF; paint-order:stroke fill; } .v2-social-foto2{ box-shadow:0 0 0 3px #009FFF; } /* Social-sectie, vervolgronde (Dikkie 27-08): - haaietand uit de accentstreep: rechte lijn - iconen gecentreerd onder de streep, in de volle breedte van de tekstkolom - iconen groter en beter zichtbaar */ .v2-social-tand{ clip-path:none !important; height:var(--lijn-d) !important; } .v2-social-iconen{ justify-content:center !important; /* zelfde breedte als de streep, zodat de rij precies onder het midden van die streep uitkomt en niet 23px links ervan */ width:calc(100% + clamp(16px, 3vw, 48px)) !important; /* het rechterstuk van de streep ligt achter de foto; die overlap tellen we niet mee, zodat de rij precies onder het zichtbare stuk streep uitkomt */ padding-right:clamp(0px, 11.46vw, 165px) !important; box-sizing:border-box !important; margin-top:clamp(26px, 3.2vw, 46px) !important; gap:clamp(20px, 2.9vw, 42px) !important; } .v2-social-iconen .v2-si{ width:clamp(54px, 4.4vw, 64px) !important; height:clamp(54px, 4.4vw, 64px) !important; padding:0 !important; } .v2-social-iconen .v2-si svg{ width:clamp(30px, 2.5vw, 36px) !important; height:clamp(30px, 2.5vw, 36px) !important; } @media (max-width:1023px){ /* gestapeld loopt de streep precies mee met de kolom, dus de iconenrij ook */ .v2-social-iconen{ width:100% !important; padding-right:0 !important; } /* de kop staat hier niet meer over de foto, dus de contour is overbodig en zou de letters op mobiel alleen maar dunner laten ogen */ .v2-social-kop .v2-social-a{ -webkit-text-stroke:0 !important; } } /* Mobiel menu: elk kanaal in zijn eigen merkkleur met een ring in diezelfde kleur. Facebook en Instagram hadden dat al, TikTok en LinkedIn stonden nog op de neutrale rand; half gekleurd is geen optie. */ .mmx-social a[aria-label="TikTok"], .mmx-social a[aria-label="LinkedIn"]{ position:relative; border-radius:50%; border-color:transparent !important; } .mmx-social a[aria-label="TikTok"] svg{ color:#000; } .mmx-social a[aria-label="LinkedIn"] svg{ color:#0A66C2; } .mmx-social a[aria-label="TikTok"]::before, .mmx-social a[aria-label="LinkedIn"]::before{ content:""; position:absolute; inset:0; border-radius:50%; padding:2px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .mmx-social a[aria-label="TikTok"]::before{ background:#000; } .mmx-social a[aria-label="LinkedIn"]::before{ background:#0A66C2; } /* Watermerk in de social-sectie en op de dienstenpagina's: het vaste grijze beeldmerk (D met pijl), gelijk aan het watermerk in de hero en in de band. Het bestand is egaal #F5F5F5 en zou op de lichte achtergrond wegvallen, dus niet met opacity werken maar de tint donkerder trekken tot dezelfde grijswaarde als het oude tekstwatermerk (gemeten ~#BCBCBC). */ .v2-social-watermerk{ height:auto !important; aspect-ratio:1 / 1; opacity:1 !important; filter:brightness(.9) !important; /* het vierkante beeldmerk is veel hoger dan het oude woordmerk en raakt de kop; als watermerk hoort hij achter de tekst, niet erover */ z-index:2 !important; /* volledig in beeld (verzoek 27-08): het woordmerk hing half buiten de linkerrand, het beeldmerk moet in zijn geheel te zien zijn */ left:0 !important; } .v2-ms-watermerk{ height:auto !important; aspect-ratio:1 / 1; opacity:1 !important; filter:brightness(.9) !important; /* op de dienstenpagina's lag hij op .07, dus subtieler */ } /* Footermerk (verzoek 27-08): het nieuwe horizontale logo in plaats van het oude woordmerk. Het bestand is 480x156, dus geen vierkant vak meer forceren. Alleen het donkere woordmerk is wit gemaakt; de gekleurde D blijft zoals hij is. */ .v2-ft-logo img{ width:clamp(150px, 12vw, 190px) !important; height:auto !important; object-fit:contain !important; } /* de slogan stond 60px van de knop af; dat gat is te groot. De kolom heeft zelf al 30px gap, dus de losse marges eromheen kunnen naar 0 */ .v2-ft-slogan{ margin:0 !important; } .footer .v2-ft-knop{ margin-top:0 !important; } /* Slogan een slag kleiner (verzoek 27-08): 33 -> 27 op desktop, mobiel mee omlaag in dezelfde verhouding (23 -> 19). */ .v2-ft-slogan{ font-size:calc(10.8px + 1.125vw) !important; } @media (max-width:767px){ .v2-ft-slogan{ font-size:calc(14.4px + 1.125vw) !important; } } @media (min-width:1440px){ .v2-ft-slogan{ font-size:27px !important; } } /* Footermerk uitlijnen (verzoek 28-08): logo, slogan en knop op EEN middenas, logo een slag groter, slogan nog iets kleiner. */ .v2-ft-merk{ align-items:center !important; text-align:center !important; } .footer .v2-ft-knop{ align-self:center !important; } .v2-ft-logo{ display:block !important; } .v2-ft-logo img{ width:clamp(172px, 14.6vw, 210px) !important; } .v2-ft-slogan{ font-size:calc(9.6px + 1vw) !important; } @media (max-width:767px){ .v2-ft-slogan{ font-size:calc(12.8px + 1vw) !important; } } @media (min-width:1440px){ .v2-ft-slogan{ font-size:24px !important; } } /* Footerkolommen (verzoek 28-08): vaste volgorde Bedrijf, Expertises, Werkgebied, Contact, gelijkmatig naast elkaar en als rij gecentreerd. De kolommen zijn zo breed als hun langste regel (niet uitrekken), met overal dezelfde tussenruimte. */ .v2-ft-top{ display:flex !important; justify-content:center !important; align-items:flex-start !important; gap:clamp(26px, 3.6vw, 52px) !important; width:100% !important; } .v2-ft-top > .v2-ft-kolom{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; } /* de cookieknop staat als enige regel in de Bedrijf-kolom in een ander lettertype en formaat; gelijktrekken met de links ernaast */ .v2-ft-top .cookie-settings-open{ font-size:13.5px !important; font-weight:700 !important; line-height:inherit !important; color:#fff !important; background:none !important; border:0 !important; padding:0 !important; cursor:pointer; } /* Vestigingen in de footer (verzoek 28-08): twee blokken naast elkaar op dezelfde hoogte, uitgelijnd met de linkerkant van het merkblok in plaats van met de menukolommen. .v2-ft-onder hangt daarom nu onder de hele footer-grid. */ .v2-ft{ grid-template-rows:auto auto; } .v2-ft > .v2-ft-onder{ grid-column:1 / -1 !important; display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; justify-content:space-between !important; gap:clamp(24px, 3vw, 44px) !important; width:100% !important; } .v2-ft-gegevens{ display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; gap:clamp(28px, 4.4vw, 64px) !important; } .v2-ft-gegevens .v2-ft-blok{ min-width:0; } .v2-ft-gegevens .v2-ft-regels{ display:flex !important; flex-direction:column !important; gap:4px !important; margin-top:10px !important; } .v2-ft-gegevens .v2-ft-regels .v2-ft-gegeven, .v2-ft-gegevens .v2-ft-regels a{ font-size:13.5px !important; font-weight:700 !important; color:#fff !important; line-height:1.5 !important; } /* de links in de vestigingsblokken hadden 5px eigen padding, waardoor telefoon en e-mail verder uit elkaar stonden dan de adresregels */ .v2-ft-gegevens .v2-ft-regels a{ padding:0 !important; margin:0 !important; } /* De patroonstrook boven de copyrightbalk vulde maar de linkerhelft. Oorzaak: de basisregel centreert hem met left:50% + translateX(-50%) over 100vw, maar een latere override zet left:0 en width:100% terwijl de translate bleef staan. Daardoor stond de strook 720px (de halve breedte) naar links. */ .footer .footer-bottom::before{ transform:none !important; } /* Het patroonvlak achter "Laten We Praten" is met vw-waarden gepositioneerd en staat daardoor alleen op exact 1440 in het midden; daarbuiten schuift het weg, waardoor de kop er links buiten viel en rechts juist ruimte overhield. Nu op elke breedte gecentreerd; op 1440 blijft de positie identiek. */ .v2-cta-cirkel::after{ left:50% !important; transform:translateX(-50%) !important; } /* Werkgebied-overzicht: acht regio's in plaats van zes. Bij drie kolommen bleef er een halve rij over, dus vier kolommen (2 rijen van 4). */ @media (min-width:1024px){ .v2-rg-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; } } /* =========================================================================== CHATKNOP RECHTSONDER (keuze Dikkie 28-08: variant 3) Zwarte pil met een rand in het logo-verloop, ronde foto en statusregel. Opent WhatsApp. De oude zwevende knoppen blijven uit; dit is een eigen component en raakt .agbot / .wa-widget niet aan. =========================================================================== */ .dps-chat{ position:fixed; right:24px; bottom:24px; z-index:9990; display:inline-flex; align-items:center; gap:12px; background:#0B0B0F; border-radius:999px; padding:8px 22px 8px 8px; text-decoration:none; color:#fff; font-family:Arial, Helvetica, sans-serif; box-shadow:0 14px 34px -14px rgba(0,0,0,.75); transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; } .dps-chat::before{ content:""; position:absolute; inset:0; border-radius:999px; padding:2px; background:linear-gradient(135deg,#C10FFF 0%,#5A16FF 52%,#009FFF 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .dps-chat:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(90,22,255,.6); } .dps-chat-av{ width:52px; height:52px; border-radius:50%; object-fit:cover; display:block; flex:none; } .dps-chat-tekst{ display:block; line-height:1.25; } .dps-chat-tekst b{ display:block; font-size:15px; font-weight:700; color:#fff; } .dps-chat-status{ display:flex; align-items:center; gap:6px; font-size:13px; color:#9AA0AE; margin-top:2px; } .dps-chat-stip{ width:9px; height:9px; border-radius:50%; background:#22C55E; flex:none; animation:dpsChatPols 2.4s ease-out infinite; } .dps-chat-stip.dps-chat-stip-uit{ background:#9AA0AE; animation:none; } @keyframes dpsChatPols{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } } @media (prefers-reduced-motion:reduce){ .dps-chat{ transition:none; } .dps-chat-stip{ animation:none; } } /* niet in de weg zitten bij het mobiele menu, de cookiebanner of bij printen */ body.menu-open .dps-chat, body.bot-open .dps-chat{ display:none !important; } @media print{ .dps-chat{ display:none !important; } } @media (max-width:640px){ .dps-chat{ right:14px; bottom:14px; padding:7px 18px 7px 7px; gap:10px; } .dps-chat-av{ width:44px; height:44px; } .dps-chat-tekst b{ font-size:14px; } .dps-chat-status{ font-size:12px; } } /* zolang de cookiebanner nog open staat, blijft de chatknop weg: hij valt er anders achter (de banner staat er terecht bovenop). Het bannerscript verwijdert #dpscb na de keuze, dus daarna verschijnt de knop vanzelf. */ body:has(#dpscb) .dps-chat{ display:none !important; } /* Trustpilot-waardering boven de Google-waardering in de herofoto (verzoek 28-08). Zelfde stijl: los in de foto, geen kaartje. */ .v2-hero-scores{ position:absolute; left:24px; bottom:24px; z-index:4; display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none; } .hp-hero-slides .v2-hero-scores .v2-google-badge{ position:static !important; left:auto !important; bottom:auto !important; } .v2-tp-badge{ display:inline-flex; align-items:center; gap:10px; } .v2-tp-logo svg{ width:22px; height:22px; display:block; border-radius:3px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); } .v2-tp-sterren svg{ width:16px; height:16px; display:block; border-radius:2px; } @media (max-width: 900px){ .v2-hero-scores{ left:14px; bottom:14px; gap:6px; } .v2-tp-badge{ gap:8px; } .v2-tp-logo svg{ width:18px; height:18px; } .v2-tp-sterren svg{ width:13px; height:13px; } } /* Waarderingen ook in de footer, precies tussen de vestigingen en "Volg ons" (verzoek 28-08). Drie kolommen: links de vestigingen, rechts de socials, het middenblok exact in het midden van de footer. */ .v2-ft > .v2-ft-onder{ display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:start !important; gap:clamp(20px, 3vw, 44px) !important; } .v2-ft-onder > .v2-ft-gegevens{ justify-self:start; } .v2-ft-onder > .v2-ft-scores{ justify-self:center; } .v2-ft-onder > .v2-ft-volg{ justify-self:end; } .v2-ft-scores{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; position:static; } .v2-ft-scores .v2-grb-tekst{ text-shadow:none; } .v2-ft-scores .v2-grb-sterren svg, .v2-ft-scores .v2-tp-logo svg{ filter:none; } @media (max-width:900px){ .v2-ft > .v2-ft-onder{ grid-template-columns:1fr !important; justify-items:start !important; } .v2-ft-onder > .v2-ft-scores{ justify-self:start; } .v2-ft-onder > .v2-ft-volg{ justify-self:start; } } /* de google-regel had zijn flex-opmaak alleen binnen de hero; in de footer viel het logo daardoor op een eigen regel */ .v2-ft-scores .v2-google-badge{ display:inline-flex !important; align-items:center !important; gap:10px !important; position:static !important; background:none !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Trustpilot getoond met losse groene sterren in plaats van de blokjes (verzoek 28-08): geen vierkantjes meer, dus ook geen afgeronde hoeken. */ .v2-tp-logo svg, .v2-tp-sterren svg{ border-radius:0 !important; } /* De Trustpilot-ster vult zijn vak minder dan het Google-logo (de stervorm heeft ruimte rondom), waardoor hij optisch kleiner oogde. Vak vergroot tot de geverfde ster even groot is als de G: gemeten 18x16,75 tegenover 21,5x22. */ .v2-tp-logo svg{ width:28px !important; height:28px !important; } @media (max-width: 900px){ .v2-tp-logo svg{ width:23px !important; height:23px !important; } } /* De ster-viewBox sluit nu strak om de vorm (2 2 20 19), zodat de ster het vak vult en zijn linkerrand exact op die van het Google-logo staat. Maat iets boven de G, zodat hij optisch even zwaar oogt. */ .v2-tp-logo svg{ width:24px !important; height:22.8px !important; } @media (max-width: 900px){ .v2-tp-logo svg{ width:20px !important; height:19px !important; } } /* icoon 2px breder dan de G, maar de tekst moet wel op dezelfde x beginnen */ .v2-tp-logo svg{ margin-right:-2px; } /* en de sterrenrijen recht onder elkaar: het tekstdeel even breed maken */ .v2-hero-scores .v2-grb-tekst, .v2-ft-scores .v2-grb-tekst{ min-width:172px; } @media (max-width: 900px){ .v2-tp-logo svg{ margin-right:-1px; } .v2-hero-scores .v2-grb-tekst, .v2-ft-scores .v2-grb-tekst{ min-width:142px; } } /* "Volg ons" onderaan de footer in wit (verzoek 28-08); de kolomkoppen erboven blijven grijs, zoals in de template. */ .v2-ft-volg .v2-ft-titel{ color:#fff !important; } /* de cijfers 4.6 en 5.0 recht onder elkaar: het label krijgt de breedte van het langste ("Trustpilot-waardering"), zodat het cijfer altijd op dezelfde plek begint. */ .v2-hero-scores .v2-grb-label, .v2-ft-scores .v2-grb-label{ display:inline-block; min-width:148px; } @media (max-width: 900px){ .v2-hero-scores .v2-grb-label, .v2-ft-scores .v2-grb-label{ min-width:123px; } } /* cijfers even breed opmaken, dan lijnen ook de sterrenrijen op smalle schermen exact uit (4.6 is van zichzelf iets smaller dan 5.0) */ .v2-hero-scores .v2-grb-tekst b, .v2-ft-scores .v2-grb-tekst b{ display:inline-block; min-width:30px; font-variant-numeric:tabular-nums; } @media (max-width: 900px){ .v2-hero-scores .v2-grb-tekst b, .v2-ft-scores .v2-grb-tekst b{ min-width:26px; } } /* beide regels exact dezelfde tussenruimtes, anders schuiven cijfer en sterren toch nog een paar pixels uit elkaar */ .v2-hero-scores .v2-tp-badge, .v2-hero-scores .v2-google-badge, .v2-ft-scores .v2-tp-badge, .v2-ft-scores .v2-google-badge{ gap:10px !important; } @media (max-width: 900px){ .v2-hero-scores .v2-tp-badge, .v2-hero-scores .v2-google-badge, .v2-ft-scores .v2-tp-badge, .v2-ft-scores .v2-google-badge{ gap:8px !important; } .v2-tp-logo svg{ margin-right:-2px !important; } } /* wat meer lucht tussen het woord "waardering" en het cijfer (verzoek 28-08); beide regels schuiven even ver op, dus ze blijven exact uitgelijnd */ .v2-hero-scores .v2-grb-label, .v2-ft-scores .v2-grb-label{ min-width:162px; } @media (max-width: 900px){ .v2-hero-scores .v2-grb-label, .v2-ft-scores .v2-grb-label{ min-width:136px; } } /* =========================================================================== REVIEWSECTIE (keuze Dikkie 28-08: variant 4 in paneelvorm) Donker blok met de DPS-hoek op een lichte achtergrond, links de tekst met de score-pillen, rechts twee kolommen die tegen elkaar in lopen. =========================================================================== */ .dps-rev{ background:#fff; padding:clamp(48px, 6vw, 96px) clamp(16px, 3vw, 34px); font-family:Arial, Helvetica, sans-serif; } .dps-rev-paneel{ max-width:1305px; margin:0 auto; background:#0B0B0F; color:#fff; border-radius:0 clamp(22px, 2.6vw, 38px) 0 clamp(22px, 2.6vw, 38px); padding:clamp(28px, 3.4vw, 52px); display:grid; grid-template-columns:minmax(260px, 420px) 1fr; gap:clamp(26px, 3.2vw, 48px); align-items:center; overflow:hidden; } .dps-rev-eyebrow{ display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:6px 15px; margin-bottom:18px; } .dps-rev-kop{ margin:0 0 14px; color:#fff; line-height:1.12; font-weight:700; font-size:clamp(26px, 3.1vw, 44px); } .dps-rev-tekst p{ margin:0 0 22px; font-size:15px; line-height:1.65; color:#B9BCC6; max-width:46ch; } .dps-rev-badges{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .dps-rev-badge{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:0 14px 0 14px; padding:10px 16px; } .dps-rev-badge b{ font-weight:700; } .dps-rev-badge em{ font-style:normal; font-weight:700; } .dps-rev-badge .dps-rev-g{ width:20px; height:20px; } .dps-rev-badge .dps-rev-tp{ width:20px; height:19px; } .dps-rev-sterren{ display:inline-flex; gap:2px; } .dps-rev-sterren svg{ width:15px; height:15px; display:block; } .dps-rev-muur{ display:grid; grid-template-columns:1fr 1fr; gap:18px; height:clamp(420px, 46vw, 540px); overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); } .dps-rev-kolom{ overflow:hidden; } .dps-rev-spoor{ display:flex; flex-direction:column; gap:18px; will-change:transform; } .dps-rev-kaart{ position:relative; background:#12121A; color:#fff; border-radius:0 20px 0 20px; padding:20px 20px 18px; } .dps-rev-kaart::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:linear-gradient(135deg,#C10FFF 0%,#5A16FF 52%,#009FFF 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .dps-rev-kaart p{ margin:12px 0 16px; font-size:14.5px; line-height:1.6; color:#fff; } .dps-rev-kaart footer{ display:flex; align-items:center; gap:10px; } .dps-rev-kaart footer img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; } .dps-rev-kaart footer b{ display:block; font-size:14px; } .dps-rev-kaart footer i{ font-style:normal; font-size:12.5px; color:#9AA0AE; } @media (max-width:1000px){ .dps-rev-paneel{ grid-template-columns:1fr; } .dps-rev-muur{ height:420px; } } @media (max-width:640px){ .dps-rev-muur{ grid-template-columns:1fr; height:380px; } .dps-rev-kaart p{ font-size:14px; } } @media (prefers-reduced-motion:reduce){ .dps-rev-muur{ height:auto; -webkit-mask-image:none; mask-image:none; } .dps-rev-spoor{ transform:none !important; } } /* de sitebrede kopkleur wint van de sectie; kop hier expliciet wit houden */ .dps-rev .dps-rev-kop, .dps-rev h2.dps-rev-kop{ color:#fff !important; } .dps-rev .dps-rev-tekst p{ color:#B9BCC6 !important; } @media (max-width:640px){ /* op de telefoon één kolom; twee kolommen onder elkaar in een vast venster laat de tweede half wegvallen */ .dps-rev-muur > .dps-rev-kolom:nth-child(2){ display:none; } } /* scores in de reviewsectie: zelfde regels als hero en footer, maar hier statisch bovenaan het tekstblok (niet absoluut gepositioneerd) */ .dps-rev-scores.v2-hero-scores{ position:static !important; left:auto !important; bottom:auto !important; margin:0 0 22px !important; } .dps-rev-scores .v2-grb-tekst{ text-shadow:none; color:#fff; } .dps-rev-scores .v2-grb-sterren svg, .dps-rev-scores .v2-tp-logo svg{ filter:none; } .dps-rev-scores .v2-google-badge{ display:inline-flex !important; align-items:center !important; gap:10px !important; position:static !important; background:none !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Grote sectiekop boven het reviewpaneel, in de maat van de oude "Reviews"-kop (verzoek 28-08: nu "Testimonials"). */ .dps-rev-titel{ max-width:1305px; margin:0 auto clamp(18px, 2.2vw, 34px); font-weight:700; color:#0B0B0F; line-height:1; font-size:min(calc(0.75rem + 168px), 135px); letter-spacing:-.02em; } @media (max-width:900px){ .dps-rev-titel{ font-size:46.125px; line-height:46.125px; } } /* de scores staan weer onder de tekst */ .dps-rev-scores.v2-hero-scores{ margin:22px 0 0 !important; } .dps-rev-tekst p{ margin-bottom:0 !important; } .dps-rev-kop{ margin:0 0 14px; color:#fff !important; line-height:1.12; font-weight:700; font-size:clamp(26px, 3.1vw, 44px); } /* Reviewsectie, ronde 2 (28-08): - "Testimonials" met dezelfde letterafstand als "Onze kennisbank" (die staat op -3.75px; zonder die correctie oogt de kop veel dikker) en gecentreerd boven het zwarte blok - tekstblok bovenin, scores in de linkeronderhoek van het paneel */ .dps-rev-titel{ letter-spacing:-3.75px !important; text-align:center !important; } @media (max-width:900px){ .dps-rev-titel{ letter-spacing:-1.3px !important; } } .dps-rev-paneel{ position:relative; align-items:start !important; } .dps-rev-tekst{ display:flex; flex-direction:column; padding-bottom:clamp(58px, 6vw, 84px); /* ruimte voor de scores in de hoek */ } .dps-rev-tekst p{ margin:0 0 14px !important; } .dps-rev-tekst p:last-of-type{ margin-bottom:0 !important; } .dps-rev-scores.v2-hero-scores{ position:absolute !important; left:clamp(28px, 3.4vw, 52px) !important; bottom:clamp(24px, 3vw, 44px) !important; margin:0 !important; } @media (max-width:1000px){ .dps-rev-scores.v2-hero-scores{ position:static !important; margin:22px 0 0 !important; } .dps-rev-tekst{ padding-bottom:0; } } /* Ruggengraat (variant 5, deeltjes) als achtergrondlaag door het midden van het reviewpaneel. Tekst en reviewkolommen liggen erboven. */ .dps-rev-paneel{ isolation:isolate; } .dps-rev-graat{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:112%; width:auto; max-width:none; opacity:.30; z-index:0; pointer-events:none; } .dps-rev-tekst, .dps-rev-muur{ position:relative; z-index:1; } @media (max-width:1000px){ .dps-rev-graat{ height:auto; width:150%; opacity:.22; } } /* Reviewsectie, correctie 28-08 (avond): 1. de scores lagen over de laatste tekstregel zodra de kop drie regels werd; ze staan nu onderaan in de kolomstroom in plaats van absoluut 2. de ruggengraat liep achter de reviewkaarten en was daardoor onzichtbaar; hij staat nu door het midden van de tekstkolom */ .dps-rev-paneel{ align-items:stretch !important; } .dps-rev-tekst{ height:100%; padding-bottom:0 !important; justify-content:flex-start; } .dps-rev-scores.v2-hero-scores{ position:static !important; margin:auto 0 0 !important; padding-top:26px; } .dps-rev-graat{ left:auto !important; right:auto !important; top:50% !important; transform:translateY(-50%) !important; height:104% !important; opacity:.26 !important; } /* de graat volgt de tekstkolom, dus hij loopt door het midden van de tekst */ .dps-rev-tekst{ position:relative; } @media (min-width:1001px){ .dps-rev-graat{ margin-left:0; } } /* de graat zit nu in de tekstkolom: horizontaal gecentreerd in die kolom */ .dps-rev-tekst > .dps-rev-graat{ position:absolute; left:50% !important; transform:translate(-50%,-50%) !important; z-index:-1; } .dps-rev-tekst{ isolation:isolate; } /* de deeltjes-graat is fijn getekend; iets meer aanwezig zodat hij echt zichtbaar door het midden loopt zonder de tekst te storen */ .dps-rev-graat{ opacity:.42 !important; height:108% !important; } @media (max-width:1000px){ .dps-rev-graat{ opacity:.3 !important; } } /* variant 1 is massiever dan de deeltjesversie, dus terug in sterkte zodat de tekst er goed doorheen blijft komen */ .dps-rev-graat{ opacity:.24 !important; } @media (max-width:1000px){ .dps-rev-graat{ opacity:.18 !important; } } /* "Online Ruggengraat" hoort op één regel te passen; de kolom iets ruimer en de kop een slag kleiner, dan breekt hij op de bedoelde plek */ .dps-rev-paneel{ grid-template-columns:minmax(280px, 470px) 1fr !important; } .dps-rev-kop{ font-size:clamp(25px, 2.85vw, 41px) !important; } /* Reviewkaarten met bron (28-08): links Trustpilot, rechts Google. Elke kaart heeft het merklogo, vijf sterren in de merkkleur en een lees-meer-knop, zodat lange en korte reviews dezelfde verhouding houden. */ .dps-rev-kop-kaart{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .dps-rev-bron{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#fff; } .dps-rev-bron b{ font-weight:700; } .dps-rev-bron svg{ width:17px; height:17px; display:block; } .dps-rev-bron-g svg{ width:16px; height:16px; } .dps-rev-kaart .dps-rev-sterren svg{ width:14px; height:14px; } .dps-rev-titel-kaart{ display:block; font-size:14.5px; margin-bottom:6px; color:#fff; } .dps-rev-quote{ margin:0 0 10px !important; font-size:14px; line-height:1.6; color:#C9CCD6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; } .dps-rev-kaart.is-open .dps-rev-quote{ -webkit-line-clamp:unset; overflow:visible; } .dps-rev-meer{ appearance:none; background:none; border:0; padding:0; margin:0 0 12px; font:600 13px Arial, Helvetica, sans-serif; color:#8FB6FF; cursor:pointer; } .dps-rev-meer:hover{ text-decoration:underline; } .dps-rev-kaart footer b{ font-size:13.5px; } .dps-rev-kaart footer{ border-top:1px solid rgba(255,255,255,.10); padding-top:10px; } /* Pakkende regel onder de artikeltitel in de kennisbank (verzoek 28-08): kort zetje richting de leesknop. */ .v2-res-kaart .v2-res-pak{ margin:10px 0 18px; font-size:15px; line-height:1.55; color:#6B7280; max-width:52ch; } /* Kennisbank, ronde 2 (28-08): - cijferbeeld in de artikelen, in de DPS-hoek - paarse contour om de laatste letter van de kop, die over de foto valt */ .v2-art-figuur{ margin:26px 0; } .v2-art-figuur img{ width:100%; height:auto; display:block; border-radius:0 22px 0 22px; } .v2-res-kop .v2-res-k{ -webkit-text-stroke:3px #C10FFF; paint-order:stroke fill; } @media (max-width:1023px){ /* gestapeld valt de kop niet meer over de foto */ .v2-res-kop .v2-res-k{ -webkit-text-stroke:0 !important; } } /* correctie 28-08: de streep naast "Onze" blijft gewoon op zijn plek, en de contour om de laatste letter van de kop wordt wit in plaats van paars */ .v2-res-kop .v2-res-k{ -webkit-text-stroke:3px #fff !important; } /* Vervaging naar wit op de kennisbankkaarten iets teruggeschroefd (verzoek 28-08): het verloop begint later en is minder dicht, zodat meer van de foto zichtbaar blijft. Was: transparant tot 35%, dan vol wit. */ .v2-res-beeld::after{ background:linear-gradient(rgba(255,255,255,0) 55%, rgba(255,255,255,.85) 88%, #fff 100%) !important; } /* proef 28-08: vervaging op de kennisbankkaarten helemaal uit */ .v2-res-beeld::after{ background:none !important; } /* Nu de vervaging uit staat is de onderrand van het beeld zichtbaar; die krijgt de vaste DPS-hoek: rond rechtsboven EN linksonder (28-08). */ .v2-res-kaart .v2-res-beeld{ border-radius:0 clamp(22px, 2.6vw, 38px) 0 clamp(22px, 2.6vw, 38px) !important; } /* Kop-correcties 28-08 (avond): - de contour om de laatste letter wordt paars - het woord "kennisbank" schuift iets naar rechts zodat de fotorand tussen de n en de k valt; de maat komt uit v2-resources.js */ .v2-res-kop .v2-res-k{ -webkit-text-stroke:3px #C10FFF !important; } .v2-res-kop .v2-res-woord{ display:inline-block; } @media (max-width:1023px){ .v2-res-kop .v2-res-woord{ transform:none !important; } } /* correctie 28-08 (laat): de fotorand raakte de n. De laatste letter krijgt extra afstand van de n, zodat er echt wit tussen de n en de foto zit, en de contour wordt blauw. */ .v2-res-kop .v2-res-k{ -webkit-text-stroke:3px #009FFF !important; margin-left:0.14em; } /* het verschoven woord op een eigen laag, zodat het niet mee-flikkert met de repaints tijdens het scrollen */ .v2-res-kop .v2-res-woord{ will-change:transform; backface-visibility:hidden; } /* de contour om de k in dezelfde blauwtint als de lichtstraal rechts in de foto (gesampled: kern #227EF8) */ .v2-res-kop .v2-res-k{ -webkit-text-stroke:3px #227EF8 !important; } /* ===================================================================== SLEEPCURSOR EN VOORTGANGSDOT ALS WERELDBOL (verzoek 31-08) De cirkel van de sleepcursor boven de sliders en de dot op de voortgangsbalk tonen dezelfde wereldbol als in de footer-CTA, maar dan stilstaand. De pijltjes links en rechts van de cursor blijven staan. ===================================================================== */ .v2-cursor{ border:0 !important; background-color:#030524; background-image:url(/assets/img/wereldbol-voor.webp), url(/assets/img/wereldbol-achter.webp); background-size:200% 100%, 200% 100%; background-position:30% 0, 80% 0; background-repeat:repeat-x; box-shadow:0 0 0 2px rgba(159,30,236,.55), 0 0 14px 3px rgba(225,73,250,.4), inset 0 0 18px rgba(9,17,111,.5); } .v2-cursor::after{ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 33% 27%, rgba(242,247,255,.10), transparent 42%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,2,29,.30) 82%, rgba(97,33,223,.35) 96%, rgba(159,30,236,.5) 100%); } .v2-car-dot{ border:0; background-color:#030524; background-image:url(/assets/img/wereldbol-voor.webp), url(/assets/img/wereldbol-achter.webp); background-size:200% 100%, 200% 100%; background-position:30% 0, 80% 0; background-repeat:repeat-x; box-shadow:0 0 0 2px rgba(159,30,236,.55), 0 0 10px 2px rgba(225,73,250,.35), inset 0 0 12px rgba(9,17,111,.5); } .v2-car-dot::after{ left:0; top:0; width:100%; height:100%; transform:none; background: radial-gradient(circle at 33% 27%, rgba(242,247,255,.10), transparent 42%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,2,29,.30) 82%, rgba(97,33,223,.35) 96%, rgba(159,30,236,.5) 100%); } /* Het tweede schuifcomponent (.v2-sl-bar/.v2-sl-dot, op de werkwijze-, tips- en dienstenpagina's) krijgt exact dezelfde wereldbol-dot als de carousel, zodat het element overal op de site identiek is (verzoek 31-08). */ .v2-sl-dot{ border:0; background-color:#030524; background-image:url(/assets/img/wereldbol-voor.webp), url(/assets/img/wereldbol-achter.webp); background-size:200% 100%, 200% 100%; background-position:30% 0, 80% 0; background-repeat:repeat-x; box-shadow:0 0 0 2px rgba(159,30,236,.55), 0 0 10px 2px rgba(225,73,250,.35), inset 0 0 12px rgba(9,17,111,.5); } .v2-sl-dot::after{ left:0; top:0; width:100%; height:100%; margin:0; transform:none; background: radial-gradient(circle at 33% 27%, rgba(242,247,255,.10), transparent 42%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,2,29,.30) 82%, rgba(97,33,223,.35) 96%, rgba(159,30,236,.5) 100%); } /* ===================================================================== CASEKAART VARIANT 3 (keuze 31-08): titel, categorie en plaats in de kaart zelf. Categorie als gradient-pill linksboven, naam en plaats rechtsonder op een subtiele donkere waas (rechts, zodat het nooit botst met de ingebakken regel linksonder in de mockup-tegels). Het losse tekstblok naast de foto is uit de markup verwijderd, dus de kaarten staan dichter op elkaar. ===================================================================== */ .v2-car{ gap:clamp(20px, 3vw, 44px); } .v2-cs-img{ position:relative; } .v2-cs-img::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:36%; background:linear-gradient(to top, rgba(0,2,29,.82), rgba(0,2,29,.32) 60%, transparent); pointer-events:none; } .v2-cs-pill{ position:absolute; left:20px; top:20px; z-index:2; padding:7px 16px; border-radius:999px; background:linear-gradient(90deg,#6121DF,#911CEA); color:#fff; font-size:13px; font-weight:700; } .v2-cs-onder{ position:absolute; right:24px; bottom:16px; z-index:2; display:flex; flex-direction:column; align-items:flex-end; text-align:right; color:#fff; } .v2-cs-onder .v2-cs-title{ font-size:26px; font-weight:800; color:#fff; margin:0; line-height:1.15; text-shadow:0 2px 12px rgba(0,2,29,.55); } .v2-cs-onder .v2-cs-loc{ display:block; font-size:14px; color:rgba(255,255,255,.8); margin-top:3px; } @media (max-width:1023px){ .v2-cs-pill{ left:14px; top:14px; font-size:12px; padding:6px 13px; } .v2-cs-onder{ right:16px; bottom:12px; } .v2-cs-onder .v2-cs-title{ font-size:19px; } .v2-cs-onder .v2-cs-loc{ font-size:12.5px; } } /* De regel `.v2-cs-title{color:rgb(0,0,0) !important}` uit de basissjabloon won van de witte overlay-titel; hogere specificiteit plus !important. */ .v2-cs-onder .v2-cs-title{ color:#fff !important; } /* Tekstregel linksonder op de FiberNED-casekaart (verzoek 31-08): de regel die in de oude mockup was ingebakken staat nu als HTML-overlay op de nieuwe visual, zelfde plek en uitstraling. */ .v2-cs-caption{ position:absolute; left:24px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:2px; color:#fff; text-align:left; max-width:72%; } .v2-cs-caption b{ font-size:15.5px; font-weight:800; line-height:1.25; } .v2-cs-caption > span{ font-size:11.5px; color:rgba(255,255,255,.65); line-height:1.35; } @media (max-width:1023px){ .v2-cs-caption{ left:16px; bottom:12px; } .v2-cs-caption b{ font-size:12px; } .v2-cs-caption > span{ font-size:9.5px; } } /* De FiberNED-galerijdia is dezelfde kaart als op de homepage: dezelfde categorie-pill, tekstregel linksonder en naam met plaats rechtsonder (verzoek 31-08). Alleen deze dia, de rest van de galerij blijft kaal. */ .v2-pd-dia--kaart{ position:relative; } .v2-pd-dia--kaart::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:36%; background:linear-gradient(to top, rgba(0,2,29,.82), rgba(0,2,29,.32) 60%, transparent); pointer-events:none; z-index:1; } .v2-pd-dia--kaart .v2-cs-pill, .v2-pd-dia--kaart .v2-cs-caption, .v2-pd-dia--kaart .v2-cs-onder{ z-index:2; } .v2-pd-dia--kaart .v2-cs-caption b{ font-size:19px; } .v2-pd-dia--kaart .v2-cs-caption > span{ font-size:14px; } .v2-pd-dia--kaart .v2-cs-onder .v2-cs-title{ font-size:32px; } .v2-pd-dia--kaart .v2-cs-onder .v2-cs-loc{ font-size:16px; } @media (max-width:1023px){ .v2-pd-dia--kaart .v2-cs-caption b{ font-size:13px; } .v2-pd-dia--kaart .v2-cs-caption > span{ font-size:10px; } .v2-pd-dia--kaart .v2-cs-onder .v2-cs-title{ font-size:20px; } .v2-pd-dia--kaart .v2-cs-onder .v2-cs-loc{ font-size:12.5px; } } /* ===================================================================== DE PATROONSTROOK NAAST DE WERELDBOL (keuze 31-08, variant 3) De traanplaat-strook stond op x = 50% + 387px, precies op de helft van de bol, en liep van boven tot onder door de hero. Exact diezelfde strook, nu in nachtblauw met de paarse gloed in plaats van de textuur. Verder is er niets aangepast: het lichte vlak, de teksten en het onderste patroon blijven zoals ze waren. Bovenin loopt de kleur uit, anders zou het zwarte menu erop wegvallen. ===================================================================== */ .v2-pd2 .v2-pd-hero::after{ background-image:none !important; background:radial-gradient(120% 55% at 0% 42%, rgba(145,28,234,.5), rgba(10,4,48,0) 70%), #0A0430 !important; opacity:1 !important; } /* De strook loopt door tot bovenaan de pagina. Alleen "Neem contact op" en de taalknop vallen daarop; die worden wit, anders zijn ze onleesbaar. */ @media (min-width:1024px){ .v2-pd2 ~ * .nav-bel-tekst, .v2-pd2 .nav-bel-tekst{ color:#fff; } body:has(.v2-pd2) .nav:not(.v2-sticky) .nav-bel-tekst{ color:#fff !important; } body:has(.v2-pd2) .nav:not(.v2-sticky) .nav-lang-btn{ color:#fff !important; background:rgba(255,255,255,.18) !important; } } /* Een spoor dat niet kan schuiven (bijvoorbeeld een galerij met een beeld) krijgt geen sleep-muisaanwijzer meer; het JS zet .v2-sleep alleen als er echt iets te schuiven valt. */ .v2-sl-spoor:not(.v2-sleep), .v2-ms-os-spoor:not(.v2-sleep), .v2-ms-proj-spoor:not(.v2-sleep), .v2-kbh-spoor:not(.v2-sleep){ cursor:default; } /* ===================================================================== HET PATROONVLAK ONDER DE CASE (keuze 31-08, variant 2) Het vlak met de traanplaat-textuur (onderste 65% van .v2-pd2-boven) krijgt hetzelfde nachtblauw als de strook naast de wereldbol. De teksten die op dat vlak staan gaan mee naar wit; dat mag alleen op desktop, want onder 1024px is het vlak verborgen en staat diezelfde tekst op wit. De casefoto krijgt een blauwe contour met gloed, zodat hij loskomt van het vlak. Plaats, hoogte en ronde hoek van het vlak blijven exact zoals ze waren. ===================================================================== */ .v2-pd2-boven::after{ background-image:none !important; background:radial-gradient(70% 42% at 22% 0%, rgba(145,28,234,.42), rgba(10,4,48,0) 68%), #0A0430 !important; opacity:1 !important; /* Het vlak eindigt vlak onder de projecttekst in plaats van door te lopen tot de onderkant van het blok, waar het over de casefoto heen viel. De afstand tot die onderkant is op elke casepagina gelijk (gemeten 31-08). */ top:35% !important; bottom:332px !important; height:auto !important; } /* Het lichte vlak liep door tot onder het donkere vlak en gaf daar een witte balk met een ronde hoek. Het eindigt nu op dezelfde hoogte. */ .v2-pd2-boven::before{ bottom:332px !important; } @media (min-width:1024px){ .v2-pd2-boven .v2-pd2-label{ color:rgba(255,255,255,.62) !important; } .v2-pd2-boven .v2-pd2-getal, .v2-pd2-boven .v2-pd2-kaart, .v2-pd2-boven .v2-pd2-info, .v2-pd2-boven .v2-pd2-info p{ color:#fff !important; } .v2-pd2-boven .v2-pd2-kaart, .v2-pd2-boven .v2-pd2-info{ border-color:rgba(255,255,255,.18) !important; } } /* Blauwe contour met gloed om de casefoto, op ELKE casepagina (vaste regel 02-09). De ring staat INSET, want de galerij (.v2-sl-spoor, overflow auto) knipte een buitenrand aan de boven- en onderkant weg; alleen de zijkanten bleven over. Extra ruimte boven en onder zodat de gloed eromheen past. */ .v2-pd2 .v2-pd-gal .v2-pd-dia{ position:relative; box-shadow:0 0 26px 2px rgba(33,157,242,.42); } .v2-pd2 .v2-pd-gal .v2-pd-dia::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border:2px solid #219DF2; border-radius:inherit; } .v2-pd2 .v2-pd-gal .v2-sl-spoor{ padding-top:18px; padding-bottom:18px; } /* Mobiel: daar is het donkere vlak verborgen, dus krijgt het resultaatblok zelf dezelfde nachtblauwe kaart met witte tekst. */ @media (max-width:1023px){ .v2-pd2-kaart{ background:radial-gradient(84% 62% at 18% 0%, rgba(145,28,234,.42), rgba(10,4,48,0) 70%), #0A0430; padding:26px 22px 24px; border-radius:0 22px 0 22px; } .v2-pd2-kaart .v2-pd2-label{ color:rgba(255,255,255,.62) !important; } .v2-pd2-kaart .v2-pd2-getal, .v2-pd2-kaart .v2-pd2-info, .v2-pd2-kaart .v2-pd2-info p{ color:#fff !important; } .v2-pd2-kaart .v2-pd2-info{ border-color:rgba(255,255,255,.18) !important; } } /* De regel onder de casetitel is geen plaatsnaam meer maar een pakkende zin over het project (vaste regel 31-08). Groter en met meer lucht dan de oude plaatsnaam, maar hij blijft duidelijk onder de titel hangen. */ .v2-pd2-pitch{ display:block; max-width:32ch; font-size:clamp(18px, 1.53vw, 23px); line-height:1.4; font-weight:600; color:#1B1B2A; margin-top:6px; } /* Het streepje hangt aan de titel en loopt precies tot het einde van de bedrijfsnaam. Daarvoor krijgt de h1 een doos die om de tekst sluit (width:fit-content), zodat 100% breedte gelijk is aan de naam zelf. */ .v2-pd2 .v2-pd2-tekst h1{ width:fit-content; max-width:100%; } .v2-pd2 .v2-pd2-tekst h1::after{ content:""; display:block; width:var(--titelstreep, 100%); height:3px; border-radius:3px; margin-top:18px; background:linear-gradient(90deg,#6121DF,#911CEA); } @media (max-width:1023px){ .v2-pd2-pitch{ font-size:clamp(16px, 4.6vw, 19px); max-width:none; } .v2-pd2-pitch::before{ margin-bottom:12px; } /* de bol staat op mobiel direct onder de tekst; wat meer lucht ertussen */ .v2-pd2-hero-grid{ row-gap:46px; } } /* Tussenkoppen in de projectomschrijving (SEO-tekst, vaste regel 31-08). */ .v2-pd2-links h3{ font-size:clamp(17px, 1.32vw, 20px); font-weight:700; line-height:1.3; margin:30px 0 10px; color:#00021D; } .v2-pd2-links h3:first-of-type{ margin-top:26px; } /* ===================================================================== BLOGSLIDER OVER AI-AUTOMATISERING op de casepagina's (keuze 31-08, variant 3). Vervangt "Ingezette diensten". Liggende kaarten: foto links in onze vorm, tekst rechts, zodat er een echte samenvatting bij past. De wereldbol als muisaanwijzer, de wereldbol op de balk en de teller blijven werken omdat we dezelfde spoor- en balkklassen gebruiken. ===================================================================== */ .v2-ms-os:has(.dps-bl-wrap){ position:relative; background:radial-gradient(58% 46% at 10% 0%, rgba(145,28,234,.34), rgba(10,4,48,0) 66%), #0A0430; padding:clamp(48px, 5vw, 86px) 0 clamp(38px, 4vw, 64px); } /* De grote casefoto blijft staan zoals hij was: hij steekt boven de sectie uit en loopt door de donkere strook heen. Alleen vervaagt hij nu naar het nachtblauw van het paneel in plaats van naar lichtgrijs, en begint de inhoud eronder. */ .v2-ms-os:has(.dps-bl-wrap) .v2-pd2-os-foto::after{ top:62% !important; height:38% !important; /* vervaging later laten beginnen, anders is de foto vrijwel weg */ background:linear-gradient(rgba(10,4,48,0), #0A0430) !important; } .v2-ms-os:has(.dps-bl-wrap){ padding-top:calc(min(48.19vw, 694px) + max(-255px, -17.71vw) + clamp(28px, 3.4vw, 54px)); } .dps-bl-kop{ max-width:64ch; margin-bottom:clamp(26px, 3vw, 42px); } .v2-ms-os .dps-bl-kop h2, .v2-pd2 .v2-ms-os .dps-bl-kop h2{ color:#fff !important; /* .v2-ms-os h2 stond op zwart */ font-size:clamp(26px, 2.9vw, 40px) !important; line-height:1.15; margin:0 0 12px !important; text-align:left !important; } .dps-bl-kop p{ color:rgba(255,255,255,.72); font-size:clamp(15px,1.15vw,17.5px); line-height:1.6; margin:0; } .dps-bl-spoor{ display:flex; gap:clamp(20px, 2vw, 30px); } .dps-bl-kaart{ flex:0 0 auto; width:min(560px, 84vw); display:grid; grid-template-columns:clamp(150px, 13vw, 190px) 1fr; gap:clamp(16px, 1.5vw, 22px); align-items:start; } .dps-bl-beeld{ display:block; border-radius:0 22px 0 22px; overflow:hidden; } .dps-bl-beeld img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .dps-bl-cat{ display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#C79BFF; margin-bottom:7px; } .dps-bl-tekst h3{ font-size:clamp(18px, 1.5vw, 22px); line-height:1.25; margin:0; } .dps-bl-tekst h3 a{ color:#fff; text-decoration:none; } .dps-bl-tekst h3 a:hover{ text-decoration:underline; } .dps-bl-tekst > p{ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.55; margin:9px 0 0; } .dps-bl-meta{ display:block; margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.45); } .v2-ms-os:has(.dps-bl-wrap) .v2-car-bar::before{ background:rgba(255,255,255,.22); } .v2-ms-os:has(.dps-bl-wrap) .v2-ms-os-teller{ color:rgba(255,255,255,.7); } .v2-ms-os:has(.dps-bl-wrap) .v2-ms-os-pijl{ color:#fff; } @media (max-width:1023px){ .dps-bl-kaart{ width:86vw; grid-template-columns:112px 1fr; gap:14px; } .dps-bl-tekst h3{ font-size:17px; } .dps-bl-tekst > p{ font-size:13.5px; } .dps-bl-punten li{ font-size:12.5px; } } /* ===================================================================== DE FIBERNED-VISUAL LEEFT (verzoek 31-08) Over de foto ligt een laag die het beeld tot leven brengt: een lichtpuls loopt van links naar rechts over de lopende band (een tweede kopie van de foto die alleen zichtbaar is binnen een smalle band, in screen-modus, dus de lichtjes lichten sequentieel op), en aan het einde vliegen er vonkjes uit beeld. Bij prefers-reduced-motion staat alles stil. ===================================================================== */ .dps-leeft{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; border-radius:inherit; } .dps-leeft-puls{ position:absolute; inset:0; /* Het beeld komt van de pagina zelf, via --dps-band op .dps-leeft (zie werkmap/zet-bandlaag.py). Stond het hier hardcoded, dan lichtte de FiberNED-band op over elke case die zijn eigen regel miste. */ background:var(--dps-band, url(/assets/img/work/cases/fiberned-band.webp)) center/cover no-repeat; mix-blend-mode:screen; opacity:1; filter:brightness(1.9) saturate(1.25); /* de band licht echt op als de puls passeert */ -webkit-mask-image:linear-gradient(102deg, transparent 42%, #000 48.5%, #000 51.5%, transparent 58%); mask-image:linear-gradient(102deg, transparent 42%, #000 48.5%, #000 51.5%, transparent 58%); -webkit-mask-size:240% 100%; mask-size:240% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:dpsBandPuls 4.6s linear infinite; } @keyframes dpsBandPuls{ from{ -webkit-mask-position:-140% 0; mask-position:-140% 0; } to { -webkit-mask-position:140% 0; mask-position:140% 0; } } /* vonkjes die aan de rechterkant uit de band vliegen */ .dps-leeft-vonk{ position:absolute; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle, #ffffff 0%, #9ad8ff 34%, rgba(108,196,255,.55) 55%, rgba(97,33,223,0) 78%); box-shadow:0 0 14px 4px rgba(108,196,255,.55), 0 0 34px 10px rgba(97,33,223,.35); opacity:0; animation:dpsVonk 4.6s cubic-bezier(.3,0,.65,1) infinite; } .dps-leeft-vonk.v1{ left:56%; top:54%; animation-delay:0s; } .dps-leeft-vonk.v2{ left:58%; top:46%; animation-delay:.9s; } .dps-leeft-vonk.v3{ left:55%; top:60%; animation-delay:1.9s; } .dps-leeft-vonk.v4{ left:59%; top:49%; animation-delay:2.9s; } @keyframes dpsVonk{ 0% { opacity:0; transform:translate(0,0) scale(.5); } 8% { opacity:1; transform:translate(3%,-.3%) scale(1); } 62% { opacity:.95; transform:translate(48%,-5%) scale(1.05); } 88% { opacity:.55; transform:translate(76%,-8.5%) scale(.9); } 100% { opacity:0; transform:translate(92%,-10.5%) scale(.7); } } @media (prefers-reduced-motion: reduce){ .dps-leeft-puls, .dps-leeft-vonk{ animation:none; } .dps-leeft-puls{ opacity:0; } .dps-leeft-vonk{ opacity:0; } } /* De blogsectie begon op de containerrand, wat op een breed scherm bijna halverwege het beeld uitkomt, en de kop stond niet gelijk met de kaarten. Alles begint nu op dezelfde, rustige marge vanaf de linkerkant. */ .v2-ms-os .dps-bl-wrap{ max-width:none !important; width:100% !important; margin-inline:0 !important; padding-left:clamp(20px, 3.6vw, 68px) !important; padding-right:clamp(20px, 3.6vw, 68px) !important; } .v2-ms-os .dps-bl-wrap .dps-bl-spoor{ margin-left:0 !important; margin-right:0 !important; /* het spoor liep met een negatieve marge tot de rand */ padding-left:0 !important; padding-right:0 !important; scroll-padding-left:0 !important; } /* De twee waarderingsregels boven de casefoto: alleen logo, tekst, sterren en cijfer, zonder kader of vlak. Staat op wit, dus de tekst is donker en de schaduw eronder is weg. Lijnt links uit met de titel erboven. */ .dps-case-scores-rij{ display:flex; justify-content:flex-start; width:min(1245px, 100% - 42px); margin-inline:auto; padding:0; /* de galerij eronder heeft zelf 105px ruimte bovenin; die halen we er grotendeels af, zodat de regels vlak boven de blauwe rand staan */ margin-bottom:-56px; } .v2-ft-scores.dps-case-scores{ display:flex; flex-direction:column; gap:9px; background:none; padding:0; border:0; } .dps-case-scores .v2-grb-tekst{ color:#00021D; text-shadow:none; } .dps-case-scores .v2-grb-label strong{ color:#00021D; } .dps-case-scores .v2-grb-tekst b{ color:#00021D; } @media (max-width:1023px){ .dps-case-scores-rij{ margin-bottom:-28px; } } /* Onderin het donkere resultaatblok: dezelfde waarderingsregels als boven de foto, plus de knop naar de agenda. Hier staat alles op donker, dus de tekst blijft wit (zoals in de footer). */ .dps-kaart-voet{ margin-top:clamp(28px, 3.4vw, 52px); display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, 1.8vw, 24px); } .v2-ft-scores.dps-kaart-scores{ display:flex; flex-direction:column; gap:9px; background:none; padding:0; border:0; } .dps-kaart-knop{ display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px; background:linear-gradient(90deg,#6121DF,#911CEA); color:#fff; text-decoration:none; transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s; } .dps-kaart-knop:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(145,28,234,.6); } /* ===================================================================== WERKWIJZE-SCENE op de casepagina's (keuze 02-09). Vervangt "Gerelateerde projecten". Eén doorlopend beeld dat zichzelf opbouwt: knooppunten, bedrading, stromende data en app-kaartjes, met de stappen ernaast. Alles wordt op canvas getekend door assets/js/dps-werkwijze.js. ===================================================================== */ .dps-ww{ position:relative; overflow:hidden; height:clamp(560px, 46vw, 720px); background: radial-gradient(70% 60% at 78% 18%, rgba(97,33,223,.30), transparent 62%), radial-gradient(60% 50% at 12% 88%, rgba(33,157,242,.16), transparent 60%), #04021a; } .dps-ww-grid{ position:absolute; inset:0; background-image:linear-gradient(90deg, rgba(140,110,255,.09) 1px, transparent 1px), linear-gradient(0deg, rgba(140,110,255,.06) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 100% at 60% 40%, #000 30%, transparent 78%); mask-image:radial-gradient(120% 100% at 60% 40%, #000 30%, transparent 78%); } .dps-ww-vig{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(2,1,9,.72) 100%); } .dps-ww-canvas{ position:absolute; inset:0; width:100%; height:100%; } .dps-ww-verhaal{ position:absolute; left:clamp(20px,3.6vw,68px); top:clamp(30px,4vw,58px); z-index:6; width:min(430px,44%); } .dps-ww-eyebrow{ display:block; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:#b98cff; font-weight:700; } .dps-ww .dps-ww-kop{ font-size:clamp(26px,3.4vw,50px) !important; font-weight:800 !important; letter-spacing:-.03em; line-height:1.03; margin:12px 0 26px !important; color:#fff !important; text-align:left !important; } .dps-ww-nr{ display:block; font-size:12px; letter-spacing:.2em; color:#7fd1ff; font-weight:700; } .dps-ww .dps-ww-titel{ font-size:clamp(19px,2vw,27px); font-weight:800; margin:8px 0 10px; letter-spacing:-.01em; color:#fff; } .dps-ww-tekst{ color:rgba(255,255,255,.66); font-size:14.5px; line-height:1.65; min-height:3.3em; margin:0; } .dps-ww .fade{ animation:dpsWwIn .7s cubic-bezier(.22,.61,.36,1) both; } @keyframes dpsWwIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } } .dps-ww-balk{ display:flex; gap:7px; margin-top:24px; } .dps-ww-balk i{ height:3px; flex:1; border-radius:3px; background:rgba(255,255,255,.16); position:relative; overflow:hidden; } .dps-ww-balk i.aan::after, .dps-ww-balk i.klaar::after{ content:""; position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg,#219DF2,#911CEA); } .dps-ww-balk i.aan::after{ animation:dpsWwVul 3.1s linear forwards; } @keyframes dpsWwVul{ from{ transform:scaleX(0); transform-origin:left } to{ transform:scaleX(1); transform-origin:left } } .dps-ww-knoppen{ display:flex; gap:10px; margin-top:22px; } .dps-ww-knoppen button{ width:40px; height:40px; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(160,130,255,.34); color:#fff; font-size:16px; line-height:1; transition:background .3s, transform .3s; } .dps-ww-knoppen button:hover{ background:rgba(145,28,234,.34); transform:translateY(-2px); } .dps-ww-kaartje{ position:absolute; z-index:5; width:min(190px,26vw); border-radius:0 16px 0 16px; padding:12px 14px; background:linear-gradient(150deg, rgba(130,100,255,.22), rgba(8,4,32,.86)); border:1px solid rgba(160,130,255,.34); backdrop-filter:blur(8px); box-shadow:0 24px 50px -26px rgba(0,0,0,.95), inset 0 0 30px rgba(97,33,223,.14); opacity:0; transform:translateY(16px) scale(.94); transition:opacity .7s, transform .7s cubic-bezier(.22,.61,.36,1); } .dps-ww-kaartje.aan{ opacity:1; transform:none; } .dps-ww-kaartje b{ display:block; font-size:12.5px; color:#fff; } .dps-ww-kaartje small{ display:block; font-size:11px; color:rgba(255,255,255,.55); margin-top:3px; } .dps-ww-kaartje .rij{ display:flex; align-items:center; gap:8px; margin-top:9px; } .dps-ww-kaartje .rij small{ margin:0; } .dps-ww-kaartje .dot{ width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 10px 2px rgba(74,222,128,.6); flex:0 0 auto; } .dps-ww-kaartje .mini{ height:4px; border-radius:4px; background:rgba(255,255,255,.16); flex:1; overflow:hidden; } .dps-ww-kaartje .mini::after{ content:""; display:block; height:100%; width:8%; border-radius:4px; background:linear-gradient(90deg,#219DF2,#911CEA); } /* de balk loopt één keer vol zodra het kaartje verschijnt en blijft daarna staan */ .dps-ww-kaartje.aan .mini::after{ animation:dpsWwMini 2.2s cubic-bezier(.3,0,.2,1) forwards; } @keyframes dpsWwMini{ from{ width:8% } to{ width:100% } } .dps-ww-meters{ position:absolute; left:clamp(20px,3.6vw,68px); bottom:clamp(22px,3vw,40px); z-index:6; display:flex; gap:clamp(18px,3vw,46px); } .dps-ww-meter b{ display:block; font-size:clamp(24px,2.6vw,38px); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; background:linear-gradient(135deg,#8fd4ff,#c9a6ff); -webkit-background-clip:text; background-clip:text; color:transparent; } .dps-ww-meter span{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); } /* lampje bij de teller die over het echte resultaat gaat: de motor draait door */ .dps-ww-meter .dps-ww-loopt{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#4ADE80; } .dps-ww-meter .dps-ww-loopt::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.55); animation:dpsWwPols 2.4s ease-out infinite; } @keyframes dpsWwPols{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55) } 70%{ box-shadow:0 0 0 9px rgba(74,222,128,0) } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0) } } /* onder 1400px is er geen ruimte voor drie kolommen naast elkaar: tekst, zwevende kaartjes en het netwerk. De kaartjes gaan er dan af, zodat de verhaaltekst en de knooppunten allebei heel blijven. */ /* De zwevende kaartjes staan op een vaste 500px van links; het label "Bedrijfsprofiel" wordt op 50% van de canvasbreedte getekend. Tussen 1400 en 1519px lopen die twee over elkaar heen (gemeten: het kaartje eindigt op 684px, het label begint op 637px). Vanaf 1520px is er ruimte, dus daaronder blijven de kaartjes weg. */ @media (max-width:1519px){ .dps-ww-kaartje{ display:none; } } @media (max-width:1023px){ .dps-ww{ height:auto; padding:34px 0 30px; } .dps-ww-canvas{ position:relative; height:300px; margin-top:18px; } .dps-ww-verhaal{ position:relative; left:auto; top:auto; width:auto; padding:0 21px; } .dps-ww-meters{ position:relative; left:auto; bottom:auto; padding:22px 21px 0; flex-wrap:wrap; gap:20px; } .dps-ww-kaartje{ display:none; } } @media (prefers-reduced-motion:reduce){ .dps-ww-balk i.aan::after, .dps-ww-kaartje .mini::after{ animation:none; } .dps-ww-kaartje{ opacity:1; transform:none; } .dps-ww-meter .dps-ww-loopt::before{ animation:none; } } /* Het autoreveal-systeem hangt .fade-in aan koppen; onze stapteksten wisselen zelf en moeten dus altijd zichtbaar zijn. Kleur ook expliciet wit, want de basisregel voor h3 zet zwart. */ .dps-ww .fade-in, .dps-ww .reveal, .dps-ww .reveal-x{ opacity:1 !important; transform:none !important; transition:none !important; } .dps-ww .dps-ww-titel, .dps-ww h3{ color:#fff !important; } .dps-ww .dps-ww-tekst{ color:rgba(255,255,255,.66) !important; } /* Neonstreep over de naad boven de werkwijze: loopt van links naar rechts, daarna een paar seconden rust. Alleen bovenlangs; de onderkant blijft rustig. */ .dps-ww{ background-image: linear-gradient(90deg, rgba(150,120,255,.16), rgba(150,120,255,.16)), radial-gradient(70% 60% at 78% 18%, rgba(97,33,223,.30), transparent 62%), radial-gradient(60% 50% at 12% 88%, rgba(33,157,242,.16), transparent 60%); background-size:100% 1px, auto, auto; background-position:0 0, 0 0, 0 0; background-repeat:no-repeat; background-color:#04021a; } .dps-ww::before{ content:""; position:absolute; left:0; top:0; width:34%; height:3px; z-index:9; border-radius:3px; pointer-events:none; opacity:0; background:linear-gradient(90deg, rgba(33,157,242,0), #219DF2 34%, #911CEA 66%, rgba(145,28,234,0)); box-shadow:0 0 22px 5px rgba(97,33,223,.55), 0 0 46px 12px rgba(145,28,234,.28); } .dps-ww.is-in::before{ animation:dpsWwBoven 8s cubic-bezier(.42,0,.3,1) .2s infinite; } @keyframes dpsWwBoven{ /* veeg van 1,6s, daarna ruim 6s rust */ 0% { transform:translateX(-38%); opacity:0; } 2% { opacity:1; } 17% { opacity:1; } 20% { transform:translateX(300%); opacity:0; } 100% { transform:translateX(300%); opacity:0; } } @media (prefers-reduced-motion:reduce){ .dps-ww.is-in::before{ animation:none; } } } } /* Alles wat buiten beeld staat, staat stil (dps-inbeeld.js zet de klasse). Zodra het blok in beeld scrolt, loopt de beweging weer. */ .dps-pauze, .dps-pauze *, .dps-pauze::before, .dps-pauze::after, .dps-pauze *::before, .dps-pauze *::after{ animation-play-state:paused !important; } /* Interne links in de kennisbank-artikelen en het blok "Verder lezen". Beschrijvende ankers midden in de tekst, en onderaan de drie tot vier artikelen die er inhoudelijk het dichtst bij liggen. */ .v2-art-body p a{ color:#5b2bd6; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; } .v2-art-body p a:hover{ color:#911CEA; } .dps-verder{ margin-top:clamp(34px, 4vw, 56px); padding:clamp(22px, 2.4vw, 32px); border-radius:0 22px 0 22px; background:#0A0430; } .dps-verder h2{ color:#fff !important; font-size:clamp(19px,1.7vw,24px) !important; margin:0 0 16px !important; } .dps-verder ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; } .dps-verder li{ padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); } .dps-verder li:last-child{ border-bottom:0; padding-bottom:0; } .dps-verder a{ display:block; color:#fff; font-weight:700; font-size:16px; text-decoration:none; } .dps-verder a:hover{ text-decoration:underline; } .dps-verder span{ display:block; color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.5; margin-top:4px; } /* ===================================================================== SLIDERS: NOOIT EEN SCHUIFBALK IN BEELD (vaste regel 02-09) Elke horizontaal schuifbare strook op de site verbergt zijn schuifbalk, in alle browsers. De strook zelf blijft gewoon schuifbaar met de muis, het wiel, een veegbeweging en het toetsenbord. ===================================================================== */ .v2-car, .v2-sl-spoor, .v2-ms-os-spoor, .v2-ms-proj-spoor, .v2-ms-zegels, .v2-kbh-spoor, .dps-bl-spoor, .v2-testi-spoor, .v2-loc-cirkelvak, .hpgr-track, .hp-tips-marquee, .hpgr-marquee, .v2-cat-lijst, [class*="-spoor"], [class*="-track"], [class*="marquee"]{ scrollbar-width:none !important; /* Firefox */ -ms-overflow-style:none !important; /* oudere Edge */ } .v2-car::-webkit-scrollbar, .v2-sl-spoor::-webkit-scrollbar, .v2-ms-os-spoor::-webkit-scrollbar, .v2-ms-proj-spoor::-webkit-scrollbar, .v2-ms-zegels::-webkit-scrollbar, .v2-kbh-spoor::-webkit-scrollbar, .dps-bl-spoor::-webkit-scrollbar, .v2-testi-spoor::-webkit-scrollbar, .v2-loc-cirkelvak::-webkit-scrollbar, .hpgr-track::-webkit-scrollbar, .hp-tips-marquee::-webkit-scrollbar, .hpgr-marquee::-webkit-scrollbar, .v2-cat-lijst::-webkit-scrollbar, [class*="-spoor"]::-webkit-scrollbar, [class*="-track"]::-webkit-scrollbar, [class*="marquee"]::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; background:transparent !important; } /* ===================================================================== VEELGESTELDE VRAGEN op de casepagina's (keuze 02-09, variant 5). Licht vlak, twee kolommen, alle antwoorden meteen zichtbaar. Niets om open te klikken, dus Google leest alles direct mee. Vervangt de kennisbank-sectie op deze pagina's. ===================================================================== */ .dps-faq{ background:#fff; padding:clamp(40px,4.6vw,80px) 0; } .dps-faq-inner{ width:min(1245px, 100% - 42px); margin-inline:auto; } .dps-faq-eyebrow{ display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#6121DF; font-weight:800; } .dps-faq .dps-faq-kop{ font-size:clamp(26px,3vw,40px) !important; font-weight:800 !important; letter-spacing:-.03em; line-height:1.06; margin:12px 0 8px !important; color:#0B0B14 !important; text-align:left !important; } .dps-faq-intro{ color:#5C5C6B; font-size:15.5px; line-height:1.65; max-width:56ch; margin:0 0 clamp(26px,3vw,42px); } .dps-faq-rooster{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,40px) clamp(30px,4vw,72px); } .dps-faq-qa h3{ font-size:17px; line-height:1.35; margin:0 0 9px; letter-spacing:-.01em; color:#0B0B14; } .dps-faq-qa h3::before{ content:""; display:block; width:26px; height:2px; border-radius:2px; margin-bottom:12px; background:linear-gradient(90deg,#6121DF,#911CEA); } .dps-faq-qa p{ color:#5C5C6B; line-height:1.7; font-size:14.8px; margin:0; } @media (max-width:900px){ .dps-faq-rooster{ grid-template-columns:1fr; } } /* ===================================================================== TEKSTREGEL LINKSONDER OP DE KAART, OP DE TELEFOON (02-09) Op een kaart van 287px breed liepen de regel linksonder en de naam met de plaats rechtsonder door elkaar heen: de naam vult daar bijna de hele breedte. De naam met de plaats is het belangrijkst, dus de tekstregel valt op de telefoon weg. Vanaf tablet staat hij er gewoon weer. ===================================================================== */ @media (max-width:1199px){ .v2-car .v2-cs-caption{ display:none; } } /* de regel breekt af in plaats van tegen de naam rechtsonder aan te lopen; de naam met de plaats houdt dus altijd zijn eigen ruimte */ @media (min-width:1200px){ .v2-car .v2-cs-caption{ max-width:36%; } } @media (max-width:640px){ .v2-pd-dia--kaart .v2-cs-caption{ display:none; } } /* ===================================================================== DE WEBSITE VAN DE KLANT IN HET RESULTAATBLOK (verzoek 02-09) Tussen de tekst en de waarderingen: een streepje, de klikbare website, nog een streepje en dan pas Trustpilot en Google. Het streepje boven de waarderingen zakt daardoor iets naar beneden. ===================================================================== */ .dps-kaart-site{ display:flex; flex-direction:column; gap:6px; padding:22px 0 30px; border-bottom:1px solid rgba(255,255,255,.18); } /* Geen streep onder de link: die oogt rommelig op het donkere vlak. Dat het een link is blijkt uit het pijltje erachter; bij hover kleurt hij mee en komt de onderstreping alsnog tevoorschijn. */ .dps-kaart-site a{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; color:#fff; font-weight:700; font-size:clamp(16px, 1.2vw, 19px); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1); } .dps-kaart-site a::after{ content:"↗"; font-size:.9em; color:#C9A7FF; line-height:1; transition:transform .3s cubic-bezier(.22,.61,.36,1), color .3s; } .dps-kaart-site a:hover{ color:#C9A7FF; border-bottom-color:#C9A7FF; } .dps-kaart-site a:hover::after{ transform:translate(2px,-2px); color:#C9A7FF; } .dps-kaart-site a:focus-visible{ outline:2px solid #C9A7FF; outline-offset:4px; } @media (max-width:1023px){ .dps-kaart-site a{ color:#fff; } } /* Het paarse vlak achter de casefoto stond op top:35% van het blok. Dat percentage schuift mee met de lengte van de tekst en met de hoogte van het scherm, waardoor het vlak soms pas onder de foto begon. Het hangt nu vast aan de foto zelf: main.js meet de onderkant van de galerij en zet die als variabele, zodat het vlak overal even ver achter de foto begint. */ .v2-pd2-boven::after{ top:var(--pd2-paars, 35%) !important; } /* ===================================================================== "RESULTAAT" DICHTER BOVEN HET GETAL (verzoek 02-09) Het getal had margin-top:138px, waardoor het label los boven in het donkere blok bleef hangen. Nu staat het er net zo strak boven als "Wetenswaardig" boven zijn tekst. Geldt op elke casepagina. ===================================================================== */ .v2-pd2-kaart .v2-pd2-getal{ margin-top:clamp(18px, 2vw, 28px) !important; } /* ===================================================================== DE BANDVISUAL ALS VIDEO (verzoek 03-09) De lichtstroom is niet meer nagebootst met lagen maar echt geanimeerd: een lus van vijf seconden waarin het paars en blauw door de buizen loopt. De foto blijft eronder liggen als poster en als terugval. LET OP: het fotovlak staat in de basissjabloon op position:absolute en hangt boven de sectie uit. Zet daar nooit position:relative op, dan valt het in de normale stroom en schuift de hele blogslider naar beneden. De video speelt alleen als hij in beeld is (assets/js/main.js) en staat helemaal uit bij prefers-reduced-motion; dan zie je de foto. ===================================================================== */ .v2-pd2-os-foto.dps-band{ overflow:hidden; } .dps-band-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .dps-band-video{ display:none; } } /* Casepagina's (Dikkie 03-09): het galerijkader schuift omhoog, strak tegen de Trustpilot/Google-regels aan. Verder verandert er niets: hero, bol, kader (1050x505) en alles eronder blijven exact zoals ze waren. */ @media (min-width:1024px){ .v2-pd2 .v2-pd-gal{ padding-top:54px; } /* was 105: kader 51px omhoog, ~16px onder de waarderingen */ } /* ===================================================================== DE PVC-BANDVISUAL LEEFT (03-09): zelfde lichtlaag als bij FiberNED, maar dan over het PVC-beeld (showroom -> winkelwagen -> bezorging -> huis). De puls loopt over de neonbuis, de vonkjes vliegen rechts bij het huis weg. ===================================================================== */ .dps-leeft--pvc .dps-leeft-puls{ filter:brightness(1.7) saturate(1.2); } .dps-leeft--pvc .dps-leeft-vonk.v1{ left:79%; top:62%; } .dps-leeft--pvc .dps-leeft-vonk.v2{ left:81%; top:57%; } .dps-leeft--pvc .dps-leeft-vonk.v3{ left:78%; top:66%; } .dps-leeft--pvc .dps-leeft-vonk.v4{ left:82%; top:60%; } /* De lichtpuls staat standaard op het FiberNED-beeld. Elke case die de laag gebruikt moet dus zijn EIGEN band als achtergrond zetten, anders licht er een vreemd beeld op over de foto. Dat ging mis bij Wandmeesters: de klasse stond wel in de HTML, maar er hoorde geen regel bij. */ .dps-leeft--wandmeesters .dps-leeft-puls{ filter:brightness(1.6) saturate(1.2); } .dps-leeft--wandmeesters .dps-leeft-vonk.v1{ left:66%; top:44%; } .dps-leeft--wandmeesters .dps-leeft-vonk.v2{ left:69%; top:40%; } .dps-leeft--wandmeesters .dps-leeft-vonk.v3{ left:65%; top:49%; } .dps-leeft--wandmeesters .dps-leeft-vonk.v4{ left:70%; top:45%; } /* Nagtzaam: zoeken -> drie locaties -> de motor -> de afspraak -> bevestigd. De vonkjes vliegen rechts weg bij de bevestigingskaarten. */ .dps-leeft--nagtzaam .dps-leeft-puls{ filter:brightness(1.7) saturate(1.2); } .dps-leeft--nagtzaam .dps-leeft-vonk.v1{ left:87%; top:44%; } .dps-leeft--nagtzaam .dps-leeft-vonk.v2{ left:89%; top:39%; } .dps-leeft--nagtzaam .dps-leeft-vonk.v3{ left:86%; top:50%; } .dps-leeft--nagtzaam .dps-leeft-vonk.v4{ left:90%; top:45%; } /* Aanvraagmachine: twee identieke blokken (het bedrijf en zijn tweede merk), twee routes, de poort en rechts de bak die volloopt. De deeltjesstroom loopt op 53% hoogte tussen de poort en de bak, dus daar vliegen de vonkjes weg. */ .dps-leeft--aanvraagmachine .dps-leeft-puls{ filter:brightness(1.7) saturate(1.2); } .dps-leeft--aanvraagmachine .dps-leeft-vonk.v1{ left:74%; top:52%; } .dps-leeft--aanvraagmachine .dps-leeft-vonk.v2{ left:77%; top:51%; } .dps-leeft--aanvraagmachine .dps-leeft-vonk.v3{ left:75%; top:55%; } .dps-leeft--aanvraagmachine .dps-leeft-vonk.v4{ left:79%; top:53%; } /* Koppens Ventilatietechniek: afzuigkap, kanaal, filter, motor en rechts het rooster waar de schone lucht uit komt. De vonkjes vliegen rechts van de motor weg, op de hoogte van de luchtstroom. */ .dps-leeft--koppens-ventilatietechniek .dps-leeft-puls{ filter:brightness(1.7) saturate(1.2); } .dps-leeft--koppens-ventilatietechniek .dps-leeft-vonk.v1{ left:84%; top:52%; } .dps-leeft--koppens-ventilatietechniek .dps-leeft-vonk.v2{ left:87%; top:50%; } .dps-leeft--koppens-ventilatietechniek .dps-leeft-vonk.v3{ left:85%; top:55%; } .dps-leeft--koppens-ventilatietechniek .dps-leeft-vonk.v4{ left:89%; top:53%; } /* Theunisse: tekening, maatvoering, bewerking, de kast en rechts het afgewerkte interieur met warm licht. De vonkjes vliegen weg bij het bewerkte materiaal, in het midden-rechts van het beeld. */ .dps-leeft--theunisse-interieurbouw .dps-leeft-puls{ filter:brightness(1.6) saturate(1.2); } .dps-leeft--theunisse-interieurbouw .dps-leeft-vonk.v1{ left:48%; top:50%; } .dps-leeft--theunisse-interieurbouw .dps-leeft-vonk.v2{ left:51%; top:47%; } .dps-leeft--theunisse-interieurbouw .dps-leeft-vonk.v3{ left:49%; top:54%; } .dps-leeft--theunisse-interieurbouw .dps-leeft-vonk.v4{ left:53%; top:51%; } /* ===================================================================== WAARDERINGSBADGES KLIKBAAR (04-09): de Trustpilot- en Google-score stonden op ruim tweehonderd pagina's zonder bron. Ze zitten nu in een link naar het echte profiel, zodat een bezoeker het cijfer kan nakijken. De opmaak blijft precies zoals hij was: de link erft de kleur, krijgt geen onderstreping en alleen een lichte hover. ===================================================================== */ .dps-score-link{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; border-radius:8px; transition:opacity .25s cubic-bezier(.22,.61,.36,1); } .dps-score-link:hover, .dps-score-link:focus-visible{ opacity:.78; text-decoration:none; } .dps-score-link:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } /* de badge zelf blijft de layout bepalen; de link mag daar niets aan veranderen */ .dps-score-link > .v2-tp-badge, .dps-score-link > .v2-google-badge{ display:inline-flex; } @media (prefers-reduced-motion:reduce){ .dps-score-link{ transition:none; } } /* ===================================================================== MOBIEL: TIKDOELEN OP DE NORM (04-09) Uit de meting op 390x844 kwamen twee elementen die kleiner waren dan 24 bij 24, de ondergrens uit WCAG 2.5.8. Op een muis werkt dat prima, op een duim niet. 1. De pijlknoppen bij de carrousel waren 18x21 en 30x21. Ze krijgen een tikvlak van 44 bij 44 zonder dat de pijl zelf groter wordt of iets verschuift: het vlak groeit vanuit het midden. 2. De waarderingsbadges zijn breed genoeg maar maar 18 tot 19 pixels hoog. Ze krijgen een tikvlak van 28 pixels, gecentreerd. Hoger kan niet: de twee badges staan dertig pixels uit elkaar en zouden elkaar dan overlappen. ===================================================================== */ .v2-ms-os-pijl{ position:relative; } .v2-ms-os-pijl::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); } .dps-score-link{ position:relative; } .dps-score-link::after{ content:""; position:absolute; left:0; right:0; top:50%; height:28px; transform:translateY(-50%); } /* ===================================================================== MOBIEL: DE HOVER-STAND VAN DE OUTLINE-KNOP (04-09) In het mobiele menu bleef de telefoonknop na een tik in hover-stand hangen, zoals dat op een telefoon gaat. De algemene regel .btn:hover maakt de achtergrond dan donkerblauw, maar .btn-ghost houdt zijn blauwe tekstkleur. Resultaat: #4A42DD op #184286, een contrast van 1,44 op 1, terwijl de norm 4,5 is. Het nummer was in de praktijk niet te lezen. Twee dingen: de hover-stand geldt alleen nog waar echt een muis is, en als hij geldt wordt de tekst wit. Zo klopt het op allebei. ===================================================================== */ @media (hover: hover) and (pointer: fine){ .btn-ghost:hover, a.btn.btn-ghost:hover, .v2-btn-outline:hover, a.v2-btn-outline:hover{ color:#fff !important; } } @media (hover: none){ .btn-ghost:hover, a.btn.btn-ghost:hover, .v2-btn-outline:hover, a.v2-btn-outline:hover{ background:transparent !important; color:var(--ref-blauw) !important; } } /* ===================================================================== MOBIEL: INVOERVELDEN OP 16 PIXELS (04-09) De formuliervelden stonden op 15px. Safari op iOS zoomt automatisch in zodra je in een veld tikt dat kleiner is dan 16px: het scherm springt, de bezoeker is de weg kwijt en moet zelf terugzoomen. Dat kost precies op het moment van invullen aanvragen. Op desktop speelt het niet, dus daar blijft 15px staan. ===================================================================== */ @media (max-width: 900px){ .form-group input, .form-group textarea, .form-group select, .of-field input, .of-field select, .of-field textarea, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=url], input[type=date], textarea, select{ font-size:16px !important; } } /* ===================================================================== 1. DE ARTIKELHERO OP MOBIEL (04-09) De hero van een artikel stond op 100svh, met de regel "eerste scherm = alleen de hero". Op desktop klopt dat: 903 pixels inhoud in 1090 pixels hero. Op een telefoon is de inhoud maar 357 tot 439 pixels, dus stond er 405 tot 487 pixels wit boven de titel: je opende een artikel en zag een half leeg scherm. Op mobiel schaalt de hero nu mee met zijn inhoud, dus de eerste alinea komt meteen in beeld. Op desktop verandert er niets. ===================================================================== */ @media (max-width: 900px){ .v2-art-hero{ min-height:0 !important; } } /* ===================================================================== 2. DE CHATKNOP: RECHTS OP DESKTOP, LINKS OP MOBIEL Op 04-09 vroeg Dikkie tijdens de mobielcontrole om de knop linksonder, want daar ligt hij niet in de weg van de duim die scrollt. Die regel stond toen zonder mediaquery en gold dus ook op desktop, waar de knop altijd rechtsonder heeft gestaan. Alleen mobiel wijkt nu af. ===================================================================== */ @media (max-width: 900px){ .dps-chat{ right:auto !important; left:14px !important; } } /* ===================================================================== 3. DE CHATKNOP OP MOBIEL: COMPACT (21-09) De pil van 255px breed lag op de telefoon over alles heen: de laatste regel van kaarten, scroll-aanwijzingen, knoppen. Op mobiel blijft alleen de ronde foto over, met de verloop-ring en de groene status-stip als badge. Tikdoel 56px. De tekst blijft in de code voor schermlezers (aria-label op de link zelf). ===================================================================== */ @media (max-width: 900px){ .dps-chat{ padding:2px !important; gap:0 !important; bottom:14px !important; width:56px; height:56px; border-radius:50%; justify-content:center; } .dps-chat::before{ border-radius:50%; } .dps-chat-av{ width:52px !important; height:52px !important; } /* de tekst onzichtbaar, maar de stip moet uit die omhulsels kunnen: de omhulsels worden display:contents, alleen de tekstdelen zelf gaan weg */ .dps-chat-tekst, .dps-chat-status{ display:contents; } .dps-chat-tekst b, .dps-chat-status-tekst{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* de status-stip als badge op de rand van de foto */ .dps-chat-stip{ position:absolute; right:1px; bottom:1px; width:14px; height:14px; border:2px solid #0B0B0F; box-sizing:border-box; } }