/* Archivo is het merklettertype voor álle UI-tekst (DESIGN.md). Zelf gehost, niet via Google Fonts: het merkdocument raadt hotlinken af en de tool draait achter een login. Eén variabel bestand per subset dekt 400 t/m 800, dus de zware koppen kosten geen extra download. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/archivo-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/archivo-latin-ext-var.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ────────────────────────────────────────────────────────────────────────── Huisstijl abovomaxlead — zie DESIGN.md in de projectroot. Merkbalans: paars 30%, donkerpaars 30%, geel 20%, magenta 15%, blauw 5%. Paars domineert; geel/magenta/blauw zijn accenten, nooit grote vlakken. Twee thema's op één set semantische namen. Licht is de standaard werkomgeving; donker is de spiegeling. De schakelaar zet data-thema op , dus elke pagina die style.css laadt doet automatisch mee. Statuskleuren (groen/oranje/rood) staan bewust BUITEN het merkpalet: in een datatool is goed/matig/aandacht aangeleerde betekenis die je zonder nadenken leest. Het merk kent geen groen of rood; dat is hier een bewuste afwijking, niet een vergissing. ────────────────────────────────────────────────────────────────────────── */ :root { /* Merkkleuren, Brand Book p.9 — alleen de stappen die we gebruiken */ --purple-100: #f2d4ff; --purple-300: #c66aff; --purple-400: #af35ff; --purple-500: #9900ff; --purple-600: #8000d9; --purple-700: #6600b2; --purple-900: #330066; --magenta-500: #f422c8; --magenta-700: #b711a6; --yellow-100: #fcfac0; --brand-blue: #1e9cf0; --off-white: #f9f5fc; --off-white-strong: #e2dfe5; --off-black: #171619; --off-black-strong: #282130; /* Semantisch — licht */ --bg: var(--off-white); --surface: #ffffff; --panel: var(--surface); --white: #ffffff; --text: var(--off-black); --text-heading: var(--purple-900); --dark: var(--text); --slate: #3d3646; --muted: #6b6477; --border: var(--off-white-strong); --panel-border: var(--off-white-strong); --gray: #8b8395; --gray-light: #f4eff9; /* Accent. --accent is tekst/icoon/rand, --accent-fill is een vulkleur met witte tekst erop. Die twee lopen in het donkere thema uiteen. */ --accent: var(--purple-500); --accent-hover: var(--purple-600); --accent-fill: var(--purple-500); --accent-fill-hover: var(--purple-600); --accent-text: #ffffff; --blue: var(--accent); --blue-light: var(--purple-100); /* Tekst óp dat getinte vlak: DESIGN.md schrijft *-900 voor, en paars-500 erop haalt maar 4,12:1. */ --accent-op-tint: var(--purple-900); --merk-bg: transparent; /* Status — buiten het merkpalet, donker genoeg voor tekst op wit én op hun eigen lichte vlak */ --green: #0f7a3d; --green-light: #dcf5e6; --orange: #8a5a00; --orange-light: #fdf3d6; --red: #b3182b; --red-light: #fde4e6; /* Vorm. Het merk is rond en vlak: kaarten 24px, invoer 12px, knoppen pil. */ --radius: 12px; --radius-card: 24px; --radius-pill: 9999px; --shadow: none; --shadow-md: 0 8px 24px rgba(23,22,25,.12); color-scheme: light; } html[data-thema="donker"] { --bg: var(--off-black); --surface: var(--off-black-strong); --panel: var(--surface); --text: var(--off-white); --text-heading: #ffffff; --dark: var(--text); --slate: #d6d0dd; --muted: #a59cb0; --border: #3a3344; --panel-border: #3a3344; --gray: #8b8395; --gray-light: #211c28; /* DESIGN.md noemt purple-400 voor links op donker, maar dat haalt 4,1:1 en de projectregel is 4,5:1 voor normale tekst. Daarom een stap lichter voor tekst, terwijl de vulkleur op #9900ff blijft: wit daarop is 5,5:1, wit op purple-400 maar 4,4:1. Dat staat ook zo in DESIGN.md. */ --accent: var(--purple-300); --accent-hover: #dc9fff; --accent-fill: var(--purple-500); --accent-fill-hover: var(--purple-400); --blue: var(--accent); --blue-light: #3a1f52; --accent-op-tint: #dc9fff; --merk-bg: #ffffff; --green: #5ee39b; --green-light: #123726; --orange: #f0b45e; --orange-light: #3a2a12; --red: #ff8a80; --red-light: #3a1a1a; --shadow: none; --shadow-md: 0 8px 24px rgba(0,0,0,.45); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Archivo', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; min-height: 100vh; } /* ── Nav ── */ .nav { background: var(--text-heading); color: var(--accent-text); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-md); } .nav-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--accent-text); text-decoration: none; } .nav-brand .logo-icon { width: 32px; height: 32px; background: var(--blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-username { font-size: 13px; color: #94a3b8; } /* ── Breadcrumb ── */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 14px 24px; } .breadcrumb a { color: var(--blue); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-sep { color: var(--gray); } /* ── Main layout ── */ .main { max-width: 1200px; margin: 0 auto; padding: 24px; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-pill); border: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s; text-decoration: none; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--accent-fill); color: var(--accent-text); } .btn-primary:hover:not(:disabled) { background: var(--accent-fill-hover); } .btn-secondary { background: var(--surface); color: var(--slate); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--gray-light); } .btn-danger { background: var(--red-light); color: var(--red); } .btn-danger:hover:not(:disabled) { background: #fecaca; } .btn-sm { padding: 5px 11px; font-size: 13px; } .btn-icon { padding: 7px; } /* ── Cards ── */ .card { background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .card-body { padding: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 15px; font-weight: 600; color: var(--slate); } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; } .badge-blue { background: var(--blue-light); color: var(--accent-op-tint); } .badge-green { background: var(--green-light); color: var(--green); } .badge-orange { background: var(--orange-light); color: var(--orange); } .badge-red { background: var(--red-light); color: var(--red); } .badge-gray { background: #f1f5f9; color: var(--muted); } /* ── Page header ── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .page-header h1 { font-size: 24px; font-weight: 800; color: var(--text-heading); letter-spacing: -0.02em; } .page-header p { font-size: 14px; color: var(--muted); margin-top: 4px; } /* ── Client grid (dashboard) ── */ .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .client-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s; cursor: pointer; text-decoration: none; color: inherit; display: block; } .client-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue); } .client-card-name { font-size: 16px; font-weight: 600; color: var(--slate); margin-bottom: 4px; } .client-card-url { font-size: 13px; color: var(--blue); margin-bottom: 12px; } .client-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); } .steps-mini { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; } .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); } .step-dot.completed { background: var(--green); } .step-dot.error { background: var(--red); } .step-dot.running { background: var(--orange); } /* ── Steps grid (client page) ── */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 24px; } .step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; } .step-card.locked { opacity: .65; } .step-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .step-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .step-icon.blue { background: var(--blue-light); } .step-icon.green { background: var(--green-light); } .step-icon.orange { background: var(--orange-light); } .step-icon.gray { background: #f1f5f9; } .step-card-name { font-size: 15px; font-weight: 600; color: var(--slate); line-height: 1.3; } .step-card-desc { font-size: 13px; color: var(--muted); line-height: 1.5; } .step-tools { display: flex; flex-wrap: wrap; gap: 5px; } .tool-tag { background: var(--gray-light); border: 1px solid var(--border); color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 99px; } .step-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .time-save { font-size: 12px; color: var(--green); font-weight: 500; } /* ── Score display ── */ .score-ring { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .score-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; border: 6px solid; flex-shrink: 0; } .score-circle.good { color: var(--green); border-color: var(--green); } .score-circle.medium { color: var(--orange); border-color: var(--orange); } .score-circle.bad { color: var(--red); border-color: var(--red); } .score-circle small { font-size: 11px; font-weight: 400; color: var(--muted); margin-top: -4px; } .score-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; min-width: 200px; } .score-stat { background: var(--gray-light); border-radius: 8px; padding: 10px 14px; } .score-stat-num { font-size: 22px; font-weight: 700; } .score-stat-label { font-size: 11px; color: var(--muted); } /* ── Criteria list ── */ .criteria-section { margin-bottom: 20px; } .criteria-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: 8px; user-select: none; } .criteria-section-header.red { background: var(--red-light); color: var(--red); } .criteria-section-header.orange { background: var(--orange-light); color: var(--orange); } .criteria-section-header.yellow { background: #fef9c3; color: #a16207; } .criteria-section-header.green { background: var(--green-light); color: var(--green); } .criteria-list { display: flex; flex-direction: column; gap: 6px; } .criteria-item { background: var(--gray-light); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .criteria-item-name { font-size: 13px; font-weight: 600; color: var(--slate); } .criteria-item-desc { font-size: 12px; color: var(--muted); margin-top: 3px; } .criteria-item-pages { margin: 8px 0 0 0; padding: 6px 10px; list-style: none; background: #f8fafc; border-left: 3px solid var(--border); border-radius: 0 4px 4px 0; display: flex; flex-direction: column; gap: 3px; } .criteria-item-pages li { font-size: 11.5px; line-height: 1.4; } .criteria-item-pages a { color: var(--blue); text-decoration: none; font-family: monospace; word-break: break-all; } .criteria-item-pages a:hover { text-decoration: underline; } .criteria-item-pages .more-hint { color: var(--muted); font-style: italic; } /* ── Modal ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 200; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border-radius: 12px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; /* Functionele laag, geen decoratie: DESIGN.md staat schaduw alleen toe onder dropdowns, modals en popovers. */ box-shadow: var(--shadow-md); } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-header h2 { font-size: 18px; font-weight: 700; } .modal-body { padding: 20px 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } /* ── Forms ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--slate); margin-bottom: 5px; } .form-label .required { color: var(--red); margin-left: 3px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; font-family: inherit; color: var(--dark); background: var(--surface); transition: border-color .15s, box-shadow .15s; appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); } .form-textarea { resize: vertical; min-height: 80px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ── Login ── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, var(--dark) 0%, var(--slate) 100%); } .login-card { background: var(--surface); border-radius: var(--radius-card); padding: 40px; width: 100%; max-width: 400px; border: 1px solid var(--border); } .login-logo { width: 56px; height: 56px; background: var(--blue); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 20px; } .login-title { text-align: center; font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 4px; } .login-sub { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 28px; } .login-error { background: var(--red-light); color: var(--red); font-size: 13px; padding: 10px 14px; border-radius: 7px; margin-bottom: 16px; display: none; } /* ── Alert / toast ── */ .alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; } .alert-info { background: var(--blue-light); color: var(--accent-op-tint); } .alert-success { background: var(--green-light); color: var(--green); } .alert-error { background: var(--red-light); color: var(--red); } .alert-warning { background: var(--orange-light); color: var(--orange); } /* ── Empty state ── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state-icon { font-size: 48px; margin-bottom: 16px; } .empty-state h3 { font-size: 16px; font-weight: 600; color: var(--slate); margin-bottom: 8px; } .empty-state p { font-size: 14px; } /* ── Loading spinner ── */ .spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--accent-text); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } .spinner-dark { border-color: var(--panel-border); border-top-color: var(--accent); } /* Een spinner ín een knop: kleiner dan de losse variant, en hij erft de kleur van de knop waarin hij staat. .btn is inline-flex met gap, dus hij komt vanzelf netjes naast de tekst. */ .btn .spinner { width: 14px; height: 14px; } .btn-primary .spinner { border-color: rgba(255,255,255,.35); border-top-color: var(--accent-text); } .btn-secondary .spinner { border-color: var(--panel-border); border-top-color: var(--accent); } /* Een knop die bezig is, is uitgeschakeld maar mag niet wegvallen: anders lijkt hij stuk in plaats van bezig. */ .btn[aria-busy="true"] { opacity: 1; cursor: progress; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } } .pulsing { animation: pulse 1.5s infinite; } /* ── Client header (client page) ── */ .client-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow); } .client-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .client-header h1 { font-size: 22px; font-weight: 800; color: var(--text-heading); letter-spacing: -0.02em; } .client-header-url { font-size: 14px; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; } .client-meta-grid { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .client-meta-item { font-size: 13px; } .client-meta-item strong { color: var(--muted); font-weight: 500; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } .client-meta-item span { color: var(--dark); font-weight: 500; } /* ── Results panel ── */ .results-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); margin-top: 24px; } /* ── Collapsible ── */ .collapsible-content { display: none; } .collapsible-content.open { display: block; } .chevron { transition: transform .2s; display: inline-block; } .chevron.rotated { transform: rotate(180deg); } /* ── Divider ── */ .divider { height: 1px; background: var(--border); margin: 20px 0; } /* ── Responsive ── */ @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .clients-grid { grid-template-columns: 1fr; } .main { padding: 16px; } .score-stats { grid-template-columns: repeat(2, 1fr); } } /* ─── Nieuwe indeling (v2) ───────────────────────────────────────── Donker palet, uitsluitend binnen .v2. Het bestaande :root blijft ongemoeid: /client/:id en het dashboard koppelen dezelfde namen aan hardgecodeerde witte achtergronden en zouden onleesbaar worden. Een lichte v2-variant is later een kwestie van deze waarden omzetten, daarom staat er nergens anders een hexcode. */ /* Het .v2-palet is vervallen: sinds de huisstijl delen alle pagina's één tokenset op :root, en het thema hangt aan data-thema op . */ body.v2 { background: var(--bg); color: var(--text); } .v2 .btn-secondary { background: var(--gray-light); color: var(--text); border: 1px solid var(--panel-border); } .v2 .btn-secondary:hover:not(:disabled) { background: var(--panel-border); } .v2 .btn-primary { background: var(--accent); color: var(--bg); } .v2 .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .v2 .app-nav { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--panel-border); background:var(--bg); } .v2 .merk { background:var(--merk-bg); border-radius:7px; padding:5px 9px; display:inline-flex; align-items:center; margin-right:6px; } .v2 .merk img { height:18px; width:auto; display:block; } /* Klantnaam links in de balk: het antwoord op "met wie ben ik bezig". Krijgt een scheidingslijn zodat hij niet als eerste menu-item leest, en knijpt op smalle schermen af in plaats van de sectielinks weg te duwen. */ .v2 .klant-naam { color:var(--text); font-size:13px; font-weight:600; padding:0 12px 0 4px; margin-right:4px; border-right:1px solid var(--panel-border); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width: 720px) { .v2 .klant-naam { max-width:110px; } } .v2 .nav-item { padding:6px 12px; border-radius:6px; color:var(--muted); text-decoration:none; font-size:13px; } .v2 .nav-item:hover { color:var(--text); background:var(--gray-light); } .v2 .nav-item.actief { background:var(--blue-light); color:var(--accent-op-tint); font-weight:600; } /* Het tandwiel erft font-size:13px van .nav-item en is dan nauwelijks te zien. Alleen dit ene item opschalen, niet de nav-items als geheel — die staan op 13px omdat er zes labels naast elkaar moeten passen. De regelhoogte blijft gelijk aan die van de andere knoppen, zodat de balk niet hoger wordt. */ .v2 .nav-tandwiel { font-size:20px; line-height:1; padding:4px 10px; } /* De themaknop deelt de vorm van het tandwiel maar is een