/* Cascadelagen — volgorde en toelichting: bovenaan site.css + Docs/ui-design.md.
Staat in elk stylesheet: geen bestand mag erop rekenen dat een ander vóór hem laadt. */
@layer base, shell, components, page, a11y;
/* ==========================================================================
identity.css — Identity/Account chrome (login, registratie, wachtwoord,
e-mailbevestiging, tweestapsverificatie, persoonsgegevens).
--------------------------------------------------------------------------
Deze pagina's draaien op de PUBLIEKE layout (_Layout), niet op de app-shell:
een uitgelogde bezoeker heeft geen sidebar, en een ingelogde gebruiker die
zijn account beheert stapt bewust even uit zijn omgeving (de header-knop
"Naar mijn omgeving" brengt hem terug). Daarom een eigen, op zichzelf staand
grammatica-bestand in plaats van de co-*-componenten (die laden hier niet).
Alleen site.css (laag base) laadt hiernaast, dus alle tokens komen daar
vandaan. Nieuwe klassenamen (auth-*, account-*) zodat geen enkele selector
dubbel staat met site.css — zie CssDuplicateSelectorArchitectureTests.
========================================================================== */
@layer page {
/* ------------------------------------------------------------------------
Gedeeld: het gecentreerde vlak waarin een auth-kaart of het
accountpaneel staat. Vult de publieke main en centreert verticaal zolang
er ruimte is; bij lange formulieren schuift het gewoon door.
------------------------------------------------------------------------ */
.auth-shell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--nav-height) - 220px);
padding: var(--spacing-2xl) var(--spacing-lg);
}
/* ========================================================================
Auth-kaart — uitgelogde pagina's (login, registratie, herstel, bevestig)
======================================================================== */
.auth-card {
width: 100%;
max-width: 440px;
background: var(--surface-elevated);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: var(--spacing-2xl);
}
/* Registratie heeft twee kolommen naam + wachtwoordsterkte: iets breder. */
.auth-card--wide {
max-width: 520px;
}
.auth-card__head {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.auth-card__title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--brand-dark);
margin: 0 0 var(--spacing-sm);
}
.auth-card__subtitle {
color: var(--fg-3);
font-size: var(--font-size-base);
margin: 0;
}
.auth-card__body {
margin: 0;
}
/* Statuspictogram bovenaan bevestigingspagina's — een gekleurde schijf met
een inline-SVG erin. Toon via modifier; standaard is merkblauw. */
.auth-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--spacing-lg);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--brand-accent-light);
color: var(--brand-accent);
}
/* Drie toestanden, en --warning blijft staan ook al rendert geen enkele view hem
vandaag: een halve reeks is een gat, geen opruiming. De volgende Identity-pagina
die "let op" moet zeggen hoort niet te hoeven kiezen tussen groen en rood. */
.auth-icon--success { background: var(--success-light); color: var(--success-fg); }
.auth-icon--warning { background: var(--warning-light); color: var(--warning-fg); }
.auth-icon--danger { background: var(--error-light); color: var(--error-fg); }
/* Volledige-breedte knoprij onder een formulier; knoppen stapelen. */
.auth-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.auth-actions .btn {
width: 100%;
}
/* "Wachtwoord vergeten?" rechts onder het wachtwoordveld. */
.auth-forgot {
display: block;
text-align: right;
margin-top: var(--spacing-xs);
font-size: var(--font-size-sm);
}
/* Voettekst met wisselverwijzing (nog geen account? / terug naar inloggen). */
.auth-card__foot {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--border-1);
text-align: center;
color: var(--fg-3);
font-size: var(--font-size-sm);
}
.auth-card__foot a {
font-weight: 600;
}
/* Zacht toelichtingsvlak binnen een kaart (tips, veiligheidsnotitie).
Neutraler dan .alert, dat voor echte meldingen is. */
.auth-note {
background: var(--surface-secondary);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
padding: var(--spacing-md);
margin-top: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--fg-2);
}
.auth-note--warning { background: var(--warning-light); border-color: var(--warning); }
.auth-note__title {
margin: 0 0 var(--spacing-xs);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--fg-1);
}
.auth-note ul {
margin: 0;
padding-left: var(--spacing-lg);
}
.auth-note li + li {
margin-top: var(--spacing-xxs);
}
/* Wachtwoordsterkte — gevoed door wwwroot/js/identity.js. Vijf niveaus;
de kleur zet het script inline (data-driven), dit is de rustbalk. */
.auth-strength {
margin-top: var(--spacing-sm);
}
.auth-strength__bar {
height: 4px;
background: var(--border-1);
border-radius: var(--radius-full);
overflow: hidden;
}
.auth-strength__fill {
height: 100%;
width: 0;
background: var(--brand-accent);
transition: width var(--dur-page) var(--ease-standard),
background var(--dur-page) var(--ease-standard);
}
.auth-strength__text {
display: block;
margin-top: var(--spacing-xs);
font-size: var(--font-size-xs);
color: var(--fg-3);
}
/* ========================================================================
Account-instellingen — ingelogde gebruiker beheert zijn eigen account.
Twee kolommen: submenu links, paneel rechts. Op smal scherm klapt het
submenu om naar een horizontale tabstrook boven het paneel.
======================================================================== */
.account-layout {
width: 100%;
max-width: 920px;
margin: var(--spacing-2xl) auto;
padding: 0 var(--spacing-lg);
display: grid;
/* minmax(0, 1fr): a bare 1fr can't shrink below its content's min-content, so a
non-wrapping nav row or a long e-mail would blow the column past the viewport
(and body's overflow-x: clip then hides the right side). minmax(0, …) lets it shrink. */
grid-template-columns: 232px minmax(0, 1fr);
gap: var(--spacing-lg);
align-items: start;
}
.account-nav {
min-width: 0;
background: var(--surface-elevated);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--spacing-sm);
position: sticky;
top: var(--spacing-lg);
}
.account-nav__title {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--fg-3);
padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs);
}
.account-nav__list {
display: flex;
flex-direction: column;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.account-nav__item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
border-left: 3px solid transparent;
color: var(--fg-2);
font-size: var(--font-size-sm);
font-weight: 500;
text-decoration: none;
transition: background var(--dur-micro) var(--ease-standard),
color var(--dur-micro) var(--ease-standard);
}
.account-nav__item:hover {
background: var(--surface-secondary);
color: var(--fg-1);
text-decoration: none;
}
.account-nav__item.is-active {
background: var(--accent-soft);
border-left-color: var(--brand-accent);
color: var(--brand-dark);
font-weight: 600;
}
.account-nav__item svg {
flex-shrink: 0;
}
.account-panel {
background: var(--surface-elevated);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--spacing-xl);
}
.account-panel__head {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--border-1);
}
.account-panel__title {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--brand-dark);
margin: 0;
}
.account-panel__subtitle {
margin: var(--spacing-xs) 0 0;
font-size: var(--font-size-sm);
color: var(--fg-3);
}
.account-panel__foot {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--border-1);
}
/* A divided sub-section within a panel (e.g. "Account verwijderen" under the
data download, or the recovery-code block under the 2FA setup). */
.account-subsection {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--border-1);
}
.account-subsection__title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--brand-dark);
margin: 0 0 var(--spacing-sm);
}
/* Alleen-lezen label/waarde-rijen (profieloverzicht, persoonsgegevens).
Drie vakken: label | waarde | aside. Die derde is optioneel — een badge of
een "Wijzigen"-link — en hoort NIET in de waarde zelf: op een telefoon
staat de waarde op een eigen regel onder het label, en dan moet de badge
mee omhoog naar de labelregel in plaats van het e-mailadres te verdringen.
Daarom expliciete grid-areas: welke rij welke vorm krijgt, staat hier en
niet in de auto-plaatsing. :has() schakelt de derde kolom alleen in waar
er ook echt een aside staat, zodat een gewone rij geen loze kolomruimte
aan zijn rechterkant houdt. */
.account-deflist {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.account-deflist__row {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
grid-template-areas: "label value";
gap: var(--spacing-md);
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--border-1);
font-size: var(--font-size-sm);
}
.account-deflist__row:has(.account-deflist__aside) {
grid-template-columns: 160px minmax(0, 1fr) auto;
grid-template-areas: "label value aside";
}
.account-deflist__row:last-child {
border-bottom: none;
}
.account-deflist__label {
grid-area: label;
color: var(--fg-3);
}
.account-deflist__value {
grid-area: value;
color: var(--fg-1);
font-weight: 500;
overflow-wrap: anywhere;
}
.account-deflist__value.is-empty {
color: var(--fg-4);
font-weight: 400;
font-style: italic;
}
.account-deflist__aside {
grid-area: aside;
display: flex;
align-items: center;
gap: var(--spacing-sm);
justify-self: end;
}
/* ========================================================================
Tweestapsverificatie (TOTP) — statuskop, sleutel, QR en herstelcodes.
======================================================================== */
.twofa-status {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
border-radius: var(--radius-md);
background: var(--surface-secondary);
border: 1px solid var(--border-1);
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--fg-2);
}
.twofa-status__text strong {
display: block;
color: var(--fg-1);
}
/* Genummerde uitlegstappen bij het instellen van de authenticator-app. */
.twofa-steps {
counter-reset: twofa;
list-style: none;
margin: 0 0 var(--spacing-lg);
padding: 0;
}
.twofa-steps > li {
position: relative;
padding-left: var(--spacing-2xl);
margin-bottom: var(--spacing-lg);
color: var(--fg-2);
font-size: var(--font-size-sm);
}
.twofa-steps > li::before {
counter-increment: twofa;
content: counter(twofa);
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--brand-dark);
color: var(--text-light);
font-weight: 600;
font-size: var(--font-size-xs);
}
/* De handmatige sleutel met zijn kopieerknop. Op een telefoon is dit de
hoofdweg en niet de QR-code: wie tweestapsverificatie op zijn telefoon
instelt, kan de code op datzelfde scherm niet scannen. De rij wikkelt, dus
de knop zakt onder de sleutel in plaats van hem samen te drukken. */
.twofa-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.authkey {
flex: 1 1 200px;
display: inline-block;
font-family: var(--font-mono);
font-size: var(--font-size-base);
letter-spacing: 0.08em;
background: var(--surface-secondary);
border: 1px solid var(--border-2);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--fg-1);
word-break: break-all;
}
/* Deep link naar de authenticator-app met de sleutel er al in (otpauth://).
Alleen zinvol op het apparaat waar die app staat, dus standaard verborgen
en pas zichtbaar in het smalle blok hieronder — op een desktop zou de link
niets doen en dat is erger dan geen link. */
.twofa-applink {
display: none;
margin-top: var(--spacing-sm);
}
/* QR-container: qr.js schrijft hier een ![]()
/