/* ═══════════════════════════════════════════════════════════════
Voor wie · één dag rond Sanne
De telefoon blijft staan, de wereld eromheen verandert. Alle
kleuren en standen komen als CSS-variabelen uit voor-wie.js;
de waarden hieronder zijn de beginstand (en de stand zonder JS).
═══════════════════════════════════════════════════════════════ */
.vw-pagina {
--vw-kop: 78px;
--vw-lucht-boven: #F7EFE3;
--vw-lucht-onder: #FBF9F5;
--vw-inkt: #27231E;
--vw-inkt-zacht: #655E55;
--vw-merk: #566250;
--vw-donker: 0;
--dag: 1;
--nacht: 0;
--zon-x: 12;
--zon-y: 72;
--zon-kleur: #FFE3B0;
/* 1 = alles beweegt mee; bij 'minder beweging' gaat dit naar 0 */
--beweeg: 1;
}
/* ── De navigatiebalk kleurt mee met de lucht ─────────────────── */
.vw-pagina .site-header {
background: color-mix(in srgb, var(--vw-lucht-boven) 86%, transparent);
border-bottom-color: color-mix(in srgb, var(--vw-inkt) 9%, transparent);
}
.vw-pagina .site-header .nav-links a { color: var(--vw-inkt-zacht); }
.vw-pagina .site-header .nav-links a:hover,
.vw-pagina .site-header .nav-links a.active { color: var(--vw-merk); }
.vw-pagina .site-header .brand-lockup .lockup-text { color: var(--vw-merk); }
/* Het merk als masker, zodat het op een donkere lucht de lichte
salietint kan aannemen (design.md: #B7DAA7 op een donkere pagina).
De ![]()
blijft staan voor de alt-tekst, maar is onzichtbaar. */
.vw-pagina .site-header .lockup-mark {
background-color: var(--vw-merk);
-webkit-mask: url('/assets/img/omiki_mark.svg') center / contain no-repeat;
mask: url('/assets/img/omiki_mark.svg') center / contain no-repeat;
}
.vw-pagina .site-header .lockup-mark img { opacity: 0; }
/* Net boven de breedte waarop het menu verdwijnt, is het krap: kleinere
letters en minder ruimte, en Contact staat hier alleen in de footer */
@media (min-width: 861px) and (max-width: 1000px) {
.vw-pagina .site-nav { gap: 14px; }
.vw-pagina .nav-links { gap: 12px; }
.vw-pagina .nav-links > li > a { font-size: 0.92rem; }
.vw-pagina .nav-links > li:last-child { display: none; }
.vw-pagina .site-nav .btn-sm { padding: 10px 18px; font-size: 0.92rem; }
}
/* De footer volgt het menu en heeft daardoor meer links: die krijgen de
ruimte tussen het logo en de Instagram-knoppen, en lopen zo nodig door
op een tweede regel, in plaats van de knoppen weg te duwen. */
@media (min-width: 681px) {
.vw-pagina .footer-nav {
flex: 1 1 0;
justify-content: center;
gap: 10px 20px;
}
}
/* ── Het verhaal ───────────────────────────────────────────────── */
.vw-verhaal {
position: relative;
background: var(--vw-lucht-onder);
}
.vw-podium {
position: sticky;
top: 0;
height: 100vh;
overflow: clip;
z-index: 0;
background: linear-gradient(180deg, var(--vw-lucht-boven) 0%, var(--vw-lucht-onder) 82%);
}
/* ── De lucht ──────────────────────────────────────────────────── */
.vw-lucht {
position: absolute;
inset: 0;
pointer-events: none;
}
.vw-gloed {
position: absolute;
left: 0;
top: 0;
width: 110vmax;
height: 110vmax;
border-radius: 50%;
background: radial-gradient(circle, var(--zon-kleur) 0%, color-mix(in srgb, var(--zon-kleur) 40%, transparent) 16%, transparent 44%);
transform: translate(calc(var(--zon-x) * 1vw - 50%), calc(var(--zon-y) * 1vh - 50%));
opacity: calc(var(--dag) * 0.8);
}
.vw-sterren {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: var(--vw-donker);
}
.vw-sterren circle { fill: #FFF8E4; }
.vw-sterren .vw-twinkel {
animation: vw-twinkel 3.6s ease-in-out infinite;
animation-delay: var(--vertraging, 0s);
}
@keyframes vw-twinkel {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.vw-maan {
position: absolute;
right: 26vw;
top: calc(var(--vw-kop) + 4vh);
width: 6.5vmin;
height: 6.5vmin;
border-radius: 50%;
box-shadow: inset -1.7vmin 0.5vmin 0 0 #F6EDD3, 0 0 7vmin rgba(246, 237, 211, 0.28);
/* Alleen in de donkere scènes; bij dageraad en schemer blijft hij weg */
opacity: calc(var(--vw-donker) * var(--vw-donker));
transform: translateY(calc((1 - var(--vw-donker)) * 6vh)) rotate(-18deg);
}
.vw-wolk {
position: absolute;
height: 3.6vw;
width: 13vw;
border-radius: 3vw;
background: #FFFFFF;
opacity: calc(var(--dag) * 0.5);
animation: vw-drijf 140s linear infinite;
}
.vw-wolk::before,
.vw-wolk::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}
.vw-wolk::before { width: 5vw; height: 5vw; left: 2vw; top: -2.4vw; }
.vw-wolk::after { width: 3.6vw; height: 3.6vw; left: 6.4vw; top: -1.5vw; }
.vw-wolk-1 { top: 17vh; animation-delay: -30s; }
.vw-wolk-2 { top: 9vh; transform: scale(0.7); animation-duration: 190s; animation-delay: -120s; }
.vw-wolk-3 { top: 26vh; transform: scale(0.55); animation-duration: 160s; animation-delay: -70s; }
@keyframes vw-drijf {
from { left: -18vw; }
to { left: 108vw; }
}
.vw-vallende-ster {
position: absolute;
top: 16vh;
left: 62vw;
width: 12vmin;
height: 1.5px;
background: linear-gradient(90deg, rgba(255, 248, 228, 0), #FFF8E4);
opacity: 0;
transform: rotate(-24deg);
animation: vw-vallen 11s ease-in 4s infinite;
}
@keyframes vw-vallen {
0%, 90% { opacity: 0; translate: 0 0; }
92% { opacity: calc(var(--vw-donker) * 0.9); }
100% { opacity: 0; translate: -18vmin 8vmin; }
}
/* ── Het toneel: waar telefoon en decor staan ─────────────────── */
.vw-toneel {
position: absolute;
top: var(--vw-kop);
bottom: 0;
right: 0;
width: 54%;
container-type: size;
}
.vw-anker {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
/* Eén maateenheid voor het hele toneel: 1u is ongeveer 1% van de hoogte */
--u: min(1cqh, 1.1cqw);
}
.vw-decor {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}
.vw-prop {
position: absolute;
left: calc(var(--x) * var(--u));
top: calc(var(--y) * var(--u));
width: calc(var(--w) * var(--u));
z-index: var(--z, 2);
translate: -50% -50%;
rotate: var(--r, 0deg);
transform:
translate(calc(var(--o, 0) * var(--dx, 0) * var(--u) * var(--beweeg)),
calc(var(--o, 0) * var(--dy, -24) * var(--u) * var(--beweeg)))
rotate(calc(var(--o, 0) * var(--dr, 0deg) * var(--beweeg)))
scale(calc(0.86 + 0.14 * var(--p, 0)));
opacity: var(--p, 0);
}
.vw-prop > svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* Stoom boven koffie en thee */
.vw-stoom path {
opacity: 0;
transform-box: fill-box;
transform-origin: 50% 100%;
animation: vw-stoom 3.4s ease-in-out infinite;
}
.vw-stoom path:nth-child(2) { animation-delay: 1.1s; }
.vw-stoom path:nth-child(3) { animation-delay: 2.2s; }
@keyframes vw-stoom {
0% { opacity: 0; transform: translateY(6px) scaleY(0.8); }
35% { opacity: 0.9; }
100% { opacity: 0; transform: translateY(-10px) scaleY(1.1); }
}
/* ── De familie in een kring (op de downloadpagina) ─────────────── */
.vw-kring { aspect-ratio: 1; }
.vw-kring-baan {
position: absolute;
inset: 0;
transform: scaleY(0.84);
}
.vw-kring-arm {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform: rotate(var(--start));
animation: vw-baan 90s linear infinite;
}
.vw-kring-lid {
position: absolute;
left: calc(37 * var(--u));
top: 0;
width: calc(10 * var(--u));
height: calc(10 * var(--u));
margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u));
border-radius: 50%;
box-shadow: 0 0 0 calc(0.45 * var(--u)) #FFFFFF, 0 0 0 calc(0.95 * var(--u)) var(--ring), 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(39, 35, 30, 0.18);
transform: rotate(calc(-1 * var(--start))) scaleY(1.19);
animation: vw-baan-terug 90s linear infinite;
}
.vw-kring-lid img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
@keyframes vw-baan {
from { transform: rotate(var(--start)); }
to { transform: rotate(calc(var(--start) + 360deg)); }
}
@keyframes vw-baan-terug {
from { transform: rotate(calc(-1 * var(--start))) scaleY(1.19); }
to { transform: rotate(calc(-1 * var(--start) - 360deg)) scaleY(1.19); }
}
/* ── Scène 1 · ontbijt ─────────────────────────────────────────── */
.vw-opkomend {
transform: translateY(calc((0.55 - var(--q, 0)) * 44px));
}
/* ── Scène 2 · kunst ───────────────────────────────────────────── */
.vw-vliegende-tekening {
--f: clamp(0, calc((var(--q, 0) - 0.14) / 0.34), 1);
--fe: calc(var(--f) * var(--f) * (3 - 2 * var(--f)));
/* Eerst dezelfde beweging als de koelkast (zodat hij er bij het in- en
uitvliegen van de scène aan vast blijft zitten), dan de vlucht zelf */
transform:
translate(calc(var(--o, 0) * -8 * var(--u) * var(--beweeg)), calc(var(--o, 0) * -20 * var(--u) * var(--beweeg)))
scale(calc(0.86 + 0.14 * var(--p, 0)))
translate(calc(var(--fe) * 31 * var(--u)), calc(var(--fe) * 19.5 * var(--u)))
rotate(calc(-4deg + var(--fe) * 16deg))
scale(calc(1 - 0.62 * var(--fe)));
opacity: calc(var(--p, 0) * (1 - clamp(0, calc((var(--f) - 0.8) / 0.2), 1)));
filter: drop-shadow(0 calc(0.8 * var(--u)) calc(1.2 * var(--u)) rgba(58, 36, 25, 0.18));
}
/* ── Scène 3 · de deurpost ─────────────────────────────────────── */
.vw-deurpost {
--g: clamp(0, calc((var(--q, 0) - 0.15) / 0.7), 1);
}
.vw-deurpost text {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
fill: #3E2F24;
}
.vw-deurpost .vw-streep-cm {
font-weight: 500;
font-size: 13px;
fill: #6B5846;
}
.vw-streep {
opacity: clamp(0, calc((var(--q, 0) - var(--drempel)) * 12), 1);
}
.vw-streep-nu text { fill: #2F6A8A; }
/* Van 75 cm naar 109 cm: 34 cm van 9 eenheden */
.vw-potlood {
transform: translateY(calc(var(--g) * -306px));
}
.vw-medaille .vw-pop {
--aan: clamp(0, calc((var(--q, 0) - var(--drempel)) * 1000), 1);
display: flex;
flex-direction: column;
align-items: center;
gap: calc(0.6 * var(--u));
transform: scale(var(--aan));
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vw-medaille svg {
width: 62%;
height: auto;
filter: drop-shadow(0 calc(0.6 * var(--u)) calc(1 * var(--u)) rgba(30, 45, 56, 0.2));
}
.vw-medaille .vw-pop > span {
font-size: calc(1.45 * var(--u));
font-weight: 600;
line-height: 1.25;
text-align: center;
color: #1E2D38;
background: rgba(255, 255, 255, 0.82);
padding: calc(0.5 * var(--u)) calc(1 * var(--u));
border-radius: calc(1 * var(--u));
}
.vw-medaille small {
display: block;
font-weight: 500;
color: #4F6473;
}
/* ── Scène 4 · opa en oma, en familie ver weg ──────────────────── */
.vw-kaart-wereld { aspect-ratio: 1; }
.vw-pin {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(0.9 * var(--u));
}
.vw-pin-foto {
display: block;
width: 100%;
aspect-ratio: 1;
padding: calc(0.5 * var(--u));
border-radius: 50% 50% 50% 0;
background: #FFFFFF;
transform: rotate(-45deg);
box-shadow: 0 calc(0.8 * var(--u)) calc(1.8 * var(--u)) rgba(44, 35, 56, 0.22);
}
.vw-pin-foto img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
transform: rotate(45deg);
}
/* Twee mensen op één adres: twee spelden die tegen elkaar aan staan */
.vw-pin-samen {
display: flex;
justify-content: center;
width: 100%;
}
.vw-pin-samen .vw-pin-foto { width: 58%; }
.vw-pin-samen .vw-pin-foto + .vw-pin-foto { margin-left: -16%; }
.vw-pin-label {
font-size: calc(1.5 * var(--u));
font-weight: 600;
line-height: 1.25;
text-align: center;
white-space: nowrap;
color: #2C2338;
background: rgba(255, 255, 255, 0.84);
padding: calc(0.45 * var(--u)) calc(1.1 * var(--u));
border-radius: 999px;
}
.vw-pin-label small {
display: block;
font-weight: 500;
color: #5E5270;
font-variant-numeric: tabular-nums;
}
.vw-hartjes { aspect-ratio: 1; }
.vw-hartjes .ic {
position: absolute;
left: calc(14% + var(--i) * 16%);
bottom: 8%;
width: calc(3.2 * var(--u));
height: calc(3.2 * var(--u));
fill: #E07A95;
stroke: none;
opacity: 0;
animation: vw-hart 4.5s ease-in infinite;
animation-delay: calc(var(--i) * 0.9s);
}
.vw-hartjes .ic:nth-child(even) { fill: #D98AA0; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
@keyframes vw-hart {
0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
15% { opacity: 1; }
100% { opacity: 0; transform: translate(calc(2 * var(--u)), calc(-24 * var(--u))) scale(1.1) rotate(12deg); }
}
/* ── Scène 5 · samen op de bank ────────────────────────────────── */
.vw-lamp-gloed {
position: absolute;
left: 50%;
top: 6%;
width: 380%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 214, 150, 0.5), rgba(255, 214, 150, 0.12) 36%, transparent 62%);
animation: vw-flakker 6s ease-in-out infinite;
}
@keyframes vw-flakker {
0%, 100% { opacity: 1; }
50% { opacity: 0.82; }
}
.vw-tv { aspect-ratio: 16 / 10; }
.vw-tv-scherm {
position: absolute;
inset: 0;
border-radius: calc(1.2 * var(--u));
background: #0E0B0A;
border: calc(0.9 * var(--u)) solid #1A1412;
overflow: hidden;
box-shadow: 0 0 calc(10 * var(--u)) rgba(240, 194, 126, 0.28), 0 calc(1.4 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.35);
}
.vw-tv-poot {
position: absolute;
left: 50%;
top: 100%;
width: 26%;
height: calc(3 * var(--u));
translate: -50% 0;
border-left: calc(0.6 * var(--u)) solid #1A1412;
border-right: calc(0.6 * var(--u)) solid #1A1412;
transform: perspective(40px) rotateX(-30deg);
}
.vw-film {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #F7EFE6;
}
.vw-film small {
font-size: calc(1.3 * var(--u));
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #E9B872;
}
.vw-film strong {
font-family: var(--font-display);
font-weight: 600;
font-size: calc(5.4 * var(--u));
line-height: 1.1;
}
.vw-film-titel span {
font-size: calc(1.4 * var(--u));
color: #CDBBA8;
margin-top: calc(0.6 * var(--u));
}
.vw-film-titel {
opacity: calc(1 - clamp(0, calc((var(--q, 0) - 0.3) * 10), 1));
}
.vw-film-foto {
opacity: calc(clamp(0, calc((var(--q, 0) - 0.3) * 10), 1) - clamp(0, calc((var(--q, 0) - 0.66) * 10), 1));
}
.vw-film-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 40%;
transform: scale(calc(1.05 + 0.14 * var(--q, 0)));
}
.vw-film-foto p {
position: absolute;
left: 6%;
bottom: 8%;
text-align: left;
display: flex;
flex-direction: column;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.vw-film-foto p strong { font-size: calc(2.6 * var(--u)); }
.vw-film-foto p span { font-size: calc(1.3 * var(--u)); color: #EFE3D3; }
.vw-film-hoofdstuk {
opacity: clamp(0, calc((var(--q, 0) - 0.66) * 10), 1);
background: radial-gradient(circle at 50% 60%, #3A2B24, #0E0B0A 70%);
}
.vw-film-hoofdstuk strong { font-style: italic; font-weight: 400; font-size: calc(4.2 * var(--u)); }
.vw-cast { aspect-ratio: 1; rotate: -40deg; }
.vw-cast span {
position: absolute;
left: 0;
bottom: 0;
border-top: calc(0.55 * var(--u)) solid #F0C27E;
border-right: calc(0.55 * var(--u)) solid #F0C27E;
border-top-right-radius: 100%;
opacity: 0.15;
animation: vw-cast 2.4s ease-in-out infinite;
}
.vw-cast span:nth-child(1) { width: 34%; height: 34%; }
.vw-cast span:nth-child(2) { width: 67%; height: 67%; animation-delay: 0.3s; }
.vw-cast span:nth-child(3) { width: 100%; height: 100%; animation-delay: 0.6s; }
@keyframes vw-cast {
0%, 100% { opacity: 0.15; }
40% { opacity: 0.9; }
}
/* ── Scène 6 · een boodschap (de kalender staat bij scène 4) ──── */
.vw-kalender {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 calc(1.2 * var(--u));
border-radius: calc(1.3 * var(--u));
background: #FFFDF8;
color: #27231E;
text-align: center;
overflow: hidden;
box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.35);
}
.vw-kal-maand {
align-self: stretch;
padding: calc(0.7 * var(--u)) 0 calc(0.5 * var(--u));
background: #C9544F;
color: #FFFFFF;
font-size: calc(1.35 * var(--u));
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vw-kalender strong {
font-family: var(--font-display);
font-weight: 700;
font-size: calc(6.4 * var(--u));
line-height: 1.05;
margin-top: calc(0.4 * var(--u));
}
.vw-kal-dag {
font-size: calc(1.45 * var(--u));
font-weight: 600;
color: #655E55;
}
.vw-kalender small {
margin-top: calc(0.7 * var(--u));
padding: 0 calc(0.8 * var(--u));
font-size: calc(1.25 * var(--u));
font-weight: 600;
line-height: 1.25;
color: #8F651F;
}
.vw-nachtlamp-gloed {
position: absolute;
left: 50%;
top: 38%;
width: 320%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(circle, rgba(247, 220, 140, 0.45), transparent 58%);
animation: vw-flakker 4.5s ease-in-out infinite;
}
.vw-envelop {
--dicht: clamp(0, calc((var(--q, 0) - 0.55) / 0.2), 1);
}
.vw-envelop svg { filter: drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35)); }
.vw-envelop text {
font-family: var(--font-display);
font-style: italic;
font-size: 9.5px;
fill: #8F7A5A;
}
.vw-flap {
transform-box: view-box;
transform-origin: 75px 10px;
transform: scaleY(calc(-1 + 2 * var(--dicht)));
}
.vw-zegel {
--aan: clamp(0, calc((var(--q, 0) - 0.78) * 1000), 1);
position: absolute;
left: 50%;
top: 57%;
width: 19%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: #566250;
box-shadow: 0 0 0 calc(0.35 * var(--u)) #4A5545, 0 calc(0.5 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.35);
transform: scale(var(--aan));
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* design.md: op het saliegroen staan de lijnen van het merk in crème */
.vw-zegel::after {
content: '';
position: absolute;
inset: 17%;
background: #F5F0E8;
-webkit-mask: url('/assets/img/omiki_mark.svg') center / contain no-repeat;
mask: url('/assets/img/omiki_mark.svg') center / contain no-repeat;
}
/* ── Scène 7 · de krans ────────────────────────────────────────── */
.vw-krans {
--vul: clamp(0, calc((var(--q, 0) - 0.08) / 0.5), 1);
aspect-ratio: 1;
}
.vw-krans svg {
width: 100%;
height: 100%;
overflow: visible;
}
.vw-week {
fill: none;
stroke-width: 5.2;
stroke-linecap: butt;
opacity: clamp(0, calc(var(--vul) * 52 - var(--i)), 1);
}
.vw-week.is-rustig {
stroke: #CFC8BA;
stroke-width: 1.4;
}
.vw-krans-maand {
position: absolute;
left: 50%;
top: 50%;
font-size: calc(1.35 * var(--u));
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--vw-inkt-zacht);
translate: -50% -50%;
transform: rotate(var(--hoek)) translateY(calc(-40.5 * var(--u))) rotate(calc(-1 * var(--hoek)));
opacity: clamp(0, calc(var(--vul) * 6), 1);
}
.vw-merk-slot {
--weg: clamp(0, calc((var(--q, 0) - 0.68) / 0.2), 1);
transform: scale(calc(0.7 + 0.3 * var(--weg)));
opacity: calc(var(--p, 0) * var(--weg));
}
.vw-merk-slot img { width: 100%; height: auto; }
/* ── De telefoon ───────────────────────────────────────────────── */
/* De letters van de app, alleen voor het scherm van de telefoon. Latijnse
deelverzamelingen van de bestanden uit de app (OFL, zie assets/fonts);
een browser haalt ze pas op als er tekst in staat. */
@font-face {
font-family: 'Lora';
src: url('assets/fonts/Lora-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('assets/fonts/Lora-SemiBold.woff2') format('woff2');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('assets/fonts/Lora-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Alegreya Sans';
src: url('assets/fonts/AlegreyaSans-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Alegreya Sans';
src: url('assets/fonts/AlegreyaSans-Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Google Sans Flex';
src: url('assets/fonts/GoogleSansFlex-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Google Sans Flex';
src: url('assets/fonts/GoogleSansFlex-Medium.woff2') format('woff2');
font-weight: 500 600;
font-display: swap;
}
/* Eén punt van de app, eenmaal uitgerekend op het scherm */
@property --pt {
syntax: '';
inherits: true;
initial-value: 1px;
}
.vw-telefoon {
--th: calc(84 * var(--u));
position: absolute;
left: 0;
top: 0;
width: calc(var(--th) * 0.488);
height: var(--th);
z-index: 5;
translate: -50% -50%;
transform:
translate(calc(var(--tel-x, 0) * var(--u)), calc(var(--tel-y, 0) * var(--u)))
rotate(calc(var(--tel-r, 0) * 1deg))
scale(var(--tel-s, 1));
opacity: calc(1 - var(--tel-weg, 0));
}
.vw-telefoon-zweef {
width: 100%;
height: 100%;
padding: calc(var(--th) * 0.013);
border-radius: calc(var(--th) * 0.084);
background: #1D1B19;
box-shadow:
0 calc(var(--th) * 0.05) calc(var(--th) * 0.1) rgba(30, 25, 20, 0.22),
0 calc(var(--th) * 0.012) calc(var(--th) * 0.022) rgba(30, 25, 20, 0.2),
0 0 calc(var(--th) * 0.1) rgba(255, 226, 180, calc(var(--vw-donker) * 0.2)),
inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
animation: vw-zweef 7s ease-in-out infinite;
}
@keyframes vw-zweef {
0%, 100% { transform: translateY(calc(var(--th) * -0.006)); }
50% { transform: translateY(calc(var(--th) * 0.006)); }
}
/* Het scherm rekent in punten van de app: het is 393 punten breed, zo
breed als een iPhone 15, en --pt is één punt. De letters zijn die van
de app: Lora voor koppen en citaten, Alegreya Sans voor wat iemand
schreef, en de letter van het toestel om te bedienen (Google Sans Flex
op de Pixel, San Francisco op de iPhone). De schermen van de momenten
noemen nog --font-display en --font-body; hier zijn dat die letters. */
.vw-scherm {
--pt: calc(var(--th) * 0.462 / 393);
--ek-serif: 'Lora', Georgia, serif;
--ek-lees: 'Alegreya Sans', 'Outfit', sans-serif;
--ek-ui: 'Google Sans Flex', Roboto, 'Outfit', system-ui, sans-serif;
--font-display: var(--ek-serif);
--font-body: var(--ek-ui);
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: calc(var(--th) * 0.072);
background: #FBF9F5;
color: #2E2721;
font-family: var(--font-body);
font-size: calc(var(--th) * 0.0215);
line-height: 1.35;
font-synthesis: none;
}
[data-toestel="iphone"] .vw-scherm {
--ek-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
}
/* Het cameragaatje van een Pixel, op één lijn met de statusbalk */
.vw-camera {
position: absolute;
left: 50%;
top: 1.02em;
width: 1.12em;
height: 1.12em;
translate: -50% 0;
border-radius: 50%;
background: #0E0D0C;
box-shadow: inset 0 0 0 0.16em #1E1D1B;
z-index: 7;
}
/* Android: de klok links en niet vet, de icoontjes rechts. De hoogte
blijft gelijk, zodat alles eronder op zijn plek blijft staan. */
.vw-statusbalk {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 6;
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 3.5em;
padding: 1.02em 1.75em 0 1.95em;
font-size: 0.95em;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.vw-status-links {
display: flex;
align-items: center;
gap: 0.5em;
}
.vw-melding {
width: 0.95em;
height: 0.95em;
vertical-align: 0;
stroke-width: 2.4;
opacity: 0.8;
}
.vw-status-iconen {
display: flex;
gap: 0.3em;
align-items: center;
height: 1.25em;
}
.vw-status-iconen svg { height: 0.9em; width: auto; fill: currentColor; }
.vw-status-iconen svg:last-child { height: 1em; margin-left: 0.1em; }
/* Op iOS wordt het een iPhone (het kopscript zet data-toestel): een
Dynamic Island in plaats van het cameragaatje, een vette klok,
streepjes en een liggende batterij, en een langer thuisstreepje. */
html:not([data-toestel="iphone"]) .vw-alleen-iphone,
[data-toestel="iphone"] .vw-alleen-pixel { display: none; }
.vw-eiland {
position: absolute;
left: 50%;
top: 0.75em;
width: 7.2em;
height: 2em;
translate: -50% 0;
border-radius: 1em;
background: #0E0D0C;
z-index: 7;
}
[data-toestel="iphone"] .vw-statusbalk {
align-items: center;
padding: 0.5em 2.1em 0 2.3em;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
}
[data-toestel="iphone"] .vw-status-iconen { gap: 0.35em; height: auto; }
[data-toestel="iphone"] .vw-status-iconen svg { height: 0.78em; margin: 0; }
/* Iconen uit de app: gevulde glyphs in plaats van lijnen */
.mi {
display: block;
flex-shrink: 0;
fill: currentColor;
stroke: none;
}
/* Het glas bovenin: de pagina op 80 % met een waas eronder, over de
statusbalk en de balk samen. voor-wie.js laat het meekomen terwijl de
foto van de tijdlijn wegschuift; daarbuiten staat het er gewoon. */
.vw-glas {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 2;
height: calc(128 * var(--pt));
background: rgba(251, 249, 245, 0.8);
-webkit-backdrop-filter: blur(calc(12 * var(--pt)));
backdrop-filter: blur(calc(12 * var(--pt)));
opacity: 0;
pointer-events: none;
}
.vw-app-kop {
position: absolute;
left: 0;
right: 0;
top: calc(64 * var(--pt));
z-index: 3;
height: calc(64 * var(--pt));
color: #566250;
}
/* Terug naar het overzicht van de capsules. Op een foto waar hij niet op
te lezen is, krijgt hij een donker pilletje met witte tekens eronder,
dat wegvloeit zodra het glas er is (--pil, van 0 tot 1, voor-wie.js).
Op de bladeren van Sannes foto is dat zo, op de iPhone en op Android. */
.vw-terug {
--pil: 1;
position: absolute;
top: 50%;
display: flex;
align-items: center;
translate: 0 -50%;
border-radius: 999px;
background: rgba(0, 0, 0, calc(0.54 * var(--pil)));
color: color-mix(in srgb, #FFFFFF calc(var(--pil) * 100%), var(--inkt-terug));
}
.vw-terug.vw-alleen-iphone {
--inkt-terug: #566250;
left: calc(8 * var(--pt));
gap: calc(4 * var(--pt));
padding: calc(4 * var(--pt)) calc(12 * var(--pt)) calc(4 * var(--pt)) calc(8 * var(--pt));
font-size: calc(16 * var(--pt));
line-height: calc(24 * var(--pt));
}
.vw-terug.vw-alleen-iphone .mi { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.vw-terug.vw-alleen-pixel {
--inkt-terug: #2E2721;
left: calc(4 * var(--pt));
justify-content: center;
width: calc(48 * var(--pt));
height: calc(48 * var(--pt));
}
.vw-terug.vw-alleen-pixel .mi { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
/* De titel staat in het midden van het scherm, waar ook de naam op de
tijdlijn landt; zo springt hij niet opzij als je van tabblad wisselt */
.vw-app-titel span {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
font-family: var(--ek-serif);
font-size: calc(22 * var(--pt));
font-weight: 600;
line-height: calc(28 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
white-space: nowrap;
color: #2E2721;
opacity: 0;
transition: opacity 0.3s ease;
}
.vw-telefoon[data-tab="kunst"] .vw-app-titel [data-tab="kunst"],
.vw-telefoon[data-tab="groei"] .vw-app-titel [data-tab="groei"],
.vw-telefoon[data-tab="tv"] .vw-app-titel [data-tab="tv"] {
opacity: 1;
}
.vw-app-rechts {
position: absolute;
right: calc(16 * var(--pt));
top: 50%;
display: flex;
align-items: center;
translate: 0 -50%;
}
.vw-app-knop {
display: none;
place-items: center;
width: calc(48 * var(--pt));
height: calc(48 * var(--pt));
}
.vw-app-knop .mi { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
/* Zoeken op de tijdlijn en bij Kunst, delen alleen bij Kunst. Boven de
grote foto is het vergrootglas er nog niet; voor-wie.js laat het komen. */
.vw-knop-zoek { opacity: 0; }
.vw-telefoon[data-tab="tijdlijn"] .vw-knop-zoek,
.vw-telefoon[data-tab="kunst"] .vw-knop-zoek,
.vw-telefoon[data-tab="kunst"] .vw-knop-delen { display: grid; }
.vw-app-knop + .vw-app-avatar { margin-left: calc(8 * var(--pt)); }
/* Het tandwiel naar de instellingen, op een rondje in de kleur van de
capsule, met de foto van het kind als kleine badge rechtsonder */
.vw-app-avatar {
position: relative;
display: grid;
place-items: center;
width: calc(38 * var(--pt));
height: calc(38 * var(--pt));
border-radius: 50%;
background: #566250;
color: #E8F0E2;
}
.vw-app-avatar .mi { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.vw-app-avatar img {
position: absolute;
right: calc(-2 * var(--pt));
bottom: calc(-2 * var(--pt));
width: calc(19 * var(--pt));
height: calc(19 * var(--pt));
box-sizing: border-box;
border: calc(1.5 * var(--pt)) solid #FFFFFF;
border-radius: 50%;
object-fit: cover;
}
.vw-panelen {
position: absolute;
left: 0;
right: 0;
top: calc(128 * var(--pt));
bottom: calc(82 * var(--pt));
}
.vw-paneel {
position: absolute;
inset: 0;
padding: 0.3em 1.1em 1em;
overflow: hidden;
opacity: var(--p, 0);
transform: translateY(calc(var(--o, 0) * -7% * var(--beweeg)));
}
/* De plusknop: de kleur van de capsule met een + erop, 16 punten boven de
tabbalk en van de rand */
.vw-fab {
position: absolute;
right: calc(16 * var(--pt));
bottom: calc(98 * var(--pt));
z-index: 4;
display: grid;
place-items: center;
width: calc(56 * var(--pt));
height: calc(56 * var(--pt));
border-radius: 50%;
background: #566250;
color: #E8F0E2;
box-shadow: 0 calc(5 * var(--pt)) calc(17 * var(--pt)) rgba(0, 0, 0, 0.28);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.vw-fab .mi { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); }
/* Geen plusknop bij de tv en bij het jaar (scène 7) */
.vw-telefoon[data-tab="tv"] .vw-fab,
.vw-telefoon[data-scene="7"] .vw-fab {
opacity: 0;
transform: scale(0.6);
}
/* De tabbalk: de pagina op 92 % met een waas, een haarlijn erboven, en per
tab een icoon met een label eronder. Het gekozen tabblad staat in de
kleur van de capsule en met een gevuld icoon. */
.vw-tabbalk {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
justify-content: space-around;
align-items: flex-start;
height: calc(82 * var(--pt));
padding: calc(4 * var(--pt)) calc(8 * var(--pt)) 0;
box-sizing: border-box;
background: rgba(251, 249, 245, 0.92);
-webkit-backdrop-filter: blur(calc(16 * var(--pt)));
backdrop-filter: blur(calc(16 * var(--pt)));
border-top: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
box-shadow: 0 calc(-2 * var(--pt)) calc(29 * var(--pt)) rgba(168, 181, 160, 0.15);
}
/* Het streepje van Androids gebarennavigatie */
.vw-tabbalk::after {
content: '';
position: absolute;
left: 50%;
bottom: calc(9 * var(--pt));
width: calc(84 * var(--pt));
height: calc(4.5 * var(--pt));
translate: -50% 0;
border-radius: 1em;
background: #27231E;
opacity: 0.5;
}
[data-toestel="iphone"] .vw-tabbalk::after {
bottom: calc(8 * var(--pt));
width: calc(134 * var(--pt));
height: calc(5 * var(--pt));
opacity: 0.85;
}
.vw-tabbalk span {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(2 * var(--pt));
padding: calc(4 * var(--pt));
font-size: calc(12 * var(--pt));
font-weight: 500;
line-height: calc(16 * var(--pt));
letter-spacing: calc(0.5 * var(--pt));
color: #757871;
transition: color 0.3s ease;
}
.vw-tabbalk .mi {
width: calc(22 * var(--pt));
height: calc(22 * var(--pt));
margin: 0 calc(8 * var(--pt));
}
.vw-tabbalk .vw-tab-aan { display: none; }
.vw-telefoon[data-tab="tijdlijn"] .vw-tabbalk [data-tab="tijdlijn"],
.vw-telefoon[data-tab="tv"] .vw-tabbalk [data-tab="tijdlijn"],
.vw-telefoon[data-tab="kunst"] .vw-tabbalk [data-tab="kunst"],
.vw-telefoon[data-tab="groei"] .vw-tabbalk [data-tab="groei"] {
color: #566250;
}
.vw-telefoon[data-tab="tijdlijn"] .vw-tabbalk [data-tab="tijdlijn"] .vw-tab-uit,
.vw-telefoon[data-tab="tv"] .vw-tabbalk [data-tab="tijdlijn"] .vw-tab-uit,
.vw-telefoon[data-tab="kunst"] .vw-tabbalk [data-tab="kunst"] .vw-tab-uit,
.vw-telefoon[data-tab="groei"] .vw-tabbalk [data-tab="groei"] .vw-tab-uit { display: none; }
.vw-telefoon[data-tab="tijdlijn"] .vw-tabbalk [data-tab="tijdlijn"] .vw-tab-aan,
.vw-telefoon[data-tab="tv"] .vw-tabbalk [data-tab="tijdlijn"] .vw-tab-aan,
.vw-telefoon[data-tab="kunst"] .vw-tabbalk [data-tab="kunst"] .vw-tab-aan,
.vw-telefoon[data-tab="groei"] .vw-tabbalk [data-tab="groei"] .vw-tab-aan { display: block; }
/* ── Bouwstenen van de schermen ────────────────────────────────── */
/* De datum boven een herinnering, zoals op de tijdlijn: een stip, de dag
en de tijd, en rechts de ster. Van vandaag, dus de stip in de kleur van
de capsule. */
.vw-datum {
position: relative;
display: flex;
align-items: center;
gap: calc(10 * var(--pt));
min-height: calc(34 * var(--pt));
margin: calc(4 * var(--pt)) 0 calc(10 * var(--pt));
padding-right: calc(44 * var(--pt));
font-size: calc(14 * var(--pt));
font-weight: 500;
line-height: calc(20 * var(--pt));
letter-spacing: calc(-0.4 * var(--pt));
color: #6B6055;
}
.vw-datum::before {
content: '';
flex-shrink: 0;
width: calc(12 * var(--pt));
height: calc(12 * var(--pt));
box-sizing: border-box;
border: calc(3 * var(--pt)) solid #FBF9F5;
border-radius: 50%;
background: #566250;
box-shadow: 0 0 calc(8 * var(--pt)) rgba(86, 98, 80, 0.35);
}
.vw-datum .vw-rij-ster { right: 0; top: 50%; translate: 0 -50%; }
.vw-kaart {
margin-bottom: 0.8em;
padding: 0.85em 0.95em;
border-radius: 1.2em;
background: #FFFFFF;
box-shadow: 0 0.15em 0.5em rgba(39, 35, 30, 0.06);
}
.vw-kaart-kop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
margin-bottom: 0.35em;
font-size: 0.8em;
font-weight: 600;
color: #8F867C;
}
.vw-kaart-kop img {
width: 1.9em;
height: 1.9em;
border-radius: 50%;
object-fit: cover;
}
.vw-tag {
padding: 0.2em 0.65em;
border-radius: 999px;
border: 1px solid #E4DFD3;
font-size: 0.92em;
color: #655E55;
}
.vw-citaat {
font-family: var(--font-display);
font-size: 1.12em;
line-height: 1.35;
color: #27231E;
}
.vw-typ-nog { color: transparent; }
.vw-typ.is-bezig .vw-typ-al::after {
content: '';
display: inline-block;
width: 0.08em;
height: 1em;
margin-left: 0.04em;
vertical-align: -0.12em;
background: #566250;
animation: vw-cursor 0.9s steps(1) infinite;
}
@keyframes vw-cursor {
50% { opacity: 0; }
}
.vw-bewaard {
--aan: clamp(0, calc((var(--q, 0) - 0.72) * 1000), 1);
display: inline-flex;
align-items: center;
gap: 0.3em;
margin-top: 0.55em;
padding: 0.25em 0.75em 0.25em 0.55em;
border-radius: 999px;
background: #E3ECDD;
color: #3A4435;
font-size: 0.78em;
font-weight: 600;
opacity: var(--aan);
transform: scale(calc(0.7 + 0.3 * var(--aan)));
transform-origin: left center;
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vw-bewaard .ic { width: 1.1em; height: 1.1em; vertical-align: 0; stroke-width: 2.4; }
.vw-klein-label {
margin: 0.9em 0 0.5em;
font-size: 0.72em;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8F867C;
}
/* 0 · De tijdlijn zoals een capsule in de app opent, en hoe hij
meebeweegt als je scrolt (voor-wie.js). In punten van de app:
statusbalk 64, balk 64 (samen 128), foto 393 × 393 direct onder de
statusbalk, 16 paginakleur eronder: de hero is 473 hoog. Daaronder de
strook met Alles/Favorieten en het filter (104). Scrol je, dan krimpt
de foto van onderen tot de hoogte van de balk (na 345 punten), en
schuift het beeld zelf met halve snelheid mee omhoog.
Zonder JavaScript staat alles hier in de beginstand. */
.vw-tl {
inset: 0;
padding: 0;
background: #FBF9F5;
transform: none;
}
.vw-tl-kop {
position: absolute;
left: 0;
right: 0;
top: 0;
height: calc(473 * var(--pt));
overflow: hidden;
background: #FBF9F5;
}
.vw-tl-band { position: absolute; inset: 0; }
.vw-tl-foto {
position: absolute;
left: 0;
right: 0;
top: calc(64 * var(--pt));
height: calc(393 * var(--pt));
overflow: hidden;
will-change: transform;
}
.vw-tl-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Een eenmalig vervaagde kopie, die over de scherpe foto heen komt
terwijl hij wegschuift (net als in de app) */
.vw-tl-foto .vw-tl-vaag { opacity: 0; }
.vw-tl-foto::before,
.vw-tl-foto::after {
content: '';
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
/* Het verloop aan de voet, waar de naam op staat */
.vw-tl-foto::after {
bottom: 0;
height: 45%;
background: linear-gradient(0deg, #FBF9F5 0%, rgba(251, 249, 245, 0.45) 40%, rgba(251, 249, 245, 0) 100%);
}
/* Een zachte schaduw langs de bovenrand, onder de statusbalk */
.vw-tl-foto::before {
top: 0;
z-index: 2;
height: calc(20 * var(--pt));
background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}
/* De was van de paginakleur die over de foto komt als hij wegschuift */
.vw-tl-was {
position: absolute;
inset: 0;
background: #FBF9F5;
opacity: 0;
}
.vw-tl-lijst {
position: absolute;
left: 0;
right: 0;
top: 0;
transform: translateY(calc(577 * var(--pt)));
will-change: transform;
}
/* De naam aan de voet van de foto, met de leeftijd eronder. Staat boven
het glas, want hij landt in de balk. */
.vw-tl-naam {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 3;
padding: 0 calc(24 * var(--pt));
text-align: center;
transform: translateY(calc(407 * var(--pt)));
transition: opacity 0.3s ease;
pointer-events: none;
}
.vw-tl-naam-tekst {
height: calc(40 * var(--pt));
font-family: var(--ek-serif);
font-size: calc(27 * var(--pt));
font-weight: 600;
line-height: calc(40 * var(--pt));
letter-spacing: calc(-0.8 * var(--pt));
white-space: nowrap;
color: #2E2721;
transform-origin: 50% 100%;
}
.vw-tl-leeftijd {
margin-top: calc(2 * var(--pt));
font-size: calc(12 * var(--pt));
font-weight: 500;
line-height: calc(16 * var(--pt));
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #6B6055;
}
/* Alleen op de tijdlijn; bij Kunst, Groei en de tv staat daar hun titel */
.vw-telefoon:not([data-tab="tijdlijn"]) .vw-tl-naam { opacity: 0; }
/* De strook onder de foto: de schakelaar Alles/Favorieten en het filter.
Glas, net als de balk, en vanaf de vouw vast onder de balk. */
.vw-strip {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 2;
height: calc(104 * var(--pt));
padding-top: calc(4 * var(--pt));
box-sizing: border-box;
background: rgba(251, 249, 245, 0.8);
-webkit-backdrop-filter: blur(calc(12 * var(--pt)));
backdrop-filter: blur(calc(12 * var(--pt)));
transform: translateY(calc(473 * var(--pt)));
transition: opacity 0.3s ease;
}
/* Om 19:30 en 23:00 laat de telefoon één herinnering zien, zonder strook */
.vw-telefoon:not([data-tab="tijdlijn"]) .vw-strip,
.vw-telefoon[data-scene="4"] .vw-strip,
.vw-telefoon[data-scene="6"] .vw-strip { opacity: 0; }
.vw-strip-schakel {
display: flex;
height: calc(40 * var(--pt));
margin: 0 calc(24 * var(--pt));
padding: calc(4 * var(--pt));
box-sizing: border-box;
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(16 * var(--pt));
background: #FFFFFF;
font-size: calc(14 * var(--pt));
line-height: calc(20 * var(--pt));
color: #6B6055;
}
.vw-strip-schakel span {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: calc(8 * var(--pt));
border-radius: calc(12 * var(--pt));
}
.vw-strip-schakel .is-aan {
background: #566250;
color: #E8F0E2;
}
.vw-strip-schakel .mi { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.vw-strip-rij {
display: flex;
align-items: center;
height: calc(44 * var(--pt));
margin-top: calc(8 * var(--pt));
padding: 0 calc(16 * var(--pt)) 0 calc(24 * var(--pt));
}
.vw-strip-filter {
display: flex;
align-items: center;
gap: calc(8 * var(--pt));
padding: calc(8 * var(--pt)) calc(16 * var(--pt));
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(16 * var(--pt));
background: #FFFFFF;
font-size: calc(14 * var(--pt));
line-height: calc(20 * var(--pt));
color: #566250;
}
.vw-strip-filter .mi { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
/* Naar boven: verschijnt zodra je meer dan 300 punten gescrold bent */
.vw-strip-omhoog {
display: none;
place-items: center;
width: calc(30 * var(--pt));
height: calc(30 * var(--pt));
margin-left: auto;
box-sizing: border-box;
border: calc(1 * var(--pt)) solid rgba(86, 98, 80, 0.5);
border-radius: 50%;
background: rgba(86, 98, 80, 0.25);
color: #566250;
}
.vw-strip-omhoog .mi { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.vw-strip.is-gescrold .vw-strip-omhoog { display: grid; }
/* ── Een rij op de tijdlijn: links de rail (lijn en stip), rechts de
datum met de ster, en de kaart ─────────────────────────────── */
.vw-rij {
position: relative;
padding: 0 calc(16 * var(--pt)) calc(28 * var(--pt)) calc(40 * var(--pt));
}
.vw-rij::before,
.vw-rij::after {
content: '';
position: absolute;
}
/* De lijn loopt door tot de volgende rij; de bovenste begint bij zijn stip */
.vw-rij::before {
left: calc(27 * var(--pt));
top: 0;
bottom: 0;
width: calc(2 * var(--pt));
background: #D7EBCE;
}
.vw-rij:first-child::before { top: calc(30 * var(--pt)); }
.vw-rij::after {
left: calc(22 * var(--pt));
top: calc(24 * var(--pt));
width: calc(12 * var(--pt));
height: calc(12 * var(--pt));
box-sizing: border-box;
border: calc(3 * var(--pt)) solid #FBF9F5;
border-radius: 50%;
background: #96CA7E;
}
.vw-rij.is-vandaag::after {
background: #566250;
box-shadow: 0 0 calc(8 * var(--pt)) rgba(86, 98, 80, 0.35);
}
.vw-rij.is-favoriet::after {
background: #F2C233;
box-shadow: 0 0 calc(8 * var(--pt)) rgba(242, 194, 51, 0.35);
}
.vw-rij-datum {
padding: calc(20 * var(--pt)) calc(52 * var(--pt)) calc(12 * var(--pt)) calc(2 * var(--pt));
font-size: calc(14 * var(--pt));
font-weight: 500;
line-height: calc(20 * var(--pt));
letter-spacing: calc(-0.4 * var(--pt));
color: #6B6055;
}
.vw-rij.is-favoriet .vw-rij-datum { color: #F2C233; }
.vw-rij-ster {
position: absolute;
right: calc(16 * var(--pt));
top: calc(13 * var(--pt));
display: grid;
place-items: center;
width: calc(34 * var(--pt));
height: calc(34 * var(--pt));
border-radius: 50%;
background: #EFEEEA;
color: rgba(107, 96, 85, 0.5);
}
.vw-rij.is-favoriet .vw-rij-ster { color: #F2C233; }
.vw-rij-ster .mi { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
/* De kaart: wit op het crème, met een zachte schaduw */
.vw-card {
position: relative;
border-radius: calc(24 * var(--pt));
background: #FFFFFF;
box-shadow: 0 calc(6 * var(--pt)) calc(22 * var(--pt)) rgba(0, 0, 0, 0.05);
}
.vw-card-media {
position: relative;
margin: calc(12 * var(--pt)) calc(12 * var(--pt)) 0;
overflow: hidden;
border-radius: calc(16 * var(--pt));
background: #EFEEEA;
}
.vw-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vw-card-tekst { padding: calc(12 * var(--pt)) calc(16 * var(--pt)) 0; }
.vw-card-titel {
font-family: var(--ek-serif);
font-size: calc(18 * var(--pt));
font-weight: 600;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-card-body {
display: -webkit-box;
margin-top: calc(6 * var(--pt));
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-family: var(--ek-lees);
font-size: calc(18 * var(--pt));
line-height: calc(24 * var(--pt));
color: #6B6055;
}
/* Een uitspraak: het citaat in Lora, cursief, en eronder over wat */
.vw-card-citaat { padding: calc(16 * var(--pt)) calc(20 * var(--pt)) 0; }
.vw-card-quote {
font-family: var(--ek-serif);
font-size: calc(16 * var(--pt));
font-style: italic;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-card-bijschrift {
margin-top: calc(8 * var(--pt));
text-align: right;
font-family: var(--ek-lees);
font-size: calc(14 * var(--pt));
line-height: calc(20 * var(--pt));
color: #805440;
}
/* Een verslag zonder foto: titel en tekst, met iets kleinere hoeken */
.vw-card-los {
padding: calc(16 * var(--pt)) calc(20 * var(--pt)) 0;
border-radius: calc(20 * var(--pt));
}
.vw-card-los .vw-card-body { margin-top: calc(4 * var(--pt)); }
/* De voet van elke kaart: hartje, reacties en wat jij ermee mag, en
rechts wie hem toevoegde */
.vw-voet {
display: flex;
align-items: center;
height: calc(44 * var(--pt));
margin-top: calc(12 * var(--pt));
}
.vw-card > .vw-voet { padding: 0 calc(16 * var(--pt)); }
.vw-card-citaat > .vw-voet,
.vw-card-los > .vw-voet { padding: 0; }
.vw-voet-knoppen {
display: flex;
translate: calc(-12 * var(--pt)) 0;
}
.vw-voet-knop {
display: flex;
align-items: center;
gap: calc(4 * var(--pt));
min-width: calc(44 * var(--pt));
height: calc(44 * var(--pt));
padding: 0 calc(12 * var(--pt));
box-sizing: border-box;
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: rgba(107, 96, 85, 0.75);
}
.vw-voet-knop b { font-weight: inherit; }
.vw-voet-knop .mi { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.vw-voet-knop.is-gegeven { color: #D98BA0; }
.vw-voet-knop.is-weg { color: #C1554A; }
/* Het hartje dat bij het voorwoord gegeven wordt: eerst in lijnen, dan
gevuld in het roze van liefde, met een tikje */
.vw-tl-hart .mi + .mi { display: none; }
.vw-tl-hart.is-gegeven .mi { display: none; }
.vw-tl-hart.is-gegeven .mi + .mi { display: block; animation: vw-hart-tik 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes vw-hart-tik {
0% { transform: scale(0.6); }
55% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.vw-auteur {
display: flex;
align-items: center;
gap: calc(8 * var(--pt));
margin-left: auto;
white-space: nowrap;
font-family: var(--ek-lees);
font-size: calc(14 * var(--pt));
font-weight: 500;
line-height: calc(20 * var(--pt));
color: #716559;
}
.vw-auteur img {
width: calc(20 * var(--pt));
height: calc(20 * var(--pt));
border-radius: 50%;
object-fit: cover;
}
/* ── De videokaart: de poster met een glazen afspeelknop in het midden.
Afgespeeld: de knoppen in de hoeken en een voortgangsbalk onderaan. ── */
.vw-video img { transform-origin: 62% 58%; }
.vw-video-start {
position: absolute;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: calc(54 * var(--pt));
height: calc(54 * var(--pt));
translate: -50% -50%;
box-sizing: border-box;
border: calc(1 * var(--pt)) solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
background: rgba(216, 195, 166, 0.28);
-webkit-backdrop-filter: blur(calc(10 * var(--pt)));
backdrop-filter: blur(calc(10 * var(--pt)));
color: #FFFFFF;
transition: opacity 0.2s ease;
}
.vw-video-start .mi {
width: calc(33 * var(--pt));
height: calc(33 * var(--pt));
filter: drop-shadow(0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgba(0, 0, 0, 0.45));
}
/* De knoppen in de hoeken: beige, want de hoek van deze video is donker */
.vw-video-knop {
position: absolute;
display: grid;
place-items: center;
border-radius: 50%;
background: #D8C3A6;
color: #566250;
box-shadow: 0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.38);
opacity: 0;
transition: opacity 0.2s ease;
}
.vw-video-speel { left: calc(12 * var(--pt)); bottom: calc(14 * var(--pt)); width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); }
.vw-video-speel .mi { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.vw-video-geluid { right: calc(52 * var(--pt)); bottom: calc(16 * var(--pt)); width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); }
.vw-video-geluid .mi { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.vw-video-volledig { right: calc(12 * var(--pt)); bottom: calc(16 * var(--pt)); width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); }
.vw-video-volledig .mi { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.vw-video-balk {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: calc(8 * var(--pt));
background: rgba(255, 255, 255, 0.3);
opacity: 0;
}
.vw-video-balk span {
display: block;
width: 100%;
height: 100%;
background: #566250;
transform: scaleX(0);
transform-origin: 0 50%;
}
.vw-video.is-speelt .vw-video-start { opacity: 0; }
.vw-video.is-speelt .vw-video-knop,
.vw-video.is-speelt .vw-video-balk { opacity: 1; }
/* Een spraakmemo: op een getinte balk de ronde afspeelknop in de kleur
van de capsule, de golf (die ook de schuifbalk is) en de tijden. Speelt
hij, dan loopt de golf vol in de kleur van de capsule (--voortgang, van
0 tot 1, zet voor-wie.js). */
.vw-spraak {
display: flex;
align-items: center;
gap: calc(8 * var(--pt));
margin-top: calc(12 * var(--pt));
padding: calc(8 * var(--pt)) calc(12 * var(--pt));
border-radius: calc(12 * var(--pt));
background: rgba(86, 98, 80, 0.12);
}
.vw-spraak-knop {
display: grid;
place-items: center;
flex-shrink: 0;
width: calc(34 * var(--pt));
height: calc(34 * var(--pt));
margin: calc(8 * var(--pt));
border-radius: 50%;
background: #566250;
color: #E8F0E2;
}
.vw-spraak-knop .mi { grid-area: 1 / 1; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.vw-spraak-knop .mi + .mi,
.vw-spraak.is-speelt .vw-spraak-knop .mi { display: none; }
.vw-spraak.is-speelt .vw-spraak-knop .mi + .mi { display: block; }
.vw-spraak-spoor { flex: 1; min-width: 0; }
.vw-spraak-golf {
--voortgang: 0;
display: flex;
align-items: center;
gap: calc(4 * var(--pt));
height: calc(32 * var(--pt));
margin: calc(4 * var(--pt)) calc(4 * var(--pt)) calc(4 * var(--pt)) 0;
}
.vw-spraak-golf i {
flex: 1;
height: max(calc(6 * var(--pt)), calc(var(--h) * 100%));
border-radius: 99px;
background: linear-gradient(90deg,
#566250 calc(clamp(0, var(--voortgang) * 21 - var(--i), 1) * 100%),
rgba(86, 98, 80, 0.25) 0);
}
.vw-spraak-tijden {
display: flex;
justify-content: space-between;
margin-right: calc(4 * var(--pt));
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
font-variant-numeric: tabular-nums;
color: #566250;
}
/* Een uitspraak als gesprekje: wie wat zei boven het eerste wolkje, het
kind rechts in de kleur van de capsule, de ander links in een stil,
neutraal wolkje. Het staartje is de hoek van vier punten. */
.vw-gesprek { display: flex; flex-direction: column; }
.vw-bel {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: calc(4 * var(--pt));
}
.vw-bel small {
padding: 0 0 calc(1 * var(--pt)) calc(4 * var(--pt));
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: #716559;
}
.vw-bel span {
max-width: calc(260 * var(--pt));
padding: calc(8 * var(--pt)) calc(12 * var(--pt));
border-radius: calc(16 * var(--pt)) calc(16 * var(--pt)) calc(16 * var(--pt)) calc(4 * var(--pt));
background: #F5F3EF;
font-family: var(--ek-serif);
font-size: calc(16 * var(--pt));
font-style: italic;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-bel-kind { align-items: flex-end; }
.vw-bel-kind small { padding: 0 calc(4 * var(--pt)) calc(1 * var(--pt)) 0; }
.vw-bel-kind span {
border-radius: calc(16 * var(--pt)) calc(16 * var(--pt)) calc(4 * var(--pt)) calc(16 * var(--pt));
background: #566250;
color: #E8F0E2;
}
/* Kunst en Groei bij het voorwoord: elk een eigen scherm onder dezelfde
balk en boven dezelfde tabbalk, met een eigen scrollstand. Het rondje
wisselt er in één keer naartoe, zoals de app van tabblad wisselt. */
.vw-tl-tab {
position: absolute;
inset: 0;
overflow: hidden;
background: #FBF9F5;
visibility: hidden;
}
.vw-tl.is-kunst .vw-tl-tab[data-tab="kunst"],
.vw-tl.is-groei .vw-tl-tab[data-tab="groei"] { visibility: visible; }
.vw-tl-schuif { will-change: transform; }
/* Kunst: de strook bovenin staat op de paginakleur, zonder glas, en klapt
weg zodra je meer dan 24 punten scrolt; de lijst schuift dan mee omhoog */
.vw-kunst-strook {
position: absolute;
left: 0;
right: 0;
top: calc(128 * var(--pt));
height: calc(104 * var(--pt));
padding-top: calc(4 * var(--pt));
box-sizing: border-box;
overflow: hidden;
background: #FBF9F5;
transition: height 0.18s ease-out;
}
.vw-kunst.is-ingeklapt .vw-kunst-strook { height: 0; }
.vw-kunst.is-ingeklapt .vw-kunst-strook > * { visibility: hidden; }
.vw-kunst-filters {
display: flex;
align-items: center;
justify-content: space-between;
height: calc(44 * var(--pt));
margin-top: calc(8 * var(--pt));
padding: 0 calc(16 * var(--pt)) 0 calc(24 * var(--pt));
}
.vw-kunst-volgorde {
display: flex;
align-items: center;
height: calc(44 * var(--pt));
padding: 0 calc(12 * var(--pt));
box-sizing: border-box;
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(16 * var(--pt));
background: #FFFFFF;
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: #566250;
}
.vw-kunst-volgorde .mi {
width: calc(12 * var(--pt));
height: calc(12 * var(--pt));
margin: 0 calc(4 * var(--pt));
}
.vw-kunst-venster {
position: absolute;
left: 0;
right: 0;
top: calc(232 * var(--pt));
bottom: 0;
overflow: hidden;
transition: top 0.18s ease-out;
}
.vw-kunst.is-ingeklapt .vw-kunst-venster { top: calc(128 * var(--pt)); }
.vw-kunst-lijst {
position: relative;
padding: calc(8 * var(--pt)) 0 calc(28 * var(--pt));
}
/* Het getekende lijntje in de kantlijn, met een lusje bij elke fase
(voor-wie.js tekent het na, zoals ArtMarginLine het tekent) */
.vw-kunst-lijn {
position: absolute;
left: 0;
top: 0;
overflow: visible;
fill: none;
stroke: #D7EBCE;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.vw-fase {
position: relative;
padding-top: calc(20 * var(--pt));
}
.vw-fase:first-of-type { padding-top: calc(4 * var(--pt)); }
.vw-fase-kop {
position: relative;
margin: 0 calc(20 * var(--pt));
padding: calc(12 * var(--pt)) calc(12 * var(--pt)) calc(12 * var(--pt)) calc(16 * var(--pt));
border-radius: calc(16 * var(--pt));
background: var(--tint);
}
.vw-fase-caps {
font-size: calc(12 * var(--pt));
font-weight: 500;
line-height: calc(16 * var(--pt));
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #566250;
}
.vw-fase-naam {
margin-top: calc(2 * var(--pt));
padding-right: calc(28 * var(--pt));
font-family: var(--ek-serif);
font-size: calc(18 * var(--pt));
font-weight: 600;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-fase-kop .mi {
position: absolute;
right: calc(12 * var(--pt));
top: calc(20 * var(--pt));
width: calc(20 * var(--pt));
height: calc(20 * var(--pt));
color: #566250;
}
/* Twee kolommen, om en om gevuld; één werk krijgt de hele breedte */
.vw-fase-werken {
display: flex;
align-items: flex-start;
gap: calc(12 * var(--pt));
margin: calc(16 * var(--pt)) calc(20 * var(--pt)) 0;
}
.vw-fase-kolom {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: calc(12 * var(--pt));
}
/* Een werk in een wit passe-partout, zonder schaduw */
.vw-werk {
flex: 1;
min-width: 0;
padding-bottom: calc(8 * var(--pt));
box-sizing: border-box;
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(16 * var(--pt));
background: #FFFFFF;
}
.vw-werk-breed { padding-bottom: calc(12 * var(--pt)); }
.vw-werk img {
display: block;
width: calc(100% - 16 * var(--pt));
height: auto;
margin: calc(8 * var(--pt));
border-radius: calc(8 * var(--pt));
object-fit: cover;
}
.vw-werk-titel {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
padding: 0 calc(8 * var(--pt)) 0 calc(12 * var(--pt));
font-family: var(--ek-serif);
font-size: calc(18 * var(--pt));
font-weight: 600;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
/* De soort, en rechts het potlood en de ster, elk in een vak van 28 punten */
.vw-werk-meta {
display: flex;
align-items: center;
height: calc(24 * var(--pt));
margin-top: calc(1 * var(--pt));
padding: 0 calc(8 * var(--pt)) 0 calc(12 * var(--pt));
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: #716559;
}
.vw-werk-meta span {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vw-werk-meta i { display: flex; }
.vw-werk-meta .mi {
width: calc(16 * var(--pt));
height: calc(16 * var(--pt));
padding: calc(4 * var(--pt)) calc(4 * var(--pt)) calc(4 * var(--pt)) calc(8 * var(--pt));
box-sizing: content-box;
color: rgba(107, 96, 85, 0.5);
}
.vw-werk-meta .is-favoriet .mi { color: #F2C233; }
/* Groei: de pagina schuift onder de glazen balk door. Bovenaan de naam en
de leeftijd, daaronder de onderdelen langs een meetlat. Elk onderdeel
heeft een kop die blijft staan terwijl je erdoorheen scrolt (voor-wie.js
zet hem vast), met een rond icoon op de meetlat en een plusknop. */
.vw-groei-pagina {
position: relative;
padding: calc(128 * var(--pt)) 0 calc(120 * var(--pt));
}
.vw-groei-titel {
padding: calc(16 * var(--pt)) calc(24 * var(--pt)) calc(36 * var(--pt));
font-family: var(--ek-serif);
font-size: calc(22 * var(--pt));
font-weight: 600;
line-height: calc(28 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-groei-deel { position: relative; }
.vw-groei-band {
position: relative;
z-index: 1;
display: flex;
align-items: center;
height: calc(64 * var(--pt));
padding: 0 calc(16 * var(--pt));
background: #FBF9F5;
}
.vw-groei-knoop {
display: grid;
place-items: center;
flex-shrink: 0;
width: calc(36 * var(--pt));
height: calc(36 * var(--pt));
margin: 0 calc(10 * var(--pt)) 0 calc(-6 * var(--pt));
border-radius: 50%;
background: var(--tint);
color: var(--accent);
}
.vw-groei-knoop .mi { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.vw-groei-kop {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: calc(16 * var(--pt));
font-weight: 500;
line-height: calc(24 * var(--pt));
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #6B6055;
}
.vw-groei-alles {
flex-shrink: 0;
padding: calc(4 * var(--pt)) calc(8 * var(--pt));
margin: 0 calc(4 * var(--pt)) 0 calc(8 * var(--pt));
font-size: calc(12 * var(--pt));
font-weight: 500;
line-height: calc(16 * var(--pt));
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #566250;
}
.vw-groei-plus {
display: grid;
place-items: center;
flex-shrink: 0;
width: calc(36 * var(--pt));
height: calc(36 * var(--pt));
margin: 0 calc(4 * var(--pt)) 0 calc(8 * var(--pt));
border-radius: 50%;
background: #566250;
color: #E8F0E2;
}
.vw-groei-alles + .vw-groei-plus { margin-left: 0; }
.vw-groei-plus .mi { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
/* De romp van een onderdeel, met links de meetlat: een lat met om de 8
punten een streepje en om de 40 punten een langer, donkerder streepje */
.vw-groei-romp {
position: relative;
padding: 0 calc(16 * var(--pt)) calc(36 * var(--pt)) calc(56 * var(--pt));
}
.vw-groei-romp::before {
content: '';
position: absolute;
left: calc(16 * var(--pt));
top: 0;
bottom: 0;
width: calc(13 * var(--pt));
background:
linear-gradient(#D7EBCE, #D7EBCE) right top / calc(2 * var(--pt)) 100% no-repeat,
repeating-linear-gradient(#96CA7E 0 calc(1.2 * var(--pt)), transparent calc(1.2 * var(--pt)) calc(40 * var(--pt))) left top / calc(11 * var(--pt)) 100% no-repeat,
repeating-linear-gradient(#D7EBCE 0 calc(1 * var(--pt)), transparent calc(1 * var(--pt)) calc(8 * var(--pt))) calc(6 * var(--pt)) top / calc(5 * var(--pt)) 100% no-repeat;
}
.vw-groei-deel:last-child .vw-groei-romp { padding-bottom: 0; }
.vw-groei-deel:last-child .vw-groei-romp::before { bottom: calc(24 * var(--pt)); }
/* Lengte en gewicht: de laatste meting, en de weg naar de grafiek */
.vw-maat {
overflow: hidden;
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(28 * var(--pt));
background: #EFEEEA;
}
.vw-maat-rij {
display: flex;
height: calc(80 * var(--pt));
}
.vw-maat-rij p {
flex: 1;
padding: calc(16 * var(--pt));
}
/* Een haarlijn tussen de twee helften, 16 punten van boven en onder */
.vw-maat-rij p + p {
background: linear-gradient(rgba(197, 200, 191, 0.3), rgba(197, 200, 191, 0.3)) left center / calc(1 * var(--pt)) calc(48 * var(--pt)) no-repeat;
}
.vw-maat-rij small {
display: block;
font-size: calc(12 * var(--pt));
font-weight: 500;
line-height: calc(16 * var(--pt));
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #6B6055;
}
.vw-maat-rij span {
display: flex;
align-items: baseline;
gap: calc(4 * var(--pt));
margin-top: calc(4 * var(--pt));
font-size: calc(16 * var(--pt));
line-height: calc(28 * var(--pt));
color: #6B6055;
}
.vw-maat-rij b {
font-family: var(--ek-serif);
font-size: calc(22 * var(--pt));
font-weight: 600;
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-maat-voet {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(12 * var(--pt)) calc(16 * var(--pt));
border-top: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: #6B6055;
}
.vw-maat-voet .mi { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: #716559; }
/* Een rij kaarten die opzij schuift, afgesneden op de rand van de kolom */
.vw-groei-rij { overflow: hidden; }
.vw-groei-rij-schuif {
display: flex;
align-items: stretch;
gap: calc(16 * var(--pt));
will-change: transform;
}
.vw-groei-kaart {
flex: 0 0 calc(240 * var(--pt));
overflow: hidden;
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(28 * var(--pt));
background: #EFEEEA;
box-shadow: 0 calc(4 * var(--pt)) calc(16 * var(--pt)) rgba(0, 0, 0, 0.04);
}
.vw-groei-kaart:nth-child(even) { background: #F5F3EF; }
.vw-groei-kaart img {
display: block;
width: 100%;
height: calc(180 * var(--pt));
object-fit: cover;
background: #E4E2DE;
}
.vw-groei-kaart-school img { height: calc(150 * var(--pt)); }
.vw-groei-kaart-tekst { padding: calc(16 * var(--pt)); }
.vw-groei-kaart-rij {
display: flex;
align-items: center;
gap: calc(8 * var(--pt));
height: calc(24 * var(--pt));
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
white-space: nowrap;
color: #6B6055;
}
.vw-groei-kaart-rij.is-los { height: calc(16 * var(--pt)); }
/* De datum staat tegen de rechterrand van de kaart, los van het label */
.vw-groei-kaart-rij > span:not(.vw-groei-pil) { margin-left: auto; }
.vw-groei-pil {
padding: calc(4 * var(--pt)) calc(12 * var(--pt));
border-radius: 999px;
background: #D7EBCE;
font-weight: 500;
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #566250;
}
.vw-groei-pil.is-beige { background: #EBDFCF; color: #805440; }
.vw-groei-kaart-titel {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: calc(8 * var(--pt));
font-family: var(--ek-serif);
font-size: calc(18 * var(--pt));
font-weight: 600;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-groei-kaart-uitleg {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: calc(4 * var(--pt));
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: #6B6055;
}
.vw-groei-label {
margin: calc(24 * var(--pt)) 0 calc(8 * var(--pt));
font-size: calc(12 * var(--pt));
font-weight: 500;
line-height: calc(16 * var(--pt));
letter-spacing: calc(0.6 * var(--pt));
text-transform: uppercase;
color: #6B6055;
}
/* Diploma's: warme tegels met een foto of een afstudeerhoedje */
.vw-diploma {
display: flex;
align-items: center;
gap: calc(12 * var(--pt));
flex: none;
width: calc(216 * var(--pt));
min-width: 0;
overflow: hidden;
height: calc(88 * var(--pt));
padding: calc(10 * var(--pt)) calc(12 * var(--pt));
border: calc(1 * var(--pt)) solid rgba(128, 84, 64, 0.35);
border-radius: calc(20 * var(--pt));
background: rgba(235, 223, 207, 0.5);
}
.vw-groei-rij-schuif:has(.vw-diploma) { gap: calc(12 * var(--pt)); }
.vw-diploma-duim {
display: grid;
place-items: center;
flex-shrink: 0;
width: calc(48 * var(--pt));
height: calc(48 * var(--pt));
overflow: hidden;
border: calc(1 * var(--pt)) solid rgba(128, 84, 64, 0.4);
border-radius: 50%;
background: rgba(128, 84, 64, 0.15);
font-size: calc(22 * var(--pt));
line-height: 1;
}
.vw-diploma-duim:has(img) { border: 0; border-radius: calc(16 * var(--pt)); }
.vw-diploma-duim img { width: 100%; height: 100%; object-fit: cover; }
.vw-diploma-tekst { flex: 1; min-width: 0; }
.vw-diploma-tekst b {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: calc(16 * var(--pt));
font-weight: 400;
line-height: calc(24 * var(--pt));
color: #2E2721;
}
.vw-diploma-tekst small {
display: flex;
align-items: center;
gap: calc(4 * var(--pt));
margin-top: calc(4 * var(--pt));
font-size: calc(12 * var(--pt));
line-height: calc(16 * var(--pt));
color: #805440;
}
.vw-diploma-tekst .mi { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
/* Talenten en passies, nog niets vastgelegd: de uitnodiging voor de wizard */
.vw-talent {
display: flex;
flex-direction: column;
align-items: center;
padding: calc(28 * var(--pt)) calc(24 * var(--pt));
border: calc(1 * var(--pt)) solid rgba(197, 200, 191, 0.3);
border-radius: calc(28 * var(--pt));
background: #EFE8E2;
text-align: center;
}
.vw-talent-icoon {
display: grid;
place-items: center;
width: calc(62 * var(--pt));
height: calc(62 * var(--pt));
border-radius: 50%;
background: rgba(128, 84, 64, 0.12);
color: #805440;
}
.vw-talent-icoon .mi { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); }
.vw-talent-kop {
margin-top: calc(16 * var(--pt));
font-family: var(--ek-serif);
font-size: calc(18 * var(--pt));
font-weight: 600;
line-height: calc(24 * var(--pt));
letter-spacing: calc(-0.6 * var(--pt));
color: #2E2721;
}
.vw-talent-tekst {
margin-top: calc(4 * var(--pt));
font-size: calc(16 * var(--pt));
line-height: calc(24 * var(--pt));
color: #6B6055;
}
.vw-talent-knop {
display: flex;
align-items: center;
gap: calc(8 * var(--pt));
height: calc(52 * var(--pt));
margin-top: calc(16 * var(--pt));
padding: 0 calc(20 * var(--pt));
border-radius: calc(16 * var(--pt));
background: #566250;
font-size: calc(16 * var(--pt));
font-weight: 600;
line-height: calc(24 * var(--pt));
color: #E8F0E2;
}
.vw-talent-knop .mi { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
/* Op Groei staat geen plusknop: toevoegen gaat met de plus in elke kop */
.vw-telefoon[data-tab="groei"] .vw-fab {
opacity: 0;
transform: scale(0.6);
}
/* Het rondje bij het voorwoord wisselt in één keer van tabblad */
.vw-telefoon.vw-direct .vw-strip,
.vw-telefoon.vw-direct .vw-tl-naam,
.vw-telefoon.vw-direct .vw-app-titel span,
.vw-telefoon.vw-direct .vw-fab,
.vw-telefoon.vw-direct .vw-tabbalk span { transition: none; }
/* Het doek waarmee het rondje bij het voorwoord terugvloeit naar het
begin: over de app heen, onder de statusbalk van het toestel */
.vw-tl-doek {
position: absolute;
inset: 0;
z-index: 5;
background: #FBF9F5;
opacity: 0;
pointer-events: none;
}
/* 1 · Om 07:30: dezelfde tijdlijn, vast onder de strook. De nieuwe
uitspraak schuift er bovenaan tussen zodra het moment begint. Het vlak is
dicht, zodat het de tijdlijn van het voorwoord precies afdekt. */
.vw-paneel-lijst {
padding: calc(104 * var(--pt)) 0 0;
background: #FBF9F5;
transform: none;
}
.vw-paneel-lijst { --in: clamp(0, calc(var(--q, 0) / 0.12), 1); }
/* Dicht is de rij echt nul hoog, ook zijn ruimte tot de volgende rij */
.vw-rij-nieuw {
max-height: calc(var(--in) * 300 * var(--pt));
padding-bottom: calc(var(--in) * 28 * var(--pt));
overflow: hidden;
opacity: var(--in);
}
/* Zolang de nieuwe rij dicht is, begint de lijn bij de stip eronder */
.vw-rij-nieuw + .vw-rij::before { top: calc((1 - var(--in)) * 30 * var(--pt)); }
.vw-card-citaat .vw-bewaard { margin-top: calc(10 * var(--pt)); font-size: calc(13 * var(--pt)); }
/* 2 · Kunst scannen */
.vw-scan {
padding: 0.9em;
border-radius: 1.2em;
background: #2B2724;
}
.vw-scan-vel {
--recht: clamp(0, calc((var(--q, 0) - 0.4) / 0.22), 1);
position: relative;
width: 86%;
margin: 0.6em auto 0.9em;
transform: perspective(30em) rotateX(calc((1 - var(--recht)) * 18deg)) rotate(calc((1 - var(--recht)) * -9deg)) scale(calc(0.86 + 0.14 * var(--recht)));
filter: brightness(calc(0.82 + 0.18 * var(--recht))) saturate(calc(0.75 + 0.25 * var(--recht)));
}
.vw-scan-vel svg { display: block; width: 100%; height: auto; border-radius: 0.2em; }
.vw-scan-hoek {
position: absolute;
width: 1.2em;
height: 1.2em;
border: 0.22em solid #B7DAA7;
opacity: clamp(0, calc((var(--q, 0) - 0.34) * 10), 1);
}
.vw-hoek-lb { left: -0.35em; top: -0.35em; border-right: 0; border-bottom: 0; border-top-left-radius: 0.4em; }
.vw-hoek-rb { right: -0.35em; top: -0.35em; border-left: 0; border-bottom: 0; border-top-right-radius: 0.4em; }
.vw-hoek-lo { left: -0.35em; bottom: -0.35em; border-right: 0; border-top: 0; border-bottom-left-radius: 0.4em; }
.vw-hoek-ro { right: -0.35em; bottom: -0.35em; border-left: 0; border-top: 0; border-bottom-right-radius: 0.4em; }
.vw-scan-lijn {
--veeg: clamp(0, calc((var(--q, 0) - 0.5) / 0.22), 1);
position: absolute;
left: -4%;
right: -4%;
top: calc(var(--veeg) * 100%);
height: 0.2em;
border-radius: 1em;
background: #B7DAA7;
box-shadow: 0 0 1em 0.2em rgba(183, 218, 167, 0.6);
opacity: calc(clamp(0, calc((var(--q, 0) - 0.5) * 20), 1) - clamp(0, calc((var(--q, 0) - 0.72) * 20), 1));
}
.vw-scan-stappen {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.3em;
}
.vw-scan-stappen li {
--aan: clamp(0, calc((var(--q, 0) - var(--drempel)) * 1000), 1);
display: flex;
align-items: center;
gap: 0.4em;
font-size: 0.8em;
color: #E9E4DA;
opacity: calc(0.25 + 0.75 * var(--aan));
transition: opacity 0.3s ease;
}
.vw-scan-stappen .ic {
width: 1.2em;
height: 1.2em;
vertical-align: 0;
stroke-width: 2.6;
color: #B7DAA7;
transform: scale(var(--aan));
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vw-galerij {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.4em;
}
.vw-galerij > * {
aspect-ratio: 1;
width: 100%;
border-radius: 0.6em;
object-fit: cover;
background: #FFFFFF;
overflow: hidden;
}
.vw-galerij-nieuw {
--aan: clamp(0, calc((var(--q, 0) - 0.76) * 1000), 1);
display: grid;
place-items: center;
box-shadow: 0 0 0 0.18em #B7DAA7;
transform: scale(var(--aan));
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vw-galerij-nieuw svg { width: 100%; height: 100%; }
/* 4 · Spraakmemo van oma */
.vw-memo {
--gehoord: clamp(0, calc((var(--q, 0) - 0.12) / 0.7), 1);
}
.vw-memo-kop {
display: flex;
align-items: center;
gap: 0.6em;
}
.vw-memo-kop img {
width: 2.6em;
height: 2.6em;
border-radius: 50%;
object-fit: cover;
}
.vw-memo-kop > span:nth-child(2) {
flex: 1;
display: flex;
flex-direction: column;
font-size: 0.9em;
}
.vw-memo-kop small { font-size: 0.82em; color: #8F867C; }
.vw-memo-knop {
display: grid;
place-items: center;
width: 2.3em;
height: 2.3em;
border-radius: 50%;
background: #566250;
color: #FFFFFF;
}
.vw-memo-knop .ic { width: 1em; height: 1em; vertical-align: 0; fill: currentColor; }
.vw-golf {
display: flex;
align-items: center;
gap: 0.18em;
height: 2.8em;
margin: 0.7em 0 0.5em;
}
.vw-golf span {
flex: 1;
height: var(--h);
border-radius: 1em;
background: #C9C2B5;
}
.vw-golf span {
background: color-mix(in srgb, #566250 calc(clamp(0, calc(var(--gehoord) * 28 - var(--i)), 1) * 100%), #D6D0C4);
}
.vw-memo-tekst {
font-family: var(--font-display);
font-size: 0.95em;
line-height: 1.4;
}
/* Het getal is het aantal woorden in de spraakmemo */
.vw-memo-tekst span {
opacity: calc(0.22 + 0.78 * clamp(0, calc(var(--gehoord) * 23 - var(--i)), 1));
}
/* 3 · Groei */
.vw-groei-kop { padding: 0.5em 0 0.2em; }
.vw-groei-getal {
font-family: var(--font-display);
font-size: 1.3em;
color: #655E55;
}
.vw-groei-getal b {
font-size: 2.3em;
font-weight: 600;
color: #27231E;
font-variant-numeric: tabular-nums;
}
.vw-groei-sub { font-size: 0.8em; color: #8F867C; }
.vw-grafiek {
margin: 0.6em -0.2em 0.4em;
padding: 0.6em 0.4em 0.3em;
border-radius: 1.1em;
background: #FFFFFF;
}
.vw-grafiek svg { display: block; width: 100%; height: auto; overflow: visible; }
.vw-grafiek-as text {
font-family: var(--font-body);
font-size: 7px;
fill: #978F84;
}
.vw-grafiek-lijn {
stroke-dasharray: 1 1;
stroke-dashoffset: calc(1 - clamp(0, calc((var(--q, 0) - 0.15) / 0.7), 1));
}
.vw-grafiek-punten circle {
opacity: clamp(0, calc((var(--q, 0) - var(--drempel)) * 20), 1);
}
.vw-mijlpalen {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.45em;
margin-top: 0.7em;
}
.vw-mijlpalen li {
--aan: clamp(0, calc((var(--q, 0) - var(--drempel)) * 1000), 1);
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.55em 0.8em;
border-radius: 1em;
background: #FFFFFF;
font-size: 0.85em;
font-weight: 600;
opacity: var(--aan);
transform: translateX(calc((1 - var(--aan)) * 1.5em));
transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-mijlpalen .ic {
width: 1.6em;
height: 1.6em;
padding: 0.25em;
box-sizing: content-box;
border-radius: 50%;
background: #F6E7C4;
color: #8F651F;
vertical-align: 0;
}
.vw-mijlpalen small {
display: block;
font-weight: 500;
color: #8F867C;
}
/* Het gewicht naast de lengte (voor-wie.js telt allebei op) */
.vw-groei-kg {
margin-left: 0.5em;
padding-left: 0.5em;
border-left: 1.5px solid #DDD6C8;
font-size: 0.8em;
}
.vw-groei-getal .vw-groei-kg b { font-size: 2em; }
/* Een seizoensvraag: later teruglezen wat ze wilde worden toen ze vier was */
.vw-seizoen {
--aan: clamp(0, calc((var(--q, 0) - var(--drempel)) * 1000), 1);
margin-top: 0.7em;
opacity: var(--aan);
transform: translateY(calc((1 - var(--aan)) * 0.8em));
transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-seizoen-kop {
font-size: 0.72em;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #2F6A8A;
}
.vw-seizoen-vraag {
margin: 0.2em 0 0.15em;
font-size: 0.85em;
font-weight: 600;
}
/* 4 · Liefde van ver */
.vw-liefde {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 0.7em;
padding-top: 0.6em;
border-top: 1px solid #F0ECE3;
font-size: 0.74em;
color: #655E55;
}
.vw-liefde-hart .ic {
width: 1.5em;
height: 1.5em;
vertical-align: 0;
fill: #E07A95;
stroke: #E07A95;
}
.vw-liefde-fotos { display: flex; }
.vw-liefde-fotos img,
.vw-reactie img {
width: 1.9em;
height: 1.9em;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 0.15em #FFFFFF;
}
.vw-liefde-fotos img + img { margin-left: -0.5em; }
.vw-reactie {
display: flex;
align-items: flex-start;
gap: 0.5em;
margin-top: 0.6em;
font-size: 0.82em;
}
.vw-reactie span {
padding: 0.5em 0.8em;
border-radius: 0.3em 1em 1em 1em;
background: #F3EFF8;
}
.vw-reactie b { display: block; font-size: 0.9em; color: #6E4483; }
/* 5 · Op tv */
.vw-cast-kaart {
display: flex;
align-items: center;
gap: 0.7em;
margin-top: 0.4em;
padding: 0.7em 0.9em;
border-radius: 1em;
background: #2B2320;
color: #F7EFE6;
}
.vw-cast-kaart .ic { width: 1.7em; height: 1.7em; color: #F0C27E; vertical-align: 0; }
.vw-cast-kaart span { display: flex; flex-direction: column; font-size: 0.85em; }
.vw-cast-kaart small { color: #CDBBA8; }
.vw-film-kaart {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.8em 0 0.6em;
padding: 1em 0.5em;
border-radius: 1.1em;
background: #FFFFFF;
}
.vw-film-kaart small {
font-size: 0.66em;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #8F651F;
}
.vw-film-kaart strong {
font-family: var(--font-display);
font-size: 2em;
font-weight: 600;
line-height: 1.15;
}
.vw-film-kaart span { font-size: 0.78em; color: #8F867C; }
.vw-hoofdstuklijst {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.15em;
}
.vw-hoofdstuklijst li {
--nu: calc(clamp(0, calc((var(--q, 0) - var(--van)) * 1000), 1) - clamp(0, calc((var(--q, 0) - var(--tot)) * 1000), 1));
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.42em 0.8em;
border-radius: 0.8em;
font-family: var(--font-display);
font-size: 0.9em;
color: color-mix(in srgb, #27231E calc(40% + var(--nu) * 60%), transparent);
background: color-mix(in srgb, #F6E7C4 calc(var(--nu) * 100%), transparent);
transition: background-color 0.3s ease, color 0.3s ease;
}
.vw-hoofdstuklijst li::before {
content: '';
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: color-mix(in srgb, #C28E46 calc(30% + var(--nu) * 70%), transparent);
}
.vw-bediening {
display: flex;
justify-content: center;
align-items: center;
gap: 1.6em;
margin-top: 0.9em;
color: #655E55;
}
.vw-bediening span:first-child .ic { transform: scaleX(-1); }
.vw-bediening .ic { width: 1.3em; height: 1.3em; vertical-align: 0; fill: currentColor; }
.vw-bediening-hoofd {
display: grid;
place-items: center;
width: 3em;
height: 3em;
border-radius: 50%;
background: #566250;
color: #FFFFFF;
}
.vw-bediening-hoofd .ic { fill: none; stroke-width: 2.6; }
/* 6 · Boodschap */
.vw-brief { background: #FFFDF7; }
.vw-brief-aanhef,
.vw-brief-regel,
.vw-brief-groet {
font-family: var(--font-display);
line-height: 1.4;
opacity: clamp(0, calc((var(--q, 0) - var(--drempel)) * 7), 1);
transform: translateY(calc((1 - clamp(0, calc((var(--q, 0) - var(--drempel)) * 7), 1)) * 0.4em));
}
.vw-brief-aanhef { font-size: 1.1em; margin: 0.2em 0 0.25em; }
.vw-brief-regel { font-size: 0.95em; margin-bottom: 0.3em; }
.vw-brief-groet { font-size: 0.95em; font-style: italic; color: #655E55; margin-top: 0.3em; }
.vw-wens {
display: flex;
gap: 0.65em;
align-items: flex-start;
font-size: 0.78em;
color: #655E55;
background: #F2EEE4;
box-shadow: none;
}
.vw-wens b { display: block; color: #27231E; font-size: 1.05em; }
.vw-wens-slot {
display: grid;
place-items: center;
flex-shrink: 0;
width: 2.3em;
height: 2.3em;
border-radius: 50%;
background: #566250;
color: #FFFFFF;
}
.vw-wens-slot .ic { width: 1.2em; height: 1.2em; vertical-align: 0; }
/* Om 19:30 komen de liefde, de reactie en de wens erbij terwijl je
scrolt, elk vanaf zijn eigen --drempel */
.vw-komt-erbij {
--aan: clamp(0, calc((var(--q, 0) - var(--drempel)) * 1000), 1);
opacity: var(--aan);
transform: translateY(calc((1 - var(--aan)) * 0.8em));
transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 7 · Het jaar */
.vw-jaar-boven {
margin-top: 0.8em;
text-align: center;
font-size: 0.72em;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #8F867C;
}
.vw-jaar-naam {
text-align: center;
font-family: var(--font-display);
font-size: 2.3em;
font-style: italic;
line-height: 1.1;
margin-bottom: 0.6em;
}
.vw-jaar-feiten {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4em;
margin-bottom: 0.8em;
}
.vw-jaar-feiten li {
padding: 0.5em 0.8em;
border-radius: 0.9em;
background: #FFFFFF;
font-size: 0.82em;
}
.vw-jaar-feiten b {
font-family: var(--font-display);
font-size: 1.25em;
color: #3A4435;
}
.vw-vorig-jaar { background: #EEF3EB; box-shadow: none; }
.vw-vorig-jaar .vw-klein-label { margin-top: 0; color: #566250; }
/* ── De hoofdstukken ───────────────────────────────────────────── */
/* De ruimte onderaan houdt het podium op zijn plek tot het laatste
moment (56vh hoog) midden in beeld heeft gestaan: (100 - 56) / 2 */
.vw-hoofdstukken {
position: relative;
z-index: 2;
margin-top: -100vh;
padding-bottom: 22vh;
}
/* Elk moment is net iets meer dan een half scherm hoog, zodat je niet
eindeloos hoeft te scrollen; alleen de opening vult het hele eerste
scherm. */
.vw-hoofdstuk {
display: flex;
align-items: center;
min-height: 56vh;
}
.vw-hoofdstuk.vw-begin { min-height: 100vh; }
.vw-hoofdstuk[hidden] { display: none; }
.vw-tekst {
width: min(33rem, 40vw);
margin-left: max(28px, calc((100vw - 1180px) / 2 + 28px));
padding: 6vh 0;
color: var(--vw-inkt);
opacity: calc(0.12 + 0.88 * var(--tp, 1));
transform: translateY(calc((1 - var(--tp, 1)) * 26px * var(--beweeg)));
}
.vw-tekst h1,
.vw-tekst h2 { color: var(--vw-inkt); }
.vw-tekst h1 {
font-size: clamp(2.6rem, 5vw, 4.1rem);
margin: 4px 0 22px;
}
.vw-tekst h2 {
font-size: clamp(1.95rem, 3.2vw, 2.75rem);
margin: 18px 0 18px;
text-wrap: balance;
}
.vw-tekst > p {
font-size: clamp(1.03rem, 1.25vw, 1.14rem);
line-height: 1.62;
color: var(--vw-inkt-zacht);
}
.vw-tekst .lead { color: var(--vw-inkt-zacht); }
.vw-begin .eyebrow { color: #566250; }
.vw-markering {
padding: 0 0.22em;
border-radius: 0.24em;
background: var(--t);
color: var(--a);
font-style: italic;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.vw-onderstreept {
position: relative;
display: inline-block;
font-style: italic;
color: #8F651F;
}
.vw-onderstreept svg {
position: absolute;
left: -3%;
bottom: -0.08em;
width: 106%;
height: 0.3em;
overflow: visible;
}
.vw-onderstreept path {
fill: none;
stroke: #E0B04E;
stroke-width: 5px;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
animation: vw-teken 1.3s 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes vw-teken {
to { stroke-dashoffset: 0; }
}
.vw-moment {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* In het verhaal even groot als boven de secties; anders neemt de tijd
de maat van de lopende tekst over (.vw-tekst > p) */
.vw-tekst .vw-moment { font-size: 0.8rem; }
.vw-tijd {
margin-right: 4px;
color: var(--a);
font-variant-numeric: tabular-nums;
}
/* De rol staat klein en zacht naast de tijd: de tijd leidt, de rol
zegt er alleen bij voor wie het moment is */
.vw-rol {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--t) 55%, transparent);
color: var(--a);
font-size: 0.68rem;
letter-spacing: 0.07em;
}
.vw-rol .ic { width: 11px; height: 11px; vertical-align: 0; }
/* De belangrijkste woorden van een tekst krijgen een streep van de
markeerstift, in de kleur van het moment: --stift, een vollere tint
van de markering in de kop (--t), zodat hij ook op de lucht van dat
moment opvalt. De streep wordt getekend zodra je bij de tekst
bent: in het verhaal zet voor-wie.js dan 'is-gelezen' op het
hoofdstuk, onder het verhaal doet .reveal.visible hetzelfde. Een
afgeschuinde punt aan het begin en eind, zoals bij een echte stift;
over een regelovergang loopt de streep gewoon door. */
.vw-stift {
--stift-dik: 0.5em;
padding: 0 0.12em;
margin: 0 -0.12em;
font-weight: 500;
color: inherit;
background-image: linear-gradient(104deg,
transparent 0.08em,
var(--stift, var(--t)) 0.24em,
var(--stift, var(--t)) calc(100% - 0.26em),
transparent calc(100% - 0.06em));
background-repeat: no-repeat;
background-position: 0 88%;
background-size: 100% var(--stift-dik);
}
.js .vw-hoofdstuk .vw-stift,
.js .reveal .vw-stift {
background-size: 0% var(--stift-dik);
transition: background-size 1s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.js .vw-hoofdstuk.is-gelezen .vw-stift,
.js .reveal.visible .vw-stift { background-size: 100% var(--stift-dik); }
.vw-tekst .vw-stift { color: var(--vw-inkt); }
.vw-scrollhint {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
font-size: 0.95rem;
font-weight: 600;
color: var(--vw-inkt);
}
.vw-scrollhint-pijl {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--vw-inkt) 22%, transparent);
animation: vw-hint 2.4s ease-in-out infinite;
}
.vw-scrollhint-pijl .ic { width: 18px; height: 18px; vertical-align: 0; }
@keyframes vw-hint {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
/* De eerste knop van de homepage, direct onder de belofte */
.vw-begin-knoppen {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 18px;
margin-top: 30px;
}
.vw-begin-knoppen p {
font-size: 0.9rem;
line-height: 1.35;
color: var(--vw-inkt-zacht);
}
.vw-begin .vw-scrollhint { margin-top: 34px; }
/* Wat nog niet uit is, zegt dat ook gewoon */
.vw-rol-binnenkort {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--t);
}
.vw-voetnoot {
margin-top: 18px;
font-size: 0.8rem !important;
color: var(--text-muted) !important;
}
.vw-legenda {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 22px;
font-size: 0.9rem;
font-weight: 500;
color: var(--vw-inkt);
}
.vw-legenda li {
display: inline-flex;
align-items: center;
gap: 7px;
}
.vw-legenda li::before {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--kleur);
}
.vw-legenda .vw-legenda-rustig { color: var(--vw-inkt-zacht); }
.vw-legenda .vw-legenda-rustig::before { background: transparent; box-shadow: inset 0 0 0 2px #CFC8BA; }
.vw-tot-morgen {
margin-top: 30px;
font-family: var(--font-display);
font-style: italic;
font-size: 1.6rem !important;
color: var(--vw-inkt) !important;
}
/* Het laatste hoofdstuk krijgt extra scrollruimte, zodat de krans kan
vollopen; de tekst blijft zolang in beeld staan. */
.vw-jaar {
min-height: 200vh;
align-items: flex-start;
}
.vw-jaar .vw-tekst {
position: sticky;
top: calc(var(--vw-kop) + 10vh);
}
/* ── Het dok: waar in de dag ben je? ───────────────────────────── */
/* Een lijn langs de rechterrand: je scrolt naar beneden, dus de dag
loopt ook naar beneden. Elke stip is een moment. De zon glijdt mee met
de tekst die je leest en wordt 's avonds de maan; voor-wie.js geeft
zijn plek door als --dz (0 is bovenaan de lijn, 1 is de laatste stip,
waar de lijn en de dag ophouden). Het stuk
dat al voorbij is, kleurt in de kleuren van de momenten. Een label dat
meeloopt past er niet naast: bij sommige momenten staat de telefoon
vlak bij de lijn. De tijd staat al boven de tekst en in de statusbalk
van de telefoon; met de muis op een stip zie je tijd en moment. */
.vw-dok {
display: none;
}
.js .vw-dok {
--dok-stap: 30px;
--dok-rand: 10px;
position: fixed;
right: 22px;
top: calc(50% + var(--vw-kop) / 2);
z-index: 90;
display: block;
color: var(--vw-inkt);
opacity: 0;
pointer-events: none;
transform: translate(16px, -50%);
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .vw-dok.is-zichtbaar {
opacity: 1;
pointer-events: auto;
transform: translate(0, -50%);
}
.vw-dok-rail {
position: relative;
width: 30px;
padding: var(--dok-rand) 0;
border-radius: 999px;
background: color-mix(in srgb, var(--vw-lucht-onder) 80%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
backdrop-filter: blur(16px) saturate(1.3);
box-shadow: 0 12px 32px rgba(39, 35, 30, 0.14), inset 0 0 0 1px color-mix(in srgb, var(--vw-inkt) 9%, transparent);
}
.vw-dok-lijn {
position: absolute;
left: 50%;
top: var(--dok-rand);
bottom: calc(var(--dok-rand) + var(--dok-stap) / 2);
width: 2px;
margin-left: -1px;
border-radius: 1px;
background: color-mix(in srgb, var(--vw-inkt) 14%, transparent);
}
/* De kleuren van de momenten zet voor-wie.js erin, elk ter hoogte van
zijn stip; alleen het stuk boven de zon is te zien */
.vw-dok-vul {
position: absolute;
inset: 0;
border-radius: inherit;
clip-path: inset(0 0 calc((1 - var(--dz, 0)) * 100%) 0);
}
.vw-dok-stippen {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.vw-dok-stippen li {
display: flex;
align-items: center;
justify-content: center;
height: var(--dok-stap);
}
.vw-dok-stippen li[hidden] { display: none; }
.vw-dok-stippen button {
position: relative;
display: block;
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--vw-inkt) 24%, transparent);
cursor: pointer;
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}
.vw-dok-stippen button::before {
content: '';
position: absolute;
inset: -8px -10px;
}
.vw-dok-stippen button.is-geweest { background: var(--kleur); }
/* Het moment waar je bent: een ring in zijn kleur, waar de zon in valt */
.vw-dok-stippen button[aria-current="step"] {
width: 18px;
height: 18px;
background: color-mix(in srgb, var(--kleur) 18%, transparent);
box-shadow: inset 0 0 0 2px var(--kleur);
}
.vw-dok-stippen button:focus-visible { outline-offset: 4px; }
/* Tijd en moment bij een stip, als je hem aanwijst of ernaartoe tabt */
.vw-dok-stippen button::after {
content: attr(data-tip);
position: absolute;
right: calc(100% + 16px);
top: 50%;
padding: 5px 11px;
border-radius: 999px;
background: color-mix(in srgb, var(--vw-lucht-onder) 92%, transparent);
box-shadow: 0 8px 24px rgba(39, 35, 30, 0.14), inset 0 0 0 1px color-mix(in srgb, var(--vw-inkt) 9%, transparent);
color: var(--vw-inkt);
font-family: var(--font-body);
font-size: 0.84rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translate(6px, -50%);
transition: opacity 0.2s ease, transform 0.25s ease;
}
.vw-dok-stippen button:focus-visible::after {
opacity: 1;
transform: translate(0, -50%);
}
@media (hover: hover) and (pointer: fine) {
.vw-dok-stippen button:hover::after {
opacity: 1;
transform: translate(0, -50%);
}
}
.vw-dok-zon {
position: absolute;
left: 50%;
top: calc(var(--dok-rand) + var(--dz, 0) * (100% - 2 * var(--dok-rand) - var(--dok-stap) / 2));
z-index: 1;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: #E8A93A;
box-shadow: 0 0 8px rgba(232, 169, 58, 0.85);
pointer-events: none;
transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
/* 's Avonds een maansikkel, net als de maan boven de nacht */
.vw-dok.is-nacht .vw-dok-zon {
background: transparent;
box-shadow: inset -3px 1px 0 0 #F6EDD3, 0 0 6px rgba(246, 237, 211, 0.3);
}
/* ═══════════════════════════════════════════════════════════════
Na het verhaal loopt de dag gewoon door
Bij zonsopgang begin je (zo werkt het), om middernacht ligt alles op
slot (privacy), en de dag erna volgen de prijzen, het verhaal achter
Omiki, de vragen en de downloadknoppen. Elke sectie zet zijn eigen
--a en --t, zodat .vw-moment en .vw-markering uit het verhaal hier
gewoon meekleuren.
═══════════════════════════════════════════════════════════════ */
.vw-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.vw-sectie {
position: relative;
z-index: 2;
padding: 64px 0;
}
.vw-intro {
max-width: 740px;
margin: 0 auto 32px;
text-align: center;
}
.vw-intro .vw-moment { justify-content: center; }
.vw-intro .eyebrow { justify-content: center; }
.vw-intro h2 {
margin: 12px 0 14px;
font-size: clamp(2rem, 3.6vw, 2.9rem);
text-wrap: balance;
}
.vw-intro .lead { text-wrap: pretty; }
/* Zolang de app nog niet in de winkels staat: de uitleg bij de testerknoppen */
.vw-testnoot {
max-width: 620px;
margin: 14px auto 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-muted);
text-wrap: pretty;
}
/* Woorden heel houden. In de prijsblokken: 'Omiki-tester' niet op het
streepje afbreken. De knop is een flexbox: de hele tekst moet in één eigen
span staan, anders worden 'Word' en 'Omiki-tester' losse blokken die niet
afbreken. In de rollentabel: lange woorden alleen op smalle telefoons
laten afbreken (zie max-width: 399px). */
.vw-heel { white-space: nowrap; }
.vw-intro .vw-stift { color: var(--text-primary); }
.vw-kaart-icoon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
}
.vw-kaart-icoon .ic { width: 19px; height: 19px; vertical-align: 0; }
.vw-verder {
margin-top: 28px;
text-align: center;
font-weight: 600;
}
.vw-verder a {
border-bottom: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
transition: border-color 0.2s ease;
}
.vw-verder a:hover { border-bottom-color: currentColor; }
/* ── 00:00 · de nacht: privacy ─────────────────────────────────── */
.vw-nacht {
--a: #F2D98B;
--t: rgba(242, 217, 139, 0.18);
--stift: rgba(242, 217, 139, 0.3);
/* Hoe hoog de schemering boven en de dageraad onder zijn */
--schemer: 110px;
padding: calc(var(--schemer) + 24px) 0 calc(var(--schemer) + 12px);
overflow: hidden;
/* Boven: de schemering, vanuit het licht van 'Zo werkt het'. Onder:
een nieuwe dageraad, waarin de prijzen beginnen. */
background: linear-gradient(180deg,
var(--surface) 0,
#F7E4C9 calc(var(--schemer) * 0.2),
#EDB897 calc(var(--schemer) * 0.4),
#B7818A calc(var(--schemer) * 0.6),
#5E4E73 calc(var(--schemer) * 0.8),
#263650 var(--schemer),
#1C2840 calc(var(--schemer) + 120px),
#131C2A calc(100% - var(--schemer) - 60px),
#2B2D4E calc(100% - var(--schemer) * 0.8),
#5E4E73 calc(100% - var(--schemer) * 0.62),
#B7818A calc(100% - var(--schemer) * 0.44),
#EDB897 calc(100% - var(--schemer) * 0.26),
#FBF0DF calc(100% - var(--schemer) * 0.1),
var(--surface) 100%);
color: #EEF1F7;
}
.vw-nacht h2,
.vw-nacht h3 { color: #F7F3EA; }
.vw-nacht p,
.vw-nacht .lead { color: #B8C3D6; }
.vw-nacht .vw-intro .vw-stift { color: #F7F3EA; }
.vw-nacht-sterren {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 248, 228, 0.9) 0 1px, transparent 1.6px),
radial-gradient(circle at 70% 60%, rgba(255, 248, 228, 0.65) 0 0.9px, transparent 1.5px),
radial-gradient(circle at 40% 80%, rgba(255, 248, 228, 0.5) 0 0.8px, transparent 1.4px),
radial-gradient(circle at 85% 15%, rgba(255, 248, 228, 0.85) 0 1.2px, transparent 1.8px);
background-size: 173px 157px, 241px 199px, 131px 113px, 311px 283px;
/* Alleen waar het echt nacht is, niet in de schemering en de dageraad */
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--schemer) * 0.7), #000 calc(var(--schemer) + 60px), #000 55%, transparent calc(100% - var(--schemer)));
mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--schemer) * 0.7), #000 calc(var(--schemer) + 60px), #000 55%, transparent calc(100% - var(--schemer)));
animation: vw-twinkel 7s ease-in-out infinite;
}
.vw-nacht-maan {
position: absolute;
/* Net onder de schemering; rechts op dezelfde plek als de maan van het podium */
top: calc(var(--schemer) + 24px);
right: 26vw;
width: 54px;
height: 54px;
border-radius: 50%;
box-shadow: inset -14px 4px 0 0 #F6EDD3, 0 0 60px rgba(246, 237, 211, 0.25);
transform: rotate(-18deg);
}
.vw-nacht .wrap { position: relative; }
/* De weg van een foto: op slot op je telefoon, onleesbaar bij ons,
weer open bij je kring */
.vw-kluis {
display: grid;
grid-template-columns: 1fr minmax(60px, 150px) 1fr minmax(60px, 150px) 1fr;
align-items: start;
max-width: 980px;
margin: 0 auto 40px;
}
.vw-kluis-stap {
text-align: center;
padding: 0 6px;
}
.vw-kluis-beeld {
position: relative;
display: grid;
place-items: center;
width: 104px;
height: 104px;
margin: 0 auto 18px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}
/* De foto vult het hele vak; het slotje ligt erop */
.vw-kluis-foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
object-position: 50% 65%;
}
.vw-kluis-slot {
position: absolute;
right: 12px;
bottom: 12px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #F2D98B;
color: #2A2A3A;
box-shadow: 0 0 0 3px #1C2840;
}
.vw-kluis-slot .ic { width: 15px; height: 15px; vertical-align: 0; stroke-width: 2.2; }
/* Wat wij op de server zien: alleen ruis */
.vw-kluis-ruis {
width: 74px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 0.72rem;
line-height: 1.5;
letter-spacing: 0.04em;
color: rgba(184, 195, 214, 0.75);
word-break: break-all;
text-align: left;
}
.vw-kluis-kring {
display: flex;
}
.vw-kluis-kring img {
width: 36px;
height: 36px;
margin-left: -10px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 2.5px #1C2840;
}
.vw-kluis-kring img:first-child { margin-left: 0; }
.vw-kluis-stap h3 {
font-size: 1.2rem;
margin-bottom: 6px;
}
.vw-kluis-stap p {
font-size: 0.95rem;
line-height: 1.5;
max-width: 17em;
margin: 0 auto;
}
/* De stippellijn met een pakketje dat op slot overkomt */
.vw-kluis-weg {
position: relative;
height: 104px;
}
.vw-kluis-weg::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 2px dashed rgba(242, 217, 139, 0.35);
}
.vw-kluis-weg span {
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 3px;
background: #F2D98B;
box-shadow: 0 0 12px rgba(242, 217, 139, 0.8);
animation: vw-pakketje 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.vw-kluis-weg + .vw-kluis-stap + .vw-kluis-weg span { animation-delay: 1.6s; }
@keyframes vw-pakketje {
0% { left: 0; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Wat verder op slot zit: vier korte regels in één paneel, op een breed
scherm naast elkaar */
/* Eén belofte onder de drie stappen, boven de link naar de privacypagina */
.vw-nacht-belofte {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: fit-content;
max-width: 100%;
margin: 0 auto;
padding: 10px 22px 10px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
font-size: 0.98rem;
font-weight: 500;
line-height: 1.4;
color: #E4E9F2;
text-wrap: balance;
}
.vw-nacht-belofte .vw-kaart-icoon {
width: 36px;
height: 36px;
background: rgba(242, 217, 139, 0.12);
color: #F2D98B;
}
.vw-nacht .vw-verder a { color: #F2D98B; }
/* ── 06:45 · de ochtend: zo werkt het ──────────────────────────── */
.vw-ochtend {
--a: #8F651F;
--t: #F7DDA0;
--stift: #F5D27E;
padding: 0 0 32px;
/* Begint precies in de kleur waarin het verhaal om 23:00 eindigt */
background: linear-gradient(180deg,
#263650 0px,
#2B2D4E 38px,
#5E4E73 85px,
#B7818A 136px,
#EDB897 184px,
#F9DDB6 228px,
#FBF0DF 272px,
var(--surface) 336px);
}
/* De zon komt op tussen het verhaal en de tekst */
.vw-dageraad {
position: relative;
height: 190px;
overflow: hidden;
pointer-events: none;
}
.vw-dageraad-zon {
position: absolute;
left: 50%;
bottom: -52px;
width: 210px;
height: 210px;
margin-left: -105px;
border-radius: 50%;
background: radial-gradient(circle, #FFF1CC 0 26%, rgba(255, 222, 160, 0.75) 38%, rgba(255, 200, 140, 0.25) 55%, transparent 70%);
}
.vw-dageraad-wolk {
position: absolute;
height: 18px;
border-radius: 18px;
background: rgba(255, 244, 232, 0.55);
}
.vw-dageraad-wolk::before,
.vw-dageraad-wolk::after {
content: '';
position: absolute;
bottom: 5px;
aspect-ratio: 1;
border-radius: 50%;
background: inherit;
}
.vw-dageraad-wolk::before { left: 18%; width: 30%; }
.vw-dageraad-wolk::after { left: 40%; width: 40%; }
.vw-dageraad-wolk:nth-child(2) { left: 16%; bottom: 78px; width: 120px; }
.vw-dageraad-wolk:nth-child(3) { right: 18%; bottom: 112px; width: 90px; opacity: 0.7; }
.vw-dageraad-wolk:nth-child(4) { left: 62%; bottom: 36px; width: 150px; opacity: 0.8; }
/* Waar dat kan, komt de zon echt op terwijl je naar beneden scrolt */
@supports (animation-timeline: view()) {
.vw-dageraad-zon {
animation: vw-opkomen linear both;
animation-timeline: view();
animation-range: entry 10% cover 60%;
}
@keyframes vw-opkomen {
from { transform: translateY(100px) scale(0.85); opacity: 0.3; }
to { transform: none; opacity: 1; }
}
}
.vw-stappen {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0;
}
.vw-stap {
position: relative;
display: flex;
flex-direction: column;
padding: 30px 28px 32px;
border-radius: var(--radius-xl);
background: var(--card);
box-shadow: var(--shadow-md);
}
.vw-stap-nr {
font-family: var(--font-display);
font-style: italic;
font-size: 2.6rem;
line-height: 1;
color: var(--accent-gold);
}
.vw-stap-beeld {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
min-height: 108px;
margin: 8px 0 16px;
}
.vw-stap h3 {
font-size: 1.35rem;
margin-bottom: 10px;
}
.vw-stap p {
font-size: 0.99rem;
line-height: 1.6;
color: var(--text-secondary);
}
/* Stap 2 verwijst naar de pagina met de rollen */
.vw-stap-link {
align-self: flex-start;
margin-top: 14px;
font-size: 0.95rem;
font-weight: 600;
color: var(--brand);
border-bottom: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
transition: border-color 0.2s ease, color 0.2s ease;
}
.vw-stap-link:hover {
color: var(--brand-deep);
border-bottom-color: currentColor;
}
/* Stap 1: de capsule van Sanne, en een tweede die bij Premium hoort */
.vw-capsules {
display: flex;
align-items: center;
gap: 18px;
}
.vw-capsule-rond {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
}
.vw-capsule-rond img {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px var(--brand-light), var(--shadow-md);
}
.vw-capsule-leeg {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px dashed #D8CFBF;
color: #B0A594;
font-size: 1.6rem;
font-weight: 300;
}
.vw-capsule-rond small {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-gold-deep);
}
/* Stap 2: de familie, met de kleur van ieders rol */
.vw-stapel {
display: flex;
}
.vw-stapel img {
width: 52px;
height: 52px;
margin-left: -12px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5.5px var(--ring, #D9E7D0);
}
.vw-stapel img:first-child { margin-left: 0; }
/* Stap 3: alles wat je kunt vastleggen */
.vw-soorten {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
list-style: none;
}
.vw-soorten li {
padding: 6px 12px;
border-radius: 999px;
background: var(--k, #F4EFE6);
font-size: 0.82rem;
font-weight: 600;
color: #4A4038;
}
/* Wie mag wat: dezelfde regels voor elke rol, zodat je kunt vergelijken */
.vw-rollen {
display: grid;
grid-template-columns: 0.8fr 1.6fr;
gap: 56px;
align-items: start;
padding: 48px;
border-radius: var(--radius-xl);
background: var(--card);
box-shadow: var(--shadow-md);
}
.vw-rollen-kop h3 {
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
margin: 12px 0 14px;
}
.vw-rollen-kop p {
color: var(--text-secondary);
line-height: 1.6;
}
.vw-rollen-kop p + p { margin-top: 12px; }
.vw-rollen-tabel {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
/* Vangnet: past de tabel echt niet, dan schuift alleen de tabel opzij en
niet de hele pagina */
.vw-rollen-schuif {
min-width: 0;
overflow-x: auto;
}
.vw-rollen-tabel th,
.vw-rollen-tabel td {
padding: 11px 6px;
border-bottom: 1px solid var(--border-light);
}
.vw-rollen-tabel tbody tr:last-child th,
.vw-rollen-tabel tbody tr:last-child td { border-bottom: 0; }
.vw-rollen-tabel tbody th {
text-align: left;
font-weight: 500;
color: var(--text-primary);
}
.vw-rollen-tabel thead th {
vertical-align: bottom;
padding-bottom: 14px;
border-bottom-color: var(--border);
}
.vw-rolchip {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
color: var(--text-primary);
hyphens: manual;
}
.vw-rolchip::before {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--k);
}
.vw-rollen-tabel td {
width: 13%;
text-align: center;
}
.vw-ja,
.vw-nee {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
}
.vw-ja {
background: var(--brand-soft);
color: var(--brand);
}
.vw-ja .ic { width: 14px; height: 14px; vertical-align: 0; stroke-width: 2.6; }
.vw-nee::before {
content: '';
width: 8px;
height: 1.5px;
border-radius: 1px;
background: #CFC8BA;
}
/* ── Prijzen ───────────────────────────────────────────────────── */
.vw-prijzen {
--a: #566250;
--t: #D9E7D0;
--stift: #C3DBB3;
background: var(--surface);
padding-top: 28px;
}
/* De schakelaar plakt onder de navigatiebalk zolang de abonnementen in
beeld zijn (.vw-kiezer omvat beide), zodat je al vergelijkend kunt
wisselen tussen per maand en per jaar. Alleen de knoppen vangen kliks,
de rest van de rij niet. */
.vw-schakelaar {
position: sticky;
top: 90px;
z-index: 5;
display: flex;
justify-content: center;
margin: -12px 0 28px;
pointer-events: none;
}
/* Plakt hij (het script zet dan 'is-plakt'), dan staat hij op een eigen
balk die aansluit op de navigatiebalk: de kaarten schuiven eronder en
verdwijnen netjes, in plaats van half achter de knoppen */
.vw-schakelaar::before {
content: '';
position: absolute;
z-index: -1;
top: -12px;
bottom: -10px;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: color-mix(in srgb, var(--surface) 90%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 8px 20px rgba(39, 35, 30, 0.05);
opacity: 0;
transition: opacity 0.2s ease;
}
.vw-schakelaar.is-plakt::before {
opacity: 1;
pointer-events: auto;
}
.vw-schakelaar-knoppen {
display: inline-flex;
gap: 4px;
padding: 5px;
border-radius: 999px;
background: var(--surface-alt);
box-shadow: inset 0 0 0 1px var(--border-light);
pointer-events: auto;
}
.vw-schakelaar button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 0;
border-radius: 999px;
background: transparent;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.vw-schakelaar button[aria-pressed="true"] {
background: var(--card);
color: var(--text-primary);
box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-light);
}
.vw-schakelaar small {
padding: 2px 8px;
border-radius: 999px;
background: var(--brand-light);
color: var(--brand-deep);
font-size: 0.72rem;
}
/* De twee abonnementen staan altijd naast elkaar, en hun rijen lopen
gelijk (subgrid): kop, uitleg, prijs, noot, vijf punten en de knop.
Zo lees je regel voor regel wat het verschil is. Krijgt een kaart meer
dan vijf punten, verhoog dan beide spans hieronder (10 en 5) mee. */
.vw-plannen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 440px));
justify-content: center;
column-gap: 24px;
}
.vw-plan {
position: relative;
display: grid;
grid-row: span 10;
grid-template-rows: subgrid;
row-gap: 0;
padding: 36px 34px 34px;
border-radius: var(--radius-xl);
background: var(--card);
box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light);
}
.vw-plan-premium {
background: linear-gradient(180deg, #FFF9EC 0%, #FFFFFF 45%);
box-shadow: var(--shadow-lg), inset 0 0 0 1.5px #E8CF97;
}
.vw-plan-label {
position: absolute;
top: -13px;
left: 34px;
padding: 5px 13px;
border-radius: 999px;
background: #8F651F;
color: #FFFFFF;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.vw-plan h3 { font-size: 1.7rem; }
.vw-plan-voor {
margin-top: 6px;
color: var(--text-secondary);
line-height: 1.5;
}
.vw-prijs {
display: flex;
align-items: baseline;
gap: 6px;
margin: 24px 0 4px;
}
.vw-prijs b {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 600;
line-height: 1;
font-variant-numeric: lining-nums;
}
.vw-prijs span { color: var(--text-secondary); }
.vw-prijs-noot {
min-height: 1.5em;
font-size: 0.88rem;
color: var(--text-muted);
}
.vw-plan ul {
list-style: none;
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
row-gap: 0;
margin: 26px 0 30px;
padding-top: 24px;
border-top: 1px solid var(--border-light);
}
.vw-plan li {
display: flex;
gap: 11px;
line-height: 1.45;
}
.vw-plan li + li { margin-top: 11px; }
.vw-plan li .ic {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--brand);
stroke-width: 2.4;
vertical-align: 0;
}
.vw-binnenkort {
display: inline-block;
margin-left: 4px;
padding: 1px 8px;
border-radius: 999px;
background: #F3E6C8;
color: #7A5617;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
vertical-align: 0.1em;
white-space: nowrap;
}
.vw-plan .btn { margin-top: auto; }
.vw-prijs-voetjes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 904px;
margin: 28px auto 0;
}
.vw-prijs-voetjes p {
display: flex;
gap: 12px;
font-size: 0.93rem;
line-height: 1.55;
color: var(--text-secondary);
}
.vw-prijs-voetjes .ic {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
color: var(--accent-gold-deep);
vertical-align: 0;
}
.vw-prijs-voetjes b { color: var(--text-primary); }
/* ── Over Omiki ────────────────────────────────────────────────── */
.vw-over {
--a: #A4502F;
--t: #F6C9B4;
background: linear-gradient(180deg, var(--surface) 0%, #FBF3EC 100%);
}
.vw-over-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 56px;
align-items: center;
}
.vw-polaroid {
position: relative;
max-width: 420px;
margin: 0 auto;
padding: 14px 14px 60px;
border-radius: 6px;
background: #FFFFFF;
box-shadow: var(--shadow-float);
rotate: -2.5deg;
}
.vw-polaroid img {
display: block;
width: 100%;
aspect-ratio: 4 / 4.4;
object-fit: cover;
border-radius: 3px;
}
.vw-polaroid figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 18px;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: var(--text-secondary);
}
/* Een stukje plakband, zoals op de koelkastdeur */
.vw-polaroid::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
width: 110px;
height: 30px;
margin-left: -55px;
background: rgba(233, 214, 180, 0.75);
rotate: 3deg;
}
.vw-over-intro { max-width: 860px; }
.vw-citaat-groot {
margin: 14px 0 26px;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.45rem);
font-weight: 600;
line-height: 1.22;
color: var(--text-primary);
text-wrap: balance;
}
.vw-over-intro .vw-citaat-groot { margin: 14px auto 0; }
.vw-over-tekst p {
color: var(--text-secondary);
line-height: 1.7;
}
.vw-over-tekst p + p { margin-top: 14px; }
.vw-handtekening {
margin-top: 26px !important;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.vw-handtekening b {
display: block;
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--text-primary);
}
.vw-handtekening span { font-size: 0.9rem; }
/* ── Vragen ────────────────────────────────────────────────────── */
.vw-vragen {
--a: #2F6A8A;
--t: #C3DDEB;
background: #FBF3EC;
}
.vw-faq {
max-width: 800px;
margin: 0 auto;
border-top: 1px solid var(--border);
}
.vw-faq details { border-bottom: 1px solid var(--border); }
.vw-faq summary {
position: relative;
padding: 20px 52px 20px 0;
list-style: none;
cursor: pointer;
font-family: var(--font-display);
font-size: 1.22rem;
font-weight: 600;
line-height: 1.35;
color: var(--text-primary);
}
.vw-faq summary::-webkit-details-marker { display: none; }
.vw-faq summary::after {
content: '';
position: absolute;
right: 6px;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
border-radius: 50%;
background:
linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat,
var(--card);
box-shadow: inset 0 0 0 1px var(--border);
color: var(--text-secondary);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-faq details[open] summary::after { transform: rotate(45deg); }
.vw-faq summary:hover { color: var(--brand-deep); }
.vw-faq details > p {
padding: 0 52px 22px 0;
line-height: 1.7;
color: var(--text-secondary);
}
.vw-faq details > p a {
color: var(--brand);
font-weight: 600;
border-bottom: 1px solid currentColor;
}
.vw-contact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
max-width: 800px;
margin: 32px auto 0;
padding: 28px 32px;
border-radius: var(--radius-lg);
background: var(--card);
box-shadow: var(--shadow-md);
scroll-margin-top: 120px;
}
.vw-contact h3 {
font-size: 1.3rem;
margin-bottom: 4px;
}
.vw-contact p {
color: var(--text-secondary);
line-height: 1.5;
}
.vw-contact p a {
color: var(--brand);
font-weight: 600;
}
.vw-contact .btn { flex-shrink: 0; }
/* ── Slot: download ────────────────────────────────────────────── */
.vw-slot {
--a: #566250;
--t: #D9E7D0;
overflow: hidden;
padding: 64px 0 72px;
background: linear-gradient(180deg, #FBF3EC 0%, #F6ECDD 55%, #F1E6D2 100%);
text-align: center;
}
.vw-slot-kring {
--u: 4.4px;
position: relative;
width: calc(74 * var(--u));
height: calc(74 * var(--u));
margin: 0 auto 36px;
}
.vw-slot-kring .vw-kring {
position: absolute;
inset: 0;
}
.vw-slot-icoon {
position: absolute;
left: 50%;
top: 50%;
width: 34%;
translate: -50% -50%;
border-radius: 24%;
box-shadow: var(--shadow-float);
}
.vw-slot h2 {
max-width: 760px;
margin: 0 auto 18px;
font-size: clamp(2.1rem, 4vw, 3.1rem);
text-wrap: balance;
}
.vw-slot .lead {
max-width: 620px;
margin: 0 auto;
}
.vw-winkels {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 26px;
}
.vw-winkel {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 11px 22px 11px 18px;
border-radius: 14px;
background: #1D1B19;
color: #FFFFFF;
text-align: left;
box-shadow: 0 8px 22px rgba(30, 25, 20, 0.22);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.vw-winkel:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(30, 25, 20, 0.28);
}
.vw-winkel svg {
width: 26px;
height: 26px;
fill: currentColor;
flex-shrink: 0;
}
.vw-winkel span {
display: flex;
flex-direction: column;
font-size: 1.12rem;
font-weight: 600;
line-height: 1.1;
}
.vw-winkel small {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.02em;
opacity: 0.8;
}
.vw-slot-noot {
margin-top: 18px;
font-size: 0.9rem;
color: var(--text-muted);
}
.vw-qr {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 34px;
padding: 12px 22px 12px 12px;
border-radius: 20px;
background: var(--card);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-light);
text-align: left;
font-size: 0.92rem;
line-height: 1.45;
color: var(--text-secondary);
}
.vw-qr img {
width: 84px;
height: 84px;
}
.vw-qr b { color: var(--text-primary); }
/* De navigatiebalk overdag: vanaf de zonsopgang na het verhaal krijgt hij
zijn gewone kleuren terug, wat de lucht van het verhaal ook deed
(voor-wie.js zet de klasse) */
.vw-kop-dag .site-header {
--vw-lucht-boven: #FBF9F5;
--vw-inkt: #27231E;
--vw-inkt-zacht: #655E55;
--vw-merk: #566250;
}
/* ── Smallere schermen: telefoon boven, tekst eronder ─────────── */
@media (max-width: 1080px) {
.vw-rollen { grid-template-columns: 1fr; gap: 28px; }
/* Bij de bank staat de telefoon hier dicht bij de rand; de daglijn
schuift wat op en wordt smaller, zodat hij er niet tegenaan komt */
.js .vw-dok { right: 8px; }
.vw-dok-rail { width: 26px; }
}
@media (max-width: 900px) {
.vw-pagina { --vw-podium: 46svh; }
/* Tijdens het verhaal stapt de navigatiebalk opzij (voor-wie.js zet dan
'vw-kop-weg'), zodat het podium en de tekst samen het hele scherm
hebben. Na het verhaal, of als je erin tabt, komt hij terug. */
.vw-kop-weg .site-header {
transform: translateY(-100%);
box-shadow: none;
}
.vw-kop-weg .site-header:focus-within { transform: none; }
/* Het podium staat hier niet áchter de tekst maar erboven: het plakt
bovenaan en de hoofdstukken schuiven eronder door. Omdat de
navigatiebalk opzij is gestapt, hoeft het toneel geen ruimte voor
hem vrij te houden. */
.vw-podium {
--vw-kop: 0px;
--vw-rand: 40px;
height: 46vh;
height: var(--vw-podium);
z-index: 3;
/* De lucht en het toneel knippen zelf af, zodat de overgang
hieronder over de rand heen kan vallen */
overflow: visible;
}
.vw-lucht,
.vw-toneel { overflow: clip; }
/* Geen vouw tussen podium en tekst. Boven de rand loopt het podium uit
in precies de kleur waar de tekst op staat, zodat de lucht, de gloed
van de zon en het decor dat tot de rand komt (de heuvels, de bank)
erin oplossen. Onder de rand vervaagt de tekst die eronder
doorschuift, in plaats van hard afgeknipt te worden. */
.vw-podium::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: calc(-1 * var(--vw-rand));
height: calc(16% + var(--vw-rand));
z-index: 1;
background: linear-gradient(180deg,
transparent,
var(--vw-lucht-onder) calc(100% - var(--vw-rand)),
color-mix(in srgb, var(--vw-lucht-onder) 84%, transparent) calc(100% - 0.75 * var(--vw-rand)),
color-mix(in srgb, var(--vw-lucht-onder) 50%, transparent) calc(100% - 0.5 * var(--vw-rand)),
color-mix(in srgb, var(--vw-lucht-onder) 16%, transparent) calc(100% - 0.25 * var(--vw-rand)),
transparent);
pointer-events: none;
}
.vw-toneel {
left: 0;
width: 100%;
}
.vw-anker {
top: 50%;
--u: min(0.93cqh, 1.08cqw);
}
/* De telefoon neemt hier het grootste deel van het podium in */
.vw-telefoon { --th: calc(88 * var(--u)); }
.vw-hoofdstukken { margin-top: 0; padding-bottom: 0; }
/* Geen lege schermhoogtes tussen de momenten: elk hoofdstuk is zo hoog
als zijn tekst, met een ondergrens zodat korte momenten niet
voorbij flitsen */
.vw-hoofdstuk,
.vw-hoofdstuk.vw-begin {
min-height: calc((100vh - var(--vw-podium)) * 0.6);
}
.vw-tekst {
width: 100%;
margin: 0;
padding: 18px 22px 22px;
}
.vw-tekst h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); margin-bottom: 16px; }
.vw-tekst h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); margin: 12px 0 12px; }
.vw-tekst > p { font-size: 1rem; line-height: 1.58; }
.vw-tekst .lead { font-size: 1.05rem; }
.vw-scrollhint { margin-top: 22px; }
.vw-tot-morgen { margin-top: 16px; font-size: 1.3rem !important; }
.vw-jaar { min-height: 150vh; }
.vw-jaar .vw-tekst { top: var(--vw-podium); }
.vw-maan { top: calc(var(--vw-kop) + 2vh); right: 5vw; width: 9vmin; height: 9vmin; }
.vw-wolk { height: 7vw; width: 24vw; }
/* De daglijn staat rechts naast de telefoon, midden in het podium, en
is wat kleiner */
.js .vw-dok {
--dok-stap: 22px;
--dok-rand: 8px;
right: 8px;
top: calc(var(--vw-podium) / 2);
}
.vw-dok-rail { width: 24px; }
.vw-dok-stippen button { width: 7px; height: 7px; }
.vw-dok-stippen button::before { inset: -7px -8px; }
.vw-dok-stippen button[aria-current="step"] { width: 15px; height: 15px; }
.vw-dok-zon { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
/* Na het verhaal: alles onder elkaar, met minder lucht ertussen */
.vw-sectie { padding: 44px 0; }
.vw-nacht { --schemer: 84px; }
.vw-nacht-maan { top: calc(var(--schemer) + 18px); right: 5vw; width: 40px; height: 40px; box-shadow: inset -10px 3px 0 0 #F6EDD3, 0 0 40px rgba(246, 237, 211, 0.25); }
.vw-intro { margin-bottom: 24px; }
.vw-verder { margin-top: 24px; }
/* Zo reist een foto: drie regels onder elkaar, met het beeldje links en
de stippellijn ertussen */
.vw-kluis {
grid-template-columns: 1fr;
max-width: 420px;
margin-bottom: 28px;
}
.vw-kluis-stap {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 16px;
align-items: center;
padding: 0;
text-align: left;
}
.vw-kluis-beeld {
grid-row: span 2;
width: 72px;
height: 72px;
margin: 0;
border-radius: 22px;
}
.vw-kluis-slot { right: 5px; bottom: 5px; width: 24px; height: 24px; box-shadow: 0 0 0 2.5px #1C2840; }
.vw-kluis-slot .ic { width: 12px; height: 12px; }
.vw-kluis-ruis { width: 52px; font-size: 0.56rem; line-height: 1.45; }
.vw-kluis-kring img { width: 26px; height: 26px; margin-left: -8px; box-shadow: 0 0 0 2px #1C2840; }
.vw-kluis-kring img:first-child { margin-left: 0; }
.vw-kluis-stap h3 { align-self: end; margin-bottom: 2px; font-size: 1.08rem; }
.vw-kluis-stap p { align-self: start; max-width: none; margin: 0; font-size: 0.92rem; }
.vw-kluis-weg { width: 72px; height: 26px; }
.vw-kluis-weg::before {
left: 50%;
right: auto;
top: 0;
bottom: 0;
border-top: 0;
border-left: 2px dashed rgba(242, 217, 139, 0.35);
}
.vw-kluis-weg span {
left: 50%;
top: 0;
margin: -6px 0 0 -5px;
animation-name: vw-pakketje-omlaag;
}
.vw-dageraad { height: 120px; }
.vw-dageraad-zon { width: 140px; height: 140px; margin-left: -70px; bottom: -38px; }
.vw-dageraad-wolk:nth-child(2) { bottom: 50px; }
.vw-dageraad-wolk:nth-child(3) { bottom: 76px; }
.vw-dageraad-wolk:nth-child(4) { bottom: 22px; }
.vw-ochtend {
padding-bottom: 24px;
scroll-margin-top: -60px;
background: linear-gradient(180deg,
#263650 0px,
#2B2D4E 24px,
#5E4E73 55px,
#B7818A 88px,
#EDB897 120px,
#F9DDB6 151px,
#FBF0DF 180px,
var(--surface) 227px);
}
.vw-stappen {
grid-template-columns: 1fr;
gap: 12px;
}
/* Het beeld bovenaan, het nummer naast de titel in plaats van op een
eigen regel erboven */
.vw-stap {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"beeld beeld"
"nr kop"
"tekst tekst"
"link link";
column-gap: 10px;
align-items: baseline;
padding: 20px 20px 22px;
}
.vw-stap-nr { grid-area: nr; font-size: 1.9rem; }
.vw-stap-beeld { grid-area: beeld; min-height: 76px; margin: 0 0 12px; }
.vw-stap h3 { grid-area: kop; margin-bottom: 6px; }
.vw-stap p { grid-area: tekst; }
.vw-stap-link { grid-area: link; justify-self: start; }
.vw-rollen { padding: 28px 10px 20px; border-radius: var(--radius-lg); }
.vw-rollen-kop { padding: 0 12px; }
.vw-rollen-tabel { font-size: 0.84rem; }
.vw-rollen-tabel th,
.vw-rollen-tabel td { padding: 10px 3px; }
.vw-rollen .vw-rollen-tabel th,
.vw-rollen .vw-rollen-tabel td { padding: 10px 2px; }
.vw-rolchip { font-size: 0.68rem; }
.vw-prijzen { padding-top: 20px; }
.vw-schakelaar { margin-top: -6px; margin-bottom: 22px; }
.vw-plannen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.vw-plan { padding: 28px 22px 24px; }
.vw-prijs { flex-wrap: wrap; row-gap: 2px; }
.vw-plan ul { margin: 20px 0 24px; padding-top: 20px; }
.vw-plan li + li { margin-top: 9px; }
.vw-prijs-voetjes { grid-template-columns: 1fr; gap: 12px; max-width: 480px; margin-top: 22px; }
.vw-over-grid { grid-template-columns: 1fr; gap: 26px; }
.vw-polaroid { max-width: 280px; padding: 12px 12px 50px; }
.vw-polaroid figcaption { bottom: 14px; font-size: 0.98rem; }
.vw-faq summary { font-size: 1.08rem; padding: 17px 46px 17px 0; }
.vw-faq details > p { padding-right: 0; }
.vw-contact {
flex-direction: column;
align-items: flex-start;
margin-top: 24px;
padding: 24px 22px;
}
.vw-slot { padding: 44px 0 52px; }
.vw-slot-kring { --u: 3.6px; margin-bottom: 28px; }
}
@keyframes vw-pakketje-omlaag {
0% { top: 0; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* Op een telefoon blijven de twee abonnementen naast elkaar staan, dus
is alles in de kaarten een maat kleiner en staat de periode onder het
bedrag. De schakelaar is iets compacter, zodat hij ook op 360 px past. */
@media (max-width: 680px) {
.vw-schakelaar { top: 86px; margin-bottom: 20px; }
.vw-schakelaar::before { top: -10px; bottom: -8px; }
.vw-schakelaar button { gap: 6px; padding: 9px 14px; font-size: 0.9rem; }
.vw-schakelaar small { padding: 2px 7px; font-size: 0.68rem; }
.vw-plannen { column-gap: 10px; }
.vw-plan { padding: 24px 12px 14px; border-radius: var(--radius-lg); }
.vw-plan-label { top: -10px; left: 12px; padding: 3px 8px; font-size: 0.6rem; letter-spacing: 0.05em; }
.vw-plan h3 { font-size: 1.2rem; line-height: 1.2; }
.vw-plan-voor { margin-top: 4px; font-size: 0.8rem; line-height: 1.4; }
.vw-prijs { flex-direction: column; align-items: flex-start; gap: 3px; margin: 16px 0 4px; }
.vw-prijs b { font-size: 1.95rem; }
.vw-prijs span { font-size: 0.82rem; line-height: 1.2; }
.vw-prijs-noot { font-size: 0.72rem; line-height: 1.35; }
.vw-plan ul { margin: 14px 0 16px; padding-top: 14px; }
.vw-plan li { gap: 6px; font-size: 0.8rem; line-height: 1.4; }
.vw-plan li + li { margin-top: 8px; }
.vw-plan li .ic { width: 14px; height: 14px; margin-top: 2px; }
.vw-plan .vw-binnenkort { margin-left: 2px; padding: 1px 6px; font-size: 0.6rem; }
.vw-plan .btn {
padding: 10px 8px;
font-size: 0.82rem;
line-height: 1.25;
white-space: normal;
text-align: center;
text-wrap: balance;
}
}
/* Telefoons tot 400 pixels breed: hier past de rollentabel alleen als de
lange woorden mogen afbreken op hun */
@media (max-width: 399px) {
.vw-rollen .vw-heel { white-space: normal; }
}
/* Heel smalle telefoons (320 pixels, zoals de eerste iPhone SE): de
rollenkaart gaat tot dicht bij de rand en de tabel krijgt net iets
kleinere letters, zodat alle vier de rollen naast elkaar passen */
@media (max-width: 359px) {
.vw-rollen { margin-inline: -12px; }
.vw-rollen .vw-rollen-tabel tbody th { font-size: 0.78rem; }
.vw-rollen .vw-rolchip { font-size: 0.62rem; }
}
@media (max-width: 560px) {
.vw-winkel { flex: 1 1 200px; justify-content: center; }
}
/* ── Minder beweging ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.vw-pagina { --beweeg: 0; }
.vw-wolk,
.vw-vallende-ster,
.vw-hartjes .ic,
.vw-stoom path,
.vw-kluis-weg span { display: none; }
.vw-nacht-sterren,
.vw-dageraad-zon { animation: none; }
.js .vw-hoofdstuk .vw-stift,
.js .reveal .vw-stift {
background-size: 100% var(--stift-dik);
transition: none;
}
}