/* Globale styles — Scouts Beernem. Merk-tokens (kleuren/fonts/knoppen) komen uit brand.css. Vormregels: DESIGN-REGELS.md. Kort: borders altijd rondom of nergens, hover verandert nooit border of schaduw. */ @import url('brand.css'); *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { background-color: var(--bg); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } /* ============================================================ ICONEN Sprite staat verborgen bovenaan . Kleur volgt currentColor. ============================================================ */ .ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; vertical-align: -.22em; } .ico--lg { width: 2.6rem; height: 2.6rem; } .ico--xl { width: 3.6rem; height: 3.6rem; } /* Rond schijfje achter een icoon. Geen border, alleen vulling. */ .ico-badge { display: inline-grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--brand-dark); flex: none; } .ico-badge .ico { width: 2.2rem; height: 2.2rem; } /* ============================================================ NAVIGATIE Geen border-bottom: de nav scheidt zich van de pagina met kleur en een zachte schaduw die er ALTIJD staat zodra je scrolt. ============================================================ */ /* De lagen van deze site, van onder naar boven: 70 header, inclusief het menupaneel 80 sponsorbanner (fixed linksonder, staat op body-niveau) 90 agendavenster (components.css) 100 sla-over-link Let op bij het lezen van deze getallen: de header maakt met zijn z-index een eigen stapelcontext. Het menupaneel erbinnen heeft wel 65, maar dat telt alleen tegenover zijn broertjes in de header. Naar buiten toe is de hele header één laag, en dat is het getal dat hier staat. De banner staat bewust bóven het menu: het paneel is dekkend, dus eronder zou hij onzichtbaar zijn zodra het menu opengaat. Dat hij de menu-items niet in de weg zit, regelt de vrijgehouden strook onderaan het paneel. */ header { position: sticky; top: 0; z-index: 70; } /* De achtergrond en het matglas zitten op een eigen laag, niet op de header zelf. Reden: een element met een backdrop-filter wordt het referentiekader voor zijn position:fixed-kinderen. Stond de blur op de header, dan werd het menupaneel (fixed, inset 0) zodra je scrolde niet meer zo groot als het scherm maar zo groot als de balk: je zag alleen het eerste item staan en de pagina erachter scrollde gewoon door. Bovenaan de pagina werkte het wel, want daar staat de klasse is-scrolled er niet. Een pseudo-element heeft dat effect niet op het paneel, want het paneel is er geen kind van. z-index -1 houdt de laag achter de inhoud van de balk; omdat de header zelf een stapelcontext maakt, zakt ze niet door naar de pagina eronder. */ header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); transition: box-shadow .2s ease, background-color .2s ease; } header.is-scrolled::before { background: rgba(255, 253, 247, .94); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } .nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.5rem; max-width: var(--wrap); margin: 0 auto; } .logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); } .logo__mark { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; background: var(--bg-soft); } .logo__text { display: flex; flex-direction: column; line-height: 1.05; } .logo__name { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; } .logo__tagline { font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: var(--brand); transform: rotate(-3deg); transform-origin: left center; } /* ── Het menu ── Op elk scherm hetzelfde: één knop die een schermvullend paneel opent, met alle pagina's en alle zes de takken er meteen in. Niets achter een "Meer", geen tweede navigatievorm die op een groot scherm anders werkt dan op een telefoon, en dus ook maar één ding om te onderhouden. Het paneel groeit open vanuit de knop (clip-path) en de items komen er daarna één voor één in. --i zet de vertraging en wordt door main.js op elk item gezet. Dit is bewust de enige plek waar de beweging langer duurt dan de .18s uit DESIGN-REGELS.md §6: het is een schermwissel, geen hover. */ .nav-menu { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; /* Centreren duwt bij te hoge inhoud de bovenkant buiten het scrolgebied. "safe" valt in dat geval terug op bovenaan uitlijnen; browsers die het niet kennen laten deze regel vallen en houden gewoon center. */ align-items: safe center; /* Onderaan een strook zo hoog als de plek van de sponsorbanner plus zijn eigen hoogte, met wat lucht. Die banner blijft permanent in beeld, ook met het menu open, dus mag er geen menu-item onder belanden. De maten komen uit :root, zodat het menu meebeweegt als de banner verplaatst. Past het geheel daardoor niet meer op een laag scherm, dan scrolt het paneel; "safe center" hierboven houdt de bovenkant bereikbaar. */ padding: 6.5rem 1.5rem calc(var(--banner-onder) + var(--banner-hoogte) + 1.5rem); background: var(--bg); overflow-y: auto; /* Het middelpunt volgt de knop: de balk is gecentreerd en afgetopt op --wrap, dus op een breed scherm staat die niet in de hoek maar mee ingesprongen. Zelfde max()-patroon als de padding elders. */ clip-path: circle(0 at calc(100% - max(1.5rem, (100% - var(--wrap)) / 2 + 1.5rem) - 1.44rem) 3.2rem); transition: clip-path .6s cubic-bezier(.76, 0, .24, 1); pointer-events: none; } .nav-menu.nav-open { clip-path: circle(150% at calc(100% - max(1.5rem, (100% - var(--wrap)) / 2 + 1.5rem) - 1.44rem) 3.2rem); pointer-events: auto; } /* Twee blokken onder elkaar, allebei gecentreerd: eerst de acht links (die staan zelf in twee kolommen, zie .nav-lijst), daaronder de zes takken als strook. Geen aparte indeling vanaf tablet, dus het menu ziet er op elk scherm hetzelfde uit. */ .nav-menu__inner { width: 100%; max-width: var(--wrap); display: grid; justify-items: center; gap: 2.5rem; } /* Twee kolommen in plaats van acht regels onder elkaar. Dat halveert de hoogte van het menu, en die winst gaat naar de maat van de blokjes en de ruimte ertussen. Vier kolommen passen niet: dan wordt een cel smaller dan "Alle takken" op deze lettergrootte. */ .nav-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; width: 100%; max-width: 46rem; } .nav-lijst > li { display: flex; } .nav-lijst a { /* flex in plaats van een blok: zo vult de link zijn cel in de volle breedte én hoogte, en staat de tekst er altijd midden in. Dat houdt de blokjes in een rij even hoog als een label over twee regels valt: het buurblok groeit mee in plaats van dat de tekst er bovenin blijft hangen. */ flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 600; /* De hoogte van het venster telt mee, want het menu moet in z'n geheel op het scherm passen. Een blokje is hoger dan een tekstregel, dus die vh-term is krapper dan je zou verwachten: op een lage laptop krimpt de tekst mee zodat de vier rijen blijven passen. De breedte telt ook mee, anders loopt "Alle takken" uit zijn kolom. */ font-size: clamp(1.5rem, min(4.4vw, 4.8vh), 3rem); line-height: 1.15; text-align: center; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--bg-soft); transition: background-color .18s ease, color .18s ease, transform .18s ease; } /* Zelfde gedrag als de takkaartjes eronder: zacht geel en een klein zetje omhoog. Zo reageert het hele paneel op één manier. */ .nav-lijst a:hover, .nav-lijst a:active { background: var(--accent-soft); color: var(--brand-deep); transform: translateY(-2px); } /* Op een telefoon verandert alleen de maatvoering, niet de vorm: de blokjes hierboven staan op elk scherm. Wat hier anders is, komt door de breedte. Een cel is op een telefoon nog geen 170px en daar moet "Alle takken" in passen, dus de tekst is kleiner en de zijkanten krapper. De hoogte heeft die grens niet: daar gaat juist méér lucht in, want een vinger is grover dan een muispijl en er is geen hover die vooraf verklapt waar het raakvlak ophoudt. Deze query staat bewust ná de basisregel, anders wint die laatste op gelijke specificiteit. */ @media (max-width: 35.99rem) { .nav-lijst { max-width: 26rem; } .nav-lijst a { font-size: clamp(1.15rem, 6vw, 1.6rem); padding: 1.8rem .4rem; } } /* De zes takken, met logo en kleur, zodat je de jouwe meteen herkent. */ .nav-takken { width: 100%; text-align: center; } .nav-takken__kop { display: block; font-family: var(--font-hand); font-size: 1.35rem; color: var(--brand); margin-bottom: .8rem; transform: rotate(-2deg); } /* Vaste aantallen in plaats van auto-fit, want het zijn er altijd zes: 2, 3 of 6 per rij deelt netjes op en laat er nooit eentje alleen achter. Met auto-fit stonden er op een tablet vijf naast elkaar en zakte de zesde er in zijn eentje onder. De max-width groeit mee zodat een kaartje op elk scherm ongeveer even breed blijft. */ .nav-takken__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 26rem; margin-inline: auto; } @media (min-width: 36rem) { .nav-takken__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; } } @media (min-width: 62rem) { .nav-takken__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 58rem; } } /* De items komen na het paneel binnen, van boven naar beneden. --i komt uit main.js. Staat opzettelijk buiten elk breekpunt: het menu is op elk scherm hetzelfde, dus de beweging ook. */ .nav-lijst > li, .nav-takken { opacity: 0; transform: translateY(28px); transition: opacity .35s ease, transform .5s cubic-bezier(.215, .61, .355, 1); } .nav-menu.nav-open .nav-lijst > li, .nav-menu.nav-open .nav-takken { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .06s + .2s); } /* De zes takkaartjes. Rechtop: logo boven, naam en leeftijd eronder. Zo staan ze met z'n zessen naast elkaar zonder dat de namen in de knel komen. De plaatsing staat expliciet vast (één kolom, drie rijen), want dat is wat er mis ging toen het raster twee kolommen had. De takkleur zit hier licht in het vlak in plaats van alleen in het logo: deze strook is nu het eerste wat opvalt onder het menu, en aan de kleur herken je je eigen tak sneller dan aan de naam. */ .nav-takken .mega-tak { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; row-gap: .25rem; padding: .85rem .5rem .75rem; border-radius: var(--radius); text-decoration: none; /* Volle takkleur met witte tekst, net als de hero en de kaarten op /takken/. */ color: #fff; background: var(--tak-kleur, var(--brand)); transition: background-color .18s ease, transform .18s ease; } /* Exact dezelfde hover als .takkaart op /takken/ (pages/takken.css): het vlak zakt dieper in zijn eigen takkleur, van 18% naar 30%, en het kaartje krijgt een zetje van 4px omhoog. Geen geel meer en geen kleurwissel op het logo of de tekst, want die deed de pagina ook niet. Zo is het hetzelfde gebaar of je nu in het menu staat of op de takkenpagina. Geen border of schaduw die verspringt (DESIGN-REGELS.md §5.2). */ .mega-tak:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--tak-kleur) 85%, #14200F); } .nav-takken .mega-tak__logo { grid-row: 1; width: 2.5rem; height: 2.5rem; color: #fff; } /* Stretch, niet center: alleen op volle kolombreedte kan de ellipsis hieronder zijn werk doen als een taknaam ooit te lang wordt. Het centreren doet text-align op .nav-takken. */ .nav-takken .mega-tak__naam { grid-row: 2; justify-self: stretch; } .nav-takken .mega-tak__leeftijd { grid-row: 3; justify-self: stretch; } .nav-takken .mega-tak__naam { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #fff; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-takken .mega-tak__leeftijd { font-size: .85rem; color: #fff; opacity: .9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Zoals .takkaart op /takken/: bij een bewegingsvoorkeur vervalt de sprong helemaal, niet alleen de duur ervan. De regel in brand.css zet alleen de transitietijd op nul, waardoor het kaartje nog steeds verspringt. De menublokjes doen hetzelfde zetje, dus die staan er meteen bij. */ @media (prefers-reduced-motion: reduce) { .mega-tak:hover, .nav-lijst a:hover, .nav-lijst a:active { transform: none; } } /* De balk rechts: de actieknop en de menuknop naast elkaar. */ .nav-acties { display: flex; align-items: center; gap: .6rem; } .nav-cta { display: inline-flex; align-items: center; text-decoration: none; background: var(--accent); color: var(--brand-deep); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; padding: .55rem 1.3rem; border-radius: var(--radius-pill); transition: background-color .18s ease, color .18s ease; } .nav-cta:hover { background: var(--accent-dark); color: var(--brand-deep); } .nav-toggle { display: grid; grid-template-areas: "ico"; place-items: center; background: var(--bg-soft); border: 0; width: 46px; height: 46px; padding: 0; border-radius: var(--radius-pill); cursor: pointer; color: var(--brand-dark); position: relative; z-index: 70; } .nav-toggle:hover { background: var(--accent-soft); } .nav-toggle__ico { grid-area: 1 / 1; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s ease, transform .35s cubic-bezier(.76, 0, .24, 1); } .nav-toggle__ico--sluit { opacity: 0; transform: rotate(-90deg) scale(.7); } .nav-toggle[aria-expanded="true"] .nav-toggle__ico--menu { opacity: 0; transform: rotate(90deg) scale(.7); } .nav-toggle[aria-expanded="true"] .nav-toggle__ico--sluit { opacity: 1; transform: rotate(0) scale(1); } /* Sla-over-link: alleen zichtbaar bij toetsenbordnavigatie. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--brand-deep); font-weight: 700; padding: .8rem 1.4rem; border-radius: var(--radius-pill); } .skip-link:focus { left: 1rem; top: 1rem; } /* Subpagina's (contact, privacy, cookies) gebruiken deze twee. */ .container, .page-section { max-width: var(--wrap); margin: 0 auto; padding: var(--band-y) 1.5rem; } /* ============================================================ LAYOUT: banden Sectiehoogte komt van padding, niet van min-height. ============================================================ */ .band { position: relative; padding: var(--band-y) 1.5rem; } .band__inner { max-width: var(--wrap); margin: 0 auto; } /* De vier ondergronden. Wisselen geeft het scrollen ritme en vervangt elke scheidingslijn. */ .band--soft { background: var(--bg-soft); } .band--groen { background: var(--brand); color: #fff; } .band--dark { background: var(--bg-dark); color: #fff; } .band--geel { background: var(--accent); color: var(--brand-deep); } .band--groen h2, .band--dark h2, .band--groen h3, .band--dark h3 { color: var(--accent); } .band--geel h2, .band--geel h3 { color: var(--brand-deep); } /* Losse links op een donkere band worden geel. Knoppen NIET: die hebben hun eigen kleurenpaar en zouden anders geel-op-geel worden. */ .band--groen a:not(.btn), .band--dark a:not(.btn) { color: var(--accent); } /* Doodle-patroon over de groene en donkere vlakken. Puur decoratief. */ .band--groen::before, .band--dark::before { content: ''; position: absolute; inset: 0; background: url('../images/static/doodle-patroon.svg') repeat; background-size: 420px; opacity: .5; pointer-events: none; } .band--groen > *, .band--dark > * { position: relative; } /* Sectiekop */ .band__head { max-width: var(--measure); margin: 0 auto clamp(2rem, 4vw, 3.2rem); text-align: center; } .band__head h2 { text-wrap: balance; } .band__head p { margin-top: 1rem; font-size: var(--step-1); text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--accent-soft); padding: .35rem 1rem; border-radius: var(--radius-pill); margin-bottom: 1rem; } .band--groen .eyebrow, .band--dark .eyebrow { background: rgba(255,255,255,.14); color: var(--accent); } /* ============================================================ GOLVEN Sectie-overgangen zijn nooit een lijn maar een golf. ============================================================ */ .golf { display: block; width: 100%; height: clamp(38px, 5vw, 74px); fill: currentColor; } /* De golf-wrap heeft twee kleuren: de band waar je VANDAAN komt is zijn achtergrond, de band waar je NAARTOE gaat is de vulling van de golf. Zo loopt de ene kleur golvend in de andere over, zonder één lijn. */ .golf-wrap { line-height: 0; background: var(--golf-van, var(--bg)); color: var(--golf-naar, var(--brand)); margin-bottom: -1px; } .van-bg { --golf-van: var(--bg); } .van-soft { --golf-van: var(--bg-soft); } .van-groen { --golf-van: var(--brand); } .van-geel { --golf-van: var(--accent); } .van-dark { --golf-van: var(--bg-dark); } .naar-bg { --golf-naar: var(--bg); } .naar-soft { --golf-naar: var(--bg-soft); } .naar-groen { --golf-naar: var(--brand); } .naar-geel { --golf-naar: var(--accent); } .naar-dark { --golf-naar: var(--bg-dark); } /* ============================================================ HULPKLASSEN ============================================================ */ .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; /* Geen marge boven: het element erboven bepaalt zelf zijn ruimte. */ margin-top: 0; } /* Knoppenrij gecentreerd. Werd op twee pagina's al gebruikt zonder dat de klasse bestond; de knop stond daar links in plaats van in het midden. */ .cta-row--midden { justify-content: center; } .prose { max-width: var(--measure); } .prose p + p { margin-top: 1rem; } /* Handgeschreven notitie, scheef. Voor speelse tussenzinnen. */ .krabbel { font-family: var(--font-hand); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--brand-soft); transform: rotate(-2.5deg); display: inline-block; } .band--groen .krabbel, .band--dark .krabbel { color: var(--accent-soft); } /* Gele markeerstift achter een woord in een kop. */ .stift { background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding: 0 .12em; } /* ============================================================ SPONSORBANNER Vaste huisstijlregel voor deze site: op elke pagina staat linksonder een zichtbare banner die zegt wie de website sponsort. Hij staat FIXED en blijft in beeld tijdens het scrollen. Dit blok staat BEWUST in de huisstijl van Grafix Studio, niet in die van Scouts Beernem: het hoort zichtbaar niet bij de site, het ligt erover. Kleuren en logo komen van grafixstudio.io: #0A1628 hun donkerste blauw (achtergrond) #16498E hun primaire blauw #062C62 hun secundaire blauw Inter hun tekstlettertype Vandaar ook de scherpe hoeken: dat is de enige plek in deze huisstijl waar dat mag (DESIGN-REGELS.md hoofdstuk 10). ============================================================ */ /* Waar de banner staat en hoe hoog hij is, op één plek. .nav-menu houdt onderaan een strook vrij zodat de menu-items niet onder de banner belanden. Die strook was ooit met de hand uitgerekend op de toenmalige plek (20px van onder, 86px hoog). Toen de banner omhoog ging en groter werd, klopte dat niet meer en lagen er twee takken onder. Nu rekent het menu met dezelfde variabelen, dus verplaatsen kan niet meer stilletjes iets afdekken. */ :root { --banner-onder: 20vh; --banner-hoogte: 6.2rem; } .sponsorbanner { position: fixed; left: 0; /* Los van de onderrand, maar niet halverwege het scherm. Op 33vh liep hij te ver de inhoud in; op deze hoogte staat hij vrij van de footer zonder over de eerste kaart te schuiven. Een vh-maat zodat hij op telefoon, tablet en desktop op dezelfde relatieve plek blijft. */ bottom: var(--banner-onder); z-index: 80; display: inline-flex; align-items: center; gap: 1.1rem; padding: 1.15rem 2.2rem 1.15rem 1.25rem; border-radius: 0 1rem 1rem 0; /* De volledige gradient van het Grafix-beeldmerk, dezelfde stops en dezelfde diagonaal als in hun logo. */ background: linear-gradient(135deg, #16498E 0%, #004B82 50%, #062C62 100%); text-decoration: none; box-shadow: 0 -4px 28px rgba(10, 22, 40, .35); transition: filter .18s ease, opacity .2s ease, transform .28s cubic-bezier(.4, 0, .2, 1); } /* De banner blijft áltijd staan, ook als het menu opengaat: hij hoort er permanent te zijn. Kliks laat hij wel door, zodat een menu-item dat er toevallig onder schuift gewoon werkt. Dat je zo'n item niet ziet is het echte probleem, en dat lost .nav-menu op met een strook die precies zo hoog is als de plek waar de banner staat. De klasse komt uit main.js. */ body.menu-open .sponsorbanner { pointer-events: none; } /* Een gradient laat zich niet overvloeien; hover licht hem daarom op. Geen schaduw die verandert, geen border: alleen helderheid. */ .sponsorbanner:hover { filter: brightness(1.14); } /* Het beeldmerk zoals Grafix Studio het zelf gebruikt: de blauwe tegel met de witte GS, zonder kader eromheen. */ .sponsorbanner__mark { /* Het GS-teken staat los op de gradient, zonder tegel of kader. Het is een dunne lijntekening, dus ruim bemeten: kleiner dan dit vallen de lijnen weg en hou je een vage vlek over. */ width: 3.9rem; height: 3.9rem; flex: none; display: block; } .sponsorbanner__tekst { display: flex; flex-direction: column; gap: .28rem; } .sponsorbanner__label { font-family: 'Inter', system-ui, sans-serif; font-size: .78rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .62); line-height: 1; } /* De naam in hun eigen lettertype, als tekst. */ .sponsorbanner__naam { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; color: #fff; line-height: 1.1; } /* Tablet: iets kleiner dan op een breed scherm, maar dezelfde hoogte. */ @media (max-width: 900px) { .sponsorbanner { gap: .95rem; padding: 1rem 1.8rem 1rem 1.05rem; } .sponsorbanner__mark { width: 3.5rem; height: 3.5rem; } .sponsorbanner__naam { font-size: 1.35rem; } } @media (max-width: 640px) { .sponsorbanner { gap: .85rem; padding: .9rem 1.5rem .9rem .9rem; } .sponsorbanner__mark { width: 3.3rem; height: 3.3rem; } .sponsorbanner__label { font-size: .68rem; letter-spacing: .11em; } .sponsorbanner__naam { font-size: 1.22rem; } } @media print { .sponsorbanner { display: none; } } /* ============================================================ SKELETON + FOUTMELDING ============================================================ */ .skeleton { position: relative; overflow: hidden; min-height: 1.2em; background: var(--bg-soft); border-radius: var(--radius-sm); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: skeleton-shimmer 1.5s infinite; } @keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .load-error { padding: 1rem; color: #8a2b1e; background: #fdeee9; border: 2px solid #f3c9bd; border-radius: var(--radius-sm); font-size: .95rem; text-align: center; } /* ============================================================ NAVIGATIEBALK OP SMAL SCHERM Het menu zelf verandert niet mee: dat is op elk scherm hetzelfde paneel. Alleen de balk erboven wordt compacter. ============================================================ */ @media (max-width: 34rem) { .nav-container { padding: .7rem 1rem; } .logo__mark { width: 42px; height: 42px; } .logo__name { font-size: 1.08rem; } .logo__tagline { font-size: .95rem; } .nav-acties { gap: .4rem; } .nav-acties .nav-cta { font-size: .95rem; padding: .5rem 1rem; } .nav-menu { padding: 5.5rem 1.25rem calc(var(--banner-onder) + var(--banner-hoogte) + 1rem); } }