/* ═══════════════════════════════════════════════════════════════════════
SC Muiderberg — Huisstijl voor de declaraties-app
Versie 3.0 (koerswijziging augustus 2026 — wit werkgebied)
Drop-in CSS-bestand met design tokens en basiscomponenten.
Kleuren overgenomen van scmuiderberg.nl (customizer-CSS van het thema).
Gebruik:
1. Kopieer dit bestand én de map fonts/ naar je project
2. Link in je :
3. Gebruik de CSS-variabelen (var(--blauw), var(--ink), etc.)
en componentklassen (.btn, .card, .badge, etc.)
Kleuren in het kort:
--blauw #1B47C1 structuur: header (vol vlak), koppen, primaire
knoppen, links, actieve staat
--blauw-diep #153795 hover/actief van primaire knoppen
--blauw-secundair #1E73BE links, hover/actief van navigatie (4,9:1
op wit — niet gebruiken voor kleine/lichte tekst)
--blauw-zacht #E7EFF7 rustige vlakken, tabelkoppen
--geel #F7E922 de bies: een vlak, een lijn of een markering —
nooit een oppervlak met tekst erop. Draagt hier
"hier moet je zijn": actieve tab, rijhover,
badges met donkere tekst
--geel-zacht #FEFCDD NIET meer de paginagrond (die is nu --wit) —
uitsluitend de geel-tint voor tabelrij-hover
--wit #FFFFFF paginagrond + kaarten (v3.0: koerswijziging,
zie rapport huisstijl-wit-report.md — de
eigenaar wilde de achtergrond wit en de
clubkleuren als structuur, niet als spikkels)
Drie harde regels:
1. Knoppen zijn blauw met witte tekst — geel is geen actiekleur.
2. Geel wordt uitsluitend gebruikt met donkere tekst erop, nooit met wit
erop, en nooit als drager van lopende tekst (wel als vlak/lijn/markering,
of onder een kort label). #F7E922 scoort op wit gemeten via de WCAG-
luminantieformule maar 1,26:1 — ver onder de 3:1-norm voor interface-
elementen, ook al is geel voor het oog wél goed te onderscheiden van wit
(bekende beperking van die formule bij verzadigd geel). Daarom staat een
geel accent op wit altijd naast een kleursvrij signaal (dikte, gewicht,
positie, een getinte achtergrond) — nooit als enige aanwijzing.
3. --geel-donker/--waarschuwing (amber, "let op"/afgesloten) en --geel
(het clubgeel) blijven twee verschillende kleuren met een eigen rol —
nooit door elkaar gebruiken, ook al liggen ze qua familie dicht bij
elkaar.
De variabelen hieronder met de oude namen (--groen, --lichtgroen, --oranje,
--creme, ...) zijn aliassen naar de nieuwe clubkleuren. Dat houdt
/css/app.css (dat deze namen overal gebruikt) grotendeels ongemoeid.
--creme is zo'n alias: die heet nog "creme" maar is sinds v3.0 uitsluitend
de geel-tint voor rijhover (#FEFCDD), niet meer een paginagrond-tint —
plekken die vroeger --creme als "zachte ondergrond" gebruikten, gebruiken nu
--wit of --grijs-50.
═══════════════════════════════════════════════════════════════════════ */
/* ─── Fonts ──────────────────────────────────────────────────────────── */
/* Titillium Web (SIL Open Font License, het clublettertype van
scmuiderberg.nl), zelf gehost als woff2 — de CSP van deze app staat geen
externe fontbronnen toe. Alleen de gewichten die de huisstijl gebruikt
(400/600/700); Titillium Web zelf heeft geen 500-gewicht. */
@font-face {
font-family: 'Titillium Web';
src: url('/huisstijl/fonts/TitilliumWeb-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Titillium Web';
src: url('/huisstijl/fonts/TitilliumWeb-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Titillium Web';
src: url('/huisstijl/fonts/TitilliumWeb-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ─── Design tokens ──────────────────────────────────────────────────── */
:root {
/* Brand (scmuiderberg.nl) */
--blauw: #1B47C1;
--blauw-diep: #153795;
--blauw-secundair: #1E73BE;
--blauw-zacht: #E7EFF7;
--geel: #F7E922;
--geel-zacht: #FEFCDD;
--ink: #16202B;
--ink-zacht: #55636F;
--wit: #ffffff;
--lijn: #D9CFAE;
--ok: #1B6D3F;
--waarschuwing: #9D5D00;
--fout: #B3261E;
/* ── Aliassen naar de oude variabelenamen (gebruikt in app.css) ──
Zelfde namen, nieuwe clubkleuren erachter. */
--groen: var(--blauw);
--groen-50: var(--blauw-zacht);
--groen-100: #D2E2F1;
--lichtgroen: var(--blauw-zacht);
--oranje: var(--blauw);
--oranje-donker: var(--blauw-diep);
--oranje-50: #FBF6D9;
--creme: var(--geel-zacht);
/* Grijstinten — koel, met een blauwe ondertoon (complementeert de warme
geel-crème pagina-achtergrond) */
--grijs-50: #F7F9FB;
--grijs-100: #EEF2F6;
--grijs-200: #E2E8EE;
--grijs-300: #C9D3DD;
--grijs-400: #94A3B2;
--grijs-500: #647385;
--grijs-700: #3A4553;
/* Semantiek (tekst & lijnen) */
--ink-2: var(--ink-zacht);
/* --ink-3 was #7C8896 (3,61:1 op wit) — onder de 4,5:1-norm voor gewone
tekst. Alle ~32 toepassingen staan op wit of op een lichte tint
(--grijs-200 in de afgehandelde betalingsrijen was de enige
uitzondering, en gaat er met een donkerdere waarde alleen op vooruit) —
dus één donkerdere waarde volstaat, geen los token nodig. #6B7684 haalt
4,62:1 op wit, blijft duidelijk lichter dan --ink-2 (#55636F, 6,18:1) om
de gedempte hiërarchie te behouden. */
--ink-3: #6B7684;
--rule: rgba(22,32,43,.14);
--rule-strong: rgba(22,32,43,.22);
/* Status */
--rood: var(--fout);
--rood-licht: #FBE8E6;
--geel-licht: #FFF5C2;
--geel-donker: var(--waarschuwing);
/* Layout */
--sidebar-w: 260px;
/* Radii */
--r-sm: 14px;
--r-md: 18px;
--r-lg: 28px;
--r-pill: 999px;
/* Schaduw — --shadow-xs iets steviger dan voorheen (v3.0): op een creme
pagina onderscheidde een witte kaart zich al via de ondergrondkleur, op
een witte pagina moet de schaduw dat in haar eentje doen. */
--shadow-xs: 0 1px 3px rgba(22,32,43,.10), 0 1px 2px rgba(22,32,43,.06);
--shadow-sm: 0 4px 14px rgba(22,32,43,.08);
--shadow-md: 0 10px 28px rgba(22,32,43,.12);
--shadow-lg: 0 22px 60px rgba(22,32,43,.18);
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ─── Reset + base ───────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Titillium Web', Verdana, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--wit);
color: var(--ink);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hidden { display: none !important; }
/* ─── Typografie ─────────────────────────────────────────────────────── */
h1 { font-size: 32px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--ink); }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
h4 { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
/* Kale -links in lopende tekst (bijv. "Klik hier om te beginnen") hadden
geen eigen kleur en vielen terug op het browserdefault. Elke geklasseerde
link (.tab, .drawer-link, .btn, header#topbar nav a, .error-msg a, ...)
zet zelf al een eigen color, dus deze regel wint daar nooit — hij vangt
alleen de ongeklasseerde links op. */
a { color: var(--blauw-secundair); }
a:hover { color: var(--blauw-diep); }
.eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--blauw);
}
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
/* ─── Forms ──────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: var(--ink);
font-size: 13px;
letter-spacing: .02em;
}
input, select, textarea {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--rule);
border-radius: var(--r-sm);
font-size: 15px;
font-family: inherit;
background: var(--wit);
color: var(--ink);
transition: all .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--blauw);
box-shadow: 0 0 0 4px rgba(27,71,193,.15);
}
input::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 88px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.error-msg {
background: var(--rood-licht);
color: var(--rood);
padding: 10px 14px;
border-radius: var(--r-sm);
font-size: 13px;
margin-bottom: 14px;
font-weight: 500;
}
/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .15s var(--ease);
letter-spacing: .01em;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Knoppen zijn blauw met witte tekst — géén geel, dat haalt de
contrastnorm niet als knopkleur. */
.btn-primary {
background: var(--blauw);
color: var(--wit);
box-shadow: 0 4px 14px rgba(27,71,193,.25);
}
.btn-primary:hover:not(:disabled) {
background: var(--blauw-diep);
box-shadow: 0 6px 20px rgba(27,71,193,.35);
}
.btn-secondary {
background: var(--wit);
color: var(--ink);
border: 1.5px solid var(--rule-strong);
}
/* Blauw-getint i.p.v. het oude --creme: hover is een interactiereactie
("doe-kleur"), geen wayfinding-signaal — dat laatste is voorbehouden aan
geel (rijhover, actieve tab). */
.btn-secondary:hover:not(:disabled) { background: var(--blauw-zacht); border-color: var(--ink); }
.btn-danger { background: var(--rood); color: var(--wit); }
.btn-danger:hover:not(:disabled) { background: #8F1F19; }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 8px 14px; }
.btn-ghost:hover:not(:disabled) { background: rgba(22,32,43,.06); color: var(--ink); }
.btn-small { padding: 6px 12px; font-size: 13px; }
.btn-full { width: 100%; padding: 14px 20px; font-size: 15px; }
.btn svg, .btn [data-lucide] { width: 16px; height: 16px; stroke-width: 2.25; }
/* ─── Cards ──────────────────────────────────────────────────────────── */
/* v3.0: de pagina-achtergrond is nu ook wit, dus de kaart moet zich zonder
hulp van een getinte ondergrond onderscheiden — border-rule-strong (i.p.v.
het zwakkere --rule) plus de steviger --shadow-xs hierboven. */
.card {
background: var(--wit);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
border: 1px solid var(--rule-strong);
overflow: hidden;
}
.card-header {
padding: 18px 22px;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header h3 { font-size: 16px; color: var(--ink); font-weight: 700; margin: 0; }
.card-body { padding: 22px; }
/* ─── Badges & status ────────────────────────────────────────────────── */
.badge {
font-size: 10px;
padding: 2px 8px;
border-radius: var(--r-pill);
background: var(--geel);
color: var(--ink);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
}
.status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
}
.status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: .85;
flex: none;
}
.status-ok { background: var(--groen-100); color: var(--ok); }
.status-warning { background: var(--oranje-50); color: var(--waarschuwing); }
.status-info { background: var(--blauw-zacht); color: var(--blauw-diep); }
.status-archief { background: rgba(22,32,43,.06); color: var(--ink-2); }
.status-fout { background: var(--rood-licht); color: var(--rood); }
.status-aandacht { background: var(--geel-licht); color: var(--geel-donker); }
/* ─── Tabellen ───────────────────────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--rule);
}
th {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ink-2);
background: var(--groen-50);
}
td { font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--creme); }
tr.clickable { cursor: pointer; }
/* Avatar + naam-cel */
.name-cell { display: flex; align-items: center; gap: 12px; }
.avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--lichtgroen);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
flex: none;
letter-spacing: -.02em;
}
.avatar.orange { background: var(--oranje); color: var(--wit); }
.avatar.muted { background: rgba(22,32,43,.1); color: var(--ink-2); }
.name-cell .name { font-weight: 600; color: var(--ink); line-height: 1.2; }
.name-cell .sub { font-size: 12px; color: var(--ink-2); line-height: 1.2; }
/* ─── Tabs ───────────────────────────────────────────────────────────── */
.tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--rule);
margin-bottom: 24px;
}
.tab {
padding: 12px 20px;
cursor: pointer;
font-weight: 600;
color: var(--ink-2);
border-bottom: 5px solid transparent;
margin-bottom: -5px;
transition: all .15s var(--ease);
font-size: 14px;
border-radius: var(--r-sm) var(--r-sm) 0 0;
text-decoration: none;
}
.tab:hover { color: var(--blauw-secundair); background: rgba(22,32,43,.04); }
/* De gele onderstreping is de "hier moet je zijn"-markering (zie huisstijl-
token --geel hierboven). Puur op luminantie gemeten haalt #F7E922 op wit
maar 1,26:1 — ver onder de 3:1-norm voor interface-elementen, en dat bleek
niet alleen een formule-kwestie: een dunne gele lijn van 3px op wit was in
de browser met het blote oog nauwelijks te zien (geel en wit liggen simpel
te dicht bij elkaar in helderheid). Twee dingen lossen dat op: de band is
steviger (5px) én heeft een scherpe donkere binnenrand (de inset shadow
hieronder, exact tegen de bovenkant van de gele band) — zo krijgt de vlek
een omtrek die 'm wél afbakent van de witte tabstrip, in plaats van te
vertrouwen op het contrast van geel zelf. Ook dan staat de kleur nooit
alleen: font-weight, tekstkleur en een lichte blauwe achtergrondtint wijzen
de actieve tab óók aan, kleurvrij. */
.tab.active {
color: var(--ink);
font-weight: 700;
background: rgba(27,71,193,.06);
border-bottom: 5px solid var(--geel);
box-shadow: inset 0 -1px 0 0 rgba(22,32,43,.55);
}
.tab-content.hidden { display: none; }
/* ─── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(22,32,43,.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: fadeIn .2s var(--ease);
}
.modal {
background: var(--wit);
border-radius: var(--r-lg);
width: 560px;
max-width: 90vw;
max-height: 85vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
animation: modalIn .25s var(--ease);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 28px;
border-bottom: 1px solid var(--rule);
}
.modal-header h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--ink-3);
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .15s var(--ease);
}
.modal-close:hover { background: rgba(22,32,43,.06); color: var(--ink); }
.modal-body { padding: 28px; }
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 22px;
border-top: 1px solid var(--rule);
margin-top: 24px;
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
/* ─── Empty state ────────────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 64px 24px;
color: var(--ink-3);
}
.empty-state .icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--groen-50);
color: var(--blauw);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 28px;
}
.empty-state p { font-size: 15px; font-weight: 500; }
.loading {
text-align: center;
padding: 48px;
color: var(--ink-3);
font-weight: 500;
}
/* ─── Toast / notificatie ────────────────────────────────────────────── */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--ink);
color: var(--creme);
padding: 14px 22px;
border-radius: var(--r-pill);
box-shadow: var(--shadow-lg);
z-index: 2000;
font-weight: 600;
font-size: 14px;
animation: slideIn .3s var(--ease);
}
.toast.error { background: var(--rood); color: var(--wit); }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } }
/* ─── App-shell (sidebar + main) — optioneel ─────────────────────────── */
.app {
display: flex;
min-height: 100vh;
background: var(--wit);
}
.sidebar {
width: var(--sidebar-w);
background: var(--ink);
color: var(--wit);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
}
.sidebar-header {
padding: 22px 20px 18px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(253,240,196,.12);
}
.sidebar-header h2 { font-size: 16px; font-weight: 700; line-height: 1.1; margin: 0; color: var(--wit); }
.sidebar-sub {
font-size: 11px;
color: var(--geel);
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
display: block;
margin-top: 2px;
}
.sidebar-nav {
flex: 1;
padding: 14px 12px;
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
color: rgba(253,240,196,.72);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 12px;
transition: all .15s var(--ease);
}
.nav-item:hover { background: rgba(253,240,196,.08); color: var(--wit); }
.nav-item.active {
background: var(--geel);
color: var(--ink);
font-weight: 600;
box-shadow: 0 4px 14px rgba(247,233,34,.25);
}
.nav-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.nav-icon svg, .nav-icon [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.main-content {
flex: 1;
margin-left: var(--sidebar-w);
padding: 32px 40px 48px;
max-width: 1280px;
}
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 28px;
gap: 20px;
}
.page-header h2 {
font-size: 30px;
color: var(--ink);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.15;
margin: 0;
}
.page-toolbar { display: flex; gap: 10px; align-items: center; }
.search-input {
width: 260px;
padding: 10px 16px 10px 40px;
border-radius: var(--r-pill);
border: 1.5px solid var(--rule);
background-color: var(--wit);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2355636F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 14px center;
font-size: 14px;
}
/* ─── Login-scherm ───────────────────────────────────────────────────────
v3.0: "geen werkscherm" — vol clubblauw, geel accent, groot logo. De
werkschermen erachter zijn juist rustig wit; dit scherm mag de kleur
dragen die de rest van de app bewust spaarzaam gebruikt. */
.login-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
background:
radial-gradient(circle at 16% 12%, rgba(247,233,34,.18), transparent 42%),
radial-gradient(circle at 86% 90%, rgba(255,255,255,.10), transparent 45%),
var(--blauw);
padding: 24px;
}
/* Groot clublogo boven de kaart — staat los van .login-card (i.p.v. erin)
zodat renderLoginBevestiging() (app.js), dat alleen de kaartinhoud
vervangt, het logo niet per ongeluk meeneemt. */
.login-logo {
width: 112px;
height: 112px;
flex: none;
filter: drop-shadow(0 10px 24px rgba(9,20,54,.35));
}
.login-logo img { width: 100%; height: 100%; display: block; }
.login-card {
background: var(--wit);
border-radius: var(--r-lg);
padding: 44px 40px 40px;
width: 420px;
max-width: 100%;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(22,32,43,.06);
/* De bies: dezelfde gele lijn als onder de topbar, hier als bovenrand van
de kaart — geen tekst op geel, puur een lijn (zie de harde regels
bovenaan dit bestand). */
border-top: 4px solid var(--geel);
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: var(--blauw);
opacity: .12;
pointer-events: none;
}
/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.sidebar { width: 100%; position: relative; }
.main-content { margin-left: 0; padding: 20px; }
.form-row { flex-direction: column; }
.page-header { flex-direction: column; align-items: flex-start; }
.search-input { width: 100%; }
.login-screen { gap: 20px; }
.login-logo { width: 84px; height: 84px; }
.login-card { padding: 32px 24px; }
}