/* ============================================================ Groenveld Hoveniers — fotografisch & direct Het werk spreekt: grote foto's, geen kaarten, geen schaduwen. Wat deze versie strak trekt: - TYPOGRAFIE. Eén koplettertype (Geist) en één bodylettertype (de systeem-sans), met één schaal (--tekst-*). Elke kop pakte eerder zijn eigen clamp met eigen weight 800; dat gaf de willekeurig grote koppen. - RITME. Alle secties gebruiken dezelfde verticale maten (--ruimte-*) en dezelfde zijmarge (--rand). Geen losse 4.5rem / 5rem / 3.25rem meer. - KLEUR. Het groen is het enige accent; de rest is inkt op papier. ============================================================ */ /* Geist staat al op dit domein voor de portfoliosite; hergebruiken kost dus geen extra download. Alleen voor de koppen — de body blijft systeemtekst, zodat de pagina leesbaar is voordat het font binnen is. */ @font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root{ --groen:#2a5d33; --groen-diep:#1c3a22; --groen-licht:#bcd3bf; --nacht:#101b12; --papier:#f6f3ec; --papier-2:#efeade; /* Warme neutrale tint naast het groen: zand, geen grijs. Draagt de balk bovenaan en de knop in de slotband, zodat die twee bij elkaar horen. */ --zand:#e4d8bd; --zand-lijn:#cdbc99; --inkt:#1b1813; --inkt-zacht:#4c463c; --wit:#ffffff; --lijn:rgba(27,24,19,.14); --kop:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --tekst:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Eén schaal voor de hele site. Koppen pakken hier hun maat, niet elk hun eigen clamp. */ --tekst-xs: .8125rem; --tekst-s: .9375rem; --tekst-m: 1.0625rem; --tekst-l: clamp(1.125rem, 1.1rem + .4vw, 1.3rem); --tekst-xl: clamp(1.35rem, 1.2rem + 1vw, 1.75rem); --tekst-2xl: clamp(1.75rem, 1.4rem + 1.9vw, 2.5rem); --tekst-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); /* Eén verticaal ritme. Compacter gezet: de sectiemarge stond op 6rem, wat tussen twee secties 12rem (192px) wit gaf. Nu 4rem, dus 8rem ertussen. */ --ruimte-sectie: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); --ruimte-blok: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); --ruimte-regel: .85rem; --rand: clamp(1.25rem, 4vw, 3rem); /* ── Breedtes ──────────────────────────────────────────────────────── Er was er maar één: 44rem. Daardoor stond álles — koppen, intro's, cijfers, CTA — in een smal kolommetje midden op het scherm, terwijl de fotorasters 72rem breed waren. Dat verschil is precies wat een site op een sjabloon laat lijken. Nu drie: de sectiebreedte is de standaard, de leesbreedte alleen voor lopende tekst, en beeld mag volle breedte. */ --breedte: 84rem; /* 1344px — het raster waar alles op uitlijnt */ --breedte-lees: 46rem; /* alleen voor doorlopende tekstblokken */ /* Hoogte van de balk. Die staat vast bovenaan over de volle breedte, dus er is verder geen marge of afronding: geen zwevend element. */ --balk: 74px; } *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; /* iOS Safari toont bij de overscroll-bounce voorbij de footer de canvas-kleur van . Stond die op niets, dan was dat wit. Nu is het de kleur van de eigen voet, dus je veert in de site door. overscroll-behavior alleen op html, niet op body. */ background: var(--nacht); overscroll-behavior-y: none; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ font-family:var(--tekst); font-size:var(--tekst-m); line-height:1.65; color:var(--inkt); background:var(--papier); -webkit-tap-highlight-color:transparent; overflow-wrap:break-word; } a, button, input, select, textarea{ touch-action:manipulation; } a{color:inherit} img{ display:block; max-width:100%; height:auto; } /* Alle koppen in het koplettertype, één weight, één letterspatiëring. Eerder stond overal font-weight 800 met per kop een eigen clamp. */ h1,h2,h3{ font-family:var(--kop); font-weight:650; line-height:1.1; letter-spacing:-0.02em; text-wrap:balance; } h1{ font-size:var(--tekst-3xl); } h2{ font-size:var(--tekst-2xl); } h3{ font-size:var(--tekst-xl); } /* ---------- Toegankelijkheid ---------- */ .skip, .skip-link{ position:absolute; left:-999rem; } .skip:focus, .skip-link:focus{ left:1rem; top:1rem; z-index:100; background:var(--inkt); color:var(--wit); padding:.9rem 1.4rem; font-weight:700; text-decoration:none; } :focus-visible{ outline:3px solid var(--groen); outline-offset:2px; } /* Op de donkere vlakken is het groene accent te donker om als focusring te zien; daar een lichte ring. LET OP: deze lijst eindigde eerder op een komma vóór een commentaarblok, waardoor .disclaimer erin werd gezogen en de hele regel iets anders deed dan bedoeld. */ /* .contact stond in deze lijst toen die sectie nog een donker groen vlak was. De pagina is nu licht, dus daar hoort de gewone groene focusring weer. */ .hero :focus-visible, .slotcta :focus-visible, .voet :focus-visible, .disclaimer :focus-visible{ outline-color:var(--wit); } /* ---------- Portfolio-disclaimer ---------- */ .disclaimer{ background:var(--inkt); color:var(--papier); } .disclaimer__inner{ max-width:var(--breedte); margin:0 auto; padding:.55rem var(--rand); font-size:var(--tekst-xs); line-height:1.5; } .disclaimer a{ color:var(--papier); font-weight:700; display:inline-block; padding:.2rem 0; } /* ---------- Kop: een vaste plaat over de volle breedte ---------- Bewust GEEN zwevende balk met marge en ronde hoeken: dat is de taal van een digitaal bureau, niet van een hovenier. Dit is een stevige plaat in zandtint die vastzit aan de bovenrand, met een dikke groene onderrand als fundament. Op de donkere hero eronder leest dat als een plank op een tuin; op de lichte subpagina's zorgt diezelfde rand voor de scheiding. De wikkel blijft nodig omdat balk en uitklapmenu samen moeten plakken. */ .topwrap{ position:sticky; top:0; z-index:60; } .top{ background:var(--zand); display:flex; align-items:center; gap:.5rem clamp(.75rem,2vw,2rem); min-height:var(--balk); /* Geen verticale padding: de menu-items zijn zelf zo hoog als de balk, zodat de streep van de actieve pagina precies op de groene onderrand landt. Padding erbij zou die hoogtes optellen en de balk 93px maken. */ padding:0 max(var(--rand), calc((100% - var(--breedte)) / 2)); color:var(--inkt); border-bottom:3px solid var(--groen-diep); } /* Naam ruim genoeg om te lezen, met de plaatsbepaling eronder — dat is voor een lokaal bedrijf het halve verhaal. */ .top__brand{ font-family:var(--kop); font-weight:650; font-size:clamp(1.15rem,1rem + .6vw,1.4rem); line-height:1.15; letter-spacing:-0.015em; text-decoration:none; color:var(--groen-diep); /* Mag krimpen op een smal scherm; met flex:none liep de rij op 320px over de rand omdat de belknop en de hamburger hun ruimte opeisen. */ flex:0 1 auto; min-width:0; padding:.2rem 0; margin-right:auto; } .top__brand:hover .top__plaats{ color:var(--groen); } .top__plaats{ display:block; font-family:var(--tekst); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--inkt-zacht); margin-top:.2rem; } /* Bellen is voor een hovenier de belangrijkste actie, dus dit is het enige gevulde vlak in de balk: het accentgroen op zand, en vierkant zoals alle knoppen op deze site. */ .top__cta{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.6rem 1.35rem; background:var(--groen); color:var(--wit); font-family:var(--kop); font-weight:650; font-size:var(--tekst-s); letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; transition:background .2s ease; } .top__cta:hover, .top__cta:focus-visible{ background:var(--groen-diep); } /* ---------- Hoofdnavigatie ---------- */ /* Het menu staat rechts, tegen de belknop aan, in plaats van los in het midden te zweven. Dat leest als één geheel: naam links, navigatie plus actie rechts. */ .hoofdnav{ margin-left:auto; } .hoofdnav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.15rem .35rem; } .hoofdnav a{ position:relative; display:inline-flex; align-items:center; min-height:var(--balk); padding:0 clamp(.6rem,1vw,.9rem); font-size:var(--tekst-s); font-weight:600; color:var(--groen-diep); text-decoration:none; transition:background-color .18s ease; } /* Twee rustige staten, allebei zonder kleurwissel van de tekst: hover legt een lichte zandtint achter het item, de huidige pagina krijgt een stevige streep die op de groene onderrand van de balk staat. Dat kan hier weer, want de balk heeft rechte hoeken en zit vast aan de bovenrand. */ .hoofdnav a:hover{ background:rgba(27,24,19,.07); } .hoofdnav a[aria-current="page"]{ font-weight:700; } .hoofdnav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; background:var(--groen); } /* Hamburger — twee lijnen die naar een kruis draaien. */ .menuknop{ display:none; /* Een kale