/* ═══════════════════════════════════════════════════════════════════════ Dé Plek — Huisstijl Versie 1.0 (april 2026) Drop-in CSS-bestand met design tokens en basiscomponenten. Geschikt voor elk webproject van Dé Plek BSO. Gebruik: 1. Kopieer dit bestand én de map fonts/ naar je project 2. Link in je : 3. Gebruik de CSS-variabelen (var(--oranje), var(--ink), etc.) en componentklassen (.btn, .card, .badge, etc.) Kleuren in het kort: --groen #13342B primaire donkergroen, voor sidebars/tekst --lichtgroen #86C79D accent --oranje #E37A41 call-to-action, primaire knoppen --creme #F4EFE7 achtergrond ═══════════════════════════════════════════════════════════════════════ */ /* ─── Fonts ──────────────────────────────────────────────────────────── */ /* Verwacht 4 OpenType-bestanden in /fonts/. Zie fonts/README.txt */ @font-face { font-family: 'AllRoundGothic'; src: url('/fonts/AllRoundGothic-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'AllRoundGothic'; src: url('/fonts/AllRoundGothic-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'AllRoundGothic'; src: url('/fonts/AllRoundGothic-Demi.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'AllRoundGothic'; src: url('/fonts/AllRoundGothic-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* ─── Design tokens ──────────────────────────────────────────────────── */ :root { /* Brand */ --groen: #13342B; --groen-50: #EFF7F2; --groen-100: #D9ECDF; --lichtgroen: #86C79D; --oranje: #E37A41; --oranje-donker: #D06832; --oranje-50: #FBEEE4; --creme: #F4EFE7; --wit: #ffffff; /* Grijstinten — warmer, met een groene ondertoon */ --grijs-50: #FAF7F2; --grijs-100: #F2EEE5; --grijs-200: #E8E2D5; --grijs-300: #D1CCBF; --grijs-400: #9B9689; --grijs-500: #6B6B61; --grijs-700: #3F3F37; /* Semantiek (tekst & lijnen) */ --ink: #13342B; --ink-2: #4B6158; --ink-3: #7A8F87; --rule: rgba(19,52,43,.14); --rule-strong: rgba(19,52,43,.22); /* Status */ --rood: #C23B22; --rood-licht: #FDECE8; --geel-licht: #FFF4D6; --geel-donker: #8A5A12; /* Layout */ --sidebar-w: 260px; /* Radii */ --r-sm: 14px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* Schaduw */ --shadow-xs: 0 1px 2px rgba(19,52,43,.08); --shadow-sm: 0 4px 14px rgba(19,52,43,.08); --shadow-md: 0 10px 28px rgba(19,52,43,.12); --shadow-lg: 0 22px 60px rgba(19,52,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: 'AllRoundGothic', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--creme); 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); } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oranje); } .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(--oranje); box-shadow: 0 0 0 4px rgba(227,122,65,.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; } .btn-primary { background: var(--oranje); color: var(--wit); box-shadow: 0 4px 14px rgba(227,122,65,.25); } .btn-primary:hover:not(:disabled) { background: var(--oranje-donker); box-shadow: 0 6px 20px rgba(227,122,65,.35); } .btn-secondary { background: var(--wit); color: var(--ink); border: 1.5px solid var(--rule-strong); } .btn-secondary:hover:not(:disabled) { background: var(--creme); border-color: var(--ink); } .btn-danger { background: var(--rood); color: var(--wit); } .btn-danger:hover:not(:disabled) { background: #A32F1B; } .btn-ghost { background: transparent; color: var(--ink-2); padding: 8px 14px; } .btn-ghost:hover:not(:disabled) { background: rgba(19,52,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 ──────────────────────────────────────────────────────────── */ .card { background: var(--wit); border-radius: var(--r-md); box-shadow: var(--shadow-xs); border: 1px solid var(--rule); 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(--lichtgroen); 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: #1F6B3F; } .status-warning { background: var(--oranje-50); color: #8A3F12; } .status-info { background: #E4EEF8; color: #1B4A7A; } .status-archief { background: rgba(19,52,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(19,52,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: 2px solid transparent; margin-bottom: -2px; transition: all .15s var(--ease); font-size: 14px; border-radius: var(--r-sm) var(--r-sm) 0 0; } .tab:hover { color: var(--ink); background: rgba(19,52,43,.04); } .tab.active { color: var(--ink); border-bottom-color: var(--oranje); background: rgba(227,122,65,.06); } .tab-content.hidden { display: none; } /* ─── Modal ──────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(19,52,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(19,52,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(--lichtgroen); 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(--creme); } .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(244,239,231,.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(--lichtgroen); 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(244,239,231,.72); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 12px; transition: all .15s var(--ease); } .nav-item:hover { background: rgba(244,239,231,.08); color: var(--wit); } .nav-item.active { background: var(--oranje); color: var(--wit); font-weight: 600; box-shadow: 0 4px 14px rgba(227,122,65,.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='%234B6158' 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 (optioneel) ───────────────────────────────────────── */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 15%, rgba(134,199,157,.18), transparent 40%), radial-gradient(circle at 80% 80%, rgba(227,122,65,.12), transparent 45%), var(--creme); padding: 24px; } .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(19,52,43,.06); position: relative; overflow: hidden; } .login-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--oranje); 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-card { padding: 32px 24px; } }