added the website design overview, changed design for the checklists to match

This commit is contained in:
Richard Kranendonk 2026-06-01 19:37:08 +02:00
parent 30dc10ac5e
commit fc53c6e5b4
2 changed files with 659 additions and 20 deletions

View file

@ -0,0 +1,634 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cbw Zorgplicht & Governance Checklist</title>
<style>
@import url('https://api.fontshare.com/v2/css?f[]=gambarino@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fragment+Mono&display=swap');
:root {
--ink: #484a4a; /* $carbon */
--paper: #faf8f4; /* $vanillapaper */
--accent: #3e8ed0; /* $dgtlblue */
--muted: #666666; /* $stone */
--line: #d1d5db; /* $silver */
--check-bg: #e4ede8; /* $seafog */
--check-border: #22c55e; /* feature checkmark green */
--section-bg: #ede8df; /* $biscuit */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.7;
min-height: 100vh;
}
.page {
max-width: 820px;
margin: 0 auto;
padding: 60px 40px 80px;
}
header {
border-bottom: 2px solid var(--ink);
padding-bottom: 32px;
margin-bottom: 48px;
}
.kicker {
font-family: 'Fragment Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
h1 {
font-family: 'Gambarino', serif;
font-size: clamp(28px, 5vw, 42px);
line-height: 1.05em;
font-weight: 400;
letter-spacing: -1px;
-webkit-font-smoothing: antialiased;
margin-bottom: 16px;
}
.subtitle {
font-family: 'Inter', sans-serif;
font-size: 15px;
color: var(--muted);
max-width: 580px;
line-height: 1.2em;
letter-spacing: -0.5px;
}
.subtitle strong {
color: var(--ink);
font-weight: 500;
}
.section-header {
margin: 40px 0 4px;
padding: 14px 0 14px 0;
border-top: 2px solid var(--ink);
display: flex;
align-items: baseline;
gap: 16px;
}
.section-label {
font-family: 'Fragment Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
.section-title {
font-family: 'Gambarino', serif;
font-size: 20px;
font-weight: 400;
color: var(--ink);
}
.section-description {
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
line-height: 1.6;
padding-left: 72px;
}
.checklist {
display: flex;
flex-direction: column;
gap: 0;
}
.item {
border-bottom: 1px solid var(--line);
padding: 32px 0;
display: grid;
grid-template-columns: 48px 1fr;
gap: 0 24px;
}
.item:last-child {
border-bottom: none;
}
.item-left {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4px;
gap: 12px;
}
.checkbox {
width: 24px;
height: 24px;
border: 2px solid var(--ink);
border-radius: 4px;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: all 0.15s;
background: white;
}
.checkbox:hover {
border-color: var(--check-border);
background: var(--check-bg);
}
.checkbox.checked {
background: var(--check-border);
border-color: var(--check-border);
}
.checkbox.checked::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 10px;
height: 6px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg);
}
.article-ref {
font-family: 'Fragment Mono', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.05em;
text-align: center;
line-height: 1.3;
}
.item-header {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.letter-badge {
font-family: 'Gambarino', serif;
font-size: 22px;
color: var(--accent);
line-height: 1;
flex-shrink: 0;
}
.item-title {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
}
.item-description {
font-size: 14px;
color: var(--muted);
margin-bottom: 14px;
line-height: 1.65;
}
.example-block {
background: white;
border-left: 3px solid var(--accent);
padding: 12px 16px;
border-radius: 0 6px 6px 0;
}
.example-label {
font-family: 'Fragment Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.example-text {
font-size: 13px;
color: var(--ink);
line-height: 1.6;
}
.progress-bar {
position: sticky;
top: 0;
z-index: 10;
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: 10px 40px;
display: flex;
align-items: center;
gap: 16px;
font-family: 'Fragment Mono', monospace;
font-size: 12px;
color: var(--muted);
}
.progress-track {
flex: 1;
height: 4px;
background: var(--line);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--check-border);
border-radius: 2px;
width: 0%;
transition: width 0.3s ease;
}
.progress-count {
white-space: nowrap;
color: var(--ink);
font-weight: 500;
}
footer {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: 'Fragment Mono', monospace;
font-size: 11px;
color: var(--muted);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 600px) {
.page { padding: 40px 20px 60px; }
.progress-bar { padding: 10px 20px; }
.item { grid-template-columns: 36px 1fr; gap: 0 16px; }
.section-description { padding-left: 0; }
}
</style>
</head>
<body>
<div class="progress-bar">
<span>Voortgang</span>
<div class="progress-track">
<div class="progress-fill" id="progressFill"></div>
</div>
<span class="progress-count" id="progressCount">0 / 14</span>
</div>
<div class="page">
<header>
<div class="kicker">Wetsvoorstel Cyberbeveiligingswet · Artikelen 21 &amp; 24</div>
<h1>Cbw Zorgplicht &amp; Governance<br>Zelfevaluatie Checklist</h1>
<p class="subtitle">
De tien zorgplichtmaatregelen (art. 21) en de vier governanceverplichtingen voor bestuurders (art. 24) uit de Cyberbeveiligingswet.
Vink een punt aan wanneer u het <strong>aantoonbaar</strong> op orde heeft — gedocumenteerd, geïmplementeerd en periodiek getoetst.
</p>
</header>
<!-- SECTION 1: ARTIKEL 21 ZORGPLICHT -->
<div class="section-header">
<span class="section-label">Artikel 21</span>
<span class="section-title">Zorgplicht — tien minimummaatregelen</span>
</div>
<p class="section-description">
Essentiële en belangrijke entiteiten nemen passende en evenredige technische, operationele en organisatorische maatregelen om risico's voor netwerk- en informatiesystemen te beheersen en incidenten te voorkomen of de gevolgen ervan te beperken.
</p>
<div class="checklist">
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(a)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">a</span>
<span class="item-title">Beleid inzake risicoanalyse en beveiliging van informatiesystemen</span>
</div>
<p class="item-description">
De organisatie heeft een gedocumenteerd beleid voor het identificeren, beoordelen en beheersen van risico's voor netwerk- en informatiesystemen. Het beleid is goedgekeurd door het bestuur, gebaseerd op een actuele risicoanalyse en wordt periodiek herzien — in ieder geval bij ingrijpende wijzigingen in systemen, processen of leveranciers.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Jaarlijks wordt een risicoanalyse uitgevoerd met afdelingshoofden van HR, inkoop, IT en operaties. De uitkomst wordt vastgelegd in een risicoregister en vormt de basis voor het informatiebeveiligingsbeleid, dat door de directie wordt goedgekeurd en ondertekend.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(b)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">b</span>
<span class="item-title">Incidentenbehandeling</span>
</div>
<p class="item-description">
Er zijn gedocumenteerde procedures voor het detecteren, intern melden, afhandelen en herstellen van beveiligingsincidenten. Medewerkers weten wat een incident is, wie ze moeten informeren en welke stappen ze moeten zetten. De procedures dekken ook de wettelijke meldplicht: vroegtijdige waarschuwing binnen 24 uur en melding binnen 72 uur bij significante incidenten.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Een eenpagina-procedure definieert vier ernst-niveaus. Bij significante incidenten is de verantwoordelijke persoon benoemd, geldt een interne escalatietermijn van 24 uur en wordt verwezen naar de wettelijke meldplicht bij het CSIRT. De procedure wordt jaarlijks getoetst via een tabletop-oefening.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(c)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">c</span>
<span class="item-title">Bedrijfscontinuïteit, back-upbeheer en crisisbeheer</span>
</div>
<p class="item-description">
Het bedrijfscontinuïteitsplan bevat expliciete cyberscenario's, beschrijft de hersteldoelstellingen voor kritieke systemen (maximale uitvalduur en maximaal gegevensverlies), legt het back-upregime vast en wijst verantwoordelijken aan voor crisisbeheer. Het plan is actueel en periodiek getest.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Het BCP beschrijft een ransomwarescenario: systemen zijn 48 uur niet beschikbaar. Het plan beschrijft welke processen handmatig doorlopen kunnen worden, wie klanten informeert en hoe herstel vanuit back-ups verloopt. Back-ups worden offsite opgeslagen, kwartaalgewijs getest en de maximale hersteltijd is vastgelegd per systeem.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(d)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">d</span>
<span class="item-title">Beveiliging van de toeleveringsketen</span>
</div>
<p class="item-description">
De organisatie beoordeelt de cyberbeveiligingspraktijken van directe leveranciers en dienstverleners. Per kritieke leverancier is het risicoprofiel in kaart gebracht: welke toegang heeft de leverancier tot systemen of data, hoe afhankelijk is de organisatie van deze partij, en wat is contractueel vastgelegd over beveiliging? De eisen die de organisatie aan zichzelf stelt, worden ook aan leveranciers gesteld.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Een leveranciersregister bevat een risicoclassificatie per leverancier. Kritieke IT-leveranciers vullen jaarlijks een beveiligingsvragenlijst in. Contracten bevatten minimale beveiligingseisen en een meldplicht van 24 uur bij incidenten die de systemen van de organisatie kunnen raken.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(e)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">e</span>
<span class="item-title">Beveiliging bij verwerving, ontwikkeling en onderhoud van systemen</span>
</div>
<p class="item-description">
Beveiligingseisen zijn ingebouwd in de processen voor inkoop, ontwikkeling en onderhoud van netwerk- en informatiesystemen — niet achteraf toegevoegd. Er is een proces voor het identificeren en verhelpen van kwetsbaarheden in gebruikte software en hardware, inclusief een beleid voor de gecoördineerde bekendmaking van kwetsbaarheden.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Bij aanschaf van nieuwe software doorloopt het IT-team een beveiligingschecklist. Leveranciers zijn verplicht patchplanning te verstrekken voor bekende kwetsbaarheden. Kritieke patches worden binnen 72 uur toegepast en openstaande kwetsbaarheden worden bijgehouden totdat ze zijn opgelost.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(f)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">f</span>
<span class="item-title">Beoordeling van de effectiviteit van maatregelen</span>
</div>
<p class="item-description">
Er is een gedocumenteerd proces om periodiek te toetsen of de beveiligingsmaatregelen daadwerkelijk werken. Dit is geen eenmalige exercitie maar een terugkerende beoordelingscyclus (PDCA) die bevindingen, besluiten en bewijsmateriaal oplevert. Het doel is niet het afvinken van een lijst, maar het aantoonbaar verbeteren van de beveiliging.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Een jaarlijkse interne audit toetst een selectie van beveiligingsmaatregelen aan het risicoregister. Bevindingen worden met een verbeterplan aan de directie gerapporteerd. Resultaten van voorgaande jaren worden vergeleken om voortgang inzichtelijk te maken.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(g)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">g</span>
<span class="item-title">Cyberhygiëne en opleiding op het gebied van cyberbeveiliging</span>
</div>
<p class="item-description">
Alle medewerkers zijn getraind in basispraktijken op het gebied van cyberbeveiliging die relevant zijn voor hun functie. Training is terugkerend, niet eenmalig bij indiensttreding. De organisatie kan aantonen dat trainingen hebben plaatsgevonden en actuele dreigingen hebben behandeld. Er bestaat een cultuur waarin medewerkers verdachte situaties veilig kunnen melden.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Nieuwe medewerkers ronden binnen twee weken een security awareness-module af. Alle medewerkers ontvangen jaarlijks een opfriscursus over phishing, wachtwoordgebruik en meldprocedures. Deelname wordt geregistreerd. Tweemaal per jaar worden phishing-simulaties uitgevoerd om bewustzijn in de praktijk te toetsen.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(h)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">h</span>
<span class="item-title">Cryptografie en encryptiebeleid</span>
</div>
<p class="item-description">
Er is een gedocumenteerd beleid voor het gebruik van cryptografie, dat vastlegt wanneer en hoe encryptie wordt toegepast op data in rust en data in transit. Het beleid specificeert goedgekeurde algoritmen en procedures voor sleutelbeheer, en wordt herzien bij veranderingen in technologie of dreigingslandschap.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Het beleid schrijft voor dat vertrouwelijke data in rust wordt versleuteld met AES-256 en dat alle externe gegevensoverdracht plaatsvindt via TLS 1.2 of hoger. Laptops zijn standaard versleuteld. Encryptiesleutels worden centraal beheerd met beperkte toegang voor bevoegde medewerkers.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(i)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">i</span>
<span class="item-title">Beveiligingsaspecten personeel, toegangsbeleid en beheer van assets</span>
</div>
<p class="item-description">
Toegangsrechten worden verleend op basis van noodzaak en regelmatig beoordeeld. In- en uitdiensttreding en functieverandering zijn onderworpen aan een formeel proces dat tijdige intrekking van toegang omvat. De organisatie beschikt over een actueel overzicht van informatie-assets en weet wie verantwoordelijk is voor elk onderdeel.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">HR informeert IT op de laatste werkdag van een medewerker. De IT-checklist voor uitdiensttreding omvat het intrekken van alle accounts, het retourneren van apparatuur en een kort overdrachtsoverleg over gebruikte tools. Toegangsrechten worden per afdeling halfjaarlijks beoordeeld. Een assetregister vermeldt systemen, dataclassificaties en eigenaren.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 21<br>lid 3(j)</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">j</span>
<span class="item-title">Multifactorauthenticatie en beveiligde communicatie</span>
</div>
<p class="item-description">
Waar passend is multifactorauthenticatie (MFA) ingericht voor toegang tot systemen en data — in het bijzonder voor toegang op afstand, beheerdersaccounts en kritieke toepassingen. Gevoelige interne communicatie verloopt via beveiligde kanalen. Noodcommunicatiesystemen zijn gedocumenteerd en getest.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">MFA is verplicht voor alle VPN-verbindingen, alle cloudtoepassingen en alle accounts met beheerdersrechten. Een beleid beschrijft welke communicatiekanalen zijn goedgekeurd voor vertrouwelijke informatie. Bij systeemuitval bestaat een offline contactenlijst en noodprocedure voor crisiscommunicatie.</p>
</div>
</div>
</div>
<!-- SECTION 2: ARTIKEL 24 GOVERNANCE -->
<div class="section-header" style="margin-top: 16px;">
<span class="section-label">Artikel 24</span>
<span class="section-title">Governance — bestuurlijke verplichtingen</span>
</div>
<p class="section-description" style="margin-bottom: 24px;">
De maatregelen uit artikel 21 behoeven de goedkeuring van het bestuur. Ieder bestuurslid is persoonlijk verplicht tot aantoonbare kennis van cyberbeveiligingsrisico's — ongeacht of uitvoering is gedelegeerd.
</p>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 24<br>lid 1</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">1</span>
<span class="item-title">Bestuurlijke goedkeuring van beveiligingsmaatregelen</span>
</div>
<p class="item-description">
De maatregelen uit de zorgplicht (artikel 21) zijn formeel goedgekeurd door het bestuur. Dit is niet een eenmalige handeling: het bestuur keurt ook wijzigingen in het beleid goed en is aantoonbaar betrokken bij de keuzes die op hoofdlijnen worden gemaakt over informatiebeveiliging.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Het informatiebeveiligingsbeleid staat jaarlijks op de agenda van de directievergadering. Besluiten over de invulling van de zorgplicht — welke maatregelen wel en niet worden genomen en waarom — zijn vastgelegd in besluitenlijsten of boardverslagen.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 24<br>lid 2</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">2</span>
<span class="item-title">Kennis en vaardigheden van ieder bestuurslid</span>
</div>
<p class="item-description">
Ieder bestuurslid beschikt over voldoende kennis en vaardigheden om: risico's voor netwerk- en informatiesystemen te kunnen identificeren, risicobeheersmaatregelen op het gebied van cyberbeveiliging te kunnen beoordelen, en de gevolgen van risico's en maatregelen voor de dienstverlening te kunnen beoordelen. Dit vereist geen technische expertise, maar wel bestuurlijk inzicht in cyberbeveiligingsrisico's.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Elk bestuurslid kan het verschil uitleggen tussen een risico, een dreiging en een maatregel. Ze kunnen op strategisch niveau het gesprek voeren over de beveiliging van de organisatie, vragen stellen over de risicoanalyse en beoordelen of voorgestelde maatregelen proportioneel zijn.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 24<br>lid 3 &amp; 5</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">3</span>
<span class="item-title">Aantoonbare kennis binnen twee jaar — certificaat vereist</span>
</div>
<p class="item-description">
Ieder bestuurslid voldoet binnen twee jaar na inwerkingtreding van de wet — of binnen twee jaar na benoeming als bestuurslid — aan de kenniseis uit lid 2. Als bewijs bezit ieder bestuurslid een certificaat waaruit deelname blijkt aan een training die de wettelijke leerdoelen behandelt. De exacte eisen voor die training worden nader uitgewerkt in het Cyberbeveiligingsbesluit.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Alle bestuursleden hebben een training gevolgd die de wettelijke leerdoelen dekt: het herkennen van cyberrisico's, het beoordelen van beheersmaatregelen en de bestuurlijke verantwoordelijkheid onder de Cbw. Van iedere training is een certificaat of schriftelijk bewijs van deelname aanwezig in het dossier van het bestuurslid.</p>
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<div class="checkbox" onclick="toggle(this)"></div>
<span class="article-ref">Art. 24<br>lid 4</span>
</div>
<div class="item-right">
<div class="item-header">
<span class="letter-badge">4</span>
<span class="item-title">Kennis aantoonbaar actueel houden</span>
</div>
<p class="item-description">
Ieder bestuurslid houdt de kennis en vaardigheden uit lid 2 aantoonbaar actueel. De wet stelt geen vaste herhalingstermijn vast, maar vereist dat de kennis meegaat met de ontwikkeling van dreigingen, technologie en wetgeving. Dit veronderstelt een structurele aanpak, geen incidentele bijscholing.
</p>
<div class="example-block">
<div class="example-label">Voorbeeld</div>
<p class="example-text">Bestuursleden ontvangen jaarlijks een bijscholing of update over relevante ontwikkelingen in cyberdreigingen en wetgeving. Deelname wordt gedocumenteerd. Relevante ontwikkelingen — nieuwe dreigingen, incidenten in de sector, wijzigingen in wet- en regelgeving — worden periodiek geagendeerd in de directievergadering.</p>
</div>
</div>
</div>
</div>
<footer>
<span>Wetsvoorstel Cyberbeveiligingswet · Kamerstuk 36 764 · Art. 21 &amp; 24</span>
<span>Vink aan wanneer aantoonbaar gedocumenteerd, geïmplementeerd en getoetst</span>
</footer>
</div>
<script>
function toggle(el) {
el.classList.toggle('checked');
updateProgress();
}
function updateProgress() {
const total = document.querySelectorAll('.checkbox').length;
const checked = document.querySelectorAll('.checkbox.checked').length;
document.getElementById('progressFill').style.width = (checked / total * 100) + '%';
document.getElementById('progressCount').textContent = checked + ' / ' + total;
}
</script>
</body>
</html>

