/* 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;
}
/* De ruimte voor de schuifbalk blijft bestaan als een venster de
pagina vastzet (overflow: hidden op body). Anders verdwijnt de
balk en schuift alles erachter een stukje opzij: dat zag je als
een hapering bij het openen van Account. Met schuifbalken die
over de inhoud liggen (macOS zonder muis) verandert er niets. */
html { scrollbar-gutter: stable; }
: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 ───────────────────────────────────────
Een tekening, en geen tekst meer. Het handschrift onder de
woorden is met geen enkel lettertype na te maken, dus een
bestand en geen tekst.
Wat dat kost: de naam zit vast in het plaatje. APP_NAME
instelbaar houden heeft voor het logo geen betekenis meer --
wie de app anders noemt heeft ook een nieuwe tekening nodig.
De alt blijft wél {{ app_name }} volgen, zodat een schermlezer
hoort wat de configuratie zegt en niet wat de tekenaar tekende.
De maat staat hier bewust niet in: op de toegangsschermen is
dit een kop en onderaan de app een afzender. Die zetten hun
eigen breedte. De hoogte volgt uit de verhouding van het
bestand, dus die hoeft nergens genoemd te worden. De 220px
hieronder is alleen een vangnet voor een plek die vergeet een
maat te kiezen. */
.woordmerk {
display: inline-block;
width: 220px;
max-width: 100%;
height: auto;
}
.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; }
}
/* ── De sluitknop ────────────────────────────────────────────
Eén kruisje voor de hele app: rond, een lichte tint, en bij
aanwijzen donkerder. Waar hij staat bepaalt de plek zelf; hoe
hij eruitziet staat alleen hier. Er waren er twee: een rond
bij "Gebruik als app" en een lichtblauw vierkantje bij
Account. Een kruisje is een kruisje.
Het icoon is altijd hetzelfde (14px, lijn 2.4); zie
SLUITKNOP_SVG in blad.js voor wie hem in JavaScript maakt. */
.sluitknop {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
width: 32px; height: 32px; padding: 0;
border: 0; border-radius: 50%;
background: rgba(17, 17, 17, .06); color: #6b7a90;
cursor: pointer;
transition: background .15s, color .15s, transform .12s;
-webkit-tap-highlight-color: transparent;
}
.sluitknop:hover { background: rgba(17, 17, 17, .12); color: #111111; }
.sluitknop:active { transform: scale(.92); }
.sluitknop:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.sluitknop { transition: none; }
.sluitknop: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; }
}
/* ── 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-bijdrage { margin: 12px 0 0; font-size: 12.5px; color: #555; }
.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;
}
/* De achtergrond faadt mee in met het venster. Kwam hij er in één
keer, dan oogde het openen als een schokje: eerst het donker,
dan pas het venster dat binnenschuift. */
#settingsOverlay.open { display: flex; animation: smFade .15s ease; }
@keyframes smFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
#settingsOverlay.open, #settingsModal { animation: none; }
}
/* ── 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 is een .sluitknop; zie daar. */
#smTerugBtn {
display: none; width: 32px; height: 32px; margin-left: -6px;
border: none; border-radius: 9px; background: transparent; color: #111;
cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0;
}
#smTerugBtn:hover { background: #d9e8fb; }
/* 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; }
/* Uitloggen staat onderaan het menu, nu de onderbalk geen
accountmenu meer heeft. Een link, dus zonder onderstreping. */
.sm-nav-uit { margin-top: 12px; text-decoration: none; color: #e03c3c; }
.sm-nav-uit:hover { background: #fde8e8; color: #c62828; }
/* 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. */
/* Het instellen van een authenticator, in de instellingen. De
koppelknop is een link naar otpauth: en geen knop: één tik en je
wachtwoordmanager opent met dit account erin. Zie de
aanmeldschermen voor waarom dat de eerste weg is en scannen de
tweede. */
.s-app-koppel { display: block; width: 100%; box-sizing: border-box;
text-align: center; text-decoration: none;
margin: 0 0 10px; }
.s-app-anders { margin: 0 0 12px; }
.s-app-anders > summary { cursor: pointer; font-size: 13px;
font-weight: 600; padding: 6px 0;
color: rgba(17,17,17,.62); }
.s-app-qr { background: #fff; border-radius: 12px; padding: 12px;
display: flex; justify-content: center; margin: 0 0 10px; }
.s-app-qr svg { display: block; width: 100%; max-width: 200px;
height: auto; }
/* Een eigen regel en niet .sm-code: die bestaat alleen binnen
.sm-codes, en erbuiten erft hij de grijze notitiekleur. Gelijk
aan hoe de code op de aanmeldschermen eruitziet. */
.s-app-geheim { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 15px; letter-spacing: .06em; text-align: center;
background: #fff; border: 1.5px solid #cfe0f7;
border-radius: 10px; padding: 12px; margin: 0 0 10px;
color: #111; user-select: all; word-break: break-all; }
.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; }
/* ── 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; }
}
/* ── Abonnement afsluiten ────────────────────────────────────
Twee stappen in hetzelfde paneel. Eerst de kaart: maand of jaar.
Dan afronden: hoe je betaalt, je naam en eventueel je bedrijf,
en één gele knop die zegt wat er gebeurt. De rest gebeurt bij
Moneybird. */
/* Een leeg label of een lege regel neemt geen ruimte in. */
.sm-plan-tag:empty, #ab-stand:empty { display: none; }
/* Maand of jaar, op de volle breedte van de kaart: naast elkaar
passen ze ook in de smalle kaart naast de proefperiode. */
.ab-periode { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.ab-periode[hidden] { display: none; }
.ab-periode .sm-toggle-opt { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
.sm-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .sm-plan-grid { grid-template-columns: minmax(0, 1fr); } }
/* Eén regel kop: terug en de titel naast elkaar. */
.ab-kop { display: flex; align-items: center; gap: 6px; margin: -3px 0 2px -5px; }
.ab-kop .sm-pane-title { margin: 0; }
.ab-terug {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border: 0; border-radius: 7px;
background: none; color: #111; cursor: pointer; flex-shrink: 0;
}
.ab-terug:hover { background: #d9e8fb; }
.ab-methodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-methode {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; height: 88px; border-radius: 12px; cursor: pointer;
background: #f7fbff; border: 1.5px solid #cfe0f7;
transition: border-color .12s, background .12s;
}
.ab-methode:hover { border-color: #b9d2f2; }
.ab-methode:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.ab-methode.active {
background: #fff; border-color: #111;
box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
.ab-methode img { display: block; height: 26px; width: auto; }
.ab-methode-tekst {
font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #6b7a90;
}
.ab-methode.active .ab-methode-tekst { color: #111; }
/* Het Bancontact-bestand heeft veel vrije ruimte rondom het merk. */
.ab-methode img.ab-methode-bc { height: 44px; margin: -9px 0; }
.ab-naam { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-naam input, .ab-zakelijk input { width: 100%; box-sizing: border-box; }
.ab-vink {
display: flex; align-items: center; gap: 9px; cursor: pointer;
font-size: 14px; font-weight: 600; color: #111;
}
.ab-zakelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ab-zakelijk[hidden] { display: none; }
.ab-zakelijk .ab-breed { grid-column: 1 / -1; }
.ab-land { display: flex; width: 100%; box-sizing: border-box; }
.ab-land .sm-toggle-opt { flex: 1; }
.sm-field input.ab-mist { border-color: var(--red) !important; }
.ab-betaal { margin-top: 14px; }
/* Verplicht vóór het afsluiten (art. 6:230m BW), maar niet luid. */
.ab-bedenk { font-size: 12px; color: #6b7a90; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.ab-bedenk a { color: inherit; }
/* Herroepen: klein en onderaan, maar wel leesbaar en herkenbaar als link. */
.ab-herroep { text-align: center; margin: 22px 0 0; }
.ab-herroep-link {
border: 0; background: none; padding: 4px 6px; cursor: pointer;
font: 500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #6b7a90; text-decoration: underline; text-underline-offset: 2px;
}
.ab-herroep-link:hover { color: #111; }
.ab-herroep-stap { text-align: left; margin-top: 10px; }
.ab-bedenk-uitleg { margin: 0 0 4px; }
.ab-herroep-label { margin-top: 14px; }
#ab-herroep-naam { width: 100%; box-sizing: border-box; }
.ab-herroep-knoppen { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ab-herroepen-klaar { color: #111 !important; }
.ab-privacy {
display: flex; justify-content: center; align-items: flex-start; gap: 6px;
font-size: 12px; color: #6b7a90; margin: 10px 0 0; line-height: 1.5; text-align: center;
}
.ab-privacy svg { flex: none; margin-top: 2px; color: #4a7a3f; }
.ab-privacy a { color: inherit; }
@media (max-width: 600px) {
.ab-zakelijk { grid-template-columns: 1fr; }
/* Op de telefoon staan de pijl en de naam al in de kop. */
.ab-kop { display: none; }
}
/* ── Feest: terug van de betaling ────────────────────────────
Over alles heen, ook over de betaalmuur. De confetti valt één
keer en blijft dan liggen waar hij niet in de weg zit. */
.feest {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: 16px; background: rgba(17, 17, 17, .38);
animation: feestIn .2s ease-out;
}
.feest[hidden] { display: none; }
@keyframes feestIn { from { opacity: 0; } to { opacity: 1; } }
.feest-kaart {
position: relative; z-index: 2;
width: 100%; max-width: 420px; text-align: center;
background: #ffffff; border-radius: 24px; padding: 32px 26px 24px;
box-shadow: 0 20px 60px rgba(17, 17, 17, .25);
animation: feestKaart .35s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes feestKaart {
from { opacity: 0; transform: translateY(14px) scale(.96); }
to { opacity: 1; transform: none; }
}
.feest-vink {
width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
background: var(--brand); color: #111;
display: grid; place-items: center;
}
.feest-titel {
font-family: "GeneralSans", -apple-system, sans-serif;
font-size: 24px; font-weight: 700; letter-spacing: -.3px;
color: #111; margin: 0 0 10px;
}
.feest-tekst { font-size: 14.5px; line-height: 1.55; color: #3d4a5e; margin: 0 0 10px; }
.feest-voet { font-size: 12.5px; color: #8c9bb0; margin: 0 0 20px; }
.feest-knop { width: 100%; padding: 14px; font-size: 15px; }
.feest-draai {
width: 46px; height: 46px; margin: 4px auto 18px; border-radius: 50%;
border: 4px solid rgba(17, 17, 17, .1); border-top-color: #111;
animation: feestDraai .8s linear infinite;
}
@keyframes feestDraai { to { transform: rotate(360deg); } }
.feest-knop:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.feest-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.feest-confetti i {
position: absolute; top: -24px; display: block;
width: var(--b, 9px); height: var(--h, 14px); border-radius: 2px;
background: var(--kleur, var(--brand));
animation: feestVal var(--duur, 3.4s) cubic-bezier(.25, .6, .4, 1) var(--wacht, 0s) forwards;
opacity: 0;
}
@keyframes feestVal {
0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
85% { opacity: 1; }
100% { opacity: 0; transform: translate3d(var(--drift, 0px), 105vh, 0) rotate(var(--draai, 540deg)); }
}
@media (prefers-reduced-motion: reduce) {
.feest, .feest-kaart, .feest-draai { animation: none; }
.feest-confetti { display: none; }
}
/* Help cards */
.sm-help-card {
display: flex; align-items: center; gap: 11px;
padding: 13px 16px; border-radius: 12px;
background: #ffffff; border: 1px solid transparent;
text-decoration: none; margin-bottom: 8px;
transition: border-color .12s, background .12s;
}
.sm-help-card:hover { border-color: #cfe0f7; }
.sm-help-ico {
width: 32px; height: 32px; border-radius: 8px;
background: none; color: #111;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sm-help-ico svg { width: 22px; height: 22px; }
.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; }
/* Wat tot 0.27.0 onderaan elke pagina stond: het woordmerk,
copyright, groene stroom, Privacy en Voorwaarden. */
.sm-over-merk { display: block; width: 140px; margin: 2px 0 14px; }
/* De bewegende versie heeft rondom wat lucht (508x210 tegen
500x196), zodat de woorden bij het stuiteren niet tegen de rand
komen. Breedte en marge rekenen die eraf: de tekening staat
precies waar het plaatje stond. */
.sm-over-anim {
display: block;
width: calc(140px * 508 / 500);
height: auto;
margin: calc(2px - 140px * 10 / 500) calc(140px * -4 / 500)
calc(14px - 140px * 4 / 500);
}
.sm-over-voet { font-size: 12px; color: #9a9b96; margin: 10px 0 0; line-height: 1.6; }
.sm-over-voet + .sm-over-voet { margin-top: 2px; }
.sm-over-voet a { color: inherit; text-decoration: none; }
.sm-over-voet a:hover { text-decoration: underline; }
.sm-over-blad {
white-space: nowrap;
/* Groen, blaadje en woorden samen: de enige regel die over
iets buiten de app zelf gaat. De rest blijft grijs. */
color: var(--green);
}
.sm-over-blad svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
/* Responsive */
@media (max-width: 600px) {
/* Op de telefoon het hele scherm, en één ding tegelijk: eerst
de lijst met onderdelen, dan het onderdeel zelf. Eerst stond
het menu als drie rijen knoppen boven een klein venster, en
bleef er voor de inhoud weinig ruimte over. */
#settingsOverlay { padding: 0; align-items: stretch; }
#settingsModal {
width: 100%; max-width: 100%;
height: 100dvh; max-height: 100dvh;
border-radius: 0; border: 0;
padding-top: env(safe-area-inset-top);
}
#smHeader { padding: 12px 16px; gap: 8px; justify-content: flex-start; }
#smHeader h2 { flex: 1; font-size: 17px !important; }
#smBody { min-height: 0; flex-direction: column; }
/* De lijst: grote rijen met een pijltje, gegroepeerd. */
#smNav {
width: 100%; border-right: none; flex: 1;
padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
overflow-y: auto;
}
.sm-nav-group { padding: 18px 4px 8px; font-size: 11px; color: #8c9bb0; }
.sm-nav-btn {
padding: 14px 14px; font-size: 15px; color: #111; gap: 12px;
background: #ffffff; border-radius: 12px; margin-bottom: 6px;
}
.sm-nav-btn svg { width: 18px; height: 18px; opacity: .8; }
.sm-nav-btn::after {
content: ""; margin-left: auto; width: 7px; height: 7px;
border-right: 2px solid #b4bfcf; border-top: 2px solid #b4bfcf;
transform: rotate(45deg);
}
.sm-nav-btn.active { box-shadow: none; font-weight: 500; }
.sm-nav-uit { margin-top: 18px; color: #e03c3c; }
.sm-nav-uit::after { display: none; }
#smContent { display: none; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
/* Een onderdeel open: de lijst weg, de inhoud op het hele scherm. */
#settingsModal.sm-open-paneel #smNav { display: none; }
#settingsModal.sm-open-paneel #smContent { display: block; }
#settingsModal.sm-open-paneel #smTerugBtn { display: flex; }
/* De titel staat al in de kop; in het paneel zou hij dubbel staan. */
#settingsModal.sm-open-paneel .sm-pane > .sm-pane-title:first-child { display: none; }
/* 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; }
/* ── Rust in de instellingen ─────────────────────────────────
Gewone koppen in plaats van kleine hoofdletters, en elke
instelling in een eigen wit blok in plaats van scheidingslijnen.
Zo zie je in één oogopslag waar iets begint en ophoudt. Staat
hier, na alle regels erboven, omdat het die bewust overschrijft. */
.sm-label, .sm-section-label, .sm-nav-group {
text-transform: none; letter-spacing: 0;
}
.sm-label { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 8px; }
.sm-section-label { font-size: 15px; font-weight: 600; color: #111; margin: 22px 0 10px; }
.sm-pane > .sm-section-label:first-of-type { margin-top: 4px; }
.sm-nav-group { font-size: 12px; color: #8c9bb0; }
.sm-pane-desc { font-size: 13px; color: #6b7a90; }
.sm-field-note { font-size: 12px; color: #8c9bb0; line-height: 1.5; margin-top: 8px; }
.sm-sep { height: 0; background: none; margin: 8px 0 0; }
.sm-pane .sm-field {
background: #ffffff; border: 0; border-radius: 12px;
padding: 14px 16px; margin-bottom: 10px;
}
/* Binnen een blok dat al wit is, geen tweede blok. */
.sm-pane .sm-field .sm-field {
background: none; border: 0; padding: 0; margin-bottom: 0;
}
.sm-pane .sm-field > .sm-field-note:last-child { margin-bottom: 0; }
.sm-action-card { background: #ffffff; border: 0; border-radius: 12px; padding: 14px 16px; }
.sm-field-note a { color: inherit; }
/* Geel is voor de ene handeling waar het om draait; wijzigen en
instellen zijn grijs, dan staat er geen rij gele knoppen. */
.sm-action-title { font-size: 14px; color: #111; }
.sm-action-sub { font-size: 12px; color: #8c9bb0; }
/* De gevarenzone mag opvallen, maar hoeft niet te schreeuwen. */
.gz { border: 1px solid #f2d7d7; background: #ffeded; border-radius: 12px; padding: 16px; }
.gz-kop { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.gz-kop svg { width: 15px; height: 15px; }
.gz-tekst { font-size: 13px; line-height: 1.55; color: #6b5555; margin-bottom: 14px; }
.gz-knop-stil { margin-top: 0; padding: 10px 16px; font-size: 13.5px; }
.gz-vergelijk-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
/* Inloggegevens wijzigen: lucht tussen de velden, en de knoppen
los van het laatste veld. */
#s-inlog-vraag label.sm-label { margin-top: 18px; }
#s-inlog-vraag > div > label.sm-label:first-child { margin-top: 0; }
#s-inlog-vraag #s-inlog-fout:empty { display: none; }
#s-inlog-vraag #s-inlog-oordeel:empty { display: none; }
#s-inlog-vraag .sm-save-btn { margin-top: 18px; }
/* Een bedragveld met een vast euroteken ervoor. */
.sm-bedrag { position: relative; }
.sm-bedrag > span {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-size: 14px; color: #8c9bb0; pointer-events: none;
}
.sm-field .sm-bedrag input { padding-left: 30px; width: 100%; box-sizing: border-box; }
/* ── 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; }
}
/* ── 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;
}
/* Wel voorgelezen, niet getoond. Voor een bedrag dat als rollende cijfers
in beeld staat: een schermlezer leest anders "0 1 2 3 4 5 6 7 8 9". */
.voorlezen {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ── Geld Geteld als app ────────────────────────────────────────────────────
De tip op het dashboard (een kaart onder "Deze maand") en het onderdeel
Account › Als app. Allebei tonen ze het icoon zoals het op je
beginscherm komt te staan. */
.app-tip {
position: relative;
display: flex; align-items: flex-start; gap: 18px;
border-radius: 30px; padding: 22px 24px;
/* 36px lucht boven en onder, tot de voortgangsbalk en tot "Deze
maand". De marges daarvan vallen hierin samen, dus dit is wat je ziet. */
margin: 36px 0;
}
.app-tip[hidden] { display: none; }
/* Het kruisje is een .sluitknop; hier alleen waar hij staat. */
.app-tip-sluit { position: absolute; top: 14px; right: 14px; }
.app-tip-app {
margin: 0; flex-shrink: 0; width: 64px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.app-tip-icoon {
width: 52px; height: 52px; border-radius: 13px; display: block;
box-shadow: 0 3px 0 rgba(0, 0, 0, .14);
}
.app-tip-app figcaption {
font-size: 10px; line-height: 1.2; color: #111111; font-weight: 600; white-space: nowrap;
}
.app-tip-tekst { min-width: 0; padding-right: 26px; }
.app-tip-titel {
font-family: "GeneralSans", -apple-system, sans-serif;
font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.2px;
}
.app-tip-tekst > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #4a5568; }
.app-tip-stappen {
margin: 12px 0 0; padding-left: 20px;
font-size: 13.5px; line-height: 1.7; color: #111111;
}
.app-tip-stappen svg { vertical-align: -2px; }
.app-tip-stappen b { font-weight: 600; }
.app-tip-knoppen { margin-top: 14px; }
@media (max-width: 640px) {
.app-tip { gap: 14px; padding: 20px 18px; }
.app-tip-titel { font-size: 16.5px; }
}
/* Account › Als app: het icoon met de knop of de melding ernaast. */
.app-uitleg { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; }
.app-zo { margin: 0 0 8px; font-size: 13px; color: #4a5568; }
.app-al { margin: 0; font-size: 13.5px; color: #3b6d11; font-weight: 600; }
#sm-pane-app .sm-section-label { margin-top: 20px; }
#sm-pane-app .app-tip-stappen { margin-top: 6px; }
/* ── Account › Als app: de telefoon die het voordoet ───────────────────────
Links een nagebouwde telefoon (Safari in iOS 26, Chrome op Android) met
een vinger die tikt; wat hij aantikt licht even op, zoals op een echt
toestel. Rechts de stappen.
iPhone (12 s): 0–12 ··· · 12–22 menu, Deel · 22–38 deelblad · 38–56 Voeg
toe · 56–100 beginscherm
Android (10 s): 0–14 ⋮ · 14–36 menu · 36–58 dialoog · 58–100 beginscherm
Wie minder beweging wil, ziet alleen de stappen. */
.demo-banner { display: flex; align-items: center; gap: 28px; margin: 6px 0 4px; }
.demo-banner .demo-stappen { flex: 1; min-width: 0; margin: 0; }
/* De telefoon. */
.tel {
flex-shrink: 0; position: relative; width: 140px; height: 300px; box-sizing: content-box;
border: 6px solid #0d0d0d; border-radius: 30px; background: #000; overflow: hidden;
box-shadow: 0 0 0 1.5px #3a3a3a, 0 18px 40px rgba(17, 30, 70, .28);
}
.tel-scherm {
position: absolute; inset: 0; overflow: hidden; border-radius: 24px; background: #fff;
font: 500 7px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111;
}
.tel-scherm > * { position: absolute; }
.tel-scherm p { margin: 0; }
.tel-scherm img { display: block; }
/* Statusbalk: tijd links, ontvangst, wifi en batterij rechts. */
.tel-status {
top: 0; left: 0; right: 0; height: 22px; z-index: 6;
display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px;
font-size: 8px; color: #111;
}
.tel-status b { font-weight: 700; }
.tel-status em { display: flex; align-items: center; gap: 3px; }
.tel-status-licht { color: #fff; }
.tel-ei { position: absolute; left: 50%; top: 6px; width: 40px; height: 12px; margin-left: -20px; border-radius: 8px; background: #000; }
.tel-bars { width: 9px; height: 6px; background: linear-gradient(90deg, currentColor 0 20%, transparent 20% 27%, currentColor 27% 47%, transparent 47% 54%, currentColor 54% 74%, transparent 74% 80%, currentColor 80%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.tel-wifi { width: 8px; height: 6px; background: currentColor; clip-path: polygon(50% 100%, 0 25%, 20% 0, 80% 0, 100% 25%); }
.tel-batt { width: 13px; height: 6px; border-radius: 2px; border: 1px solid currentColor; box-sizing: border-box; box-shadow: inset 0 0 0 1px transparent; background: linear-gradient(90deg, currentColor 70%, transparent 70%) content-box; padding: 1px; }
.tel-status-and { padding: 0 12px; }
/* De pagina: een stukje Geld Geteld. */
.tel-pagina { inset: 0; background: var(--bg); }
.tel-app { position: absolute; left: 0; right: 0; top: 30px; padding: 0 12px; display: flex; flex-direction: column; align-items: center; }
.tel-pixel .tel-app { top: 54px; }
.tel-app small { font-size: 7px; color: #3d4a5e; margin-top: 8px; }
.tel-app b { font-family: "GeneralSans", -apple-system, sans-serif; font-size: 22px; letter-spacing: -.5px; margin: 2px 0 4px; }
.tel-pil { background: #111; color: #fff35f; border-radius: 99px; padding: 2px 6px; font-weight: 600; font-size: 6.5px; }
.tel-snaren { display: flex; align-items: flex-end; gap: 4px; height: 52px; margin: 12px 0 10px; }
.tel-snaren i { width: 2px; border-radius: 2px; background: #111; }
.tel-snaren i:nth-child(1) { height: 30%; } .tel-snaren i:nth-child(2) { height: 38%; }
.tel-snaren i:nth-child(3) { height: 35%; } .tel-snaren i:nth-child(4) { height: 48%; }
.tel-snaren i:nth-child(5) { height: 55%; } .tel-snaren i:nth-child(6) { height: 52%; }
.tel-snaren i:nth-child(7) { height: 66%; } .tel-snaren i:nth-child(8) { height: 74%; }
.tel-snaren i:nth-child(9) { height: 86%; } .tel-snaren i:nth-child(10) { height: 100%; }
.tel-tegel { display: block; width: 100%; height: 34px; border-radius: 10px; background: #eaf3ff; margin-bottom: 6px; }
/* Safari in iOS 26: de balk zweeft onderin, als glas. */
.tel-safari { left: 6px; right: 6px; bottom: 9px; height: 26px; display: flex; align-items: center; gap: 4px; z-index: 3; }
.tel-rond-knop, .tel-adres {
display: flex; align-items: center; justify-content: center; height: 26px;
background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px);
box-shadow: 0 1px 6px rgba(0, 0, 0, .14), inset 0 0 0 .5px rgba(255, 255, 255, .9);
font-style: normal; color: #111;
}
.tel-rond-knop { width: 26px; border-radius: 50%; flex-shrink: 0; }
.tel-meer { font-size: 11px; font-weight: 800; letter-spacing: -1px; }
.tel-safari .tel-adres { flex: 1; border-radius: 13px; gap: 3px; font-size: 7px; }
/* Het menu onder ···. */
.tel-pop {
right: 6px; bottom: 40px; width: 104px; padding: 4px; border-radius: 14px; z-index: 4;
background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
transform-origin: bottom right; transform: scale(.4); opacity: 0;
}
.tel-pop p { height: 20px; padding: 0 8px; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; font-size: 7.5px; }
/* Het deelblad. */
.tel-blad {
left: 0; right: 0; bottom: 0; height: 200px; z-index: 5; padding: 10px 8px 0;
background: #f2f2f7; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
transform: translateY(105%);
}
.tel-blad-kop { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: .5px solid #d1d1d6; }
.tel-blad-kop img { width: 22px; height: 22px; border-radius: 5px; }
.tel-blad-kop span, .tel-kaart span, .tel-dialoog span { display: flex; flex-direction: column; color: #8e8e93; font-size: 6.5px; }
.tel-blad-kop b, .tel-kaart b, .tel-dialoog b { color: #111; font-size: 7.5px; }
.tel-blad-apps { display: flex; gap: 9px; padding: 9px 2px; }
.tel-blad-apps i { width: 24px; height: 24px; border-radius: 50%; }
.tel-lijst { background: #fff; border-radius: 10px; overflow: hidden; }
.tel-lijst p { height: 20px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border-bottom: .5px solid #e5e5ea; font-size: 7.5px; }
/* Zet op beginscherm. */
.tel-toevoegen {
left: 0; right: 0; top: 28px; bottom: 0; z-index: 5; background: #f2f2f7; border-radius: 16px 16px 0 0;
box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); transform: translateY(105%);
}
.tel-nav { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 10px 7px; font-size: 5.8px; white-space: nowrap; }
.tel-nav span { color: #0a84ff; }
.tel-nav em { color: #0a84ff; font-style: normal; font-weight: 700; }
.tel-kaart { margin: 4px 8px; padding: 8px; background: #fff; border-radius: 10px; display: flex; align-items: center; gap: 7px; }
.tel-kaart img { width: 28px; height: 28px; border-radius: 7px; }
.tel-schakel { justify-content: space-between; font-size: 7.5px; }
.tel-schakel span { color: #111; font-size: 7.5px; }
.tel-schakel i { width: 22px; height: 13px; border-radius: 99px; background: #34c759; position: relative; }
.tel-schakel i::after { content: ""; position: absolute; right: 1.5px; top: 1.5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
/* Chrome op Android: adresbalk bovenin, menu rechtsboven. */
.tel-chrome { top: 22px; left: 0; right: 0; height: 26px; padding: 0 6px; display: flex; align-items: center; gap: 6px; background: #fff; z-index: 3; }
.tel-chrome .tel-adres { flex: 1; height: 20px; border-radius: 10px; background: #f1f3f4; box-shadow: none; backdrop-filter: none; justify-content: flex-start; padding-left: 7px; gap: 4px; font-size: 7px; }
.tel-tabs { width: 10px; height: 10px; border: 1.3px solid #111; border-radius: 2px; font-style: normal; font-size: 6px; display: flex; align-items: center; justify-content: center; }
.tel-puntjes { font-style: normal; font-size: 12px; font-weight: 700; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
.tel-menu {
top: 24px; right: 4px; width: 116px; padding: 4px 0; z-index: 4; background: #fff; border-radius: 10px;
box-shadow: 0 6px 22px rgba(0, 0, 0, .25); transform-origin: top right; transform: scale(.4); opacity: 0;
}
.tel-menu-iconen { display: flex; justify-content: space-around; height: 22px; align-items: center; border-bottom: .5px solid #e0e0e0; margin-bottom: 2px; }
.tel-menu-iconen i { font-style: normal; font-size: 8px; color: #444; }
.tel-menu p { height: 18px; padding: 0 10px; white-space: nowrap; display: flex; align-items: center; font-size: 7px; }
.tel-dialoog {
left: 12px; right: 12px; top: 100px; padding: 12px 12px 10px; z-index: 5; background: #f3f0f7; border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.92);
}
.tel-dialoog-titel { font-size: 10px; font-weight: 600; margin-bottom: 10px !important; }
.tel-dialoog > div { display: flex; align-items: center; gap: 7px; }
.tel-dialoog img { width: 26px; height: 26px; border-radius: 50%; }
.tel-dialoog-knoppen { display: flex; justify-content: flex-end; gap: 12px; margin-top: 14px !important; font-size: 7.5px; font-weight: 600; color: #4a5fc1; }
.tel-dialoog-knoppen i { font-style: normal; }
.tel-dialoog-knoppen em { font-style: normal; }
/* Ingedrukt: wat de vinger aantikt, wordt even grijs (iOS) of krijgt een
lichte vlek (Android). Zie de *Tik-animaties hieronder. */
.tel-nav em, .tel-dialoog-knoppen em { border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.tel-puntjes { border-radius: 50%; }
/* Het beginscherm, met de nieuwe app. */
.tel-thuis { inset: 0; z-index: 7; opacity: 0; }
.tel-thuis-ios { background: radial-gradient(120% 90% at 20% 0%, #ff9f6e 0%, #b45dd8 45%, #2c3fd6 100%); }
.tel-thuis-and { background: linear-gradient(170deg, #c9d8ff 0%, #8fb0f0 50%, #4c6fd0 100%); }
.tel-raster { position: absolute; left: 0; right: 0; top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 9px; padding: 0 8px; }
.tel-thuis-and .tel-raster { top: 64px; }
.tel-raster span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 5px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tel-raster i, .tel-raster img { width: 24px; height: 24px; border-radius: 6px; }
.tel-rond i, .tel-rond img { border-radius: 50%; }
.tel-nieuw img { transform: scale(0); }
.tel-dok { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 34px; border-radius: 14px; background: rgba(255, 255, 255, .28); display: flex; align-items: center; justify-content: space-around; }
.tel-dok i { width: 24px; height: 24px; border-radius: 6px; }
.tel-glance { position: absolute; left: 12px; top: 30px; color: #fff; font-size: 9px; font-weight: 600; }
.tel-zoek { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 22px; border-radius: 11px; background: #fff; display: flex; align-items: center; padding: 0 8px; }
.tel-zoek b { color: #4285f4; font-size: 9px; }
/* De vinger: een witte stip met schaduw, zoals bij een schermopname. */
.tel-vinger {
z-index: 9; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
background: rgba(255, 255, 255, .55); border: 1.5px solid rgba(255, 255, 255, .95);
box-shadow: 0 2px 8px rgba(0, 0, 0, .35); opacity: 0; left: 70px; top: 200px;
}
@media (prefers-reduced-motion: reduce) {
.demo-banner .tel { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.demo-ios .tel-pop { animation: iosPop 12s infinite; }
.demo-ios .tel-blad { animation: iosBlad 12s infinite; }
.demo-ios .tel-toevoegen { animation: iosToevoegen 12s infinite; }
.demo-ios .tel-thuis { animation: iosThuis 12s infinite; }
.demo-ios .tel-nieuw img { animation: iosNieuw 12s infinite; }
.demo-ios .tel-vinger { animation: iosVinger 12s infinite; }
.demo-ios .tel-meer { animation: iosTikMeer 12s infinite; }
.demo-ios .tel-pop .tel-doel { animation: iosTikDeel 12s infinite; }
.demo-ios .tel-lijst .tel-doel { animation: iosTikBegin 12s infinite; }
.demo-ios .tel-nav em { animation: iosTikToe 12s infinite; }
.demo-android .tel-menu { animation: andMenu 10s infinite; }
.demo-android .tel-dialoog { animation: andDialoog 10s infinite; }
.demo-android .tel-thuis { animation: andThuis 10s infinite; }
.demo-android .tel-nieuw img { animation: andNieuw 10s infinite; }
.demo-android .tel-vinger { animation: andVinger 10s infinite; }
.demo-android .tel-puntjes { animation: andTikMenu 10s infinite; }
.demo-android .tel-menu .tel-doel { animation: andTikStart 10s infinite; }
.demo-android .tel-dialoog-knoppen em{ animation: andTikInstal 10s infinite; }
}
/* iPhone. Tikpunten: ··· (121,279) · Deel (86,186) · Zet op beginscherm
(70,226) · Voeg toe (122,43). */
@keyframes iosVinger {
0% { opacity: 0; left: 70px; top: 200px; transform: scale(1); }
3% { opacity: 1; left: 70px; top: 200px; }
9% { left: 121px; top: 279px; transform: scale(1); }
10.5% { transform: scale(.65); }
12% { transform: scale(1); }
18% { left: 86px; top: 186px; transform: scale(1); }
19.5% { transform: scale(.65); }
21% { transform: scale(1); }
31% { left: 70px; top: 226px; transform: scale(1); }
32.5% { transform: scale(.65); }
34% { transform: scale(1); }
47% { left: 122px; top: 43px; transform: scale(1); }
48.5% { transform: scale(.65); }
50% { transform: scale(1); opacity: 1; }
54%, 100% { opacity: 0; left: 122px; top: 43px; }
}
@keyframes iosPop {
0%, 11% { opacity: 0; transform: scale(.4); }
13%, 21% { opacity: 1; transform: scale(1); }
23%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes iosBlad {
0%, 21% { transform: translateY(105%); }
25%, 37% { transform: translateY(0); }
40%, 100% { transform: translateY(105%); }
}
@keyframes iosToevoegen {
0%, 35% { transform: translateY(105%); opacity: 1; }
39%, 53% { transform: translateY(0); opacity: 1; }
56%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes iosThuis { 0%, 54% { opacity: 0; } 58%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes iosNieuw { 0%, 60% { transform: scale(0); } 66% { transform: scale(1.18); } 70%, 100% { transform: scale(1); } }
/* Android. Tikpunten: ⋮ (128,35) · Toevoegen aan startscherm (70,168) ·
Installeren (108,185). */
@keyframes andVinger {
0% { opacity: 0; left: 70px; top: 200px; transform: scale(1); }
3% { opacity: 1; left: 70px; top: 200px; }
10% { left: 128px; top: 35px; transform: scale(1); }
12% { transform: scale(.65); }
14% { transform: scale(1); }
28% { left: 70px; top: 168px; transform: scale(1); }
30% { transform: scale(.65); }
32% { transform: scale(1); }
48% { left: 108px; top: 185px; transform: scale(1); }
50% { transform: scale(.65); }
52% { transform: scale(1); opacity: 1; }
56%, 100% { opacity: 0; left: 108px; top: 185px; }
}
@keyframes andMenu {
0%, 13% { opacity: 0; transform: scale(.4); }
16%, 34% { opacity: 1; transform: scale(1); }
36%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes andDialoog {
0%, 35% { opacity: 0; transform: scale(.92); }
38%, 55% { opacity: 1; transform: scale(1); }
58%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes andThuis { 0%, 56% { opacity: 0; } 60%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes andNieuw { 0%, 62% { transform: scale(0); } 68% { transform: scale(1.18); } 72%, 100% { transform: scale(1); } }
/* Het tikken: even ingedrukt, rond het moment dat de vinger neerkomt. */
@keyframes iosTikMeer { 0%, 9.5% { background: rgba(255,255,255,.78); } 10.5%, 13% { background: #c7c7cc; } 14.5%, 100% { background: rgba(255,255,255,.78); } }
@keyframes iosTikDeel { 0%, 18.5% { background: transparent; } 19.5%, 22% { background: #d1d1d6; } 23%, 100% { background: transparent; } }
@keyframes iosTikBegin { 0%, 31.5% { background: #fff; } 32.5%, 36% { background: #d1d1d6; } 37.5%, 100% { background: #fff; } }
@keyframes iosTikToe { 0%, 47.5% { background: transparent; } 48.5%, 52% { background: rgba(10,132,255,.18); } 53.5%, 100% { background: transparent; } }
@keyframes andTikMenu { 0%, 11% { background: transparent; } 12%, 15% { background: rgba(0,0,0,.12); } 16.5%, 100% { background: transparent; } }
@keyframes andTikStart { 0%, 29% { background: transparent; } 30%, 34% { background: rgba(26,115,232,.14); } 35.5%, 100% { background: transparent; } }
@keyframes andTikInstal{ 0%, 49% { background: transparent; } 50%, 55% { background: rgba(74,95,193,.18); } 56.5%, 100% { background: transparent; } }
/* Op een smal scherm: de stappen onder de telefoon. */
@media (max-width: 600px) {
.demo-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
.demo-banner .tel { align-self: center; }
}
/* ── Het onderblad ────────────────────────────────────────────────────
Eén popup voor de hele app: een blad dat op de telefoon van onderen
omhoog schuift, en op de computer een venster in het midden. Het gedrag
staat in static/js/blad.js (Blad.open); hier alleen hoe het eruitziet.
Wat erin staat, neemt zijn eigen opmaak mee. */
.blad-waas {
position: fixed; inset: 0; z-index: 300;
background: rgba(17, 17, 17, .35);
opacity: 0; transition: opacity .3s;
}
.blad-waas.open { opacity: 1; }
.blad {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 301;
max-width: 560px; margin: 0 auto;
max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
background: var(--surface); color: #111111;
border-radius: 26px 26px 0 0;
padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
transform: translateY(105%);
transition: transform .42s cubic-bezier(.2, .9, .25, 1);
outline: none;
}
.blad.open { transform: none; }
.blad-greep {
width: 40px; height: 5px; border-radius: 9px;
background: rgba(17, 17, 17, .18); margin: 0 auto 14px;
}
.blad-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.blad-kop h2 {
flex: 1; min-width: 0; margin: 0;
font-size: 22px !important; line-height: 1.15 !important;
}
/* Op de computer: een venster in het midden, zonder greep. */
@media (min-width: 700px) {
.blad {
top: 50%; bottom: auto; left: 50%; right: auto;
width: min(540px, calc(100vw - 48px)); margin: 0;
max-height: 86vh; border-radius: 26px;
padding: 26px 28px;
box-shadow: 0 30px 80px rgba(17, 17, 17, .25);
transform: translate(-50%, -48%) scale(.97); opacity: 0;
transition: transform .38s cubic-bezier(.2, .9, .25, 1), opacity .25s;
}
.blad.open { transform: translate(-50%, -50%); opacity: 1; }
.blad-greep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.blad, .blad-waas { transition: none; }
}