/* login-2026.css — de uitgelogde toegangsschermen, redesign 2026-07-29.
*
* Gebruikt door: login.php, wachtwoord-vergeten.php.
* De oude styles-login.css en styles-login-custom.php blijven bestaan voor de 6 uitgelogde
* pagina's die nog NIET om zijn (index, registreren, login-2fa, invite, invite-accept, start)
* — raak die niet aan vanuit hier.
*
* Merkkleur: dit bestand bevat GEEN PHP. De omgevings-kleuren komen als inline custom properties
* op binnen (login.php), zodat dit een statisch, cachebaar CSS-bestand blijft:
* --login-primary, --login-primary-dark, --login-primary-rgb
* De waarden hieronder zijn de 4planning-huisstijl als fallback.
*/
:root {
--login-primary: #EE3A4E;
--login-primary-dark: #D4192E;
--login-primary-light: #F04E60;
/* Tekstkleur OP de merkkleur; de pagina's zetten 'm om naar donker als wit onleesbaar
zou worden op een lichte merkkleur (bv. een omgeving met #ffdbdb). */
--login-primary-on: #ffffff;
--login-primary-rgb: 238, 58, 78;
--login-primary-soft: #FDECEE;
--login-titel: #1F2430;
--login-tekst: #6B7280;
--login-placeholder: #9CA3AF;
--login-lijn: #E5E7EB;
--login-rand: #E9E9EE;
--login-radius-sheet: 32px;
--login-radius-veld: 14px;
--login-radius-knop: 16px;
/* GEEN safe-area-aliassen hier. Er stonden --login-sa-top/-bottom, gedefinieerd als
var(--sa-top, env(...)) — en dat werkte op Android aantoonbaar NIET. Reden:
var()-substitutie in een custom property wordt opgelost op het element van de
DECLARATIE, hier dus :root = . De shells zetten --sa-* inline op ,
een kind, dus zag die waarde nooit en de env()-fallback won — die is 0px
op de Android WebView. Gevolg: de rode kop had nul statusbalk-clearance.
De pagina gebruikt nu rechtstreeks var(--sa-t)/var(--sa-b) uit safeAreaVarsStyle()
(functions/brand_css_vars.php), die WEL op html én body gedeclareerd staan.
Zie docs/plans/safe-area-contract-2026-08-01.md */
}
@supports (color: color-mix(in srgb, red 10%, white)) {
:root {
--login-primary-soft: color-mix(in srgb, var(--login-primary) 9%, #fff);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
/* Hoort BIJ de `height: auto` op body.login-body hieronder — de body alleen is niet genoeg.
De body heeft geen eigen achtergrond in de schilder-zin: omdat zelf geen background
heeft, PROPAGEERT de browser die van de body naar het canvas, en dan gelden die waarden
volgens de spec "alsof ze op het root-element stonden". Het positioneringsvlak van het
verloop is daarmee de box van — niet die van de body. Zolang SB Admin
(styles-we4.php / styles.php) `html { height: 100% }` opdrukt, is dat vlak dus exact één
schermhoogte, en op een langere pagina houdt het verloop daaronder op: daar zie je alleen
nog de `background-color` (het LICHTE beginpunt) — precies de lichtere band onderaan.
Deze regel laat meegroeien met de inhoud, zodat het verloop de hele pagina dekt.
Zelfde specificiteit als de SB Admin-regel, dus dit werkt puur omdat login-2026.css ALS
LAATSTE geladen wordt (zie de -volgorde in login.php) — verplaats 'm niet naar voren. */
html {
height: auto;
min-height: 100%;
}
body.login-body {
/* MOET blijven staan. SB Admin zet `html, body { height: 100% }` (styles-we4.php ~17507,
styles.php ~20269) en die stylesheets laden VÓÓR deze — dus zonder deze regel is de body
KLEMGEZET op exact de viewporthoogte en kan hij niet meegroeien met een kaart die hoger
is dan het scherm (login.php wel, het kortere wachtwoord-vergeten.php niet). Dat is de
gedeelde oorzaak van twee klachten die los van elkaar leken:
1. "geen ruimte onder de kaart" — de padding-bottom hieronder zit BINNEN die vaste
box, dus de overlopende kaart schuift er dwars doorheen en de pagina eindigt
precies op de onderrand van de kaart;
2. "andere kleur onderaan / bij doorscrollen" — het verloop hieronder vult de body-box
(= viewporthoogte) en TEGELT daarna verder (background-repeat is standaard
`repeat`), dus op de body-onderrand springt de kleur van het donkere eindpunt terug
naar het lichte beginpunt: een harde band.
`height: auto` laat de body weer om zijn inhoud heen groeien; de min-height eronder
houdt 'm op korte pagina's nog steeds schermvullend. Specificiteit (0,1,1) wint van de
`body`-selector (0,0,1), dus volgorde van de stylesheets maakt niet uit. */
height: auto;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
/* GEEN background-attachment: fixed — dan blijft het verloop aan de viewport hangen terwijl
de inhoud scrollt, en dat is precies het "er ligt een overlay overheen"-effect dat je bij
pull-to-refresh ziet. Nu schuift de achtergrond gewoon mee met de pagina. */
/* Stops in vh, NIET in % — dit verloop kleurt de VOLLEDIGE body, en die is zo hoog als de
kaart 'm maakt (min-height: 100vh, maar login.php met z'n extra velden + Google/Apple +
footer duwt 'm hoger dan wachtwoord-vergeten.php). Met %-stops herschaalt het hele
verloop mee met die hoogte, dus op de langere pagina viel het donkere eindpunt ineens
vlak onder de kaart — een zichtbaar donkerder vlak dat op de kortere pagina niet
opviel. Met vh-stops ligt het verloop vast aan de schermhoogte: voorbij 100vh blijft de
kleur gewoon de laatste stop (donker) doorlopen, ongeacht hoeveel extra hoogte de kaart
toevoegt — geen naad, geen kleurverschil tussen pagina's. */
background: linear-gradient(160deg, var(--login-primary-light) 0, var(--login-primary) 45vh, var(--login-primary-dark) 100vh);
/* Vangnet bij de `height: auto` hierboven: mocht het verloop ooit tóch korter uitvallen dan
de body, dan blijft de laatste (donkere) stop doorlopen in plaats van terug te tegelen
naar het lichte begin — geen harde kleurband meer op de naad. */
background-repeat: no-repeat;
/* MOET blijven staan, ná de shorthand. De iOS-app loopt niet onder de statusbalk door
(WebView hangt aan safeAreaLayoutGuide.topAnchor); die strook krijgt zijn kleur van
syncContainerBackgroundToWebTheme(): die leest via elementFromPoint(5,5) de eerste
niet-transparante background-COLOR. Een linear-gradient is een background-IMAGE, dus
zonder deze regel is de uitkomst rgba(0,0,0,0) → de app valt terug op zijn neutrale
thema-canvas (#F2F6FC) → een grijze balk boven het rood. */
background-color: var(--login-primary-light);
font-family: "greycliff-cf", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--login-titel);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── Decoratie: de grote 4 ─────────────────────────────────────────────────
De 4 steekt bewust buiten het scherm. Die overhang MOET geklipt worden door een
eigen laag: `overflow-x: hidden` op / helpt hier niet (gemeten — de
pagina blijft 252px breder dan de viewport en je kunt horizontaal slepen), want de
4 hangt aan het initial containing block en niet aan de body. Deze wrapper is precies
viewport-groot en klipt hem écht weg. Verborgen bij een omgeving (eigen branding). */
.login-vier-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* Op mobiel zit de 4 IN de rode kop (zie de markup): hij schildert daar bovenop de achtergrond
van die kop en onder het logo, en de kop klipt hem meteen weg — dus geen horizontale overloop.
Vanaf 576px maken we de wrapper `fixed`: dan ontsnapt hij aan de `overflow: hidden` van de kop
(een fixed kind wordt daar niet door geklipt) en zweeft de 4 weer vrij naast de kaart, nog
steeds zonder scrollruimte toe te voegen. */
@media (min-width: 576px) {
.login-vier-wrap {
position: fixed;
}
}
.login-vier {
/* ABSOLUTE, niet fixed: bij fixed blijft de 4 aan de viewport hangen terwijl de rest
scrollt — dan schuift hij tijdens pull-to-refresh/rubber-band achter het logo door en
lijkt het een losse overlay. Absoluut = hij hoort bij de pagina en beweegt gewoon mee.
De vh/vw-waarden hieronder geven bij scrollpositie 0 exact hetzelfde beeld als voorheen. */
position: absolute;
top: -20vh;
left: -20vw;
width: min(200vw, 720px);
height: auto;
opacity: .1;
z-index: 0;
pointer-events: none;
user-select: none;
/* 10px op en neer in 9s — net genoeg om te leven, te traag om af te leiden.
Alleen transform, dus de browser hoeft de lay-out niet te herberekenen. */
animation: login-vier-zweef 9s ease-in-out infinite;
will-change: transform;
}
@keyframes login-vier-zweef {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Desktop centreert de 4 met translateY(-50%); die verschuiving moet in de keyframes
blijven staan, anders springt hij bij de eerste animatiestap omlaag. */
@keyframes login-vier-zweef-desktop {
0%,
100% {
transform: translateY(-50%);
}
50% {
transform: translateY(calc(-50% - 10px));
}
}
/* ── Taalkiezer (pil rechtsboven) ─────────────────────────────────────────── */
.lang-pil {
position: fixed;
top: calc(var(--sa-t) + 14px);
right: 16px;
z-index: 30;
}
.lang-pil .lang-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px;
background: rgba(255, 255, 255, .16);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.lang-pil .lang-toggle:hover {
background: rgba(255, 255, 255, .26);
}
.lang-pil .lang-toggle:active {
transform: scale(.98);
}
.lang-pil .lang-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}
.lang-vlag {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
.lang-code {
letter-spacing: .02em;
}
.lang-caret {
width: 16px;
height: 16px;
stroke-width: 2.5;
opacity: .9;
transition: transform .25s ease;
}
.lang-pil .lang-toggle[aria-expanded="true"] .lang-caret {
transform: rotate(180deg);
}
/* .dropdown-menu = transparante positielaag (Popper bezit de transform);
de zichtbare kaart is .lang-menu-inner, zodat die vrij te animeren is. */
.lang-pil .dropdown-menu {
right: 0;
margin-top: 10px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.lang-menu-inner {
min-width: 224px;
padding: 8px;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
background: #fff;
transform-origin: top right;
}
.lang-pil .dropdown-menu.show .lang-menu-inner {
animation: langMenuIn .24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes langMenuIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.lang-menu-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 10px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--login-placeholder);
}
.lang-menu-header svg {
width: 15px;
height: 15px;
}
.lang-item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: 10px;
color: var(--login-titel);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background .18s ease, transform .18s ease;
}
.lang-item:hover,
.lang-item:focus {
background: rgba(var(--login-primary-rgb), .08);
color: var(--login-titel);
text-decoration: none;
transform: translateX(2px);
}
.lang-item .lang-vlag {
width: 24px;
height: 24px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.lang-item.is-active {
background: rgba(var(--login-primary-rgb), .10);
color: var(--login-primary);
font-weight: 700;
}
.lang-item.is-active:hover {
transform: none;
}
.lang-check {
margin-left: auto;
width: 18px;
height: 18px;
color: var(--login-primary);
}
/* ══════════════════════════════════════════════════════════════════════════
MOBIEL: rood is een ELEMENT, wit is de pagina
══════════════════════════════════════════════════════════════════════════
Waarom: alles wat buiten de inhoud valt — de rubber band als je voorbij het einde
doorscrolt, en het gaatje dat iOS kan laten vallen als de adresbalk in-/uitschuift —
toont de achtergrond van de PAGINA. Zolang die rood was, zag je daar rood terwijl de
witte kaart tot onderaan loopt. Eerdere pogingen (tweekleurige canvas met
`background-attachment: fixed`, een witte box-shadow onder de kaart) werkten niet:
`fixed` is op iOS onbetrouwbaar, en een schaduw met alléén een offset begint 100vh
onder de BOVENkant van de kaart — dus buiten beeld (aantoonbaar: het vlak onder een
ingekorte kaart bleef rood).
Nu: de body is wit en de rode kop draagt zijn eigen verloop. Vanaf 576px zweeft de
kaart en hoort er juist rood omheen — daar blijft alles zoals het was. */
@media (max-width: 575.98px) {
body.login-body {
background-image: none;
background-color: #fff;
}
.login-rood {
background-image: linear-gradient(160deg, var(--login-primary-light) 0%, var(--login-primary) 100%);
/* Ook als losse background-color, want de iOS-app leest via elementFromPoint(5,5)
de eerste niet-transparante background-COLOR om de strook achter de statusbalk
te kleuren (zie de noot bij body). Een verloop alleen is daar niet genoeg. */
background-color: var(--login-primary-light);
/* Rood houden als je BOVENAAN voorbij het begin doorscrolt: evenveel spread als
offset, dus de schaduw loopt precies tot de onderrand van de kop en geen pixel
verder. Een box-shadow telt niet mee in de paginagrootte. */
box-shadow: 0 -100vh 0 100vh var(--login-primary-light);
}
}
/* ── Rode kop ─────────────────────────────────────────────────────────────── */
.login-rood {
position: relative;
overflow: hidden;
z-index: 1;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(210px, 30vh, 300px);
padding: calc(var(--sa-t) + 72px) 24px 56px;
}
.login-merk {
display: block;
width: min(62vw, 260px);
height: auto;
}
/* Omgevingslogo: witte pil eronder zodat een donker logo op rood leesbaar blijft. */
.login-merk-omgeving {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.login-merk-omgeving img {
display: block;
max-width: min(58vw, 240px);
max-height: 90px;
width: auto;
height: auto;
}
/* ── Witte kaart ──────────────────────────────────────────────────────────── */
.login-sheet {
position: relative;
z-index: 2;
flex: 1 1 auto;
width: 100%;
background: #fff;
border-radius: var(--login-radius-sheet) var(--login-radius-sheet) 0 0;
margin-top: -28px;
padding: 36px 28px calc(28px + var(--sa-b));
box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
}
.login-titel {
margin: 0;
font-size: 28px;
font-weight: 800;
line-height: 1.15;
color: var(--login-titel);
}
.login-sub {
margin: 6px 0 28px;
font-size: 15px;
line-height: 1.45;
color: var(--login-tekst);
}
/* ── Velden ───────────────────────────────────────────────────────────────── */
.login-veld+.login-veld {
margin-top: 18px;
}
.login-label {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 700;
color: var(--login-titel);
}
.veld-wrap {
position: relative;
display: block;
}
.veld-icoon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--login-placeholder);
pointer-events: none;
}
.login-input {
display: block;
width: 100%;
height: 58px;
padding: 0 16px 0 52px;
border: 1px solid var(--login-lijn);
border-radius: var(--login-radius-veld);
background: #fff;
color: var(--login-titel);
/* 16px is verplicht: kleiner laat iOS bij focus inzoomen. */
font-size: 16px;
font-family: inherit;
line-height: 1;
transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input::placeholder {
color: var(--login-placeholder);
opacity: 1;
}
.login-input:focus {
outline: none;
border-color: var(--login-primary);
box-shadow: 0 0 0 3px rgba(var(--login-primary-rgb), .18);
}
.login-input.heeft-oog {
padding-right: 52px;
}
/* Datumveld (invite-accept): Safari/iOS centreert de datumtekst verticaal niet vanzelf in een
veld met een vaste hoogte, en laat de eigen kalenderknop rechts staan. */
.login-input-datum {
padding-right: 12px;
line-height: 56px;
}
.login-input-datum::-webkit-date-and-time-value {
text-align: left;
}
.veld-oog {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--login-placeholder);
cursor: pointer;
}
.veld-oog:hover {
color: var(--login-titel);
background: #F5F5F7;
}
.veld-oog:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--login-primary-rgb), .25);
}
.veld-oog svg {
width: 20px;
height: 20px;
}
/* Beide iconen staan in de DOM (feather.replace() draait maar één keer);
de klasse .is-zichtbaar wisselt welke te zien is. */
.veld-oog .oog-verberg {
display: none;
}
.veld-oog.is-zichtbaar .oog-toon {
display: none;
}
.veld-oog.is-zichtbaar .oog-verberg {
display: inline-block;
}
.login-vergeten {
display: inline-block;
margin-top: 14px;
font-size: 14px;
font-weight: 600;
color: var(--login-primary);
text-decoration: none;
}
.login-vergeten:hover,
.login-vergeten:focus {
color: var(--login-primary-dark);
text-decoration: none;
}
/* ── Inlogknop ────────────────────────────────────────────────────────────── */
.login-knop {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
margin-top: 22px;
padding: 0 56px;
border: 0;
border-radius: var(--login-radius-knop);
background: linear-gradient(100deg, var(--login-primary) 0%, var(--login-primary-dark) 100%);
color: var(--login-primary-on);
font-family: inherit;
font-size: 17px;
font-weight: 700;
line-height: 1;
/* invite.php gebruikt deze klasse op een (link naar invite-accept), vandaar. */
text-decoration: none;
cursor: pointer;
box-shadow: 0 8px 20px rgba(var(--login-primary-rgb), .35);
transition: box-shadow .18s ease, transform .1s ease;
}
.login-knop:hover {
box-shadow: 0 10px 26px rgba(var(--login-primary-rgb), .45);
}
.login-knop:active {
transform: translateY(1px);
box-shadow: 0 6px 14px rgba(var(--login-primary-rgb), .35);
}
.login-knop:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(var(--login-primary-rgb), .3);
}
.login-knop-pijl {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}
/* 2FA-codeveld: groot, gecentreerd, met letterafstand. Geen leading icoon, dus geen
padding-left. Font-size ruim boven 16px, dus iOS zoomt niet in bij focus. */
.mfa-code-input {
height: 68px;
padding: 0 12px;
text-align: center;
font-size: 30px;
font-weight: 700;
letter-spacing: .38em;
/* letter-spacing zet ook ruimte áchter het laatste teken — die compenseren
we, anders staat de code visueel links van het midden. */
text-indent: .38em;
}
.mfa-code-input::placeholder {
font-weight: 600;
letter-spacing: .38em;
}
/* "Geen toegang meer tot je authenticator?" — een submit-knop (name=mfa_uitzet_aanvraag),
maar hij moet lezen als een rustige tekstlink. */
.mfa-uitzet-link {
display: block;
width: 100%;
margin-top: 16px;
padding: 0;
border: 0;
background: none;
color: var(--login-tekst);
font-family: inherit;
font-size: 14px;
text-align: center;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.mfa-uitzet-link:hover {
color: var(--login-primary);
}
/* Secundaire terug-link onder de hoofdknop (wachtwoord-vergeten).
Icoon en tekst zitten in dezelfde flex-rij, anders zakt het Feather-icoon
onder de tekstbasislijn. */
.login-terug {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
font-size: 15px;
font-weight: 600;
color: var(--login-tekst);
text-decoration: none;
}
.login-terug:hover,
.login-terug:focus {
color: var(--login-primary);
text-decoration: none;
}
.login-terug svg {
width: 18px;
height: 18px;
}
/* ── Divider + social ─────────────────────────────────────────────────────── */
.login-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 26px 0 16px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--login-placeholder);
}
.login-divider::before,
.login-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--login-lijn);
}
.sociaal-raster {
display: grid;
/* auto-fit: 1, 2 of 3 zichtbare knoppen vullen altijd de volle breedte —
knoppen die pas door JS onthuld worden (.d-none) tellen niet mee. */
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 12px;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 64px;
padding: 0 8px;
border: 1px solid var(--login-rand);
border-radius: 14px;
background: #fff;
color: var(--login-titel);
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.social-btn:hover {
color: var(--login-titel);
text-decoration: none;
border-color: #DCDCE3;
box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
transform: translateY(-1px);
}
.social-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--login-primary-rgb), .25);
}
.sociaal-icoon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
}
.sociaal-icoon img,
.sociaal-icoon svg {
width: 22px;
height: 22px;
}
.social-apple .sociaal-icoon {
color: #000;
}
.social-passkey .sociaal-icoon {
color: var(--login-primary);
}
.social-passkey .sociaal-icoon svg {
width: 21px;
height: 21px;
stroke-width: 2.2;
}
.sociaal-label {
white-space: nowrap;
}
/* ── Planny-hulpkaart ─────────────────────────────────────────────────────── */
.planny-kaart {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding: 16px 18px;
border-radius: 18px;
background: var(--login-primary-soft);
color: var(--login-titel);
text-decoration: none;
transition: background .18s ease, transform .18s ease;
}
.planny-kaart:hover,
.planny-kaart:focus {
color: var(--login-titel);
text-decoration: none;
background: rgba(var(--login-primary-rgb), .16);
transform: translateY(-1px);
}
.planny-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
}
.planny-tekst {
min-width: 0;
}
.planny-titel {
display: block;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.planny-sub {
display: block;
font-size: 14px;
line-height: 1.35;
color: var(--login-tekst);
}
.planny-pijl {
margin-left: auto;
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--login-primary);
}
/* ── Footer ───────────────────────────────────────────────────────────────── */
.login-footer {
margin-top: 26px;
text-align: center;
font-size: 13px;
line-height: 1.6;
color: var(--login-tekst);
opacity: .85;
}
.login-footer a {
color: inherit;
text-decoration: none;
}
.login-footer a:hover {
color: var(--login-titel);
text-decoration: underline;
}
.login-footer-scheider {
margin: 0 10px;
color: #D9DBE1;
}
/* ── Desktop: de kaart wordt een zwevende kaart ───────────────────────────── */
@media (min-width: 576px) {
body.login-body {
/* `justify-content: center` centreert de kop+kaart-stack verticaal — mooi zolang
alles past. Op een lager browservenster (korte laptop, ~700px hoog) is een lange
kaart (login.php: extra velden + Google/Apple + footer) hoger dan het venster, en
"center" verdeelt de overloop dan SYMMETRISCH naar boven én onder — de bovenkant
van de rode kop (met het logo) schuift zo boven y=0 en is niet terug te scrollen
(scrollY blijft 0, want de pagina "groeit" alleen naar onderen). Vandaar de
afgesneden logo-top bij login.php maar niet bij het kortere wachtwoord-vergeten.php.
`safe center` lost dit op: centreren zolang het past, anders bovenaan uitlijnen in
plaats van overlopen. Eerste regel = fallback voor browsers zonder safe/unsafe-
support (ongeldige waarde wordt genegeerd, "center" blijft staan). */
justify-content: center;
justify-content: safe center;
/* Onderrand ruimer dan de 32px bovenrand: de kaart heeft zelf ook een marge nodig
t.o.v. de paginarand, anders stopt de pagina bijna direct na de kaart. */
padding: 32px 16px calc(56px + var(--sa-b));
/* Trackpad-rubberband (macOS Safari/Chrome): scroll je voorbij de boven- of
onderkant van de pagina, dan toont de browser een stuk WITTE canvas erachter —
heeft namelijk geen eigen achtergrond, dus buiten het (eindige) verloop
van body zie je de kale pagina-achtergrond. Alleen op desktop uitzetten: op
mobiel/native laten we 'm bewust staan — zie de `@media (max-width: 575.98px)
.login-rood`-sectie verderop in dit bestand, die precies dít scroll-voorbij-de-
top-geval al oplost met een box-shadow (niet door de bounce te blokkeren), omdat
de iOS-app diezelfde overscroll-gesture gebruikt voor pull-to-refresh. Op desktop
bestaat pull-to-refresh niet, dus hier mag de bounce gewoon weg. */
overscroll-behavior-y: none;
}
.login-rood {
min-height: 0;
padding: 0 24px 40px;
}
.login-sheet {
flex: 0 0 auto;
max-width: 460px;
margin: -32px auto 0;
border-radius: 28px;
padding: 36px 32px 32px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.login-merk {
width: 240px;
}
/* Desktop: de 4 staat HELEMAAL in beeld in het open rode vlak links van de kaart,
verticaal gecentreerd — niet half weggesneden in de hoek. */
.login-vier {
/* 15vh i.p.v. 15%: nu de 4 absoluut staat, zou 15% meerekenen met de HOOGTE VAN DE
PAGINA (op start.php met een lang formulier zakt hij dan weg). vh houdt 'm waar
hij stond. */
top: 15vh;
left: 7vw;
width: min(140vw, 2500px);
transform: translateY(-50%);
animation-name: login-vier-zweef-desktop;
}
}
/* ══════════════════════════════════════════════════════════════════════════
start.php — onboarding-wizard in de kaartstijl
De wizard-mechaniek (.step/.next-step/#progressBar), de keuzekaarten en de
telefoon-preview leven in css/onboarding.css + js/start.js. Hier staat alleen
wat die twee nodig hebben van DEZE kaartstijl.
══════════════════════════════════════════════════════════════════════════ */
/* KRITIEK: deze twee regels stonden vóór de restyle in een inline