View file

@ -5,16 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NIS2 Article 21 Checklist</title> <title>NIS2 Article 21 Checklist</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=gambarino@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fragment+Mono&display=swap');
:root { :root {
--ink: #1a1a2e; --ink: #484a4a; /* $carbon */
--paper: #f5f0e8; --paper: #faf8f4; /* $vanillapaper */
--accent: #c84b31; --accent: #3e8ed0; /* $dgtlblue */
--muted: #6b6560; --muted: #666666; /* $stone */
--line: #d4cfc7; --line: #d1d5db; /* $silver */
--check-bg: #eef7f0; --check-bg: #e4ede8; /* $seafog */
--check-border: #2d7a4f; --check-border: #22c55e; /* feature checkmark green */
} }
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
@ -22,8 +23,8 @@
body { body {
background: var(--paper); background: var(--paper);
color: var(--ink); color: var(--ink);
font-family: 'DM Sans', sans-serif; font-family: 'Inter', sans-serif;
font-weight: 300; font-weight: 400;
line-height: 1.7; line-height: 1.7;
min-height: 100vh; min-height: 100vh;
} }
@ -41,7 +42,7 @@
} }
.kicker { .kicker {
font-family: 'DM Mono', monospace; font-family: 'Fragment Mono', monospace;
font-size: 11px; font-size: 11px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
@ -50,18 +51,22 @@
} }
h1 { h1 {
font-family: 'DM Serif Display', serif; font-family: 'Gambarino', serif;
font-size: clamp(28px, 5vw, 42px); font-size: clamp(28px, 5vw, 42px);
line-height: 1.15; line-height: 1.05em;
font-weight: 400; font-weight: 400;
letter-spacing: -1px;
-webkit-font-smoothing: antialiased;
margin-bottom: 16px; margin-bottom: 16px;
} }
.subtitle { .subtitle {
font-family: 'Inter', sans-serif;
font-size: 15px; font-size: 15px;
color: var(--muted); color: var(--muted);
max-width: 580px; max-width: 580px;
line-height: 1.6; line-height: 1.2em;
letter-spacing: -0.5px;
} }
.subtitle strong { .subtitle strong {
@ -131,7 +136,7 @@
} }
.article-ref { .article-ref {
font-family: 'DM Mono', monospace; font-family: 'Fragment Mono', monospace;
font-size: 10px; font-size: 10px;
color: var(--muted); color: var(--muted);
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -150,7 +155,7 @@
} }
.letter-badge { .letter-badge {
font-family: 'DM Serif Display', serif; font-family: 'Gambarino', serif;
font-size: 22px; font-size: 22px;
color: var(--accent); color: var(--accent);
line-height: 1; line-height: 1;
@ -158,7 +163,7 @@
} }
.item-title { .item-title {
font-family: 'DM Sans', sans-serif; font-family: 'Inter', sans-serif;
font-size: 17px; font-size: 17px;
font-weight: 500; font-weight: 500;
color: var(--ink); color: var(--ink);
@ -180,7 +185,7 @@
} }
.example-label { .example-label {
font-family: 'DM Mono', monospace; font-family: 'Fragment Mono', monospace;
font-size: 10px; font-size: 10px;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
@ -204,7 +209,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
font-family: 'DM Mono', monospace; font-family: 'Fragment Mono', monospace;
font-size: 12px; font-size: 12px;
color: var(--muted); color: var(--muted);
} }
@ -235,7 +240,7 @@
margin-top: 48px; margin-top: 48px;
padding-top: 24px; padding-top: 24px;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
font-family: 'DM Mono', monospace; font-family: 'Fragment Mono', monospace;
font-size: 11px; font-size: 11px;
color: var(--muted); color: var(--muted);
display: flex; display: flex;