/* Theme Name: Camping de Kei Description: Eigen thema voor Camping de Kei, minicamping in Lichtenvoorde. Mobiel eerst, vaste velden zodat de beheerder de opmaak niet kan breken. Author: Dayani Version: 0.1.0 Requires at least: 6.5 Requires PHP: 8.1 Text Domain: dekei */ /* ============================================================ 1. TOKENS Kleuren afgeleid van de oude site (#800000 rood, #006600 groen, #F8CC1D zonnebloemgeel) en getoetst op WCAG AA. ============================================================ */ :root{ /* kleur Merkoranje #F79522 komt uit het logo (gemeten: #F09020). Let op: 2,26:1 op wit. Dat is te licht voor tekst en te licht voor witte tekst erop. Daarom twee rollen: --oranje vlakken en accenten, met donkere tekst erop (6,35:1) --oranje-tekst links, knoppen en tekst (5,25:1 op wit) Rood #B01818 komt ook uit het logo en blijft spaarzaam. */ --oranje:#F79522; --oranje-licht:#FDF0DF; --oranje-tekst:#A85607; /* 5,25:1 op wit */ --oranje-donker:#8C4705; /* hover, 6,96:1 */ --rood:#B01818; /* logo-rood, 7,02:1 */ --groen:#0A800A; /* 5,12:1 op wit. Werkt als tekst en als vlak met WITTE tekst. Donkere tekst erop haalt maar 2,81, dus dat nooit doen. */ --groen-donker:#086008; /* hover, 7,82:1 */ --groen-licht:#EBF7EB; /* achtergrondvlak */ --tekst:#2B2A26; /* 14,36:1 op wit */ --tekst-zacht:#5C5951; /* 6,99:1 op wit */ --lijn:#EBE3D6; --wit:#FFFFFF; --creme:#F8F0E3; /* was #FDF9F3, te dicht op wit om de golf te laten lezen */ /* typografie. Definitieve keuze staat nog open, zie 02 Merk/Huisstijl.md */ --font-tekst:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-kop:var(--font-tekst); /* 17px basis: de doelgroep is 55-plus en leest vooral op mobiel */ --tekst-basis:1.0625rem; --regel:1.65; /* ruimte, 4px-raster */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --breedte:1180px; /* Ronder dan de 6px waar dit mee begon. Dat is het verschil dat het meest "gedateerd tegenover modern" doet; de referentiesites zitten allemaal tussen de 16 en 24, met pilvormige knoppen. */ --radius:18px; --radius-klein:10px; --radius-pil:999px; --schaduw:0 1px 3px rgba(43,42,38,.08), 0 4px 16px rgba(43,42,38,.06); --schaduw-diep:0 6px 18px rgba(43,42,38,.10), 0 18px 48px rgba(43,42,38,.10); --raak:44px; /* minimale aanraakoppervlakte */ --kop-h:68px; /* hoogte van de zwevende menubalk, zie hoofdstuk 4. Was 84px; de balk is op 4 september smaller gemaakt zodat er meer van de bannerfoto te zien blijft. */ } /* ============================================================ 2. BASIS ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} body{ margin:0; font-family:var(--font-tekst); font-size:var(--tekst-basis); line-height:var(--regel); color:var(--tekst); background:var(--wit); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-kop);line-height:1.2;margin:0 0 var(--s4);font-weight:700;text-wrap:balance} h1{font-size:clamp(1.85rem,1.3rem + 2.4vw,3rem)} h2{font-size:clamp(1.45rem,1.15rem + 1.4vw,2.1rem)} h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.45rem)} p{margin:0 0 var(--s4);max-width:68ch} a{color:var(--oranje-tekst);text-underline-offset:.18em} a:hover{color:var(--oranje-donker)} img{max-width:100%;height:auto;display:block} /* zichtbare focus, verplicht voor toetsenbordgebruik */ :focus-visible{outline:3px solid var(--oranje-tekst);outline-offset:2px;border-radius:3px} .wrap{width:min(100% - 2rem,var(--breedte));margin-inline:auto} @media (min-width:768px){.wrap{width:min(100% - 3rem,var(--breedte))}} .skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--oranje-tekst);color:#fff;padding:var(--s3) var(--s4)} .skip:focus{left:var(--s4);top:var(--s4)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============================================================ 3. KNOPPEN ============================================================ */ .knop{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:var(--raak);padding:var(--s3) var(--s6); font:inherit;font-weight:600;text-decoration:none; border:2px solid transparent;border-radius:var(--radius-pil);cursor:pointer; transition:background-color .15s,border-color .15s,color .15s,transform .15s; } .knop{white-space:nowrap} .knop:hover{transform:translateY(-1px)} .knop--primair{background:var(--oranje-tekst);color:#fff} .knop--primair:hover{background:var(--oranje-donker);color:#fff} .knop--rand{background:transparent;color:var(--oranje-tekst);border-color:var(--oranje-tekst)} .knop--rand:hover{background:var(--oranje-tekst);color:#fff} .knop--oranje{background:var(--oranje);color:var(--tekst)} /* 6,35:1 */ .knop--oranje:hover{background:#E5860F;color:var(--tekst)} .knop--groen{background:var(--groen);color:#fff} /* 5,12:1 */ .knop--groen:hover{background:var(--groen-donker);color:#fff} /* ============================================================ 4. HEADER Wens 3: contactgegevens prominent. Wens 4: duidelijk menu. Wens 5: mobiel prettig. 70% van het verkeer is mobiel. ============================================================ */ /* De maten in deze balk zijn op 4 september omhoog gegaan. Ze stonden op 14px en dat is te klein voor een deel van de gasten: de camping trekt veel oudere kampeerders, en dit is de plek waar het telefoonnummer en het mailadres staan. De balk zelf leest nu op 15px, en het nummer en het adres staan op 17px en halfvet, zodat ze binnen de balk het eerst opvallen. */ .balk{background:var(--oranje);color:var(--tekst);font-size:.9375rem} /* donkere tekst: 6,35:1 */ .balk__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:46px} .balk a{color:var(--tekst);text-decoration:none;font-weight:500} .balk a:hover{color:var(--tekst);text-decoration:underline} .balk__contact{display:none;gap:var(--s5);align-items:center} .balk__contact span{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap} /* Telefoon en mail: de twee dingen waar iemand deze balk voor afspeurt. */ .balk__contact a{font-size:1.0625rem;font-weight:600} /* De iconen groeien mee, anders bungelen ze naast de tekst. De maat in de HTML is de terugval voor het geval deze regel ooit sneuvelt. */ .balk__contact svg{flex:0 0 auto;width:18px;height:18px} /* Op mobiel staat de telefoon al als knop in de header; hier zou hij alleen de balk laten omvallen. Vanaf 600px komen nummer en mailadres er samen bij. Hier stond een regel die het mailadres pas vanaf 900px toonde. Die heeft nooit gewerkt: `.balk__contact span` erboven is specifieker dan `.balk__mail` en won altijd, dus het adres stond er vanaf 600px gewoon. Nu de contactgegevens juist het belangrijkste van deze balk zijn, is dat het gedrag dat we willen, en staat het er niet langer per ongeluk. */ @media (min-width:600px){.balk__contact{display:flex}} .balk__in{justify-content:flex-end} @media (min-width:600px){.balk__in{justify-content:space-between}} /* --- USP's in de balk --- Stonden tot 4 september als blok met vinkjes onder de hero. Nu midden in de balk, wisselend, zodat ze op elke pagina meelopen. Alle vijf staan in de HTML; assets/js/usps.js zet er drie zichtbaar op desktop, twee op tablet en één op mobiel. Zonder JavaScript blijven de eerste drie staan, en dan wisselt er simpelweg niets. */ .uspband{flex:1 1 auto;min-width:0;display:flex;justify-content:center; transition:opacity .26s ease} .uspband.is-wisselt{opacity:0} @media (prefers-reduced-motion:reduce){.uspband{transition:none}} .uspband__lijst{display:flex;align-items:center;gap:var(--s5); list-style:none;margin:0;padding:0;min-width:0} .uspband__item{display:inline-flex;align-items:center;gap:var(--s2); white-space:nowrap;font-weight:500;overflow:hidden;text-overflow:ellipsis} .uspband__item[hidden]{display:none} /* Vinkje in de donkere tekstkleur: op oranje valt de oranje schijf van het oude blok weg, dus alleen het haakje. */ .uspband__item::before{content:"";flex:0 0 auto;width:14px;height:14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2A26' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size:14px;background-position:center;background-repeat:no-repeat} /* Op tablet staat de ene zichtbare regel links, waar toch niets stond. Onder 700px vervalt de band helemaal. Daar staat sinds 4 september de Google-score rechts in de balk, en die past er niet allebei bij: de USP-regel werd afgekapt tot "Ruime comfortplaatse". Van de twee is 4,7 uit 251 reviews het sterkere argument, dus die wint op mobiel. Die grens stond op 600px en is op 4 september naar 1100px gegaan. Daaronder staan het nummer, het mailadres, de Google-score en de taalkeuze al in de balk, en dan blijft er van de USP-regel een half woord over: "Gratis w". Afgekapte tekst leest slechter dan geen tekst. Er staat sindsdien ook nog maar één regel tegelijk in plaats van twee. De balk is 1180px breed op zijn breedst, en met de grotere contactgegevens houdt de band daar ongeveer 480px over. De langste twee regels samen, "Veel wandel- en fietsmogelijkheden" en "Gratis wifi en warme douches", vragen ruim 530px. Ze wisselen toch, dus alle vijf komen nog steeds langs, alleen één voor één. Zie assets/js/usps.js. */ @media (max-width:1099px){ .uspband{display:none} } /* --- Google-beoordeling in de balk --- De pil was eerst vol wit met een schaduw en las als een los blok dat op de balk geplakt was. Daarna een laag wit over het oranje, en dat gaf een vage, melkachtige tint: wit over een verzadigde kleur haalt de kleur eruit zonder er een nieuwe voor terug te geven. Nu andersom: een laag van de donkere tekstkleur over het oranje. Dat maakt het vlak een dieper oranje uit dezelfde kleur, dus het blendt in plaats van dat het een eigen tint meebrengt. Precies wat de balk al doet bij de actieve taal (.taal a[aria-current], een stuk lager), dus het is geen nieuw idee maar hetzelfde patroon. De ster stond in goud (#E8A020) en dat werkte alleen op wit. Op oranje valt goud vrijwel weg, dus hij staat in de donkere tekstkleur. Dezelfde redenering als bij de vinkjes van de USP-band hierboven: op oranje houd je de vorm over, niet de kleur. Wat het laat opvallen is de vorm en het gewicht, niet een tweede kleur: het dieperoranje vlak met een rand eromheen, het cijfer vet. Donkere tekst op het diepere oranje haalt ongeveer 5,3:1, boven de eis van 4,5:1. De pil is teruggebracht tot ster, cijfer en het aantal tussen haakjes. Er stond "251 Google-reviews" uitgeschreven en dat maakte hem breder dan de contactgegevens ernaast, terwijl die het conversiepunt zijn. Het woord Google is daarmee van het scherm verdwenen, maar niet uit de pagina: het staat nog voluit in het aria-label en de pil linkt naar Google Maps. Nu hij zo kort is past hij op elke schermbreedte. De regel die het aantal onder 380px verborg is daarom weg; op een telefoon staat er hetzelfde als op een desktop. Alles staat op de maat van de balk zelf (.9375rem), dus even groot als NL en DE ernaast. Het cijfer stond daar al op; het aantal stond een maat kleiner en dat trok de hele pil optisch omlaag. Nu staat er geen eigen font-size meer op het aantal: het erft van de balk, en dan blijft het vanzelf gelijk als die maat ooit verandert. Het verschil in nadruk zit in het gewicht van het cijfer en in de opacity van het aantal, niet meer in de grootte. De rechtermarge komt bovenop de gap van de balk. Zonder dat staat de pil op brede schermen tegen NL aan: de USP-band ertussen duwt alles rechts naar elkaar toe tot precies die gap. */ .score{display:inline-flex;align-items:center;gap:6px;white-space:nowrap; flex:0 0 auto;background:rgba(43,42,38,.12);border-radius:var(--radius-pil); border:1px solid rgba(43,42,38,.18); padding:4px var(--s3) 4px var(--s2);line-height:1;margin-right:var(--s2)} .score:hover{background:rgba(43,42,38,.18);border-color:rgba(43,42,38,.28); text-decoration:none} .score svg{flex:0 0 auto;width:14px;height:14px;color:var(--tekst)} .score strong{font-weight:700} /* Het aantal iets ingehouden ten opzichte van het cijfer, maar niet in --tekst-zacht: die grijstint is voor op wit en vertroebelt op oranje. */ .score__aantal{color:var(--tekst);opacity:.75} .balk__rechts{display:flex;align-items:center;gap:var(--s3);margin-left:auto} .taal{display:flex;gap:var(--s1);align-items:center} .taal a{display:inline-flex;align-items:center;gap:6px; padding:var(--s1) var(--s2);border-radius:3px;font-weight:600} /* Het vlaggetje voor de landcode. Klein gehouden: het is een bevestiging van wat er in tekst naast staat, niet het aanwijsteken zelf. Daarom blijven NL en DE ook gewoon staan; een vlag alleen is een land en geen taal, en dat leest slechter dan het lijkt. De randlijn is nodig, niet decoratief: het wit van de Nederlandse vlag en het goud van de Duitse lopen allebei zonder rand over in het oranje van de balk, en dan verliest het vaantje zijn vorm. */ .taal__vlag{flex:0 0 auto;width:16px;height:11px;display:block;border-radius:1px; border:1px solid rgba(43,42,38,.3)} .taal a[aria-current="true"]{background:rgba(43,42,38,.14)} /* Onder 360px vervallen de vlaggen. Daar staan de score-pil links en de taalkeuze rechts in een balk van 46px, en twee vaantjes erbij duwen de taalkeuze op de pil. De landcode blijft, en die draagt de betekenis. */ @media (max-width:359px){.taal__vlag{display:none}} /* Zwevende capsule over de banner heen, zoals bij tempelhof.nl en campingschoneveld.nl. De header zelf is doorzichtig en blijft plakken; de witte capsule zit erbinnen. Het beeld eronder wordt met een negatieve marge omhoog getrokken (zie .hero en .paginakop), zodat de foto tot boven doorloopt en de capsule er los overheen ligt. */ /* Vaste hoogte in de bladspiegel. De capsule erbinnen mag groter zijn en hangt dan over de foto heen, precies zoals hij daar toch al overheen hangt. Zo verandert er niets aan de pagina als de kop krimpt: geen sprong, geen CLS. Met een negatieve ondermarge op de capsule lukte dit niet, want die marge klapt samen met die van de kop en ontsnapt naar buiten. */ .kop{background:transparent;position:sticky;top:0;z-index:100;pointer-events:none; height:var(--kop-h);padding-top:var(--s3)} /* De rij is doorzichtig; het wit zit in de twee blokken erbinnen: links het logo, rechts de menubalk. */ /* De ruimte boven de balk staat als padding op .kop en niet als marge op deze rij. Een marge hier klapt samen met die van .kop, ontsnapt naar buiten en duwt de hele kop 12px omlaag. Dat gaf een witte streep tussen de oranje balk en de foto, want daar keek je door de kop heen naar de pagina eronder. De rij loopt over de volle breedte in plaats van binnen .wrap, zodat het logo echt in de hoek kan staan. Rechts blijft er marge over voor de balk. */ .kop__in{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4); width:100%;max-width:none;margin-inline:0; padding-inline:0 clamp(1rem,3vw,2rem);pointer-events:none} /* Het logoblok. Vaste maat, altijd linksboven, hangt over de foto. De onderrand is asymmetrisch afgerond: sierlijker dan een rechthoek en het rijmt op de golven tussen de secties. Een echte golf vraagt clip-path, en dan volgt de schaduw de vorm niet meer. */ /* Tegen de linkerbovenhoek aan. De hoek zelf is vierkant, want een ronding daar laat een driehoekje foto doorschemeren en dat leest als een fout. De andere hoeken zijn juist ruim afgerond, zodat het vlak eruitziet alsof het aan de hoek vastzit in plaats van dat het er los tegenaan ligt. */ .merk{background:var(--wit);box-shadow:var(--schaduw-diep);pointer-events:auto; padding:var(--s3) var(--s4);flex:0 0 auto;margin-top:calc(-1 * var(--s3)); border-radius:0 var(--radius) 40px 0 / 0 var(--radius) 26px 0} @media (min-width:768px){ .merk{padding:var(--s4) var(--s5); border-radius:0 var(--radius) 64px 0 / 0 var(--radius) 36px 0} } /* De menubalk. Smaller dan de oude capsule van 68px, zodat er meer van de bannerfoto te zien blijft. */ .kop__balk{display:flex;align-items:center;gap:var(--s4);min-height:52px; padding-inline:var(--s4);background:var(--wit);border-radius:var(--radius-pil); box-shadow:var(--schaduw-diep);pointer-events:auto;flex:0 1 auto} @media (min-width:1024px){.kop__balk{padding-inline:var(--s5)}} .merk{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--tekst);flex-shrink:0} .merk__logo{width:170px;height:auto;display:block} @media (min-width:768px){.merk__logo{width:260px}} @media (min-width:1200px){.merk__logo{width:300px}} .merk__naam{font-weight:700;font-size:1.3rem;line-height:1.1} .merk__sub{display:block;font-size:.75rem;font-weight:500;color:var(--tekst-zacht);letter-spacing:.06em;text-transform:uppercase} /* telefoon altijd zichtbaar op mobiel, als tap-to-call */ .kop__bel{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-width:var(--raak);min-height:var(--raak); border:2px solid var(--oranje-tekst);border-radius:var(--radius); color:var(--oranje-tekst);text-decoration:none;font-weight:600;padding-inline:var(--s3); } .kop__bel:hover{background:var(--oranje-tekst);color:#fff} .kop__bel span{display:none} @media (min-width:560px){.kop__bel span{display:inline}} @media (min-width:1024px){.kop__bel{display:none}} /* op desktop staat het in de balk */ .kop__acties{display:flex;align-items:center;gap:var(--s2)} .kop__reserveer{display:none} @media (min-width:1024px){.kop__reserveer{display:inline-flex}} /* hamburger */ .menuknop{ display:inline-flex;align-items:center;justify-content:center; width:var(--raak);height:var(--raak); background:none;border:2px solid var(--lijn);border-radius:var(--radius);cursor:pointer; } .menuknop:hover{border-color:var(--oranje-tekst)} .menuknop__streep,.menuknop__streep::before,.menuknop__streep::after{ display:block;width:20px;height:2px;background:var(--tekst);border-radius:2px;transition:transform .2s,opacity .2s} .menuknop__streep::before,.menuknop__streep::after{content:"";position:relative} .menuknop__streep::before{top:-6px} .menuknop__streep::after{top:4px} [aria-expanded="true"] .menuknop__streep{background:transparent} [aria-expanded="true"] .menuknop__streep::before{transform:translateY(6px) rotate(45deg)} [aria-expanded="true"] .menuknop__streep::after{transform:translateY(-6px) rotate(-45deg)} @media (min-width:1024px){.menuknop{display:none}} /* ============================================================ 5. NAVIGATIE ============================================================ */ .nav{display:none} .nav.is-open{display:block;position:absolute;inset-inline:0;top:100%;background:var(--wit); border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw);max-height:calc(100dvh - 110px);overflow-y:auto} .nav ul{list-style:none;margin:0;padding:0} .nav a{display:flex;align-items:center;min-height:var(--raak);padding:var(--s3) var(--s4); color:var(--tekst);text-decoration:none;font-weight:500;border-bottom:1px solid var(--lijn)} .nav a:hover,.nav .current-menu-item > a{color:var(--oranje-tekst);background:var(--oranje-licht)} .nav .sub-menu a{padding-left:var(--s6);font-size:.95rem;color:var(--tekst-zacht)} /* De aanvraagknop onderin het uitklapmenu. Op desktop overbodig, want daar staat hij rechts in de balk. */ .nav__actie{margin:0;padding:var(--s4);border-bottom:1px solid var(--lijn)} .nav__actie .knop{width:100%} @media (min-width:1024px){ .nav__actie{display:none} .nav{display:block!important;position:static;box-shadow:none;border:0;background:none;max-height:none;overflow:visible} .nav > ul{display:flex;align-items:center;gap:var(--s1)} .nav > ul > li{position:relative} .nav > ul > li > a{min-height:auto;padding:var(--s2) var(--s3);border:0;border-radius:var(--radius)} .nav .sub-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--wit); border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:var(--s2); opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s} .nav > ul > li:hover .sub-menu,.nav > ul > li:focus-within .sub-menu{opacity:1;visibility:visible;transform:none} .nav .sub-menu a{border:0;border-radius:4px;padding:var(--s2) var(--s3);padding-left:var(--s3)} } /* ============================================================ 6. FOOTER ============================================================ */ /* Geen marge boven de footer. Die stond op 96px en gaf een witte strook tussen het laatste blok en de footer, op elke pagina. Elke pagina eindigt nu met een golf in de footerkleur, zodat het laatste vlak erin overloopt. Zie deel-contactblok.php, front-page.php en page-contact.php. De footer is op 6 september oranje geworden, in de huisstijlkleur, met de donkere tekstkleur erop: 6,35:1 en dus ruim boven de norm. Het oranje contactblok erboven heeft dezelfde kleur, dus die twee lopen in elkaar over en vormen samen de afsluiting van de pagina. De golf ertussen is daardoor op die pagina's onzichtbaar, en dat is precies de bedoeling; op /contact/, waar de pagina met een crème blok eindigt, doet diezelfde golf wél werk. */ .voet{background:var(--oranje);color:var(--tekst);padding-block:var(--s5) var(--s4);font-size:.875rem} .voet a{color:var(--tekst)} .voet a:hover{color:var(--tekst)} .voet h2{color:var(--tekst);font-size:.9rem;margin-bottom:4px} .voet ul{list-style:none;margin:0;padding:0} /* Eén raster: vijf kolommen met pagina's plus één met de gegevens. Stond tot 6 september in twee rijen met een scheidingslijn ertussen; die lijn en de ruimte eromheen kostten samen ruim 200px. */ .voet__grid{display:grid;gap:var(--s5) var(--s6)} @media (min-width:940px){.voet__grid{grid-template-columns:5fr 2fr;gap:var(--s6)}} .voet__kolommen{columns:2 140px;column-gap:var(--s5)} .voet__kolommen > li{break-inside:avoid;margin-bottom:var(--s4)} @media (min-width:940px){ .voet__kolommen{columns:auto;display:grid;gap:var(--s4) var(--s4); grid-template-columns:repeat(5,minmax(0,1fr))} .voet__kolommen > li{margin-bottom:0} } /* De kolomkop. Meestal een # zonder pagina erachter, dus geen wijzend handje en geen hover: het is een kop en geen link. */ .voet__kolommen > li > a{display:block;color:var(--tekst);font-weight:700;font-size:.875rem; margin-bottom:4px;text-decoration:none} .voet__kolommen > li > a[href$="#"]{cursor:default} .voet__kolommen > li > a[href$="#"]:hover{text-decoration:none} .voet__kolommen .sub-menu{list-style:none;margin:0;padding:0} .voet__kolommen .sub-menu a{color:var(--tekst);opacity:.82;text-decoration:none; font-size:.825rem;line-height:1.35} .voet__kolommen .sub-menu a:hover{opacity:1;text-decoration:underline} .voet__kolommen .sub-menu li{margin-bottom:1px} .voet__kolommen .current-menu-item > a{opacity:1;font-weight:600} /* De gegevens: adres, telefoon, mail en de openingsperiode. Op een breed scherm de laatste kolom, op een telefoon het enige dat overblijft. */ .voet__gegevens li{margin-bottom:3px} .voet__gegevens a{text-decoration:underline;text-underline-offset:.15em} .voet__adres{margin:0 0 var(--s2)} .voet__open{margin:var(--s2) 0 0;opacity:.8;font-size:.825rem} /* Op een telefoon staan de paginakolommen ingeklapt. Wie daar onderaan een pagina komt zoekt een telefoonnummer en geen inhoudsopgave, en het hoofdmenu is daar de weg door de site. ⚠️ Ingeklapt en niet `display:none`, en dat verschil is hier belangrijk. Google indexeert mobile-first, dus wat op de mobiele weergave verborgen is telt als interne link nauwelijks mee. Juist die links zijn de reden dat deze footer er staat: de vijf plaatspagina's (825 klikken samen) hebben nergens anders een vaste interne link. In een
blijven ze staan en tellen ze gewoon mee. Vanaf 940px vervalt het uitklappen: de summary verdwijnt en het blok staat open. Het openen en sluiten zelf doet assets/js/voet.js, niet deze CSS: een gesloten
verbergt zijn inhoud met content-visibility en daar komt een display-regel niet doorheen. Zonder JavaScript staat alles open. */ .voet__uitklap > summary{cursor:pointer;font-weight:700;font-size:.875rem; padding:var(--s2) 0;list-style-position:inside} .voet__uitklap > summary::marker{color:var(--tekst)} .voet__uitklap[open] > summary{margin-bottom:var(--s3)} @media (min-width:940px){ .voet__uitklap > summary{display:none} } /* De onderste regel: copyright links, de losse menuregel ernaast, de twee keurmerken rechts. ⚠️ De verzachting staat op de tekst en niet meer op .voet__onder zelf. Die stond hier tot 6 september als `opacity:.75` op het hele blok, en een kind kan de opacity van zijn ouder niet terugdraaien. De logo's zouden daarmee dof worden, en een merklogo hoor je niet te verkleuren. */ .voet__onder{margin-top:var(--s4);padding-top:var(--s2); border-top:1px solid rgba(43,42,38,.18); display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4); align-items:center;justify-content:space-between;font-size:.8rem} .voet__onder > span, .voet__onder > ul:not(.voet__keur){opacity:.75} /* De keurmerken. Klein, want ze zijn herkenning en geen argument: ACSI levert geen boekingen (zie 08 Kanalen/Boekingsportals.md) en ANWB levert ze via de gids, niet via dit plaatje. Elk logo staat op een wit vlakje. Zonder dat vlak vallen het lichtgroen van ANWB en het rood van ACSI weg tegen het oranje van de footer, en beide merken schrijven wit als achtergrond voor. De maten zijn optisch gelijk getrokken en niet op hoogte: ANWB is breed en laag, ACSI bijna vierkant, dus op dezelfde hoogte zou ACSI half zo groot lijken. */ /* Geen align-items hier: de twee vlakjes rekken zich zo tot dezelfde hoogte, ook al is het ANWB-logo breed en laag en het ACSI-logo bijna vierkant. */ .voet__keur{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0} .voet__keur li{display:flex;align-items:center;justify-content:center; background:#fff;border-radius:6px;padding:5px 8px; box-shadow:0 1px 2px rgba(43,42,38,.12)} .voet__keur img{display:block;height:auto} /* ============================================================ 7. INHOUD ============================================================ */ main{display:block} .blok{padding-block:var(--s7)} @media (min-width:768px){.blok{padding-block:var(--s8)}} .blok--creme{background:var(--creme)} .blok--oranje{background:var(--oranje);color:var(--tekst)} /* donkere tekst, 6,35:1 */ .blok--oranje-licht{background:var(--oranje-licht)} .inhoud{max-width:70ch} .inhoud > :last-child{margin-bottom:0} /* ============================================================ 8. HOMEPAGE ============================================================ */ /* --- Hero --- De kop staat niet meer óver de foto maar in een oranje kaart die over de onderrand valt. Geen van de vijf referentiesites zet zware tekst op het beeld; ze zetten de kop eronder of laten daar een boekbalk overheen vallen. Wij hebben geen boekingssysteem, dus die plek is vrij voor de kop. Winst: de foto mag op ware helderheid, en het contrastprobleem is weg in plaats van weggerekend met een donkere waas van 0,69 dekking. */ .hero{position:relative;margin-top:calc(-1 * var(--kop-h))} .hero__beeld{position:relative;overflow:hidden} /* Hoger dan de 340-600px waar dit mee begon: de kop is smaller geworden en de nieuwe banner is breder van formaat, dus er is ruimte om de foto te laten zien. */ .hero__foto{width:100%;height:clamp(420px,72vh,760px);object-fit:cover;object-position:center 45%} /* Op mobiel dezelfde ingreep als bij de paginabanner hieronder, en om dezelfde reden. De hero stond hier het scheefst van alle beelden op de site: bij 375x812 gaf 72vh een hoogte van 585px, en met een bron van 1672x752 werd de foto dan 1300px breed gerenderd. Daarvan stond 29% in beeld, uitgerekt uit de bron van 800 die `sizes="100vw"` liet laden. Ruim drie keer te grof, op de pagina die 76% van het verkeer trekt. Nu op 375x812: 357px hoog, de foto wordt 794px breed gerenderd, daarvan staat 47% in beeld, en de aangepaste `sizes` in front-page.php haalt daarvoor de bron van 1672. De rangorde van 31 augustus blijft staan: de hero is met 357px nog altijd ruim hoger dan de 244px van de paginabanner. */ @media (max-width:767px){ .hero__foto{height:clamp(320px,44vh,420px)} } /* De kaart met de kop, half over de foto heen */ .hero__kaart{position:relative;background:var(--oranje);color:var(--tekst); border-radius:var(--radius);box-shadow:var(--schaduw-diep); padding:var(--s6) var(--s5);margin-top:calc(-1 * clamp(40px,7vw,90px));max-width:880px} @media (min-width:768px){.hero__kaart{padding:var(--s7) var(--s7) var(--s6)}} /* De tekst houdt rechts ruimte vrij voor de zonnebloem in dezelfde kaart */ .hero__kaartin{position:relative;z-index:1} @media (min-width:700px){.hero__kaartin{padding-right:clamp(200px,37%,330px)}} .hero__kaart > :last-child{margin-bottom:0} /* De kop past op één regel zolang er ruimte is. Op smalle schermen mag hij wel breken: op één regel dwingen zou daar een onleesbaar kleine kop geven. */ .hero__kop{color:var(--tekst);max-width:26ch;margin-bottom:var(--s4)} @media (min-width:1000px){.hero__kop{white-space:nowrap;max-width:none}} .hero__tekst{color:var(--tekst);max-width:46ch;font-size:1.1rem;margin-bottom:var(--s5)} /* max-width:none heft de p{max-width:68ch} uit de basis op. Zonder dat is de knoppenrij smaller dan het vlak eromheen en helpt justify-content:center niet: de knoppen worden dan binnen die 68ch gecentreerd en staan links in beeld. Zichtbaar in het oranje contactblok onderaan de homepage. */ .hero__acties{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0;max-width:none} .knop--wit{background:#fff;color:var(--tekst)} .knop--wit:hover{background:var(--creme);color:var(--tekst)} .knop--donker{background:var(--tekst);color:#fff} .knop--donker:hover{background:#000;color:#fff} .knop--rand-donker{background:transparent;color:var(--tekst);border-color:var(--tekst)} .knop--rand-donker:hover{background:var(--tekst);color:#fff} /* De zonnebloem staat onderaan bij de hero-regels, zie hoofdstuk 10. */ /* --- Intro in twee kolommen --- Tekst links, beeld rechts. Gecentreerde tekst in een leeg wit vlak leest als een brief; de referentiesites zetten hier allemaal tekst naast beeld. De twee foto's verspringen, zoals bij watersnip.nl, met een oranje rand om de kleine. Die kleine is het kraampje, want daar gaat de tekst ernaast over. */ /* Tekst links, één foto rechts. De tweede, kleinere foto die hier overheen lag is op 4 september weggehaald; de opmaak voor die overlap dus ook. */ .intro{display:grid;gap:var(--s6);align-items:center} @media (min-width:900px){.intro{grid-template-columns:1fr 1fr;gap:var(--s8)}} .intro__tekst > :last-child{margin-bottom:0} .intro__tekst h2{margin-bottom:var(--s4)} .intro__tekst p{max-width:52ch} .intro__knop{margin-top:var(--s5)} .intro__groot{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--schaduw-diep)} /* --- Kopjes --- */ .blok__kop{text-align:center;margin-bottom:var(--s2)} .blok__sub{text-align:center;color:var(--tekst-zacht);max-width:52ch;margin:0 auto var(--s6)} .blok__kop + .kaarten{margin-top:var(--s6)} /* --- Kaarten --- */ .kaarten{display:grid;gap:var(--s4)} @media (min-width:700px){.kaarten{grid-template-columns:repeat(3,1fr);gap:var(--s5)}} .kaart{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn); border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--tekst); transition:transform .18s,box-shadow .18s,border-color .18s} .kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw);border-color:var(--oranje);color:var(--tekst)} .kaart__beeld{display:block;aspect-ratio:4/3;background:#DDD8CE center/cover no-repeat} /* Variant met een echte in plaats van een achtergrond. Die kan srcset en lui laden, wat een CSS-achtergrond niet kan. */ .kaart__foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#DDD8CE} /* Tekst gecentreerd, zowel de kop als de regel eronder. De kaarten staan naast elkaar op een symmetrisch raster, en linksuitgelijnde tekst in drie kaartjes van ongelijke lengte gaf een rommelige linkerrand. */ .kaart__in{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) var(--s4) var(--s5); text-align:center} .kaart__in strong{font-size:1.15rem} .kaart__in span{color:var(--tekst-zacht);font-size:.95rem} /* variant met tekst over het beeld, zoals de omgevingsblokken */ .kaart--hoog{position:relative;border:0} .kaart--hoog .kaart__beeld{aspect-ratio:3/4} @media (min-width:700px){.kaart--hoog .kaart__beeld{aspect-ratio:4/5}} .kaart__over{position:absolute;inset:auto 0 0 0;padding:var(--s5) var(--s4) var(--s4); display:flex;flex-direction:column;gap:var(--s1);color:#fff;text-align:center; background:linear-gradient(180deg,transparent,rgba(43,42,38,.82))} .kaart__over strong{font-size:1.3rem} .kaart__over span{font-size:.95rem;color:#EDE8E0} /* --- Citaat --- De sterkste social proof die er is: echte woorden van gasten in plaats van bedachte marketingtaal. Stond kaal op wit, nu op crème met de zonnebloem ernaast als merkaccent. */ /* Het citaat staat midden op de pagina, niet midden in de rechterkolom. De zonnebloem is daarom vanaf 820px uit de rasterstroom gehaald en hangt links naast de tekst. Met de bloem als eerste kolom kwam de tekst ruim honderd pixels rechts van het midden uit, en dat viel op. */ .citaat{display:grid;gap:var(--s5);align-items:center;position:relative} /* Gespiegeld, net als in de banner, zodat de bloemkop naar het citaat toe kijkt in plaats van de pagina uit. */ .citaat__bloem{width:clamp(120px,34vw,230px);height:auto;justify-self:center; transform:scaleX(-1) rotate(-8deg);filter:drop-shadow(0 8px 22px rgba(43,42,38,.18))} @media (min-width:820px){ .citaat__bloem{position:absolute;left:0;top:50%;width:clamp(150px,18%,230px); transform:translateY(-50%) scaleX(-1) rotate(-8deg)} .citaat__in{padding-inline:clamp(180px,20%,260px)} } .citaat__in{min-width:0;text-align:center} .citaat .kicker{text-align:center} .citaat blockquote{margin:0 auto;border-left:0;padding:0;max-width:56ch} .citaat p{font-size:clamp(1.15rem,1rem + .7vw,1.55rem);line-height:1.45;color:var(--tekst); font-weight:500;margin-bottom:var(--s4)} /* De aanhalingstekens horen bij het citaat zelf. Stonden op elke alinea binnen .citaat, dus ook om de knop eronder: daar stond letterlijk "knop". */ .citaat blockquote p::before{content:"\201C"} .citaat blockquote p::after{content:"\201D"} /* De citaten liggen op elkaar in één rastercel. Daardoor is het blok zo hoog als het langste citaat en springt de pagina niet bij het wisselen. */ .citaten{display:grid} .citaten > .citaat__item{grid-area:1 / 1;opacity:0;visibility:hidden; transition:opacity .5s ease} .citaten > .citaat__item.is-actief{opacity:1;visibility:visible} @media (prefers-reduced-motion:reduce){.citaten > .citaat__item{transition:none}} .citaat cite{display:block;font-style:normal;font-weight:600;color:var(--tekst-zacht);font-size:.95rem} /* Knopjes om zelf te bladeren. Verborgen zolang JavaScript ze niet heeft aangezet, want dan valt er niets te bedienen. */ .citaat__knopjes{display:flex;gap:var(--s1);margin-top:var(--s3);justify-content:center} /* Het knopje is 26px in het vierkant en dus goed te raken, ook met een duim op een telefoon. Het bolletje dat je ziet is 10px en wordt met ::before getekend; de rest is doorzichtige ruimte eromheen. Zonder dat kom je op 10px uit, en dat is voor deze doelgroep te klein. */ .citaat__knop{width:26px;height:26px;padding:0;border:0;background:none; display:grid;place-items:center;cursor:pointer;border-radius:50%} .citaat__knop::before{content:"";width:10px;height:10px;border-radius:50%; background:rgba(43,42,38,.22);transition:background .2s ease,transform .2s ease} .citaat__knop:hover::before{background:rgba(43,42,38,.45)} .citaat__knop.is-actief::before{background:var(--oranje);transform:scale(1.3)} .citaat__knop:focus-visible{outline:2px solid var(--tekst);outline-offset:0} /* Kleiner dan de gewone knop: dit is een vervolgstap, geen hoofdactie. De hoofdactie op deze pagina is contact opnemen. */ .citaat__meer{margin:var(--s5) 0 0;text-align:center} .citaat__meer .knop{font-size:.95rem;padding:var(--s2) var(--s4);border-width:1px} @media (max-width:819px){ .citaat{grid-template-columns:1fr} .citaat__bloem{justify-self:start;width:clamp(104px,26vw,150px)} } /* ============================================================ 9. INHOUDSPAGINA'S ============================================================ */ /* Inhoudspagina's krijgen hetzelfde ritme als de homepage: een crème vlak met de tekst in een wit blok erop, en onderaan het oranje contactblok. Zonder dat stond alles op één wit vlak en liep de tekst tot halverwege de pagina met een leeg rechterdeel ernaast. Het blok is gecentreerd, dus die lege kant is weg zonder de regellengte op te rekken. Bij 17px is 820px ongeveer 75 tekens; ruimer maakt het voor een doelgroep van 55-plus juist lastiger. */ .pagina{padding-block:var(--s7) var(--s8);background:var(--creme);position:relative} .pagina .inhoud{max-width:700px;margin-inline:auto;background:var(--wit); border-radius:var(--radius);box-shadow:var(--schaduw); padding:var(--s5) var(--s5) var(--s6)} @media (min-width:768px){.pagina .inhoud{padding:var(--s7) var(--s7) var(--s7)}} /* De kaart begrenst de regellengte al, dus de losse alineabreedte mag eraf */ .pagina .inhoud p,.pagina .inhoud li{max-width:none} .pagina .inhoud > :last-child{margin-bottom:0} /* Pagina's met brede tabellen, een formulier of vier contactitems naast elkaar hebben meer ruimte nodig dan een leesbare tekstkolom. Daar weegt de tabel zwaarder dan de regellengte. */ .pagina .inhoud--breed{max-width:960px} /* --- Tekstblokken op inhoudspagina's (de nieuwe opzet, 1 sep 2026) --- De tekst zat in één witte kaart op een crèmevlak. Dat las als een kader om de pagina en gaf een inhoudspagina een andere opbouw dan de homepage. Nu staat elke

in een eigen blok met afwisselend crème en wit, met een golf ertussen, net als de homepage. Deze secties staan buiten .pagina, dus de kaartopmaak hierboven raakt ze niet en hoeft nergens teruggedraaid te worden. Wat wél blijft gelden is alles wat aan .inhoud zelf hangt: de lead, de lijsten, de tabellen, de let-op-kaders. 820px is bij 17px ongeveer 75 tekens. Ruimer leest voor een doelgroep van 55-plus juist slechter, ook al is er breedte over. Links uitlijnen en niet centreren: de secties mét foto beginnen bij de linkerrand van de wrap, en een gecentreerde tekstsectie ertussen laat de linkerrand van de pagina heen en weer springen. Eén rand voor alles leest als één pagina in plaats van als losse blokken. */ .blok--tekst .inhoud{max-width:820px} /* Lange lijstpagina's (meer dan acht koppen) staan als één blok. Daar houdt de tekst zijn leesbreedte, maar mogen tabellen en galerijen de volle breedte pakken. Zonder dit scrollt de tarieventabel van zes kolommen horizontaal, terwijl er ruimte zat is. Alles blijft links uitgelijnd, dus de randen lopen door. */ .blok--tekst .inhoud--lang{max-width:none} .blok--tekst .inhoud--lang > p, .blok--tekst .inhoud--lang > ul, .blok--tekst .inhoud--lang > ol, .blok--tekst .inhoud--lang > h2, .blok--tekst .inhoud--lang > h3, .blok--tekst .inhoud--lang > blockquote, /* De vragenrij is tekst en geen tabel, dus die houdt de leesbreedte. Zonder deze regel lopen de vragen op de tarievenpagina over de volle 1180px. */ .blok--tekst .inhoud--lang > .faq{max-width:820px} /* --- Foto naast een lange lijstpagina --- Die 820px hierboven laat op een band van 1180px een strook van ruim 300px leeg aan de rechterkant. Op /omgeving/activiteiten/ staat daar een foto in, naast de eerste onderwerpen. De tekstkolom zelf verandert niet: hij houdt dezelfde 820px als op elke andere lange pagina, dus een brede tabel kan nog steeds de volle breedte pakken. Pas vanaf 1180px, want dan is de band breed genoeg om 820px tekst én een foto van zo'n 280px kwijt te kunnen. Daaronder stapelt het en staat de foto bóven de tekst, gelijk aan .sectie hierboven en aan de rest van de site. Dat is de stand voor 70% van het verkeer, dus de foto moet daar op zichzelf iets zeggen. */ .langnaast{display:grid;gap:var(--s5)} @media (min-width:1180px){ .langnaast{grid-template-columns:minmax(0,820px) minmax(0,1fr); gap:var(--s6);align-items:start} /* order in plaats van de figure achteraan zetten: dan blijft de stapelvolgorde op mobiel foto-boven-tekst, net als .sectie--omgekeerd. */ .langnaast__beeld{order:2} } .langnaast__beeld{margin:0} .langnaast__beeld img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;border-radius:var(--radius);box-shadow:var(--schaduw)} /* Eén losse regel die net niet binnen de 68ch uit de basis past en dan een enkel woord op een tweede regel achterlaat. .breed haalt die grens weg, waarna de alinea de 820px van de sectie pakt: precies de maat die .inhoud--lang hierboven zijn alinea's al geeft. Daardoor staat dezelfde zin op /camping/ en op /contact/ nu allebei op één regel, terwijl de rest van de site zijn smallere leesbreedte houdt. Op telefoon krimpt de sectie mee, dus daar breekt de zin gewoon af zoals elke andere. */ .blok--tekst .inhoud > p.breed{max-width:none} /* De sectie levert de ruimte boven de kop al, dus de kop zelf hoeft niets. */ .blok--tekst .inhoud > :first-child{margin-top:0} /* Geen oranje streep boven de koppen meer. Die was de scheiding tussen de onderdelen, en dat doet de wisselende achtergrond nu. Twee scheidingen boven elkaar is er een te veel. */ .blok--tekst .inhoud h2{border-top:0;padding-top:0} /* --- Sectie met beeld: het vlak waar het om draait --- Twee kolommen, foto naast tekst, en de foto wisselt van kant. Dat is wat campingvlietland.nl doet op /faciliteiten/ en het is de helft van het effect dat Dayani zoekt: de wisselende achtergrond alleen levert banden op, pas met een groot beeld erin worden het vlakken. Onder 900px stapelen ze, met de foto boven de tekst. Dat is de stand voor 70% van het verkeer, dus de foto moet daar op zichzelf iets zeggen. */ .sectie{display:grid;gap:var(--s5)} @media (min-width:900px){ .sectie{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:center} /* order in plaats van een tweede grid-definitie: dan blijft de stapelvolgorde op mobiel altijd foto-boven-tekst, ongeacht de kant op desktop. */ .sectie--omgekeerd .sectie__beeld{order:2} } .sectie__beeld{margin:0} .sectie__beeld img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; border-radius:var(--radius);box-shadow:var(--schaduw)} /* In een kolom is de kolom zelf de regelmaat, dus de losse tekstbreedte eraf. */ .sectie .inhoud{max-width:none} /* --- Paginaheader: beeldband met golvende afsnijding --- Loopt met een negatieve marge onder de zwevende headercapsule door, net als de hero op de homepage. Daardoor begint de foto echt bovenaan de pagina. */ .paginakop{position:relative;line-height:0;background:var(--creme); margin-top:calc(-1 * var(--kop-h))} /* --- Grotere banner, zodat er meer van de foto te zien is --- Op 4 september uitgeprobeerd op /camping/ en daarna uitgerold naar alle pagina's die deel-paginakop.php gebruiken. De homepage heeft een eigen hero in front-page.php en verandert hier niet door. Waarom aspect-ratio en niet simpelweg een hogere clamp: de headerbeelden zijn allemaal 1500x583, dus een strook van 2,57 breed staat tot 1 hoog. Bij `cover` betekent extra hoogte boven breedte/2,57 niet meer beeld maar juist minder: hij gaat dan links en rechts afsnijden en de foto opschalen. Met aspect-ratio komt de banner precies op de verhouding van de bron uit, en valt er dus niets weg. min-height houdt de oude maat als bodem. Daardoor wordt de banner nergens kleiner dan hij was: op smalle schermen wint die bodem en blijft alles zoals het was, op brede schermen wint de verhouding en wordt hij groter. Gemeten met de bron van 1500x583: Gemeten in Chrome, hoogte van de bannerfoto en hoeveel van de bron er verticaal in past: 1440x845 456px -> 560px past 82% -> 100% van de foto 1920x845 456px -> 575px past 61% -> 77% (max-height bijt) 1280x845 456px -> 498px past 82% -> 100% 500x844 456px -> 456px ongewijzigd, de bodem wint 390x844 456px -> 456px ongewijzigd, de bodem wint De verhouding staat op 2,4 en niet op de 2,57 van de bron. Dat is de tweede ronde: op de bronverhouding kwam de banner op 1440px uit op 560px en dat mocht van Dayani nog iets groter. Met 2,4 wordt het 600px. De prijs is 7% van de breedte, ruim 50px aan elke kant van een bron van 1500px, en daar staat aan beide randen gras. Verticaal valt er nog steeds niets weg. ⚠️ Hier zit het plafond: de hero op de homepage staat op clamp(420px,72vh,760px) en hoort de grootste te blijven, zie de beslissing van 31 augustus. Op 1440x845 is dat 608px tegen 600px hier. Nog breder uitsnijden dan 2,4 gaat daar dus overheen, en dan moet eerst die rangorde-afspraak om. max-height op 68vh om dezelfde reden: op een breed en laag venster (1920x845) haalt de verhouding 800px, en zonder grens zou deze banner daar ruim boven de hero uitkomen. */ .paginakop__foto{ width:100%; height:auto; aspect-ratio:2.4 / 1; /* De bodem is de maat van vóór 4 september. Daardoor wordt de banner nergens kleiner dan hij was: op smalle schermen wint deze bodem, op brede schermen de verhouding hierboven. */ min-height:clamp(340px,54vh,580px); max-height:68vh; object-fit:cover; object-position:center 45%; } /* --- Mobiel: lagere banner, zodat er meer foto in beeld past en scherper --- Gevraagd door Dayani op 6 september. Op een telefoon won de min-height hierboven met afstand van de verhouding: bij 375x812 rekent 54vh de banner op 438px, terwijl 2,4 op die breedte om 156px vraagt. Bij `cover` levert die extra hoogte geen extra beeld op maar juist minder. De browser schaalt de foto dan op hoogte en snijdt links en rechts weg, en hij vergroot daarbij op. Gemeten op 375x812 met de bron van 1500x583: 438px hoog -> de foto wordt 1128px breed gerenderd daarvan staat 375px in beeld, dus 33% van de bron bij dpr 2 zijn 2256 beeldpunten nodig, geladen werd 900 Twee derde van de foto viel dus weg, en het derde deel dat overbleef werd twee en een half keer uitgerekt. Vandaar de zachte banner op telefoon. Mobiel rekent nu met een eigen bodem. Gemeten op 375x812: 244px hoog -> de foto wordt 628px breed gerenderd daarvan staat 375px in beeld, dus 60% van de bron bij dpr 2 zijn 1256 beeldpunten nodig, en de `sizes` in deel-paginakop.php laat de browser daarvoor de bron van 1500 kiezen in plaats van die van 900 De bodem blijft nodig omdat de zwevende menucapsule de bovenste 64px van de banner afdekt en de titelkaart de onderste 40px. Precies op de verhouding van de bron gaan zou 146px geven, en daar blijft na die twee 42px van over. Met 244px houdt de zichtbare strook 140px. max-height vervalt hier. Die stond er voor brede en lage vensters en kan op een telefoon alleen maar in de weg zitten. */ @media (max-width:767px){ .paginakop__foto{ min-height:clamp(230px,30vh,290px); max-height:none; } } /* Hier stond tot 6 september een eigen object-position van 28% voor /caravan-huren/ en /de/mietwohnwagen/. De banner van die pagina's was toen de caravan schuin in beeld, met het terras links en de voortent rechts, en zonder die verschuiving hield de telefoon alleen het donkere zeil over. De banner is nu de foto met de gasten aan tafel: die staat frontaal en de twee gasten zitten in het midden, dus de standaard center 45% snijdt op mobiel precies om de tafel heen. Terugzetten heeft alleen zin als hier weer een schuin beeld komt te staan. */ /* De titelkaart een stuk over de banner heen. Dat was de bedoeling van de negatieve marge op .paginakop__kaart, maar het werkte niet: die marge liep door .wrap heen omhoog en trok de bovenrand van .paginakop__onder mee. Gevolg was dat het crème vlak zelf 90px over de foto ging liggen, en de kaart daar netjes bovenop begon. Je zag dus geen overlap maar een rechte afsnijding, en de golf onderaan de foto was op geen enkel venster zichtbaar. display:flow-root maakt van dit vlak een eigen opmaakcontext, en dan houdt die marge op bij de kaart. Het crème begint weer waar de foto ophoudt, de kaart schuift als enige omhoog, en de golvende afsnijding komt links en rechts van de kaart tevoorschijn zoals hij altijd bedoeld was. Het levert meteen 90px extra zichtbaar beeld op, want dat stuk foto was gewoon afgedekt. */ /* De golf is crème, want dat is de kleur van het vlak eronder. */ .paginakop__golf{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(26px,4vw,52px);color:var(--creme);display:block} /* --- Titelkaart, half over de foto heen --- Hetzelfde middel als de hero op de homepage, en om dezelfde reden: op 31 augustus is besloten de kop niet óp de foto te zetten omdat er wit in het beeld kan zitten waar witte tekst tegen wegvalt. Met een kaart is dat structureel opgelost en hoeft niet elke paginafoto op contrast nagelopen. De kaart pakt de kop, het kruimelpad en de inleiding bij elkaar. Dat was eerst een witte balk over de volle breedte die een half scherm kostte zonder iets te zeggen. */ .paginakop__onder{background:var(--creme);position:relative;display:flow-root} /* De kaart loopt over de volle breedte van .wrap, gelijk aan de zwevende headercapsule erboven en aan de tekstblokken eronder. Stond tot 4 september op max-width:880px, waardoor de rechterrand van de kaart 300px binnen die van de menubalk viel en de pagina scheef oogde. */ .paginakop__kaart{background:var(--wit);border-radius:var(--radius); box-shadow:var(--schaduw-diep);padding:var(--s5); margin-top:calc(-1 * clamp(40px,7vw,90px));position:relative} @media (min-width:768px){.paginakop__kaart{padding:var(--s6) var(--s7)}} .paginakop__kaart .kruimels{margin-bottom:var(--s3)} .paginakop__titel{margin:0} /* De inleiding in de kaart krijgt geen oranje streep zoals in de lopende tekst: de kaart is hier al de omkadering, en een streep erbij is er een accent te veel vlak onder de kop. */ .paginakop__kaart .lead{font-size:1.12rem;line-height:1.6;color:var(--tekst-zacht); border:0;padding:0;margin:var(--s4) 0 0;max-width:62ch} .paginakop__kaart > :last-child{margin-bottom:0} /* .pagina__titel is vervallen: de titel zit nu in .paginakop__kaart */ .kruimels{font-size:.9rem;color:var(--tekst-zacht);margin:0 0 var(--s3)} .kruimels a{color:var(--tekst-zacht)} .kruimels span[aria-current]{color:var(--oranje-tekst);font-weight:600} .inhoud h2{margin-top:var(--s7)} .inhoud h3{margin-top:var(--s5);font-size:1.1rem} .inhoud > h2:first-child,.inhoud > p:first-child{margin-top:0} .inhoud ul,.inhoud ol{margin:0 0 var(--s4);padding-left:1.3em} .inhoud li{margin-bottom:var(--s2)} .inhoud .lead{font-size:1.15rem;line-height:1.6;color:var(--tekst); border-left:4px solid var(--oranje);padding-left:var(--s4);margin-bottom:var(--s6)} /* --- Tabellen --- Elke tabel staat in een eigen witte kaart met een rand, net als de plattegrond hieronder. Op de tarievenpagina staan vier tabellen in één lange lap tekst; zonder omkadering lopen die visueel door de alinea's heen en zie je niet waar de ene prijslijst ophoudt en de volgende begint. De kaart scrollt zelf horizontaal op smalle schermen, in plaats van de pagina te laten uitrekken. Dat is nodig voor de tabel van de vakantiewoning, die zes kolommen heeft. De afgeronde hoeken snijden de tabel netjes af, want overflow-x knipt ook op de radius. */ .inhoud .tabel{margin:0 0 var(--s6);background:var(--wit); border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw); overflow-x:auto;-webkit-overflow-scrolling:touch} .inhoud table{width:100%;border-collapse:collapse;min-width:340px;font-size:.98rem} .inhoud th{text-align:left;background:var(--oranje-licht);padding:var(--s4); border-bottom:2px solid var(--oranje);font-weight:700;white-space:nowrap} .inhoud td{padding:var(--s4);border-bottom:1px solid var(--lijn)} /* Om en om een streepje kleur. Op een tabel van zes kolommen breed is dat het verschil tussen aflezen en tellen met je vinger. */ .inhoud tbody tr:nth-child(even){background:var(--creme)} .inhoud tbody tr:last-child td{border-bottom:0} /* Zweefkleur bewust níét crème: die is al de streepjeskleur hierboven, en dan zie je niet meer welke regel je aanwijst. */ .inhoud tbody tr:hover{background:var(--oranje-licht)} .inhoud td:not(:first-child){white-space:nowrap} /* De eerste kolom is het label, de rest zijn bedragen. */ .inhoud tbody td:first-child{font-weight:500} /* --- Veelgestelde vragen --- Onderaan vier pagina's staat een rij vragen. Uitgeschreven vult die een half scherm, en op mobiel duwt dat het contactblok buiten beeld. Dichtgeklapt is het een lijstje dat je in één oogopslag afleest. De omzetting van kop-plus-alinea naar uitklapper gebeurt in inc/faq.php, dus de beheerder typt gewoon een

met een alinea eronder. Geen kaartjes maar scheidslijnen: de rij staat al in het witte vlak van .pagina .inhoud, en een kaart in een kaart wordt rommelig. */ .faq{margin:0 0 var(--s6);border-top:1px solid var(--lijn)} .faq__vraag{border-bottom:1px solid var(--lijn)} /* Het standaard driehoekje weg; we zetten er hieronder zelf een pijl naast. list-style én de webkit-marker, want Safari luistert alleen naar de tweede. */ .faq__vraag > summary{list-style:none;cursor:pointer; display:flex;align-items:baseline;gap:var(--s4); min-height:var(--raak);padding:var(--s3) 0} .faq__vraag > summary::-webkit-details-marker{display:none} /* De vraag blijft een

, alleen zonder de ruimte eromheen die hij als losse kop had. Anders staan de vragen twee keer zo ver uit elkaar als nodig. */ .faq__vraag > summary h3{margin:0;flex:1 1 auto} .faq__vraag > summary:hover h3{color:var(--oranje-tekst)} /* Pijl van twee randen. Wijst naar beneden als het dicht is, naar boven als het open staat. flex:none, anders knijpt hij samen bij een lange vraag. */ .faq__vraag > summary::after{content:"";flex:none;align-self:center; width:.55rem;height:.55rem;margin-top:-.2rem; border-right:2.5px solid var(--oranje-tekst); border-bottom:2.5px solid var(--oranje-tekst); transform:rotate(45deg);transition:transform .2s ease} .faq__vraag[open] > summary::after{transform:rotate(-135deg);margin-top:.2rem} @media (prefers-reduced-motion:reduce){.faq__vraag > summary::after{transition:none}} .faq__antwoord{padding:0 0 var(--s4)} .faq__antwoord > :last-child{margin-bottom:0} /* --- Gastenboek --- Berichten in twee kolommen op een breed scherm. Ze verschillen sterk in lengte, van twee woorden tot negentig, dus geen raster met vaste rijen maar kolommen die zich vullen. */ .berichten{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)} @media (min-width:760px){.berichten{grid-template-columns:1fr 1fr;gap:var(--s5)}} .bericht{margin:0} .bericht blockquote{margin:0;padding:var(--s5);background:var(--wit); border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw); height:100%;display:flex;flex-direction:column;gap:var(--s3)} .bericht p{margin:0;max-width:none;font-size:1rem;line-height:1.6} .bericht p::before{content:"\201C"} .bericht p::after{content:"\201D"} .bericht cite{margin-top:auto;font-style:normal;font-weight:600;color:var(--tekst)} .bericht cite span{display:block;font-weight:400;color:var(--tekst-zacht);font-size:.9rem} .bericht:focus{outline:none} .bericht:focus-visible{outline:2px solid var(--oranje);outline-offset:4px;border-radius:var(--radius)} .berichten__meer{margin:var(--s6) 0 0;text-align:center} /* plattegrond */ .plattegrond{margin:0 0 var(--s6);border:1px solid var(--lijn);border-radius:var(--radius); overflow:hidden;background:var(--wit)} .plattegrond img{width:100%;height:auto;display:block} .plattegrond figcaption{padding:var(--s3) var(--s4);font-size:.9rem;color:var(--tekst-zacht); background:var(--creme);border-top:1px solid var(--lijn)} /* aandachtsblok */ .inhoud .let-op{background:var(--oranje-licht);border-left:4px solid var(--oranje); padding:var(--s4);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:var(--s5)} /* Correcties navigatie op desktop */ @media (min-width:1024px){ .nav > ul{gap:0} .nav > ul > li > a{padding:var(--s2) .7rem;font-size:.97rem;white-space:nowrap;border-radius:0} /* actief item: onderstreping in plaats van een vol blok */ .nav > ul > li > a:hover{background:transparent;color:var(--oranje-tekst)} .nav > ul > li.current-menu-item > a, .nav > ul > li.current-menu-ancestor > a, .nav > ul > li.current-page-ancestor > a{ background:transparent;color:var(--oranje-tekst); box-shadow:inset 0 -3px 0 var(--oranje)} .nav .sub-menu a:hover{background:var(--oranje-licht)} .kop__in{gap:var(--s3)} } @media (min-width:1200px){.nav > ul > li > a{padding-inline:.85rem}} /* Videoblok op de homepage, rustiger dan een bewegende hero */ .videoblok .videokader{margin:var(--s6) auto 0;max-width:900px;border-radius:var(--radius); overflow:hidden;box-shadow:var(--schaduw);background:#000;line-height:0} .videoblok video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover} /* De video wordt niet meer verborgen bij verminderde beweging; hij blijft met zijn posterframe staan en krijgt bediening (zie nav.js). De poster als achtergrond is de vangnet-laag voor het geval het bestand zelf niet laadt. */ .videoblok .videokader{background:var(--poster,none) center/cover no-repeat,#000} /* De zonnebloem staat in de oranje kaart, rechts naast de tekst, met de steel op de onderrand van het vlak. In het bestand loopt de steel tot de onderste pixel, dus bottom:0 zet hem precies goed zonder bijsnijden. Niet gespiegeld: de bloemkop kijkt naar de tekst toe. */ .hero__bloem{position:absolute;right:-20px;bottom:0; width:clamp(180px,40%,360px);height:auto;z-index:0;pointer-events:none; filter:drop-shadow(0 6px 18px rgba(120,60,0,.22))} /* Vanaf 1000px staat de kop op één regel (zie .hero__kop) en loopt hij het verst door. De bloem schuift daar verder over de rechterrand, zodat de bloemkop vrij blijft van het laatste woord. Daaronder breekt de kop in tweeën en is die ruimte niet nodig; een grotere overhang zou daar bovendien naast het scherm vallen, want de kaart raakt dan bijna de vensterrand. */ @media (min-width:1000px){.hero__bloem{right:-70px}} /* Onder 700px staat de tekst over de volle breedte. De bloem wordt klein en zakt naar de rechter onderhoek, naast de gestapelde knoppen. */ @media (max-width:699px){ /* Geen overhang: de kaart loopt hier tot vlak bij de schermrand, en wat eroverheen steekt valt van het scherm af. De bloem staat daarom helemaal binnen de kaart. */ .hero__bloem{width:clamp(96px,27vw,140px);right:var(--s3)} } /* ============================================================ 11. SECTIESCHEIDING Dunne oranje lijn tussen de secties, in de merkkleur. Op de homepage tussen de blokken, op inhoudspagina's boven elke H2. ============================================================ */ /* Tussen de blokken op de homepage geen rechte lijn meer maar een golf, zoals bij watersnip.nl, campinglanduitzee.nl en detulpenweide.nl. De golf zit onderaan een sectie en heeft de kleur van de sectie eronder, zodat die omhoog lijkt te lopen. Op inhoudspagina's blijft de dunne oranje lijn boven elke H2 staan; die werkt daar juist wel, in lopende tekst. */ .blok{position:relative} .golf{position:absolute;left:0;right:0;bottom:-1px;width:100%; height:clamp(30px,5vw,68px);display:block;z-index:1;pointer-events:none} .blok--golf{padding-bottom:calc(var(--s7) + clamp(30px,5vw,68px))} @media (min-width:768px){.blok--golf{padding-bottom:calc(var(--s8) + clamp(30px,5vw,68px))}} /* Kicker: klein oranje label in kapitalen boven de kop. Kost niets en geeft de pagina meteen structuur. Overgenomen van watersnip.nl. */ .kicker{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--oranje-tekst);margin:0 0 var(--s2)} .blok__kop + .blok__sub,.kicker + .blok__kop{margin-top:0} .blok--oranje .kicker,.hero__kaart .kicker{color:var(--tekst);opacity:.75} section[class*="blok"] .kicker{text-align:center} .hero__kaart .kicker{text-align:left} .pagina .inhoud h2{padding-top:var(--s6);border-top:2px solid var(--oranje)} .pagina .inhoud > h2:first-child{margin-top:0;padding-top:0;border-top:0} /* koppen binnen een kaart of tegel houden hun eigen opmaak */ .inhoud .geen-lijn h2,.inhoud h2.geen-lijn{border-top:0;padding-top:0} /* ============================================================ 12. TEGELS Kleine blokken voor de activiteiten in de omgeving. Tonen een foto zodra die er is; zolang dat niet zo is een verzorgde icoontegel in plaats van een gat of een geleende foto. ============================================================ */ .tegels{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} @media (min-width:700px){.tegels{gap:var(--s4)}} .tegel{display:flex;flex-direction:column;height:100%;background:var(--wit); border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden; text-decoration:none;color:var(--tekst)} /* Zweefeffect alleen op tegels die écht ergens heen gaan. Een tegel die omhoog springt maar niet klikbaar is, belooft iets dat er niet is. */ a.tegel{transition:transform .16s,box-shadow .16s,border-color .16s} a.tegel:hover{transform:translateY(-2px);box-shadow:var(--schaduw);border-color:var(--oranje);color:var(--tekst)} .tegel__beeld{display:block;aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--creme)} .tegel__icoon{display:grid;place-items:center;aspect-ratio:4/3;background:var(--creme);color:var(--oranje-tekst)} .tegel__icoon svg{width:34%;height:auto;max-width:52px;opacity:.85} .tegel:nth-child(3n+2) .tegel__icoon{background:var(--groen-licht);color:var(--groen-donker)} .tegel:nth-child(3n+3) .tegel__icoon{background:var(--oranje-licht)} .tegel__in{padding:var(--s3);display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} /* Lange namen als "Openluchtmuseum" moeten binnen de tegel blijven */ .tegel__in strong,.tegel__in span{overflow-wrap:anywhere;hyphens:auto} .tegel__in strong{font-size:.98rem;line-height:1.25} .tegel__in span{font-size:.85rem;color:var(--tekst-zacht)} /* ============================================================ 12a. LOSSE FOTO'S IN DE TEKST ============================================================ */ .foto-rechts,.foto-breed{margin:0 0 var(--s5)} .foto-rechts img,.foto-breed img{width:100%;height:auto;border-radius:var(--radius); border:1px solid var(--lijn)} .foto-rechts figcaption,.foto-breed figcaption{margin-top:var(--s2);font-size:.88rem;color:var(--tekst-zacht)} /* Vanaf 820px zweeft de portretfoto rechts naast de tekst. Daaronder staat hij gewoon boven de alinea, want naast elkaar wordt het dan te smal. */ @media (min-width:820px){ .foto-rechts{float:right;width:340px;margin:0 0 var(--s5) var(--s6)} .foto-breed{clear:both;max-width:760px} } /* ============================================================ 12b. FOTOGALERIJ ============================================================ */ .galerij{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .galerij figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--creme); border:1px solid var(--lijn)} .galerij img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block} .galerij figcaption{padding:var(--s2) var(--s3);font-size:.88rem;color:var(--tekst-zacht)} /* Interieurfoto's staan er als 4:3 in. De caravanfoto's zijn binnenopnames en één ervan is staand geschoten; in de 16:9 hierboven blijft daar een strook van over waar de bedden half uit vallen. De bestanden zijn zelf al op 4:3 uitgesneden, deze regel houdt de rij daarmee gelijk. Drie vaste kolommen in plaats van de auto-fit hierboven. Die rekent met een minimum van 220px, en in de tekstkolom van een sectie met beeld is maar 542px beschikbaar: dan breekt een rij van drie naar twee plus een losse. Onder 620px staan ze onder elkaar over de volle breedte, want daar is een derde kolom een postzegel. */ .galerij--vier-derde img{aspect-ratio:4/3} .galerij--vier-derde{grid-template-columns:minmax(0,1fr)} @media (min-width:620px){ .galerij--vier-derde{grid-template-columns:repeat(3,minmax(0,1fr))} } /* Vierkante tegels in drie kolommen: de zes sanitairfoto's op /faciliteiten/, die zo twee rijen van drie vormen. Vierkant en niet 4:3 of 3:4, omdat de reeks gemengd is. Vijf foto's zijn staand geschoten en één liggend. In 4:3 valt bij die vijf bijna de helft van de hoogte weg, en juist de hoogte is bij een doucheruimte of een gang het verhaal. In 3:4 passen de wastafels van de liggende foto niet samen in beeld. Vierkant is de uitsnede die van alle zes het meeste laat staan. Drie kolommen op elke schermbreedte, ook op de telefoon. Op verzoek: de rij moet overal als rij lezen en niet op mobiel uiteenvallen in een kolom van zes. ⚠️ Op 375px is een tegel daardoor ongeveer 103px. Dat is klein voor een binnenopname van een tegelwand, en mobiel is 70% van het verkeer. De afweging is bewust: de reeks als geheel herkenbaar houden weegt hier zwaarder dan het detail per foto. Onder 620px staat de tussenruimte daarom op --s2 in plaats van --s3. Dat scheelt zes pixels aan gaten die op deze breedte naar de foto's gaan. */ .galerij--vierkant img{aspect-ratio:1/1} .galerij--vierkant{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:619px){ .galerij--vierkant{gap:var(--s2)} } /* --- Fotoblok als eigen sectie --- Een galerij met galerij--blok staat niet onder een kop maar krijgt een eigen band, met een eigen achtergrondkleur in de reeks. Zie dekei_secties() en page.php; die zetten de klasse blok--galerij op de sectie. De leesbreedte van 820px vervalt daar. Die is er voor tekst, en in een band van 1180 blijft rechts anders een derde leeg staan waar niets komt. De linkerrand loopt gewoon door met de rest van de pagina, dus de kolom blijft kloppen. */ .blok--galerij .inhoud{max-width:none} .blok--galerij .galerij{margin-bottom:0} /* Rondleidingsvideo: klik om te starten. 48 seconden en 6 MB is te zwaar om ongevraagd te laden, dus preload="none" en pas bij een klik. */ .rondleiding{margin:0 0 var(--s6);border-radius:var(--radius);overflow:hidden; box-shadow:var(--schaduw);background:#000;line-height:0;position:relative} .rondleiding video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover} .rondleiding figcaption{background:var(--creme);padding:var(--s2) var(--s4); font-size:.88rem;color:var(--tekst-zacht);line-height:1.5} /* ============================================================ 13. CONTACT ============================================================ */ /* --- De vier contacttegels --- Herzien op 5 september. Wat er misging: de kolommen stonden op repeat(4,1fr) en dat is niet vier gelijke kolommen. 1fr heeft een min-content bodem, en info@campingdekei.nl kan nergens breken. Die kolom eiste daardoor 247px op en duwde de telefoonkolom terug naar 155px, waar "06-52207605" niet meer in past. Het nummer brak op "06-", precies het gegeven waar deze pagina voor bestaat. minmax(0,1fr) haalt die bodem weg en maakt ze wel gelijk. Daar kwam bij dat de lijst maar 820px breed was. Dat is de leesbreedte die .inhoud--lang > ul aan opsommingen geeft, en terecht: een lijst in lopende tekst hoort niet over de volle breedte te lopen. Deze lijst is alleen geen opsomming maar een blokkenraster, dus die uitzondering staat hieronder. Met 1180px is er 265px per tegel en past alles ruim. Het icoon staat nu in een ronde schijf bóven de tekst in plaats van ernaast. Dat geeft de tekst de volle tegelbreedte, en vier gelijke tegels onder elkaar uitgelijnd lezen rustiger dan vier verschillend gevulde blokjes met een streep aan de zijkant. */ .blok--tekst .inhoud--lang > .contactitems{max-width:none} .contactitems{list-style:none;margin:0 0 var(--s7);padding:0;display:grid;gap:var(--s4)} @media (min-width:560px){.contactitems{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:940px){.contactitems{grid-template-columns:repeat(4,minmax(0,1fr))}} .contactitems > li{display:flex} /* zodat elke tegel de volle celhoogte pakt */ /* justify-content:center omdat de tegels even hoog zijn maar niet even vol: Open heeft een regel meer dan Bellen. Zonder dit hangt de inhoud bovenin en staat er onder de korte tegels een gat. */ /* Geen kaart meer, maar de achtergrond van de sectie zelf. Op 6 september veranderd op verzoek van Dayani: het waren witte tegels met een rand en een schaduw, en dat maakte er knoppen van terwijl twee van de vier gewoon informatie zijn. De ronde schijf om het icoon blijft, want dat is wat de vier onderdelen leesbaar uit elkaar houdt zonder omlijning. De links op bellen en mailen blijven wel links: op een telefoon is een nummer dat je kunt aantikken het verschil tussen bellen en overtypen. */ /* Op 6 september strakker gezet op verzoek van Dayani. De tegels stonden op 139px hoog en dat is veel voor vier regels gegevens, zeker nu ze geen kaart meer zijn maar los op het crème vlak staan: de ruimte eromheen deed het werk al dubbel. Minder padding, kleiner icoon en een maat kleinere waarde brengen ze op ongeveer 110px. */ .contactitem{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;text-align:center; gap:6px;padding:var(--s3) var(--s2)} /* Alleen het icoon, zonder schijf eromheen. Die schijf stond op --oranje-licht (#FDF0DF) en dat werkte op de witte tegels; nu de items op het crème vlak (#F8F0E3) staan is dat vrijwel dezelfde kleur en zag je er niets meer van. Het icoon is daarom iets groter en draagt het accent zelf. */ .contactitem__schijf{display:grid;place-items:center;flex:0 0 auto; width:24px;height:24px;color:var(--oranje-tekst)} .contactitem__schijf svg{width:22px;height:22px} /* Label en waarde zitten in een eigen blok. Zonder dat zijn het losse flex-kinderen van de tegel, en dan komen ze op mobiel naast elkaar te staan in plaats van onder elkaar zodra de tegel van kolom naar rij draait. */ .contactitem__tekst{display:flex;flex-direction:column;gap:1px;min-width:0} .contactitem strong{display:block;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase; color:var(--tekst-zacht);font-weight:700} .contactitem__waarde{display:block;font-weight:600;font-size:1rem;line-height:1.35; color:var(--tekst)} /* Het mailadres is het langste gegeven en mag een maat kleiner, dan houdt de kolom lucht over. Breken doet het nergens: er zit geen spatie in. */ .contactitem__waarde--mail{font-size:.9rem;word-break:break-word} .contactitem__bij{display:block;font-size:.83rem;color:var(--tekst-zacht);line-height:1.35} a.contactitem{text-decoration:none;color:inherit} a.contactitem:hover .contactitem__waarde{text-decoration:underline} a.contactitem:hover .contactitem__schijf{color:var(--oranje-donker)} a.contactitem:focus-visible{outline:3px solid var(--oranje-tekst);outline-offset:3px; border-radius:var(--radius-klein)} /* Onder 560px staan de vier onder elkaar. Met het icoon bóven de tekst kost dat samen zo'n 640px: een heel telefoonscherm aan contactgegevens voordat je bij het formulier bent. Daar draait het item daarom om zijn as: schijf links, tekst ernaast, links uitgelijnd. Twee kolommen is hier geen optie: op 390px zou elk item 185px worden en daar past info@campingdekei.nl niet in. Eén breed item wel. */ @media (max-width:559px){ .contactitem{flex-direction:row;align-items:center;justify-content:flex-start; text-align:left;gap:var(--s3);padding:var(--s3) 0} .contactitem__schijf{width:26px;height:26px} } /* --- Aanvraagformulier --- */ .formulier{background:var(--creme);border:1px solid var(--lijn);border-radius:var(--radius); padding:var(--s5);max-width:720px} @media (min-width:768px){.formulier{padding:var(--s6)}} .veldrij{display:grid;gap:var(--s4);margin-bottom:var(--s4)} @media (min-width:600px){.veldrij--twee{grid-template-columns:1fr 1fr}} .veld{display:flex;flex-direction:column;gap:var(--s2)} .veld > label{font-weight:600;font-size:.95rem} .veld .hint{font-size:.85rem;color:var(--tekst-zacht);font-weight:400} .veld input[type=text],.veld input[type=email],.veld input[type=tel], .veld input[type=date],.veld input[type=number],.veld select,.veld textarea{ font:inherit;color:var(--tekst);background:var(--wit); border:2px solid #DDD5C6;border-radius:var(--radius); padding:var(--s3) var(--s4);min-height:var(--raak);width:100%} .veld textarea{min-height:130px;resize:vertical} .veld :is(input,select,textarea):focus-visible{border-color:var(--oranje-tekst);outline:3px solid var(--oranje-licht);outline-offset:0} /* Twee velden naast elkaar: de invoervakken op één lijn, ook als het ene label een hint heeft en het andere niet. De grid-cellen zijn al even hoog, dus margin-top:auto duwt het vak naar de onderkant. Zonder dit zakt het vak met de langere label mee omlaag en staan de twee scheef. Alleen op breed scherm: daaronder staan ze onder elkaar. */ @media (min-width:600px){ .veldrij--twee .veld > :is(input,select){margin-top:auto} } .veld--keuze{display:flex;flex-wrap:wrap;gap:var(--s2)} /* Radiokeuze als knoppen: makkelijker aan te tikken dan een klein rondje */ .keuze{position:relative} .keuze input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .keuze span{display:inline-flex;align-items:center;min-height:var(--raak); padding:var(--s2) var(--s4);background:var(--wit);border:2px solid #DDD5C6; border-radius:999px;font-weight:500} .keuze input:checked + span{background:var(--oranje);border-color:var(--oranje-donker);font-weight:700} .keuze input:focus-visible + span{outline:3px solid var(--oranje-tekst);outline-offset:2px} /* .akkoord tekende een selectievakje met tekst ernaast en is op 5 september van het aanvraagformulier gehaald. De regel over gegevensgebruik staat er sinds 6 september weer op, maar als tekst en zonder vinkje: informeren is onder de AVG verplicht, toestemming vragen niet, en een vinkje zou hier de verkeerde grondslag suggereren. Die regel gebruikt .formulier__klein. Deze opmaak staat daarmee nergens meer in de HTML; laat staan of ruim op, maar dat is geen openstaand werk meer. */ .akkoord{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s5);font-size:.95rem} .akkoord input{width:22px;height:22px;margin-top:2px;flex:0 0 auto;accent-color:var(--oranje-tekst)} /* Honingpot tegen spam. Geen CAPTCHA: de doelgroep is 55-plus en een puzzeltje kost aanvragen. Zie 03 Websiteplan/Functionele wensen.md. */ .honingpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Het formulier onder het gastenboek. Op een crèmevlak zou het crème van het formulier zelf wegvallen, dus daar wordt hij wit. */ .schrijfblok{margin-top:var(--s8)} .schrijfblok .formulier{background:var(--wit)} .veld--verzend{margin:var(--s5) 0 0} .formulier__klein{margin:var(--s4) 0 0;font-size:.85rem;color:var(--tekst-zacht);max-width:60ch} /* ============================================================ De cookiemelding Verschijnt alleen als er echt iets te kiezen valt, zie inc/statistiek.php. Onderaan het scherm en niet als een vlak over de pagina heen: de doelgroep is 55-plus en 70% komt binnen op een telefoon, en een blokkade daar kost bezoekers op precies de pagina die driekwart van het verkeer draagt. Wie hem negeert wordt gewoon niet gemeten. ⭐ Op 7 september nagelopen op bruikbaarheid voor minder technische bezoekers. Drie dingen zijn daarbij veranderd en die zijn geen van drieën cosmetisch: 1. De letters waren .95rem, dus kleiner dan de rest van de site. Precies verkeerd om voor wie het toch al slecht leest. Nu 1.05rem, iets grόter dan de bodytekst. 2. De knoppen stonden op een telefoon naast elkaar en waren daardoor allebei smal. Nu staan ze onder elkaar over de volle breedte, en pas vanaf 560px naast elkaar. Een brede knop is met een duim veel makkelijker te raken dan een smalle, en dat scheelt op een trillende hand het verschil tussen kiezen en gokken. 3. De knoppen zijn 52px hoog in plaats van de 44px die de rest van de site aanhoudt. 44px is de ondergrens uit de richtlijnen; dit is het enige element waar iedereen doorheen moet, dus hier mag het royaler. ============================================================ */ .cookiemelding{position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--wit);border-top:3px solid var(--oranje); box-shadow:0 -4px 24px rgba(43,42,38,.14); padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); max-height:80vh;overflow-y:auto} .cookiemelding__inhoud{max-width:1180px;margin:0 auto;display:grid;gap:var(--s4); align-items:center;font-size:1.05rem;line-height:1.55} @media (min-width:900px){ /* Tekst links, knoppen rechts. Onder die breedte stapelt het, en dan staan de knoppen onder de tekst waar een duim ze bereikt. */ .cookiemelding__inhoud{grid-template-columns:1fr auto;gap:var(--s6)} } .cookiemelding__kop{margin:0 0 var(--s2);font-size:1.15rem;font-weight:700; line-height:1.35;color:var(--tekst)} .cookiemelding__inhoud p{margin:0;max-width:62ch} /* Beide knoppen exact gelijk. Zie de toelichting in inc/cookiemelding.php: een weigerknop die minder opvalt dan de andere is geen vrije keuze. */ .cookiemelding__knoppen{display:flex;flex-direction:column;gap:var(--s3)} @media (min-width:560px){ .cookiemelding__knoppen{flex-direction:row} } .cookiemelding__knop{background:var(--oranje-tekst);color:#fff; min-height:52px;font-size:1.05rem;justify-content:center;white-space:nowrap} .cookiemelding__knop:hover{background:var(--oranje-donker);color:#fff} /* De knop op de privacyverklaring waarmee je je keuze herziet. */ .cookiekeuze{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3); margin:var(--s4) 0}