/* ========================================================================== Dierense Speeltuin Vereniging (DSV): Design system 2026 Gebaseerd op DSV Stijlgids 2026 en het Website Ontwikkeldocument 2026. Doel: WCAG 2.2 AA, mobile-first, geen externe afhankelijkheden. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Lettertypes (self-hosted, met veilige fallback) Plaats de .woff2-bestanden in /assets/fonts/. Ontbreken ze, dan valt de site automatisch terug op een vriendelijke systeem-sans. Nooit een externe fontserver: dat zou zonder toestemming IP-adressen delen (AVG). -------------------------------------------------------------------------- */ /* Koppen: Montserrat. Platte tekst: Open Sans. Beide staan op onze eigen server en worden niet bij Google opgehaald: dat scheelt een verzoek naar een derde partij, en de cookieverklaring hoeft er niets over te zeggen. Alleen de gewichten die werkelijk gebruikt worden, zodat er niets wordt gedownload dat nergens op de pagina staat. */ @font-face{font-family:"Montserrat";src:url("../fonts/montserrat-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Montserrat";src:url("../fonts/montserrat-extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("../fonts/opensans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("../fonts/opensans-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("../fonts/opensans-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("../fonts/opensans-extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} /* -------------------------------------------------------------------------- 2. Design tokens -------------------------------------------------------------------------- */ :root{ /* Merkkleuren: exact uit Stijlgids 2026 */ --c-green:#167A3A; /* DSV Donkergroen */ --c-play:#74BE58; /* Speelgroen */ --c-yellow:#FFBE18; /* Zongeel */ --c-orange:#F04A23; /* Actie-oranje: decoratief vlak */ --c-orange-btn:#C93C13; /* 5,1:1 met wit: knoppen */ --c-blue:#1598C9; /* Frisblauw */ --c-white:#FAFAF7; /* Warm wit */ --c-ink:#262626; /* Antraciet */ /* Toegankelijke tekstvarianten (zie TOEGANKELIJKHEID.md). Zongeel, actie-oranje en frisblauw halen op wit geen 4,5:1 en worden daarom nooit als tekstkleur gebruikt: wel als vlak met donkere tekst. */ --c-green-dark:#0F5C2B; /* 8,4:1 op wit: koppen, nadruk */ --c-green-deep:#0B4520; /* 11,9:1: voetteksten op lichtgroen */ --c-orange-text:#B8380F; /* 5,4:1 op wit: accenttekst, labels */ --c-blue-text:#0B6E92; /* 5,3:1 op wit: links, informatie */ --c-ink-soft:#4A4A4A; /* 8,9:1: bijschriften */ /* Vlakken */ --c-bg:#FFFFFF; --c-bg-soft:#F4F7F1; /* zacht groen-wit */ --c-bg-mint:#E8F2E6; --c-bg-sun:#FFF6DC; --c-bg-sky:#E4F3FA; --c-line:#DDE4DA; --c-line-strong:#B9C7B4; /* decoratieve lijn */ --c-border-ui:#7E937A; /* 3,3:1: randen van bedienbare velden */ /* Statuskleuren */ --c-open:#167A3A; --c-open-bg:#E8F2E6; --c-closed:#B8380F; --c-closed-bg:#FDECE6; --c-warn-bg:#FFF6DC; --c-warn-line:#E0A500; /* Typografie */ --f-head:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --f-body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; /* Maatvoering */ --w-max:1240px; --w-text:68ch; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --shadow-1:0 1px 2px rgba(15,60,30,.06), 0 2px 8px rgba(15,60,30,.06); --shadow-2:0 4px 12px rgba(15,60,30,.09), 0 12px 28px rgba(15,60,30,.08); --shadow-focus:0 0 0 3px #fff, 0 0 0 6px var(--c-blue-text); /* Bannerhoogte: op elke pagina gelijk, zodat er niets verspringt */ --banner-h:348px; --tap:44px; /* minimale touchdoelgrootte */ --header-h:80px; --logo-h:52px; } /* -------------------------------------------------------------------------- 3. Reset & basis -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)} /* Tekstgrootte. In deze stylesheet staat ALLEEN de letterhoogte in rem; alle marges, breedtes en knopmaten staan in px. Het verhogen van de wortelgrootte maakt dus de tekst groter zonder dat de indeling verschuift: regels bevatten simpelweg minder woorden. Daardoor kan dit niet stuk. */ html{font-size:16px} html[data-tekst="groter"]{font-size:18.4px} /* 115% */ html[data-tekst="grootst"]{font-size:20.8px} /* 130% */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--c-bg); color:var(--c-ink); font-family:var(--f-body); font-size:1.0625rem; /* 17 px bij de standaard wortelgrootte */ line-height:1.65; font-weight:400; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; } @media (min-width:1024px){body{font-size:1.125rem}} /* 18 px */ img,svg,video{max-width:100%;height:auto;display:block} img{background-color:var(--c-bg-mint)} /* voorkomt witte gaten tijdens laden */ /* Montserrat is een flink bredere letter dan de afgeronde letter die hier eerder stond: dezelfde kop neemt er ongeveer een tiende meer ruimte mee in beslag. Daarom staan de koppen iets kleiner en iets strakker op elkaar, zodat zij niet ineens over twee regels vallen waar zij eerst op een regel pasten. */ h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.2;color:var(--c-green-dark);margin:0 0 var(--s-4)} h1{font-size:clamp(31px,5.2vw,46px);letter-spacing:-.02em} /* text-wrap:balance verdeelt een kop die over twee regels loopt gelijkmatig, in plaats van een volle eerste regel met één woord eronder. */ h2{font-size:clamp(23px,3.5vw,34px);letter-spacing:-.015em;text-wrap:balance} h3{font-size:clamp(18px,2.3vw,22px);letter-spacing:-.01em} h4{font-size:clamp(17px,1.9vw,19px);color:var(--c-ink)} p{margin:0 0 var(--s-4)} p,li{max-width:var(--w-text)} .u-wide p,.u-wide li{max-width:none} a{color:var(--c-blue-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} a:hover{color:var(--c-green-dark)} ul,ol{padding-left:1.3em;margin:0 0 var(--s-4)} li{margin-bottom:var(--s-2)} strong,b{font-weight:700} hr{border:0;border-top:1px solid var(--c-line);margin:var(--s-6) 0} small{font-size:.875em} abbr[title]{text-decoration-style:dotted;cursor:help} /* Zichtbare, consistente focus op álles wat bedienbaar is */ :focus{outline:none} :focus-visible{ outline:3px solid var(--c-blue-text); outline-offset:2px; border-radius:4px; } .btn:focus-visible,.nav__link:focus-visible,.card:focus-within{outline-offset:3px} ::selection{background:var(--c-yellow);color:var(--c-ink)} /* Skip-link */ .skip{ position:absolute;left:var(--s-4);top:-100px;z-index:1000; background:var(--c-green);color:#fff;padding:14px 22px;border-radius:var(--r-sm); font-weight:700;text-decoration:none;transition:top .15s ease; } .skip:focus{top:var(--s-4);color:#fff} /* Alleen voor schermlezers */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--s-4)} @media (min-width:768px){.wrap{padding-inline:var(--s-5)}} @media (min-width:1440px){.wrap{padding-inline:var(--s-6)}} .section{padding-block:var(--s-7)} @media (min-width:768px){.section{padding-block:var(--s-8)}} .section--tight{padding-block:var(--s-6)} .section--soft{background:var(--c-bg-soft)} .section--mint{background:var(--c-bg-mint)} .section--green{background:var(--c-green);color:#fff} .section--green h2,.section--green h3{color:#fff} .section--green a{color:#fff} /* Knoppen binnen een groen vlak behouden hun eigen tekstkleur */ .section--green .btn--onGreen,.cta .btn--onGreen{color:var(--c-green-dark)} .section--green .btn--onGreen:hover,.cta .btn--onGreen:hover{color:var(--c-green-deep)} .section--green .btn--sun,.cta .btn--sun{color:#3D2E00} .section--green .facts svg{color:#CFEBC4} .section__head{margin-bottom:var(--s-6);max-width:var(--w-text)} .section__head p{color:var(--c-ink-soft);font-size:1.05em;margin-bottom:0} .section--green .section__head p{color:rgba(255,255,255,.92)} .grid{display:grid;gap:var(--s-5)} /* Voorkomt dat brede inhoud (tabellen, lange woorden) de kolom oprekt */ .grid>*{min-width:0} @media (min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}} @media (min-width:768px){.grid--3{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}} @media (min-width:640px){.grid--4{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){.grid--4{grid-template-columns:repeat(4,1fr)}} @media (min-width:900px){.grid--split{grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-7)} /* Staat er rechts een hoge stapel blokken, dan hoort de tekst links bovenaan te beginnen in plaats van midden in het witte vlak te zweven. */ .grid--split.grid--boven{align-items:start}} @media (min-width:1024px){.grid--sidebar{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-7);align-items:start}} .stack>*+*{margin-top:var(--s-4)} .center{text-align:center} .center p{margin-inline:auto} /* -------------------------------------------------------------------------- 5. Knoppen -------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:var(--tap);padding:12px 24px; font-family:var(--f-body);font-size:1rem;font-weight:700;line-height:1.2; border:2px solid transparent;border-radius:var(--r-pill); text-decoration:none;cursor:pointer;text-align:center; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} @media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none;transition:none}} .btn--primary{background:var(--c-green);color:#fff;border-color:var(--c-green)} .btn--primary:hover{background:var(--c-green-dark);border-color:var(--c-green-dark);color:#fff} .btn--action{background:var(--c-orange-btn);color:#fff;border-color:var(--c-orange-btn)} .btn--action:hover{background:#A32E0C;border-color:#A32E0C;color:#fff} .btn--secondary{background:#fff;color:var(--c-green-dark);border-color:var(--c-green)} .btn--secondary:hover{background:var(--c-bg-mint);color:var(--c-green-deep)} .btn--ghost{background:transparent;color:var(--c-green-dark);border-color:var(--c-border-ui)} .btn--ghost:hover{background:var(--c-bg-soft);border-color:var(--c-green)} .btn--onGreen{background:#fff;color:var(--c-green-dark);border-color:#fff} .btn--onGreen:hover{background:var(--c-bg-sun);color:var(--c-green-deep)} .btn--sun{background:var(--c-yellow);color:#3D2E00;border-color:var(--c-yellow)} .btn--sun:hover{background:#F0AF00;border-color:#F0AF00;color:#3D2E00} .btn--lg{font-size:1.075rem;padding:15px 30px;min-height:52px} .btn--sm{padding:8px 16px;min-height:40px;font-size:.9rem} .btn--block{display:flex;width:100%} .btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)} .btn-row--center{justify-content:center} /* Tekstlink met pijl */ .link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:var(--c-blue-text);min-height:32px} .link-arrow::after{content:"→";transition:transform .18s ease} .link-arrow:hover{text-decoration:underline;color:var(--c-green-dark)} .link-arrow:hover::after{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){.link-arrow:hover::after{transform:none}} /* -------------------------------------------------------------------------- 6. Header & navigatie -------------------------------------------------------------------------- */ /* De bovenbalk houdt een vaste maat, ook als de bezoeker de tekst groter zet. Schaalde hij mee, dan werd de rij breder en schoof de knop die je net had aangeklikt onder je muis vandaan. De tekst op de pagina zelf wordt wel groter; daar is de knop voor. */ .topbar{background:var(--c-green);color:#fff;font-size:14px} .topbar__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);min-height:46px;justify-content:space-between} .topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:6px 2px;white-space:nowrap} .topbar svg{flex:none;width:17px;height:17px} .topbar a:hover{text-decoration:underline;color:#fff} .topbar__list{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0;padding:0;list-style:none} .topbar__list li{margin:0} /* Op tablet is er te weinig ruimte voor alles; adres en e-mail vallen als eerste weg */ /* Adres en e-mailadres verschijnen pas als ze er echt bij passen. Bij 1024 px brak de balk naar twee regels zodra de openingsregel wat langer is (“Vandaag open vanaf 13.00 uur” is langer dan “Vandaag gesloten”). */ @media (max-width:1119px){.topbar__adres,.topbar__mail{display:none}} @media (max-width:767px){.topbar{display:none}} /* De kopbalk heeft een vaste hoogte en verandert niet tijdens het scrollen. Eerder kromp hij zodra je scrolde. Dat maakt de pagina korter, waarop de browser de scrollpositie bijstelt en de inhoud onder je muis wegschuift; dat zag je als trillen. Een balk die niet van maat verandert, kan niet trillen. De hoogte is daarom meteen wat lager gezet, zodat er nog steeds genoeg pagina zichtbaar blijft. */ .header{position:-webkit-sticky;position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--c-line);box-shadow:0 1px 0 rgba(0,0,0,.02)} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--header-h)} /* Het liggende logo is 2,8x zo breed als hoog. De hoogte is daarop afgestemd, zodat het logo groot oogt zonder de navigatie te verdringen. */ @media (min-width:768px){:root{--logo-h:56px;--header-h:82px}} /* Tussen 1024 en 1199 px staat de volledige navigatie naast het logo; daar is iets minder hoogte nodig om alles ruim te laten passen. */ @media (min-width:1024px) and (max-width:1199px){:root{--logo-h:52px;--header-h:78px}} @media (min-width:1200px){:root{--logo-h:62px;--header-h:90px}} /* Het logo bevat de verenigingsnaam al als beeldmerk; een losse tekst ernaast herhaalt dat alleen maar en kostte de ruimte die het logo nodig heeft. */ .brand{display:flex;align-items:center;text-decoration:none;padding:4px 0;flex:0 0 auto} /* flex:none voorkomt dat het logo wordt samengedrukt als de navigatie krap zit; de stijlgids verbiedt vervormen van het logo. */ .brand img{height:var(--logo-h);width:auto;flex:0 0 auto} .brand__txt{display:none} .nav{display:none} @media (min-width:1200px){.nav__link{padding:10px 14px;font-size:.97rem}} @media (min-width:1024px){ .nav{display:block} .nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} .nav__list li{margin:0;position:relative} .nav__link{ display:inline-flex;align-items:center;gap:5px; padding:10px 11px;min-height:var(--tap); font-weight:700;font-size:.94rem;color:var(--c-ink);white-space:nowrap; text-decoration:none;border-radius:var(--r-sm); } .nav__link:hover{background:var(--c-bg-mint);color:var(--c-green-dark)} .nav__link[aria-current="page"],.nav__link.is-active{color:var(--c-green-dark);background:var(--c-bg-mint)} .nav__link[aria-expanded]::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease} .nav__link[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)} .nav__sub{ position:absolute;top:100%;left:0;min-width:270px; background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md); box-shadow:var(--shadow-2);padding:8px;list-style:none;margin:6px 0 0; display:none;z-index:70; } /* Onzichtbare brug over de ruimte tussen het menu-item en het uitklapmenu. Zonder deze brug verlaat de muis het menu onderweg en klapt het dicht. */ .nav__sub::before{ content:"";position:absolute;left:0;right:0;top:-12px;height:12px; } /* Zijwaartse tolerantie: ook een schuine beweging blijft binnen het menu. */ .nav__list>li{padding-bottom:2px} .nav__sub.is-open{display:block} .nav__sub a{display:block;padding:11px 14px;min-height:var(--tap);border-radius:var(--r-sm);color:var(--c-ink);text-decoration:none;font-weight:600;font-size:.95rem;line-height:1.35} .nav__sub a:hover{background:var(--c-bg-mint);color:var(--c-green-dark)} .nav__sub a[aria-current="page"]{background:var(--c-bg-mint);color:var(--c-green-dark)} } .header__actions{display:flex;align-items:center;gap:var(--s-2)} .header__cta{display:none} @media (min-width:1024px){.header__cta{display:inline-flex}} /* Pas vanaf 1200 px is er ruimte om de knop op één regel te zetten */ @media (min-width:1200px){.header__cta{white-space:nowrap}} /* Zoekknop in de kopbalk. Op een telefoon alleen het vergrootglas, vanaf tablet met het woord erbij: een icoon zonder tekst wordt vaak niet herkend. */ .zoekknop{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:var(--tap);min-width:var(--tap);padding:8px 12px; background:#fff;border:2px solid var(--c-border-ui);border-radius:var(--r-pill); color:var(--c-green-dark);font-family:var(--f-body);font-weight:700;font-size:.9rem;cursor:pointer; } .zoekknop:hover{background:var(--c-bg-mint);border-color:var(--c-green)} .zoekknop__ic{width:20px;height:20px;flex:none} .zoekknop__txt{display:none} @media (min-width:768px) and (max-width:1023px){.zoekknop__txt{display:inline}} /* Tussen 1024 en 1199 px staat de volledige navigatie naast het logo en is er geen ruimte voor het woord erbij; daar volstaat het vergrootglas. */ @media (min-width:1200px){.zoekknop__txt{display:inline}} /* Zoeken in het mobiele menu */ .drawer__zoek{ display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap); margin:var(--s-4) 0 0;padding:12px 14px; background:var(--c-bg-mint);border:2px solid var(--c-green);border-radius:var(--r-md); color:var(--c-green-dark);font-family:var(--f-body);font-weight:700;font-size:1rem;cursor:pointer; } .drawer__zoek svg{width:20px;height:20px;flex:none} .drawer__zoek:hover{background:#fff} /* Zoekvenster */ .zoek{position:fixed;top:0;right:0;bottom:0;left:0;z-index:140;display:flex;justify-content:center; align-items:flex-start;padding:0 16px} .zoek[hidden]{display:none} .zoek__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(11,69,32,.55);opacity:0;transition:opacity .18s ease} .zoek.is-open .zoek__scrim{opacity:1} /* Het zoekvenster is de enige plek op de site waar een bezoeker zelf iets intikt. Het mag er dus uitnodigend uitzien in plaats van als een kaal invulveld: een groene rand bovenlangs in de huisstijl, een ruimer zoekvak en een zachte achtergrond onder de resultaten. */ .zoek__paneel{position:relative;width:100%;max-width:760px;margin-top:7vh; background:#fff;border-radius:var(--r-lg);box-shadow:0 22px 70px rgba(11,69,32,.34); padding:16px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden; transform:translateY(-10px);opacity:0;transition:transform .18s ease,opacity .18s ease} .zoek__paneel::before{content:"";position:absolute;left:0;right:0;top:0;height:6px; background:linear-gradient(90deg,var(--c-green) 0%,var(--c-play) 46%,var(--c-yellow) 100%)} .zoek.is-open .zoek__paneel{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ .zoek__scrim,.zoek__paneel{transition:none} .zoek__paneel{transform:none} } @media (min-width:768px){.zoek__paneel{padding:20px}} .zoek__balk{display:flex;align-items:center;gap:10px;margin-top:10px; border:2px solid var(--c-border-ui);border-radius:var(--r-pill); padding:6px 8px 6px 16px;background:var(--c-bg-soft)} .zoek__balk:focus-within{border-color:var(--c-green);background:#fff; box-shadow:0 0 0 3px rgba(22,122,58,.18)} .zoek__ic{display:inline-flex;color:var(--c-green);flex:none} .zoek__ic svg{width:24px;height:24px} #zoekveld{flex:1 1 auto;min-width:0;min-height:var(--tap);border:0;outline:0;background:none; font-family:var(--f-body);font-size:1.05rem;color:var(--c-ink)} #zoekveld::placeholder{color:#6B6B67} #zoekveld::-webkit-search-cancel-button{-webkit-appearance:none} .zoek__sluit{flex:none;display:inline-flex;align-items:center;justify-content:center; min-width:var(--tap);min-height:var(--tap);border:0;border-radius:var(--r-pill); background:var(--c-bg-mint);color:var(--c-green-dark);cursor:pointer} .zoek__sluit:hover{background:var(--c-green);color:#fff} .zoek__sluit svg{width:20px;height:20px} .zoek__hint{margin:10px 4px 0;font-size:.85rem;color:var(--c-ink-soft)} .zoek__telling{margin:12px 4px 0;font-size:.92rem;font-weight:700;color:var(--c-green-dark)} .zoek__telling:empty{display:none} /* Veelgezochte onderwerpen. Wie het venster opent zonder te weten wat hij intikt, heeft hier meteen vijf ingangen. Zij verdwijnen zodra er getypt is. */ .zoek__vaak{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line)} .zoek__vaak[hidden]{display:none} .zoek__vaaktitel{margin:0 0 var(--s-3);font-size:.8rem;font-weight:800; text-transform:uppercase;letter-spacing:.09em;color:var(--c-ink-soft)} .zoek__vaak ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .zoek__vaak li{margin:0;max-width:none} .zoek__vaak button{ font:inherit;font-size:.92rem;font-weight:700;cursor:pointer; padding:9px 15px;border-radius:var(--r-pill); border:1px solid var(--c-line-strong);background:var(--c-bg-mint); color:var(--c-green-deep)} .zoek__vaak button:hover,.zoek__vaak button:focus-visible{ background:var(--c-green);border-color:var(--c-green);color:#fff} .zoek__uitslag{list-style:none;margin:10px 0 0;padding:0;overflow-y:auto; -webkit-overflow-scrolling:touch} .zoek__uitslag:empty{display:none} .zoek__uitslag li{margin:0} .zoek__uitslag li + li{margin-top:6px} .zoek__hit{display:block;padding:12px 14px;border-radius:var(--r-md);text-decoration:none; color:var(--c-ink);border:1px solid transparent;border-left:4px solid transparent} .zoek__hit:hover,.zoek__hit:focus-visible{background:var(--c-bg-mint); border-color:var(--c-line);border-left-color:var(--c-green)} .zoek__hit-t{display:block;font-family:var(--f-head);font-weight:700;font-size:1.05rem; color:var(--c-green-dark);line-height:1.25} .zoek__hit-u{display:block;font-size:.8rem;color:var(--c-ink-soft);margin:2px 0 4px;overflow-wrap:anywhere} .zoek__hit-x{display:block;font-size:.92rem;color:#41493F} .zoek__hit mark{background:var(--c-yellow);color:#3D2E00;padding:0 2px;border-radius:3px} .zoek__leeg{padding:14px} .zoek__leeg p{margin:0 0 8px} .zoek__leeg p:last-child{margin-bottom:0} /* Tekstgrootte-knoppen. Veel oudere bezoekers weten niet dat hun browser kan inzoomen; een zichtbare knop op de pagina zelf haalt die drempel weg. De drie A's lopen op in grootte: dat wordt zonder uitleg begrepen. */ .tekstgrootte{display:flex;align-items:center;gap:4px} .tekstgrootte__label{font-size:14px;margin-right:2px;opacity:.9} /* In de bovenbalk staan de drie A's in zongeel in plaats van wit, zodat zij opvallen nu het woord "Tekstgrootte" ernaast is weggevallen. Niet in het merkgeel zelf: dat haalt op het groen van de balk maar 3,3:1 en dat is te weinig voor tekst. Deze lichtere tint haalt 5,0:1. De rand mag wel merkgeel zijn, want een rand is bediening en heeft genoeg aan 3,0:1 (3,3:1). */ .tekstgrootte__knop{ display:inline-flex;align-items:center;justify-content:center; min-width:32px;min-height:32px;padding:0 6px; background:transparent;border:2px solid var(--c-yellow);border-radius:8px; color:var(--c-bg-sun);font-family:var(--f-head);font-weight:700;line-height:1;cursor:pointer} .tekstgrootte__knop:hover{background:rgba(255,190,24,.18);color:#fff} .tekstgrootte__knop[aria-pressed="true"]{background:var(--c-yellow);color:var(--c-green-deep); border-color:var(--c-yellow)} .tekstgrootte__knop--1{font-size:13px} .tekstgrootte__knop--2{font-size:16px} .tekstgrootte__knop--3{font-size:19px} /* In het uitschuifmenu op de telefoon: ruimer, met volwaardige aanraakvlakken. */ .drawer .tekstgrootte{flex-wrap:wrap;gap:8px;margin:0 0 var(--s-3)} .drawer .tekstgrootte__label{flex:1 1 100%;margin:0 0 2px;font-weight:700; color:var(--c-green-dark);opacity:1;font-size:1rem} .drawer .tekstgrootte__knop{min-width:var(--tap);min-height:var(--tap);padding:0 16px; border-color:var(--c-border-ui);color:var(--c-green-dark)} .drawer .tekstgrootte__knop:hover{background:var(--c-bg-mint);border-color:var(--c-green)} .drawer .tekstgrootte__knop[aria-pressed="true"]{background:var(--c-green);color:#fff;border-color:var(--c-green)} .drawer .tekstgrootte__tip{flex:1 1 100%;margin:2px 0 0;font-size:.85rem;color:var(--c-ink-soft)} /* -------------------------------------------------------------------------- Kopbalk bij vergrote tekst De kopbalk is het krapste deel van de pagina: logo, navigatie, zoekknop en de oproepknop staan naast elkaar. Groeit de tekst, dan past dat niet meer. Oplossing: bij grotere tekst gaat de navigatie eerder naar het uitschuifmenu, en op een smalle telefoon verdwijnt het woord "Menu" naast het pictogram. Zo blijft alles bereikbaar zonder dat er iets buiten beeld valt. -------------------------------------------------------------------------- */ @media (max-width:379px){ .burger__txt{display:none} .zoekknop{padding-left:8px;padding-right:8px} } @media (min-width:1024px) and (max-width:1199px){ html[data-tekst="groter"] .nav, html[data-tekst="grootst"] .nav{display:none} html[data-tekst="groter"] .burger, html[data-tekst="grootst"] .burger{display:inline-flex} html[data-tekst="groter"] .header__cta, html[data-tekst="grootst"] .header__cta{display:none} } @media (min-width:1200px) and (max-width:1365px){ html[data-tekst="grootst"] .header__cta{display:none} } /* Hamburger */ .burger{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:var(--tap);min-width:var(--tap);padding:8px 14px; background:var(--c-bg-mint);border:2px solid var(--c-green);border-radius:var(--r-pill); color:var(--c-green-dark);font-family:var(--f-body);font-weight:700;font-size:.9rem;cursor:pointer; } @media (min-width:1024px){.burger{display:none}} .burger__bars{position:relative;width:20px;height:14px;flex:none} .burger__bars span{position:absolute;left:0;width:100%;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease} .burger__bars span:nth-child(1){top:0} .burger__bars span:nth-child(2){top:6px} .burger__bars span:nth-child(3){top:12px} .burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0} .burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){.burger__bars span{transition:none}} /* Mobiel uitschuifmenu */ /* Boven de cookiebalk (z-index 120), zodat het menu nooit wordt afgedekt */ .drawer{ position:fixed;top:0;right:0;bottom:0;left:0;z-index:130;display:none; } .drawer.is-open{display:block} .drawer__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(11,45,25,.5)} .drawer__panel{ position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw); background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.18); display:flex;flex-direction:column; transform:translateX(100%);transition:transform .25s ease; } .drawer.is-open .drawer__panel{transform:translateX(0)} @media (prefers-reduced-motion:reduce){.drawer__panel{transition:none}} /* --- de groene kop, met dezelfde golf als onder een paginabanner --- */ .drawer__kop{ flex:none;position:relative;padding:var(--s-3) var(--s-4) calc(var(--s-4) + 18px); background:linear-gradient(160deg,var(--c-green) 0%,var(--c-green-dark) 70%,var(--c-green-deep) 100%); color:#fff; } .drawer__koprij{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)} .drawer__titel{font-family:var(--f-head);font-size:1.3rem;font-weight:800;margin:0;color:#fff;max-width:none} .drawer__close{min-height:var(--tap);min-width:var(--tap);border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.10);border-radius:var(--r-pill);font-size:1.05rem;cursor:pointer; color:#fff;padding:0 14px;font-family:var(--f-body);font-weight:700} .drawer__close:hover,.drawer__close:focus-visible{background:var(--c-yellow);color:var(--c-green-deep);border-color:var(--c-yellow)} /* De openingsstatus staat in de kop: op een telefoon is dat de eerste vraag. Zonder JavaScript blijft hier gewoon "Openingstijden" staan. */ .drawer__status{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s-3); min-height:40px;padding:6px 14px;border-radius:var(--r-pill); background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35); color:#fff;text-decoration:none;font-weight:700;font-size:.95rem} .drawer__status:hover,.drawer__status:focus-visible{background:rgba(255,255,255,.24)} .drawer__stip{width:10px;height:10px;border-radius:50%;background:var(--c-yellow);flex:none} .drawer__golf{position:absolute;left:0;right:0;bottom:-1px;height:20px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V14c190-17 330 11 520 6s300-26 470-15 330 26 450 17v12z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/100% 100%} .drawer__body{overflow-y:auto;padding:var(--s-3) var(--s-4) var(--s-6);flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .drawer__body ul{list-style:none;margin:0;padding:0} .drawer__body li{margin:0} .drawer__kopje{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; color:var(--c-green-dark);margin:var(--s-4) 0 var(--s-3)} .drawer__kopje:first-child{margin-top:var(--s-2)} /* --- de acht snelle taken als tegels met een icoon --- */ /* minmax(0,1fr) en niet 1fr: anders mag een kolom breder worden dan haar deel zodra er een lang woord in staat, en loopt de tweede tegel op een smal scherm buiten het menu. Onder 360 px past twee naast elkaar niet meer; daar staan de tegels onder elkaar. */ .drawer__tegels{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} @media (min-width:360px){.drawer__tegels{grid-template-columns:repeat(2,minmax(0,1fr))}} .drawer__tegels a{ display:flex;flex-direction:column;gap:6px;height:100%; min-height:104px;padding:12px 12px 14px; background:var(--c-bg-mint);border:1px solid var(--c-line);border-radius:14px; text-decoration:none;color:var(--c-ink); transition:background .16s ease,border-color .16s ease,transform .16s ease; } .drawer__tegels a:hover,.drawer__tegels a:focus-visible{ background:#fff;border-color:var(--c-green);transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){.drawer__tegels a{transition:none}} .drawer__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(11,69,32,.14);flex:none} .drawer__ic img{width:28px;height:28px} .drawer__tlabel{font-size:.92rem;line-height:1.25;color:var(--c-ink-soft);hyphens:auto} .drawer__tlabel strong{display:block;font-size:1rem;font-weight:700;color:var(--c-ink)} /* --- alle pagina's, per rubriek uitklapbaar --- */ .m-acc>li{border-bottom:1px solid var(--c-line);border-radius:10px} .m-acc>li:last-child{border-bottom:0} .m-acc__btn{ display:flex;align-items:center;gap:10px;width:100%; min-height:56px;padding:10px 4px; font-family:var(--f-body);font-size:1.05rem;font-weight:700;color:var(--c-ink); text-decoration:none;background:none;border:0;text-align:left;cursor:pointer; } .m-acc__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--c-bg-mint);flex:none} .m-acc__ic img{width:23px;height:23px} .m-acc__btn::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--c-green);border-bottom:2.5px solid var(--c-green);transform:rotate(45deg);flex:none;margin-left:auto;margin-right:8px;transition:transform .18s ease} .m-acc__btn[aria-expanded="true"]::after{transform:rotate(225deg)} .m-acc__btn[aria-expanded="true"]{color:var(--c-green-dark)} .m-acc__panel{display:none;padding:0 0 var(--s-3) 44px;margin:0 0 var(--s-2); border-left:3px solid var(--c-bg-mint);margin-left:16px} .m-acc__panel.is-open{display:block} .m-acc__panel a{display:block;min-height:var(--tap);padding:10px 4px;color:var(--c-ink);text-decoration:none;font-weight:600;font-size:.98rem} .m-acc__panel a:hover,.drawer__body a:hover{color:var(--c-green-dark)} .drawer__instel{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--c-line)} .drawer__foot{flex:none;padding:var(--s-4);border-top:1px solid var(--c-line);background:var(--c-bg-soft);display:grid;gap:var(--s-3)} /* Dezelfde ronde knoppen als in de voettekst van de site */ .drawer__rond{display:flex;gap:10px;justify-content:center} .drawer__rond a{display:grid;place-items:center;width:var(--tap);height:var(--tap); border:2px solid var(--c-green);border-radius:50%;color:var(--c-green-dark); background:#fff;transition:background .16s ease,color .16s ease} .drawer__rond a:hover,.drawer__rond a:focus-visible{background:var(--c-green);color:#fff} @media (prefers-reduced-motion:reduce){.drawer__rond a{transition:none}} .drawer__rond svg{width:21px;height:21px} /* Mobiele vaste actiebalk */ .actionbar{ position:fixed;left:0;right:0;bottom:0;z-index:55; display:grid;grid-template-columns:repeat(3,1fr); background:#fff;border-top:1px solid var(--c-line); box-shadow:0 -2px 12px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom,0); } .actionbar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; min-height:58px;padding:6px 4px; color:var(--c-green-dark);text-decoration:none;font-weight:700;font-size:.78rem;line-height:1.15; border-right:1px solid var(--c-line); } .actionbar a:last-child{border-right:0} .actionbar a:hover{background:var(--c-bg-mint)} .actionbar svg{width:21px;height:21px;flex:none} @media (min-width:1024px){.actionbar{display:none}} @media (max-width:1023px){body{padding-bottom:60px}} /* -------------------------------------------------------------------------- 7. Mededelingenbalk -------------------------------------------------------------------------- */ /* Band "in aanbouw". Staat in de HTML zelf, niet in JavaScript: een bezoeker moet hem ook zien als het script niet laadt. Donker vlak met gele accenten, zodat hij als status van de hele site leest en niet als dagmededeling. */ .bouwband{background:var(--c-green-deep);color:#fff;border-bottom:4px solid var(--c-yellow)} /* De band vouwt zich na twee seconden op. Op een telefoon kostte hij een derde van het eerste scherm, terwijl de boodschap na één blik binnen is. Zonder JavaScript blijft hij gewoon staan; dat is de veilige kant. */ .bouwband{overflow:hidden;max-height:50vh;transition:max-height .45s ease,opacity .35s ease,border-width .45s ease} .bouwband.is-weg{max-height:0;opacity:0;border-bottom-width:0} @media (prefers-reduced-motion:reduce){.bouwband{transition:none}} /* Het beeld 'Website in aanbouw' staat in het midden, met tekst links en rechts ervan. Daarvoor drie kolommen waarvan de buitenste even breed zijn: het beeld staat dan precies in het midden van de band, ook als de teksten verschillend lang zijn. Op een telefoon staat alles onder elkaar, met het beeld bovenaan. De hoogte van het beeld staat in pixels en niet in procenten: de band moet op elke pagina even hoog zijn, anders verspringt de inhoud eronder. */ .bouwband__inner{display:grid;gap:var(--s-3);justify-items:center;text-align:center; padding-block:12px} @media (min-width:760px){ .bouwband__inner{grid-template-columns:1fr auto 1fr;align-items:center; gap:var(--s-5);justify-items:start;text-align:left} .bouwband__merk{grid-column:2;grid-row:1} .bouwband__tekst{grid-column:1;grid-row:1} .bouwband__hulp{grid-column:3;grid-row:1;justify-self:end;text-align:right} } .bouwband__merk{display:block;line-height:0} .bouwband__merk img{display:block;width:auto;height:68px;background:none} @media (min-width:600px){.bouwband__merk img{height:96px}} @media (min-width:900px){.bouwband__merk img{height:110px}} .bouwband__tekst{margin:0;min-width:0;max-width:38ch;font-size:.95rem;line-height:1.5;color:#fff} .bouwband__tekst strong{color:var(--c-yellow)} .bouwband__hulp{margin:0;min-width:0;max-width:38ch;font-size:.9rem; color:rgba(255,255,255,.92);line-height:1.5} .bouwband__hulp a{color:#fff;font-weight:700} .bouwband__hulp a:hover{color:var(--c-yellow)} /* -------------------------------------------------------------------------- DE LICHTKRANT De mededelingen van het bestuur, als lopende band onder de kopbalk. Twee keuzes die afwijken van een gewone lichtkrant, en waarom: 1. De letters zijn gewone, scherpe letters. In het aangeleverde ontwerp waren de letters zelf uit lichtpuntjes opgebouwd. Dat staat prachtig, maar hier loopt juist de belangrijkste mededeling van de week langs: afwijkende openingstijden, een afgelaste activiteit. Die moet door iedereen te lezen zijn, ook door iemand die slecht ziet. Het rasterje van lichtpuntjes ligt daarom over het paneel en niet over de tekst. 2. Zonder JavaScript, en voor wie bewegende beelden heeft uitgezet, staan de mededelingen gewoon stil onder elkaar. Er gaat dus nooit informatie verloren doordat er niets beweegt. -------------------------------------------------------------------------- */ .lichtkrant{background:#0A3A1C;color:#fff;border-bottom:1px solid #1B6336} .lichtkrant__inner{display:flex;align-items:center;gap:var(--s-3); padding-block:10px} .lichtkrant__merk{flex:none;margin:0;display:none;align-items:center;gap:8px; font-family:var(--f-head);font-weight:700;font-size:.8rem; text-transform:uppercase;letter-spacing:.11em;color:#BFE9CC} @media (min-width:760px){.lichtkrant__merk{display:flex}} .lichtkrant__stip{width:8px;height:8px;border-radius:50%;background:var(--c-yellow); box-shadow:0 0 8px 2px rgba(255,190,24,.5)} .lichtkrant__scherm{ position:relative;flex:1 1 auto;min-width:0;overflow:hidden; background:radial-gradient(ellipse at 50% 0,#10492A,#06240F 76%); border:1px solid #1E6B3A;border-radius:var(--r-sm); padding:9px var(--s-4); box-shadow:inset 0 2px 14px rgba(0,0,0,.55) } /* Het rasterje van lichtpuntjes. Ligt over het paneel, niet over de tekst. */ .lichtkrant__scherm::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1; pointer-events:none;opacity:.2; background-image:radial-gradient(circle,#8FD6A2 .7px,transparent 1px); background-size:6px 6px} .lichtkrant__band{list-style:none;margin:0;padding:0;position:relative;z-index:2} /* max-width:none is hier niet optioneel. De site geeft elke p en li een leesbreedte van 68 tekens mee; in de lopende band knipt dat elk bericht af op die breedte, waarna de berichten over elkaar heen schuiven. */ /* De stilstaande weergave. Die is te zien zonder JavaScript en wanneer de bezoeker bewegende beelden heeft uitgezet. Zij moet er bewust uitzien en niet als een lichtkrant die het niet doet: vandaar de scheidingslijntjes en het rustiger formaat. */ .lichtkrant__regel{max-width:none;font-weight:700;font-size:1rem;line-height:1.45; color:var(--c-yellow);text-shadow:0 0 10px rgba(255,190,24,.3)} .lichtkrant__regel + .lichtkrant__regel{margin-top:5px;padding-top:5px; border-top:1px solid rgba(143,214,162,.22);color:#D6F3DF; text-shadow:none;font-weight:600;font-size:.94rem} .lichtkrant__link{color:#fff;font-weight:800;text-decoration:underline; text-underline-offset:3px;white-space:nowrap} .lichtkrant__link:hover{color:var(--c-yellow)} /* Zodra het script de band in beweging zet. */ .lichtkrant.is-actief .lichtkrant__scherm{padding-block:7px} .lichtkrant.is-actief .lichtkrant__band{display:flex;align-items:center; width:-webkit-max-content;width:max-content;white-space:nowrap; will-change:transform} /* flex:none is hier niet optioneel. Zonder die regel krimpen de berichten naar de breedte van het paneel en schuiven zij over elkaar heen: de tekst wordt dan onleesbaar zodra er meer dan één bericht is. */ /* In beweging mogen de letters groter: er staat dan maar één regel, dus de hoogte van de balk loopt er niet door op. Onder de 600 px iets kleiner, anders past er te weinig tekst tegelijk in beeld. */ .lichtkrant.is-actief .lichtkrant__regel{flex:none;margin:0;padding-right:3.5rem; position:relative;color:var(--c-yellow);font-weight:700;font-size:1.08rem; text-shadow:0 0 10px rgba(255,190,24,.3)} @media (min-width:760px){.lichtkrant.is-actief .lichtkrant__regel{font-size:1.2rem}} @media (max-width:599px){.lichtkrant.is-actief .lichtkrant__regel{font-size:1rem}} .lichtkrant.is-actief .lichtkrant__regel::after{content:"";position:absolute; right:1.6rem;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%; background:#8FD6A2;opacity:.75} /* De randen laten de tekst zachtjes verdwijnen in plaats van hem af te kappen. */ .lichtkrant.is-actief .lichtkrant__scherm::after{content:"";position:absolute; top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none; background:linear-gradient(90deg,#06240F 0,transparent 5%,transparent 95%,#06240F 100%)} /* display:grid overrulet het hidden-kenmerk; zonder deze regel stond de pauzeknop er ook zonder JavaScript, terwijl er dan niets te pauzeren valt. */ .lichtkrant__knop[hidden]{display:none} .lichtkrant__knop{flex:none;width:34px;height:34px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm); background:rgba(255,255,255,.08);cursor:pointer;color:#fff} .lichtkrant__knop:hover{background:rgba(255,255,255,.18)} /* Twee streepjes = pauze. Bij ingedrukte stand een driehoekje = afspelen. Met vormen in plaats van tekens, zodat zij op elk apparaat gelijk zijn. */ .lichtkrant__knopteken{display:block;width:12px;height:13px; border-left:4px solid currentColor;border-right:4px solid currentColor} .lichtkrant__knop[aria-pressed="true"] .lichtkrant__knopteken{ width:0;height:0;border:7px solid transparent;border-left:12px solid currentColor; margin-left:4px} @media print{.lichtkrant__knop{display:none}} /* -------------------------------------------------------------------------- 8. Hero -------------------------------------------------------------------------- */ .hero{position:relative;background:var(--c-bg-mint);overflow:hidden} /* De golf onderaan ligt boven de sluier. Lag hij eronder, dan kreeg het wit een groene waas en viel de ronding weg tegen de banner. */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;z-index:3; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V16c180-21 320 14 520 8s300-34 470-20 330 34 450 22v18z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/100% 100%; pointer-events:none; } .hero__inner{position:relative;z-index:2;display:grid;gap:var(--s-5);padding-block:var(--s-6) var(--s-8)} @media (min-width:900px){ .hero__inner{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s-7);padding-block:var(--s-7) var(--s-9)} } .hero__eyebrow svg,.hero__usps svg{width:19px;height:19px;flex:none} .hero__eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--c-line);color:var(--c-green-dark);font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:var(--s-3)} .hero h1{margin-bottom:var(--s-3)} .hero__lead{font-size:1.12rem;color:#33422F;margin-bottom:var(--s-5)} .hero__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);background:#fff;aspect-ratio:4/3} .hero__media img{width:100%;height:100%;object-fit:cover} .hero__usps{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5);padding:0;list-style:none} .hero__usps li{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-pill);padding:7px 15px;font-weight:700;font-size:.88rem;color:var(--c-green-dark);margin:0} /* --------------------------------------------------------------------------- Openingsbanner van de voorpagina: de foto over de volle breedte, met de titel, de knoppen en de drie kenmerken erop. De groene sluier is hier net als bij de paginabanners doorgerekend op een spierwitte foto: in de tekstzone blijft wit op minstens 5,3:1 staan. */ /* Foto, sluier en tekst liggen als drie lagen over elkaar, op dezelfde manier als bij de paginabanners: de foto ligt met alle vier de randen vast aan de banner. Het -element zelf vormt daarbij geen eigen vak (display:contents), zodat de foto zich naar de banner voegt en niet naar zijn eigen verhouding. */ /* De openingsfoto staat als achtergrond van de banner zelf, met per schermbreedte zijn eigen uitsnede. Zo vult hij de banner altijd precies, hoe hoog die door de tekst ook uitvalt. LET OP: wordt de foto vervangen, verhoog dan het nummer achter ?v= in de drie regels hieronder. Anders blijven bezoekers die de site eerder bekeken de oude foto zien. */ .hero--beeld{ background-color:var(--c-green-deep); background-image:url("../img/banners/hero-home-telefoon.jpg?v=1"); background-size:cover;background-position:center;background-repeat:no-repeat; isolation:isolate; } @media (min-width:600px){ .hero--beeld{background-image:url("../img/banners/hero-home-tablet.jpg?v=1")} } @media (min-width:900px){ .hero--beeld{background-image:url("../img/banners/hero-home.jpg?v=1")} } .hero__sluier{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, rgba(11,69,32,.88) 0%, rgba(11,69,32,.82) 58%, rgba(11,69,32,.72) 100%); } @media (min-width:900px){ .hero__sluier{ background:linear-gradient(100deg, rgba(11,69,32,.90) 0%, rgba(11,69,32,.84) 50%, rgba(11,69,32,.78) 62%, rgba(11,69,32,.46) 84%, rgba(11,69,32,.22) 100%); } } .hero--beeld .hero__inner{display:block;padding-block:var(--s-6) calc(var(--s-8) + 10px)} @media (min-width:600px){ .hero--beeld{display:flex;align-items:center;min-height:520px} .hero--beeld .hero__inner{width:100%;padding-block:var(--s-7) calc(var(--s-8) + 16px)} } @media (min-width:900px){.hero--beeld{min-height:580px}} @media (min-width:1200px){.hero--beeld{min-height:620px}} @media (min-width:900px){.hero__tekst{max-width:min(60ch,56%)}} .hero--beeld h1{color:#fff} .hero--beeld .hero__lead{color:rgba(255,255,255,.96)} /* Het speldje en de drie kenmerken staan al op wit; op de foto houden zij daarmee vanzelf hun contrast. Alleen de rand mag iets zachter. */ .hero--beeld .hero__eyebrow,.hero--beeld .hero__usps li{border-color:rgba(255,255,255,.65)} /* Een omlijnde witte knop naast de witte knop: samen leiden zij het oog naar de twee stappen die wij het liefst zien. */ .btn--omlijnd{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.75)} .btn--omlijnd:hover,.btn--omlijnd:focus-visible{background:#fff;color:var(--c-green-deep);border-color:#fff} /* Compacte paginahero */ /* Paginabanner: sfeerbeeld + groene sluier + titel. De sluier is bewust zwaar: witte tekst haalt daardoor ook op een lichte foto ruim de contrastnorm. Zie ACCEPTATIERAPPORT.md voor de doorrekening. */ /* Vaste bannerhoogte per schermbreedte. Zonder deze vaste maat verschilt de hoogte per pagina (de titel en de introtekst zijn niet even lang) en verspringt de pagina bij het doorklikken. */ .phero{ position:relative;background:var(--c-green-deep);overflow:hidden;isolation:isolate; min-height:var(--banner-h);display:flex;align-items:center; } .phero__img{ position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover; /* Elke schermbreedte krijgt zijn eigen uitsnede (zie _build/paginabanners.py), dus het onderwerp staat al in het midden van het beeld. */ object-position:center; z-index:0; } .phero__sluier{ position:absolute;top:0;right:0;bottom:0;left:0;z-index:1; /* Op telefoon en tablet loopt de sluier van zwaar bovenin, waar de titel staat, naar lichter onderin, zodat de foto zichtbaar blijft. Ook de lichtste stap (.70) houdt witte tekst op een spierwitte foto nog op 4,69:1; zie ACCEPTATIERAPPORT.md voor de doorrekening. */ background:linear-gradient(180deg, rgba(11,69,32,.88) 0%, rgba(11,69,32,.82) 55%, rgba(11,69,32,.76) 78%, rgba(11,69,32,.62) 100%); } /* Op een telefoon staat de tekst boven in de banner in plaats van in het midden. Daarmee komt de onderste kwart vrij voor de foto zelf en kan de sluier daar veel lichter: tot .40, waar geen tekst meer staat. Tot 78% van de hoogte blijft hij op minstens .74 en haalt wit dus 5,25:1; nagemeten komt de tekst op geen enkele pagina lager dan 74%. */ @media (max-width:599px){ .phero{align-items:flex-start} .phero__inner{justify-content:flex-start} .phero__sluier{ background:linear-gradient(180deg, rgba(11,69,32,.86) 0%, rgba(11,69,32,.80) 55%, rgba(11,69,32,.74) 78%, rgba(11,69,32,.40) 100%); } } @media (min-width:900px){ .phero__sluier{ /* De sluier blijft zwaar tot voorbij de tekstzone (56%), zodat witte tekst ook op een spierwitte foto minimaal 8:1 haalt. */ background:linear-gradient(100deg, rgba(11,69,32,.88) 0%, rgba(11,69,32,.80) 50%, rgba(11,69,32,.76) 66%, rgba(11,69,32,.46) 84%, rgba(11,69,32,.22) 100%); } } .phero__inner{ position:relative;z-index:2;width:100%; padding-block:var(--s-5) calc(var(--s-6) + 22px); display:flex;flex-direction:column;justify-content:center; } @media (min-width:900px){ .phero__inner{padding-block:var(--s-6) calc(var(--s-7) + 14px)} /* Tussen 900 en 1199 px iets meer tekstbreedte, zodat de banner even hoog blijft als op groter scherm. Bij 64% is het contrast 5,5:1: ruim boven de norm, zie ACCEPTATIERAPPORT.md. */ .phero h1,.phero .phero__lead{max-width:min(58ch,64%)} } @media (min-width:1200px){ .phero h1,.phero .phero__lead{max-width:min(58ch,56%)} } .phero__golf{ position:absolute;left:0;right:0;bottom:-1px;height:34px;z-index:3;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V14c190-17 330 11 520 6s300-26 470-15 330 26 450 17v12z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/100% 100%; } /* Een lange samenstelling als "Toegankelijkheidsverklaring" past op een telefoon niet op één regel. Zonder deze regel knipt de browser zo'n woord willekeurig doormidden, zonder streepje. Met hyphens:auto breekt hij het af met een koppelteken, volgens de Nederlandse woordafbreking (de pagina staat op lang="nl"). De zachte koppeltekens in de titels zelf wijzen daarnaast de gewenste naad aan. */ .phero h1{color:#fff;margin-bottom:var(--s-3);text-wrap:balance;hyphens:auto} .phero__lead{font-size:1.1rem;color:rgba(255,255,255,.95);margin-bottom:0} .phero .crumbs{color:rgba(255,255,255,.88)} .phero .crumbs a{color:rgba(255,255,255,.92)} .phero .crumbs [aria-current]{color:#fff;font-weight:700} .phero .crumbs li+li::before{color:rgba(255,255,255,.6)} .phero .btn--secondary{background:#fff} @media (min-width:600px){:root{--banner-h:290px}} @media (min-width:900px){:root{--banner-h:360px}} /* Op een smal scherm iets rustiger zetwerk, zodat ook de langste introtekst binnen de vaste bannerhoogte past. */ @media (max-width:599px){ .phero h1{font-size:clamp(28px,7.4vw,36px)} .phero__lead{font-size:1.02rem;line-height:1.5} } /* -------------------------------------------------------------------------- Banner met mensen erop (Over de vereniging) Op de gewone banners ligt een zware groene sluier: die beelden zijn sfeer, de tekst is de hoofdzaak. Hier is de foto juist de hoofdzaak. De sluier is daarom alleen zwaar waar de tekst staat en laat de rest open. De tekst blijft wit op minstens 8:1; dat is nagemeten op de donkerste en de lichtste plek van de foto. -------------------------------------------------------------------------- */ .phero--mensen{--banner-h:440px} @media (min-width:600px){.phero--mensen{--banner-h:480px}} @media (min-width:1200px){.phero--mensen{--banner-h:470px}} /* Twee lagen. De achtergrond (lucht, heuvels, gras) mag de browser bijsnijden, daar staat niets op dat gemist wordt; de onderrand blijft staan, zodat het gras altijd tot onderaan doorloopt. De groep is een eigen beeld met object-fit: contain en wordt dus nooit bijgesneden, op geen enkele schermbreedte. Stond de groep in de achtergrond, dan sneed de browser op een breed scherm boven en onder weg: precies waar de gezichten van de achterste rij staan. */ .phero--mensen .phero__img{object-position:center bottom} .phero__mensen{ position:absolute;z-index:2;bottom:6%;left:50%;transform:translateX(-50%); width:min(96%,640px);height:auto;max-height:54%; object-fit:contain;object-position:bottom center; /* Twee regels die er allebei toe doen: - background:none, want afbeeldingen krijgen hier standaard een muntgroen vlak achter zich tegen witte gaten tijdens het laden. Bij een uitsnede met doorzichtige achtergrond zie je dat vlak als een rechthoek om de mensen heen staan. - z-index 2, dus boven de sluier. De sluier is er voor het contrast van de titel links; de mensen rechts horen gewoon in kleur te staan. */ background:none; } /* Tot 1200 px staat de titel bovenin en de groep daar breeduit onder. Daarom loopt de sluier van donker bovenaan naar vrijwel open onderaan. align-items op de banner zelf, niet alleen in de tekstkolom: de banner is een flexvak dat zijn inhoud verticaal centreert, en zonder deze regel bleef de titel in het midden hangen met een leeg groen vlak erboven. */ .phero--mensen{align-items:flex-start} .phero--mensen .phero__inner{justify-content:flex-start;padding-block:var(--s-5) 0} .phero--mensen .phero__sluier{ background:linear-gradient(180deg, rgba(11,69,32,.93) 0%, rgba(11,69,32,.90) 40%, rgba(11,69,32,.44) 58%, rgba(11,69,32,.08) 78%, rgba(11,69,32,.02) 100%) } @media (min-width:600px){ .phero__mensen{width:min(92%,900px);max-height:52%;bottom:4%} .phero--mensen h1,.phero--mensen .phero__lead{max-width:min(52ch,100%)} } /* Vanaf 1200 px is er breedte genoeg om de titel links en de groep rechts naast elkaar te zetten. De sluier loopt dan van links naar rechts. */ @media (min-width:1200px){ .phero--mensen{align-items:center} .phero--mensen .phero__inner{justify-content:center; padding-block:var(--s-6) calc(var(--s-7) + 14px)} .phero__mensen{ left:auto;right:2%;transform:none;bottom:7%; width:min(56%,1100px);max-height:86%;object-position:bottom right; } .phero--mensen .phero__sluier{ background:linear-gradient(100deg, rgba(11,69,32,.94) 0%, rgba(11,69,32,.90) 38%, rgba(11,69,32,.42) 62%, rgba(11,69,32,.12) 100%) } /* De tekstkolom smaller houden dan de banner breed is, zodat de regels niet dwars over de groep heen lopen. */ .phero--mensen h1,.phero--mensen .phero__lead{max-width:min(44ch,42%)} } /* Zonder afbeelding (of terwijl die laadt) blijft de banner gewoon groen */ .phero--green .phero__img{display:none} /* Breadcrumbs */ .crumbs{font-size:.88rem;color:var(--c-ink-soft);margin-bottom:var(--s-3)} .crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0} .crumbs li{margin:0;display:flex;align-items:center;gap:6px} .crumbs li+li::before{content:"›";color:var(--c-line-strong)} .crumbs a{color:inherit;text-decoration:none;padding:4px 0;display:inline-block} .crumbs a:hover{text-decoration:underline} .crumbs [aria-current]{font-weight:700;color:var(--c-green-dark)} /* -------------------------------------------------------------------------- 9. Openingsstatus -------------------------------------------------------------------------- */ .status{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5); padding:var(--s-4) var(--s-5);border-radius:var(--r-md); border:2px solid var(--c-line);background:#fff;box-shadow:var(--shadow-1); } .status__dot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--c-line-strong)} .status__main{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:1.25rem;font-weight:700;color:var(--c-ink)} .status__meta{color:var(--c-ink-soft);font-size:.95rem;font-weight:600} .status--open{border-color:var(--c-open);background:var(--c-open-bg)} .status--open .status__dot{background:var(--c-open)} .status--open .status__main{color:var(--c-green-deep)} .status--soon{border-color:var(--c-blue-text);background:var(--c-bg-sky)} .status--soon .status__dot{background:var(--c-blue-text)} .status--soon .status__main{color:#0A4A63} .status--closed{border-color:var(--c-closed);background:var(--c-closed-bg)} .status--closed .status__dot{background:var(--c-closed)} .status--closed .status__main{color:#8A2A0B} .status__actions{margin-left:auto} @media (max-width:639px){.status__actions{margin-left:0;width:100%}} .status--hero{background:#fff;border-color:var(--c-line)} /* -------------------------------------------------------------------------- 10. Kaarten -------------------------------------------------------------------------- */ .card{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md); box-shadow:var(--shadow-1);overflow:hidden; transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease; height:100%; } .card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--c-line-strong)} @media (prefers-reduced-motion:reduce){.card:hover{transform:none}} .card__media{aspect-ratio:16/10;background:var(--c-bg-mint);overflow:hidden} .card__media img{width:100%;height:100%;object-fit:cover} .card__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1} .card__body h3{margin-bottom:0;font-size:1.28rem} .card__body p{color:#41493F;margin-bottom:0;font-size:.98rem;max-width:none} .card__foot{margin-top:auto;padding-top:var(--s-3)} .card__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--c-bg-mint);color:var(--c-green-dark);flex:none} .card__icon svg{width:25px;height:25px} /* Een gekleurd beeldicoon brengt zijn eigen vlak mee en heeft de mintgroene achtergrond niet nodig. Het staat ook groter: een getekend icoon van 25 px wordt een vlekje, pas vanaf ongeveer 56 px is te zien wat het voorstelt. 64 px is tevens de bovengrens waarbij het bronbeeld op een scherm met dubbele pixeldichtheid nog scherp blijft. */ .card__icon:has(.beeldicoon){width:64px;height:64px;background:none;border-radius:0} /* De algemene regel hierboven geeft elke afbeelding een mintgroen vlak zolang zij laadt. Een icoon is doorzichtig en houdt dat vlak dus voor altijd: het wordt een gekleurd blokje achter de tekening. Daarom hier uitgezet. */ .beeldicoon{width:64px;height:64px;object-fit:contain;flex:none;background:none} .facts .beeldicoon{width:34px;height:34px;margin-top:0} .card__icon--sun{background:var(--c-bg-sun);color:#7A5200} .card__icon--sky{background:var(--c-bg-sky);color:#0B5A78} .card__icon--rose{background:#FDECE6;color:#96300D} /* Hele kaart klikbaar, maar met echte link voor toetsenbord/schermlezer */ .card__link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0} .card:focus-within{outline:3px solid var(--c-blue-text);outline-offset:3px} .card:focus-within .card__link:focus-visible{outline:none} /* De vier vraagkaarten op de startpagina. Het icoon stond links naast de tekst. Op een breed scherm staan deze vier kaarten naast elkaar: elke kaart is dan ongeveer 270 px breed, en na het icoon van 64 px en de tussenruimte bleef er nog geen 150 px over voor de tekst. Daardoor brak elke regel na twee of drie woorden. Vanaf twee kolommen staat het icoon daarom bovenaan en heeft de tekst de volle breedte van de kaart. Op een telefoon, waar de kaart de hele schermbreedte heeft, blijft het icoon links staan: dat scheelt daar juist hoogte. */ .card--quick{flex-direction:row;align-items:flex-start;gap:var(--s-4);padding:var(--s-5)} .card--quick .card__body{padding:0} @media (min-width:640px){ .card--quick{flex-direction:column;align-items:flex-start;gap:var(--s-3)} } /* Informatiekaart / infoblok */ .info{background:var(--c-bg-soft);border:1px solid var(--c-line);border-left:5px solid var(--c-green);border-radius:var(--r-md);padding:var(--s-5)} .info h3{margin-bottom:var(--s-3);font-size:1.15rem} .info>:last-child{margin-bottom:0} .info--sun{background:var(--c-bg-sun);border-left-color:var(--c-yellow)} .info--sky{background:var(--c-bg-sky);border-left-color:var(--c-blue)} .info--warn{background:var(--c-closed-bg);border-left-color:var(--c-orange)} /* Feitenlijst */ .facts{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)} .facts li{display:flex;gap:var(--s-3);margin:0;align-items:flex-start;max-width:none;min-width:0} .facts li>span{min-width:0;overflow-wrap:anywhere} .facts svg{flex:none;width:22px;height:22px;color:var(--c-green);margin-top:2px} .facts strong{display:block} /* Prijs / tarief */ /* Het bedrag en de toelichting staan naast elkaar zolang dat past, en anders onder elkaar. Twee regels maken dat verschil: - flex-wrap: de toelichting mag naar de volgende regel; - nowrap op de toelichting zelf: zonder die regel perst de browser haar in de smalle strook die overblijft naast "Op aanvraag" en krijg je "per / jaar, / per / gezin" onder elkaar. */ .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px; font-family:var(--f-head);color:var(--c-green-dark)} .price b{font-size:2.4rem;line-height:1;font-weight:800} .price span{font-weight:600;color:var(--c-ink-soft);font-family:var(--f-body); font-size:.95rem;white-space:nowrap} /* Badges */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);font-size:.8rem;font-weight:700;line-height:1.4} .badge--green{background:var(--c-bg-mint);color:var(--c-green-deep)} .badge--sun{background:var(--c-bg-sun);color:#6B4700} .badge--sky{background:var(--c-bg-sky);color:#0A5B79} .badge--rose{background:#FDECE6;color:#96300D} .badge--grey{background:#EEEEEA;color:#4A4A4A} /* -------------------------------------------------------------------------- 11. Agenda & nieuws -------------------------------------------------------------------------- */ .event{display:flex;gap:var(--s-4);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4);box-shadow:var(--shadow-1);position:relative} .event__date{flex:none;width:66px;text-align:center;background:var(--c-bg-mint);border-radius:var(--r-sm);padding:8px 4px;color:var(--c-green-deep)} .event__date b{display:block;font-family:var(--f-head);font-size:1.65rem;line-height:1} .event__date span{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .event__body{min-width:0} .event__body h3{font-size:1.13rem;margin-bottom:4px} .event__body p{margin:0;font-size:.95rem;color:#41493F;max-width:none} .event__meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:6px;font-size:.86rem;color:var(--c-ink-soft);font-weight:600} .newsitem time{display:block;font-size:.85rem;font-weight:700;color:var(--c-orange-text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px} /* -------------------------------------------------------------------------- 11a. Menukaart van de winkel De prijslijst stond als tabel met twee kolommen op de pagina. Correct, maar koud voor juist het gezellige deel van een bezoek. Het is nu een lijst met per regel het icoon uit de huisstijlset, een zin en de prijs in een geel vlak. Het blijft een lijst, dus een schermlezer leest naam, uitleg en prijs nog steeds bij elkaar. -------------------------------------------------------------------------- */ .menukaart{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s-3)} .menukaart__item{display:flex;align-items:center;gap:var(--s-4);margin:0; background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md); padding:var(--s-4);box-shadow:var(--shadow-1)} .menukaart__icoon{width:56px;height:56px;object-fit:contain;flex:none;background:none} /* De tekst mag krimpen, maar niet verder dan een leesbare regel. Zonder deze ondergrens perst de prijs de tekst op een telefoon tot een kolom van tien tekens, waarin woorden middenin afbreken. Nu wipt de prijs eronder. */ .menukaart__tekst{flex:1 1 11rem;min-width:11rem} .menukaart__naam{margin:0 0 2px;font-size:1.1rem;line-height:1.2} .menukaart__uitleg{margin:0;font-size:.95rem;color:#41493F;max-width:none} .menukaart__prijs{flex:none;margin:0;align-self:center;white-space:nowrap; background:var(--c-bg-sun);border:1px solid var(--c-warn-line);border-radius:var(--r-pill); padding:6px 14px;font-family:var(--f-head);font-weight:700;color:var(--c-green-deep); font-size:.98rem} @media (min-width:860px){ .menukaart{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Een icoon boven een kop in een infoblok: bewust gestapeld en niet ernaast. Naast de kop zou het de regel uit elkaar trekken zodra de kop afbreekt. */ .info h3 .beeldicoon{width:48px;height:48px;margin:0 0 6px} /* Past de prijs niet meer naast de tekst, dan zakt hij eronder en lijnt hij uit met de tekst in plaats van met het icoon. */ .menukaart__item{flex-wrap:wrap} .menukaart__prijs{margin-left:72px} @media (min-width:480px){ .menukaart__prijs{margin-left:0} } @media (max-width:379px){ .menukaart__icoon{width:44px;height:44px} .menukaart__tekst{flex-basis:9rem;min-width:9rem} .menukaart__prijs{margin-left:60px} } /* -------------------------------------------------------------------------- 11b. Speeltuinnieuws Het eerste bericht staat groot, de rest in een rij van drie. Op een telefoon staat alles onder elkaar en vervalt de brede indeling; het eerste bericht blijft dan gewoon het bovenste. Alle kleuren komen uit de tokens bovenin dit bestand, zodat het nieuws dezelfde taal spreekt als de rest van de website. -------------------------------------------------------------------------- */ /* De kop boven Laatste nieuws: een klein bovenregeltje met een stip, een grote kop en een introzin ernaast. Op een telefoon staat de introzin onder de kop, want naast elkaar blijft er dan van geen van beide genoeg breedte over. */ .nieuwskop{margin:0 0 var(--s-7)} .nieuwskop__boven{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3); font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--c-orange-text)} .nieuwskop__stip{width:9px;height:9px;border-radius:50%;background:var(--c-yellow); flex:none;box-shadow:0 0 0 3px var(--c-bg-sun)} .nieuwskop__titel{margin:0;font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.1} .nieuwskop__intro{margin:var(--s-4) 0 0;color:#41493F;font-size:1.05rem} @media (min-width:900px){ .nieuwskop{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--s-7);align-items:end} .nieuwskop__intro{margin:0;max-width:34ch} } .nieuws__balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s-3) var(--s-5);margin:0 0 var(--s-5)} .nieuws__filters{display:flex;flex-wrap:wrap;gap:var(--s-2)} .nieuws__filter{display:inline-flex;align-items:center;min-height:var(--tap); padding:8px 18px;border-radius:var(--r-pill);border:1px solid var(--c-line); background:#fff;color:var(--c-ink);font-family:var(--f-body);font-weight:700; font-size:.92rem;cursor:pointer;transition:background .15s,border-color .15s} .nieuws__filter:hover{background:var(--c-bg-mint);border-color:var(--c-green);color:var(--c-green-dark)} .nieuws__filter[aria-pressed="true"]{background:var(--c-green);border-color:var(--c-green);color:#fff} .nieuws__telling{margin:0;font-size:.9rem;font-weight:600;color:var(--c-ink-soft);white-space:nowrap} .nieuws__raster{display:grid;grid-template-columns:1fr;gap:var(--s-5)} .nieuwskaart{position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-1);transition:box-shadow .18s,transform .18s} .nieuwskaart[hidden]{display:none} .nieuwskaart:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)} .nieuwskaart__beeld{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-bg-mint); display:grid;place-items:center} .nieuwskaart__beeld img{width:100%;height:100%;object-fit:cover;display:block;background:none} .nieuwskaart__beeld--mint{background:var(--c-bg-mint)} .nieuwskaart__beeld--sky{background:var(--c-bg-sky)} .nieuwskaart__beeld--sun{background:var(--c-bg-sun)} .nieuwskaart__beeld--rose{background:#FDECE6} /* Een icoon is geen foto: het vult het vlak niet, het staat erin. */ .nieuwskaart__beeld .nieuwskaart__icoon{width:96px;height:96px;object-fit:contain} /* Het gele vlaggetje "Uitgelicht" is eruit. Het eerste bericht valt al op doordat het groter staat; een label erbij vertelde de bezoeker iets over de redactie in plaats van over het nieuws, en het lag over de foto heen. */ .nieuwskaart__tekst{display:flex;flex-direction:column;flex:1;padding:var(--s-5)} .nieuwskaart__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3); margin:0 0 var(--s-3);font-size:.82rem;font-weight:700;color:var(--c-ink-soft); text-transform:uppercase;letter-spacing:.04em} .nieuwskaart__onderwerp{color:var(--c-orange-text)} .nieuwskaart__meta time,.nieuwskaart__leestijd{font-weight:600;letter-spacing:.02em;text-transform:none} .nieuwskaart__titel{margin:0 0 var(--s-3);font-size:1.25rem;line-height:1.25} .nieuwskaart__samenvatting{margin:0 0 var(--s-5);color:#41493F;max-width:none} /* De leesregel hangt onderaan de kaart, zodat alle kaarten in een rij dezelfde onderkant krijgen, ook bij ongelijke teksten. */ .nieuwskaart__lees{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); width:100%;margin-top:auto;padding:var(--s-4) 0 0;min-height:var(--tap); border:0;border-top:1px solid var(--c-line);background:none;cursor:pointer; font-family:var(--f-body);font-weight:700;font-size:.95rem;color:var(--c-blue-text); text-align:left;text-decoration:none} .nieuwskaart__pijl{display:grid;place-items:center;flex:none;width:34px;height:34px; border:1px solid var(--c-line);border-radius:50%;font-size:1.05rem;color:var(--c-green-dark); transition:background .15s,border-color .15s,transform .15s} .nieuwskaart__lees:hover{color:var(--c-green-dark)} .nieuwskaart__lees:hover .nieuwskaart__pijl{background:var(--c-yellow);border-color:var(--c-yellow);transform:translateX(3px)} @media (min-width:700px){ .nieuws__raster{grid-template-columns:repeat(2,minmax(0,1fr))} .nieuwskaart--uitgelicht{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch} .nieuwskaart--uitgelicht .nieuwskaart__beeld{aspect-ratio:auto;height:100%;min-height:320px} .nieuwskaart--uitgelicht .nieuwskaart__beeld .nieuwskaart__icoon{width:150px;height:150px} .nieuwskaart--uitgelicht .nieuwskaart__tekst{justify-content:center;padding:var(--s-7)} .nieuwskaart--uitgelicht .nieuwskaart__titel{font-size:1.75rem} .nieuwskaart--uitgelicht .nieuwskaart__samenvatting{font-size:1.05rem} } @media (min-width:1024px){ .nieuws__raster{grid-template-columns:repeat(3,minmax(0,1fr))} } /* De rij van drie op de startpagina heeft geen uitgelicht bericht en gaat daarom al bij 700 px naar drie kolommen. */ @media (min-width:700px){ .nieuws__raster--drie{grid-template-columns:repeat(3,minmax(0,1fr))} } /* -------------------------------------------------------------------------- 11c. Leesvenster: het hele bericht zonder de pagina te verlaten -------------------------------------------------------------------------- */ .leesvenster{width:min(680px,calc(100vw - 32px));max-height:85vh;padding:0; border:1px solid var(--c-line);border-radius:var(--r-lg);background:#fff; color:var(--c-ink);box-shadow:var(--shadow-2);overflow:auto} .leesvenster::backdrop{background:rgba(11,69,32,.62)} .leesvenster__binnen{padding:var(--s-6)} .leesvenster__sluit{display:inline-flex;align-items:center;gap:var(--s-2);float:right; min-height:var(--tap);padding:8px 18px;margin:0 0 var(--s-3) var(--s-4); border:1px solid var(--c-line);border-radius:var(--r-pill);background:#fff; font-family:var(--f-body);font-weight:700;font-size:.92rem;color:var(--c-ink);cursor:pointer} .leesvenster__sluit:hover{background:var(--c-bg-mint);border-color:var(--c-green);color:var(--c-green-dark)} .leesvenster__titel{margin:0 0 var(--s-4);font-size:1.6rem;line-height:1.2} .leesvenster__tekst p{max-width:none} .leesvenster__tekst p:last-child{margin-bottom:0} .leesvenster__naar{display:inline-block;margin-top:var(--s-5)} .leesvenster[hidden],.leesvenster__naar[hidden]{display:none} @media (max-width:699px){ .leesvenster__binnen{padding:var(--s-5)} .leesvenster__titel{font-size:1.35rem} } @media (prefers-reduced-motion:reduce){ .nieuwskaart,.nieuwskaart__pijl{transition:none} .nieuwskaart:hover{transform:none} .nieuwskaart__lees:hover .nieuwskaart__pijl{transform:none} } /* -------------------------------------------------------------------------- 12. Accordeon (FAQ) -------------------------------------------------------------------------- */ .acc{border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:var(--shadow-1)} .acc__item+.acc__item{border-top:1px solid var(--c-line)} .acc__btn{ display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); width:100%;min-height:56px;padding:var(--s-4) var(--s-5); background:none;border:0;cursor:pointer;text-align:left; font-family:var(--f-head);font-size:1.06rem;font-weight:700;color:var(--c-green-dark);line-height:1.3; } .acc__btn:hover{background:var(--c-bg-soft)} .acc__btn::after{content:"";flex:none;width:11px;height:11px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s ease} .acc__btn[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)} @media (prefers-reduced-motion:reduce){.acc__btn::after{transition:none}} .acc__panel{padding:0 var(--s-5) var(--s-5);display:none} .acc__panel.is-open{display:block} .acc__panel>:last-child{margin-bottom:0} /* -------------------------------------------------------------------------- 13. Tabellen -------------------------------------------------------------------------- */ .table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff} table{width:100%;border-collapse:collapse;font-size:.97rem;min-width:460px} caption{text-align:left;font-weight:700;padding:var(--s-4) var(--s-4) 0;color:var(--c-green-dark);font-family:var(--f-head);font-size:1.1rem} th,td{padding:13px var(--s-4);text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top} thead th{background:var(--c-green);color:#fff;font-weight:700;border-bottom:0;font-size:.93rem} tbody tr:last-child td,tbody tr:last-child th{border-bottom:0} tbody tr:nth-child(even){background:var(--c-bg-soft)} tbody th{font-weight:700;color:var(--c-green-dark)} td small{display:block;color:var(--c-ink-soft)} /* Een tabel met vijf kolommen past op een telefoon niet, hoe smal je de kolommen ook maakt. Een schuifbalk is dan de gemakkelijke uitweg, maar wie niet zijdelings schuift mist de helft van de gegevens, en op een privacypagina is dat precies de verkeerde helft. Daarom valt zo'n tabel op een smal scherm uiteen in kaarten: per rij één kaart, met boven elke waarde het kopje van de kolom. Dat kopje komt uit data-kop, dus de tekst staat één keer in de HTML en kan niet uit de pas lopen met de kolomkop. Op een breed scherm is het gewoon weer een tabel. */ .table-breed{max-width:100%} @media (max-width:899px){ .table--stapel{min-width:0;display:block;font-size:1rem} .table--stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .table--stapel tbody,.table--stapel tr,.table--stapel th,.table--stapel td{display:block;width:auto} .table--stapel tr{ border:1px solid var(--c-line);border-radius:var(--r-md); background:#fff;margin-bottom:var(--s-4);padding:var(--s-4) var(--s-4) var(--s-3); } .table--stapel tbody tr:nth-child(even){background:var(--c-bg-soft)} .table--stapel tbody tr:last-child{margin-bottom:0} .table--stapel tbody th{ padding:0 0 var(--s-3);border-bottom:2px solid var(--c-bg-mint);margin-bottom:var(--s-3); font-family:var(--f-head);font-size:1.1rem; } .table--stapel td{padding:0 0 var(--s-3);border-bottom:0} .table--stapel tr>td:last-child{padding-bottom:0} .table--stapel td::before{ content:attr(data-kop);display:block; font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--c-green-dark);margin-bottom:3px; } } @media (min-width:900px){ .table-breed{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff} } /* -------------------------------------------------------------------------- 14. Formulieren -------------------------------------------------------------------------- */ .form{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-1)} @media (min-width:768px){.form{padding:var(--s-6)}} .form__grid{display:grid;gap:var(--s-4)} @media (min-width:640px){.form__grid--2{grid-template-columns:1fr 1fr}} .field{display:flex;flex-direction:column;gap:6px} .field--full{grid-column:1/-1} .field label{font-weight:700;font-size:.96rem;color:var(--c-ink)} .field .hint{font-size:.86rem;color:var(--c-ink-soft);font-weight:400} .req{color:var(--c-orange-text);font-weight:700} input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],select,textarea{ width:100%;min-height:var(--tap);padding:11px 14px; font-family:var(--f-body);font-size:1rem;color:var(--c-ink); background:#fff;border:2px solid var(--c-border-ui);border-radius:var(--r-sm); } textarea{min-height:140px;resize:vertical;line-height:1.6} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px} input:hover,select:hover,textarea:hover{border-color:var(--c-green)} input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--c-green);outline:3px solid var(--c-blue-text);outline-offset:1px} input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--c-closed);background:#FFFBFA} ::placeholder{color:#6B6B67;opacity:1} .check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;min-height:var(--tap);cursor:pointer} .check input[type=checkbox],.check input[type=radio]{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--c-green);cursor:pointer} .check span{font-size:.96rem;line-height:1.5} .fieldset{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4);margin:0} .fieldset legend{font-weight:700;padding:0 8px;color:var(--c-green-dark);font-family:var(--f-head);font-size:1.05rem} .error-msg{display:none;color:#96300D;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px} .error-msg:empty{display:none} .form__status{margin-top:var(--s-4)} .form__status:empty{margin:0} .alert{display:flex;gap:12px;align-items:flex-start;padding:var(--s-4);border-radius:var(--r-sm);font-weight:600;border:1px solid} /* display:flex overrulede het hidden-kenmerk, waardoor een verborgen melding als leeg gekleurd vak bleef staan. */ .alert[hidden]{display:none} .alert svg{flex:none;width:22px;height:22px;margin-top:1px} .alert p{margin:0;max-width:none} .alert--error{background:var(--c-closed-bg);border-color:#E9A98F;color:#7C2708} .alert--ok{background:var(--c-open-bg);border-color:#9CCBA6;color:#0B4520} .alert--info{background:var(--c-bg-sky);border-color:#9BD1E8;color:#0A4A63} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- SITEMAP Een sitemap is van oorsprong een technische pagina, maar hij staat in de voettekst van elke pagina en wordt dus gewoon aangeklikt. Daarom per rubriek een kaart met het icoon uit de huisstijl ervoor, in plaats van vier kolommen met links onder elkaar. -------------------------------------------------------------------------- */ .sitekaarten{display:grid;gap:var(--s-4);grid-template-columns:1fr} @media (min-width:600px){.sitekaarten{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}} @media (min-width:1024px){.sitekaarten{grid-template-columns:repeat(3,1fr)}} .sitekaart{background:var(--c-bg);border:1px solid var(--c-line); border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-1)} .sitekaart__kop{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4); padding-bottom:var(--s-3);border-bottom:2px solid var(--c-bg-mint)} .sitekaart__kop img{width:48px;height:48px;flex:none;background:none} .sitekaart__kop span{font-family:var(--f-head);font-weight:700;font-size:1.1rem; color:var(--c-green-deep);line-height:1.2} .sitekaart__lijst{list-style:none;margin:0;padding:0} .sitekaart__lijst li{margin:0;max-width:none} .sitekaart__lijst li + li{border-top:1px solid var(--c-line)} .sitekaart__lijst a{display:block;padding:10px 2px;text-decoration:none; color:var(--c-blue-text);font-weight:600} .sitekaart__lijst a:hover,.sitekaart__lijst a:focus-visible{ color:var(--c-green-dark);text-decoration:underline} /* De voettekst was een vlak groen blok. Nu krijgt zij diepte en sfeer: een golvende bovenrand, een kleurverloop van speelgroen naar diepgroen, een zacht zonlicht rechtsboven en een grasrand onderaan. Alles met kleuren uit de huisstijl; de witte tekst houdt overal een contrast ruim boven de norm, want het verloop wordt naar onderen alleen maar donkerder. */ .footer{ position:relative;color:#fff;margin-top:var(--s-8); padding-top:34px; background: radial-gradient(70% 120% at 88% 0%, rgba(255,190,24,.20) 0%, rgba(255,190,24,0) 62%), linear-gradient(170deg, #1B8043 0%, var(--c-green) 32%, #0E5529 100%); } .footer a{color:#fff;text-decoration:none} .footer a:hover{text-decoration:underline;color:#fff} .footer__golf{ position:absolute;left:0;right:0;top:-1px;height:34px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-190 17-330-11-520-6s-300 26-470 15S120 -9 0 0z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/100% 100%; } /* Slotband: de laatste uitnodiging. Een eigen vlak boven de kolommen, zodat de voettekst begint met iets om te doen in plaats van met een lijst links. */ .footer__slot{ margin-top:var(--s-6);padding:var(--s-5) var(--s-5); border:1px solid rgba(255,255,255,.26);border-radius:var(--r-lg); background: radial-gradient(90% 180% at 100% 0%, rgba(255,190,24,.22) 0%, rgba(255,190,24,0) 70%), rgba(255,255,255,.08); display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5); align-items:center;justify-content:space-between; } @media (min-width:600px){.footer__slot{padding:var(--s-5) var(--s-6)}} .footer__slot-kop{ font-family:var(--f-head);font-weight:800;font-size:1.3rem;line-height:1.2; color:#fff;margin:0 0 6px;max-width:none; } @media (min-width:900px){.footer__slot-kop{font-size:1.5rem}} /* De status erft van het algemene statusblok een lichte achtergrond; op het groen van de voettekst moet die juist licht-op-donker zijn. */ .footer__status, .footer__status.status--open, .footer__status.status--soon, .footer__status.status--closed{ display:inline-flex;align-items:center;gap:10px;margin:0;max-width:none; padding:7px 15px 7px 13px;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.30);background:rgba(0,0,0,.20); color:#fff;font-weight:700;font-size:.95rem; } .footer__status-dot{ flex:none;width:11px;height:11px;border-radius:50%; background:var(--c-yellow);box-shadow:0 0 0 4px rgba(255,255,255,.14); } .footer__status[data-status="open"] .footer__status-dot{background:#7BD492} .footer__status[data-status="opent-later"] .footer__status-dot{background:#8FD2F0} .footer__status[data-status="gesloten"] .footer__status-dot{background:#FF9E82} .footer__slot-knoppen{display:flex;flex-wrap:wrap;gap:var(--s-3)} /* Een witte knop leest op dit groen als de duidelijkste stap: 11,9:1. */ .btn--licht,.footer a.btn--licht{background:#fff;color:var(--c-green-deep);border-color:#fff} .btn--licht:hover,.btn--licht:focus-visible, .footer a.btn--licht:hover,.footer a.btn--licht:focus-visible{ background:var(--c-bg-sun);border-color:var(--c-bg-sun);color:var(--c-green-deep);text-decoration:none} .footer__top{display:grid;gap:var(--s-6);padding-block:var(--s-7)} @media (min-width:640px){.footer__top{grid-template-columns:1fr 1fr}} @media (min-width:1024px){.footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr}} /* Kopjes in het geel van de huisstijl, met een kort streepje eronder. Dat geeft de kolommen een kop in plaats van vier gelijke lijstjes. Geel op het groen van de voettekst haalt 6,7:1. */ .footer h2,.footer h3{color:var(--c-yellow);font-size:1.02rem;margin-bottom:var(--s-3); letter-spacing:.01em} .footer h2::after,.footer h3::after{content:"";display:block;width:34px;height:3px; margin-top:7px;border-radius:999px;background:rgba(255,190,24,.55)} .footer ul{list-style:none;margin:0;padding:0} .footer li{margin-bottom:2px} .footer li a{display:inline-block;padding:7px 0;min-height:38px;font-size:.96rem} .footer p{color:rgba(255,255,255,.92);font-size:.96rem} .footer__logo{background:#fff;border-radius:var(--r-md);padding:12px 16px; display:inline-block;margin-bottom:var(--s-4);box-shadow:0 6px 18px rgba(0,0,0,.18)} .footer__logo img{height:62px;width:auto} /* Tachtig jaar vereniging is geen voetnoot: dat mag in de voettekst staan. */ .footer__sinds{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s-4); padding:8px 16px 8px 13px;border-radius:var(--r-pill); border:1px solid rgba(255,190,24,.45);background:rgba(255,190,24,.12); color:#fff;font-weight:700;font-size:.92rem;max-width:none} .footer__sinds svg{flex:none;width:18px;height:18px;color:var(--c-yellow)} .footer__social{display:flex;gap:var(--s-3);margin-top:var(--s-4)} .footer__social a{display:grid;place-items:center;width:var(--tap);height:var(--tap); border:2px solid rgba(255,255,255,.45);border-radius:50%; background:rgba(255,255,255,.08);transition:background .18s ease,border-color .18s ease} .footer__social a:hover,.footer__social a:focus-visible{ background:var(--c-yellow);border-color:var(--c-yellow);color:var(--c-green-deep)} @media (prefers-reduced-motion:reduce){.footer__social a{transition:none}} /* Adres, telefoon en e-mail met een icoon ervoor: drie regels die eruit springen tussen de gewone links eronder. */ .footer__gegevens li{display:flex;gap:10px;align-items:flex-start;margin-bottom:4px} .footer__gegevens svg{flex:none;width:18px;height:18px;margin-top:11px;color:var(--c-yellow)} .footer__gegevens a{line-height:1.45} /* De zakelijke gegevens horen erbij, maar niet even hard als de rest. */ .footer__zakelijk{ margin-top:var(--s-4);padding:10px 14px;max-width:none; border-left:3px solid rgba(255,190,24,.55);border-radius:0 var(--r-sm) var(--r-sm) 0; background:rgba(0,0,0,.16); } .footer__zakelijk small{color:rgba(255,255,255,.82);line-height:1.7;display:block} .footer__social svg{width:21px;height:21px} .footer__bottom{border-top:1px solid rgba(255,255,255,.22);padding-block:var(--s-4); font-size:.88rem;background:rgba(0,0,0,.14)} .footer__bottom .wrap{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:center;justify-content:space-between} .footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;margin:0;padding:0} .footer__legal a{font-size:.88rem;padding:6px 0;display:inline-block;text-decoration:underline} .footer__legal .footer__omhoog{display:inline-flex;align-items:center;gap:7px; text-decoration:none;font-weight:700;white-space:nowrap} .footer__omhoog svg{width:15px;height:15px} .footer__omhoog:hover{text-decoration:underline} /* De makersvermelding helemaal onderaan: één regel, gecentreerd, een slag donkerder dan de balk erboven. De namen staan in het zongeel van de huisstijl; dat haalt 6,7:1 op dit groen en blijft dus ruim leesbaar. */ .footer__maker{border-top:1px solid rgba(255,255,255,.14);padding-block:var(--s-3); background:rgba(0,0,0,.26);font-size:.82rem;color:rgba(255,255,255,.80);text-align:center} /* Alinea's zijn op deze site standaard hoogstens 68 tekens breed; dat is prettig lezen, maar het knipt deze ene regel onnodig in tweeën. */ .footer__maker p{max-width:none} .footer__maker a{color:var(--c-yellow);text-decoration:none;font-weight:600; border-bottom:1px solid rgba(255,190,24,.45);transition:border-color .18s ease} .footer__maker a:hover,.footer__maker a:focus-visible{border-bottom-color:var(--c-yellow)} @media (prefers-reduced-motion:reduce){.footer__maker a{transition:none}} /* Terug naar boven: een ronde knop rechtsonder, die pas verschijnt als er iets te scrollen valt. Op een telefoon staat hij boven de balk met snelle acties, zodat hij die niet afdekt. */ .omhoog{ position:fixed;right:16px;z-index:60; bottom:calc(var(--actionbar-h, 64px) + 14px); display:grid;place-items:center;width:48px;height:48px;border-radius:50%; background:var(--c-green);color:#fff;border:2px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.28);text-decoration:none; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .2s ease,transform .2s ease,background .18s ease; } @media (min-width:1024px){.omhoog{bottom:22px;right:22px;width:52px;height:52px}} .omhoog svg{width:22px;height:22px} .omhoog:hover,.omhoog:focus-visible{background:var(--c-green-dark);color:#fff} .omhoog--zichtbaar{opacity:1;visibility:visible;transform:translateY(0)} @media (prefers-reduced-motion:reduce){.omhoog{transition:none}} @media print{.omhoog{display:none}} /* De vier huisstijlkleuren als laatste streep onder de pagina. */ .footer__streep{height:6px;background:linear-gradient(90deg, var(--c-play) 0%, var(--c-play) 25%, var(--c-yellow) 25%, var(--c-yellow) 50%, var(--c-orange) 50%, var(--c-orange) 75%, var(--c-blue) 75%, var(--c-blue) 100%)} @media (max-width:1023px){.footer{margin-bottom:0}} /* -------------------------------------------------------------------------- 16. Cookiebanner & voorkeuren -------------------------------------------------------------------------- */ .cookiebar{ position:fixed;left:0;right:0;bottom:0;z-index:120; background:#fff;border-top:3px solid var(--c-green); box-shadow:0 -6px 30px rgba(0,0,0,.18); padding:var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom,0px)); display:none; } .cookiebar.is-open{display:block} .cookiebar h2{font-size:1.25rem;margin-bottom:var(--s-2)} .cookiebar p{font-size:.96rem;margin-bottom:var(--s-4);max-width:75ch} .cookiebar__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)} .cookiebar__actions .btn{flex:1 1 auto;min-width:180px} @media (min-width:768px){.cookiebar__actions .btn{flex:0 0 auto}} .cookieprefs{border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff;padding:var(--s-5);box-shadow:var(--shadow-1)} .cookieprefs__row{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4) 0;border-bottom:1px solid var(--c-line)} .cookieprefs__row:last-of-type{border-bottom:0} .cookieprefs__row h3{margin-bottom:4px;font-size:1.08rem} .cookieprefs__row p{margin:0;font-size:.94rem;color:#41493F} .switch{flex:none;display:flex;align-items:center;gap:10px;min-height:var(--tap)} .switch input{width:24px;height:24px;accent-color:var(--c-green);cursor:pointer} .switch label{font-weight:700;font-size:.92rem;cursor:pointer} .switch input:disabled{cursor:not-allowed;opacity:.6} /* Placeholder voor externe content (kaart/video) tot toestemming */ .consent-block{ background:var(--c-bg-soft);border:2px dashed var(--c-border-ui);border-radius:var(--r-md); padding:var(--s-6) var(--s-5);text-align:center; } .consent-block h3{font-size:1.12rem;margin-bottom:var(--s-2)} .consent-block p{margin-inline:auto;margin-bottom:var(--s-4);font-size:.96rem;color:#41493F} .consent-block__frame{aspect-ratio:16/9;border:0;width:100%;border-radius:var(--r-md);display:block} /* -------------------------------------------------------------------------- 17. Diversen -------------------------------------------------------------------------- */ .figure{margin:0} .figure img{border-radius:var(--r-md);width:100%} .figure figcaption{font-size:.86rem;color:var(--c-ink-soft);margin-top:8px} .gallery{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)} @media (min-width:768px){.gallery{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}} .gallery img{border-radius:var(--r-md);aspect-ratio:4/3;object-fit:cover;width:100%} /* -------------------------------------------------------------------------- Sponsorlogo's Elk logo staat op een witte tegel met de naam eronder. Die naam staat er ook als het logo er is: een logo dat je niet kent of door de grootte niet goed kunt lezen zegt niets, en bij een sponsor hoort juist dat zijn naam blijft hangen. De logo's houden hun eigen verhouding. Zij in een gelijk liggend vak persen zag er netjes uit op papier, maar een vierkant beeldmerk werd daardoor een derde van de grootte van een breed woordmerk. Nu begrenzen hoogte en breedte het logo en vult elk logo zijn eigen ruimte. -------------------------------------------------------------------------- */ .logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-4);list-style:none;padding:0;margin:0} .logos li{list-style:none;margin:0;min-width:0;background:#fff; border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4) var(--s-3); display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:var(--s-3);text-align:center} .logos__link{display:flex;flex-direction:column;align-items:center;gap:var(--s-3); text-decoration:none;color:inherit;width:100%} /* Het beeldvak heeft een vaste hoogte en het logo vult dat vak zo groot als het kan. Daardoor krijgt een staand logo (Morrien Lasvast, Mastermate, Rabobank) de volle hoogte en een liggend woordmerk de volle breedte. Met alleen een max-height bleef een staand logo op een derde van de breedte steken en was de naam erin niet te lezen. */ .logos__beeld{position:relative;width:100%;height:56px} .logos__naam{font-weight:700;font-size:.86rem;line-height:1.25;color:var(--c-ink-soft); overflow-wrap:anywhere;hyphens:auto} .logos__link:hover .logos__naam{color:var(--c-green-dark);text-decoration:underline} /* De algemene regel geeft elke afbeelding een mintgroen vlak zolang zij laadt. Een logo met een doorzichtige achtergrond houdt dat vlak dan voor altijd: een groen blok op een witte tegel. Daarom hier uitgezet. */ /* De hoogte wordt in pixels begrensd en niet in procenten. Een percentage wordt berekend over het omliggende vak, en dat leverde bij een staand logo een beeld op dat over zijn eigen tegel heen viel, dwars door de naam. */ /* Het logo wordt absoluut in het vak gelegd en met object-fit:contain ingepast. Met alleen max-height:100% ging het mis: een grid-rij groeit mee met zijn inhoud, waardoor die 100% zichzelf als maat nam en een staand logo gewoon op ware grootte buiten het vak hing. Zo niet: het vak heeft een vaste hoogte, het logo past daar altijd precies in en houdt zijn verhouding. */ .logos img{position:absolute;top:0;right:0;bottom:0;left:0; width:100%;height:100%;object-fit:contain;background:none} /* Op de sponsorpagina is de volle breedte beschikbaar: daar mogen de tegels en de logo's flink groter, want dat is waar een sponsor voor betaalt. */ /* Op een telefoon twee kolommen: zevenentwintig tegels onder elkaar wordt een eindeloze rol. Vanaf een tablet mogen de tegels flink groter worden. */ .logos--groot{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:var(--s-4)} .logos--groot li{padding:var(--s-4) var(--s-3);min-height:150px;justify-content:center} .logos--groot .logos__beeld{height:84px} .logos--groot .logos__naam{font-size:.9rem;color:var(--c-ink)} @media (min-width:600px){ .logos--groot{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-5)} .logos--groot li{padding:var(--s-5) var(--s-4);min-height:224px} .logos--groot .logos__beeld{height:144px} .logos--groot .logos__naam{font-size:.98rem} } .cta{background:var(--c-green);color:#fff;border-radius:var(--r-lg);padding:var(--s-6);text-align:center} @media (min-width:768px){.cta{padding:var(--s-7)}} .cta h2{color:#fff;margin-bottom:var(--s-3)} .cta a:not(.btn){color:#fff} .cta p{color:rgba(255,255,255,.94);margin-inline:auto;margin-bottom:var(--s-5);max-width:60ch} .cta--sun{background:var(--c-bg-sun);color:#3D2E00;border:1px solid var(--c-warn-line)} .cta--sun h2{color:#5C4400} .cta--sun p{color:#4A3600} .steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4)} .steps li{counter-increment:step;display:flex;gap:var(--s-4);margin:0;max-width:none} .steps li::before{ content:counter(step);flex:none;width:40px;height:40px;border-radius:50%; background:var(--c-green);color:#fff;display:grid;place-items:center; font-family:var(--f-head);font-weight:700;font-size:1.15rem; } .steps h3{font-size:1.1rem;margin-bottom:4px} .steps p{margin:0} .phero + .section--tight{padding-top:var(--s-5)} .pill-nav{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0 0 var(--s-5)} .pill-nav li{margin:0} .pill-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 16px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--c-line);color:var(--c-ink);text-decoration:none;font-weight:700;font-size:.92rem} .pill-nav a:hover{background:var(--c-bg-mint);border-color:var(--c-green);color:var(--c-green-dark)} .pill-nav a[aria-current="page"]{background:var(--c-green);border-color:var(--c-green);color:#fff} .toc{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5)} .toc h2{font-size:1.05rem;margin-bottom:var(--s-3)} .toc ol{margin:0;padding-left:1.2em} .toc li{margin-bottom:6px} .prose,.prose>*{min-width:0} .prose h2{margin-top:var(--s-7)} .prose h2:first-child{margin-top:0} .prose h3{margin-top:var(--s-5)} .prose>:last-child{margin-bottom:0} .muted{color:var(--c-ink-soft)} /* Voor gegevens die bij elkaar horen en dus niet over twee regels mogen: een tijdvak, een tarief, een telefoonnummer. */ .nowrap{white-space:nowrap} /* Een telefoonnummer bevat spaties en mag daardoor midden in het nummer afbreken: "0313 -" op de ene regel en "421308" op de volgende. */ a[href^="tel:"]{white-space:nowrap} /* Het grote bedrag of woord in een tariefkaart hoort op één regel. Op een smal scherm iets kleiner, want "Op aanvraag" is langer dan een bedrag. */ .price b{white-space:nowrap} @media (max-width:420px){.price b{font-size:2rem}} .mb-0{margin-bottom:0} .mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .m-0{margin:0} /* --------------------------------------------------------------------------- Klassen in plaats van style-kenmerken in de pagina. De beveiligingsregels van de server (Content-Security-Policy) staan opmaak in de pagina zelf niet toe: een style-kenmerk wordt op de echte server genegeerd, terwijl het op een testserver zonder die regels gewoon werkt. Dat verschil is onzichtbaar tot de site live staat. Daarom staat hier alles wat eerder als style-kenmerk in de HTML stond. --------------------------------------------------------------------------- */ .section--aansluitend{padding-top:0} .info--citaat{border-left-width:5px} .facts--opGroen{color:#fff} .opGroen{color:#fff} .lead-klein{font-size:1.1rem} .hero__eyebrow--midden{margin-inline:auto} .figure__img{object-fit:cover;width:100%} .figure__img--16-10{aspect-ratio:16/10} .figure__img--4-3{aspect-ratio:4/3} .figure__img--3-2{aspect-ratio:3/2} .figure__img--1-1{aspect-ratio:1/1} /* -------------------------------------------------------------------------- Beheerweergave: bestandsnaam bij elke foto. Verdwijnt volledig zodra beheer.toonBeeldnamen in /data/dsv-data.js op false staat. Alleen een hulpmiddel, geen onderdeel van het ontwerp. -------------------------------------------------------------------------- */ .beeldnaam-vak{position:relative;display:block} .beeldnaam{ position:absolute;left:8px;top:8px;z-index:4;max-width:calc(100% - 16px); background:var(--c-yellow);color:#3D2E00; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.72rem;font-weight:700;line-height:1.3; padding:5px 9px;border-radius:6px; border:1px solid #E0A500;box-shadow:0 1px 3px rgba(0,0,0,.25); overflow-wrap:anywhere;pointer-events:none; } /* Het beheerlabel staat op een telefoon onderin, over de decoratieve golf, zodat het geen tekst afdekt. Op groot scherm rechtsboven. */ .phero>.beeldnaam{left:auto;right:10px;top:auto;bottom:6px;font-size:.68rem;max-width:calc(100% - 20px)} @media (min-width:600px){.phero>.beeldnaam{bottom:10px;font-size:.72rem}} @media (min-width:900px){.phero>.beeldnaam{top:14px;bottom:auto;font-size:.75rem}} /* Een banner met twee lagen heeft twee labels. Het tweede schuift omlaag, anders staan zij precies over elkaar heen. */ .phero>.beeldnaam+.beeldnaam{bottom:36px} @media (min-width:600px){.phero>.beeldnaam+.beeldnaam{bottom:42px}} @media (min-width:900px){.phero>.beeldnaam+.beeldnaam{top:50px;bottom:auto}} @media (max-width:479px){.beeldnaam{font-size:.66rem;padding:4px 7px}} @media print{.beeldnaam{display:none}} /* Aanvullingen die nog gecontroleerd moeten worden door DSV */ .tbd{background:#FFF6DC;border-bottom:2px dotted var(--c-warn-line);padding:0 3px;font-weight:700;color:#6B4700} /* ========================================================================== SPEELTUINWEER De weerkaart gebruikt dezelfde tokens als de rest van de site, zodat zij niet als een ingeplakte widget aanvoelt. Alle kleuren komen uit de huisstijl; er staat hier geen losse hexcode die nergens anders voorkomt. ========================================================================== */ .weer{margin-top:var(--s-5)} .weer__status{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap; margin:0 0 var(--s-5);font-size:.92rem;color:var(--c-ink-soft)} .weer__stip{width:9px;height:9px;border-radius:50%;background:var(--c-open);flex:none} .weer__vernieuw{margin-left:auto} /* Boven in de kaart: het grote beeld links, de drie cijfers rechts. Als losse volle breedtes bleef er rechts van de temperatuur een leeg vlak over zo breed als een halve pagina. */ .weer__bovenin{display:grid;gap:var(--s-4)} @media (min-width:900px){ .weer__bovenin{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch} } .weer__nu{ display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap; background:linear-gradient(130deg,var(--c-bg-sky),var(--c-bg-mint) 62%,var(--c-bg-sun)); border:1px solid var(--c-line);border-radius:var(--r-lg); padding:var(--s-5) var(--s-6) } .weer__teken{font-size:clamp(3rem,2rem + 5vw,4.6rem);line-height:1;flex:none} .weer__graden{margin:0;font-family:var(--f-head);font-weight:800; font-size:clamp(2.4rem,1.8rem + 3.4vw,3.6rem);line-height:1;color:var(--c-green-deep); font-variant-numeric:tabular-nums} .weer__eenheid{font-size:.45em;font-weight:700;margin-left:.1em} .weer__omschrijving{margin:var(--s-2) 0 0;font-weight:700;font-size:1.08rem} .weer__bij{margin:var(--s-1) 0 0;color:var(--c-ink-soft);font-size:.94rem} /* Drie cijfers. Naast de temperatuur onder elkaar, daaronder op een rij. */ .weer__cijfers{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr;gap:var(--s-3)} .weer__cijfers li{display:grid;grid-template-columns:40px 1fr;gap:var(--s-1) var(--s-4); align-items:center;background:var(--c-bg-soft);border-radius:var(--r-md); padding:var(--s-4)} .weer__cijfers img,.weer__cijferteken{grid-row:1 / span 2;width:40px;height:40px; background:none;font-size:1.65rem;line-height:1;display:grid;place-items:center} .weer__cijfer{font-family:var(--f-head);font-weight:800;font-size:1.5rem;line-height:1.1; color:var(--c-green-deep);font-variant-numeric:tabular-nums} .weer__cijfer--klein{font-size:1.02rem;line-height:1.3} .weer__label{font-size:.9rem;color:var(--c-ink-soft)} @media (min-width:600px) and (max-width:899px){ .weer__cijfers{grid-template-columns:repeat(3,1fr)} .weer__cijfers li{grid-template-columns:40px 1fr} } /* Het advies: de enige regel die de bezoeker echt moet lezen. */ .weer__advies{display:flex;gap:var(--s-4);align-items:flex-start; margin-top:var(--s-4);padding:var(--s-5); background:var(--c-bg-sun);border:1px solid var(--c-warn-line);border-radius:var(--r-md)} .weer__adviesteken{font-size:2.1rem;line-height:1;flex:none} .weer__advies strong{display:block;color:var(--c-green-deep);font-family:var(--f-head); font-size:1.12rem;margin-bottom:var(--s-1)} .weer__kop{font-size:1.18rem;margin:0 0 var(--s-3);color:var(--c-green-deep)} /* align-items:start, anders rekt het smalle blok met de regenmeter het brede blok ernaast mee omhoog en staat daar een half scherm leeg. */ .weer__raster{display:grid;gap:var(--s-4);margin-top:var(--s-6);align-items:start} @media (min-width:720px){.weer__raster{grid-template-columns:230px 1fr}} .weer__meterblok,.weer__urenblok{ background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-lg); padding:var(--s-5)} .weer__metergetal{margin:0;font-family:var(--f-head);font-weight:800;font-size:1.7rem; color:var(--c-blue-text);font-variant-numeric:tabular-nums} .weer__meternoot{margin:var(--s-1) 0 0;font-size:.84rem;color:var(--c-ink-soft)} /* De maatglas-vorm: open bovenkant, ronde bodem, streepjes als schaal. */ .weer__meter{position:relative;width:104px;height:156px;margin:var(--s-4) auto; border:4px solid #7FB7D8;border-top:0;border-radius:8px 8px 26px 26px; overflow:hidden;background:var(--c-bg-sky)} .weer__meter::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2; background:repeating-linear-gradient(to top,transparent 0,transparent 24px, rgba(127,183,216,.45) 25px,rgba(127,183,216,.45) 26px)} .weer__water{position:absolute;left:0;right:0;bottom:0;height:0; background:linear-gradient(#7CC6F5,#2E86C8);transition:height .9s ease} /* Uur voor uur: staafjes van gelijke breedte, met het getal erboven. */ .weer__uren{list-style:none;margin:0 0 var(--s-3);padding:0; display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s-1); align-items:end;min-height:160px} .weer__uur{display:flex;flex-direction:column;align-items:center;gap:var(--s-2); font-size:.78rem;color:var(--c-ink-soft);text-align:center} .weer__uurmm{font-weight:800;color:var(--c-blue-text);font-variant-numeric:tabular-nums} .weer__baan{display:flex;align-items:flex-end;justify-content:center; width:100%;height:92px;border-bottom:1px solid var(--c-line); background:linear-gradient(transparent 49%,var(--c-bg-sky) 50%,transparent 51%)} .weer__staaf{display:block;width:60%;max-width:24px;min-height:4px; background:linear-gradient(180deg,#7CC6F5,#2E86C8);border-radius:6px 6px 0 0; transition:height .8s ease} .weer__uurtijd{font-weight:700;font-variant-numeric:tabular-nums} @media (min-width:900px){ .weer__uren{min-height:208px} .weer__baan{height:140px} } /* Vier dagen vooruit. */ .weer__dagen{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)} @media (min-width:720px){.weer__dagen{grid-template-columns:repeat(4,1fr)}} .weer__dag{background:var(--c-bg-soft);border-radius:var(--r-md);padding:var(--s-4); text-align:center;display:flex;flex-direction:column;gap:var(--s-1)} .weer__dagnaam{font-weight:800;color:var(--c-green-deep)} .weer__dagteken{font-size:1.9rem;line-height:1.2} .weer__dagtemp{font-weight:800;font-variant-numeric:tabular-nums} .weer__dagregen{font-size:.82rem;color:var(--c-ink-soft)} /* Alinea's zijn op deze site standaard hoogstens 68 tekens breed; dat leest prettig in lopende tekst, maar hier knipt het de bronvermelding onnodig af halverwege het blok. Deze regel loopt daarom over de volle breedte. */ .weer__bron{margin:var(--s-6) 0 0;padding-top:var(--s-4);max-width:none; border-top:1px solid var(--c-line);font-size:.86rem;color:var(--c-ink-soft)} /* Zolang er geen gegevens zijn, blijven de streepjes rustig staan in plaats van te schreeuwen om aandacht. */ .weer--leeg .weer__graden,.weer--leeg .weer__cijfer,.weer--leeg .weer__metergetal{opacity:.45} @media (max-width:479px){ .weer__nu{padding:var(--s-4);gap:var(--s-4)} .weer__uren{gap:2px;min-height:146px} .weer__uur{font-size:.68rem} .weer__baan{height:78px} } @media (prefers-reduced-motion:reduce){ .weer__water,.weer__staaf{transition:none} } @media print{ .weer__vernieuw,.weer__uren,.weer__meter{display:none} } /* ========================================================================== BIJZONDERE PROJECTEN Beeld naast tekst, om en om links en rechts. Op een telefoon staat het beeld altijd boven de tekst: twee kolommen van 160 px leest niemand. ========================================================================== */ .projecten{display:flex;flex-direction:column;gap:var(--s-7)} .project{ display:grid;gap:var(--s-5); background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-lg); padding:var(--s-5);box-shadow:var(--shadow-1) } .project__beeld{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--c-bg-mint)} .project__beeld img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} /* Een staand beeld, zoals een tekening, wordt niet bijgesneden: dan bleef er een strook uit het midden over. */ .project__beeld--staand{background:#fff} .project__beeld--staand img{aspect-ratio:auto;object-fit:contain} /* Een icoon is geen foto: dat moet niet beeldvullend worden uitgerekt. */ .project__beeld--mint{background:var(--c-bg-mint)} .project__beeld--sky{background:var(--c-bg-sky)} .project__beeld--sun{background:var(--c-bg-sun)} .project__beeld--rose{background:#FDECE6} .project__beeld--mint,.project__beeld--sky,.project__beeld--sun,.project__beeld--rose{ display:grid;place-items:center;aspect-ratio:16/10 } .project__icoon{width:128px;height:128px;max-width:60%;object-fit:contain;background:none; aspect-ratio:auto} .project__beeld figcaption{ padding:var(--s-3) var(--s-4);font-size:.88rem;color:var(--c-ink-soft); background:var(--c-bg-soft) } .project__meta{margin:0 0 var(--s-3)} .project__titel{margin:0 0 var(--s-3);font-size:clamp(1.35rem,1.1rem + 1.1vw,1.8rem)} .project__samenvatting{ margin:0 0 var(--s-4);font-size:1.06rem;font-weight:600;color:var(--c-ink); max-width:60ch } .project__tekst p{max-width:66ch} /* Tussenkop binnen een projectverhaal. Kleiner dan de projecttitel, want die blijft de kop van het hele blok; deze verdeelt alleen het verhaal eronder. */ .project__kop{font-size:1.18rem;color:var(--c-green-dark);margin:var(--s-5) 0 var(--s-3)} .project__kop:first-child{margin-top:0} /* Een losse regel die eruit moet springen, met het streepje in het zongeel van de huisstijl. Geen citaat van iemand, dus geen aanhalingstekens. */ .project__uitspraak{ margin:var(--s-4) 0;padding:2px 0 2px var(--s-4); border-left:4px solid var(--c-yellow); font-weight:700;color:var(--c-green-dark);font-size:1.05rem } .project__knop{margin-top:var(--s-4)} .project__feiten{list-style:none;margin:0 0 var(--s-4);padding:var(--s-4); background:var(--c-bg-soft);border-radius:var(--r-md); display:flex;flex-direction:column;gap:var(--s-3)} .project__feiten li{display:flex;align-items:flex-start;gap:var(--s-3); font-size:.95rem;line-height:1.45} .project__feiten img{width:32px;height:32px;flex:none;background:none} @media (min-width:860px){ .project{grid-template-columns:minmax(260px,40%) 1fr;align-items:start; gap:var(--s-6);padding:var(--s-6)} /* Om en om: bij het omgekeerde blok staat het beeld rechts. In de HTML blijft het beeld voorop staan, zodat de voorleesvolgorde gelijk blijft. */ .project--omgekeerd{grid-template-columns:1fr minmax(260px,40%)} .project--omgekeerd .project__beeld{grid-column:2;grid-row:1} .project--omgekeerd .project__tekst{grid-column:1;grid-row:1} } /* Genummerde stappen: groter en rustiger dan een gewone
    */ .stappen{margin:0 0 var(--s-5);padding-left:1.35em;display:flex;flex-direction:column; gap:var(--s-3)} .stappen li{padding-left:var(--s-2);line-height:1.55} .stappen li::marker{font-weight:800;color:var(--c-green)} /* Vangnet: losse inline-iconen blijven altijd icoongrootte */ p>svg,li>svg,span>svg,a>svg,button>svg{width:1.25em;height:1.25em;flex:none} .hero__media svg,.card__media svg,.figure svg,.consent-block svg{width:auto;height:auto} /* Print */ @media print{ .header,.topbar,.actionbar,.cookiebar,.drawer,.notice,.bouwband,.footer__social,.skip{display:none!important} body{font-size:11pt;padding:0} a{text-decoration:underline;color:#000} .card,.info,.form{box-shadow:none;border:1px solid #999} } /* -------------------------------------------------------------------------- Beeld- en tekstslot Hoort bij assets/js/beeldslot.js. Tekst selecteren en foto's wegslepen is uitgezet. Invoervelden en alles met de klasse "selecteerbaar" blijven wel te selecteren: een bezoeker moet het adres, het telefoonnummer en het rekeningnummer kunnen kopieren. Let op: dit staat hier in het opmaakblad en niet in de pagina zelf. De beveiligingskop van de server staat geen stijlen in de pagina toe. -------------------------------------------------------------------------- */ body{-webkit-user-select:none;user-select:none} input,textarea,select,[contenteditable],.selecteerbaar,.selecteerbaar *{ -webkit-user-select:text;user-select:text} img,picture,svg{-webkit-touch-callout:none;-webkit-user-drag:none} /* Afdrukken en voorlezen blijven gewoon werken; daar verandert dit niets aan. */ @media print{body{-webkit-user-select:text;user-select:text}}