*,*:before,*:after{box-sizing:border-box} :root{ /* Kleuren */ --c1:#86b6ff; --c2:#b59cff; --c3:#5ce1b9; --c4:#ffe08a; --c5:#ffa2c0; /* Onderkleur van de .bg-laag. Staat bewust in :root en NIET in de dark-mode-override hieronder: de achtergrondlaag zelf kent geen donkere variant, dus zou in donkere modus donkerblauw worden terwijl de pagina pastel blijft. Op een iPhone gaf dat een donkere strook boven de statusbalk en onder de adresbalk. Eén variabele voor allebei, dan kunnen ze niet meer uit elkaar lopen. */ --bg-basis:#eef4fb; /* De kleur waar de achtergrond BOVENAAN mee begint. Staat hier apart omdat de theme-color-meta (de strook achter de statusbalk op een telefoon) er gelijk aan moet zijn: die stond op --bg-basis, en dat is de ONDERkant van het verloop. Op een iPhone gaf dat een nét andere kleur boven de pagina dan eronder — een naad precies op de plek waar je hem het eerst ziet. tests/test_achtergrond_mobiel.py bewaakt dat ze gelijk blijven. */ --bg-top:#edf3ff; --brand:#0f4c98; --brand-2:#003366; --text:#0f172a; --muted:#475569; --line:#d1d5db; --ring:#2563eb; --surface:#ffffff; --surface-2:#f1f5f9; --panel:rgba(255,255,255,.82); --panel-b:rgba(255,255,255,.45); /* Animatie snelheden */ --t-slow: 28s; --t-med: 18s; --t-fast: 8s; } /* Dark mode (volgt OS) */ @media (prefers-color-scheme: dark){ :root{ --brand:#7db4ff; --brand-2:#4a7fff; --text:#e5e7eb; --muted:#9aa3b2; --line:#3b4252; --ring:#8ab4ff; --surface:#0b1020; --surface-2:#0f172a; --panel:rgba(13,20,40,.72); --panel-b:rgba(13,20,40,.4); } } html,body{height:100%} /* [iOS] Ook het HTML-element de basiskleur geven. Safari schildert het gebied achter de in- en uitschuivende balken (en de overscroll-rand) met de achtergrond van , niet die van . Zonder deze regel bleef daar een witte strook staan boven- en onderaan. BELANGRIJK: NIET var(--surface). Die wordt in dark mode #0b1020, terwijl de .bg-laag eronder geen dark-variant kent en gewoon pastel blijft. Op een iPhone in donkere modus gaf dat een lichte pagina met een donkerblauwe strook boven de statusbalk en onder de adresbalk (gebruikersmelding 08-08-2026). --bg-basis is dezelfde kleur waar de .bg-gradient op eindigt, dus loopt de achtergrond visueel door tot de schermrand. */ html{ background:var(--bg-basis); } body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); margin:0; position:relative; overflow-x:hidden; /* [LET OP] GEEN eigen background op body. Zodra een achtergrond heeft (de iOS-regel hierboven), propageert body's achtergrond niet meer naar het canvas maar schildert hij op body zelf — en body is position:relative, dus dat vlak komt in de paint-order BOVEN de .bg-laag (z-index:-2) te liggen. Resultaat (melding 7 aug 2026): de hele gradient-achtergrond afgedekt door een egale vlakke kleur. De basiskleur zit al op ; die dekt het canvas én het iOS-overscroll-gebied. */ background: transparent; } /* ======= Nieuwe achtergrond ======= */ .bg{ /* [iOS] GEEN inset:0. Een fixed laag met bottom:0 wordt op iOS Safari zo hoog als de KLEINE viewport — precies het stuk tussen de adresbalk en de knoppenbalk. Schuiven die balken weg, of veert de pagina door bij het scrollen, dan valt de achtergrond aan de boven- en onderkant weg en zie je een kale strook. Met een expliciete hoogte in lvh (de GROTE viewport, dus inclusief het gebied achter de balken) dekt hij het hele scherm; overflow staat toch al op hidden. 100vh blijft als terugval voor oudere browsers. */ position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; z-index:-2; overflow:hidden; /* Basismix (zachte radialen + subtiele vertical fade) */ background: radial-gradient(40vmax 40vmax at 14% 24%, var(--c1) 0%, transparent 60%), radial-gradient(38vmax 38vmax at 86% 30%, var(--c2) 0%, transparent 60%), radial-gradient(50vmax 50vmax at 52% 92%, var(--c3) 0%, transparent 60%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-basis) 100%); filter:saturate(1.06); animation: hueShift var(--t-slow) linear infinite; } /* Aurora laag */ .bg::before, .bg::after{ content:""; position:absolute; inset:-10%; /* Aurora met conic-gradients; de mask maakt vloeiende vormen */ background: conic-gradient(from 0deg at 30% 60%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), conic-gradient(from 180deg at 70% 40%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%); mix-blend-mode: overlay; will-change: transform, opacity; } .bg::before{ animation: driftA var(--t-med) ease-in-out infinite alternate; opacity:.4; /* [FIX] Lange, vloeiende maskerrand i.p.v. een harde 60->62%-overgang. Die scherpe ring was de zichtbare grijze "fade-naad" in de aurora. */ -webkit-mask-image: radial-gradient(70% 62% at 35% 60%, #000 0 22%, transparent 88%); mask-image: radial-gradient(70% 62% at 35% 60%, #000 0 22%, transparent 88%); } .bg::after{ animation: driftB var(--t-slow) ease-in-out infinite; opacity:.28; /* [FIX] idem: zachte fade, geen zichtbare ellips-rand meer. */ -webkit-mask-image: radial-gradient(82% 72% at 70% 40%, #000 0 22%, transparent 88%); mask-image: radial-gradient(82% 72% at 70% 40%, #000 0 22%, transparent 88%); } /* Subtiele korrel / film grain (zonder externe asset) */ .bg::marker{display:none} .bg > i{display:none} /* [FIX] backdrop-filter VERWIJDERD: deze stond op de achterste aurora-laag (.bg is position:fixed; z-index:-2), die niets zinnigs achter zich heeft. Op iOS Safari rendert een backdrop-filter dan als een grijze waas over de hele achtergrond ("vreemde lichte grijze waas rondom het uploadscherm"). De aurora houdt z'n eigen gradients + mask, dus de look blijft; alleen de sluier is weg. */ .bg + .grain{ /* aparte overlay via pseudo-element lukt niet overal; gebruik extra div niet nodig – we faken ruis met gradients */ display:none; } /* Glass kaarten en UI */ .wrap{max-width:980px;margin:6vh auto;padding:0 1rem} .card{ padding:1.5rem; background:var(--panel); border:1px solid var(--panel-b); border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.12); backdrop-filter: blur(10px) saturate(1.05); } h1{line-height:1.15} .footer{color:var(--muted);margin-top:1.2rem;text-align:center} .small{font-size:.9rem;color:var(--muted)} /* Forms/Buttons */ /* Scope tot de form-containers .card/.wrap i.p.v. globaal. Voorheen stylede `label{}` ELK