/* Summary: styling van de publieke site — thema "Nachtdienst" (donker als basis, licht als keuze). Alle kleuren staan als custom properties op :root; een component-regel verwijst nooit naar een letterlijke kleur, zodat het lichte thema puur een set andere tokens is en niet een tweede stylesheet. Het actieve thema staat als data-theme op (zie js/theme.js) — zonder dat attribuut geldt donker. Let op: dit bestand raakt ALLEEN de publieke site. De CRM heeft z'n eigen admin.css en is bij deze restyle bewust ongemoeid gelaten. Keywords: publieke site, styling, thema, dark mode, light mode, data-theme, restyle */ /* ============================================================================================ 1. Thematokens --brand = amber vlak (knoppen) — het signaal van dit thema --brand-text = dezelfde amber, maar als tekstkleur; op een lichte achtergrond moet die donkerder zijn, anders is 'ie niet te lezen --accent = koel cyaan/petrol voor links, labels en data ============================================================================================ */ :root { color-scheme: dark; --bg: #0A1220; --bg-alt: #0E1929; --surface: #131F32; --surface-2: #18273D; --surface-input: #0C1524; --line: #24344E; --line-strong: #35507A; --brand: #F5A524; --brand-hover: #FFB944; --brand-text: #F5A524; --on-brand: #16202F; --accent: #38D6C4; --accent-soft: rgba(56, 214, 196, .08); --accent-border: rgba(56, 214, 196, .22); --text: #C3D0E2; --text-bright: #F2F6FC; --muted: #7E90AA; --placeholder: #55688A; --star: #F5A524; --ok-bg: rgba(16, 185, 129, .10); --ok-border: rgba(52, 211, 153, .38); --ok-text: #6EE7B7; --bad-bg: rgba(239, 68, 68, .10); --bad-border: rgba(248, 113, 113, .38); --bad-text: #FCA5A5; /* Boekingskalender. --cal-open is "hier kan iets", --cal-split is de andere helft van een halve dag (in het donkere thema mag dat geen wit vlak zijn). */ --cal-open: #0E9F8B; --cal-open-text: #04231F; --cal-full: #B4332F; --cal-full-text: #FFE8E6; --cal-split: #1B2B42; --cal-closed: #182740; --cal-closed-text: #5D708C; /* Half-doorzichtige kop; als losse token omdat color-mix() hier niet nodig is en een rgba() per thema gewoon overal werkt. */ --nav-bg: rgba(10, 18, 32, .84); --glow-warm: rgba(245, 165, 36, .16); --glow-cool: rgba(56, 214, 196, .12); --grid-line: rgba(53, 80, 122, .16); --media-placeholder: #172641; --media-filter: saturate(.85) contrast(1.05); --radius: 10px; --radius-sm: 7px; --shadow: none; --sans: system-ui, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; } /* Lichte variant: hetzelfde merk, alleen omgedraaid. Geen blauw-uit-de-oude-stijl maar dezelfde amber/petrol, in tinten die op papierwit leesbaar zijn. */ :root[data-theme="light"] { color-scheme: light; --bg: #F7F9FC; --bg-alt: #ECF1F8; --surface: #FFFFFF; --surface-2: #F4F7FB; --surface-input: #FFFFFF; --line: #DEE6F0; --line-strong: #BFCDDF; --brand: #F0A01B; --brand-hover: #DB8E0C; --brand-text: #96590A; --on-brand: #1B1305; --accent: #0F766E; --accent-soft: rgba(15, 118, 110, .07); --accent-border: rgba(15, 118, 110, .22); --text: #43536A; --text-bright: #101E33; --muted: #64748B; --placeholder: #94A3B8; --star: #D98A0B; --ok-bg: #ECFDF5; --ok-border: #A7F3D0; --ok-text: #065F46; --bad-bg: #FEF2F2; --bad-border: #FECACA; --bad-text: #991B1B; --cal-open: #0E9F8B; --cal-open-text: #FFFFFF; --cal-full: #DC2626; --cal-full-text: #FFFFFF; --cal-split: #FFFFFF; --cal-closed: #E4EAF2; --cal-closed-text: #94A3B8; --nav-bg: rgba(247, 249, 252, .88); --glow-warm: rgba(240, 160, 27, .16); --glow-cool: rgba(15, 118, 110, .10); --grid-line: rgba(15, 30, 51, .06); --media-placeholder: #DCE7F4; --media-filter: none; --shadow: 0 1px 2px rgba(15, 30, 51, .04), 0 10px 26px -14px rgba(15, 30, 51, .16); } /* ============================================================================================ 2. Basis ============================================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--sans); font-size: 17px; line-height: 1.68; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--text-bright); line-height: 1.2; letter-spacing: -.02em; } h1 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 700; } h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 680; } h3 { font-size: 1.12rem; font-weight: 650; } a { color: var(--accent); } code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } .container { width: 90%; max-width: 1160px; margin: auto; } /* Sprongdoel van een ankerlink: de plakkende kop mag de bovenkant niet bedekken. */ .block-anchor { scroll-margin-top: 90px; } /* Vangnet: geen enkele afbeelding op de publieke site mag buiten z'n kolom vallen. */ .section img { max-width: 100%; } /* Zichtbare focus, in beide thema's. Zonder dit is toetsenbordbediening op donker niet te volgen. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================================================ 3. Navigatie + themaknop ============================================================================================ */ .site-nav { background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; } .site-nav .brand { font-weight: 650; font-size: .96rem; color: var(--text-bright); text-decoration: none; display: flex; align-items: center; gap: 11px; letter-spacing: -.01em; } /* Merkteken: amber blokje met een cyaan hoek. Puur CSS — geen logo-afbeelding om te laden. */ .site-nav .brand::before { content: ""; width: 24px; height: 24px; border-radius: 6px; flex: none; background: var(--brand); box-shadow: inset -6px -6px 0 0 var(--accent); } .site-nav ul { list-style: none; display: flex; gap: 2px; flex-wrap: wrap; align-items: center; } .site-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .94rem; padding: 8px 13px; border-radius: var(--radius-sm); display: block; } .site-nav a:hover { color: var(--brand-text); background: var(--surface); } /* Themaknop. Staat in dezelfde