's vóór .container). V4: herkleurd naar de
echte pluimkleuren i.p.v. de oude losse hexcodes, en dienen nu als
extra, iets scherpere gloed bovenop de zachtere --gradient-aurora-mesh. */
.hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.4;
z-index: 0;
pointer-events: none;
}
.hero-blob--1 {
width: 420px;
height: 420px;
top: -140px;
right: -80px;
background: var(--feather-red-real);
}
.hero-blob--2 {
width: 320px;
height: 320px;
bottom: -160px;
right: 220px;
background: var(--feather-blue-real);
}
/* GEDEPRECIEERD (v3): de golf-divider is vervangen door de scherpe
diagonale clip-path op .hero zelf (zie sectie 6, bovenaan). */
.hero-wave {
display: none;
}
@media (max-width: 899px) {
.hero {
/* Kleinere diagonaal op mobiel: leesbaarheid van de content weegt
zwaarder dan het effect, zoals gevraagd in de opdracht. */
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
.hero .container {
grid-template-columns: 1fr;
text-align: center;
padding-top: var(--space-7);
padding-bottom: calc(var(--space-6) + 24px);
min-height: 0;
}
.hero h1,
.hero p {
text-align: center;
max-width: none;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
justify-content: center;
}
.hero-visual svg {
max-width: 260px;
}
.hero-logo {
max-width: 220px;
}
}
/* -------------------------------------------------------------------------
7. KNOPPEN — V4: gradient-vulling i.p.v. vlakke kleur
------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-accent,
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.7rem 1.4rem;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
border: none;
cursor: pointer;
text-decoration: none;
transition: filter var(--transition), background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* Primaire CTA: gradient blauw → cyaan (beide eindpunten met witte tekst
nagerekend: 6.94:1 / 4.64:1, zie V4-toelichting punt 4). */
.btn,
.btn-primary {
background: var(--gradient-primary);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn:hover,
.btn-primary:hover {
filter: brightness(1.1);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 10px 28px color-mix(in srgb, var(--feather-cyan) 45%, transparent), var(--shadow-md);
}
/* Warme accentknop — gradient paars → rood, uitsluitend voor de
belangrijkste call-to-action's (4.62:1 / 4.61:1 met witte tekst). */
.btn-accent {
background: var(--gradient-accent);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
filter: brightness(1.1);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 10px 28px color-mix(in srgb, var(--feather-red) 45%, transparent), var(--shadow-md);
}
/* Secundaire knop: "glas"-outline i.p.v. vlakke rand. */
.btn-outline {
background: var(--glass-bg);
border: 2px solid var(--glass-border-strong);
color: var(--color-text);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
padding: calc(0.7rem - 2px) calc(1.4rem - 2px);
}
.btn-outline:hover {
/* .hero .btn-outline:hover (hierboven) is specifieker en wint binnen de
hero — deze basisregel geldt dus voor elk ander (licht) gebruik van
.btn-outline sitewide, en heeft daarom een donkere hover nodig i.p.v.
de vorige witte opheldering (die op de lichte canvas onzichtbaar zou
worden). */
background: var(--glass-bg-strong);
border-color: var(--color-text);
color: var(--color-text);
text-decoration: none;
}
.btn:disabled,
.btn-primary:disabled,
.btn-accent:disabled,
.btn-outline:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
filter: none;
}
.btn-sm {
padding: 0.45rem 0.9rem;
font-size: 0.85rem;
}
.btn-lg {
padding: 0.85rem 1.8rem;
font-size: 1.05rem;
}
/* -------------------------------------------------------------------------
8. KAARTEN (cards) — V4: glaskaart i.p.v. witte kaart
------------------------------------------------------------------------- */
.card {
/* Glasmorfisme-truc: 2 achtergrondlagen. De eerste (vlakke --glass-bg)
vult enkel de padding-box (binnen de rand), de tweede (--gradient-
border) vult de border-box — zo ontstaat een dunne, subtiele
gradient-rand die WEL correct meebuigt met border-radius (in
tegenstelling tot border-image, dat border-radius negeert). */
background:
linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
var(--gradient-border) border-box;
border: 1px solid transparent;
border-radius: var(--radius-lg);
padding: var(--space-5);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
display: block;
}
.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
background:
linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)) padding-box,
var(--gradient-border) border-box;
}
.card h3 {
margin-top: 0;
color: var(--color-text);
}
a.card {
color: var(--color-text);
}
a.card:hover {
text-decoration: none;
}
.news-card .date {
color: var(--color-muted);
font-size: 0.85rem;
margin-bottom: var(--space-2);
font-weight: 500;
}
.news-card img {
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: top;
width: 100%;
}
.news-card h3 {
margin-bottom: var(--space-2);
}
.news-card p {
color: var(--color-muted);
margin-bottom: 0;
}
/* -------------------------------------------------------------------------
8b. ICOON-CHIPS & FEATURE-CARDS — V4: halfdoorzichtige kleurchip
------------------------------------------------------------------------- */
.icon-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-primary) 16%, var(--color-canvas));
color: var(--color-primary);
margin-bottom: var(--space-4);
flex-shrink: 0;
}
.icon-chip svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.feature-card {
position: relative;
padding-top: calc(var(--space-5) + 4px);
overflow: hidden;
}
.feature-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--feature-color, var(--color-primary));
}
.feature-card .icon-chip {
background: color-mix(in srgb, var(--feature-color, var(--color-primary)) 16%, var(--color-canvas));
color: var(--feature-color, var(--color-primary));
}
/* Kleurcyclus op basis van de echte pluimkleuren (consistent met .tile
hieronder, i.p.v. de losse V1/V2-hexcodes van weleer). */
.feature-card:nth-of-type(6n+1) { --feature-color: var(--feather-blue-text); }
.feature-card:nth-of-type(6n+2) { --feature-color: var(--feather-purple-real); }
.feature-card:nth-of-type(6n+3) { --feature-color: var(--feather-red-real); }
.feature-card:nth-of-type(6n+4) { --feature-color: var(--feather-orange-real); }
.feature-card:nth-of-type(6n+5) { --feature-color: var(--feather-yellow-real); }
.feature-card:nth-of-type(6n+6) { --feature-color: var(--feather-cyan-real); }
/* Statistiekribbon (donkere band met cijfers + iconen, bv. homepage) */
.stats-band {
background: var(--color-canvas-elevated);
background-image: var(--gradient-aurora);
color: #fff;
}
.stat {
text-align: center;
}
.stat .icon-chip {
/* .stat leeft binnen .stats-float-card, dat nu een SOLIDE lichte kaart
is (zie hieronder) i.p.v. donker glas — dus donkere iconkleur i.p.v.
wit. */
background: var(--glass-bg-strong);
color: var(--color-primary);
margin: 0 auto var(--space-3);
}
.stat .value {
font-family: var(--font-heading);
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.1;
}
.stat .label {
color: var(--color-muted);
font-size: 0.9rem;
margin-top: var(--space-1);
}
/* -------------------------------------------------------------------------
8c. V4: KLEURVLAK-TEGELS, ZWEVENDE STATS, EYEBROW-PILLS, SECTIETINTEN —
herskinning van de bestaande V3-structuur naar het donkere/glazen/
gradient-materiaal (concept BEHOUDEN, materiaal vernieuwd).
------------------------------------------------------------------------- */
/* --- .tile: V5-LICHT — teruggedraaid naar een EFFEN gekleurd vlak (zoals
de oorspronkelijke V3-aanpak, zie toelichting bovenaan het bestand) i.p.v.
de V4-glaskaart. Die V4-glasformule (lage dekking + doorschijnend) leunde
op een dominante DONKERE canvas erachter om leesbaar te blijven — op de
nu lichte canvas zou diezelfde formule een vaag, bijna onzichtbaar
waas geven met onleesbare witte tekst erop. De "-real"-tokens zijn nu de
al-geverifieerde verdiepte V3-kleuren (zie de tokendefinities bovenaan),
dus wit erop is hier gegarandeerd AA-conform. Gebruik ongewijzigd:
...
→ automatische kleurcyclus
...
→ expliciete kleur
Beschikbare modifiers: tile--blue, tile--purple, tile--red,
tile--orange, tile--yellow, tile--cyan. --- */
.tile {
--tile-color: var(--feather-blue-real);
position: relative;
display: block;
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--tile-color);
border: 1px solid transparent;
color: #fff;
box-shadow: var(--shadow-md);
transition: transform var(--transition), box-shadow var(--transition);
}
.tile:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px color-mix(in srgb, var(--tile-color) 40%, transparent), var(--shadow-lg);
}
.tile h3,
.tile h4 {
color: #fff;
}
.tile p {
color: rgba(255, 255, 255, 0.88);
margin-bottom: 0;
}
.tile .icon-chip {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
/* Automatische kleurcyclus wanneer geen modifier-klasse gezet is. */
.tile:nth-of-type(6n+1) { --tile-color: var(--feather-blue-real); }
.tile:nth-of-type(6n+2) { --tile-color: var(--feather-purple-real); }
.tile:nth-of-type(6n+3) { --tile-color: var(--feather-red-real); }
.tile:nth-of-type(6n+4) { --tile-color: var(--feather-orange-real); }
.tile:nth-of-type(6n+5) { --tile-color: var(--feather-yellow-real); }
.tile:nth-of-type(6n+6) { --tile-color: var(--feather-cyan-real); }
/* Expliciete kleurmodifiers — .tile.tile--* i.p.v. .tile--* zodat de
specificiteit (2 klassen) altijd wint van de .tile:nth-of-type(...)
kleurcyclus hierboven (1 klasse + pseudo-klasse = evenveel specificiteit,
maar de cyclus staat later in de broncode en zou anders alsnog winnen). */
.tile.tile--blue { --tile-color: var(--feather-blue-real); }
.tile.tile--purple { --tile-color: var(--feather-purple-real); }
.tile.tile--red { --tile-color: var(--feather-red-real); }
.tile.tile--orange { --tile-color: var(--feather-orange-real); }
.tile.tile--yellow { --tile-color: var(--feather-yellow-real); }
.tile.tile--cyan { --tile-color: var(--feather-cyan-real); }
/* --- .stats-float: rij statistiekkaartjes die met een negatieve
margin-top over de diagonale onderrand van de hero heen "zweven" (v3-
structuur BEHOUDEN). V4: elk kaartje is nu een glaskaart i.p.v. een
witte kaart. Structuur ongewijzigd, zie originele toelichting:
Plaats deze sectie in de template DIRECT NA .hero (geen witruimte
ertussen), zodat de negatieve margin het overlap-effect geeft. --- */
.stats-float {
position: relative;
z-index: 5;
margin-top: -72px;
margin-bottom: var(--space-6);
}
.stats-float-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
.stats-float-card {
/* SOLIDE wit i.p.v. een doorschijnende glasformule: dit kaartje
overlapt met zijn bovenste helft de (bewust donker gebleven) hero en
met zijn onderste helft de lichte canvas — een doorschijnende
glastint zou daardoor bovenaan donker-op-donker (bijna onzichtbaar)
en onderaan licht-op-licht ogen. Een effen witte kaart blijft in
beide zones gegarandeerd leesbaar. */
background: var(--color-canvas-elevated);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-5) var(--space-4);
text-align: center;
}
@media (max-width: 767px) {
.stats-float {
/* Kleinere overlap op mobiel, zoals gevraagd — leesbaarheid eerst. */
margin-top: -32px;
}
.stats-float-row {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- .eyebrow-pill: ronde badge met puntje boven een sectietitel.
V4: halfdoorzichtige kleurchip (achtergrond = 10% van de kleur gemengd
met de donkere canvas — bij 10% haalt élke pluimkleur minimaal 4.52:1
met zichzelf als tekst, zie V4-toelichting punt 6). Gebruik ongewijzigd:
Aanbod
Modifiers: eyebrow-pill--blue, --purple, --red, --orange, --yellow,
--cyan. --- */
.eyebrow-pill {
--eyebrow-color: var(--color-primary);
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--eyebrow-color);
background: color-mix(in srgb, var(--eyebrow-color) 10%, var(--color-canvas));
border: 1px solid color-mix(in srgb, var(--eyebrow-color) 30%, transparent);
padding: 0.4rem 0.95rem;
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.eyebrow-pill .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--eyebrow-color);
flex-shrink: 0;
}
.eyebrow-pill--blue { --eyebrow-color: var(--feather-blue-text); }
.eyebrow-pill--purple { --eyebrow-color: var(--feather-purple-real); }
.eyebrow-pill--red { --eyebrow-color: var(--feather-red-real); }
.eyebrow-pill--orange { --eyebrow-color: var(--feather-orange-real); }
.eyebrow-pill--yellow { --eyebrow-color: var(--feather-yellow-real); }
.eyebrow-pill--cyan { --eyebrow-color: var(--feather-cyan-real); }
/* --- Sectie-tinten: V4 herzien naar donkere, subtiel gekleurde varianten
(8% van de kleur gemengd met de canvas — blijft optisch zeer dicht bij
de canvas, dus alle tekstcontrasten die op canvas werken blijven ook
hier ruim overeind, zie V4-toelichting/script). Zelfde gebruik als
voorheen:
. --- */
.section-tint-blue {
background: color-mix(in srgb, var(--feather-blue-real) 8%, var(--color-canvas));
}
.section-tint-purple {
background: color-mix(in srgb, var(--feather-purple-real) 8%, var(--color-canvas));
}
.section-tint-cyan {
background: color-mix(in srgb, var(--feather-cyan-real) 8%, var(--color-canvas));
}
.section-tint-yellow {
background: color-mix(in srgb, var(--feather-yellow-real) 8%, var(--color-canvas));
}
.section-tint-orange {
background: color-mix(in srgb, var(--feather-orange-real) 8%, var(--color-canvas));
}
/* -------------------------------------------------------------------------
9. BADGES — V4: halfdoorzichtige kleurchip (zelfde formule als eyebrow-pill)
------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: color-mix(in srgb, var(--feather-cyan-real) 10%, var(--color-canvas));
color: var(--feather-cyan-real);
}
.badge-accent {
background: color-mix(in srgb, var(--feather-orange-real) 10%, var(--color-canvas));
color: var(--feather-orange-real);
}
.badge-secondary {
background: color-mix(in srgb, var(--feather-blue-text) 10%, var(--color-canvas));
color: var(--feather-blue-text);
}
/* -------------------------------------------------------------------------
10. FORMULIERVELDEN — V4: aangepast voor leesbaarheid op donkere achtergrond
(Ook gebruikt door de login-pagina, die Bootstrap-achtige klassenamen
gebruikt zonder dat Bootstrap geladen wordt — daarom worden die klassen
hier ook expliciet ondersteund: .form-control, .form-label, .alert,
.alert-danger, en de utility-klassen .mb-3 / .mb-4 / .py-5 / .w-100 / .h3)
------------------------------------------------------------------------- */
label,
.form-label {
display: block;
margin-bottom: var(--space-2);
font-weight: 600;
font-size: 0.9rem;
color: var(--color-text);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
textarea,
select,
.form-control {
display: block;
width: 100%;
padding: 0.65rem 0.9rem;
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-text);
background: color-mix(in srgb, white 8%, var(--color-canvas));
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
textarea {
min-height: 130px;
resize: vertical;
}
::placeholder {
color: var(--color-muted);
opacity: 1;
}
.form-group,
.mb-3 {
margin-bottom: var(--space-4);
}
.mb-4 {
margin-bottom: var(--space-5);
}
.py-5 {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.w-100 {
width: 100%;
}
.h3,
h3.h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
}
.alert {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: 0.92rem;
margin-bottom: var(--space-4);
}
.alert-danger {
background: color-mix(in srgb, var(--feather-red-real) 14%, var(--color-canvas));
color: var(--feather-red-real);
border-color: color-mix(in srgb, var(--feather-red-real) 35%, transparent);
}
.alert-success {
background: color-mix(in srgb, var(--feather-cyan-real) 14%, var(--color-canvas));
color: var(--feather-cyan-real);
border-color: color-mix(in srgb, var(--feather-cyan-real) 35%, transparent);
}
/* -------------------------------------------------------------------------
11. TABELLEN — V4: leesbaar op donkere achtergrond
------------------------------------------------------------------------- */
table {
width: 100%;
min-width: 480px;
border-collapse: collapse;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
overflow: hidden;
}
/* Horizontaal scrollbaar op smalle schermen zonder de template-structuur
te moeten aanpassen (moderne :has()-selector, degradeert veilig). */
.container:has(> table) {
overflow-x: auto;
}
table th,
table td {
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--glass-border);
}
table th {
/* --color-text (donker) op --color-canvas-elevated-2 (effen grijstint):
ruim boven AA — een kopTEKST in een feather-kleur haalt hier
onvoldoende contrast, dus bewust neutrale donkere tekst, net als in
het V4-donkere-thema al de correcte keuze was. */
background: var(--color-canvas-elevated-2);
color: var(--color-text);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
table tbody tr:hover {
background: var(--glass-bg);
}
table tbody tr:last-child td {
border-bottom: none;
}
/* -------------------------------------------------------------------------
12. SPONSORS
------------------------------------------------------------------------- */
.sponsors {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
align-items: center;
justify-content: center;
}
/* Sponsorlogo's hebben doorgaans een ondoorzichtige witte achtergrond — op
de lichte canvas smelt een puur witte "kaart" daar nu bijna in weg, dus
een dunne rand + schaduw geven de logo's nog steeds een duidelijk
afgebakend, premium plaatje i.p.v. los rondzwevende beeldjes. */
.sponsors a,
.sponsors > img {
display: inline-flex;
background: var(--color-canvas-elevated);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.sponsors a:hover,
.sponsors > img:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.sponsors img {
max-height: 48px;
width: auto;
filter: none;
opacity: 1;
}
/* -------------------------------------------------------------------------
13. FOTOGALERIJ
------------------------------------------------------------------------- */
.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-3);
}
.photo-gallery img {
border-radius: var(--radius-md);
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: var(--shadow-sm);
}
.photo-gallery img:hover {
transform: scale(1.02);
box-shadow: var(--shadow-md);
}
/* -------------------------------------------------------------------------
13b. LIGHTBOX — vergrote fotoweergave (assets/lightbox.js voegt deze
overlay eenmalig toe aan ; werkt op elke pagina met .photo-trigger-
knoppen, momenteel enkel de fotogalerij).
------------------------------------------------------------------------- */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(5, 7, 20, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
z-index: 2000;
}
.lightbox-overlay.is-open {
opacity: 1;
visibility: visible;
}
.lightbox-figure {
margin: 0;
max-width: min(1100px, 92vw);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.lightbox-image {
max-width: 100%;
max-height: 78vh;
width: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.lightbox-caption {
color: rgba(255, 255, 255, 0.85);
font-size: 0.92rem;
text-align: center;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
/* Hardgecodeerd (i.p.v. de gedeelde --glass-*-tokens, die nu
licht-thema-tinten zijn): de lightbox-overlay blijft bewust een
donkere volledig-scherm-achtergrond (universele fotokijker-conventie,
los van het sitethema), dus deze knoppen hebben nog steeds een
lichte glasrand/-vulling nodig. */
position: absolute;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.26);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
color: #fff;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(255, 255, 255, 0.26);
}
.lightbox-close {
top: var(--space-5);
right: var(--space-5);
}
.lightbox-prev {
left: var(--space-5);
top: 50%;
transform: translateY(-50%);
}
.lightbox-next {
right: var(--space-5);
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 640px) {
.lightbox-close {
top: var(--space-3);
right: var(--space-3);
width: 38px;
height: 38px;
font-size: 1.2rem;
}
.lightbox-prev {
left: var(--space-2);
width: 38px;
height: 38px;
font-size: 1.2rem;
}
.lightbox-next {
right: var(--space-2);
width: 38px;
height: 38px;
font-size: 1.2rem;
}
}
/* -------------------------------------------------------------------------
14. PAGINA-INHOUD (CMS-pagina's, nieuwsdetail, ...) — V4: glaskaart
------------------------------------------------------------------------- */
.page-content {
background:
linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
var(--gradient-border) border-box;
border: 1px solid transparent;
border-radius: var(--radius-lg);
padding: var(--space-6);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow-sm);
}
.page-content h1,
.page-content h2,
.page-content h3 {
color: var(--color-text);
}
.page-content h2 {
color: var(--feather-cyan-real);
}
.page-content > *:last-child {
margin-bottom: 0;
}
.page-content .date {
color: var(--color-muted);
font-size: 0.85rem;
font-weight: 500;
margin-bottom: var(--space-2);
}
/* -------------------------------------------------------------------------
15. BREADCRUMB
------------------------------------------------------------------------- */
.breadcrumb {
color: var(--color-muted);
font-size: 0.88rem;
margin-bottom: var(--space-5);
}
.breadcrumb a {
color: var(--color-muted);
}
.breadcrumb a:hover {
color: var(--color-primary);
}
/* -------------------------------------------------------------------------
16. FOOTER — V4: donker/elevated panel i.p.v. effen navy
------------------------------------------------------------------------- */
.site-footer {
background: var(--color-canvas-elevated-2);
color: var(--color-muted);
padding: var(--space-8) 0 var(--space-5);
margin-top: var(--space-7);
border-top: 4px solid transparent;
border-image: var(--gradient-shuttle) 1;
}
.footer-brand {
max-width: 32rem;
}
.site-footer h4 {
color: var(--color-text);
margin: 0 0 var(--space-3);
font-size: 1rem;
letter-spacing: 0.02em;
}
.site-footer p {
margin: 0 0 var(--space-2);
font-size: 0.92rem;
line-height: 1.6;
}
.site-footer a {
color: var(--color-muted);
font-size: 0.92rem;
}
.site-footer a:hover {
/* De echte --color-accent (feather-orange) haalt nu al 8.97:1 op de
donkere canvas — de vorige "-tint"-workaround is niet langer nodig. */
color: var(--color-accent);
text-decoration: none;
}
.footer-social {
display: flex;
gap: var(--space-3);
margin-top: var(--space-2);
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--color-text);
transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.footer-social a:hover {
background: var(--gradient-primary);
border-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px color-mix(in srgb, var(--feather-cyan) 45%, transparent);
}
.footer-social svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.site-footer .copy {
text-align: center;
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--glass-border);
color: var(--color-muted);
font-size: 0.85rem;
}
/* Federatielogo's ("Onderdeel van") — ingesloten via SponsorController's
footerFederations()-actie, dus op elke pagina zichtbaar, niet enkel op
de Sponsors-pagina. Lichte tegels (logo's zijn gemaakt voor een lichte
achtergrond), zelfde formule als de Sponsors-pagina. */
.footer-federations {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--glass-border);
}
.footer-federations-label {
margin: 0 0 var(--space-4);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
}
.footer-federations-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.footer-federation-logo {
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 52px;
padding: var(--space-2);
border-radius: var(--radius-md);
background: #fdfdfd;
}
.footer-federation-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* -------------------------------------------------------------------------
17. RESPONSIVE FEINSTELLUNGEN (extra controlepunten: 375 / 768 / 1200px)
------------------------------------------------------------------------- */
@media (max-width: 480px) {
.section {
padding: var(--space-6) 0;
}
.hero {
padding: var(--space-7) 0;
}
.page-content,
.card {
padding: var(--space-4);
}
}
@media (min-width: 1200px) {
.container {
padding: 0 var(--space-6);
}
}