/* ---- App-gevoel --------------------------------------------------------- Sfeer: de achtergrondgloed volgt het oordeel. app.js zet data-sfeer op zodra er een nieuw oordeel staat. */ :root[data-sfeer='groen'] { --sfeer: var(--sfeer-groen); } :root[data-sfeer='geel'] { --sfeer: var(--sfeer-geel); } :root[data-sfeer='oranje'] { --sfeer: var(--sfeer-oranje); } :root[data-sfeer='rood'] { --sfeer: var(--sfeer-rood); } /* Alles wat je kunt aanraken wordt even kleiner. Kort en klein: 60 ms en vier procent is precies genoeg om als reactie te voelen zonder traag te worden. */ .rond, .snelkeuze a, .suggesties li a, .tekstknop, .kans { transition: transform 0.06s ease; } .rond:active, .snelkeuze a:active, .suggesties li a:active, .tekstknop:active { transform: scale(0.94); } /* Binnenkomen: elk blok veert een klein stukje omhoog, net na elkaar. Het verschil tussen "de pagina staat er" en "de app opent". */ @keyframes inveren { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } #inhoud > * { animation: inveren 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards; } #inhoud > *:nth-child(1) { animation-delay: 0.02s; } #inhoud > *:nth-child(2) { animation-delay: 0.07s; } #inhoud > *:nth-child(3) { animation-delay: 0.12s; } #inhoud > *:nth-child(4) { animation-delay: 0.17s; } #inhoud > *:nth-child(5) { animation-delay: 0.22s; } /* De kop mag groter en strakker dan op een leespagina: dit is één boodschap, geen artikel. */ .oordeel { padding: 1.4rem 1.25rem 1.6rem; } .oordeel-plaats { font-size: 0.78rem; opacity: 0.7; } .oordeel-kop { letter-spacing: -0.04em; text-wrap: balance; } .oordeel-sub { text-wrap: pretty; } .oordeel-plaats { font-weight: 600; letter-spacing: 0.1em; } .kans-cijfer { font-size: 1.65rem; letter-spacing: -0.03em; } /* Op het beginscherm gezet (standalone) is er geen browserbalk meer die de veilige zone opvangt; dan mag de app zelf iets ruimer ademen. */ @media (display-mode: standalone) { .balk-boven { padding-top: max(0.9rem, env(safe-area-inset-top)); } .voet { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); } } /* Kaartje: compacter dan vierkant, want het is een oriëntatiepunt, geen hoofdrol. De radar schuift eroverheen. */ .kaartje svg { aspect-ratio: 4 / 3; } /* Tikken op het oordeel ververst; tijdens het wachten zakt het scherm even terug, zodat je ziet dat er iets gebeurt zonder dat er een tandwiel bij komt. */ #inhoud { transition: opacity 0.2s ease; } #inhoud[data-bezig='1'] { opacity: 0.55; } .oordeel { cursor: pointer; } .oordeel:active { transform: scale(0.985); transition: transform 0.06s ease; } /* Compacter: op een telefoon van 844 punten hoort alles tot en met de cijfers zonder scrollen in beeld te staan. */ main { padding-top: 0.75rem; } .tijdlijn, .kansen, .kaartje { margin-top: 0.75rem; } .balken { height: 5.5rem; } .voet { padding-block: 0.75rem; }