/* ================================================================== ervaringen.css - de ervaringen-hub (/ervaringen/) en het sjabloon voor een losse ervaring. Gebaseerd op de Claude Design-export "Reviewpagina" (gecentreerd) en het Erika v2 design-system (tokens-erika.css). Bovenop home.css (kop, voet, .btn, .blob, drift-keyframes). Alleen op de ervaringen-pagina's ingeladen. Heette tot 2026-08-14 verhalen.css, bij de hub /verhalen/. De klassen houden hun vh-/vh2-voorvoegsel: dat is opmaak en heeft geen betekenis naar buiten. Het ontwerp was desktop-only (inline stijlen, vaste kolommen); hier class-based en responsive gemaakt. ================================================================== */ /* ---------- eigen keyframes uit het ontwerp ---------- */ @keyframes review-morph{ 0%,100%{border-radius:60% 40% 52% 48% / 48% 56% 44% 52%} 50%{border-radius:46% 54% 40% 60% / 58% 44% 56% 42%} } @keyframes review-breathe{ 0%,100%{transform:scale(1) translate(0,0);opacity:.55} 50%{transform:scale(1.05) translate(-12px,8px);opacity:.72} } @keyframes review-panel-morph{ 0%,100%{border-radius:130px 96px 150px 104px / 96px 140px 88px 128px} 50%{border-radius:104px 148px 98px 142px / 132px 92px 136px 94px} } @keyframes review-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } /* ---------- gedeeld ---------- */ .vh-wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);position:relative;z-index:2} @media(max-width:720px){.vh-wrap{padding:0 var(--wrap-pad-mobile)}} a.vh-back{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-body);font-size:var(--text-ui);font-weight:400; color:var(--ink-mist);letter-spacing:.01em; transition:color .4s var(--ease-soft), transform .35s var(--ease-soft); } .vh-back:hover{color:var(--aubergine);transform:translateX(-4px)} .vh-hero{ position:relative;overflow:hidden;padding:40px 0 180px; background: radial-gradient(980px 700px at 76% -10%, rgba(232,220,239,.48), transparent 60%), radial-gradient(860px 620px at -8% 78%, rgba(184,196,173,.28), transparent 58%), var(--cream); } /* golfrand naar paper onderaan */ .vh-hero .vh-wave{ position:absolute;bottom:-1px;left:0;right:0;height:140px;z-index:3;background:var(--paper); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,140%20L1440,140%20L1440,58%20C1260,118%201116,30%20928,66%20C740,102%20600,130%20420,94%20C264,62%20130,32%200,74%20Z'%20fill='black'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,140%20L1440,140%20L1440,58%20C1260,118%201116,30%20928,66%20C740,102%20600,130%20420,94%20C264,62%20130,32%200,74%20Z'%20fill='black'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat; } /* ---------- los verhaal: het gecentreerde citaatpaneel ---------- */ .vh-quote-hold{position:relative;max-width:900px;margin:78px auto 0;text-align:center} .vh-quote-glow{ position:absolute;left:46%;top:76px;width:760px;height:440px;transform:translateX(-50%); background:radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)); animation:review-morph 24s ease-in-out infinite, review-breathe 18s ease-in-out infinite;z-index:0; } .vh-panel{ position:relative;z-index:1;padding:72px 92px 78px;background:#fff; border-radius:130px 96px 150px 104px / 96px 140px 88px 128px; animation:review-panel-morph 26s ease-in-out infinite; } /* Dit is de h1 van de pagina, in de vorm van het bovenschrift boven het citaat. `margin-top:0` en `font-weight:400` staan er omdat een h1 anders de standaardmarge en het vet van de browser meeneemt; de rest van de opmaak is ongewijzigd ten opzichte van de die hier tot 2026-08-24 stond. De naam maakt de regel lang, dus een maximale breedte en `balance` zodat hij over twee regels ongeveer even breed afbreekt in plaats van met een los woord op de tweede regel. */ .vh-panel .vh-eyebrow{ display:block;text-align:center;margin:0 auto 22px;max-width:30em; font-family:var(--font-body);font-weight:400;font-size:11.5px; line-height:1.7;letter-spacing:.32em;text-transform:uppercase;color:var(--teal); text-wrap:balance; } .vh-panel blockquote{margin:0;padding:0;border:0} .vh-quote-mark{ display:block;font-family:var(--font-display);font-style:italic;font-weight:400; font-size:120px;line-height:.5;color:var(--aubergine);opacity:.18;margin:40px 0 22px;pointer-events:none; } .vh-citaat{ margin:0 auto;max-width:800px; font-family:var(--font-display);font-style:italic;font-weight:400; font-size:var(--text-quote-xl);line-height:var(--leading-quote);letter-spacing:-.004em; color:var(--aubergine);text-wrap:pretty; } /* let op: dit is een