/* ============================================================
LANDING.CSS — huisstijl Stichting Landing
------------------------------------------------------------
Laadt NA basis.css en overschrijft alleen de stichting-pagina's.
Werkt via de schakelaar
Plaatsing in de HTML , in deze volgorde:
En op de body:
Vuistregel om iets te wijzigen: pas de waarde aan, niet de
selector. Alle kleuren/fonts staan als variabelen in :root,
dus je verandert ze daar 1x en het werkt overal door.
============================================================ */
/* --- Fonts: Open Sans (tekst) + Instrument Serif (koppen) ---
BELANGRIJK: de fonts worden geladen via een in de
van stichtinglanding.html, NIET hier via @import (dat laadt
onbetrouwbaar). Zet deze regels in de :
Neue Haas (voor dikgedrukt) is een betaald font en wordt hier
nog niet gebruikt; dikgedrukte tekst staat voorlopig in Open Sans. */
/* ============================================================
HUISSTIJL-VARIABELEN — pas hier je kleuren & fonts aan
(waarden komen uit 2026_ID_StichtingLanding)
============================================================ */
:root {
/* Basis */
--landing-bg: #ECE7DE; /* warm gebroken-wit (RGB 236,231,222) */
--landing-tekst: #0E0E0E; /* bijna-zwart (RGB 14,14,14) */
/* Accent — actief = blauw (keuze van de ontwerper, zie webvoorbeeld).
Wissel door één regel te activeren en de andere uit te zetten. */
--landing-accent: #2B6FD8; /* blauw (RGB 43,111,216) — ACTIEF */
/* --landing-accent: #185025; */ /* diep groen (RGB 24,80,37) */
/* --landing-accent: #DF0910; */ /* rood (RGB 223,9,16) */
/* --landing-accent: #662E90; */ /* paars (RGB 102,46,144) */
/* --landing-accent: #FF6100; */ /* oranje (RGB 255,97,0) */
/* --landing-accent: #FF61B7; */ /* roze (RGB 255,97,183) */
/* Zachte variant van het accent (voor randen/subtiele vlakken). */
--landing-accent-zacht: #95C8E7; /* lichtblauw (RGB 149,200,231) */
/* Header-geel (uit het ontwerp van de ontwerper) */
--landing-geel: #F7D593; /* zacht geel (RGB 247,213,147) */
/* Fonts */
--landing-serif: 'Instrument Serif', Georgia, serif;
--landing-sans: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* ============================================================
BASIS — grondtoon van de stichting-pagina's
Overschrijft de * { font-family: Franklin Gothic } uit basis.css
============================================================ */
body.landing {
font-family: var(--landing-sans);
background-color: var(--landing-bg);
color: var(--landing-tekst);
}
/* ============================================================
SECTIE-CONTAINER
Overschrijft in basis.css: witte achtergrond + zwarte 2px rand
============================================================ */
body.landing .stichtinglanding {
background-color: var(--landing-bg);
border: none; /* witte kader van Zeelanding weg; zet hier een
eigen rand als je dat wilt, bv:
1px solid var(--landing-tekst); */
}
/* ============================================================
KOPPEN
============================================================ */
/* H1 — overschrijft zwart + uppercase uit basis.css */
body.landing .stichtinglanding h1 {
font-family: var(--landing-serif);
font-weight: 400; /* serif oogt mooier in normale weight */
font-size: 3rem; /* groter, want serif draagt dat */
line-height: 1.1;
color: var(--landing-tekst);
text-transform: none; /* af van uppercase */
margin-bottom: 1rem;
}
/* H2 — overschrijft klein/zwart/uppercase uit basis.css */
body.landing .stichtinglanding h2 {
font-family: var(--landing-serif);
font-weight: 400;
font-size: 1.6rem;
color: var(--landing-accent); /* accent op de tussenkoppen */
text-transform: none;
margin-top: 2rem;
margin-bottom: 0.5rem;
}
/* ============================================================
LOPENDE TEKST
============================================================ */
body.landing .stichtinglanding p {
font-family: var(--landing-sans);
font-size: 1.0625rem; /* ~17px */
line-height: 1.6;
max-width: 80ch; /* prettige regellengte; weghalen kan */
margin-bottom: 1rem;
}
body.landing .stichtinglanding li {
margin-bottom: 0.4rem;
}
/* ============================================================
LINKS binnen de sectie
Overschrijft de brede/groene linkregels uit basis.css
============================================================ */
body.landing .stichtinglanding a {
color: var(--landing-accent);
text-transform: none;
text-decoration: underline;
text-underline-offset: 2px;
}
body.landing .stichtinglanding a:hover {
color: var(--landing-tekst);
}
/* De mailto-link heeft in de HTML class="zwart" (witte achtergrond).
Binnen Landing halen we dat vlak weg zodat hij in de tekst opgaat. */
body.landing .stichtinglanding a.zwart {
background-color: transparent;
color: var(--landing-accent);
}
body.landing .stichtinglanding a.zwart:hover {
background-color: transparent;
color: var(--landing-tekst);
}
/* ============================================================
TABEL (bestuur, algemene gegevens)
Font hard geforceerd op alle celinhoud, zodat het oude font uit
basis.css (* { font-family: Franklin Gothic }) niet doorkomt.
============================================================ */
body.landing .stichtinglanding table,
body.landing .stichtinglanding table tr,
body.landing .stichtinglanding table td,
body.landing .stichtinglanding table td b {
font-family: var(--landing-sans) !important;
font-size: 1.0625rem; /* zelfde maat als de lopende tekst */
line-height: 1.6;
}
body.landing .stichtinglanding table td:first-child {
text-transform: none; /* af van uppercase */
font-weight: 600;
color: var(--landing-tekst);
}
body.landing .stichtinglanding table td {
padding: 4px 12px 4px 0;
vertical-align: top;
color: var(--landing-tekst);
}
/* ============================================================
KERNWAARDEN-LIJST (Engagement / Experiment / Verankering)
Zelfde tweekoloms-opmaak als de bestuurstabel: titel links,
tekst rechts.
============================================================ */
body.landing .stichtinglanding ul.kernwaarden {
list-style: none;
margin: 1rem 0;
padding: 0;
}
body.landing .stichtinglanding ul.kernwaarden li {
display: grid;
grid-template-columns: 14rem 1fr; /* 10rem = zelfde breedte als tabel-kolom */
gap: 0 12px; /* zelfde horizontale ruimte als tabel */
align-items: start;
margin-bottom: 1rem;
max-width: 80ch;
font-family: var(--landing-sans) !important;
font-size: 1.0625rem;
line-height: 1.6;
}
/* De titel (Engagement etc.) staat in ; die zit door de nu
nog op een eigen regel. We halen die visueel weg via de grid:
de wordt de linkerkolom, de rest de rechterkolom. */
body.landing .stichtinglanding ul.kernwaarden li b {
font-family: var(--landing-sans) !important; /* forceer Open Sans,
niet het Zeelanding-font */
font-weight: 600;
color: var(--landing-tekst);
}
/* De na de titel is in de grid-opmaak niet meer nodig; we
verbergen hem zodat titel en tekst netjes in twee kolommen staan. */
body.landing .stichtinglanding ul.kernwaarden li br {
display: none;
}
/* ============================================================
DOWNLOADKNOPPEN
Let op: .zwarteknop wordt SITE-BREED gebruikt. Door 'm aan
body.landing te binden raken we alleen de stichting-pagina's.
============================================================ */
body.landing .zwarteknop,
body.landing a.zwarteknop:link,
body.landing a.zwarteknop:visited,
body.landing a.zwarteknop:active {
background-color: var(--landing-accent);
color: #ffffff;
text-transform: none;
border-radius: 4px;
padding: 0.4rem 0.8rem;
text-decoration: none;
display: inline-block;
}
body.landing a.zwarteknop:hover {
background-color: var(--landing-tekst);
color: var(--landing-bg);
}
/* ============================================================
NIEUWSBRIEF-BLOK (staat ook op de stichtingspagina)
In basis.css is dit zwart; hieronder zetten we het in de
Landing-achtergrond met accentknop. Haal dit blok weg als je
het nieuwsbrief-blok zwart wilt laten.
============================================================ */
body.landing .nieuwsbrief {
background: var(--landing-tekst);
color: var(--landing-bg);
}
body.landing .nieuwsbrief h1 {
font-family: var(--landing-serif);
font-weight: 400;
text-transform: none;
}
/* ============================================================
HEADER & FOOTER in Landing-stijl
------------------------------------------------------------
Overschrijft de zwarte Zeelanding-header met groen menu.
LET OP: het logo zelf staat in de HTML, niet hier. Wissel in
stichtinglanding.html:
naar:
============================================================ */
/* Gele balk i.p.v. zwart */
body.landing header,
body.landing header .menu {
background-color: var(--landing-geel);
}
/* Logo-grootte finetunen (SVG kan anders uitvallen dan het oude PNG).
Pas height aan tot het logo goed op de balk staat. */
body.landing a.logo {
height: 3.5rem; /* groter/kleiner naar smaak */
}
/* Menu-links: zwart i.p.v. felgroen */
body.landing header .navigatie ul li a {
color: var(--landing-tekst);
}
body.landing header .navigatie ul li a:hover {
color: var(--landing-accent); /* blauw bij hover */
}
/* Submenu-links ook zwart */
body.landing header .navigatie ul li ul li a {
color: var(--landing-tekst);
}
body.landing header .navigatie ul li ul li a:hover {
color: var(--landing-accent);
}
/* Het hamburger-icoon (mobiel) — nu een geel-achtige tint, op
geel onzichtbaar; zwart maken zodat het zichtbaar blijft. */
body.landing header label {
color: var(--landing-tekst);
}
/* De banner onder de header (grote afbeelding) houden we; wil je
die weg of anders, dan kan dat hier. */
/* Footer: laat voorlopig zwart (zoals de rest van de site).
Wil je 'm in Landing-stijl, activeer dan onderstaande regels:
body.landing footer { background-color: var(--landing-tekst); }
*/
naar:
============================================================ */
/* Gele balk i.p.v. zwart */
body.landing header,
body.landing header .menu {
background-color: var(--landing-geel);
}
/* Logo-grootte finetunen (SVG kan anders uitvallen dan het oude PNG).
Pas height aan tot het logo goed op de balk staat. */
body.landing a.logo {
height: 3.5rem; /* groter/kleiner naar smaak */
}
/* Menu-links: zwart i.p.v. felgroen */
body.landing header .navigatie ul li a {
color: var(--landing-tekst);
}
body.landing header .navigatie ul li a:hover {
color: var(--landing-accent); /* blauw bij hover */
}
/* Submenu-links ook zwart */
body.landing header .navigatie ul li ul li a {
color: var(--landing-tekst);
}
body.landing header .navigatie ul li ul li a:hover {
color: var(--landing-accent);
}
/* Het hamburger-icoon (mobiel) — nu een geel-achtige tint, op
geel onzichtbaar; zwart maken zodat het zichtbaar blijft. */
body.landing header label {
color: var(--landing-tekst);
}
/* De banner onder de header (grote afbeelding) houden we; wil je
die weg of anders, dan kan dat hier. */
/* Footer: laat voorlopig zwart (zoals de rest van de site).
Wil je 'm in Landing-stijl, activeer dan onderstaande regels:
body.landing footer { background-color: var(--landing-tekst); }
*/