/* ========================================================================== Alfa Afbouw Opzet in de trant van smeetsbouw.nl: donkere kop- en voetkleur, veel wit, grijze tussensecties, geometrische sans en als signatuur het diagonale facet — schuin afgesneden panelen en labels. Accentkleur is het rood uit het oude AS-logo in plaats van Smeets' blauw. ========================================================================== */ /* ---- Lettertype ----------------------------------------------------------- Manrope wordt LOKAAL geserveerd in plaats van vanaf fonts.googleapis.com. Reden: geen extern verzoek bij het laden van elke pagina (scheelt een DNS- lookup en een verbinding op het kritieke pad), geen IP-adres van de bezoeker naar Google, en dus ook geen Google Fonts meer om in de privacyverklaring te moeten noemen. Het zijn er maar twee: Manrope is een VARIABELE font, dus hetzelfde bestand dekt 400 tot en met 800. De latin-ext-variant vangt tekens als de eu-teken en accenten op die in latin ontbreken; de unicode-range zorgt dat de browser hem alleen ophaalt als een pagina zo'n teken echt gebruikt. ========================================================================== */ @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; /* variabele as, geen los bestand per gewicht */ font-display:swap; /* tekst meteen leesbaar in de fallback */ src:url(../fonts/manrope-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ /* ---- Kleur ------------------------------------------------------------- Marineblauw is de drager, wit de ruimte, rood alleen het accent. Het blauw is dieper dan voorheen (#14315F): dat leest rustiger en duurder, en houdt het rood echt als accent in plaats van als tegenkleur. */ --navy:#0b1f3a; /* hoofdkleur: koppen, voet, donkere secties */ --navy-2:#122c4e; /* iets lichter, voor hover en vlakken */ --navy-3:#071528; /* diepste, onderste balk */ --navy-line:#1b3357; /* lijnen op donkere ondergrond */ --blue:#1b4c9d; /* merkblauw uit het logo, alleen in het logo */ --red:#e30613; /* merkrood: alleen CTA, hover en kleine details */ --red-dark:#b8040f; --off:#f7f7f5; /* gebroken wit, voor rustige tussensecties */ --off-2:#eeeeea; --line:#e2e2dd; --ink:#0b1f3a; /* lopende tekst in het donker */ --text:#5a6270; /* secundaire tekst */ --muted:#66707e; /* was #8b929d: haalde maar 3,1:1 contrast */ --white:#fff; /* ---- Maatvoering ------------------------------------------------------- Eén schaal voor de hele site, zodat secties niet elk hun eigen ritme krijgen. */ --wrap:1240px; /* tekstkolom */ --wrap-wide:1660px; /* kop en brede beeldsecties */ --gutter:clamp(1.25rem,4vw,3rem); --sec:clamp(4rem,8vw,7.5rem); /* verticale ruimte tussen secties */ --sec-sm:clamp(2.5rem,5vw,4.5rem); /* ---- Binnenruimte van kaarten ------------------------------------------ Er stonden tien bijna gelijke clamps voor hetzelfde soort kaart (1,5/2,2vw/2rem naast 1,5/2,4vw/2rem naast 1,6/2,4vw/2,25rem). Dat verschil ziet niemand, maar het maakt elke sectie net anders. Drie maten volstaan: compact, normaal en ruim. */ --kaart-pad-kort:clamp(1.25rem,2vw,1.6rem); --kaart-pad:clamp(1.5rem,2.4vw,2rem); --kaart-pad-ruim:clamp(1.75rem,3vw,2.5rem); /* ---- Letters ----------------------------------------------------------- Eén familie voor alles. Manrope: geometrisch genoeg om architecturaal te ogen, met genoeg warmte om niet klinisch te worden. */ --f:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --h:var(--f); --b:var(--f); /* ---- Tekstschaal ------------------------------------------------------ Eén schaal in plaats van losse waarden. Er stonden zes fontgroottes binnen één pixel van elkaar (.9, .92, .93, .94, .95 en .96rem); dat is geen schaal maar ruis, en het maakt dezelfde soort tekst per sectie net anders. */ --t-xs:.8rem; /* 12,8px kickers en kleinkapitaal met letterafstand */ --t-sm:.875rem; /* 14px labels, bijschriften, meta */ --t-md:.9375rem; /* 15px kleine lopende tekst, knoppen, kaarttekst */ --t-base:1.0625rem; /* 17px lopende tekst, gelijk aan body */ --t-lg:1.1875rem; /* 19px intro's en grotere kaartkoppen */ /* ---- Vorm en diepte ---------------------------------------------------- De vormtaal is hoekig; dat past bij een afbouwbedrijf en het staat er al zo. Alleen een vlak dat echt boven de pagina zweeft krijgt een ronding, en dan overal dezelfde. Pilvormen horen hier niet. De schaduwen zijn er om hiërarchie te maken, niet om op te vallen. */ --rad-paneel:10px; /* witte kaarten die los van de achtergrond liggen */ --schaduw-1:0 1px 2px rgba(11,31,58,.04), 0 6px 18px rgba(11,31,58,.05); --schaduw-2:0 2px 6px rgba(11,31,58,.05), 0 16px 40px rgba(11,31,58,.07); --lijn-dik:2px; /* randdikte van knoppen en velden, overal gelijk */ /* Eén waarde voor het inzoomen van een foto bij hover en één voor het dimmen van een link. Er stonden vier zoomwaarden (1,04 tot 1,055) en vier doorzichtigheden (.68 tot .85) voor precies hetzelfde gebaar. */ --zoom:1.04; --dim:.8; --ease:cubic-bezier(.22,.61,.36,1); --snel:.22s; --traag:.45s; --slant:22px; /* schuinte van de facetvormen */ } *,*::before,*::after{box-sizing:border-box} /* De browser zet [hidden] zelf op display:none, maar elke eigen display-regel (.btn, .card) wint daarvan. Eén keer hard afdwingen scheelt een losse pleister per component. */ [hidden]{display:none !important} /* De ankersprong moet onder de vastgezette kopbalk uitkomen. Dat was een vast getal van 96 pixels, terwijl de balk 76 hoog is op een telefoon en 84 daarboven: op mobiel landde je twintig pixels te laag. --kop wordt door de JavaScript gemeten, met 84 als vangnet. */ html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--kop, 84px) + 1rem)} html,body{overflow-x:clip} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important} } body{ margin:0; background:var(--white); color:var(--text); font-family:var(--b); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Lopende tekst nooit breder dan comfortabel leesbaar is (60-75 tekens). */ p{max-width:68ch} img,svg,iframe{max-width:100%; display:block} img{height:auto} /* De om elke foto mag zelf geen ruimte innemen; de regels hieronder richten zich allemaal op de die erin zit. */ picture{display:contents} a{color:inherit} :focus-visible{outline:3px solid var(--red); outline-offset:2px} .skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:.85rem 1.25rem} .skip:focus{left:0} /* ---------- Typografie ---------- */ h1,h2,h3,h4{font-family:var(--h); color:var(--navy); margin:0 0 .5em; font-weight:700} h1{font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.04; letter-spacing:-.032em} h2{font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.1; letter-spacing:-.026em} h3{font-size:clamp(1.2rem,1.5vw,1.4rem); line-height:1.25; letter-spacing:-.012em; font-weight:700} /* h4 stond op 16px terwijl de lopende tekst 17px is; dat draaide de hiërarchie om. */ h4{font-size:var(--t-base); line-height:1.35; letter-spacing:-.008em; font-weight:700} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} strong{color:var(--navy); font-weight:600} .lead{font-size:clamp(1.08rem,1.35vw,1.25rem); line-height:1.6; color:var(--text)} .small{font-size:var(--t-md)} /* Klein grijs regeltje boven een kop, zoals bij de projectkaarten */ .eyebrow{ font-family:var(--b); font-size:var(--t-md); color:var(--muted); margin:0 0 .4rem; line-height:1.4; } /* Klein regeltje boven een kop. Rood, maar zo klein dat het accent blijft. */ .kicker{ display:flex; align-items:center; gap:.8rem; font-size:var(--t-xs); font-weight:700; letter-spacing:.15em; /* 12,8px: onder de 12,5 wordt kleinkapitaal met letterafstand slecht leesbaar */ text-transform:uppercase; color:var(--red); margin:0 0 1.1rem; /* Past de reeks niet op één regel, dan mogen de twee regels even lang zijn; anders blijft er een losse '· Verbouw' onderaan hangen. */ text-wrap:balance; } .kicker::before{content:""; width:24px; height:2px; background:var(--red); flex:none} .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)} .wrap-narrow{max-width:820px} .section{padding-block:var(--sec)} .section-sm{padding-block:var(--sec-sm)} .wrap-wide{max-width:var(--wrap-wide)} .bg-grey{background:var(--off)} .bg-navy{background:var(--navy); color:rgba(255,255,255,.76)} .bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff} .bg-navy strong{color:#fff} .bg-navy .kicker{color:#ff6b6b} /* ---------- Knoppen: massieve balk met pijl rechts ---------- */ /* Eén knop, drie varianten. min-height staat vast zodat een gevulde knop en een omlijnde knop naast elkaar exact even hoog zijn, ongeacht of de rand binnen of buiten de vulling valt. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.85rem; min-height:56px; padding:.9rem 1.9rem; font-family:var(--h); font-size:var(--t-md); font-weight:700; letter-spacing:-.005em; line-height:1.2; background:var(--red); color:#fff; text-decoration:none; border:0; cursor:pointer; transition:background var(--snel) var(--ease), color var(--snel) var(--ease), box-shadow var(--snel) var(--ease), transform var(--snel) var(--ease); } .btn:active{transform:translateY(1px)} /* Doorzichtige tweede knop: even belangrijk van vorm, rustiger van kleur. */ .btn-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 var(--lijn-dik) rgba(255,255,255,.5); } .btn-ghost:hover{background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 var(--lijn-dik) rgba(255,255,255,.8)} .btn::after{content:"\2192"; font-size:var(--t-lg); line-height:1; transition:transform var(--snel) var(--ease)} .btn:hover{background:var(--red-dark)} .btn:hover::after{transform:translateX(4px)} .btn-navy{background:var(--navy)} .btn-navy:hover{background:var(--navy-2)} .btn-line{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 var(--lijn-dik) var(--line)} .btn-line:hover{background:var(--navy); color:#fff; box-shadow:inset 0 0 0 var(--lijn-dik) var(--navy)} .btn-white{background:#fff; color:var(--navy)} .btn-white:hover{background:var(--off-2)} .btn-auto{min-width:0; gap:1.1rem} .btns{display:flex; flex-wrap:wrap; gap:1rem} /* Pijl-link */ .alink{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--h); font-weight:700; font-size:var(--t-md); color:var(--red); /* Padding maakt het tapdoel 44 px hoog; de negatieve marge houdt de optische positie gelijk aan die van gewone tekst. */ padding-block:.6rem; margin-block:-.6rem; } .alink::after{content:"\2192"; transition:transform var(--snel) var(--ease)} .alink:hover::after{transform:translateX(4px)} .alink-navy{color:var(--navy)} .alink-navy:hover{color:var(--red)} /* .alink staat altijd op zichzelf, nooit midden in een zin. Op een aanraakscherm mag hij daarom een echte raakhoogte hebben. Losse links binnen lopende tekst krijgen die bewust niet: dan gaan de raakvlakken van opeenvolgende regels over elkaar heen. */ @media (hover:none){ .alink{min-height:44px; align-items:center} } .bg-navy .alink{color:#fff} /* ---------- Kop van de site ---------- */ .head{ position:sticky; top:0; z-index:100; background:#fff; transition:background var(--traag) var(--ease), box-shadow var(--traag) var(--ease); } /* De kop was op de voorpagina doorzichtig en lag over de hero. Dat las slecht: het woordmerk AFBOUW verdween in een drukke foto en de bezoeker moest zoeken waar het menu ophield en het beeld begon. De kop is nu op elke pagina een dichte witte balk, zoals bij de andere sites in dit portfolio. Het logo staat daardoor altijd in zijn eigen kleuren in plaats van in wit. */ /* Eén haarlijn plus een heel zachte schaduw: genoeg om de balk los te trekken van de pagina, niet genoeg om zelf op te vallen. Hier stonden twee verschillende schaduwen voor dezelfde staat. */ .head.stuck{box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(11,31,58,.06)} /* Logo links, menu in het midden, telefoon en knop rechts. */ .head .wrap{ display:grid; grid-template-columns:max-content 1fr auto; align-items:center; gap:2rem; min-height:92px; max-width:var(--wrap-wide); } .head .nav{justify-self:center} .nav{display:flex; align-items:center; gap:.15rem} .nav a{ font-family:var(--h); font-size:var(--t-md); font-weight:600; color:var(--navy); text-decoration:none; padding:.6rem .8rem; position:relative; white-space:nowrap; transition:color var(--snel), opacity var(--snel); } .nav a:hover{opacity:var(--dim)} /* Actieve pagina: een kort rood streepje, verder niets. */ .nav a[aria-current="page"]{font-weight:700} /* Rood balkje onder een menu-item. De huidige pagina heeft hem altijd; bij de andere items groeit hij vanuit het midden open zodra je erover gaat. Eén regel voor beide toestanden, zodat het balkje op precies dezelfde plek en dikte staat. */ .nav > a::after{ content:""; position:absolute; left:.8rem; right:.8rem; bottom:.05rem; height:2px; background:var(--red); transform:scaleX(0); transform-origin:center; transition:transform var(--snel) var(--ease); } .nav > a:hover::after, .nav > a:focus-visible::after, .nav > a[aria-current="page"]::after{transform:scaleX(1)} /* De offerteknop is al rood; daar hoort geen streep onder. Eén element heeft maar één ::after, dus de streep en het pijltje vechten om dezelfde plek. Hier winnen de eigenschappen van de knop, zodat de knop in het mobiele menu er precies zo uitziet als elke andere primaire knop. */ .nav > a.btn::after{ content:"\2192"; position:static; left:auto; right:auto; bottom:auto; width:auto; height:auto; background:none; transform:none; font-size:var(--t-lg); line-height:1; } .nav > a.btn:hover::after{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){ .nav > a::after{transition:none} } .nav .btn{display:none} .head-cta{display:flex; align-items:center; gap:1.4rem; flex:none} /* De knoptekst mag niet over twee regels breken. Bij een smalle laptop met het telefoonnummer erbij werd 'Offerte aanvragen' anders 63 pixels hoog terwijl elke andere knop 56 is. */ .head-cta .btn{white-space:nowrap} .head-cta .btn{padding:.85rem 1.4rem; font-size:var(--t-md)} .head-tel{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--h); font-weight:700; font-size:var(--t-md); color:var(--navy); white-space:nowrap; transition:color var(--snel); } .head-tel svg{width:18px; height:18px; color:var(--red); flex:none} /* ---------- Lijndikte van de iconen ---------- Alle iconen tekenen op een viewBox van 24, maar ze staan op het scherm van 15 tot 30 pixels. Met een vaste stroke-width in de HTML levert dat een werkelijke lijn op tussen 1,5 en 2,25 pixels: naast elkaar zie je dat de vinkjes zwaarder zijn dan de contacticoontjes. Hieronder wordt per formaat teruggerekend naar dezelfde optische dikte van ongeveer 1,75 pixel: attribuut = 1,75 x 24 / formaat. */ svg{stroke-width:2} /* ~21px, de middenmaat */ .hero-trust svg{stroke-width:2.8} /* 15px */ .head-tel svg,.checks svg,.foot-contact svg, .dank-bel svg{stroke-width:2.35} /* 18px */ .dank-icoon svg{stroke-width:2.1} /* 20px */ .info svg,.slot-tel svg{stroke-width:1.9} /* 22px */ .punt svg,.dank-vink svg{stroke-width:1.6} /* 26px */ .tile svg{stroke-width:1.4} /* 30px */ .head-tel:hover{color:var(--red)} .burger{display:none; width:46px; height:46px; border:0; background:var(--off); cursor:pointer; padding:0; place-content:center; place-items:center; gap:5px} .burger span{display:block; width:20px; height:2px; background:var(--navy); transition:var(--snel) var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:1420px){ .head-tel{display:none} } @media (max-width:1240px){ .nav a{padding:.55rem .55rem; font-size:var(--t-md)} .head .wrap{gap:1.25rem} } @media (max-width:1080px){ /* Vanaf hier past het menu niet meer op één regel: hamburger. */ .head .wrap{grid-template-columns:auto auto; justify-content:space-between; min-height:84px} .nav{ position:fixed; inset:0 0 auto; top:var(--nav-top,84px); flex-direction:column; align-items:stretch; gap:0; background:var(--navy); padding:.5rem var(--gutter) 2.25rem; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--snel) var(--ease), transform var(--snel) var(--ease); /* Het paneel was maar zo hoog als zijn inhoud, waardoor de pagina eronder doorschemerde en het menu half open leek te staan. Nu vult het de rest van het scherm; alleen bij veel menu-items komt er scroll in. */ min-height:calc(100dvh - var(--nav-top,84px)); max-height:calc(100dvh - var(--nav-top,84px)); overflow-y:auto; overscroll-behavior:contain; } /* .head .nav staat op justify-self:center voor de desktopbalk. Bij een fixed element laat dat de breedte krimpen tot de inhoud, waardoor het mobiele menu een smalle kolom werd in plaats van schermbreed. Deze selector moet net zo zwaar zijn als die van de desktopbalk, anders wint die laatste ook binnen deze media query. */ .head .nav{justify-self:stretch} .nav.open{transform:none; opacity:1; pointer-events:auto} .nav a{ color:#fff; padding:1.05rem .15rem; font-size:var(--t-base); font-weight:600; border-bottom:1px solid var(--navy-line); text-shadow:none; position:relative; display:block; } .nav a:last-of-type{border-bottom:0} .nav a[aria-current="page"]::after{display:none} .nav a[aria-current="page"]{color:#fff} .nav a[aria-current="page"]::before{content:""; width:16px; height:2px; background:var(--red); position:absolute; left:.15rem; bottom:.55rem} .nav .btn{display:inline-flex; margin-top:1.6rem; border-bottom:0} .burger{display:grid} .head-cta .btn{display:none} } @media (max-width:600px){ .head .wrap{min-height:76px} } /* ---------- Hero --------------------------------------------------------- Foto schermvullend, navy verloop over links zodat de tekst altijd leest. Geen dichtgeplakt paneel: dat maakte van elke foto een fragment. */ .hero{position:relative; background:var(--navy-3)} /* De tweede regel van de kop in het merkrood: dat zet 'Van A tot Z.' apart als belofte in plaats van als deel van dezelfde zin. */ .h1-rood{color:var(--red)} /* De hero vult het scherm. svh in plaats van vh: op een telefoon telt vh de adresbalk mee, waardoor de onderkant wegvalt. Een plafond van 1100px houdt hem op een ultrawide scherm nog hanteerbaar. */ .hero-img{position:relative; height:min(100svh,1100px); min-height:560px} .hero-img img{width:100%; height:100%; object-fit:cover} .hero-img::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(100deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.86) 26%, rgba(11,31,58,.52) 50%, rgba(11,31,58,.14) 70%, rgba(11,31,58,0) 88%), linear-gradient(to top, rgba(11,31,58,.5) 0%, rgba(11,31,58,0) 34%), linear-gradient(to bottom,rgba(7,21,40,.6) 0%, rgba(7,21,40,0) 26%); } .hero-panel{ position:absolute; inset:0 auto 0 0; z-index:2; display:flex; align-items:center; width:100%; padding-block:5rem; } .hero-inner{ width:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:var(--gutter); } .hero-inner > *{max-width:min(46rem,58vw)} .hero h1{color:#fff; margin:0; text-wrap:balance} .hero-lead{ color:rgba(255,255,255,.88); margin:1.4rem 0 0; font-size:clamp(1.05rem,1.35vw,1.22rem); line-height:1.6; max-width:44ch; } .hero .kicker{color:#fff; opacity:var(--dim)} .hero .btns{margin-top:2.25rem; gap:.9rem} /* Vier korte punten onder de knoppen. Alleen wat waar is: geen cijfers, geen keurmerken die we niet hebben. */ .hero-trust{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin:2.5rem 0 0; padding:0; list-style:none; max-width:44rem; } .hero-trust li{ display:flex; align-items:center; gap:.6rem; font-size:var(--t-md); font-weight:600; color:rgba(255,255,255,.82); } .hero-trust svg{width:15px; height:15px; color:var(--red); flex:none} /* De vier punten blijven op de laptop staan, maar verdwijnen op een telefoon. Ze vulden daar een half scherm onder de knoppen en zeggen niets wat de kop en de lead niet al zeggen. */ @media (max-width:767px){ .hero-trust{display:none} } /* ---------- Telefoon in landschap ---------- Een liggend toestel is maar zo'n 375 pixels hoog. De hero hield daar een ondergrens van 560 aan, dus anderhalf scherm, en de knoppen vielen onder de vouw. Hier laten we de hoogte door de inhoud bepalen en schalen kop en ruimte mee terug, zodat kop, lead en knoppen samen in beeld passen. */ @media (orientation:landscape) and (max-height:560px){ .hero-img{height:auto; min-height:0} .hero-panel{position:relative; padding-block:5.9rem 1.9rem} .hero h1{font-size:clamp(1.7rem,3.6vw,2.3rem)} .hero-lead{margin-bottom:.35rem} .hero .kicker{margin-bottom:.7rem} .hero .btns{margin-top:1.25rem} .hero-trust{display:none} } /* Rode punt rechtsonder: het enige grote rode vlak op de pagina. */ .hero::after{ content:""; position:absolute; right:0; bottom:-1px; width:170px; height:50px; background:var(--red); clip-path:polygon(44px 0, 100% 0, 100% 100%, 0 100%); } @media (max-width:1080px){ .hero-inner > *{max-width:none} .hero-lead{max-width:52ch} } @media (max-width:767px){ /* Ook op smal blijft het één beeld met de tekst eroverheen, net als op de laptop. Eerder stond hier foto boven en een blauw vlak eronder; dat gaf twee losse blokken in plaats van één hero. De grens ligt op 767 en niet op 820: vanaf 768 staat de kop vast en doorzichtig over de hero, en dan werkt de opzet van de laptop beter. Tussen 768 en 820 gaf deze variant een hero van 596 pixels terwijl hij op 900 breed ineens 900 hoog was; die sprong is daarmee weg. De hoogte komt van het tekstblok, niet van het scherm: dan kan er niets wegvallen. De foto ligt eronder en schuift naar rechts, want links moet de kop leesbaar blijven. */ .hero-img{height:auto; min-height:0; aspect-ratio:auto; background:var(--navy)} .hero-img .hero-media{position:absolute; inset:0; aspect-ratio:auto} .hero-img .hero-media picture{display:block; height:100%} .hero-img .hero-media img{width:100%; height:100%; object-fit:cover; object-position:72% 42%} /* Steiler verloop dan op de laptop: op 375 pixels is er geen ruimte om de tekst naast de foto te zetten, dus die ligt erop. */ .hero-img::after{ inset:0; aspect-ratio:auto; background: linear-gradient(103deg, var(--navy) 0%, rgba(11,31,58,.97) 34%, rgba(11,31,58,.8) 62%, rgba(11,31,58,.58) 100%), linear-gradient(to bottom, rgba(7,21,40,.5) 0%, rgba(7,21,40,0) 30%), linear-gradient(to top, rgba(7,21,40,.6) 0%, rgba(7,21,40,0) 26%); } .hero-panel{position:relative; z-index:2; width:100%; background:transparent} .hero h1,.hero-lead{text-shadow:0 1px 20px rgba(7,21,40,.5)} .hero::after{display:none} /* Het streepje van de kicker gaat eronder in plaats van ernaast, zoals in de referentie. column-reverse zet het ::before-element onderaan. */ .hero .kicker{flex-direction:column-reverse; align-items:flex-start; gap:.7rem} .hero .kicker::before{width:56px} .hero .btns{gap:.6rem} .hero .btns .btn{flex:1 1 100%} } /* Onder 768px staat de header gewoon in de flow: daar mag de bovenmarge krap. Tussen 768 en 820 staat hij vast en doorzichtig over de hero heen, en moet het tekstblok er ruim onderuit beginnen. De 5rem uit de basisregel is daar net te weinig: de header is 84px hoog. */ @media (max-width:767px){ .hero-panel{padding-block:2.5rem 3rem} /* De hero loopt door tot onder aan het scherm: de volle hoogte min de kopbalk. svh in plaats van vh, want vh telt op een telefoon de adresbalk mee en dan valt de onderkant weg. --kop wordt door de JavaScript gemeten; 76px is het vangnet zonder JavaScript. */ /* De tekst bovenaan, de knoppen onderaan het scherm. Dat werkt alleen als de hoogte helemaal doorgegeven wordt: .hero-img krijgt de schermhoogte, .hero-panel groeit daarin mee (flex:1) en het tekstblok rekt daar weer in op. Pas dan heeft margin-top:auto op de knoppen ruimte om ze naar beneden te duwen. Het beeld en het verloop staan absoluut, dus die doen aan deze flexbox niet mee. */ .hero-img{display:flex; min-height:calc(100svh - var(--kop, 76px))} .hero-panel{flex:1 1 auto; display:flex; align-items:stretch; padding-block:2.5rem 2.25rem} .hero-inner{width:100%; display:flex; flex-direction:column} .hero-inner .btns{margin-top:auto; padding-top:2rem} } /* Openingsanimatie: kort, klein, en alleen bij het laden van de hero. */ @keyframes op{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}} .js .hero-inner > *{animation:op .6s var(--ease) both} .js .hero-inner > :nth-child(1){animation-delay:.05s} .js .hero-inner > :nth-child(2){animation-delay:.14s} .js .hero-inner > :nth-child(3){animation-delay:.23s} .js .hero-inner > :nth-child(4){animation-delay:.32s} .js .hero-inner > :nth-child(5){animation-delay:.41s} @media (prefers-reduced-motion:reduce){ .js .hero-inner > *{animation:none} } /* ---------- Pagina-kop ---------- */ .phead{position:relative; background:var(--navy); color:rgba(255,255,255,.78); overflow:hidden} .phead-bg{position:absolute; inset:0} .phead-bg img{width:100%; height:100%; object-fit:cover; opacity:.35} .phead .wrap{position:relative; z-index:2; padding-block:var(--sec-sm)} /* De slotsectie op de voorpagina is tegelijk .section en .phead; anders telt de padding dubbel op. De foto mag daar ook wat sterker doorkomen. */ .section.phead .wrap{padding-block:0} .section.phead .phead-bg img{opacity:.22} .phead h1{color:#fff; max-width:24ch; margin-bottom:.75rem} .phead p{max-width:56ch; margin:0; font-size:var(--t-base); color:rgba(255,255,255,.8)} .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:var(--t-sm); color:rgba(255,255,255,.55); margin-bottom:1.5rem} .crumbs a{display:inline-flex; align-items:center; min-height:44px; padding-block:.5rem; margin-block:-.5rem} .crumbs a{text-decoration:none; color:rgba(255,255,255,.75)} .crumbs a:hover{color:#fff} /* ---------- Introblok met zijkolom ---------- */ /* ---------- Projectkaart met diagonaal label ---------- Het raster zelf staat verderop bij de projectenpagina; hier alleen de kaart. De oude tweekoloms versie en .cards-3 stonden hier nog, maar die werden allebei al overschreven en nergens meer gebruikt. */ .card{display:block; text-decoration:none; background:transparent; border:0; padding:0; text-align:left; width:100%; cursor:pointer; font:inherit} .card-media{position:relative; overflow:hidden; background:var(--off-2)} .card-media img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform var(--traag) var(--ease)} .card:hover .card-media img{transform:scale(var(--zoom))} .tag{ position:absolute; right:0; bottom:0; background:var(--blue); color:#fff; font-family:var(--h); font-size:var(--t-sm); font-weight:600; letter-spacing:.01em; padding:.5rem 1.1rem .5rem calc(var(--slant) + .9rem); clip-path:polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); } .tag-red{background:var(--red)} .card-body{padding-top:1rem} .card-body h3{margin:0; font-size:var(--t-lg); display:flex; align-items:baseline; gap:.5rem} .card-body h3::after{content:"\2192"; color:var(--red); transition:transform var(--snel) var(--ease)} .card:hover .card-body h3::after{transform:translateX(4px)} .card-body p{font-size:var(--t-md); margin:.4rem 0 0} /* ---------- Dienstblok ---------- */ .svc{padding-block:var(--sec-sm); border-top:1px solid var(--line)} .svc-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4.5vw,4rem); align-items:center} .svc:nth-of-type(even) .svc-media{order:2} .svc-media{position:relative} .svc-media img{width:100%; aspect-ratio:4/3; object-fit:cover} .svc-media .tag{right:auto; left:0; clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); padding:.5rem calc(var(--slant) + .9rem) .5rem 1.1rem} /* ---------- Dienstblokken op een telefoon ---------- Er staan er elf onder elkaar op de dienstenpagina; samen was dat ruim 10.000 pixels, driekwart van de hele pagina. Per blok gaat er hier zo'n 200 pixels af zonder dat er iets verdwijnt: het beeld wordt liggender, de kop kleiner en de ruimte tussen beeld en tekst krapper. */ @media (max-width:900px){ .svc-media img{aspect-ratio:16/10} .svc-grid{gap:1.5rem} .svc h2{font-size:clamp(1.45rem,3.4vw,1.9rem); margin-bottom:.55rem} .svc p{font-size:var(--t-md)} .svc .dienst-meer{display:flex; margin-top:1rem} } /* Alleen op een telefoon de knop over de volle breedte; op een tablet is dat een balk van 700 pixels voor drie woorden. */ @media (max-width:620px){ .svc .btn-auto{width:100%} } /* Beeld en tekst blijven tot een tablet in portret naast elkaar staan: op 768 pixels is elke kolom nog 350 breed, en gestapeld werd de pagina daar juist langer dan op een telefoon. */ @media (max-width:700px){ .svc-grid{grid-template-columns:1fr} .svc:nth-of-type(even) .svc-media{order:0} } /* Opsomming met vinkjes */ .checks{list-style:none; margin:1.5rem 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.5rem} .checks li{display:flex; gap:.65rem; align-items:flex-start; font-size:var(--t-md)} .checks svg{width:18px; height:18px; color:var(--red); flex:none; margin-top:5px} /* De items zijn kort ('Glad pleisterwerk', 'Scheurherstel'), dus twee kolommen passen ook op 320 pixels. In één kolom werd zo'n lijst van zes punten 204 pixels hoog; op de dienstenpagina staat die elf keer. */ @media (max-width:900px){ .checks{grid-template-columns:1fr 1fr; gap:.6rem .9rem; margin:1.25rem 0} .checks li{font-size:var(--t-sm); line-height:1.4} .checks svg{width:15px; height:15px; margin-top:3px; stroke-width:2.8} } /* Onder de 360 pixels is twee kolommen te krap voor de langste labels. */ @media (max-width:359px){ .checks{grid-template-columns:1fr} } /* ---------- Werk: filters in zijkolom ---------- */ /* ---------- Projectgalerij ---------- De filters stonden in een kolom van 250px naast het raster. Dat kostte een zesde van de breedte aan een lijstje van negen woorden, terwijl de foto's juist het werk moeten doen. Ze staan nu als een rij boven het raster en het raster loopt over de volle breedte. */ .work-layout{display:block} /* Zes kolommen als onderlegger. Een kaart pakt er twee (een derde), drie (de helft) of alle zes. Dat geeft de pagina een ritme in plaats van een muur van gelijke blokjes, en de sterkste foto's krijgen de ruimte. 'dense' vult gaten die ontstaan zodra er gefilterd wordt. */ .cards{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; gap:clamp(1.25rem,2.4vw,2.25rem) clamp(1.25rem,2vw,1.75rem); } .card{grid-column:span 2} .card-3{grid-column:span 3} .card-6{grid-column:span 6} /* Een beeld over de volle breedte wordt anders onwerkbaar hoog. */ .card-6 .card-media img{aspect-ratio:21/9} .card-3 .card-media img{aspect-ratio:16/10} @media (max-width:1100px){ .cards{grid-template-columns:repeat(4,1fr)} .card,.card-3{grid-column:span 2} .card-6{grid-column:span 4} .card-6 .card-media img{aspect-ratio:2/1} } /* Tussen 560 en 700 pixels, dus een grote telefoon in landschap en een kleine tablet, bleef dit één kolom. Twee kolommen benutten die breedte veel beter en laten de foto's nog groot genoeg. */ @media (max-width:700px){ .cards{grid-template-columns:1fr 1fr} .card,.card-3{grid-column:span 1} .card-6{grid-column:1 / -1} .card-6 .card-media img{aspect-ratio:2/1} .card-3 .card-media img{aspect-ratio:3/2} } /* Op een telefoon één sterke kolom: een projectfoto van 160 pixels breed maakt geen indruk, en dat is precies waar deze pagina voor is. */ @media (max-width:559px){ .cards{grid-template-columns:1fr} .card,.card-3,.card-6{grid-column:span 1} .card-6 .card-media img,.card-3 .card-media img{aspect-ratio:3/2} } /* ---------- Lichtbak ---------- */ .lb{position:fixed; inset:0; z-index:200; display:none; background:rgba(14,36,69,.95); padding:clamp(1rem,4vw,3rem); place-items:center} .lb.open{display:grid} .lb img{max-width:min(1200px,92vw); max-height:80vh; object-fit:contain} .lb-cap{color:rgba(255,255,255,.75); text-align:center; margin-top:1rem; font-size:var(--t-md)} .lb button{position:absolute; background:transparent; border:2px solid rgba(255,255,255,.3); color:#fff; width:48px; height:48px; cursor:pointer; font-size:1.4rem; line-height:1; display:grid; place-items:center; transition:background var(--snel)} .lb button:hover{background:rgba(255,255,255,.15)} .lb-close{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem)} .lb-prev{left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%)} .lb-next{right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%)} /* ---------- Groot beeldblok met diagonaal tekstpaneel ---------- */ .spotlight{position:relative} .spotlight img{width:100%; aspect-ratio:21/9; object-fit:cover} .spotlight-panel{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:min(46%,470px); background:var(--navy); color:rgba(255,255,255,.8); /* De schuine snede haalt er linksboven 60px af. De binnenmarge moet daar dus ruim overheen, anders plakt de bovenste regel tegen de rand. */ padding:2.25rem 2rem 2.25rem calc(60px + 2rem); clip-path:polygon(60px 0, 100% 0, 100% 100%, 0 100%); } .spotlight-panel h2{color:#fff; font-size:clamp(1.3rem,2.2vw,1.85rem)} .spotlight-panel p{font-size:var(--t-md)} @media (max-width:900px){ .spotlight img{aspect-ratio:16/9} .spotlight-panel{position:static; transform:none; width:100%; clip-path:none; padding:1.75rem var(--gutter)} } /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer; list-style:none; padding:1.3rem 3rem 1.3rem 0; position:relative; font-family:var(--h); font-weight:600; font-size:var(--t-base); color:var(--navy)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:""; position:absolute; right:.6rem; top:50%; width:11px; height:11px; border-right:2.5px solid var(--red); border-bottom:2.5px solid var(--red); transform:translateY(-70%) rotate(45deg); transition:transform var(--snel) var(--ease)} .faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .faq summary:hover{color:var(--red)} .faq .a{padding:0 3rem 1.5rem 0} .faq .a a{color:var(--red)} /* ---------- Formulier ---------- */ .form-card{background:var(--off); padding:var(--kaart-pad-ruim)} /* Op een smal scherm is 28 pixels binnenruimte aan beide kanten zonde: dat is een tiende van het scherm dat niet voor de velden beschikbaar is. */ @media (max-width:480px){ .form-card{padding:1.25rem var(--gutter)} } .field{margin-bottom:1.2rem} .field label{display:block; font-family:var(--h); font-weight:600; font-size:var(--t-sm); color:var(--navy); margin-bottom:.45rem} .field .req{color:var(--red)} /* De rand stond op transparant. Op de grijze offertekaart viel dat niet op, maar het open-sollicitatieformulier staat op wit: daar waren de velden onzichtbaar tot je erin klikte. Nu heeft elk veld altijd een zichtbare rand, en op elke ondergrond dezelfde. */ .field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:var(--t-base); color:var(--navy); background:#fff; padding:.85rem 1rem; border:var(--lijn-dik) solid var(--line); transition:border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); } .field input:hover,.field select:hover,.field textarea:hover{border-color:#cfcfc9} /* Het pijltje van een keuzelijst tekent elke browser anders. Eén eigen pijl in dezelfde lijnstijl als de rest van de iconen houdt het gelijk. */ .field select{ appearance:none; -webkit-appearance:none; padding-right:2.75rem; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:18px 18px; } .field textarea{min-height:140px; resize:vertical; line-height:1.6} .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(227,6,19,.12); } /* Alleen een randkleur is een magere focusaanduiding: wie het veld niet al kende ziet nauwelijks verschil. Bij toetsenbordfocus komt er daarom een ring omheen, net als bij de rest van de site. Met de muis blijft het rustig. */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:3px solid var(--red); outline-offset:2px; } .field input::placeholder,.field textarea::placeholder{color:var(--muted)} /* ---- Foutmelding bij formulieren ---- Eén vaste plek, vlak boven de knop waar net op gedrukt is. De ballon van de browser springt ergens op het scherm op, staat in de taal van de browser en verdwijnt weer uit zichzelf. */ .form-melding{ display:flex; gap:.6rem; align-items:flex-start; margin:0 0 1.1rem; padding:.9rem 1.1rem; background:#fdecec; border-left:3px solid var(--red); color:var(--red-dark); font-size:var(--t-md); font-weight:600; line-height:1.5; } .form-melding::before{content:"!"; display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%; background:var(--red); color:#fff; font-size:var(--t-xs); line-height:1} .field .veld-fout,.veld-fout{border-color:var(--red)} .pick.veld-fout{outline:2px solid var(--red); outline-offset:6px} .row2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem} @media (max-width:560px){ .row2{grid-template-columns:1fr} } .pick{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem} /* minmax(0,1fr) in plaats van 1fr: anders duwt het langste label zijn kolom breder en staan de twee kolommen ongelijk (165 tegen 143 pixels). */ @media (max-width:760px){ .pick{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Eén kolom pas onder de 360 pixels. Daarboven bleven dertien vinkvakjes anders op één rij per stuk staan: samen ruim 800 pixels, een heel scherm voordat je op Volgende kunt. In twee kolommen is dat de helft, en de labels zijn kort genoeg om te passen. */ @media (max-width:359px){ .pick{grid-template-columns:1fr} } .pick label{display:flex; align-items:center; gap:.6rem; margin:0; padding:.7rem .85rem; background:#fff; font-family:var(--b); font-weight:400; font-size:var(--t-md); color:var(--text); cursor:pointer; border:2px solid transparent; transition:border-color var(--snel)} .pick label:hover{border-color:var(--line)} .pick input{width:1.15rem; height:1.15rem; accent-color:var(--red); flex:none} /* Op een telefoon iets krappere labels, zodat 'Buitenstucwerk' in een kolom van 150 pixels op één regel blijft. De regel blijft ruim boven de 44 pixels die je nodig hebt om hem met een duim te raken. */ @media (max-width:560px){ .pick{gap:.4rem} .pick label{padding:.7rem .7rem; gap:.5rem; font-size:var(--t-sm); line-height:1.3; min-height:48px} } .consent{display:flex; gap:.7rem; align-items:flex-start; font-size:var(--t-sm); color:var(--muted); margin:1.4rem 0} .consent input{width:1.15rem; height:1.15rem; accent-color:var(--red); margin-top:3px; flex:none} .consent a{color:var(--navy)} .note{font-size:var(--t-sm); color:var(--muted); margin-top:1rem} /* Een beeld midden in een tekstkolom. Zelfde radius en ritme als de kaarten elders, zodat het niet als een losse plaat aanvoelt. */ .tekstbeeld{display:block; margin:clamp(1.5rem,2.6vw,2.25rem) 0 0} .tekstbeeld picture{display:block} .tekstbeeld img{width:100%; height:auto; display:block; border-radius:var(--rad)} /* Toelichting die onder een sectie hoort in plaats van naast de kop: dezelfde kleine letter, maar met wat meer lucht erboven omdat er een heel blok content boven staat. De max-width van p moet eraf, anders breekt een korte zin op 68ch af terwijl er ruimte zat is. */ .note-onder{margin-top:clamp(1.5rem,2.4vw,2.25rem); max-width:none} .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} /* ---------- Contact ---------- */ .info{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem} .info li{display:flex; gap:1rem; align-items:flex-start} .info svg{width:22px; height:22px; color:var(--red); flex:none; margin-top:4px} .info b{display:block; font-family:var(--h); font-size:var(--t-md); color:var(--navy); margin-bottom:.15rem} .info a{ display:inline-flex; align-items:center; text-decoration:none; min-height:44px; padding-block:.35rem; margin-block:-.35rem; } .info a:hover{color:var(--red)} /* De kaart stond op grayscale. Dat oogde rustig, maar een bezoeker die de route zoekt heeft juist baat bij de kleuren: water, groen en wegen zijn dan in een oogopslag te herkennen. */ .map{border:0; width:100%; height:420px} .places{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0} .places li{background:var(--off); padding:.45rem 1rem; font-size:var(--t-md); color:var(--text)} .bg-navy .places li{background:rgba(255,255,255,.09); color:rgba(255,255,255,.8)} /* ---------- Voet ---------------------------------------------------------- Vijf kolommen: merkblok (breed), Diensten, Bedrijf, Service, Contact. De voet is de afsluiting van de pagina, dus hij mag donkerder zijn dan de rest en krijgt een rode rand als duidelijke grens. Het verloop is heel licht; het moet diepte geven, niet opvallen. */ .foot{ position:relative; background:var(--navy); background-image: radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 55%), linear-gradient(to bottom, var(--navy) 0%, var(--navy-3) 100%); color:rgba(255,255,255,.7); font-size:var(--t-md); border-top:4px solid var(--red); margin-top:clamp(3rem,7vw,6rem); } /* De slotsectie is zelf al donker en bedoeld als overgang; daar zou een extra marge een gat slaan. */ .section.bg-navy + .foot, .section.phead + .foot{margin-top:0} .foot a{color:rgba(255,255,255,.72); text-decoration:none; transition:color var(--snel) var(--ease)} .foot a:hover{color:#fff} .foot-top{ display:grid; grid-template-columns:minmax(290px,1.5fr) .85fr .8fr .95fr 1.15fr; gap:clamp(1.75rem,2.6vw,2.75rem); padding-block:clamp(3rem,5.5vw,4.75rem); } /* ---- Kolomkoppen: klein, kapitaal, met een kort rood streepje eronder. Semantisch h2, want anders springt de hiërarchie van h2 naar h4. ---- */ .foot .foot-kop{ color:#fff; font-size:var(--t-xs); font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin:0 0 1.5rem; line-height:1.3; position:relative; padding-bottom:.85rem; } .foot .foot-kop::after{ content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--red); } .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem} /* De link schuift een haar naar rechts bij hover. Genoeg om te merken, te klein om druk te worden. */ .foot-top ul a{display:inline-block; transition:color var(--snel) var(--ease), transform var(--snel) var(--ease)} .foot-top ul a:hover{transform:translateX(3px)} /* Op een touchscreen zijn de voetlinks maar 25 pixels hoog en dat is met een duim niet te raken. Op een aanraakapparaat krijgen ze daarom echte ruimte; met een muis blijft de voet compact, want daar is 25 pixels ruim genoeg. */ @media (hover:none){ .foot-top ul{gap:.15rem} .foot-top ul a{padding-block:.6rem} .foot-contact{gap:.55rem} .foot-contact li{padding-block:.2rem} .foot-contact a{display:inline-flex; align-items:center; min-height:44px} .foot-bottom a{display:inline-block; padding-block:.7rem; margin-block:-.35rem} } /* ---- Merkblok ---- */ .foot-merk .brand{display:inline-flex; margin-bottom:1.4rem} .foot-merk .brand-logo{height:52px; width:auto; display:block} /* Op het donker wordt het woordmerk wit; het tegelraster en het dak houden hun eigen kleur, anders verliest het merk zijn herkenning. */ .foot-merk .brand-logo-naam{fill:#fff} .foot-merk .brand-logo-sub{fill:var(--red)} .foot-over{margin:0 0 1.75rem; max-width:38ch; line-height:1.7} /* ---- Keurmerk: alleen het zegel, geen kader en geen tekst ernaast. Het spreekt voor zich en hoeft niet uitgelegd te worden. ---- */ .foot-keurmerk{display:inline-block; margin-bottom:2rem; line-height:0; transition:opacity var(--snel) var(--ease)} .foot-keurmerk img{display:block; width:104px; height:auto} .foot-keurmerk:hover{opacity:var(--dim)} /* ---- Social: ronde knoppen, rood bij hover ---- */ .foot .foot-social{display:flex; gap:.65rem; margin:0; padding:0; list-style:none} /* De selector moet net zo zwaar wegen als .foot-top ul a, anders wint die met display:inline-block en staat het icoon bovenin de cirkel geplakt. */ .foot .foot-social a{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid var(--navy-line); color:rgba(255,255,255,.75); line-height:0; transform:none; transition:background var(--snel) var(--ease), border-color var(--snel) var(--ease), color var(--snel) var(--ease); } .foot .foot-social svg{width:21px; height:21px; display:block} /* transform:none houdt het schuifje van de tekstlinks weg bij de knoppen. */ .foot .foot-social a:hover{background:var(--red); border-color:var(--red); color:#fff; transform:none} /* ---- Contactkolom: icoon links, tekst rechts ---- */ .foot-contact{gap:1.1rem} .foot-contact li{display:flex; gap:.8rem; align-items:flex-start; line-height:1.6; overflow-wrap:anywhere} .foot-contact svg{width:18px; height:18px; color:var(--red); flex:none; margin-top:.15rem} /* Het adres opent de kaart-app. Geen opvallende linkkleur: het blijft gewoon adresregel, met een streepje eronder zodat je ziet dat er iets gebeurt als je erop drukt. */ .kaart-link{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; border-color:rgba(255,255,255,.25); transition:border-color var(--snel) var(--ease), color var(--snel) var(--ease); } .kaart-link:hover,.kaart-link:focus-visible{color:#fff; border-color:var(--red)} /* Op een lichte ondergrond, zoals de contactpagina. var(--line) is daar te flauw om als link te herkennen. */ .info .kaart-link,.side-card .kaart-link{border-color:rgba(11,31,58,.3)} .info .kaart-link:hover,.side-card .kaart-link:hover{color:var(--navy); border-color:var(--red)} .foot-cta{ margin-top:1.75rem; width:100%; justify-content:center; white-space:nowrap; border-color:var(--red); color:#fff; } .foot-cta:hover{background:var(--red); border-color:var(--red); color:#fff} /* ---- Onderbalk ---- */ .foot-bottom{ background:rgba(0,0,0,.22); border-top:1px solid var(--navy-line); font-size:var(--t-sm); color:rgba(255,255,255,.55); } .foot-bottom .wrap{display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; align-items:center; padding-block:1.35rem} .foot-credit a{color:var(--red)} .foot-credit a:hover{color:#fff} /* ---- Responsief: eerst de vier linkkolommen halveren, daarna alles onder elkaar. Het merkblok gaat als eerste over de volle breedte. ---- */ @media (max-width:1180px){ .foot-top{grid-template-columns:repeat(4,1fr)} .foot-merk{grid-column:1 / -1; max-width:640px} .foot-over{max-width:60ch} } @media (max-width:760px){ .foot-top{grid-template-columns:repeat(2,1fr); gap:2.25rem 2rem} .foot-merk{grid-column:1 / -1} } @media (max-width:520px){ /* De vier linkkolommen blijven ook op een telefoon naast elkaar staan. Eén kolom maakte de voet bijna 1900 pixels hoog, ruim twee schermen scrollen door louter links. Alleen het merkblok en de contactkolom pakken de volle breedte, want daar staan het adres en de knop in. */ .foot-top{grid-template-columns:1fr 1fr; gap:2rem 1.5rem} /* De contactkolom pakte de volle breedte en liet daardoor een leeg vak naast Service achter. Nu staan de vier lijsten netjes twee bij twee. De offerteknop mag daar smaller: minder zijruimte en de tekst mag afbreken in plaats van uit de kolom te lopen. */ /* In een kolom van 156 pixels brak 'Offerte aanvragen →' over twee regels, waardoor die knop 68 pixels hoog werd terwijl elke andere knop op de site 56 is. Minder zijruimte en zonder pijl past hij op één regel. */ .foot-cta{padding-inline:.6rem} .foot-cta::after{content:none} .foot-bottom .wrap{flex-direction:column; align-items:flex-start} } /* ---------- Twee bedrijven naast elkaar ---------- */ /* ---------- Trust-card naast de introductie ---------- */ .intro-grid{display:grid; grid-template-columns:1.5fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:start} @media (max-width:900px){ .intro-grid{grid-template-columns:1fr} /* Praktische informatie hoort op een telefoon boven de lopende tekst. Iemand die de showroom zoekt wil adres en openingstijden zien, niet eerst drie alinea's. */ .intro-grid .eerst-op-mobiel{order:-1; margin-bottom:.5rem} } .trust-card{ background:var(--off); padding:var(--kaart-pad); border-top:3px solid var(--red); } .trust-card img{height:52px; width:auto; margin-bottom:1.4rem} .trust-card h3{margin:0 0 .55rem} .trust-card p{font-size:var(--t-md); margin:0 0 1.2rem; max-width:none} /* ---------- Twee bedrijven ---------- */ .duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.75rem)} /* Twee kaarten naast elkaar houdt het tot een tablet in portret prima vol; elke kaart is daar nog 350 pixels breed. Ze stapelen pas als dat echt te krap wordt. */ @media (max-width:700px){ .duo{grid-template-columns:1fr} } .duo article{background:var(--off); display:flex; flex-direction:column} .duo .duo-media{position:relative; overflow:hidden} .duo .duo-media img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform var(--traag) var(--ease)} .duo article:hover .duo-media img{transform:scale(var(--zoom))} .duo .duo-body{padding:var(--kaart-pad); display:flex; flex-direction:column; flex:1} .duo h3{font-size:1.3rem; margin-bottom:.55rem} .duo p{font-size:var(--t-md); max-width:none} .duo .duo-meta{font-size:var(--t-md); color:var(--muted); margin:1rem 0 1.35rem; line-height:1.6; flex:1} .duo .alink{margin-top:auto; align-self:flex-start} /* ---------- Lopende tekst in de vacaturepagina's ---------- */ .prose h2{margin-top:2.25rem; font-size:1.4rem} .prose h3{margin-top:1.6rem; font-size:var(--t-base)} .prose ul{padding-left:1.15rem; margin-bottom:1.1rem} .prose li{margin-bottom:.45rem} .prose a{color:var(--red)} /* ---------- Verschijnen bij scrollen ---------- */ .js .rv{opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease)} .js .rv.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none} } /* ========================================================================== Secties van de homepage ========================================================================== */ /* ---------- Kop van een sectie ---------- */ .sec-kop{ display:grid; grid-template-columns:1fr auto; gap:1.5rem 3rem; align-items:end; margin-bottom:clamp(2rem,3.5vw,3.25rem); } .sec-kop h2{margin:0; max-width:18ch} .sec-kop p{margin:.85rem 0 0; max-width:52ch} /* Eén zin die de belofte hard maakt, direct onder de kop. Groter dan lopende tekst, kleiner dan de kop: het is een uitspraak, geen alinea. */ .claim{ margin:1.1rem 0 0; max-width:34ch; font-size:clamp(1.12rem,1.65vw,1.42rem); font-weight:600; line-height:1.45; color:var(--navy); } .bg-navy .claim{color:#fff} @media (max-width:760px){ .sec-kop{grid-template-columns:1fr} } .bg-navy .sec-kop p{color:rgba(255,255,255,.7)} /* ---------- Diensten: grote beeldkaarten ---------- Acht kaarten in plaats van twaalf kleine tegels: groter beeld, meer rust, en ruimte voor een regel uitleg onder de titel. */ .diensten{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.6rem,1vw,1rem)} @media (max-width:1080px){ .diensten{grid-template-columns:repeat(3,1fr)} } /* Op een tablet in portret passen er drie naast elkaar; twee gaf daar tegels van 360 bij 450 pixels en veel te weinig overzicht. */ @media (max-width:700px){ .diensten{grid-template-columns:repeat(2,1fr)} } .dienst{ position:relative; display:block; overflow:hidden; text-decoration:none; background:var(--navy-3); aspect-ratio:3/4; min-height:250px; } .dienst img{width:100%; height:100%; object-fit:cover; transition:transform var(--traag) var(--ease)} .dienst::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,21,40,.9) 6%, rgba(7,21,40,.42) 46%, rgba(7,21,40,.06) 82%); transition:opacity var(--snel) var(--ease); } .dienst-tekst{position:absolute; left:1.15rem; right:1.15rem; bottom:1.1rem; z-index:2} .dienst-tekst b{ display:flex; align-items:center; gap:.5rem; font-family:var(--h); font-size:var(--t-base); font-weight:700; color:#fff; line-height:1.25; } .dienst-tekst b::after{ content:"\2192"; color:var(--red); font-size:var(--t-base); transition:transform var(--snel) var(--ease); } .dienst-tekst span{ display:block; margin-top:.3rem; font-size:var(--t-sm); line-height:1.4; color:rgba(255,255,255,.7); max-width:none; } .dienst:hover img{transform:scale(var(--zoom))} .dienst:hover .dienst-tekst b::after{transform:translateX(4px)} .dienst:hover::after{opacity:.88} .dienst:focus-visible{outline:3px solid var(--red); outline-offset:3px} /* Op een telefoon blijft dit een raster van twee. Eén kolom betekende acht kaarten van 335 bij 447 pixels achter elkaar, samen ruim 3600 pixels: je scrolt dan vier en een half scherm door alleen maar tegels. Twee kolommen met een staand formaat brengt datzelfde overzicht terug naar één scherm, en je ziet in één oogopslag hoe breed het aanbod is. Dit blok moet ná de basisregels van .dienst staan: een media query voegt geen specificiteit toe, dus alleen de volgorde beslist. */ @media (max-width:480px){ .diensten{grid-template-columns:repeat(2,1fr); gap:.5rem} .dienst{aspect-ratio:4/5; min-height:0} .dienst-tekst{left:.7rem; right:.7rem; bottom:.75rem} /* Blok in plaats van flex: bij een titel van twee regels sprong het pijltje anders naar een derde regel in plaats van achter het laatste woord te blijven staan. */ .dienst-tekst b{display:block; font-size:var(--t-sm)} .dienst-tekst b::after{display:inline; margin-left:.35rem; font-size:var(--t-md)} /* De ondertitel valt weg: op een tegel van 160 pixels breed wordt dat drie regels priegelwerk en het staat allemaal op de dienstenpagina. */ .dienst-tekst span{display:none} } /* ---------- Band met kerngegevens ---------- Vier feiten die elders op de site al staan: het oprichtingsjaar, de reactietijd die op de offertepagina staat, de eigen ploeg en het NOA-lidmaatschap. Bewust een dunne strook en geen kaarten, want de voordelenkaarten verderop gebruiken die vorm al. */ .feiten-band{background:var(--off); border-block:1px solid var(--line)} .feiten-rij{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; list-style:none; margin:0; padding:0; } .feiten-rij li{ display:flex; align-items:center; gap:.85rem; padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1rem,1.6vw,1.5rem); position:relative; } .feiten-rij li + li::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line); } .feiten-rij svg{width:24px; height:24px; color:var(--red); flex:none} .feiten-rij span{display:flex; flex-direction:column; gap:.1rem; min-width:0} .feiten-rij b{font-family:var(--h); font-size:var(--t-base); font-weight:700; color:var(--navy); line-height:1.25} .feiten-rij span span,.feiten-rij span{color:var(--muted)} .feiten-rij span{font-size:var(--t-sm); line-height:1.4} @media (max-width:900px){ .feiten-rij{grid-template-columns:1fr 1fr} /* Met twee kolommen zit de scheidingslijn op de verkeerde plek: die van het derde item hoort weg, want dat begint een nieuwe rij. */ .feiten-rij li:nth-child(odd) + li::before, .feiten-rij li:nth-child(odd)::before{content:none} .feiten-rij li:nth-child(n+3){border-top:1px solid var(--line)} } @media (max-width:420px){ .feiten-rij{grid-template-columns:1fr} /* Dezelfde selectorvorm als de basisregel: li + li::before weegt zwaarder dan li::before, dus met alleen die laatste bleven de streepjes staan. */ .feiten-rij li + li::before{content:none} .feiten-rij li + li{border-top:1px solid var(--line)} .feiten-rij li{padding-inline:0} } /* ---------- Projecten: asymmetrisch raster ---------- Niet alles even groot; het eerste project krijgt twee kolommen en twee rijen, zodat er hiërarchie ontstaat in plaats van een egale tegelvloer. */ .werk{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,15vw,215px); gap:clamp(.6rem,1vw,1rem); } .werk a{position:relative; display:block; overflow:hidden; background:var(--navy-3); text-decoration:none} .werk a img{width:100%; height:100%; object-fit:cover; transition:transform var(--traag) var(--ease)} .werk a::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,21,40,.86) 4%, rgba(7,21,40,.3) 44%, rgba(7,21,40,0) 76%); transition:opacity var(--snel) var(--ease); } .werk a:hover img{transform:scale(var(--zoom))} .werk a:hover::after{opacity:.9} .werk a:focus-visible{outline:3px solid var(--red); outline-offset:3px} .werk-tekst{position:absolute; left:1.1rem; right:1.1rem; bottom:.95rem; z-index:2} .werk-tekst em{ font-style:normal; display:block; font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:.3rem; } .werk-tekst b{font-family:var(--h); font-size:1rem; font-weight:700; color:#fff; line-height:1.25} .werk .groot{grid-column:span 2; grid-row:span 2} .werk .groot .werk-tekst b{font-size:1.3rem} .werk .breed{grid-column:span 2} @media (max-width:1080px){ .werk{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .werk{grid-template-columns:1fr; grid-auto-rows:190px} .werk .breed{grid-column:span 1} .werk .groot{grid-column:span 1; grid-row:span 2} } /* ---------- Kernpunten: lijn-iconen, geen gekleurde bollen ---------- */ .punten{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)} @media (max-width:1080px){ .punten{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .punten{grid-template-columns:1fr} } .punt{background:#fff; padding:var(--kaart-pad)} .punt svg{width:26px; height:26px; color:var(--navy); margin-bottom:1.1rem} .punt h3{margin:0 0 .45rem} .punt p{margin:0; font-size:var(--t-md); max-width:34ch} /* Op een telefoon staat het icoon naast de kop in plaats van erboven. Dat scheelt per kaart ruim honderd pixels en je leest icoon en titel als één geheel in plaats van als twee losse regels. Ná de basisregels, want een media query voegt geen specificiteit toe. */ @media (max-width:560px){ .punt{display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; row-gap:.3rem; padding:1.2rem var(--gutter)} .punt svg{grid-row:1; width:22px; height:22px; margin:0; align-self:center; stroke-width:1.9} .punt h3{grid-column:2; margin:0; align-self:center} .punt p{grid-column:2; max-width:none} } /* ---------- Werkwijze: tijdlijn ---------- Horizontaal op desktop, verticaal op mobiel. De lijn loopt achter de nummers door, zodat het als één traject leest. */ .tijdlijn{display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; position:relative} .tijdlijn::before{ content:""; position:absolute; left:0; right:0; top:19px; height:1px; background:var(--navy-line); } .stap{position:relative; padding-top:3.4rem} .stap::before{ content:attr(data-nr); position:absolute; top:0; left:0; width:38px; height:38px; display:grid; place-items:center; font-family:var(--h); font-size:var(--t-sm); font-weight:700; color:#fff; background:var(--navy-2); box-shadow:0 0 0 6px var(--navy); } .stap:first-child::before{background:var(--red)} .stap h3{color:#fff; margin:0 0 .4rem; font-size:var(--t-base)} .stap p{margin:0; font-size:var(--t-md); color:rgba(255,255,255,.66); max-width:30ch} @media (max-width:1080px){ .tijdlijn{grid-template-columns:1fr; gap:0} .tijdlijn::before{left:19px; right:auto; top:0; bottom:0; width:1px; height:auto} .stap{padding:0 0 2rem 3.6rem} .stap:last-child{padding-bottom:0} } /* ---------- Feitenbalk (alleen gegevens die echt kloppen) ---------- */ .feiten{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)} @media (max-width:760px){ .feiten{grid-template-columns:1fr 1fr} } .feit{background:#fff; padding:var(--kaart-pad)} .feit b{display:block; font-family:var(--h); font-weight:800; font-size:clamp(1.7rem,2.8vw,2.35rem); color:var(--navy); line-height:1; letter-spacing:-.03em} .feit span{display:block; margin-top:.55rem; font-size:var(--t-md); color:var(--muted); max-width:22ch} /* ---------- Slotsectie ---------- */ .slot{position:relative; overflow:hidden; background:var(--navy)} .slot-bg{position:absolute; inset:0} .slot-bg img{width:100%; height:100%; object-fit:cover; opacity:.2} .slot .wrap{position:relative; z-index:2} .slot-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center} @media (max-width:900px){ .slot-grid{grid-template-columns:1fr} } .slot h2{color:#fff; max-width:16ch} .slot p{color:rgba(255,255,255,.78); max-width:46ch} /* Het formulier in dit blok staat op een witte kaart. Daar hoort de tekst niet wit te zijn, anders valt de uitleg onder het bestandsveld weg. */ .slot .open-form p{color:var(--text); max-width:none} .slot .open-form .note{color:var(--muted)} .slot .btns{margin-top:2rem} .slot-tel{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; font-family:var(--h); font-weight:700; font-size:1.5rem; color:#fff; letter-spacing:-.02em; min-height:44px; } .slot-tel svg{width:22px; height:22px; color:var(--red)} .slot-tel:hover{opacity:var(--dim)} .slot-klein{font-size:var(--t-md); color:rgba(255,255,255,.55); margin:.6rem 0 0} .slot-klein a{display:inline-flex; align-items:center; min-height:44px; padding-block:.4rem; margin-block:-.4rem; color:#fff} /* ========================================================================== Componenten die op de andere pagina's staan Deze stonden eerder verspreid door het bestand; hier bij elkaar en in dezelfde vormtaal als de voorpagina. ========================================================================== */ /* ---------- Zijblok naast een tekstkolom ---------- */ .side-card{ background:var(--off); padding:var(--kaart-pad); border-top:3px solid var(--red); } .side-card h3{margin:0 0 .6rem} .side-card p{font-size:var(--t-md); max-width:none} .side-card .btn{width:100%; margin-top:1.35rem} .bg-grey .side-card{background:var(--white)} /* ---------- Icoontegels (diensten.html) ---------- Kleine variant van de beeldkaarten op de voorpagina: hier gaat het om snel scannen, niet om beeld. */ .tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)} @media (max-width:1000px){ .tiles{grid-template-columns:repeat(3,1fr)} } @media (max-width:620px){ .tiles{grid-template-columns:repeat(2,1fr)} } .tile{ background:#fff; padding:1.75rem 1.1rem; text-align:center; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.85rem; transition:background var(--snel) var(--ease); } .tile:hover{background:var(--off)} .tile svg{width:30px; height:30px; color:var(--navy)} .tile:hover svg{color:var(--red)} .tile b{font-family:var(--h); font-size:var(--t-md); font-weight:700; color:var(--navy); line-height:1.3} .tile:focus-visible{outline:3px solid var(--red); outline-offset:-3px} /* Op een telefoon zijn dit twaalf tegels van 240 pixels hoog voor één woord: samen bijna drie schermen aan snelkoppelingen. Liggend, met het icoon naast het woord, wordt het een compacte inhoudsopgave die je in één blik overziet. Dit blok moet ná de basisregels van .tile staan: een media query voegt geen specificiteit toe, dus alleen de volgorde beslist. */ @media (max-width:900px){ .tile{ flex-direction:row; justify-content:flex-start; text-align:left; padding:.95rem 1rem; gap:.75rem; min-height:56px; } .tile svg{width:22px; height:22px; flex:none; stroke-width:1.9} .tile b{font-size:var(--t-sm)} } @media (max-width:359px){ .tiles{grid-template-columns:1fr} } /* ---------- Genummerde stappen (badkamers, offerte) ---------- Alleen voor echte volgordes in de tijd. Een lijst zonder volgorde hoort gewoon lopende tekst te zijn. */ .steps{counter-reset:s; display:grid; gap:1px; background:var(--line)} .step{counter-increment:s; background:#fff; padding:1.5rem clamp(1.25rem,3vw,2rem); display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start} .step::before{ content:counter(s,decimal-leading-zero); font-family:var(--h); font-weight:700; font-size:var(--t-md); letter-spacing:.02em; color:#fff; background:var(--navy); min-width:2.5rem; height:2.5rem; display:grid; place-items:center; } .step:first-child::before{background:var(--red)} .step h3{margin-bottom:.3rem; font-size:var(--t-base)} .step p{font-size:var(--t-md); margin:0; max-width:60ch} .bg-grey .step{background:var(--white)} .bg-navy .steps{background:var(--navy-line)} .bg-navy .step{background:var(--navy)} .bg-navy .step h3{color:#fff} .bg-navy .step p{color:rgba(255,255,255,.68)} @media (max-width:560px){ .step{grid-template-columns:1fr; gap:.9rem} } /* ---------- Kerncijfers (showroom) ---------- */ .nums{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)} @media (max-width:760px){ .nums{grid-template-columns:1fr 1fr} } .num{background:#fff; padding:var(--kaart-pad)} .num b{display:block; font-family:var(--h); font-weight:800; font-size:clamp(1.7rem,2.8vw,2.35rem); color:var(--navy); line-height:1; letter-spacing:-.03em} .num span{display:block; margin-top:.55rem; font-size:var(--t-md); color:var(--muted); max-width:22ch} .bg-grey .num{background:var(--white)} /* Kop die alleen voor schermlezers en de documentstructuur bestaat. De stappenlijst heeft visueel geen kop nodig, maar zonder kop springt de hiërarchie van h1 naar h3. */ .sr-kop{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ---------- Knop tijdens het verzenden ---------- */ .btn[disabled], button[disabled]{opacity:.6; cursor:progress} .btn[disabled]:hover{background:var(--red)} /* Een gecentreerde sectie (zoals de 404): de kicker is een flexregel met een rood streepje, die centreert niet vanzelf met text-align. */ .midden{text-align:center} .midden .kicker{justify-content:center} .midden .btns{justify-content:center} .midden p{margin-inline:auto} /* ---------- Kleine hulpklassen ---------- Vervangen 113 losse inline styles. Alleen wat echt vaak terugkomt; geen utility-framework, want dan verhuist de rommel gewoon naar de class-attributen. */ .na-tekst{margin-top:1.25rem} /* opsomming of knop direct onder een alinea */ .rood{color:var(--red)} /* losse link in lopende tekst */ .bovenaan{align-content:start} /* knoppenkolom in een grid */ .kop-kort{max-width:22ch} /* kop die niet over de volle breedte hoort */ .tekst-smal{max-width:52ch} /* introtekst naast een kop */ /* ========================================================================== Google-reviews Rustige band op gebroken wit. Geen zwarte balk zoals bij Star Market: hier moet het bij het architecturale, lichte deel van de site passen. De sterren houden het echte Google-amber, want een ster in huisstijlrood leest niet als een Google-beoordeling. ========================================================================== */ .reviews{background:var(--off); overflow:hidden} .reviews-kop{margin-bottom:clamp(1.75rem,3vw,2.5rem)} .google-score{ display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap; text-decoration:none; color:var(--navy); font-size:var(--t-md); background:#fff; border:1px solid var(--line); padding:.7rem 1.2rem; min-height:44px; transition:border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); } .google-score:hover{border-color:var(--navy); box-shadow:var(--schaduw-1)} .google-score strong{font-family:var(--h); font-weight:800; font-size:var(--t-lg); letter-spacing:-.02em} .google-score span:last-child{color:var(--muted); font-size:var(--t-sm)} /* Het echte Google-merkteken. Dit is de enige plek op de site waar andermans kleuren staan; juist daarom klein houden en de rest in de huisstijl laten. */ .g-logo{width:18px; height:18px; flex:none} .reviews-h2-logo{display:inline-flex; vertical-align:-.12em; margin-right:.55rem} .reviews-h2-logo .g-logo{width:1em; height:1em} .reviews-kop h2{display:flex; align-items:center; flex-wrap:wrap; margin:0 0 1.1rem} .ster{color:#c9c9c2; font-size:var(--t-md); letter-spacing:.06em} .ster-vol{color:#a87700} .sterren{display:inline-flex; gap:.05em} /* De rij zelf: horizontaal scrollbaar, met een langzame loop erbovenop. Zonder JS of met beperkte beweging blijft het gewoon een scrolbare rij. */ .reviews-rij{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-inline:var(--gutter); padding-block:.25rem 1.25rem; scrollbar-width:none; } .reviews-rij::-webkit-scrollbar{display:none} .reviews-rij:focus-visible{outline:3px solid var(--red); outline-offset:-3px} .reviews-spoor{ display:flex; gap:clamp(.85rem,1.5vw,1.25rem); list-style:none; margin:0; padding:0; width:max-content; } /* De kaart. Wit op de grijze sectie, een haarlijn eromheen en een zachte schaduw; dat tilt hem net los van de achtergrond zonder dat het opdringt. */ .review{ scroll-snap-align:start; flex:0 0 clamp(272px,26vw,348px); background:#fff; border:1px solid var(--line); border-radius:var(--rad-paneel); box-shadow:var(--schaduw-1); padding:var(--kaart-pad-kort); display:flex; flex-direction:column; } /* Wie het zegt komt eerst: rondje met de beginletter, dan naam en sterren, en rechts het Google-teken als bron. */ .review-kop{display:flex; align-items:center; gap:.75rem; margin-bottom:1rem} .review-avatar{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--h); font-weight:700; font-size:var(--t-base); color:var(--navy); background:linear-gradient(140deg, #eef2f8, #dde5f0); } .review-wie{display:grid; gap:.2rem; min-width:0; flex:1} .review-wie cite{ font-style:normal; font-family:var(--h); font-weight:700; font-size:var(--t-md); color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .review blockquote{ margin:0; font-size:var(--t-md); line-height:1.65; color:var(--text); flex:1; } .review blockquote::before{content:"\201C"} .review blockquote::after{content:"\201D"} /* Doorlopende beweging: alleen als de bezoeker dat niet heeft uitgezet, en alleen als JS het spoor heeft verdubbeld (klasse .loopt). */ @media (prefers-reduced-motion:no-preference){ .reviews-spoor.loopt{animation:schuif var(--duur,60s) linear infinite} /* Pauze wordt door JS gezet in plaats van via :hover. Zo geldt dezelfde regel voor muis, toetsenbord en aanraking, en is hij ook te testen. */ .reviews-spoor.loopt.pauze{animation-play-state:paused} } @keyframes schuif{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - (var(--gat,1rem) / 2)))} } /* ========================================================================== Werken bij Recruitmentpagina, dus andere opbouw dan de klantpagina's: lagere hero, vacatures hoog, en minder tekst per blok. ========================================================================== */ /* ---------- Hero ---------- */ .wb-hero{position:relative; background:var(--navy-3)} .wb-hero-beeld{position:relative; height:clamp(340px,46vh,520px)} .wb-hero-beeld img{width:100%; height:100%; object-fit:cover} .wb-hero-beeld::after{ content:""; position:absolute; inset:0; background: linear-gradient(95deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.82) 34%, rgba(11,31,58,.42) 62%, rgba(11,31,58,.08) 88%), linear-gradient(to bottom, rgba(7,21,40,.58) 0%, rgba(7,21,40,0) 30%); } .wb-hero-tekst{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; padding-block:3rem; } .wb-hero h1{ color:#fff; margin:0; max-width:18ch; font-size:clamp(2rem,4vw,3.4rem); line-height:1.06; text-shadow:0 2px 20px rgba(6,18,36,.45); } .wb-hero .kicker{color:#fff; opacity:var(--dim)} .wb-lead{ color:rgba(255,255,255,.88); margin:1.15rem 0 0; max-width:46ch; font-size:clamp(1rem,1.2vw,1.12rem); text-shadow:0 1px 12px rgba(6,18,36,.5); } .wb-hero .btns{margin-top:1.9rem} /* Op een telefoon dezelfde opzet als de hero op de voorpagina: één beeld met de tekst eroverheen. Eerder stond hier de foto boven en het blauwe tekstblok eronder; dat waren twee losse blokken, samen anderhalf scherm, en het week af van elke andere hero op de site. Het verloop is steiler dan op de laptop, want op 375 pixels ligt de kop op de foto in plaats van ernaast. */ @media (max-width:767px){ .wb-hero{background:var(--navy)} .wb-hero-beeld{position:absolute; inset:0; height:auto; aspect-ratio:auto} .wb-hero-beeld picture{display:block; height:100%} .wb-hero-beeld img{height:100%; object-position:60% 30%} /* Lichter verloop dan bij de voorpagina: deze foto is een lichte ruimte met veel wit, dus met hetzelfde verloop werd het een egaal blauw vlak. De kop houdt zijn schaduw, dus leesbaar blijft het. */ .wb-hero-beeld::after{ background: linear-gradient(103deg, rgba(11,31,58,.93) 0%, rgba(11,31,58,.84) 34%, rgba(11,31,58,.6) 66%, rgba(11,31,58,.34) 100%), linear-gradient(to bottom, rgba(7,21,40,.45) 0%, rgba(7,21,40,0) 30%), linear-gradient(to top, rgba(7,21,40,.55) 0%, rgba(7,21,40,0) 28%); } .wb-hero-tekst{position:relative; z-index:2; background:transparent; padding-block:2.5rem 2.75rem} .wb-hero h1,.wb-lead{max-width:none} .wb-hero .btns .btn{flex:1 1 100%} } /* Tussen 768 en 820 blijft de gestapelde variant staan: daar is de kop vast en doorzichtig, en past de tekst nog niet naast het beeld. */ @media (min-width:768px) and (max-width:820px){ .wb-hero-beeld{height:auto; aspect-ratio:1.9} .wb-hero-beeld::after{background:linear-gradient(to top, rgba(11,31,58,.55) 0%, rgba(11,31,58,0) 45%)} .wb-hero-tekst{position:static; background:var(--navy); padding-block:2.5rem 3rem} .wb-hero h1,.wb-lead{text-shadow:none; max-width:none} } /* Op een telefoon wil een sollicitant eerst de lijst. Op desktop staat "waarom" er logisch vóór, want daar zie je beide in één blik. De volgorde in de HTML blijft dus goed voor voorlezen; alleen de weergave wisselt. */ @media (max-width:820px){ body:has(.wb-hero) main{display:flex; flex-direction:column} body:has(.wb-hero) main > .wb-hero{order:1} body:has(.wb-hero) main > #vacatures{order:2} body:has(.wb-hero) main > *{order:3} /* De hero wat compacter: minder lucht rond de tekst. */ .wb-hero-tekst{padding-block:1.9rem 2.25rem} .wb-lead{margin-top:.9rem} .wb-hero .btns{margin-top:1.5rem} } /* ---------- Vier redenen: 2x2, rustig, met een dunne lijn ---------- */ .redenen{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)} @media (max-width:640px){ .redenen{grid-template-columns:1fr} } .redenen article{background:#fff; padding:var(--kaart-pad); counter-increment:reden} /* Bij een oneven aantal blijft er anders een leeg vak over dat de grijze achtergrond laat zien. De laatste loopt dan over de volle breedte. */ .redenen article:last-child:nth-child(odd){grid-column:1 / -1} .redenen{counter-reset:reden} .redenen b{ display:block; font-family:var(--h); font-size:var(--t-base); font-weight:700; color:var(--navy); margin-bottom:.5rem; padding-top:1.6rem; position:relative; } .redenen b::before{ content:counter(reden,decimal-leading-zero); position:absolute; top:0; left:0; font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; color:var(--red); } .redenen p{margin:0; font-size:var(--t-md); max-width:38ch} /* ---------- Vacaturekaarten ---------- Compacte kaarten naast elkaar in plaats van brede rijen onder elkaar. Drie naast elkaar past precies bij het aantal vacatures en houdt de sectie kort: je ziet in één blik wat er open staat. */ .vacatures{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.75rem,1.4vw,1.25rem); } /* De vacatures staan ALTIJD naast elkaar, op elke schermbreedte. Er is dus bewust GEEN breekpunt dat er twee of een kolom van maakt: een half scherm of een smal venster mag de rij niet opsplitsen. Vanaf 1080px worden de kaarten alleen compacter, en op telefoonformaat wordt het een swipe-rij. */ @media (max-width:1080px){ .vacature-tekst{padding:1rem} .vacature h3{font-size:var(--t-base)} /* De kenmerken passen hier niet meer op een regel; dan onder elkaar zonder scheidingsstip, anders begint regel twee met een losse punt. */ .vacature-meta{flex-direction:column; align-items:flex-start; gap:.3rem} .vacature-meta li+li::before{display:none} } @media (max-width:820px){ .vacature-beeld img{aspect-ratio:4/3} .vacature-tekst{padding:.85rem} .vacature h3{font-size:var(--t-md)} .vacature p{font-size:var(--t-sm); margin-bottom:.8rem} .vacature-meta{font-size:var(--t-xs); padding-top:.7rem} } /* Onder 620px past drie naast elkaar niet meer leesbaar op de breedte. In plaats van stapelen wordt het een rij die je opzij veegt: de kaarten staan dan nog steeds naast elkaar en de tweede piept in beeld, zodat zichtbaar is dat er meer staat. */ @media (max-width:620px){ .vacatures{ grid-template-columns:none; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-padding-left:var(--rand,1.25rem); padding-bottom:.5rem; } .vacature{flex:0 0 78%; scroll-snap-align:start} .vacature-beeld img{aspect-ratio:16/10} .vacature-tekst{padding:1rem} .vacature h3{font-size:var(--t-base)} .vacature p{font-size:var(--t-md)} /* De hoverlift werkt niet op touch en verspringt tijdens het vegen. */ .vacature:hover{transform:none} } .vacature{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); transition:border-color var(--snel) var(--ease), transform var(--snel) var(--ease); } .vacature-beeld{overflow:hidden} .vacature-beeld img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform var(--traag) var(--ease); } .vacature-tekst{ display:flex; flex-direction:column; flex:1; padding:var(--kaart-pad-kort); } .vacature h3{margin:0 0 .4rem; font-size:var(--t-lg); line-height:1.25} /* De link vult de hele kaart, zodat overal klikken werkt zonder een
met een klikhandler die het toetsenbord uitsluit. */ .vacature h3 a{text-decoration:none; color:var(--navy)} .vacature h3 a::after{content:""; position:absolute; inset:0} .vacature h3 a:focus-visible{outline:none} .vacature:has(a:focus-visible){outline:3px solid var(--red); outline-offset:2px} .vacature p{margin:0 0 1rem; font-size:var(--t-md); line-height:1.55; max-width:none} /* Voetregel van de kaart: kenmerken links, pijl rechts. */ .vacature-meta{ list-style:none; margin:auto 0 0; padding:.9rem 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .6rem; font-size:var(--t-sm); color:var(--muted); padding-right:1.8rem; /* ruimte voor de pijl rechtsonder */ } .vacature-meta li{display:flex; align-items:center; gap:.6rem} .vacature-meta li+li::before{ content:""; width:3px; height:3px; background:var(--muted); flex:none; } .vacature-pijl{ position:absolute; right:clamp(1.1rem,1.8vw,1.4rem); bottom:clamp(.95rem,1.6vw,1.25rem); font-size:1.2rem; color:var(--red); line-height:1; transition:transform var(--snel) var(--ease); } .vacature:hover{border-color:var(--navy); transform:translateY(-3px)} .vacature:hover .vacature-beeld img{transform:scale(var(--zoom))} .vacature:hover .vacature-pijl{transform:translateX(4px)} .geen-vacatures{background:var(--off); padding:var(--kaart-pad-ruim); border-top:3px solid var(--red)} .geen-vacatures p{margin:0; max-width:60ch} /* ---------- Brede sfeerband tussen de secties ---------- */ .wb-band{display:block; line-height:0} .wb-band img{width:100%; height:clamp(180px,26vw,320px); object-fit:cover} /* ---------- Hoe het is om hier te werken ---------- */ .praktijk{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem)} @media (max-width:820px){ .praktijk{grid-template-columns:1fr; gap:1.75rem} } .praktijk h3{margin:0 0 .5rem; padding-top:1rem; border-top:2px solid var(--navy)} .praktijk p{margin:0; font-size:var(--t-md); max-width:40ch} /* ---------- Sollicitatieproces: drie stappen, plat ---------- */ .proces{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); } @media (max-width:820px){ .proces{grid-template-columns:1fr; gap:1.5rem} } .proces li{display:grid; gap:.3rem} .proces span{ font-family:var(--h); font-size:var(--t-sm); font-weight:700; letter-spacing:.13em; color:var(--red); } .proces b{font-family:var(--h); font-size:var(--t-base); font-weight:700; color:var(--navy)} .proces p{margin:0; font-size:var(--t-md); max-width:36ch} /* ---------- Open sollicitatie: tekst links, kort formulier rechts ---------- */ .open-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:start} @media (max-width:900px){ .open-grid{grid-template-columns:1fr} } .open-form{background:#fff; padding:var(--kaart-pad-ruim)} .open-form .btn{width:100%; margin-top:.5rem} .open-form .consent{color:var(--text)} .open-form .consent a{color:var(--navy)} /* ---------- Offerte in drie stappen ---------- De balk verschijnt alleen als het script draait; zonder JS staat het formulier gewoon als één geheel op de pagina en klopt 'stap 1 van 3' niet. */ .stappen-balk{margin:0 0 1.75rem} .stappen-tel{margin:0 0 .55rem; font-size:var(--t-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600} .stappen-spoor{height:3px; background:var(--line); overflow:hidden} .stappen-spoor span{display:block; height:100%; width:33.33%; background:var(--red); transition:width var(--traag) var(--ease)} /* LET OP: niet '.stap' noemen. Die klasse bestaat al voor de genummerde processtappen en zet via ::before een navy blokje van 38x38 neer. */ .form-stap{border:0; padding:0; margin:0; min-width:0} /* fieldset opschonen */ .form-stap::before{content:none} /* geen nummerbadge */ .stap-knoppen{display:flex; gap:.75rem; margin-top:1.75rem} .stap-knoppen .btn{flex:1; justify-content:center} /* ---------- Foto's meesturen ---------- */ .opt{font-weight:400; font-size:var(--t-xs); color:var(--muted); text-transform:none; letter-spacing:0} .upload{ position:relative; border:1px dashed var(--line); background:var(--off); padding:1.4rem 1.1rem; text-align:center; transition:border-color var(--snel) var(--ease), background var(--snel) var(--ease); } .upload:hover,.upload.sleep{border-color:var(--navy); background:#fff} .upload.heeft{border-style:solid; border-color:var(--navy)} /* Het echte veld ligt onzichtbaar over de hele zone, zodat één klik of tik overal werkt en de bediening toch een gewoon blijft. */ .upload input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } .upload input[type=file]:focus-visible{outline:3px solid var(--red); outline-offset:2px} .upload-uitleg{margin:0; font-size:var(--t-md); color:var(--muted); line-height:1.5} .upload-link{color:var(--navy); text-decoration:underline} .upload-uitleg small{font-size:var(--t-xs)} .upload-lijst{list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.3rem} .upload-lijst li{font-size:var(--t-sm); color:var(--text); display:flex; gap:.5rem; align-items:center} .upload-lijst li::before{content:""; width:6px; height:6px; background:var(--red); flex:none} .upload-fout{margin:.6rem 0 0; font-size:var(--t-sm); color:var(--red); line-height:1.5} /* ---------- WhatsApp ---------- Eigen groen, want dat is het merk waar mensen op klikken. Verder precies dezelfde vorm en hoogte als de andere knoppen, zodat het geen los zweeftoeter wordt. */ .btn-wa{background:#25d366; color:var(--navy)} .btn-wa:hover{background:#1ebe5a; color:var(--navy)} .btn-wa svg{flex:none} /* ---------- Lokale dienstpagina's ---------- Kop zonder foto: deze pagina's moeten snel bij de inhoud zijn, en een tweede grote afbeelding boven de vouw kost alleen laadtijd. */ .phead-plain{background:var(--navy)} .phead-plain .wrap{padding-block:clamp(2.25rem,4.5vw,3.5rem)} .phead-plain h1{margin:0} .phead-plain .kicker{color:var(--red)} .dienst-top{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:center} .dienstpag-tekst .lead{max-width:46ch} .dienst-acties{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem} .dienst-beeld img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block} @media (max-width:900px){ .dienst-top{grid-template-columns:1fr} } .dienst-kolom{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:start} .dienst-kolom h2{margin:0 0 1.1rem; font-size:1.3rem} @media (max-width:900px){ .dienst-kolom{grid-template-columns:1fr} } /* Opsomming van werkzaamheden. Twee kolommen, want het zijn korte termen en onder elkaar wordt het een onnodig lange sliert. */ .merk-lijst{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.15rem .9rem} .merk-lijst li{display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; font-size:var(--t-md); border-bottom:1px solid var(--line)} .merk-lijst li::before{content:""; width:6px; height:6px; margin-top:.5rem; background:var(--red); flex:none} @media (max-width:520px){ .merk-lijst{grid-template-columns:1fr} } .werkgebied{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:start} .werkgebied h2{margin:0 0 1rem} .werkgebied p{max-width:60ch} .werkgebied-cta{background:var(--off); padding:var(--kaart-pad)} .werkgebied-cta p{margin:0 0 1.25rem; font-size:var(--t-md)} .werkgebied-cta .btn{width:100%; justify-content:center} .werkgebied-cta .btn+.btn{margin-top:.6rem} @media (max-width:900px){ .werkgebied{grid-template-columns:1fr} } /* Doorverwijzing van het dienstenoverzicht naar de eigen dienstpagina. Geen tweede knop ernaast: dan concurreren twee accenten om aandacht. */ .dienst-meer{ display:inline-flex; align-items:center; gap:.4rem; margin-left:1rem; font-size:var(--t-md); font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; } .dienst-meer::after{content:"\2192"; color:var(--red); transition:transform var(--snel) var(--ease)} .dienst-meer:hover{border-bottom-color:var(--red)} .dienst-meer:hover::after{transform:translateX(3px)} @media (max-width:560px){ .dienst-meer{margin-left:0; margin-top:.8rem} } /* ---------- Wat bepaalt de prijs ---------- Zelfde ritme als .redenen, maar drie kolommen omdat het er zes zijn. */ .prijs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem)} .prijs-grid article{border-top:2px solid var(--navy); padding-top:1rem} .prijs-grid b{display:block; font-family:var(--h); font-size:var(--t-base); color:var(--navy); margin-bottom:.4rem} .prijs-grid p{margin:0; font-size:var(--t-md); line-height:1.6} @media (max-width:900px){ .prijs-grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .prijs-grid{grid-template-columns:1fr} } /* Vraag om een review, direct onder de reviews zelf. Rustig, geen tweede rood accent: de offerte blijft de primaire actie op deze pagina. */ .reviews-actie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem 1.5rem; margin-top:clamp(1.5rem,3vw,2.25rem); } .reviews-actie p{margin:0; font-size:var(--t-md); color:var(--muted)} @media (max-width:560px){ .reviews-actie{flex-direction:column; text-align:center} .reviews-actie .btn{width:100%; justify-content:center} } /* Deze twee stonden als inline style in de HTML. Dat werkte tot 900px, want een inline style wint van de media query die .intro-grid platslaat — de tweede kolom bleef dus naast de eerste staan en liep het scherm uit. */ .intro-grid-form{grid-template-columns:1.3fr 1fr} .intro-grid-contact{grid-template-columns:1fr 1.15fr} @media (max-width:900px){ .intro-grid-form,.intro-grid-contact{grid-template-columns:1fr} } /* ---------- Hero met achtergrondvideo ---------- Het POSTERBEELD is het LCP-element en staat altijd in de HTML. De video ligt eroverheen en wordt pas door JavaScript geladen, en alleen op een breed scherm. Op een telefoon blijft het dus bij de foto: megabytes over een mobiele verbinding trekken voor een achtergrondje is niet te verkopen. De drie clips liggen op elkaar; alleen die met .speelt is zichtbaar, dus het wisselen is een overvloeier en geen zwarte flits. */ .hero-media{position:absolute; inset:0} .hero-media picture,.hero-media img{display:block; width:100%; height:100%} .hero-media img{object-fit:cover} .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1var(--snel) var(--ease); pointer-events:none; /* geen bediening: het is decor */ } /* Pas zichtbaar als hij echt speelt, anders zie je een zwart vlak flitsen. */ .hero-video.speelt{opacity:1} /* In de clip met de waterpas staat de man links in beeld, precies achter het tekstblok; rechts blijft er dan een kale betonwand over. Spiegelen zet hem in het zichtbare deel. Er staat geen leesbare tekst in het shot, dus je ziet er niets van terug. */ .hero-video-spiegel{transform:scaleX(-1)} @media (prefers-reduced-motion:reduce){ .hero-video{display:none} } /* ---------- Afwerking voor kleinere schermen ---------- Gemeten over alle 20 pagina's op 390, 430 en 768px: labels stonden op 11,7px, stapnummers op 12px en selectievakjes waren 18px hoog. Op een telefoon of tablet is dat het verschil tussen 'werkt' en 'priegelen'. De typografie wordt daarom al vanaf 980px bijgesteld; de ruimere afstanden pas op echt smalle schermen. */ @media (max-width:980px){ /* Kickers zijn kleine kapitalen met veel letterafstand; onder de 13px worden die op een aanraakscherm echt moeilijk. */ /* Een selectievakje van 18px is met een duim niet te raken. Het label eromheen ving dat op, maar het vakje zelf mag gewoon groter. */ .pick input[type=checkbox], .consent input[type=checkbox]{width:22px; height:22px; flex:none} /* Tekstlinks die als knop dienen krijgen een echte hoogte. */ .dienst-meer{min-height:44px; align-items:center} } @media (max-width:620px){ /* Wat meer lucht tussen de secties: op een smal scherm plakken blokken sneller aan elkaar dan op desktop. */ .section{padding-block:clamp(2.75rem,9vw,3.5rem)} .section-sm{padding-block:clamp(2.25rem,7vw,3rem)} /* Geen automatische afbreekstreepjes: die maakten van 'dezelfde ploeg' een 'dezelf-de ploeg'. Regels zo gelijk mogelijk verdelen leest beter, en break-word blijft als vangnet voor een woord dat echt niet past. */ h1,h2,h3{text-wrap:balance; hyphens:manual} h1{overflow-wrap:break-word} /* De koppen stonden op elke telefoon even groot: h1 op 40 en h2 op 30 pixels, van 320 tot 820 breed. Op een smal toestel is dat lomp en breken woorden af. Hier schalen ze wel mee met de schermbreedte, met een ondergrens die op 320 pixels nog leesbaar en stevig blijft. */ h1{font-size:clamp(1.95rem,8.6vw,2.5rem); line-height:1.08; letter-spacing:-.028em} h2{font-size:clamp(1.6rem,6vw,1.9rem); line-height:1.15; letter-spacing:-.022em} h3{font-size:clamp(1.12rem,4.4vw,1.28rem)} } /* ---------- Merk als één logo ---------- Het merkteken en het woordmerk zaten los van elkaar: een SVG met daarnaast HTML-tekst. Op een smal scherm liepen die uit elkaar en het woordmerk viel weg tegen een foto. Nu is het één SVG die als geheel schaalt, net als bij de andere sites in dit portfolio. De tekst zit er als in en gebruikt dus gewoon Manrope van de pagina. */ .brand{display:inline-flex; align-items:center; text-decoration:none; flex:none} /* aspect-ratio erbij: een SVG met alleen een hoogte heeft een minimale breedte van nul, dus kneep de kolom van het raster hem plat zodra het menu krap werd. Rond 1100 pixels was het logo 79 breed in plaats van 240. */ .brand-logo{height:46px; width:auto; aspect-ratio:302/58; display:block} .brand-logo-naam,.brand-logo-sub{font-family:var(--h)} @media (max-width:1080px){ .brand-logo{height:42px} } @media (max-width:400px){ .brand-logo{height:36px} } /* Het logo is ook een link naar de voorpagina. Op de kleinste schermen wordt het beeld 36px; het klikvlak blijft daar los van op tapformaat. */ .head .brand{min-height:44px} /* ---------- Doorzichtige kop over de hero (vanaf tablet) ---------- Op een groot scherm oogt het rustiger als de kop over de foto ligt en het logo, het menu en de knop dezelfde lichte behandeling delen. Op een telefoon werkt dat juist niet: daar is het beeld klein, staat de kop er bovenop en verdwijnt het woordmerk in de foto. Daarom geldt dit pas vanaf 768px; onder die breedte blijft de dichte witte balk staan. Alleen de voorpagina heeft een .hero, dus alleen daar treedt dit op. */ @media (min-width:768px){ body:has(.hero) .head{position:fixed; left:0; right:0} body:has(.hero) .head:not(.stuck){background:transparent; box-shadow:none} /* ZOLANG DE KOP OVER DE FOTO LIGT is de inhoud licht. Het merkteken houdt zijn eigen rood en blauw; alleen het woordmerk wordt wit. Let op de :not(.stuck): zonder die beperking bleven deze kleuren ook gelden nadat je voorbij de foto was gescrold. */ body:has(.hero) .head:not(.stuck) .nav > a, body:has(.hero) .head:not(.stuck) .head-tel{color:#fff} body:has(.hero) .head:not(.stuck) .nav > a:hover{color:#fff; opacity:var(--dim)} body:has(.hero) .head:not(.stuck) .brand-logo-naam{fill:#fff} body:has(.hero) .head:not(.stuck) .brand-logo-sub{fill:rgba(255,255,255,.82)} body:has(.hero) .head:not(.stuck) .burger{background:rgba(255,255,255,.14)} body:has(.hero) .head:not(.stuck) .burger span{background:#fff} /* ZODRA JE VOORBIJ DE FOTO BENT wordt het gewoon de witte balk van de rest van de site. Dat was eerst navy, maar dan heeft de voorpagina een andere kop dan elke andere pagina en dat leest als twee verschillende sites. Kleuren hoeven hier niet teruggezet: door de :not(.stuck) hierboven vallen ze vanzelf terug op de standaardwaarden. */ body:has(.hero) .head.stuck{background:#fff; box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(11,31,58,.06)} /* Alleen zolang de kop doorzichtig is heeft alles wat hulp nodig om van een drukke foto los te komen; op de navy balk is dat overbodig. */ body:has(.hero) .head:not(.stuck) .brand-logo{ filter:drop-shadow(0 1px 3px rgba(6,18,36,.55)) drop-shadow(0 0 10px rgba(6,18,36,.35)); } body:has(.hero) .head:not(.stuck) .nav > a, body:has(.hero) .head:not(.stuck) .head-tel{text-shadow:0 1px 8px rgba(6,18,36,.55)} } /* Variant van .sec-kop voor een kop die over twee regels loopt. Bij de tweekolomsvariant staat de intro rechts onderaan uitgelijnd; zodra de kop afbreekt zakt die alinea zo ver weg van de kop dat hij er los bij komt te hangen. Hier staat de intro daarom onder de kop, op leesbreedte. */ .sec-kop-stapel{display:block} .sec-kop-stapel > div > p:not(.kicker){margin:1rem 0 0; max-width:62ch} /* ---------- Bedanktpagina ---------- Eén witte kaart die boven een zachte, vervaagde ondergrond zweeft. Het beeld is bewust een klein bestand: het wordt toch onscherp gemaakt en grotendeels weggewassen, dus scherpte is verspilde bandbreedte. */ .dank{ position:relative; overflow:hidden; /* Ruimte in vh, niet in vw: op een laag laptopscherm moet de kaart in één beeld passen, en dan is de hoogte de krappe maat, niet de breedte. */ padding-block:clamp(1rem,2.2vh,2.75rem); background:var(--off); } .dank::before{ content:""; position:absolute; inset:-40px; background:url("../images/d-stucwerk-560.jpg") center/cover no-repeat; filter:blur(26px) saturate(.4) brightness(1.1); opacity:.75; } .dank::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.82) 100%); } .dank .wrap{position:relative; z-index:1; max-width:1120px} .dank-kaart{ background:#fff; text-align:center; padding:clamp(1.75rem,3.4vh,2.9rem) clamp(1.5rem,4vw,3.5rem) clamp(1.25rem,2.6vh,2.1rem); border-radius:var(--rad-paneel); box-shadow:var(--schaduw-2); } /* Het vinkje: groen, want dit is de enige plek op de site waar 'gelukt' belangrijker is dan de huisstijl. De ring eromheen is licht, geen harde cirkel, zodat het rustig blijft. */ .dank-vink{ display:grid; place-items:center; width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:#fff; color:#18a558; box-shadow:0 0 0 1px #dcefe2, 0 0 0 12px rgba(24,165,88,.06), 0 0 0 26px rgba(24,165,88,.035); } .dank-vink svg{width:26px; height:26px} /* Streepje aan weerszijden, zodat de kicker echt gecentreerd oogt. max-width moet eraf: dit is een

en die krijgt van p{max-width:68ch} een smallere doos dan de kaart, waardoor de flexbox links bleef hangen in plaats van in het midden. Geldt ook voor de belregel hieronder. */ .kicker-midden{justify-content:center; max-width:none} .kicker-midden::after{content:""; width:24px; height:2px; background:var(--red); flex:none} /* Iets kleiner dan de standaardkop: deze pagina moet in één scherm passen en de kop is hier bevestiging, geen blikvanger. */ .dank-kaart h1{ margin:0 auto 1rem; max-width:16ch; font-size:clamp(1.85rem,3.15vw,2.8rem); line-height:1.08; } .dank-lead{ margin:0 auto; max-width:56ch; color:var(--text); font-size:clamp(1.02rem,1.4vw,1.14rem); line-height:1.65; } .dank-lead strong{color:var(--navy); font-weight:700} .dank-btns{justify-content:center; margin-top:1.5rem} .dank-bel{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin:1.25rem auto 0; max-width:none; color:var(--text); font-size:1rem; } .dank-bel svg{width:18px; height:18px; color:var(--red); flex:none} .dank-bel a{color:var(--red); font-weight:700; text-decoration:none; border-bottom:2px solid rgba(227,6,19,.3)} .dank-bel a:hover{border-bottom-color:var(--red)} /* De drie punten onderin: geen beloftes met cijfers erin, alleen wat we ook echt op de rest van de site zeggen. */ .dank-punten{ display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:clamp(1.25rem,2.4vh,1.9rem) 0 0; padding:clamp(1.25rem,2.4vh,1.9rem) 0 0; border-top:1px solid var(--line); } .dank-punten li{ display:flex; align-items:center; gap:1rem; text-align:left; padding-inline:clamp(.5rem,1.4vw,1.15rem); } .dank-punten li + li{border-left:1px solid var(--line)} .dank-icoon{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:var(--off); color:var(--red); } .dank-icoon svg{width:20px; height:20px} .dank-punt-tekst{display:flex; flex-direction:column; gap:.15rem} .dank-punt-tekst strong{color:var(--navy); font-size:1rem; font-weight:700} .dank-punt-tekst span{color:var(--muted); font-size:var(--t-md); line-height:1.45} @media (max-width:860px){ .dank-punten{grid-template-columns:1fr; gap:1.5rem; padding-top:2rem} .dank-punten li{border-left:0; padding-inline:0} .dank-punten li + li{border-left:0} } @media (max-width:560px){ .dank-kaart{padding-inline:1.4rem} .dank-btns .btn{width:100%} /* Het nummer mag nooit middenin afbreken. */ .dank-bel{flex-wrap:wrap; font-size:var(--t-md); row-gap:.15rem} .dank-bel a{white-space:nowrap} }