/* Stijlen, uit base.html gehaald */
/* General Sans van Indian Type Foundry (Fontshare), ITF Free Font
License. De licentie staat naast het bestand in
static/fonts/GeneralSans-FFL.txt.
Twee dingen om te weten bij dit font. Zelf hosten mag
uitdrukkelijk (§01), maar doorgeven aan anderen niet (§02) — ook
niet via een openbare repository. Deze repo staat op privé en
dat moet zo blijven zolang dit bestand erin zit. En het font mag
niet bewerkt worden: niet subsetten, niet omzetten naar een ander
formaat, niet hernoemen in de metadata. Het bestand hieronder is
dus letterlijk zoals het van Fontshare kwam.
Alleen Bold, usWeightClass 700. Het gewicht is opgegeven als een
bereik van 700 tot 900, want koppen in de app vragen op
verschillende plekken om 800 of 900. Zonder dat bereik zou de
browser er zelf vet overheen rekenen — dikker gemaakt in plaats
van dikker getekend, en dat ziet er smoezelig uit. Komt er een
tweede snede bij, dan krijgt die zijn eigen @font-face en kan dit
bereik smaller. */
@font-face {
font-family: "GeneralSans";
src: url("/static/fonts/GeneralSans-Bold.woff2")
format("woff2");
font-weight: 700 900;
font-style: normal;
font-display: swap;
}
/* Eén snede lichter, voor lopende tekst die wél in deze letter
hoort maar niet zo hard hoeft aan te komen als een bedrag.
Met opzet een eigen familienaam en niet een tweede gewicht
binnen "GeneralSans". Alles wat die letter gebruikt vraagt
namelijk gewicht 400 — .fizzy, de bedragen, de maandnaam — en
zolang alleen de bold-snede bestond kreeg zo'n element altijd
bold, want er was niets anders. Zet je er een snede van 500-600
naast, dan kiest de browser bij 400 ineens die lichtere, en
worden álle bedragen in de app dunner. */
@font-face {
font-family: "GeneralSans Semi";
src: url("/static/fonts/GeneralSans-Semibold.woff2")
format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--bg: #c3ddff; /* near black */
--surface: #eaf3ff; /* light gray cards */
--surface2: #cdcec9; /* medium gray — table headers */
--border: #b8b9b4; /* subtle card border */
--border2: #d0d1cb; /* even subtler */
--gold: #c8c040; /* muted yellow — primary accent */
--gold-lt: #fff35f; /* bright yellow — headings on dark */
--gold-dim: #9a9b96; /* medium gray — secondary text */
--gold-pale: #111111; /* near black — text inside light cards */
--muted: #9a9b96; /* medium gray — visible on dark + light */
--green: #1dbc00; /* bright green */
--red: #ff6161;
/* Merk- & UI-tokens — pas hier centraal de kernkleuren aan */
--brand: #fff35f; /* helder geel — accent/merk (knoppen, hero) */
--table-head: #a6ccff; /* blauw — tabelkoppen */
/* De inkt als losse kanalen, zodat de tientallen halfdoorzichtige
varianten (rgba(17,17,17,.58) en zo) van dezelfde kleur
afstammen in plaats van hem over te typen. */
--ink-rgb: 17, 17, 17;
--ink: rgb(var(--ink-rgb)); /* bijna zwart — donkere vlakken & tekst */
--blue: #2145e6; /* accentblauw — grafiek, voortgang, hover */
--card: #ffffff; /* wit — kaarten die lichter zijn dan --surface */
/* Hoe ver de inhoud van de schermrand af staat. Main haalt
zijn padding hiervandaan, en de carousels — die tot de rand
doorlopen — geven precies dit weer terug aan de kaart erin.
Eén getal, en de rest volgt.
Als getal en niet als calc(50vw - 50%): dat rekent voor
margin en padding netjes tegen de ouder af, maar
scroll-padding rekent tegen het scrollvenster — en dan klikt
de kaart tegen de schermrand vast in plaats van tegen zijn
marge. */
--rand: 32px;
/* Lucht vóór het eerste en ná het laatste punt van de
hoofdgrafiek, zodat die niet tegen de rand plakken. Op
smalle schermen loopt de grafiek door tot de schermrand;
dan moet deze lucht ook de paginamarge vervangen die daar
niet meer is, en blijft de ruimte naast het laatste punt
dus even groot als hij was. */
--grafiek-lucht: 14px;
}
@media (max-width: 640px) {
:root { --rand: 20px; }
}
@media (max-width: 900px) {
:root { --grafiek-lucht: calc(14px + var(--rand)); }
}
/* GeneralSans voor koppen en grote bedragen */
h1,
h2,
.fizzy {
font-family:
"GeneralSans",
-apple-system,
sans-serif;
}
h1 {
color: #111111 !important;
font-size: 38px !important;
line-height: 1 !important;
margin: 0;
}
/* ── Het woordmerk ───────────────────────────────────────
Tekst, geen afbeelding. Dat scheelt een bestand dat bij elke
naamswijziging opnieuw getekend moet worden, het schaalt met
de tekstgrootte van de bezoeker mee, en een schermlezer krijgt
de naam in plaats van een alt-tekst die hem herhaalt.
De maat staat hier bewust niet in: op de toegangsschermen is
dit een kop en onderaan de app een afzender. Die zetten hun
eigen font-size. */
.woordmerk {
font-family:
"GeneralSans",
-apple-system,
sans-serif;
font-weight: 900;
letter-spacing: -.02em;
color: #111111;
display: inline-block;
max-width: 100%;
white-space: nowrap;
}
.card-title {
font-family:
"GeneralSans",
-apple-system,
sans-serif;
font-size: 19px !important;
color: #111111 !important;
font-weight: 900;
}
* {
box-sizing: border-box;
}
body {
/* De browser geeft body van zichzelf 8px marge. Die is nooit
gekozen en stond overal in de weg: elke afstand tot de
schermrand was '8 plus de padding van dit blok', en dat
optelsommetje moest je zelf onthouden. Bij een carousel die
tot de rand doorloopt werd dat een getal dat op twee plekken
moest kloppen. Nu is de padding de hele waarheid.
De blokken hieronder die hun eigen breedte regelen (het
inlogscherm, beheer, de tekstpagina's) hebben er acht bij
gekregen, zodat er niets verschuift. En passant: die
schermen zijn min-height: 100vh, dus met die marge erbij
pasten ze net niet en had je er een scrollbalk zonder reden
bij. */
margin: 0;
background: var(--bg);
color: #e5e6e1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
min-height: 100vh;
overflow-x: clip; /* prevent page-level horizontal scroll; keeps fixed nav in place */
}
/* Dark text inside light cards */
.surface,
.surface * {
color: var(--gold-pale);
}
/* But let colored elements (pos/neg) override */
.surface .pos {
color: var(--green) !important;
}
.surface .neg {
color: var(--red) !important;
}
.surface {
background: var(--surface);
border: none;
}
.surface2 {
background: var(--surface2);
border: 1px solid var(--border2);
}
/* Inputs */
input,
select,
textarea {
background: #ffffff !important;
border: none !important;
color: var(--gold-pale) !important;
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
width: 100%;
appearance: none;
-webkit-appearance: none;
transition:
box-shadow 0.15s,
background 0.15s;
}
input:hover,
select:hover,
textarea:hover {
background: #f8f8f8 !important;
}
input:focus,
select:focus,
textarea:focus {
outline: none !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(168, 114, 32, 0.2) !important;
}
/* Hide number spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* Custom select arrow */
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A87220' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
cursor: pointer;
}
input[type="color"] {
padding: 3px !important;
width: 48px !important;
height: 40px !important;
cursor: pointer;
border-radius: 8px !important;
}
input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
padding: 0 !important;
border-radius: 4px !important;
accent-color: var(--gold);
appearance: auto !important;
-webkit-appearance: auto !important;
}
/* Scrollbar: geen eigen styling — zo gebruikt de browser de
native scrollbalk (op macOS de dunne, zelf-verbergende overlay).
Zodra je ::-webkit-scrollbar globaal styelt, dwing je juist een
permanente, brede 'eigen' balk af. Losse scroll-containers
(grafieken) verbergen hun balk apart via scrollbar-width/none. */
/* ── Invoertabel: flush (geen kaart-bg), luchtige rijen ──────────
Geen achtergrondvlak; rijen gescheiden door een lichte haarlijn,
met een zachte afgeronde hover-pill. */
.surface.table-flush {
background: transparent;
}
/* Rustige, muted tabelkop (blauwe band weg); de ruimte tussen kop en rijen
komt van border-spacing op de tabel. */
.table-flush thead th {
padding-bottom: 4px !important;
}
/* Elke rij als lichtblauwe balk met ronde uiteinden; de verticale ruimte
ertussen komt van border-spacing (0 10px) op .entry-table. */
.table-flush .trow td {
background: #d2e5ff;
transition: background 0.14s ease;
}
.table-flush .trow td:first-child {
border-radius: 14px 0 0 14px;
}
.table-flush .trow td:last-child {
border-radius: 0 14px 14px 0;
}
/* Hover: rij iets donkerder — de witte invoervelden blijven zo goed leesbaar. */
.table-flush .trow:hover td {
background: #bcd6fb;
}
/* ── Knoppen ──────────────────────────────────────────────────
Eén vorm voor alles waar je op klikt: dezelfde pil, dezelfde
tekst, dezelfde ronding. Twee maten en drie kleuren, en daar
houdt het op.
Ze stonden er in zeven families door elkaar: btn-primary,
btn-secondary, in-btn, rg-btn, hs-btn, sm-save-btn en ob-btn,
met vijf verschillende hoekrondingen en drie tekstmaten voor
hetzelfde soort actie. Een knop hoorde daardoor per scherm
opnieuw uitgevonden te worden.
Wat hier bewust níet in zit: de ronde pijltjes van de
maandnavigatie, het vraagteken in een invoerveld, de tabs in de
instellingen, de segmenten van een keuzeschakelaar en de
navigatiebalk onderin. Dat zijn geen knoppen met tekst erop
maar iconen, tabs en navigatie; in een pil worden die juist
onherkenbaar. */
.knop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: none;
border-radius: 999px;
padding: 12px 22px;
/* De body-letter, niet GeneralSans. Die is voor koppen en
grote bedragen; op een knop van veertien pixels wordt hij
te nadrukkelijk. */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition:
background 0.14s ease,
color 0.14s ease,
transform 0.1s ease;
}
.knop svg { flex-shrink: 0; display: block; }
.knop:active { transform: scale(0.98); }
.knop:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.knop[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Een knop die bezig is, is ook uitgeschakeld — maar hij vertelt
iets ('Controleren…', 'Opslaan…') en dat moet je kunnen lezen.
Op vier tienden dekking is dat net zo vaag als een knop die
helemaal niets kan. */
.knop[aria-busy="true"] { opacity: 0.75; cursor: progress; }
/* Het hidden-attribuut wint niet vanzelf van display: inline-flex. */
.knop[hidden] { display: none; }
.knop[disabled]:active { transform: none; }
/* De tweede maat. Voor knoppen die in een rij of naast een tekst
staan en daar niet overheen mogen walsen: Bewerken, Exporteer. */
.knop--klein { font-size: 12.5px; padding: 7px 15px; gap: 5px; }
/* Volle breedte, voor de knop onderaan een formulier. */
.knop--vol { width: 100%; }
/* Geel is de actie waar het scherm om draait: opslaan, inloggen,
aanmaken. Er staat er hooguit één per scherm. */
.knop--geel { background: var(--brand); color: #111111; }
.knop--geel:hover:not([disabled]) { background: var(--gold); }
/* Stil is al het andere: annuleren, bewerken, toevoegen. */
.knop--stil { background: rgba(17, 17, 17, 0.07); color: #111111; }
.knop--stil:hover:not([disabled]) { background: rgba(17, 17, 17, 0.14); }
/* Rood is alleen verwijderen, en blijft daarom rustig. */
.knop--rood { background: transparent; color: var(--red); }
.knop--rood:hover:not([disabled]) { background: rgba(255, 97, 97, 0.12); }
/* `.surface *` kleurt alle tekst in een kaart donker; het rood
van een verwijderknop moet daar bovenuit komen. */
.surface .knop--rood { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
.knop { transition: none; }
.knop:active { transform: none; }
}
/* ── Gecentreerde paginatitel (o.a. Invoer, Vaste lasten) ──
Witruimte boven de titel gelijk aan die boven het hoofdbedrag op
het dashboard: main-padding (32px) + 40px, net als #hero. */
.page-title { margin: 40px 0 24px; }
.page-title h1 { margin: 0; }
.page-title .page-sub { color: #111111; font-size: 13px; margin: 4px 0 0; }
.page-title--center { text-align: center; }
/* Nav active */
.nav-active {
color: var(--gold) !important;
}
.nav-active::after {
content: "";
display: block;
height: 2px;
background: var(--gold);
border-radius: 1px;
margin-top: 2px;
}
/* Positive / Negative */
.pos { color: var(--green); }
.neg { color: var(--red); }
/* Currency input wrapper */
.currency-input {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 10px;
padding: 12px 14px;
gap: 4px;
transition: box-shadow 0.15s;
}
.currency-input:focus-within {
box-shadow: 0 0 0 3px rgba(168,114,32,.2);
}
.currency-input .symbol {
color: var(--muted);
font-size: 15px;
flex-shrink: 0;
user-select: none;
}
.currency-input input {
flex: 1;
min-width: 60px;
text-align: right;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
font-size: 15px;
width: auto;
}
/* Chart scroll wrapper */
.chart-scroll {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.chart-scroll::-webkit-scrollbar { display: none; }
/* chart-inner geeft Chart.js een vaste breedte; de parent scrollt */
.chart-inner {
position: relative;
min-width: 480px;
}
.chart-inner--donut {
position: relative;
min-width: 280px;
max-width: 420px;
margin: 0 auto;
}
/* Compacte secundaire grafieken: passen in een smalle kolom */
.chart-inner--sm {
min-width: 300px;
}
/* Grid-items mogen NIET breder worden dan hun kolom */
#grid-charts2 > *,
#grid-bottom > *,
#stat-cards > * { min-width: 0; }
/* Schuld peil wave */
@keyframes schuld-wave {
0%, 100% { transform: scaleX(1) translateY(0px); opacity: .35; }
50% { transform: scaleX(1.06) translateY(-3px); opacity: .55; }
}
.schuld-wave-surface {
position: absolute; top: -5px; left: -10%; width: 120%; height: 10px;
background: rgba(255,255,255,.5); border-radius: 50%;
animation: schuld-wave 2.8s ease-in-out infinite;
}
/* Dashboard-secties */
.drag-section { position: relative; margin-bottom: 24px; }
/* ── Overzicht (desktop) ─────────────────────────────────────────────
Twee secties ONDER elkaar: 'Deze maand' en daaronder 'Doelen'.
Binnen elke sectie staan de kaarten naast elkaar. */
#overview-row { display: block; margin-bottom: 28px; }
#overview-left { position: relative; margin-bottom: 28px; }
#goalsCard { position: relative; }
/* Deze maand: 3 kaarten naast elkaar (past altijd) */
#stat-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
padding: 2px; /* ruimte voor de kaart-schaduw */
}
/* Doelen: kaarten naast elkaar; horizontaal scrollen als er meer
mijlpalen zijn dan er passen. Scrollbalk verborgen, hint-pijl aan. */
#goalsCard .goals-list {
flex-direction: row; gap: 20px;
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; scroll-snap-type: x proximity;
padding: 2px;
}
#goalsCard .goals-list::-webkit-scrollbar { display: none; }
/* flex-shrink:0 — anders persen de kaarten zich samen en ontstaat
er nooit overflow (dus ook geen scroll/hint). */
#goalsCard .goals-list > .goal-card {
flex: 0 0 calc((100% - 40px) / 3);
scroll-snap-align: start; flex-shrink: 0;
}
/* ── Stippen onder een swipe-carousel ──────────────────────────
Hiervoor stonden er pijltjes áán de zijkanten van de tegels.
Die vertelden alleen dát er meer was, niet hoeveel en niet waar
je zat — en ze lagen over de kaart heen, precies waar je duim
aan het swipen is. Stippen eronder zeggen alle drie de dingen
tegelijk, en ze zitten niemand in de weg.
Eén stip per pagina, niet per tegel: op de computer staan er
drie doelen naast elkaar en dan is één stip per kaart een
rijtje dat nergens op slaat. dashboard.js meet hoeveel er
tegelijk in beeld passen. */
.swipe-dots {
display: none; justify-content: center; align-items: center;
gap: 2px; margin-top: 10px;
}
.swipe-dots.on { display: flex; }
.swipe-dots button {
width: 22px; height: 22px; padding: 0; border: 0; background: none;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* De stip zelf is 7px, de knop eromheen 22px. Een raakvlak van
zeven pixels mis je met een duim; een stip van 22 is een vlek. */
.swipe-dots button::before {
content: ""; width: 7px; height: 7px; border-radius: 999px;
background: rgba(var(--ink-rgb), .2);
transition: width .22s cubic-bezier(.25,1,.4,1), background .22s ease;
}
.swipe-dots button.on::before { width: 20px; background: var(--blue); }
/* Meer pagina's dan er stippen passen: dan een teller, want twintig
stippen zeggen minder dan '3 / 20'. */
.swipe-dots .sd-teller {
font-size: 12px; font-weight: 600; color: rgba(var(--ink-rgb), .45);
font-variant-numeric: tabular-nums;
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
/* Mobiel/tablet: stat-cards als full-width horizontale swipe-
carousel (scroll-snap, zonder zichtbaar scrollbalkje); Doelen
eronder. Extra ruimte boven, tussen de voortgangsbalk en de
swipe-blokken. */
#overview-row { display: block; margin-top: 26px; margin-bottom: 12px; }
#overview-left { margin-bottom: 12px; }
/* ── Van rand tot rand swipen ────────────────────────────────
De carousel loopt door tot de schermrand, maar de kaart erin
houdt zijn marge. In rust ziet het er dus hetzelfde uit; ga je
swipen, dan komt de volgende kaart écht uit de hoek in plaats
van uit een strook lucht die er twintig pixels naast begint.
--rand is die inspringing; zie de toelichting bij :root.
scroll-padding zorgt dat het kleven op de juiste plek gebeurt:
een kaart snapt tegen de inspringing en niet tegen de rand. */
#stat-cards {
display: flex !important; flex-direction: row; flex-wrap: nowrap;
gap: var(--rand); overflow-x: auto; overflow-y: hidden;
max-height: none;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--rand);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 calc(-1 * var(--rand)) 12px;
padding: 2px var(--rand);
}
#stat-cards::-webkit-scrollbar { display: none; }
#stat-cards > * {
flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
}
#goalsCard { margin-bottom: 0; }
/* De hoofdgrafiek loopt aan beide kanten door tot de schermrand.
De lucht zit niet meer náást de grafiek maar erin, aan het
begin en het eind van de reeks: zie --grafiek-lucht. Scroll je
er middenin, dan raakt de lijn allebei de randen; open je hem,
dan houdt het laatste punt zijn ruimte.
Alleen op smalle schermen. Op de computer is main een kolom
van duizend pixels in het midden; daar uitbreken haalt de
grafiek uit de kolom en dat is geen rand maar een knik. */
.grafiek-venster { margin-inline: calc(-1 * var(--rand)); }
/* Doelen op mobiel: door je mijlpalen swipen — zelfde
full-width carousel als de stat-cards hierboven. */
#goalsCard .goals-list {
flex-direction: row; flex-wrap: nowrap; gap: var(--rand);
overflow-x: auto; overflow-y: hidden; max-height: none;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--rand);
-webkit-overflow-scrolling: touch; scrollbar-width: none;
margin-inline: calc(-1 * var(--rand));
padding: 2px var(--rand);
}
#goalsCard .goals-list::-webkit-scrollbar { display: none; }
#goalsCard .goals-list > .goal-card {
flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
}
#grid-charts2,
#grid-bottom { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
main { padding: 16px var(--rand) 80px !important; }
h1 { font-size: 26px !important; }
/* Gelijke verticale ruimte tussen ÁLLE dashboard-blokken op
mobiel: zowel de gaps binnen de grids als de marges tussen
hero, overzicht-rij en de secties zijn even groot. */
#grid-charts1, #grid-charts2,
#grid-bottom { gap: 12px !important; }
/* De carousels niet: daar is de ruimte tussen twee kaarten
dezelfde als de ruimte tot de schermrand. Anders piept de
volgende kaart er in rust al een stukje voorbij en klopt het
'in rust marge, bij het swipen uit de hoek' net niet meer. */
#stat-cards, #goalsCard .goals-list { gap: var(--rand) !important; }
#hero, #hero-chart, #stat-cards,
#overview-row,
.drag-section { margin-bottom: 12px !important; }
/* De doel-voortgangsbalk zit als laatste in #hero-chart; z'n
onder-marge 'collapse't' er doorheen. Gelijktrekken op 12px. */
#goalProgress { margin-bottom: 12px !important; }
/* Secundaire grafieken passen binnen de kolom i.p.v. een nutteloze
paar-pixel horizontale scroll te veroorzaken op mobiel */
.chart-inner--sm { min-width: 0 !important; }
/* Na/Voor-toggle: volle breedte op mobiel */
.schuld-toggle {
width: 100% !important;
margin-left: 0 !important;
box-sizing: border-box;
}
.schuld-toggle button { flex: 1; }
/* Floating nav */
#periodBtns {
max-width: calc(100vw - 24px) !important;
}
.card-title { font-size: 15px !important; }
}
@media (max-width: 420px) {
h1 { font-size: 22px !important; }
}
/* ── Toast meldingen ── */
.flash-toast {
display: inline-flex;
align-items: center;
gap: 9px;
background: #111111;
color: #ffffff;
padding: 11px 18px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
animation: toast-in .25s ease;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: none; }
}
/* ── Account-knop in de onderbalk: alleen de foto/initiaal ── */
#navUser { position: relative; display: flex; align-items: center; margin-left: 4px; }
#navUserBtn {
position: relative; z-index: 1;
border: none; background: transparent; padding: 2px;
border-radius: 50%; cursor: pointer; line-height: 0;
display: inline-flex; transition: transform .15s;
}
#navUserBtn:hover { transform: scale(1.06); }
#navUserBtn .u-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: #fff35f; display: flex; align-items: center;
justify-content: center; font-weight: 800; font-size: 13px;
color: #111; flex-shrink: 0; overflow: hidden;
box-shadow: 0 0 0 2px rgba(255,255,255,.22);
}
/* Profielfoto vult de cirkel; dan geen gele achtergrond meer */
#navUser.open #navUserBtn .u-avatar { box-shadow: 0 0 0 2px var(--brand); }
/* ── Menu: klapt omhoog, want de balk staat onderaan ── */
#userDropdown {
display: none; position: absolute; bottom: calc(100% + 12px); right: 0;
min-width: 180px; background: #ffffff; border-radius: 12px; padding: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
z-index: 60; opacity: 0; transform: translateY(6px) scale(.98);
pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
#navUser.open #userDropdown {
display: block; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.u-dd-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border: none; border-radius: 8px;
background: transparent; color: #111111;
font-size: 13px; font-weight: 600; cursor: pointer;
text-align: left; text-decoration: none; transition: background .1s;
}
.u-dd-item:hover { background: #f5f5f5; }
.u-dd-item.danger { color: #e03c3c; }
.u-dd-sep { height: 1px; background: #f0f0f0; margin: 4px 0; }
/* ── Modal overlay ── */
/* ── Het betaalscherm ─────────────────────────────────────────
Verschijnt als de proefperiode om is of het abonnement is
afgelopen. Hij ligt over alles heen behalve het
instellingenvenster (z-index 500), want dáár zit de knop die
hem laat verdwijnen.
Er zit geen sluitkruisje op en klikken naast het kaartje doet
niets. Dat is het punt: wie niet betaalt kan de app niet
gebruiken. Wat hij wél kan — betalen, zijn gegevens meenemen,
opzeggen, uitloggen — staat er alle vier op. Een muur zonder
deur is geen muur maar een val. */
#betaalmuur {
position: fixed; inset: 0; z-index: 400;
display: flex; align-items: center; justify-content: center;
padding: 20px; background: rgba(12, 24, 48, .55);
backdrop-filter: blur(3px);
}
.bm-kaart {
background: #fff; border-radius: 18px; padding: 28px 30px 24px;
max-width: 420px; width: 100%; text-align: center;
box-shadow: 0 24px 60px -12px rgba(0,0,0,.35);
}
.bm-titel {
font-family: 'GeneralSans', system-ui, sans-serif;
font-size: 24px; margin: 0 0 8px; color: #111; letter-spacing: -.3px;
}
.bm-tekst { font-size: 13.5px; line-height: 1.6; color: #555; margin: 0 0 18px; }
.bm-prijs {
font-size: 30px; font-weight: 700; color: #111; margin: 0 0 2px;
letter-spacing: -.6px;
}
.bm-prijs span { display: block; font-size: 12px; font-weight: 400; color: #999; }
.bm-knop {
display: block; width: 100%; margin: 18px 0 0; padding: 12px 18px;
background: #111; color: #fff; border: 0; border-radius: 10px;
font-size: 14px; font-weight: 600; cursor: pointer;
transition: background .12s;
}
.bm-knop:hover { background: #333; }
.bm-stil {
display: flex; gap: 16px; justify-content: center; margin: 16px 0 0;
font-size: 12px;
}
.bm-stil button, .bm-stil a {
background: none; border: 0; padding: 0; cursor: pointer;
color: #6b7a90; text-decoration: underline; font: inherit;
}
.bm-stil button:hover, .bm-stil a:hover { color: #111; }
#settingsOverlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.32);
z-index: 500; align-items: center; justify-content: center; padding: 16px;
}
#settingsOverlay.open { display: flex; }
/* ── Modal shell ── */
#settingsModal {
background: #eaf3ff; border-radius: 16px;
border: 1px solid #cfe0f7;
width: 680px; max-width: calc(100vw - 32px);
height: 500px; max-height: calc(100vh - 64px);
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
animation: smIn .15s ease;
}
@keyframes smIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Modal header */
#smHeader {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px 13px; border-bottom: 1px solid #cfe0f7;
background: #eaf3ff; flex-shrink: 0;
}
#smHeader h2 {
font-size: 15px !important; font-weight: 700; color: #111 !important;
letter-spacing: -.2px; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#smCloseBtn {
width: 26px; height: 26px; border-radius: 7px;
border: none; background: #d9e8fb; color: #5a6b83;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s; flex-shrink: 0;
}
#smCloseBtn:hover { background: #c7dcf8; color: #111; }
/* Two-column body */
#smBody { display: flex; flex: 1; overflow: hidden; }
/* Left sidebar */
#smNav {
width: 172px; flex-shrink: 0; background: #eaf3ff;
border-right: 1px solid #cfe0f7; padding: 8px; overflow-y: auto;
}
.sm-nav-group {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: #bbb; padding: 12px 8px 4px;
}
.sm-nav-group:first-child { padding-top: 6px; }
.sm-nav-btn {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 9px; border: none; border-radius: 7px;
background: transparent; color: #666;
font-size: 13px; font-weight: 500;
cursor: pointer; text-align: left;
transition: background .1s, color .1s;
margin-bottom: 1px;
}
.sm-nav-btn svg { flex-shrink: 0; opacity: .7; }
.sm-nav-btn:hover { background: #dceafc; color: #222; }
.sm-nav-btn.active {
background: #ffffff; color: #111; font-weight: 600;
box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.sm-nav-btn.active svg { opacity: 1; }
/* Right content */
#smContent { flex: 1; overflow-y: auto; padding: 20px 22px 22px; min-width: 0; background: #eaf3ff; }
.sm-pane { display: none; }
.sm-pane.active { display: block; }
.sm-pane-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 2px; letter-spacing: -.1px; }
.sm-pane-desc { font-size: 12px; color: #999; margin: 0 0 18px; line-height: 1.5; }
.sm-sep { height: 1px; background: #cfe0f7; margin: 16px 0; }
.sm-section-label {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: #bbb; margin: 0 0 8px;
}
.sm-badge {
font-size: 10px; font-weight: 500; background: #d9e8fb; color: #7d8aa0;
border-radius: 5px; padding: 1px 7px; vertical-align: middle;
}
/* Form */
.sm-field { margin-bottom: 16px; }
.sm-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .4px; color: #888; display: block; margin-bottom: 6px;
}
.sm-field-note { font-size: 11px; color: #aaa; margin: 5px 0 0; }
/* Codes die je één keer te zien krijgt: breed uit elkaar, in een
vast font, zodat overschrijven zonder vergissing gaat. */
.sm-codes {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 10px 0 12px;
}
.sm-codes .sm-code {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 14px; letter-spacing: .5px; text-align: center;
background: #f7fbff; border: 1.5px solid #cfe0f7;
border-radius: 10px; padding: 10px 6px; color: #111;
user-select: all;
}
@media (max-width: 560px) { .sm-codes { grid-template-columns: 1fr; } }
/* Duidelijke invoervelden: zichtbare rand + lichte vulling, zodat ze
opvallen op de witte modal-achtergrond (waren eerst wit-op-wit). */
.sm-field input {
background: #f7fbff !important;
border: 1.5px solid #cfe0f7 !important;
border-radius: 10px;
padding: 11px 14px; font-size: 14px; color: #111 !important;
}
.sm-field input::placeholder { color: #b4b8bf; }
.sm-field input:hover:not(:disabled) {
background: #eef5ff !important; border-color: #b9d2f2 !important;
}
.sm-field input:focus {
background: #ffffff !important; border-color: #111 !important;
box-shadow: 0 0 0 3px rgba(17,17,17,.08) !important;
}
.sm-field input:disabled {
background: #e3ecf8 !important; border-color: #d8e4f4 !important;
opacity: .55; cursor: not-allowed;
}
/* ── De balk met Opslaan ─────────────────────────────────────
Plakt onderin het paneel, zodat de knop in beeld staat ook als
de inhoud langer is dan het venster. Dat was al de bedoeling,
maar de regel deed niets: vier regels hierboven stonden losse
declaraties zonder selector (resten van het profielfoto-veld),
en daar liep de CSS-lezer op vast tot voorbij deze regel.
De scheiding is een haarlijn die alleen verschijnt als er
werkelijk inhoud onder de balk doorloopt. Een streep die er
altijd staat, zegt 'hier is meer' terwijl je al onderaan bent;
een schaduw eronder deed dat nog nadrukkelijker. */
.sm-footer {
position: sticky;
/* #smContent heeft 22px padding; zonder deze negatieve marges
plakt de balk 22px boven de onderrand en schemert er inhoud
door die strook. Hij loopt nu van rand tot rand. */
bottom: -22px;
z-index: 3;
display: flex; align-items: center; gap: 12px;
margin: 20px -22px -22px;
padding: 12px 22px 16px;
background: #eaf3ff;
}
.sm-footer::before {
content: "";
position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: rgba(17, 17, 17, 0.10);
opacity: 0;
transition: opacity .16s ease;
}
.sm-footer.zweeft::before { opacity: 1; }
/* Links de stand van zaken, rechts de knop. */
.sm-footer-status {
flex: 1;
min-width: 0;
font-size: 12px;
color: #8c9bb0;
transition: color .16s ease;
}
.sm-footer.gewijzigd .sm-footer-status { color: #111111; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.sm-footer::before, .sm-footer-status { transition: none; }
}
/* De marge boven is er om één reden: een knop die tegen de tekst
erboven aan plakt, leest als onderdeel van die tekst. Er hoort
een adempauze tussen wat er staat en wat je erop kunt doen. */
/* De knoppen in de instellingen komen uit het knoppensysteem
hierboven; .sm-save-btn zegt alleen nog dat er ruimte boven
hoort. Zie de toelichting daar bij .knop. */
.sm-save-btn { margin-top: 12px; }
.sm-footer .sm-save-btn { margin-top: 0; }
/* Een knop die geen knop hoort te lijken: terug, annuleren. */
.sm-tekstknop {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; color: #6b7a90; text-decoration: underline;
}
.sm-tekstknop:hover { color: #111; }
/* Even groen na het opslaan: het enige moment waarop een knop
zijn kleur verandert om iets te bevestigen. */
.sm-save-btn.saved { background: var(--green); color: #ffffff; }
/* ── Voortgang door het instellen ─────────────────────────────
Herstelcode, tweestapsverificatie, reservecodes. Staat op de
aanmeldpagina én op de inlogpagina: wie halverwege afhaakt en
later inlogt, komt daar precies terug in dezelfde reeks en
hoort dat ook te zien. */
.setup-voortgang { margin: 0 0 22px; }
.setup-voortgang[hidden] { display: none; }
.setup-segmenten { display: flex; gap: 5px; }
.setup-seg {
flex: 1; height: 4px; border-radius: 999px;
background: rgba(17, 17, 17, .14); overflow: hidden;
}
.setup-seg i {
display: block; height: 100%; width: 0; border-radius: 999px;
background: #2145e6;
transition: width .45s cubic-bezier(.25, 1, .4, 1);
}
.setup-seg.klaar i { width: 100%; background: var(--green); }
.setup-seg.nu i { width: 100%; }
.setup-namen { display: flex; gap: 5px; margin-top: 7px; }
.setup-naam {
flex: 1; font-size: 11px; font-weight: 600;
color: rgba(17, 17, 17, .40); text-align: center;
}
.setup-naam.nu { color: #111111; }
.setup-naam.klaar { color: var(--green); }
@media (prefers-reduced-motion: reduce) {
.setup-seg i { transition: none; }
}
/* ── Keuzeschakelaar ─────────────────────────────────────────
Twee of drie opties waarvan er één aan staat. Zelfde pilvorm en
zelfde vlak als een stille knop, zodat een keuze er niet anders
uitziet dan een actie. Wat gekozen is, is wit: dat is het enige
verschil met de knoppen eromheen, en meteen ook het duidelijkst
op dit lichte spoor. */
.sm-toggle-group {
display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%;
background: rgba(17, 17, 17, 0.07);
border-radius: 999px;
padding: 3px;
}
.sm-toggle-opt {
padding: 7px 16px;
border: none;
border-radius: 999px;
background: transparent;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
color: rgba(17, 17, 17, 0.5);
cursor: pointer;
transition: background .12s, color .12s;
}
.sm-toggle-opt:hover { color: #111111; }
.sm-toggle-opt:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.sm-toggle-opt.active {
background: #ffffff; color: #111111; font-weight: 700;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
/* Action cards */
.sm-action-card {
display: flex; align-items: center; gap: 12px;
padding: 11px 13px; border-radius: 10px;
background: #f7fbff; border: 1px solid #cfe0f7;
margin-bottom: 7px; cursor: default; transition: border-color .12s;
}
.sm-action-card.clickable { cursor: pointer; }
.sm-action-card.clickable:hover { border-color: #b9d2f2; background: #eef5ff; }
.sm-action-ico {
width: 34px; height: 34px; border-radius: 8px;
background: #111; color: rgba(255,255,255,.7);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sm-action-body { flex: 1; min-width: 0; }
.sm-action-title { font-size: 13px; font-weight: 600; color: #222; margin: 0 0 1px; }
.sm-action-sub { font-size: 11px; color: #aaa; margin: 0; }
.sm-action-pill {
font-size: 10px; color: #bbb; border-radius: 5px;
padding: 2px 7px; white-space: nowrap; flex-shrink: 0;
border: 1px solid #cfe0f7; font-weight: 500;
}
.sm-action-btn { flex-shrink: 0; }
/* Het `hidden`-attribuut wint niet vanzelf van een eigen
display-regel. Elk element hieronder met `display: grid` of
`flex` zou dus zichtbaar blijven terwijl JavaScript denkt dat
het weg is — en dat is precies wat er gebeurde met het
plankaartenrooster tijdens het aanmelden.
Eén regel voor het hele venster, want deze fout is niet te zien
tot iemand hem tegenkomt. */
#settingsModal [hidden], #betaalmuur [hidden] { display: none !important; }
/* Abonnement: twee blokken naast elkaar (proefperiode + plan) */
.sm-plan-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.sm-plan {
display: flex; flex-direction: column;
padding: 15px 15px 16px; border-radius: 12px;
background: #f7fbff; border: 1px solid #cfe0f7;
}
.sm-plan.is-current { border-color: #b9d2f2; background: #eef5ff; }
/* Staat er maar één kaart (een betalend account heeft geen
proefperiode meer), dan neemt hij de hele breedte. */
.sm-plan-grid > .sm-plan:only-child { grid-column: 1 / -1; }
/* ── Confetti ────────────────────────────────────────────────
Dezelfde als op de tegel van je laatst behaalde doel. Eén set
regels, en die staat hier omdat app.css overal geladen wordt en
dashboard.css alleen op het dashboard. Twee kopieën van
hetzelfde feest lopen vroeg of laat uit elkaar.
De valafstand is een variabele: de doeltegel en de
abonnementskaart zijn niet even hoog, en confetti die halverwege
ophoudt ziet er kapot uit. */
.gc-confetti {
position: absolute; width: 7px; height: 7px; border-radius: 2px;
z-index: 2; pointer-events: none;
animation: confetti-fall 3.6s linear infinite;
}
.c1 { left: 16%; top: -8px; background: #2145e6; animation-delay: 0s; }
.c2 { left: 32%; top: -8px; background: #ff6161; animation-delay: .8s; }
.c3 { left: 50%; top: -8px; background: #1dbc00; animation-delay: 1.6s; }
.c4 { left: 66%; top: -8px; background: #fff35f; animation-delay: .4s; }
.c5 { left: 80%; top: -8px; background: #2145e6; animation-delay: 2.3s; }
.c6 { left: 92%; top: -8px; background: #ff6161; animation-delay: 1.2s; }
@keyframes confetti-fall {
0% { transform: translateY(-10px) rotate(0); opacity: 0; }
12% { opacity: .95; }
100% { transform: translateY(var(--val-afstand, 150px)) rotate(320deg);
opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
/* Wie rust wil, wil ook rust zien. De stukjes blijven staan
waar ze beginnen, en dat is boven de rand: onzichtbaar. */
.gc-confetti { animation: none; }
}
/* Dezelfde stukjes, maar dan over de hele pagina en één keer.
Voor het uitnodigingsscherm van iemand die Free Forever krijgt.
Eén keer is hier het hele punt: een lus die blijft doorgaan is
geen feest meer maar een sirene, en je moet er een wachtwoord
naast kunnen bedenken. De stukjes zelf maakt het scherm aan; zie
templates/register.html. */
.pg-confetti {
position: fixed; inset: 0; overflow: hidden;
pointer-events: none; z-index: 0;
}
.pg-confetti .gc-confetti {
top: -12px;
--val-afstand: 105vh;
animation-iteration-count: 1;
animation-fill-mode: both;
}
/* ── Free Forever ──────────────────────────────────────────── */
.sm-plan-ff {
position: relative; overflow: hidden;
border-color: #ecdf41; background: #fff35f; color: #000;
--val-afstand: 260px;
}
/* De inhoud komt boven de confetti uit; de confetti zelf niet. */
.sm-plan-ff > *:not(.gc-confetti) { position: relative; z-index: 3; }
/* Op dit geel is grijze tekst niet meer te lezen; alles zwart. */
.sm-plan-ff .sm-plan-name,
.sm-plan-ff .sm-plan-price,
.sm-plan-ff .sm-plan-price span,
.sm-plan-ff .sm-plan-list li,
.sm-plan-ff .sm-plan-note,
.sm-plan-ff .sm-plan-sub { color: #000; }
.sm-plan-ff .sm-plan-list li svg { color: #000; }
.sm-plan-ff .sm-plan-tag.on { background: rgba(0,0,0,.12); color: #000; }
/* Geel op geel valt weg; dat ene stukje wordt hier wit. */
.sm-plan-ff .c4 { background: #fff; }
.sm-plan-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 10px;
}
.sm-plan-name { font-size: 13px; font-weight: 600; color: #222; margin: 0; }
.sm-plan-tag {
font-size: 10px; font-weight: 500; border-radius: 5px; padding: 1px 7px;
background: #d9e8fb; color: #7d8aa0;
}
.sm-plan-tag.on { background: rgba(29,188,0,.16); color: #4a7a3f; }
.sm-plan-price {
font-size: 24px; font-weight: 700; color: #111; margin: 0 0 10px;
letter-spacing: -.5px; line-height: 1.1;
}
.sm-plan-price span {
display: block; font-size: 11px; font-weight: 400; color: #999;
letter-spacing: 0; margin-top: 3px;
}
.sm-plan-track {
height: 5px; border-radius: 999px; background: #d9e8fb; overflow: hidden;
}
.sm-plan-fill {
display: block; height: 100%; border-radius: 999px; background: #111;
}
.sm-plan-note { font-size: 11px; color: #888; margin: 7px 0 12px; }
.sm-plan-sub { font-size: 11px; color: #aaa; margin: auto 0 0; padding-top: 10px; }
.sm-plan-list {
list-style: none; margin: 0 0 14px; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.sm-plan-list li {
display: flex; align-items: center; gap: 7px;
font-size: 12px; color: #555;
}
.sm-plan-list li svg { color: #4a7a3f; flex-shrink: 0; }
.sm-plan-btn { margin: auto 0 0; align-self: flex-start; }
@media (max-width: 560px) {
.sm-plan-grid { grid-template-columns: 1fr; }
}
/* Help cards */
.sm-help-card {
display: flex; align-items: center; gap: 11px;
padding: 11px 13px; border-radius: 10px;
background: #f7fbff; border: 1px solid #cfe0f7;
text-decoration: none; margin-bottom: 7px;
transition: border-color .12s, background .12s;
}
.sm-help-card:hover { border-color: #b9d2f2; background: #eef5ff; }
.sm-help-ico {
width: 32px; height: 32px; border-radius: 8px;
background: #111; color: rgba(255,255,255,.7);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sm-help-body { flex: 1; }
.sm-help-title { font-size: 13px; font-weight: 600; color: #222; margin: 0 0 1px; }
.sm-help-sub { font-size: 11px; color: #aaa; margin: 0; }
/* Over */
.sm-version-chip {
display: inline-flex; align-items: center; gap: 7px;
margin-bottom: 14px; font-size: 12px; color: #aaa;
}
.sm-version-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sm-over-info { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sm-over-item {
background: #f7fbff; border: 1px solid #cfe0f7;
border-radius: 9px; padding: 11px 13px;
}
.sm-over-item-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #bbb; margin: 0 0 2px; }
.sm-over-item-value { font-size: 13px; font-weight: 600; color: #222; margin: 0; }
/* Responsive */
@media (max-width: 600px) {
#settingsOverlay { padding: 16px; align-items: center; }
/* Gecentreerde dialoog met een stabiele hoogte: groeit NIET mee
met de inhoud (geen gespring bij tabwissel) en zit niet
vastgeplakt onderaan. De inhoud scrollt intern en de
Opslaan-knop blijft onderaan staan. */
#settingsModal {
width: 100%; max-width: 100%;
height: min(600px, calc(100dvh - 32px));
max-height: calc(100dvh - 32px);
border-radius: 16px;
}
#smBody { min-height: 0; }
#smBody { flex-direction: column; }
/* Tabs als terugloopbare (wrap) rij, elk op contentbreedte —
geen horizontale scroll met full-width tabs meer. */
#smNav {
width: 100%; border-right: none; border-bottom: 1px solid #cfe0f7;
padding: 8px; display: flex; flex-wrap: wrap; gap: 4px;
background: #eaf3ff; flex-shrink: 0; overflow: visible;
}
.sm-nav-btn { white-space: nowrap; flex: 0 0 auto; width: auto; }
.sm-nav-group { display: none; }
#smContent { padding: 16px 16px 16px; }
/* De balk volgt de kleinere padding van het paneel hier. */
.sm-footer {
bottom: -16px;
margin: 18px -16px -16px;
padding: 11px 16px 14px;
}
}
/* ── Gevarenzone ──────────────────────────────────────────────
Voor handelingen die niet terug te draaien zijn. Rood, met
ruimte eromheen: het mag niet lijken op de knoppen ernaast,
want dan klik je er per ongeluk op. */
.gz {
border: 1.5px solid #f2c2c2;
background: #fffafa;
border-radius: 14px;
padding: 18px 20px;
}
.gz-kop {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 700; color: #a01818;
margin-bottom: 8px;
}
.gz-tekst {
font-size: 13px; line-height: 1.6; color: #6b3535;
margin: 0 0 16px;
}
.gz-fout {
background: #fee2e2; color: #7f1d1d; border-radius: 9px;
padding: 11px 13px; font-size: 13px; line-height: 1.5;
margin: 12px 0 0; white-space: pre-line;
}
.gz-waarschuwing {
background: #fef3c7; color: #78350f; border-radius: 9px;
padding: 11px 13px; font-size: 12.5px; line-height: 1.5;
margin: 0 0 14px; white-space: pre-line;
}
/* Wat je hebt tegenover wat je krijgt. Het gaat erom dat je ziet
wát je kwijtraakt, niet alleen dát je iets kwijtraakt. */
.gz-vergelijk {
display: flex; align-items: center; gap: 14px;
background: #fff; border-radius: 11px;
padding: 14px 16px; margin: 16px 0 14px;
}
.gz-vergelijk > div { flex: 1; }
.gz-vergelijk-label {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: #9a7a7a; margin: 0 0 3px; font-weight: 600;
}
.gz-vergelijk-waarde {
font-size: 13.5px; color: #111; margin: 0; line-height: 1.45;
}
.gz-pijl { color: #c99; flex-shrink: 0; }
.gz-vink {
display: flex; align-items: flex-start; gap: 9px;
font-size: 13px; color: #6b3535; line-height: 1.5;
margin: 0 0 16px; cursor: pointer;
}
.gz-vink input {
width: auto !important; margin: 2px 0 0 !important;
flex-shrink: 0; accent-color: #a01818;
}
.gz-veld-label {
display: block; font-size: 12.5px; color: #6b3535;
margin: 0 0 6px;
}
.gz-veld-label code {
background: #fff; padding: 2px 6px; border-radius: 5px;
font-size: 12px; color: #a01818; font-weight: 700;
}
.gz-veld {
width: 100%; margin: 0 0 16px !important;
font-size: 15px !important; letter-spacing: .06em;
}
.gz-knop {
width: 100%; padding: 13px 16px; border: 0; border-radius: 10px;
background: #c62828; color: #fff; font-size: 14px; font-weight: 700;
cursor: pointer; line-height: 1.35;
}
.gz-knop:hover:not(:disabled) { background: #a01818; }
.gz-knop:disabled {
background: #e8d4d4; color: #b09a9a; cursor: not-allowed;
}
.gz-knop-stil {
width: 100%; padding: 11px 16px; margin-top: 8px;
border: 1.5px solid #e3cccc; border-radius: 10px;
background: #fff; color: #6b3535; font-size: 13.5px;
font-weight: 600; cursor: pointer;
}
.gz-knop-stil:hover { background: #fff0f0; }
/* ── Invoerpagina: even wachten op een andere maand ─────────────
De gegevens komen van de server, en over het internet duurt dat
een paar tientallen milliseconden. De tabel dimt dan iets, zodat
zichtbaar is dat er iets onderweg is.
Let op de transition-delay. Die zorgt dat je bij een snel
antwoord niets ziet: pas als het langer dan 120 ms duurt begint
het dimmen. Zonder die vertraging krijg je een flits bij élke
klik, en dat voelt onrustiger dan het wachten zelf.
Bewust geen spinner. Onder de tweehonderd milliseconde flikkert
die, en dan lijkt het juist trager te gaan. */
#entry-content {
transition: opacity 0.14s ease;
}
#entry-content.bezig {
opacity: 0.55;
transition-delay: 0.12s;
pointer-events: none; /* niet typen in velden die zo vervangen worden */
}
/* Wie liever geen beweging ziet, krijgt hem ook niet. */
@media (prefers-reduced-motion: reduce) {
#entry-content { transition: none; }
}
/* De knop 'Huidige maand' verschijnt zodra je een andere periode
bekijkt. Hij neemt altijd ruimte in — ook als hij verborgen is —
zodat de balk niet verspringt op het moment dat hij opduikt.
Dat verspringen was het schokje. */
#currentMonthBtn {
transition: opacity 0.16s ease, transform 0.16s ease;
}
#currentMonthBtn.verborgen {
opacity: 0;
transform: scale(0.94);
pointer-events: none;
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
#currentMonthBtn { transition: none; }
}
/* Het versienummer in de voettekst. Rustig, maar wel te vinden:
bij een supportvraag wil je weten wat iemand voor zich heeft. */
.site-foot-versie {
opacity: 0.65;
font-variant-numeric: tabular-nums;
cursor: help; /* de commit staat in de title */
}
/* ── Geen ongevraagd inzoomen op de telefoon ──────────────────
Safari op de iPhone zoomt vanzelf in zodra je een invoerveld
aantikt waarvan de tekst kleiner is dan 16px, en zoomt daarna
niet meer terug. Dat is het rare inzoomen bij formulieren.
De oplossing is niet het inzoomen uitzetten — dat negeert de
iPhone toch, en het haalt bij iedereen de mogelijkheid weg om
kleine cijfers groter te maken. De oplossing is: op smalle
schermen zijn velden minstens 16px. Groter mag, kleiner niet.
Dit staat achteraan omdat het de regels hierboven moet
overstemmen; de inlog-, aanmeld- en herstelschermen doen het
al in hun eigen opmaak. */
@media (max-width: 768px) {
input,
select,
textarea,
.sm-field input,
.sm-field select,
.sm-field textarea,
.currency-input input {
font-size: 16px;
}
/* .gz-veld zet zijn maat met !important, dus hier ook. */
.gz-veld { font-size: 16px !important; }
}
/* De tweede bron van ongevraagd zoomen: dubbeltikken. Tik je twee
keer snel op een knop — of tik je één keer en telt de telefoon
dat als twee — dan zoomt hij in. `manipulation` zegt: op dit
element hoort geen dubbeltik-zoom. Scrollen en knijpen blijven
gewoon werken, en het scheelt en passant de wachttijd van een
derde seconde die de browser anders neemt om te kijken of er
nog een tweede tik komt. */
button,
a,
label,
summary,
input[type="submit"],
input[type="button"],
[data-doe] {
touch-action: manipulation;
}