/* ===================================================================== CIVIOS Cyberscan lokale besturen: stylesheet Dit bestand bevat de opmaak. Om de huisstijl aan te passen volstaat deel 1. Deel 2 hoeft normaal niet te veranderen. Deel 3 bevat de layout en componenten en verwijst enkel naar de variabelen hierboven. Niet in dit bestand, en bewust niet aanpasbaar: de zes CyFun®-kleuren, de radar en de voortgangszeshoek. Die staan vast in de code, zodat de CyFun-weergave altijd correct blijft. ===================================================================== */ /* --------------------------------------------------------------------- 1. HUISSTIJL: hier past CIVIOS kleuren en lettertypes aan --------------------------------------------------------------------- */ :root{ /* Lettertypes. Bij een webfont: laad het in de van de HTML en zet de naam hier vooraan, bv. "Poppins", -apple-system, ... */ --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Huisstijl civios.be (zelfde palet als civios-v2.css). */ --brand-ink: #16403D; /* donkere hoofdkleur: balk, vlakken, nummers, faselabels, donkere knoppen */ --brand-ink-2: #1B4D4A; /* tweede tint van de donkere hoofdkleur */ --brand-light: #B2C3B8; /* lichte tint: secundaire tekst op de donkere vlakken */ --brand-accent: #FFDE59; /* accent: primaire knoppen, markeringen */ --brand-accent-ink: #6B5A00; /* leesbare tekstversie van het accent op wit */ --brand-accent-soft: #FFF3C2; /* zachte accenttint: gekozen antwoord, meldingen */ --focus-ring: rgba(255,222,89,.55); /* focusrand bij bediening met het toetsenbord */ --tier-bg: #FFDE59; /* niveaulabel in het rapport ("Basis in opbouw") */ --tier-ink: #16403D; --km-bg: #FFF3C2; /* labeltje "Kern" bij kernmaatregelen */ --radius-s: 6px; --radius-m: 10px; } /* --------------------------------------------------------------------- 2. NEUTRALE KLEUREN EN STATUSKLEUREN --------------------------------------------------------------------- */ :root{ /* Donkere achtergrond op elk scherm (huisstijl civios.be). */ --canvas: #16403D; /* paginaachtergrond: civios donkergroen */ --paper: rgba(255,255,255,.06); /* kaarten en vlakken op de donkere achtergrond */ --line: rgba(255,255,255,.18); /* randen en scheidingslijnen */ --text: #FFFFFF; /* tekst */ --muted: rgba(255,255,255,.74); /* secundaire tekst */ --board-empty: rgba(255,255,255,.05); /* lege cel op het roadmapbord */ --error-on-dark: #FFB8AD; /* foutmeldingen op de donkere achtergrond */ /* Lichte "eilanden" (functiekaarten, roadmaptegels, meldingen), de PDF en de e-mailversie van het rapport gebruiken deze lichte tinten. */ --light-canvas: #EDF2EE; --light-paper: #FFFFFF; --light-line: #DDE6DF; --light-text: #2E3330; --light-muted: #4A544F; --light-board-empty: #FAFAF9; /* Statusvakjes ✓ ± ✕ ?: achtergrond (bg), teken (fg), rand (bd) */ --st-ok-bg: #E4F3EB; --st-ok-fg: #1E8757; --st-ok-bd: #1E8757; --st-part-bg: #FBEEDD; --st-part-fg: #B8680F; --st-part-bd: #D9822B; --st-no-bg: #F8E6E6; --st-no-fg: #C23B3B; --st-no-bd: #C23B3B; --st-idk-bg: #ECEEF1; --st-idk-fg: #6B7280; --st-idk-bd: #9AA1AB; /* Algemene signaalkleuren (meldingen, e-mailstatus) */ --ok: #1E8757; --ok-soft: #E4F3EB; --part: #B8720E; --part-soft: #FBF0DF; --bad: #C23B3B; --bad-soft: #F8E6E6; --idk: #5E6C8C; --idk-soft: #E9ECF3; } /* --------------------------------------------------------------------- 3. LAYOUT EN COMPONENTEN: normaal niet aanpassen --------------------------------------------------------------------- */ *{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; } html,body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.55;} body{min-height:100vh;display:flex;flex-direction:column; padding-bottom:env(safe-area-inset-bottom,0px);} button,input,select{font:inherit;color:inherit;} a{color:var(--brand-ink);} .hidden{display:none !important;} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} :focus-visible{outline:3px solid var(--brand-accent);outline-offset:2px;} /* ---------- balk ---------- */ .topbar{background:var(--brand-ink);color:#fff;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;} .topbar-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;} .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;} .brand svg{height:26px;width:auto;display:block;} .brand img{height:48px;width:auto;display:block;} @media(max-width:560px){ .brand img{height:36px;} } .topbar-tool{font-size:14px;color:rgba(255,255,255,.72);} main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:0 20px 48px;} /* ---------- intro ---------- */ .hero{background:var(--brand-ink);color:#fff;margin:0 -20px;padding:28px 20px 36px;} .hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;} @media(min-width:680px){ .hero-grid{grid-template-columns:1.25fr 1fr;} } .hero h1{font-family:var(--font-display);font-size:clamp(28px,6.4vw,40px);line-height:1.12;letter-spacing:-.015em;margin:0 0 14px;font-weight:750;} .hero p{margin:0;color:rgba(255,255,255,.82);font-size:17px;max-width:34em;} .hero-hex{max-width:260px;justify-self:center;width:100%;} .hero-hex svg{width:100%;height:auto;display:block;} .gets{display:grid;grid-template-columns:1fr;gap:0;margin:28px 0 8px;border-top:1px solid var(--line);} @media(min-width:620px){ .gets{grid-template-columns:repeat(3,1fr);} } .get{padding:14px 0;border-bottom:1px solid var(--line);} @media(min-width:620px){ .get{padding:16px 16px 16px 0;} } .get b{display:block;font-size:15px;} .get span{font-size:14px;color:var(--muted);} .formcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px 20px;margin-top:24px;} .formcard h2{font-size:20px;margin:0 0 4px;} .formcard .sub{color:var(--muted);font-size:15px;margin:0 0 18px;} .field{margin-bottom:14px;} .field label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;} .field .opt-label{font-weight:400;color:var(--muted);} .field input,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:#fff;font-size:16px;} .field input:focus,.field select:focus{border-color:var(--brand-ink);outline:none;box-shadow:0 0 0 3px var(--focus-ring);} .field.error input,.field.error select{border-color:var(--bad);} .field-err{color:var(--bad);font-size:14px;margin-top:4px;display:none;} .field.error .field-err{display:block;} .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;} .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:6px 0 18px;} .consent input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--brand-ink);} .consent.error{color:var(--bad);} .consent + .consent{margin-top:-8px;} .privacy-note{font-size:13px;color:var(--muted);margin:14px 0 0;} /* ---------- knoppen ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:var(--radius-s);border:0;cursor:pointer;font-weight:650;font-size:16px;text-decoration:none;} .btn-primary{background:var(--brand-accent);color:var(--brand-ink);} .btn-primary:hover{filter:brightness(.95);} .btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none;} .btn-dark{background:var(--brand-ink);color:#fff;} .btn-ghost{background:transparent;color:var(--brand-ink);border:1.5px solid var(--line);} .btn-ghost:hover{border-color:var(--brand-ink);} .btn-block{width:100%;} .linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px;} /* ---------- vraagscherm ---------- */ .qhead{padding:22px 0 8px;} .hexprog{display:flex;align-items:center;gap:14px;} .hexprog svg{width:84px;height:84px;flex-shrink:0;display:block;} .hexprog svg path{transition:fill .3s ease, opacity .3s ease;} .hexprog .hp-fn{font-weight:650;font-size:16px;} .hexprog .hp-sub{font-size:14px;color:var(--muted);line-height:1.4;} .flash{margin:14px 0 0;background:var(--brand-accent-soft);border-left:3px solid var(--brand-accent);padding:9px 12px;font-size:14px;animation:flashIn .35s ease;} @keyframes flashIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}} .qmeta{display:flex;justify-content:space-between;align-items:center;margin:18px 0 6px;font-size:14px;color:var(--muted);} .qback{margin-top:18px;} .fn-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text);} .fn-chip::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--fc,var(--brand-accent));} .qtext{font-family:var(--font-display);font-size:clamp(20px,4.8vw,24px);line-height:1.35;font-weight:650;margin:6px 0 10px;letter-spacing:-.005em;} .qhint{font-size:15px;color:var(--muted);margin:0 0 20px;padding-left:12px;border-left:3px solid var(--line);} .answers{display:grid;gap:10px;} .ans{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--paper);cursor:pointer;font-size:16px;} .ans:hover{border-color:var(--brand-ink);} .ans .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;} .ans .ans-sub{display:block;font-size:13px;color:var(--muted);} .ans[aria-pressed="true"]{border-color:var(--brand-ink);background:var(--brand-accent-soft);} .ans[aria-pressed="true"] .dot{border-color:var(--brand-ink);background:radial-gradient(circle,var(--brand-ink) 45%,transparent 50%);} .qnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;} .qnav .btn{flex:1;} .qnav .btn-ghost{flex:0 0 auto;} .qfoot{margin-top:18px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;} .ref{font-variant-numeric:tabular-nums;} /* ---------- rapport ---------- */ .report-head{padding:26px 0 6px;} .report-kicker{font-size:14px;color:var(--muted);margin:0 0 4px;} .report-head h1{font-family:var(--font-display);font-size:clamp(26px,5.6vw,34px);line-height:1.15;margin:0 0 6px;letter-spacing:-.01em;} .report-meta{font-size:14px;color:var(--muted);margin:0;} .mailstatus{margin:16px 0 0;padding:12px 14px;border-radius:var(--radius-s);font-size:14px;background:var(--idk-soft);} .mailstatus.ok{background:var(--ok-soft);} .mailstatus.fail{background:var(--part-soft);} .verdict{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px;background:var(--brand-ink);color:#fff;border-radius:var(--radius-m);padding:22px 20px;} @media(min-width:680px){ .verdict{grid-template-columns:1fr 1.1fr;align-items:center;padding:26px;} } .score-line{display:flex;align-items:baseline;gap:10px;} .score-num{font-family:var(--font-display);font-size:64px;line-height:1;font-weight:800;letter-spacing:-.03em;} .score-num small{font-size:22px;font-weight:600;color:var(--brand-light);} .tier-name{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:4px;background:var(--tier-bg);color:var(--tier-ink);font-weight:700;font-size:15px;} .verdict p{margin:12px 0 0;color:rgba(255,255,255,.85);font-size:15px;} .radar svg{width:100%;height:auto;display:block;max-width:360px;margin:0 auto;} .fnbars{margin-top:22px;display:grid;gap:10px;} .fnbar{display:grid;grid-template-columns:128px 1fr 44px;gap:10px;align-items:center;font-size:14px;} .fnbar .track{height:10px;background:var(--line);border-radius:5px;overflow:hidden;} .fnbar .fill{height:100%;border-radius:5px;} .fnbar .pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;} .facts{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px;} @media(min-width:620px){ .facts{grid-template-columns:1fr 1fr;} } .fact{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px 16px;font-size:15px;} .fact b{font-size:22px;display:block;line-height:1.2;font-family:var(--font-display);} section.rs{margin-top:36px;} section.rs > h2{font-family:var(--font-display);font-size:22px;margin:0 0 4px;letter-spacing:-.005em;} section.rs > .intro{color:var(--muted);margin:0 0 16px;font-size:15px;} .risks{list-style:none;margin:0;padding:0;counter-reset:risk;} .risk{counter-increment:risk;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 16px 16px 58px;margin-bottom:12px;break-inside:avoid;} .risk::before{content:counter(risk);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--brand-ink);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;} .risk h3{font-size:17px;margin:0 0 4px;} .risk .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;} .tag{font-size:12px;padding:2px 8px;border-radius:4px;background:var(--canvas);color:var(--muted);} .tag.km{background:var(--km-bg);color:var(--brand-accent-ink);font-weight:650;} .tag.a0{background:var(--bad-soft);color:var(--bad);} .tag.a1{background:var(--part-soft);color:var(--part);} .tag.a-1{background:var(--idk-soft);color:var(--idk);} .risk p{margin:0 0 8px;font-size:15px;} .risk .first{margin:0;font-size:15px;padding-top:8px;border-top:1px dashed var(--line);} .wins{margin:0;padding:0;list-style:none;} .wins li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;} .wins li::before{content:"";width:18px;height:18px;border:2px solid var(--brand-ink);border-radius:4px;margin-top:2px;} .wins b{display:block;} .phases{position:relative;margin:0;padding:0;list-style:none;} .phase{position:relative;padding:0 0 22px 34px;break-inside:avoid;} .phase::before{content:"";position:absolute;left:9px;top:6px;bottom:0;width:2px;background:var(--line);} .phase:last-child::before{display:none;} .phase .node{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:3px solid var(--brand-ink);} .phase:first-child .node{background:var(--brand-accent);} .phase h3{font-size:17px;margin:0;} .phase .when{font-size:14px;color:var(--muted);margin:0 0 8px;} .phase ul{margin:0;padding-left:18px;font-size:15px;} .phase li{margin-bottom:6px;} .phase li small{color:var(--muted);} .overview{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;} .overview-wrap{overflow-x:auto;} .overview th,.overview td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;} .overview th{font-size:13px;color:var(--muted);font-weight:600;background:var(--canvas);} .overview tr:last-child td{border-bottom:0;} .overview td.ref{white-space:nowrap;color:var(--muted);} .st{display:inline-block;font-size:12px;padding:2px 8px;border-radius:4px;white-space:nowrap;font-weight:600;} .st.a2{background:var(--ok-soft);color:var(--ok);} .st.a1{background:var(--part-soft);color:var(--part);} .st.a0{background:var(--bad-soft);color:var(--bad);} .st.a-1{background:var(--idk-soft);color:var(--idk);} .context{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brand-accent);border-radius:var(--radius-m);padding:18px 18px;font-size:15px;} .context p{margin:0 0 10px;} .context p:last-child{margin:0;} .context .src{font-size:13px;color:var(--muted);} .cta{margin-top:36px;background:var(--brand-ink);color:#fff;border-radius:var(--radius-m);padding:24px 20px;} .cta h2{font-family:var(--font-display);font-size:22px;margin:0 0 8px;} .cta p{color:rgba(255,255,255,.85);margin:0 0 18px;font-size:15px;} .cta .btns{display:flex;flex-wrap:wrap;gap:10px;} .cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35);} .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;} .disclaimer{font-size:13px;color:var(--muted);margin-top:28px;} .restart{margin-top:14px;} footer.site{padding:20px;text-align:center;font-size:13px;color:var(--muted);} @media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} } /* ---------- rapport v2: per functie ---------- */ .fsq{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;flex-shrink:0;vertical-align:0;} .fnbar > span:first-child{display:flex;align-items:center;} .legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px;color:var(--muted);} .legend > span{display:inline-flex;align-items:center;gap:6px;} .sym{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;box-sizing:border-box;border:1.5px solid;border-radius:2px;font-size:14px;line-height:1;font-weight:800;flex-shrink:0;font-family:-apple-system,"Segoe UI",Arial,sans-serif;} .sym.a2{background:var(--st-ok-bg);color:var(--st-ok-fg);border-color:var(--st-ok-bd);} .sym.a1{background:var(--st-part-bg);color:var(--st-part-fg);border-color:var(--st-part-bd);} .sym.a0{background:var(--st-no-bg);color:var(--st-no-fg);border-color:var(--st-no-bd);} .sym.a-1{background:var(--st-idk-bg);color:var(--st-idk-fg);border-color:var(--st-idk-bd);} .top5{list-style:none;margin:0;padding:0;counter-reset:t5;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);} .top5 li{border-bottom:1px solid var(--line);} .top5 li:last-child{border-bottom:0;} .top5 a{display:flex;align-items:center;gap:10px;padding:11px 14px;color:inherit;text-decoration:none;} .top5 a:hover .t5-body b{text-decoration:underline;} .top5 .fsq{margin:0;} .chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin:0 2px;flex-shrink:0;} .pn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand-ink);color:#fff;font-size:12px;font-weight:800;flex-shrink:0;font-variant-numeric:tabular-nums;} .tile .pn,.fc-list .pn,.fc-risk h3 .pn{width:18px;height:18px;font-size:11px;margin-right:6px;vertical-align:1px;} .tile{display:flex;align-items:flex-start;} .tile .pn{margin-top:1px;} .prio-lbl{font-size:12px;font-weight:600;color:var(--muted);margin-left:4px;} .fc-risk{scroll-margin-top:16px;} .fc-risk:target{outline:3px solid var(--brand-ink);outline-offset:2px;} .t5-count{margin:10px 2px 0;font-size:14px;color:var(--muted);} .t5-body{flex:1;min-width:0;} .t5-body small{display:block;font-size:13px;font-weight:600;} .allgood{background:var(--ok-soft);border-radius:var(--radius-m);padding:14px 16px;margin:0;} .board-wrap{overflow-x:auto;} .board{width:100%;min-width:520px;border-collapse:separate;border-spacing:4px;table-layout:fixed;font-size:13px;} .board th{text-align:left;font-weight:650;vertical-align:top;padding:4px;} .board thead th small{display:block;font-weight:400;color:var(--muted);font-size:12px;} .board thead th:first-child,.board tbody th{width:118px;} .board tbody th{display:table-cell;white-space:nowrap;} .board td{vertical-align:top;background:var(--board-empty);border-radius:4px;padding:3px;} .tile{border-left:4px solid;padding:5px 7px;margin-bottom:3px;border-radius:0 3px 3px 0;line-height:1.3;} .tile:last-child{margin-bottom:0;} .fcards{display:grid;gap:14px;} .fcard{background:var(--paper);border-radius:var(--radius-m);overflow:hidden;break-inside:avoid;} .fc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--fc);color:var(--fi);padding:11px 16px;} .fc-name{font-weight:750;font-size:17px;} .fc-name small{font-weight:500;font-size:13px;opacity:.85;margin-left:4px;} .fc-pct{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;} .fc-bar{height:6px;background:var(--fs);} .fc-bar i{display:block;height:100%;background:var(--fd);} .fc-body{padding:14px 16px 16px;} .fc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;} .fc-list li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;} .fc-list li .sym{margin-top:1px;} .fc-list small{display:block;font-size:12px;color:var(--muted);} .fc-risk{margin-top:14px;padding:12px 14px;background:var(--fs);border-radius:var(--radius-s);} .fc-risk h3{font-size:16px;margin:0 0 4px;color:var(--fd);} .fc-risk p{margin:0 0 6px;font-size:15px;} .fc-risk > p:not(.fc-act){margin-bottom:14px;} .fc-act{display:flex;gap:8px;align-items:baseline;font-size:15px;margin:6px 0 0;} .ph{flex-shrink:0;box-sizing:border-box;width:112px;text-align:center;font-size:12px;font-weight:700;padding:3px 6px;border:1.5px solid var(--brand-ink);border-radius:4px;background:var(--brand-ink);color:#fff;white-space:nowrap;} .ph.now{background:#fff;color:var(--brand-ink);border:1.5px solid var(--brand-ink);} .fc-ok{margin:12px 0 0;font-size:15px;color:var(--ok);} .fc-general{margin-top:14px;padding:12px 14px;background:var(--fs);border-radius:var(--radius-s);font-size:15px;} .fc-general > b{display:block;color:var(--fd);font-size:16px;margin-bottom:2px;} .st.a2{background:var(--ok);color:#fff;} .st.a1{background:#E08A1E;color:#2E1800;} .st.a0{background:var(--bad);color:#fff;} .st.a-1{background:#E3E6EA;color:#3F4652;} /* --------------------------------------------------------------------- 4. DONKERE ACHTERGROND: aanvullingen op deel 3 De achtergrond is overal donkergroen. Onderdelen met een lichte CyFun- of statuskleur (functiekaarten, roadmaptegels, meldingen) blijven lichte eilanden: daar worden de lichte tinten opnieuw ingesteld, zodat alle kinderen vanzelf donkere tekst krijgen. --------------------------------------------------------------------- */ a{color:var(--brand-accent);} .topbar{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);} .topbar-tool{font-size:15px;} .fcard,.tile,.mailstatus,.allgood,.print-brand{ --text:var(--light-text); --muted:var(--light-muted); --line:var(--light-line); --paper:var(--light-paper); --board-empty:var(--light-board-empty); color:var(--text); } .fcard{background:var(--light-paper);border-color:transparent;box-shadow:0 10px 30px -18px rgba(0,0,0,.45);} .fcard a{color:var(--brand-ink);} /* intro */ .formcard{border-color:var(--line);} .field input,.field select{background:#FFFFFF;color:var(--light-text);border-color:transparent;} .field input:focus,.field select:focus{border-color:var(--brand-accent);} .field.error input,.field.error select{border-color:var(--error-on-dark);} .field-err,.consent.error{color:var(--error-on-dark);} .consent input{accent-color:var(--brand-accent);} /* knoppen */ .btn-dark{background:rgba(255,255,255,.12);color:#FFFFFF;border:1.5px solid rgba(255,255,255,.3);} .btn-dark:hover{background:rgba(255,255,255,.18);} .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.35);} .btn-ghost:hover{border-color:#FFFFFF;} /* vraagscherm */ .flash{background:rgba(255,222,89,.14);color:var(--text);} .ans{color:var(--text);} .ans:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1);} .ans .dot{border-color:rgba(255,255,255,.4);} .ans[aria-pressed="true"]{border-color:var(--brand-accent);background:rgba(255,222,89,.14);} .ans[aria-pressed="true"] .dot{border-color:var(--brand-accent);background:radial-gradient(circle,var(--brand-accent) 45%,transparent 50%);} /* rapport */ .verdict,.cta{background:var(--brand-ink-2);border:1px solid var(--line);} .pn{background:var(--brand-accent);color:var(--brand-ink);} .top5 a{color:var(--text);} .board thead th,.board tbody th{color:var(--text);} .tag{background:rgba(255,255,255,.1);} .fcard .tag{background:var(--light-canvas);} .context{border-color:var(--line);border-left-color:var(--brand-accent);} .wins li::before{border-color:var(--brand-accent);} .risk::before{background:var(--brand-accent);color:var(--brand-ink);} .phase .node{border-color:var(--brand-accent);background:var(--brand-ink);} /* ---------- uitklapbare vensters in het rapport ---------- */ details.rs-klap{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper);} .legend + details.rs-klap{margin-top:30px;} details.rs-klap > summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none;border-radius:var(--radius-m);} details.rs-klap > summary::-webkit-details-marker,details.fcard > summary::-webkit-details-marker{display:none;} details.rs-klap > summary:hover{background:rgba(255,255,255,.05);} details.rs-klap > summary h2{flex:1;min-width:0;margin:0;font-family:var(--font-display);font-size:20px;line-height:1.3;letter-spacing:-.005em;} .rs-sum{font-size:14px;color:var(--muted);text-align:right;} .klap-pijl{flex-shrink:0;width:10px;height:10px;margin:0 4px 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease,margin .2s ease;} details[open] > summary .klap-pijl{transform:rotate(-135deg);margin:4px 4px 0;} .rs-body{padding:0 18px 20px;} .rs-body > .intro{color:var(--muted);margin:0 0 16px;font-size:15px;} details.fcard > summary{display:block;cursor:pointer;list-style:none;} details.fcard > summary .fc-head{display:flex;} details.fcard > summary:hover .fc-head{filter:brightness(1.05);} details.fcard .fc-bar{display:block;} .fc-right{display:inline-flex;align-items:center;gap:12px;} .fc-right .klap-pijl{color:var(--fi);} .fc-risk.is-doel{outline:3px solid var(--brand-ink);outline-offset:2px;} @media(max-width:560px){ details.rs-klap > summary{flex-wrap:wrap;gap:4px 12px;} details.rs-klap > summary h2{flex-basis:calc(100% - 30px);font-size:18px;} .rs-sum{order:3;text-align:left;flex-basis:100%;} } @media print{ details.rs-klap{border:0;background:none;margin-top:22px;} details.rs-klap > summary{padding:0 0 6px;} .rs-body{padding:0;} .klap-pijl,.rs-sum{display:none !important;} } /* ---------- voortgangsanimatie (zeshoek naar het midden) ---------- */ .hexfx{position:fixed;inset:0;z-index:60;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;} .hexfx-bg{position:absolute;inset:0;background:var(--brand-ink);opacity:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);} .hexfx-stage{position:absolute;} .hexfx-float{width:100%;height:100%;} .hexfx-stage svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 28px rgba(0,0,0,.28));} .hexfx-all,.hexfx-grow,.hexfx-ring,.hexfx-halo{transform-box:view-box;transform-origin:50px 50px;} .hexfx-count{transform-box:fill-box;transform-origin:center;} .hexfx-cap{position:absolute;left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:#fff;opacity:0;pointer-events:none;} .hexfx-cap b{font-family:var(--font-display);font-size:clamp(20px,5vw,26px);line-height:1.2;letter-spacing:-.01em;} .hexfx-cap small{font-size:15px;color:var(--brand-light);} .hexfx-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:rgba(255,255,255,.85);margin-bottom:2px;} .hexfx-chip::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--fc);} .hexfx.is-feest .hexfx-cap b{color:var(--brand-accent);} .hexfx-skip{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));text-align:center;font-size:13px;color:rgba(255,255,255,.62);opacity:0;pointer-events:none;} .hexfx-p{position:absolute;pointer-events:none;clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%);opacity:0;will-change:transform,opacity;} .hexfx-plus{position:absolute;pointer-events:none;font-family:var(--font-display);font-size:24px;font-weight:800;opacity:0;text-shadow:0 2px 0 rgba(0,0,0,.25);-webkit-text-stroke:1px rgba(255,255,255,.55);} @media print{ .hexfx{display:none !important;} } /* ---------- print / PDF ---------- */ @page{size:A4;margin:14mm 14mm 16mm;} @media print{ /* Op papier wit met donkere tekst. */ :root{ --canvas:var(--light-canvas); --paper:var(--light-paper); --line:var(--light-line); --text:var(--light-text); --muted:var(--light-muted); --board-empty:var(--light-board-empty); } a{color:var(--brand-ink);} .btn-ghost{color:var(--brand-ink);border-color:var(--light-line);} .verdict{border:0;} html,body{background:#fff;font-size:11pt;} .no-print,.topbar,footer.site,.mailstatus{display:none !important;} main{max-width:none;padding:0;} .print-brand{display:flex !important;} .print-only{display:block !important;} .chev{display:none !important;} .pn{-webkit-print-color-adjust:exact;print-color-adjust:exact;} .verdict,.cta,.risk::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;} .verdict{grid-template-columns:1fr 1fr;} .fnbar .fill,.tag,.st,.tier-name,.phase .node{-webkit-print-color-adjust:exact;print-color-adjust:exact;} section.rs{margin-top:22px;} .risk,.phase,.fact,.context,.fcard,.top5 li{break-inside:avoid;} .fc-head,.fc-bar,.fc-bar i,.fc-risk,.fc-general,.tile,.board td,.fsq,.ph,.fnbar .fill,.sym{-webkit-print-color-adjust:exact;print-color-adjust:exact;} .board{min-width:0;} h2{break-after:avoid;} .page-break{break-before:page;} .cta{background:#fff;color:var(--text);border:1.5px solid var(--brand-ink);} .cta p{color:var(--text);} } .print-only{display:none;} .print-brand{display:none;justify-content:space-between;align-items:center;border-bottom:2px solid var(--brand-ink);padding-bottom:8px;margin-bottom:6px;font-size:10pt;color:var(--muted);} .print-brand svg{height:22px;width:auto;} .print-logo{display:inline-flex;align-items:center;background:var(--brand-ink);padding:5px 9px;border-radius:4px;-webkit-print-color-adjust:exact;print-color-adjust:exact;} .print-logo img{height:20px;width:auto;display:block;}