/* De kleuren staan in drie lagen: * * 1. de merkkleur, die in beide standen dezelfde blijft; * 2. de rollen (achtergrond, tekst, lijn, vlak), die per stand verschillen; * 3. alles daaronder verwijst alleen nog naar die rollen. * * Nergens in de rest van dit bestand staat een losse kleurcode. Een nieuwe * stand toevoegen is daardoor één blok, en niet honderd regels nalopen. * * Drie standen, geen twee: expliciet licht, expliciet donker, en "wat het * apparaat zegt". Die derde is de standaard en zet geen data-theme op , * dus de systeemvoorkeur moet uit een media query komen. De expliciete keuze * moet daar in beide richtingen van kunnen winnen — vandaar de :not() in de * media query én een eigen blok voor data-theme="dark". */ :root { /* Het clublogo. Deze blijft in beide standen wat hij is. */ --club-blauw: #00247c; --club-blauw-donker: #001a5c; --club-blauw-licht: #3a5cb0; --club-accent: #e8b400; /* Rollen — licht */ --grond: #ffffff; /* paginagrond */ --grond-zacht: #f5f7fa; /* vlakken, tabelkoppen */ --kaart: #ffffff; --tekst: #16181d; --tekst-zacht: #5b6270; --lijn: #dfe3ea; --balk: var(--club-blauw); --balk-tekst: #ffffff; /* Tekst op een merkkleur-vlak (kopbalk, hero, knop, voet). Altijd wit: dat vlak is in beide standen donker. Niet te verwarren met --kaart, wat de achtergrond van een kaart is. */ --op-blauw: #ffffff; --link: var(--club-blauw); --link-hover: var(--club-blauw-licht); --merkje-grond: rgba(0, 36, 124, .08); --merkje-tekst: var(--club-blauw); --schaduw: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 36, 124, .07); --sponsor-filter: grayscale(1); --hero-sluier: rgba(0, 26, 92, .92); --voet: var(--club-blauw-donker); --breedte: 72rem; --leesbreedte: 40rem; --radius: 10px; /* Eén duur voor alles wat beweegt, zodat de site zich als één geheel gedraagt en niet als losse onderdelen die elk hun eigen tempo hebben. */ /* Vertelt de browser in welke standen deze pagina bestaat. Twee dingen hangen daaraan: formulierelementen en scrollbalken krijgen de juiste kleur, én Chrome laat zijn eigen automatische verduistering achterwege. Zonder dit verft die het logo en de foto's mee, bovenop wat wij al doen. */ color-scheme: light dark; --duur: .18s; --duur-traag: .45s; --soepel: cubic-bezier(.2, .7, .3, 1); } :root[data-theme="light"] { color-scheme: light; } /* Donker: alleen de rollen worden opnieuw gezet. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --grond: #0e1116; --grond-zacht: #161a21; --kaart: #161a21; --tekst: #e8eaee; --tekst-zacht: #9aa3b2; --lijn: #262c36; --balk: #0b1020; --balk-tekst: #ffffff; /* Het clubblauw is op een donkere grond te donker om leesbaar te zijn; links krijgen daarom de lichte variant. De merkkleur zelf verandert niet — die zit in het logo en in de balk. */ --link: #7d9be8; --link-hover: #a8bef0; --merkje-grond: rgba(125, 155, 232, .14); --merkje-tekst: #a8bef0; --schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); /* Grijs maken werkt niet op een donkere grond: logo's van sponsors zijn vaak donker op transparant en verdwijnen dan. Wel iets dimmen. */ --sponsor-filter: grayscale(1) invert(1) brightness(1.6); --hero-sluier: rgba(6, 10, 20, .93); --voet: #080c14; } } /* En dezelfde rollen nog een keer voor wie donker expliciet kiest terwijl het apparaat op licht staat. */ :root[data-theme="dark"] { color-scheme: dark; --grond: #0e1116; --grond-zacht: #161a21; --kaart: #161a21; --tekst: #e8eaee; --tekst-zacht: #9aa3b2; --lijn: #262c36; --balk: #0b1020; --balk-tekst: #ffffff; --link: #7d9be8; --link-hover: #a8bef0; --merkje-grond: rgba(125, 155, 232, .14); --merkje-tekst: #a8bef0; --schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --sponsor-filter: grayscale(1) invert(1) brightness(1.6); --hero-sluier: rgba(6, 10, 20, .93); --voet: #080c14; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: hidden; /* vangnet; de oorzaken zijn hierboven al weggenomen */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--tekst); background: var(--grond); } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); } a:hover { color: var(--link-hover); } h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; } h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); } h3 { font-size: 1.2rem; } .omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 1.25rem; } /* Voor wie met een toetsenbord of schermlezer navigeert: de eerste tab-stop slaat het menu over. Onzichtbaar tot hij focus krijgt. */ .overslaan { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--club-blauw); color: var(--op-blauw); padding: .75rem 1rem; } .overslaan:focus { left: 0; } /* ---------- Kop ---------- */ .kopbalk { position: sticky; top: 0; z-index: 50; background: var(--balk); color: var(--balk-tekst); box-shadow: 0 1px 0 rgba(255, 255, 255, .12); } .kopbalk a { color: var(--balk-tekst); text-decoration: none; } .kopbalk__rij { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; } .merk { display: flex; align-items: center; gap: .625rem; font-weight: 700; letter-spacing: .01em; } .merk img { width: 2.25rem; height: 2.25rem; } .merk__naam { font-size: 1.0625rem; } /* In de HTML staat de themaknop vóór het menu, omdat hij op een telefoon naast de menuknop hoort. Op een breed scherm moet de volgorde links→rechts zijn: merk, menu, themaknop. Vandaar expliciete order-waarden in plaats van op de DOM-volgorde te vertrouwen. */ .merk { order: 0; } .menu { order: 1; margin-left: auto; } .thema { order: 2; } .menu ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; } .menu a { display: block; padding: .5rem .75rem; border-radius: 6px; font-size: .9375rem; font-weight: 500; } .menu a:hover, .menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); } /* Het menu op een telefoon: een knop die een lijst openklapt. Geen JavaScript nodig — een checkbox en een label doen hetzelfde en blijven werken als het script niet laadt. */ .menuknop, .menuschakelaar { display: none; } @media (max-width: 60rem) { .menuknop { display: block; margin-left: auto; padding: .5rem .625rem; background: rgba(255, 255, 255, .14); border-radius: 6px; cursor: pointer; font-size: .9375rem; font-weight: 600; } .menu { display: none; width: 100%; margin: 0; padding-bottom: .75rem; } .menu ul { flex-direction: column; gap: 0; } .menu a { padding: .625rem .75rem; border-radius: 0; } .kopbalk__rij { flex-wrap: wrap; } .menuschakelaar:checked ~ .menu { display: block; } } /* ---------- Melding ---------- */ .melding { background: var(--club-accent); color: #2a2100; font-weight: 600; text-align: center; } .melding .omhulsel { padding-top: .625rem; padding-bottom: .625rem; } .melding a { color: inherit; } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--club-blauw-donker); color: var(--op-blauw); } .hero img { width: 100%; max-height: 26rem; object-fit: cover; opacity: .55; } .hero__tekst { position: absolute; inset: auto 0 0 0; padding: 2rem 0; background: linear-gradient(to top, var(--hero-sluier), transparent); } .hero__tekst h1 { margin-bottom: .25rem; } .hero__tekst p { margin: 0; font-size: 1.125rem; opacity: .95; max-width: var(--leesbreedte); } .hero--zonderfoto { padding: 3rem 0; } /* ---------- Inhoud ---------- */ main { padding-bottom: 3.5rem; } .blokken > * { margin: 1.75rem 0; } .blokken > .tekst { max-width: var(--leesbreedte); } .blokken > .tekst:first-child { margin-top: 1.75rem; } .introductie { max-width: var(--leesbreedte); font-size: 1.1875rem; color: var(--tekst-zacht); margin: 0 0 1.5rem; } figure { margin: 0; } figcaption { font-size: .9375rem; color: var(--tekst-zacht); margin-top: .5rem; } .fotoreeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: .75rem; } .fotoreeks img { border-radius: var(--radius); } blockquote.citaat { margin: 0; padding: 1rem 0 1rem 1.25rem; border-left: 4px solid var(--club-accent); font-size: 1.1875rem; } blockquote.citaat cite { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--tekst-zacht); font-style: normal; } .knop { display: inline-block; padding: .75rem 1.375rem; border-radius: 8px; background: var(--club-blauw); color: var(--op-blauw); font-weight: 600; text-decoration: none; } .knop:hover { background: var(--club-blauw-licht); color: var(--op-blauw); } .tabelomhulsel { overflow-x: auto; } /* brede tabel scrollt zelf, de pagina niet */ table { border-collapse: collapse; width: 100%; font-size: .9375rem; } th, td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--lijn); } th { background: var(--grond-zacht); font-weight: 600; } .documenten { list-style: none; margin: 0; padding: 0; } .documenten li { border-bottom: 1px solid var(--lijn); } .documenten a { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; text-decoration: none; } .documenten a:hover { color: var(--link-hover); } .documenten .meta { color: var(--tekst-zacht); font-size: .875rem; white-space: nowrap; } .video { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Gegevens uit Sportlink of BetterLink. */ .sportlink { border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; } .sportlink__kop { padding: .75rem 1rem; background: var(--grond-zacht); font-weight: 600; border-bottom: 1px solid var(--lijn); } .sportlink iframe { width: 100%; border: 0; display: block; } .sportlink__leeg { padding: 1.25rem 1rem; color: var(--tekst-zacht); } /* ---------- Nieuws ---------- */ .kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .kaart { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; background: var(--kaart); } .kaart:hover { box-shadow: var(--schaduw); } .kaart__foto { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--grond-zacht); } .kaart__body { padding: 1rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; } .kaart h3 { margin: 0; font-size: 1.0625rem; } .kaart h3 a { text-decoration: none; } .kaart h3 a:hover { text-decoration: underline; } .kaart p { margin: 0; font-size: .9375rem; color: var(--tekst-zacht); } .merkje { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--merkje-tekst); background: var(--merkje-grond); padding: .1875rem .5rem; border-radius: 999px; } .datum { font-size: .8125rem; color: var(--tekst-zacht); } .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .filters a { display: block; padding: .375rem .875rem; border: 1px solid var(--lijn); border-radius: 999px; text-decoration: none; font-size: .9375rem; } .filters a[aria-current="true"] { background: var(--club-blauw); border-color: var(--club-blauw); color: var(--op-blauw); } .bladeren { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; } /* ---------- Teams ---------- */ .teamgroep { margin: 2rem 0; } .teamlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; } .teamlijst li { border: 1px solid var(--lijn); border-radius: var(--radius); padding: .875rem 1rem; } .teamlijst .naam { font-weight: 700; } .teamlijst .begeleiding { font-size: .875rem; color: var(--tekst-zacht); } /* ---------- Voet ---------- */ .sponsorbalk { border-top: 1px solid var(--lijn); padding: 2rem 0; } .sponsorbalk h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-zacht); } .sponsorlijst { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .sponsorlijst img { max-height: 3rem; width: auto; filter: grayscale(1); opacity: .75; } .sponsorlijst a:hover img { filter: none; opacity: 1; } .voet { background: var(--voet); color: rgba(255, 255, 255, .82); padding: 2.5rem 0; font-size: .9375rem; } .voet a { color: var(--op-blauw); } .voet__kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 2rem; } .voet h2 { font-size: .9375rem; color: var(--op-blauw); text-transform: uppercase; letter-spacing: .06em; } .voet ul { list-style: none; margin: 0; padding: 0; } .voet li { margin-bottom: .375rem; } .voet__onder { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .875rem; } @media print { .kopbalk, .voet, .sponsorbalk, .filters { display: none; } } /* ---------- Zoeken ---------- */ .zoekformulier { display: flex; gap: .625rem; margin: 0 0 2rem; max-width: var(--leesbreedte); } .zoekformulier input { flex: 1; padding: .75rem .875rem; font-size: 1rem; border: 1px solid var(--lijn); border-radius: 8px; } .zoekformulier input:focus { outline: 2px solid var(--club-blauw); outline-offset: 1px; } .zoekformulier .knop { border: 0; cursor: pointer; font-size: 1rem; } /* ========================================================================== Beweging ========================================================================== Uitgangspunt: beweging mag helpen om te zien wat er verandert, en verder niets. Alles hieronder is kort, subtiel, en valt volledig stil voor wie in zijn systeem heeft aangegeven daar last van te hebben — die instelling is voor sommige mensen een medische en geen esthetische keuze, dus het is de laatste regel van dit bestand en overschrijft alles. -------------------------------------------------------------------------- */ /* Wisselen van licht naar donker: kleuren schuiven mee in plaats van te knipperen. Alleen kleur-eigenschappen, niet `all` — dat laatste zou ook layout-eigenschappen animeren en de pagina laten stuiteren. */ body, .kopbalk, .kaart, .voet, .sportlink, .teamlijst li, .filters a, .zoekformulier input, th, .melding { transition: background-color var(--duur-traag) var(--soepel), border-color var(--duur-traag) var(--soepel), color var(--duur-traag) var(--soepel); } a, .knop, .merkje { transition: color var(--duur) var(--soepel), background-color var(--duur) var(--soepel); } /* ---- Menu ---- */ /* Een streep die onder het gekozen menu-item vandaan groeit. Op de plek van een underline, maar hij komt uit het midden zodat de beweging laat zien wélk item nu actief is. */ .menu a { position: relative; } .menu a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: .25rem; height: 2px; background: var(--club-accent); border-radius: 2px; transition: left var(--duur) var(--soepel), right var(--duur) var(--soepel); } .menu a:hover::after, .menu a[aria-current="page"]::after { left: .75rem; right: .75rem; } /* De kopbalk krijgt pas een schaduw zodra er iets onder is weggescrold. Zo is te zien dat de balk vóór de pagina ligt, zonder dat hij bovenaan al een rand heeft die er niet hoeft te zijn. */ .kopbalk { transition: box-shadow var(--duur-traag) var(--soepel); } .kopbalk[data-gescrold="ja"] { box-shadow: 0 2px 16px rgba(0, 0, 0, .28); } /* Het uitklapmenu op een telefoon schuift open in plaats van te verspringen. */ @media (max-width: 60rem) { .menu { display: block; overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--duur-traag) var(--soepel), opacity var(--duur) var(--soepel), padding var(--duur-traag) var(--soepel); padding-bottom: 0; } .menuschakelaar:checked ~ .menu { max-height: 32rem; opacity: 1; padding-bottom: .75rem; } .menuknop { transition: background-color var(--duur) var(--soepel); } } /* ---- Kaarten ---- */ .kaart { transition: transform var(--duur) var(--soepel), box-shadow var(--duur) var(--soepel), border-color var(--duur) var(--soepel); } .kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw); } .kaart:focus-within { outline: 2px solid var(--link); outline-offset: 2px; } .kaart__foto { transition: transform var(--duur-traag) var(--soepel); } .kaart:hover .kaart__foto { transform: scale(1.03); } .kaart a { overflow: hidden; } .knop:hover { transform: translateY(-1px); } .knop { transition: background-color var(--duur) var(--soepel), transform var(--duur) var(--soepel); } /* ---- Verschijnen bij scrollen ---- De klasse wordt door JavaScript gezet; zonder JavaScript blijft alles gewoon staan waar het staat. Vandaar dat 'zichtbaar' de normale toestand is en 'verschijnt' de afwijking, en niet andersom: een bezoeker zonder JavaScript ziet dan een complete pagina in plaats van een lege. */ .verschijnt { opacity: 0; transform: translateY(12px); transition: opacity var(--duur-traag) var(--soepel), transform var(--duur-traag) var(--soepel); } .verschijnt.zichtbaar { opacity: 1; transform: none; } /* Kaarten in een rij komen kort na elkaar in beeld in plaats van tegelijk. */ .kaarten .verschijnt:nth-child(2) { transition-delay: .06s; } .kaarten .verschijnt:nth-child(3) { transition-delay: .12s; } .kaarten .verschijnt:nth-child(4) { transition-delay: .18s; } /* ---- Focus ---- Zichtbaar voor wie met het toetsenbord navigeert, onzichtbaar voor wie met de muis klikt. */ :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; } .kopbalk :focus-visible { outline-color: var(--club-accent); } /* ---- Themaknop ---- */ .thema { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: .25rem; border: 0; border-radius: 6px; cursor: pointer; background: rgba(255, 255, 255, .14); color: var(--balk-tekst); transition: background-color var(--duur) var(--soepel); } .thema:hover { background: rgba(255, 255, 255, .26); } .thema svg { width: 1.125rem; height: 1.125rem; } /* Welk pictogram zichtbaar is hangt af van de stand; de knop toont wat je krijgt als je klikt, niet waar je nu bent. */ .thema .maan { display: none; } :root[data-theme="dark"] .thema .zon { display: none; } :root[data-theme="dark"] .thema .maan { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .thema .zon { display: none; } :root:not([data-theme="light"]) .thema .maan { display: block; } } @media (max-width: 60rem) { .thema { margin-left: auto; order: 2; } .menuknop { margin-left: .5rem; order: 3; } .menu { order: 4; } } /* ---- Stilte ---- Wie beweging heeft uitgezet krijgt de site zonder. Dit hoort onderaan te staan: het moet alles hierboven kunnen overschrijven. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .verschijnt { opacity: 1; transform: none; } .kaart:hover { transform: none; } .kaart:hover .kaart__foto { transform: none; } .knop:hover { transform: none; } }