/* ============================================================ BASE — design-tokens, reset en typografie Stijl: strak en koel neutraal met de Vitals-huisstijl van vitals.nl — rood #de0028 naar oranje #fbb040 als brand-gradient. Manrope voor koppen, Inter voor interface. Dag/nacht: alle kleuren zijn tokens, dus de nachtmodus is één blok met andere waardes onder [data-theme="dark"]. Dat attribuut wordt op gezet — al in de van index.html, zodat de app niet eerst licht opflitst. Instellen kan bij Instellingen → Weergave. ============================================================ */ :root { --bg: #f4f5f7; --bg-card: #ffffff; --bg-soft: #eceef2; --ink: #16181d; --ink-soft: #565b65; --ink-mute: #98a0ac; /* tekst op een vlak van --ink, --accent of --done (knoppen, badges) */ --on-solid: #ffffff; --border: #e7e9ee; --border-strong: #cfd3db; --accent: #de0028; --accent-2: #fbb040; --accent-dark: #c50023; --accent-soft: #fde8ec; --grad: linear-gradient(to right, #de0028 30%, #fbb040 100%); --btn-hover: #2b2f3a; --chip-hover: #f8dbe2; /* De takenkaarten in "Mijn taken" faden van links naar de kaartkleur: standaard, eigen taken (roder) en geblokkeerd (neutraal). */ --fade-card: #fdf2f4; --fade-card-line: #f6d6de; --fade-mine: #fce7eb; --fade-mine-line: #f2c5cf; --fade-lock: #f1f2f5; --fade-lock-line: #d7dae0; /* De sidebar volgt de dag/nachtmodus mee (afspraak tweede showcase): wit in de dagmodus, donker in de nachtmodus. Daarom eigen tokens voor de vlakken en de koptekst — met vaste rgba-waardes zou de lichte balk niet werken. */ --sidebar: #ffffff; --sidebar-ink: #16181d; --sidebar-soft: #4d535e; --sidebar-mute: #98a0ac; --sidebar-fill: rgba(18, 22, 33, 0.045); --sidebar-fill-hover: rgba(18, 22, 33, 0.08); --sidebar-border: #e4e6ec; /* Het inlogscherm blijft in beide modi een donker vlak met de lichte kaart erop; dat is dus een eigen token en niet de (nu lichte) sidebarkleur. */ --login-bg: #16181e; --warn: #c67a2e; --warn-soft: #fbf1e2; --stop: #d13b3b; --stop-soft: #fce9e9; --done: #0dad4a; --done-soft: #e6f7ec; --wait: #3d6a94; --wait-soft: #e8f0f7; --shadow-sm: 0 1px 2px rgba(18, 22, 33, 0.05); --shadow-md: 0 4px 16px rgba(18, 22, 33, 0.07); --shadow-lg: 0 16px 40px rgba(18, 22, 33, 0.14); --radius: 12px; --radius-sm: 8px; --font-serif: 'Manrope', system-ui, sans-serif; --font-sans: 'Inter', system-ui, sans-serif; color-scheme: light; } /* --- Nachtmodus --- Het rood van de huisstijl is op donker te weinig contrastrijk voor tekst, dus daar staat een lichtere variant; de brand-gradient zelf blijft intact. Op die felle vlakken wordt de tekst juist donker (--on-solid). */ :root[data-theme="dark"] { --bg: #101216; --bg-card: #191c22; --bg-soft: #23272f; --ink: #e9ebef; --ink-soft: #a4abb7; --ink-mute: #737b88; --on-solid: #12141a; --border: #282d36; --border-strong: #3b414d; --accent: #ff5c74; --accent-2: #fbb040; --accent-dark: #ff7d8f; --accent-soft: #331a20; --btn-hover: #d5dae2; --chip-hover: #42212a; --fade-card: #201a1d; --fade-card-line: #33232a; --fade-mine: #2b1a20; --fade-mine-line: #45242f; --fade-lock: #1d2027; --fade-lock-line: #2c313a; --sidebar: #0b0d11; --sidebar-ink: #ffffff; --sidebar-soft: #b0b6c2; --sidebar-mute: #767d8a; --sidebar-fill: rgba(255, 255, 255, 0.06); --sidebar-fill-hover: rgba(255, 255, 255, 0.11); --sidebar-border: #22262e; --login-bg: #0b0d11; --warn: #e2a24f; --warn-soft: #2d2415; --stop: #f2696e; --stop-soft: #331b1d; --done: #35c46e; --done-soft: #15291e; --wait: #6ea8dd; --wait-soft: #16232f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } [role="button"] { user-select: none; } /* Alleen voor schermlezers: labels die op het scherm overbodig zijn, maar die een voorleeshulp wél nodig heeft (bijv. de lege hoekcel van een tabelkop). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Dunne, rustige scrollbars voor horizontaal scrollende stroken/tabellen */ .sections-timeline, .table-card { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }