/* ═══════════════════════════════════════════════════════════════════ NOMAD START — tien varianten van het startscherm, tweede ronde Gebruikt door /start01 t/m /start10. De standaard blijft /start en raakt dit bestand niet aan. WAT ER IN DE TWEEDE RONDE ANDERS IS De eerste ronde was negen keer hetzelfde formulier met ander behang. Nu heeft elke variant een eigen veldstijl, een eigen binnenkomst en één detail dat alleen bij dat idee hoort: het beeld dat langzaam inzoomt (01), de speler met echte voortgangsbalk (02), de vraag die wegschuift voor de volgende (03), regels die zichzelf typen (04), een getal dat optelt (05), de zeven leden die voorbijkomen (06), berichten die binnenkomen zoals in een chat (07), de duur als reusachtig cijfer (08), de coach met zijn eigen zin (09), en echte seizoensdata (10). ÉÉN BESTAND, TIEN SCOPES Elke variant hangt aan een klasse op (v01 … v10). Wat elke variant erft staat in nomad-vsl-1.css: tokens, .btn, .inp, .fout, .consent. Hier staat de omlijsting en de veldstijl per variant. VIER VELDSTIJLEN .zweef het label staat ín het veld en klimt omhoog bij focus of inhoud. Scheelt een regel per veld; drie regels per scherm. .lijn alleen een onderlijn, die blauw uitloopt bij focus. .prompt mono, donker, als een terminal. .bel ronde velden, als een chat-invoerbalk. GEEN .gate-page OP DEZE PAGINA'S Aan die klasse hangt de donkere mobiele laag van de standaardgate; een witte variant zou daar tegenaan vechten. BINNENKOMST Alles met .op komt in zes tienden van een seconde omhoog en op kleur, met --i als volgnummer voor de vertraging. Wie "beweging beperken" aan heeft krijgt alles meteen, en ook de eigen animaties per variant staan dan uit. De pagina is na 0,9 s in rust; niets wacht op scrollen. CACHE: geladen als nomad-start-1.css?v=N; verhoog N bij elke wijziging. Huidige versie: ?v=11. ═══════════════════════════════════════════════════════════════════ */ /* ── romp ─────────────────────────────────────────────────────────── */ .sv{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);-webkit-tap-highlight-color:transparent} .sv-blad{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden} @media (min-width:761px){.sv-blad{max-width:27rem;margin-inline:auto;box-shadow:0 0 90px rgba(6,7,13,.22)}} .sv-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.15rem;flex:none;position:relative;z-index:2} .sv-merk{font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink);line-height:1} .sv-merk i{color:var(--blue);font-style:normal} .sv-nav span{font-size:.8rem;color:var(--stil)} .sv-pil{display:inline-flex;align-items:center;gap:.4em;font:600 .74rem var(--body);font-variant-numeric:tabular-nums; border:1px solid var(--line);border-radius:999px;padding:.32em .75em;color:var(--muted)} .sv-pil i{width:0;height:0;border-left:.5em solid currentColor;border-top:.3em solid transparent;border-bottom:.3em solid transparent} .sv-vak{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 1.15rem 1.1rem;position:relative;z-index:2} .sv h1{font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0} .sv .velden{display:grid;gap:.55rem} .sv .field{margin-top:0} .sv .btn{margin-top:.2rem} .sv .consent{margin-top:.55rem;text-align:center} .sv .fout{margin-top:0} .sv-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* binnenkomst */ @keyframes sv-op{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* De binnenkomst duurde 0,6 s per element met 70 ms per volgnummer, dus de knop (--i:6) was pas na ruim een seconde compleet -- op een pagina waar advertentieverkeer binnen de eerste seconde beslist of het blijft. Gemeten op een trage 4G stond er na één seconde letterlijk niets: geen kop, geen veld, geen knop. Nu: 0,34 s per element, 22 ms per volgnummer. De knop staat er na ~0,47 s, en de beweging is nog steeds te zien -- alleen niet meer ten koste van het moment waarop iemand beslist. */ .sv .op{animation:sv-op .34s var(--ease) both;animation-delay:calc(var(--i,0) * 22ms)} /* ── veldstijl: zwevend label ──────────────────────────────────────── */ .zweef .zw{position:relative;display:block} .zweef .inp{padding:1.3rem 1rem .5rem;line-height:1.25} .zweef .zw label{position:absolute;left:1rem;top:50%;transform:translateY(-50%);pointer-events:none; font:500 .95rem var(--body);color:var(--stil);transition:top .18s var(--ease),transform .18s var(--ease),font-size .18s var(--ease),color .18s var(--ease)} .zweef .inp:focus~label,.zweef .inp:not(:placeholder-shown)~label{top:.5rem;transform:none;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)} .zweef .tel{grid-template-columns:5rem 1fr} .zweef .tel select{padding:1.3rem .6rem .5rem .9rem;line-height:1.25} /* het select heeft geen zwevend label nodig: "+31" zegt het zelf */ /* ── veldstijl: onderlijn ─────────────────────────────────────────── */ .lijn .field{position:relative;gap:.15rem} .lijn .field label{font:400 .74rem var(--body);color:var(--stil)} .lijn .inp{border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:.5rem 0;background:none;font-size:1.02rem} .lijn .inp:focus{box-shadow:none} .lijn .field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue); transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)} .lijn .field:focus-within::after{transform:scaleX(1)} .lijn .tel{grid-template-columns:3.6rem 1fr;gap:.9rem} .lijn .tel select{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background-color:transparent;padding-left:0;background-position:right .1rem center} /* ── veldstijl: prompt ────────────────────────────────────────────── */ .prompt .field{gap:.3rem} .prompt .field label{font:500 .64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7A8191} .prompt .inp{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff;border-radius:8px;font-family:var(--mono);font-size:.92rem} .prompt .inp::placeholder{color:#4C5568} .prompt .inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.22)} .prompt .tel select{background-color:rgba(255,255,255,.1);color:#fff} /* ── veldstijl: chat ──────────────────────────────────────────────── */ .bel-veld .inp{border-radius:999px;padding:.78em 1.1em} .bel-veld .zweef .inp{padding:1.25rem 1.1rem .5rem} .bel-veld .zweef .zw label{left:1.1rem} .bel-veld .tel select{border-radius:999px} /* ══ v01 · stilstaand beeld ═══════════════════════════════════════ */ .v01{background:var(--dark)} .v01 .sv-blad{background:var(--dark);color:#EEF1F8} /* Niet een stilstaand beeld uit de video maar een foto waarop hij het aan iemand zit uit te leggen: de twee onscherpe koppen op de voorgrond doen het werk. Dat is wat de training is -- iemand die het je vertelt. */ /* Niet `cover` maar op volle breedte vanaf de bovenrand. Met cover vult de foto de hoogte van het scherm, en dan staat zijn gezicht onvermijdelijk op de helft -- precies waar de kop staat, want het formulier eronder neemt bijna vier vijfde van de hoogte in. Zo staat hij compleet in de bovenste vijfde, valt de kop op zijn zwarte shirt, en loopt de foto onderin over in het donker van de pagina. Volle breedte betekent ook dat er links en rechts niets afgaat: de skyline, de fontein en het water blijven staan. */ .v01 .foto{position:absolute;inset:0;z-index:0;background:url(/img/start-park-hoog.webp) 50% 0/100% auto no-repeat; transform-origin:50% 0;animation:sv-zoom 26s ease-out forwards} @keyframes sv-zoom{from{transform:scale(1)}to{transform:scale(1.04)}} /* Boven blijft het bijna open: daar staat hij. Vanaf ongeveer een derde loopt het dicht, zodat de kop op een rustige ondergrond staat, en op drie vijfde is het zwart -- precies waar de foto ophoudt, dus je ziet geen naad. */ .v01 .waas{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,7,13,.30) 0%,rgba(6,7,13,.05) 13%,rgba(6,7,13,.28) 21%,rgba(6,7,13,.62) 31%,rgba(6,7,13,.84) 43%,rgba(6,7,13,.94) 53%,#06070D 64%)} .v01 .sv-merk{color:#fff} .v01 .sv-pil{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(6,7,13,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .v01 .sv-vak{justify-content:flex-end;gap:.75rem} .v01 h1{font-size:clamp(1.9rem,7.6vw,2.2rem);color:#fff;text-shadow:0 1px 2px rgba(6,7,13,.5),0 6px 26px rgba(6,7,13,.6)} .v01 h1 em{font-style:normal;color:#5B84F0} .v01 .bijna{margin:0;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.8);max-width:34ch;text-shadow:0 1px 12px rgba(6,7,13,.7)} .v01 .inp{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .v01 .inp:focus{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(255,255,255,.12)} .v01 .zweef .zw label{color:rgba(255,255,255,.62)} .v01 .zweef .inp:focus~label,.v01 .zweef .inp:not(:placeholder-shown)~label{color:#8FB0FF} .v01 .tel select{background-color:rgba(255,255,255,.16);color:#fff} .v01 .consent{color:rgba(255,255,255,.42)} .v01 .consent a{color:rgba(255,255,255,.65)} /* ══ v02 · de speler ══════════════════════════════════════════════ */ .v02 .sv-vak{gap:.7rem} .v02 .speler{flex:1 1 9rem;min-height:6rem;max-height:34vh;max-height:34dvh;position:relative;border-radius:16px;overflow:hidden; background:url(/img/start-park-breed.webp) 50% 34%/cover;box-shadow:0 18px 44px rgba(6,7,13,.22)} .v02 .speler::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,7,13,.7))} /* linksonder in plaats van in het midden: in het midden stond hij over zijn gezicht, en juist dat gezicht is de reden dat deze foto er staat */ .v02 .play{position:absolute;left:.9rem;bottom:2.4rem;width:3.4rem;height:3.4rem;border-radius:50%;background:rgba(255,255,255,.96); display:grid;place-items:center;box-shadow:0 10px 30px rgba(6,7,13,.35)} .v02 .play::after{content:"";border-left:.95rem solid var(--dark);border-top:.58rem solid transparent;border-bottom:.58rem solid transparent;margin-left:.28rem} .v02 .play::before{content:"";position:absolute;inset:-.5rem;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:sv-puls 2.4s var(--ease) infinite} @keyframes sv-puls{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}} .v02 .balk{position:absolute;left:.9rem;right:.9rem;bottom:.75rem;display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center; font:600 .68rem var(--body);font-variant-numeric:tabular-nums;color:#fff} .v02 .balk .spoor{height:3px;border-radius:2px;background:rgba(255,255,255,.28);position:relative} .v02 .balk .spoor::after{content:"";position:absolute;left:0;top:50%;width:.7rem;height:.7rem;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.25)} .v02 h1{font-size:clamp(1.25rem,5.1vw,1.45rem);line-height:1.06} .v02 .bijna{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted);max-width:36ch} .v02 .btn .play-ic{width:0;height:0;border-left:.55em solid #fff;border-top:.34em solid transparent;border-bottom:.34em solid transparent} /* ══ v03 · één vraag tegelijk ═════════════════════════════════════ */ .v03 .voortgang{height:3px;background:var(--line);flex:none;margin:0 -1.15rem} .v03 .voortgang i{display:block;height:100%;background:var(--blue);transition:width .45s var(--ease)} .v03 .sv-vak{justify-content:center;gap:1rem;overflow:hidden} .v03 .kop{display:grid;gap:.35rem;position:relative} .v03 .tel-nr{font:600 .74rem var(--body);color:var(--blue)} /* Waarom je je naam geeft, in één regel. Staat er op alle drie de stappen, want anders vraag je iemand zijn gegevens zonder te zeggen waarvoor. */ .v03 .uitleg{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted);max-width:34ch} .v03 h1{font-size:clamp(1.9rem,7.8vw,2.3rem)} .v03 .field{display:none} .v03 .field.aan{display:grid} .v03 .lijn .inp{font:700 1.5rem var(--display);letter-spacing:-.02em;padding:.45rem 0} .v03 .lijn .field::after{height:2px} .v03 .lijn .tel{grid-template-columns:4.2rem 1fr;align-items:end} .v03 .lijn .tel select{font:600 1.05rem var(--body);padding-bottom:.6rem} .v03 .klaar{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;min-height:1.9rem} .v03 .klaar li{display:inline-flex;align-items:center;gap:.4em;font:500 .8rem var(--body);color:var(--muted); background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:.3em .75em;animation:sv-op .4s var(--ease) both} .v03 .klaar li::before{content:"✓";color:var(--blue);font-weight:700} .v03 .punten{display:flex;gap:.35rem;margin-top:.4rem} .v03 .punten i{height:4px;flex:1;border-radius:2px;background:var(--line);transition:background-color .3s} .v03 .punten i.aan{background:var(--blue)} /* de wissel: huidige vraag weg naar links, volgende komt van rechts */ @keyframes sv-uit{to{opacity:0;transform:translateX(-18px)}} @keyframes sv-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} .v03 .wissel-uit{animation:sv-uit .22s var(--ease) forwards} .v03 .wissel-in{animation:sv-in .32s var(--ease) both} /* ══ v04 · terminal ═══════════════════════════════════════════════ */ .v04{background:#06070D} .v04 .sv-blad{background:#06070D;color:#DDE2EE} .v04 .sv-vak{padding-top:.1rem} .v04 .venster{flex:1;display:flex;flex-direction:column;min-height:0;background:#0C0F18;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5)} .v04 .titel{flex:none;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:#12161F;border-bottom:1px solid rgba(255,255,255,.08)} .v04 .titel i{width:.55rem;height:.55rem;border-radius:50%;background:#2A3040} .v04 .titel i:first-child{background:#FF5F57}.v04 .titel i:nth-child(2){background:#FEBC2E}.v04 .titel i:nth-child(3){background:#28C840} .v04 .titel .pad{margin-left:.35rem;font:500 .66rem var(--mono);letter-spacing:.04em;color:#7A8191} .v04 .titel .live{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;font:500 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7A8191} .v04 .titel .live b{width:6px;height:6px;border-radius:50%;background:#28C840;box-shadow:0 0 8px #28C840} .v04 .log{flex:none;padding:.9rem .95rem 0;font:400 .78rem/1.5 var(--mono);color:#8FA0C0;min-height:5.6rem;margin-top:auto} .v04 .log p{margin:0;white-space:pre-wrap} .v04 .log p b{color:#fff;font-weight:500} .v04 .log .cur{display:inline-block;width:.55em;height:1em;background:var(--blue);vertical-align:-.15em;margin-left:.1em;animation:sv-knip 1s steps(1) infinite} @keyframes sv-knip{50%{opacity:0}} .v04 form{flex:none;padding:.9rem .95rem 1rem;display:grid;gap:.6rem;margin-bottom:auto} .v04 h1{font:800 1.1rem/1.2 var(--display);letter-spacing:-.02em;color:#fff} .v04 .btn{border-radius:8px;font-family:var(--mono);font-weight:700;letter-spacing:.01em} .v04 .status{flex:none;display:flex;justify-content:space-between;gap:.8rem;padding:.5rem .95rem;border-top:1px solid rgba(255,255,255,.08); font:500 .58rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#4C5568} .v04 .consent{color:#5D6679} .v04 .consent a{color:#8FA0C0} /* ══ v05 · zevenennegentig ════════════════════════════════════════ */ .v05{background:var(--dark)} .v05 .sv-blad{background:var(--dark);color:#fff} .v05 .sv-merk{color:#fff} .v05 .sv-nav span{color:#5D6679} .v05 .sv-vak{padding:0;justify-content:space-between;gap:0} .v05 .getal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:.4rem 1.15rem 1.2rem} .v05 .cijfer{font:900 clamp(6rem,30vw,8.5rem)/.85 var(--display);letter-spacing:-.06em;color:#fff;font-variant-numeric:tabular-nums;display:flex;align-items:baseline} .v05 .cijfer em{font-style:normal;color:var(--blue);font-size:.45em;margin-left:.06em} .v05 h1{font-size:clamp(1.25rem,5.2vw,1.5rem);color:#fff;margin-top:.7rem;max-width:22ch} .v05 h1 em{font-style:normal;color:#5B84F0} .v05 .bron{margin-top:.6rem;font-size:.74rem;color:#5D6679} .v05 .blad{flex:none;background:var(--bg);color:var(--ink);border-radius:20px 20px 0 0;padding:1.05rem 1.15rem 1.05rem;display:grid;gap:.6rem; animation:sv-blad-op .7s var(--ease) both;animation-delay:.25s} @keyframes sv-blad-op{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} /* ══ v06 · bewijs eerst ══════════════════════════════════════════ De kaarten stonden als miniatuurtjes van 9,6rem voorbij te schuiven; je zag dat er iets bewoog, niet wíe. Nu is het een echte carrousel: één kaart bijna schermbreed, met de naam en het resultaat eroverheen, en hij loopt heen en weer in plaats van eindeloos één kant op. Vegen kan gewoon; dan stopt het automatisch schuiven en houdt de bezoeker het stuur. */ .v06{background:#06070D} .v06 .sv-blad{background:radial-gradient(ellipse 90% 40% at 50% 0%,rgba(0,82,255,.22),transparent 60%),#06070D;color:#fff} .v06 .sv-merk{color:#fff} .v06 .sv-nav span{color:#8089A0} .v06 .sv-vak{padding-inline:0;gap:.7rem} .v06 .carrousel{flex:1 1 11rem;min-height:8.5rem;display:flex;gap:.7rem;align-items:center; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch; padding:0 1.15rem;scroll-padding-inline:1.15rem} .v06 .carrousel::-webkit-scrollbar{display:none} /* Dezelfde reviewkaart als op de trainingspagina: de uitspraak groot in beeld, het gemarkeerde woord blauw, de naam en het resultaat eronder. Alles schaalt op cqw, dus de kaart klopt bij elke breedte. Eerder stond hier een kale foto met een naam erover; dan lees je niet wat iemand zegt, en dáár gaat het om. */ .v06 .rv{container-type:inline-size;flex:none;width:88%;max-height:100%;aspect-ratio:16/9;scroll-snap-align:center; position:relative;border-radius:14px;overflow:hidden;background:#06070D;color:#EEF1F8; font-family:var(--display);box-shadow:0 16px 40px rgba(0,0,0,.5)} .v06 .rv .still{position:absolute;inset:0;background-color:#171a24;background-size:cover;background-position:62% 30%;background-repeat:no-repeat} .v06 .rv .veil{position:absolute;inset:0;background:linear-gradient(94deg,#06070D 0%,#06070D 40%,rgba(6,7,13,.55) 62%,transparent 82%),radial-gradient(ellipse 60% 55% at 12% 0%,rgba(0,82,255,.3),transparent 68%)} .v06 .rv .in{position:relative;z-index:2;height:100%;padding:6cqw 6cqw 11cqw;display:flex;flex-direction:column;justify-content:center} .v06 .rv .q{font-weight:900;text-transform:uppercase;font-size:6.4cqw;line-height:.98;letter-spacing:-.028em;max-width:58cqw;margin:0} .v06 .rv .q i{color:#5B84F0;font-style:normal} .v06 .rv mark{background:var(--blue);color:#fff;padding:.02em .18em .06em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .v06 .rv .streep{width:15cqw;height:.5cqw;background:var(--blue);border-radius:.3cqw;margin:3cqw 0 2cqw} .v06 .rv .n{display:flex;align-items:baseline;gap:1cqw;flex-wrap:wrap} .v06 .rv .n b{font-weight:800;text-transform:uppercase;font-size:max(3.3cqw,.72rem);letter-spacing:-.02em} .v06 .rv .n span{font-family:var(--body);font-weight:500;font-size:max(1.9cqw,.64rem);color:#8089A0} .v06 .rv .merk{position:absolute;left:6cqw;bottom:4.6cqw;z-index:3;font-weight:900;font-size:max(2.4cqw,.62rem);letter-spacing:-.035em} .v06 .rv .merk i{color:var(--blue);font-style:normal} .v06 .rv .play{position:absolute;right:5cqw;bottom:5cqw;z-index:3;width:9cqw;height:9cqw;border-radius:50%; background:rgba(255,255,255,.94);display:grid;place-items:center} .v06 .rv .play::after{content:"";border-left:2.6cqw solid #14171C;border-top:1.6cqw solid transparent;border-bottom:1.6cqw solid transparent;margin-left:.7cqw} .v06 .stipjes{flex:none;display:flex;justify-content:center;gap:5px;padding:0 1.15rem} .v06 .stipjes i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.24);transition:width .25s var(--ease),background-color .25s var(--ease)} .v06 .stipjes i.aan{background:var(--blue);width:15px;border-radius:3px} .v06 .waarvoor{flex:none;margin:0;padding:0 1.15rem;font:500 .74rem/1.4 var(--body);color:#8089A0} .v06 form{flex:none;display:grid;gap:.6rem;padding:0 1.15rem} .v06 h1{font-size:clamp(1.45rem,5.8vw,1.7rem);color:#fff} .v06 .inp{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff} .v06 .inp:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.1)} .v06 .zweef .zw label{color:rgba(255,255,255,.6)} .v06 .zweef .inp:focus~label,.v06 .zweef .inp:not(:placeholder-shown)~label{color:#8FB0FF} .v06 .tel select{background-color:rgba(255,255,255,.14);color:#fff} .v06 .consent{color:#5D6679} .v06 .consent a{color:#8FA0C0} /* ══ v07 · het gesprek ════════════════════════════════════════════ */ .v07{background:#E7DFD6} .v07 .sv-blad{background:#ECE5DD} .v07 .sv-nav{background:#075E54;color:#fff;padding:.65rem .9rem;gap:.65rem;justify-content:flex-start} .v07 .sv-nav .av{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 .8rem var(--display);flex:none} .v07 .sv-nav b{display:block;font-size:.95rem;line-height:1.2} .v07 .sv-nav span{display:block;font-size:.72rem;color:rgba(255,255,255,.78)} .v07 .sv-vak{padding:0} .v07 .draad{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;padding:1rem .9rem .9rem;min-height:0} .v07 .bel{max-width:84%;background:#fff;border-radius:12px 12px 12px 3px;padding:.6rem .75rem;font-size:.9rem;line-height:1.42;color:var(--ink); box-shadow:0 1px 1px rgba(6,7,13,.12);position:relative;animation:sv-op .35s var(--ease) both} .v07 .bel time{display:block;font-size:.62rem;color:#8A8F98;text-align:right;margin-top:.15rem} .v07 .bel[hidden]{display:none} .v07 .typt{display:inline-flex;gap:.28rem;align-items:center;background:#fff;border-radius:12px 12px 12px 3px;padding:.75rem .85rem;width:max-content;box-shadow:0 1px 1px rgba(6,7,13,.12)} .v07 .typt i{width:.42rem;height:.42rem;border-radius:50%;background:#B7BCC6;animation:sv-stip 1s infinite} .v07 .typt i:nth-child(2){animation-delay:.15s}.v07 .typt i:nth-child(3){animation-delay:.3s} @keyframes sv-stip{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}} .v07 .typt[hidden]{display:none} .v07 form{flex:none;background:#fff;padding:.85rem 1rem 1rem;border-top:1px solid #DDE0E6;display:grid;gap:.55rem} .v07 .btn{background:#25D366;border-radius:999px} .v07 .btn:hover{background:#1EBE5B} .v07 .btn-primary::after{display:none} .v07 .consent{margin-top:.3rem} /* ══ v08 · wit en stil ════════════════════════════════════════════ */ .v08 .sv-vak{justify-content:center;gap:.7rem;padding-inline:1.5rem} /* Hier stond 3:55, de duur van de video. Dat is een feit zonder gewicht: het zegt niets over waaróm je zou kijken. 1871 wel -- zover gaat de data waarop het framework rust, en dat is precies het verschil met elke andere trading-advertentie in de tijdlijn. */ .v08 .jaartal{display:grid;gap:.2rem;margin-bottom:.1rem} .v08 .jaartal b{font:900 clamp(3.6rem,17vw,5rem)/.86 var(--display);letter-spacing:-.055em;color:var(--ink); font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .v08 .jaartal span{font:500 .8rem/1.4 var(--body);color:var(--stil);max-width:26ch} .v08 .jaartal span b{font:600 .8rem var(--body);color:var(--ink);letter-spacing:0} .v08 h1{font-family:var(--body);font-weight:400;font-size:clamp(1.35rem,5.6vw,1.65rem);line-height:1.22;letter-spacing:-.02em;color:var(--ink);max-width:24ch} .v08 h1 b{font-weight:700} .v08 .velden{gap:.95rem;margin-top:.3rem} .v08 .btn{background:var(--ink);border-radius:0;padding:1rem} .v08 .btn:hover{background:#000} .v08 .btn-primary::after{display:none} .v08 .consent{text-align:left} /* ══ v09 · de coach ═══════════════════════════════════════════════ */ .v09 .sv-vak{padding:0} /* Een brede band, dus alleen de verticale plek telt. 26% zet zijn gezicht in de bovenste helft van de band, zodat de profielkaart die eroverheen valt niet zijn kin afsnijdt. */ .v09 .beeld{flex:1 1 8rem;min-height:6.5rem;max-height:30vh;max-height:30dvh;position:relative; background:url(/img/start-park-breed.webp) 50% 26%/cover} .v09 .beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 72%,rgba(6,7,13,.34))} .v09 form{flex:none;display:grid;gap:.6rem;padding:0 1.15rem 1.1rem;position:relative} .v09 blockquote{margin:-1.25rem 0 .1rem;position:relative;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem; font:500 .98rem/1.38 var(--body);letter-spacing:-.01em;box-shadow:0 12px 30px rgba(6,7,13,.12)} .v09 blockquote::before{content:"";position:absolute;left:1.4rem;top:-.5rem;width:.9rem;height:.9rem;background:var(--bg);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)} .v09 blockquote em{font-style:normal;background:var(--blue);color:#fff;padding:0 .24em;border-radius:4px} /* ══ v10 · de data ════════════════════════════════════════════════ */ .v10{background:var(--dark)} .v10 .sv-blad{background:var(--dark);color:#fff} .v10 .sv-merk{color:#fff} .v10 .sv-nav span{color:#5D6679} .v10 .strip{flex:none;margin:0 -1.15rem;padding:.5rem 0;overflow:hidden;border-block:1px solid rgba(255,255,255,.09); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .v10 .strip ul{display:flex;list-style:none;margin:0;padding:0;width:max-content;animation:sv-mq 28s linear infinite} .v10 .strip li{font:500 .6rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#5D6679;padding:0 1rem;white-space:nowrap} .v10 .sv-vak{gap:.55rem;justify-content:flex-end} .v10 .grafiek{flex:1 1 5.5rem;min-height:4.5rem;max-height:9.5rem;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr .4fr; gap:0 4px;position:relative;margin-top:.5rem;padding-bottom:1.1rem} /* de as ligt op de grens van de twee rijen: 0,4 van 1,4 vanaf de onderkant, plus de ruimte voor de maandnamen */ .v10 .grafiek::before{content:"";position:absolute;left:0;right:0;bottom:calc((100% - 1.1rem) * .4 / 1.4 + 1.1rem);height:1px;background:rgba(255,255,255,.18)} .v10 .grafiek i{grid-row:1;align-self:end;display:block;position:relative;border-radius:2px 2px 0 0;background:rgba(0,82,255,.32); transform-origin:bottom;animation:sv-staaf .7s var(--ease) both;animation-delay:calc(var(--n) * 40ms)} .v10 .grafiek i.top{background:var(--blue)} .v10 .grafiek i.min{grid-row:2;align-self:start;background:#B3392F;border-radius:0 0 2px 2px;transform-origin:top} .v10 .grafiek i span{position:absolute;left:50%;transform:translateX(-50%);font:500 .5rem var(--mono);letter-spacing:.06em;color:#7A8191;white-space:nowrap} .v10 .grafiek i .w{top:-1.1rem;color:#fff} .v10 .grafiek i .m{bottom:-1.1rem} .v10 .grafiek i.min .w{top:auto;bottom:-1.1rem;color:#E58A82} @keyframes sv-staaf{from{transform:scaleY(0)}to{transform:scaleY(1)}} .v10 .bron{font:500 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#5D6679} .v10 h1{font-size:clamp(1.4rem,5.6vw,1.65rem);color:#fff} .v10 .consent{color:#4C5568} .v10 .consent a{color:#7A8191} /* ── korte schermen: sfeer levert als eerste in, de knop blijft ────── */ @media (max-height:700px){ .v09 blockquote{font-size:.9rem} .v05 .cijfer{font-size:clamp(5rem,24vw,6.5rem)} } @media (max-height:640px){ .v02 .bijna{display:none} .v02 .speler{max-height:22vh;max-height:22dvh;min-height:4.5rem} .v09 .beeld{max-height:26vh;max-height:26dvh} .v10 .grafiek{max-height:5rem} /* De carrousel is de kern van deze variant, dus die blijft; de tellers eronder zijn de eerste die inleveren. */ .v06 .carrousel{min-height:6rem;flex-basis:7rem} .v06 .waarvoor{font-size:.68rem} .v08 .jaartal b{font-size:clamp(3.6rem,18vw,4.6rem)} } @media (max-height:560px){ .v01 .bijna{font-size:.8rem} .v03 .uitleg{font-size:.8rem} .sv .velden{gap:.4rem} .sv .btn-lg{padding:12px 18px;font-size:14px} .sv .consent{margin-top:.35rem;font-size:.66rem} .sv h1{font-size:1.15rem} .sv-nav{padding:.55rem 1.15rem} .zweef .inp{padding:1.15rem .95rem .45rem} .v02 .speler,.v09 .beeld{display:none} .v02 .bijna,.v05 .bron,.v06 .waarvoor,.v10 .strip{display:none} .v04 .log{min-height:0;padding-top:.6rem} .v04 .status{display:none} .v05 .cijfer{font-size:4rem} .v06 .carrousel{min-height:5rem;flex-basis:5.5rem} .v06 .rv{width:84%} .v06 .stipjes{display:none} .v07 .draad .bel:not(:last-of-type){display:none} .v08 .jaartal b{font-size:3.2rem} .v08 .jaartal span{display:none} .v09 blockquote{margin-top:.4rem;font-size:.84rem} .v09 blockquote::before{display:none} .v10 .grafiek{display:none} .v10 .bron{display:none} } @media (max-height:500px){ .sv:not(.v07) .sv-nav{display:none} .v05 .cijfer{display:none} } /* ── beweging beperken ─────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .sv .op,.v03 .klaar li,.v05 .blad,.v07 .bel,.v10 .grafiek i{animation:none} .v01 .foto,.v02 .play::before,.v10 .strip ul,.v04 .log .cur,.v07 .typt i{animation:none} .v03 .wissel-uit,.v03 .wissel-in{animation:none} .lijn .field::after,.zweef .zw label{transition:none} } /* ═══ tweede ronde feedback ═════════════════════════════════════════ */ /* 05 · het bewijs náást het getal. Zonder dit leest 97% als "dan hoor ik daar vast ook bij"; deze drie regels zetten er mensen tegenover die het wél deden. Alle drie zijn na te tellen op de site zelf. */ .v05 .bewijs{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.3rem} .v05 .bewijs li{position:relative;padding-left:1rem;font-size:.82rem;line-height:1.4;color:#8089A0} .v05 .bewijs li::before{content:"";position:absolute;left:0;top:.52em;width:.35rem;height:.35rem;border-radius:50%;background:var(--blue)} /* 06 · de review echt bekijken. De knop beloofde het al; nu doet hij het ook. */ .v06 .rv{border:0;padding:0;cursor:pointer;text-align:left;color:#EEF1F8;font-family:var(--display)} .v06 .rv:active{transform:scale(.99)} .kijk{position:fixed;inset:0;z-index:200;background:rgba(6,7,13,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); display:grid;place-items:center;padding:1.2rem} .kijk[hidden]{display:none} .kijk .doek{width:min(52rem,92vw);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000} .kijk .doek.staand{width:auto;height:min(76vh,76dvh);aspect-ratio:9/16;max-width:92vw} .kijk iframe{width:100%;height:100%;border:0;display:block} .kijk .dicht{position:absolute;top:1rem;right:1rem;width:2.8rem;height:2.8rem;border-radius:50%; border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font-size:1rem;cursor:pointer} /* 07 · meer WhatsApp: het behang, de staart aan de bel en de datumkop */ .v07 .sv-vak{background:#ECE5DD; background-image: radial-gradient(circle at 12% 18%,rgba(6,7,13,.045) 0 2px,transparent 2px), radial-gradient(circle at 62% 42%,rgba(6,7,13,.04) 0 3px,transparent 3px), radial-gradient(circle at 34% 78%,rgba(6,7,13,.045) 0 2px,transparent 2px), radial-gradient(circle at 84% 88%,rgba(6,7,13,.035) 0 2.5px,transparent 2.5px); background-size:120px 120px} .v07 .dag{align-self:center;margin:0 0 .3rem;background:rgba(255,255,255,.86);border-radius:999px; padding:.2em .8em;font:500 .66rem var(--body);color:#5F6672;box-shadow:0 1px 1px rgba(6,7,13,.08)} .v07 .bel{position:relative} .v07 .bel:first-of-type::before{content:"";position:absolute;left:-6px;bottom:0;width:12px;height:14px; background:var(--bg);clip-path:polygon(100% 0,100% 100%,0 100%)} .v07 form{border-top:0;box-shadow:0 -1px 0 rgba(6,7,13,.08)} .v07 .btn{box-shadow:0 6px 18px rgba(37,211,102,.35)} /* 08 · de institutionele toon: een rubriek, en de bronnen bij naam */ .v08 .rubriek{margin:0;font:500 .66rem var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--stil)} .v08 .bronnen{margin:.2rem 0 .1rem;padding:.7rem 0 0;border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem} .v08 .bronnen dt{font:500 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stil)} .v08 .bronnen dd{margin:.15rem 0 0;font:600 .78rem var(--body);color:var(--ink)} /* 09 · als een profiel: omslagfoto, daaroverheen de kaart met avatar en rol */ /* Vaste vakken, geen impliciete rijen: met alleen `grid-row: span 2` op de avatar belandde de namenregel in dezelfde cel als de chips en liep de tekst er dwars doorheen. */ .v09 .profiel{position:relative;margin:-1.6rem 0 .2rem;background:var(--bg);border:1px solid var(--line); border-radius:16px;padding:.85rem 1rem .9rem;display:grid;grid-template-columns:auto 1fr; grid-template-areas:"av wie" "feiten feiten";gap:0 .75rem; box-shadow:0 14px 34px rgba(6,7,13,.12)} .v09 .profiel .av{grid-area:av;align-self:center;width:2.9rem;height:2.9rem;border-radius:50%; background:var(--dark);color:#fff;display:grid;place-items:center;font:800 .88rem var(--display);letter-spacing:-.02em} .v09 .profiel .wie{grid-area:wie;align-self:center;display:grid;gap:.08rem;min-width:0} .v09 .profiel .wie b{display:block;font:800 1.05rem var(--display);letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere} .v09 .profiel .wie span{font-size:.78rem;color:var(--stil)} .v09 .profiel .feiten{grid-area:feiten;list-style:none;margin:.7rem 0 0;padding:.7rem 0 0;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:.35rem} .v09 .profiel .feiten li{font:500 .68rem var(--body);color:var(--muted);background:var(--bg-2); border:1px solid var(--line);border-radius:999px;padding:.24em .6em} .v09 blockquote{margin:.1rem 0;font-size:.94rem;padding:.7rem .9rem} .v09 blockquote::before{display:none} @media (max-height:700px){ /* de chips onder het profiel zijn sfeer; naam en rol zijn de kern */ .v09 .profiel .feiten{display:none} } @media (max-height:640px){ .v05 .bewijs{gap:.2rem} .v05 .bewijs li{font-size:.78rem} .v05 .bewijs li:last-child,.v08 .bronnen{display:none} .v09 blockquote{font-size:.86rem} .v09 .beeld{max-height:22vh;max-height:22dvh;min-height:5rem;flex-basis:6rem} .v09 .profiel{margin-top:-1.2rem;padding:.7rem .85rem .75rem} .v09 .profiel .av{width:2.4rem;height:2.4rem} } @media (max-height:560px){ .v05 .bewijs,.v08 .rubriek,.v07 .dag{display:none} .v09 .profiel{margin-top:-1rem;padding:.6rem .8rem} } /* ══ v11 · de desk ════════════════════════════════════════════════ De combinatie van 01 en 04. Van 01 de foto met hem erop, van 04 het venster dat zichzelf inlogt. 01 verkoopt de persoon, 04 verkoopt het systeem, en NOMAD is allebei. Het verschil met 04: dat venster vult daar het hele scherm (flex:1). Hier staat het onderin en niet hoger dan het nodig heeft, want alles wat het groter maakt duwt zijn gezicht uit beeld. Vandaar ook drie logregels in plaats van vier, en geen statusbalk onderaan. */ /* ══════════════════════════════════════════════════════════════════ VARIANT 12 · Licht, bewijs vooraan De combinatie van 04 (bewijs eerst) en 06 (licht vel), 13-09-2026. ERFT NIETS VAN .v11 -- die blijft er onaangeroerd onder staan, zodat terugzetten één klasse in de is. Wat hier staat is dus compleet. Drie dingen die de vorm bepalen: 1. Het vel is wit op een lichte grond. De rest van de trechter is licht (/training, het agendavenster, de zes vragen); dit was het enige donkere scherm dat er nog stond. 2. Het bewijs staat bovenaan en groot. Het lag in klein grijs tussen twee alinea's, terwijl het het sterkste is dat hier staat. 3. Geen vensterchrome. Die kostte zestig pixels aan de bovenkant en zegt een koude bezoeker uit een advertentie niets; die ruimte gaat naar zijn gezicht. ══════════════════════════════════════════════════════════════════ */ .v12{background:#EEF1F6} .v12 .sv-blad{background:#EEF1F6;color:#0D1016} /* Zelfde uitsnede als 01 en 11: volle breedte vanaf de bovenrand. MAAR MET EEN ECHTE UITLOOP, EN DAAROM EEN VASTE HOOGTE. Het bestand loopt onderin zélf uit naar #06070D -- dat werkte op de donkere variant, want daar kwam het beeld uit op de paginakleur. Op een lichte grond wordt diezelfde uitloop een vieze grijze band die op de telefoon eindigt in een harde streep, precies in de twee smalle stroken naast de kaart. De foto is 1200 x 1214. Met `aspect-ratio` krijgt het vlak precies die verhouding bij de breedte die het kríjgt, en kunnen we hem met een masker laten oplossen in de paginakleur in plaats van hem te laten ophouden. NIET met calc(100vw * ...): op een breed scherm staat het blad in een smalle kolom, en dan is 100vw veel te hoog. Het masker valt dan ver onder het beeld en de harde rand staat er alsnog. */ .v12 .foto{position:absolute;left:0;right:0;top:0;aspect-ratio:1200/1214;z-index:0; background:url(/img/start-park-hoog.webp) 50% 0/100% auto no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,0) 100%)} /* Alleen nog bovenin dempen, zodat het merk en de tijdpil leesbaar blijven tegen de lucht. De onderkant doet het masker hierboven. */ .v12 .waas{position:absolute;left:0;right:0;top:0;aspect-ratio:1200/1214;z-index:1; background:linear-gradient(180deg,rgba(6,7,13,.34) 0%,rgba(6,7,13,.04) 18%,rgba(6,7,13,0) 34%)} .v12 .sv-nav{position:relative;z-index:2} /* Het merk staat op de foto, dus wit -- ook in de lichte variant. */ .v12 .sv-merk{color:#fff} .v12 .sv-pil{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(6,7,13,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .v12 .sv-vak{position:relative;z-index:2;justify-content:flex-end;padding-top:.1rem} .v12 .venster{flex:none;display:flex;flex-direction:column;min-height:0; background:#fff;border:0;border-radius:18px;overflow:hidden; box-shadow:0 1px 2px rgba(12,20,44,.05),0 22px 46px -18px rgba(12,20,44,.32)} .v12 form{flex:none;padding:1.05rem 1rem 1.05rem;display:grid;gap:.6rem} /* ── het bewijs, bovenaan ───────────────────────────────────────── Het getal draagt, de omschrijving staat ernaast en de verificatie eronder. De streep eronder scheidt het bewijs van de belofte: dat zijn twee verschillende dingen en ze horen niet in één blok te lezen. */ .v12 .bewijsgroot{ margin:0 0 .1rem;display:flex;align-items:center;gap:.7rem; padding-bottom:.8rem;border-bottom:1px solid #E2E6EE; } .v12 .bewijsgroot b{ font:900 2.45rem/1 var(--display);letter-spacing:-.045em;color:#0D1016; font-variant-numeric:tabular-nums; } .v12 .bewijsgroot span{font-size:.72rem;line-height:1.35;color:#5B6373} .v12 .bewijsgroot em{ display:inline-flex;align-items:center;gap:.34em;margin-top:.22rem; font-style:normal;font-weight:700;font-size:.63rem;letter-spacing:.05em; text-transform:uppercase;color:#0B8F4B; } .v12 .bewijsgroot em s{ text-decoration:none;width:.82rem;height:.82rem;border-radius:50%; background:#0B8F4B;color:#fff;display:grid;place-items:center; font-size:.5rem;font-weight:700; } /* ── de kop, een maat terug ─────────────────────────────────────── Hij staat nu ónder het bewijs en hoeft de aandacht niet meer alleen te dragen; op 1,18rem leest hij als de belofte bij het cijfer in plaats van als de kop van de pagina. */ .v12 h1{font:800 clamp(1.06rem,4.2vw,1.2rem)/1.18 var(--display);letter-spacing:-.025em;color:#0D1016} .v12 h1 em{font-style:normal;color:var(--blue)} .v12 h1 .caret{display:inline-block;width:.06em;height:.82em;background:var(--blue); vertical-align:-.06em;margin-left:.04em;border-radius:1px;animation:sv-knip 1s steps(1) infinite} .v12 h1.typt .ch{opacity:0} .v12 h1.typt .ch.aan{opacity:1} /* De ondertitel vervalt in deze variant: het bewijs zegt nu wat het oplevert en de kop wat het is. Bewust met display:none en niet uit de markup -- terugzetten is één regel, en de typemachine hieronder blijft werken. */ .v12 .bijna{display:none} /* ── de velden ──────────────────────────────────────────────────── Lichtgrijs vlak, geen harde rand: drie donkere dozen op rij lazen als werk. Het label klimt omhoog zodra je typt (.zweef, zie 01). */ .v12 .inp{background:#F4F6FA;border-color:#E2E6EE;color:#0D1016} .v12 .inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.14)} .v12 .zweef .zw label{color:#7A8394} .v12 .zweef .inp:focus~label,.v12 .zweef .inp:not(:placeholder-shown)~label{color:var(--blue)} .v12 .tel select{background-color:#F4F6FA;color:#0D1016} /* ── de reden onder het telefoonveld ────────────────────────────── Niet als kleine lettertjes onder de knop maar hier, waar de vraag opkomt: waarom een nummer voor een gratis video? */ .v12 .waarom{margin:.15rem 0 0;display:flex;gap:.55rem;align-items:flex-start; padding:.6rem .7rem;border-radius:11px;background:#EDF2FF;border:1px solid #C9D8FF} .v12 .waarom .merkje{flex:none;font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:#fff;background:var(--blue);border-radius:999px;padding:.28em .6em;margin-top:.1rem} .v12 .waarom span{font-size:.76rem;line-height:1.45;color:#3A4560} .v12 .waarom b{color:#0D1016;font-weight:700} .v12 .fout{color:#A3221B;background:#FDECEA;border-color:#F3C4BF} .v12 .consent{color:#8A93A4} .v12 .consent a{color:#5B6373} /* Wordt het scherm korter, dan gaat er van de kaart af en niet van de foto: zonder zijn gezicht is dit gewoon een formulier. */ @media (max-height:700px){ .v12 form{padding:.85rem .9rem .95rem;gap:.5rem} .v12 .bewijsgroot b{font-size:2.1rem} } /* ── VARIANT 12 OP EEN COMPUTER ─────────────────────────────────────── Zonder dit blok valt hij terug op de algemene regel bovenaan (@media min-width:761px -> .sv-blad{max-width:27rem}) en staat er een telefoonkolom van 432 pixels midden op een leeg veld. .v11 had daar zijn eigen antwoord op; dat is bij de overstap naar .v12 niet meegekomen. De opzet is dezelfde als bij .v11: de foto links op volle hoogte, het venster rechts, verticaal in het midden. De foto wordt op HOOGTE geschaald (auto 100%), dus de breedte volgt uit de verhouding en er wordt niets samengedrukt. WAT ANDERS MOET DAN BIJ .v11 1. De uitloop van de foto gaat naar de PAGINAKLEUR en niet naar zwart. In het donker viel die naad weg omdat het beeld zelf op #06070D uitkomt; op een lichte grond wordt datzelfde randje een vieze donkere band. 2. Het masker en de aspect-ratio van de telefoonweergave moeten hier weg. Die rekenen met de BREEDTE van het vlak, en in deze opstelling bepaalt de hoogte de maat. 3. De tijdpil staat rechtsboven, en dat is hier lichte grond. Wit op wit is onzichtbaar; hij wordt donker. Het merk staat links op de foto en blijft dus wel wit. ─────────────────────────────────────────────────────────────────── */ @media (min-width:900px){ .v12 .sv-blad{max-width:none;margin:0;box-shadow:none} .v12 .foto{ inset:0 auto 0 0;width:min(98.8vh,64vw);height:auto;aspect-ratio:auto; background:url(/img/start-park-hoog.webp) 50% 0/auto 100% no-repeat; -webkit-mask-image:none;mask-image:none; } /* De rechterrand lost op in de paginakleur, zodat er geen naad staat waar het beeld ophoudt. Ruim de helft van het vlak: precies daar staat zijn donkere shirt, en dat contrast laat zich niet in driehonderd pixels wegwerken -- dan zie je alsnog een streep. */ .v12 .foto::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, rgba(238,241,246,0) 42%, rgba(238,241,246,.55) 74%, rgba(238,241,246,.92) 92%, #EEF1F6 100%); } /* Alleen bovenin dempen, voor het merk tegen de lucht. */ .v12 .waas{ inset:0 auto 0 0;width:min(98.8vh,64vw);height:auto;aspect-ratio:auto; background:linear-gradient(180deg,rgba(6,7,13,.4) 0%,rgba(6,7,13,0) 24%); } /* Merk en tijdpil naast elkaar, allebei links op de foto. Op de telefoon staan ze aan weerszijden van het scherm; hier zou de pil in zijn eentje rechtsboven op leeg wit komen te zweven -- en dan moet hij ook nog van kleur wisselen om leesbaar te blijven. Naast elkaar op het beeld is rustiger én blijft wit. */ .v12 .sv-nav{padding:1.3rem 2.4rem;justify-content:flex-start;gap:1rem} .v12 .sv-merk{font-size:1.5rem} .v12 .sv-pil{font-size:.8rem} .v12 .sv-vak{ display:grid;grid-template-columns:min(98.8vh,56vw) 1fr; align-items:center;justify-content:start;padding:0 0 2rem; } .v12 .venster{ grid-column:2;justify-self:center;width:min(31rem,calc(100% - 5rem)); border-radius:20px; } .v12 form{padding:1.6rem 1.7rem 1.5rem;gap:.7rem} /* Meer ruimte, dus het bewijs mag groter en de kop een maat terug. */ .v12 .bewijsgroot{gap:.85rem;padding-bottom:1rem;margin-bottom:.25rem} .v12 .bewijsgroot b{font-size:3rem} .v12 .bewijsgroot span{font-size:.8rem} .v12 .bewijsgroot em{font-size:.68rem} .v12 h1{font-size:clamp(1.25rem,1.5vw,1.42rem);line-height:1.2} .v12 .waarom span{font-size:.8rem} .v12 .consent{font-size:.78rem} } .v11{background:#06070D} .v11 .sv-blad{background:#06070D;color:#DDE2EE} /* Zelfde bestand en zelfde plaatsing als 01: volle breedte vanaf de bovenrand, onderin in het bestand al uitgelopen naar de paginakleur. */ .v11 .foto{position:absolute;inset:0;z-index:0;background:url(/img/start-park-hoog.webp) 50% 0/100% auto no-repeat} /* Lichter dan op 01: daar liep er een kop over de foto, hier staat er niets overheen tot het venster begint. Alleen bovenin iets dempen zodat het merk en de tijdpil leesbaar blijven tegen de lucht. */ .v11 .waas{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,7,13,.34) 0%,rgba(6,7,13,.04) 16%,rgba(6,7,13,.10) 34%,rgba(6,7,13,.42) 52%,#06070D 72%)} .v11 .sv-nav{position:relative;z-index:2} .v11 .sv-merk{color:#fff} .v11 .sv-pil{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(6,7,13,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} /* Het venster naar onderen, zijn gezicht houdt de ruimte erboven. */ .v11 .sv-vak{position:relative;z-index:2;justify-content:flex-end;padding-top:.1rem} .v11 .venster{flex:none;display:flex;flex-direction:column;min-height:0; background:rgba(10,13,20,.93);border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden; -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 30px 70px rgba(0,0,0,.55)} .v11 .titel{flex:none;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:rgba(18,22,31,.9);border-bottom:1px solid rgba(255,255,255,.08)} .v11 .titel i{width:.55rem;height:.55rem;border-radius:50%;background:#2A3040} .v11 .titel i:first-child{background:#FF5F57}.v11 .titel i:nth-child(2){background:#FEBC2E}.v11 .titel i:nth-child(3){background:#28C840} .v11 .titel .pad{margin-left:.35rem;font:500 .66rem var(--mono);letter-spacing:.04em;color:#7A8191} .v11 .titel .live{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;font:500 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7A8191} .v11 .titel .live b{width:6px;height:6px;border-radius:50%;background:#28C840;box-shadow:0 0 8px #28C840} .v11 form{flex:none;padding:1rem .95rem 1rem;display:grid;gap:.6rem} /* ── De kop typt zichzelf ────────────────────────────────────────── Elke letter staat er al, op nul ondoorzichtigheid, en gaat één voor één aan. Daardoor houdt de kop van begin af aan zijn definitieve hoogte: een typemachine die tekst laat aangroeien zou bij elke nieuwe letter de regelval opnieuw berekenen, en een kop van drie regels springt dan alle kanten op. Wat je ziet is het tempo van typen zonder de sprong ervan. */ .v11 h1.typt .ch{opacity:0} .v11 h1.typt .ch.aan{opacity:1} .v11 h1 .caret{display:inline-block;width:.06em;height:.82em;background:var(--blue); vertical-align:-.06em;margin-left:.04em;border-radius:1px;animation:sv-knip 1s steps(1) infinite} /* De onderregel wacht tot de kop af is; anders lees je twee dingen tegelijk. Bewust GEEN class="op" op dit element: die animatie zet opacity van 0 naar 1 met fill-mode both, en een animatie wint van een gewone declaratie. De regel hieronder zou dan nooit werken en de zin stond er meteen. */ .v11 .bijna{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .v11 .bijna.aan{opacity:1;transform:none} /* ── Het woordmerk ──────────────────────────────────────────────── Geen videobestand maar opmaak: de letters worden van links naar rechts vrijgegeven alsof ze geschreven worden, en als het woord er staat springt de punt erin met een korte gloed. Kost niets en start meteen -- een videobumper in de kop zou de eerste seconde juist opeten. */ @keyframes v11-merk{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes v11-punt{0%{transform:scale(.2);opacity:0;text-shadow:0 0 0 rgba(0,82,255,0)} 55%{transform:scale(1.4);opacity:1;text-shadow:0 0 16px rgba(0,82,255,.95)} 100%{transform:scale(1);opacity:1;text-shadow:0 0 0 rgba(0,82,255,0)}} .v11 .sv-merk{animation:v11-merk .62s var(--ease) both} .v11 .sv-merk i{display:inline-block;animation:v11-punt .52s .58s var(--ease) both} /* De letter is die van 01, het kader dat van 04. Dus hier geen mono-kop en geen start_training(): de kop van 01 in de displayletter, zwevende labels in de velden en een knop die zegt wat hij doet. Wel kleiner dan op 01. Daar is de kop het hele scherm en mag hij 1,9 tot 2,2rem zijn; hier staat hij in een venster dat onderin blijft, en elke millimeter die dat venster groeit gaat rechtstreeks van zijn gezicht af. */ .v11 h1{font:800 clamp(1.12rem,4.5vw,1.32rem)/1.2 var(--display);letter-spacing:-.025em;color:#fff} .v11 h1 em{font-style:normal;color:#5B84F0} .v11 .bijna{margin:0;font-size:.84rem;line-height:1.4;color:rgba(255,255,255,.62);max-width:36ch} .v11 .inp{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff} .v11 .inp:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.1)} .v11 .zweef .zw label{color:rgba(255,255,255,.6)} .v11 .zweef .inp:focus~label,.v11 .zweef .inp:not(:placeholder-shown)~label{color:#8FB0FF} .v11 .tel select{background-color:rgba(255,255,255,.13);color:#fff} /* ── het bewijsstuk ─────────────────────────────────────────────── Eén regel, uit het wins-kanaal. Een naam met een controleerbaar resultaat op het moment dat iemand zijn telefoonnummer moet afstaan aan een partij die hij niet kent. */ .v11 .bewijs{margin:.1rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem; font-size:.8rem;line-height:1.4} .v11 .bewijs q{quotes:none;font-weight:600;color:#fff} .v11 .bewijs q::before{content:"\201C"} .v11 .bewijs q::after{content:"\201D"} .v11 .bewijs span{color:#7A8399;font-size:.74rem} /* ── de reden onder het telefoonveld ────────────────────────────── Niet als kleine lettertjes onder de knop maar hier, waar de vraag opkomt. Het blauwe randje maakt er een aanbod van in plaats van een voorwaarde. */ .v11 .waarom{margin:.15rem 0 0;display:flex;gap:.55rem;align-items:flex-start; padding:.6rem .7rem;border-radius:11px; background:rgba(0,82,255,.10);border:1px solid rgba(91,132,240,.28)} .v11 .waarom .merkje{flex:none;font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:#fff;background:var(--blue);border-radius:999px;padding:.28em .6em;margin-top:.1rem} .v11 .waarom span{font-size:.76rem;line-height:1.45;color:#C2CBDD} .v11 .waarom b{color:#fff;font-weight:600} /* ── de foutmelding ─────────────────────────────────────────────── Stond op #9C2B25 op een bijna zwarte ondergrond: contrast 2,6 op 1, ruim onder de norm van 4,5. Juist wie een typefout maakte had je al bijna, en die moest de enige regel lezen die hem terug het formulier in praat. */ .v11 .fout{color:#FFA8A2;background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.34)} .v11 .consent{color:#69738A} .v11 .consent a{color:#9AA8C0} /* Wordt het scherm korter, dan gaat er van het venster af en niet van de foto: zonder zijn gezicht is dit gewoon variant 04 nog een keer. En dan valt de EERSTE regel weg, niet de laatste. "verbinding met de desk" is sfeer; de laatste regel zegt waar de training over gaat en is het enige stuk boodschap dat dit scherm heeft. De typemachine slaat verborgen regels over, anders staat hij een seconde in een onzichtbaar vak te typen. */ @media (max-height:700px){ .v11 form{padding:.8rem .9rem .9rem;gap:.5rem} } @media (max-height:660px){ /* Het bewijsstuk gaat als eerste weg: leuk om te hebben, maar de kop en de reden bij het nummer doen meer werk. */ .v11 .bewijs{display:none} } @media (max-height:620px){ /* Daarna de onderregel: de kop zegt al waar het over gaat, en die is hier het hele punt van het scherm. */ .v11 .bijna{display:none} .v11 .titel{padding:.45rem .8rem} .v11 .waarom{padding:.5rem .6rem} .v11 .waarom span{font-size:.72rem} } @media (max-height:540px){ .v11 h1{font-size:1.02rem} } /* ── Op de computer: de desk in de breedte ──────────────────────── Op de telefoon staat het venster onder zijn gezicht; op een breed scherm staat het ernaast. Links de foto op volle hoogte en in zijn eigen verhouding -- de breedte volgt uit de hoogte, dus niets wordt geknipt of samengedrukt -- en rechts het venster, verticaal in het midden. De rechterrand van de foto loopt uit in de paginakleur, net als de onderkant op de telefoon, zodat er geen naad is waar het beeld ophoudt. De fotokolom is smaller dan de foto zelf mag zijn (56vw tegen 64vw): het venster mag over het uitgelopen randje heen staan, dan zit er geen dode strook tussen hem en het formulier. Op een heel breed scherm blijft er lucht over; dat hoort bij zo'n scherm. */ @media (min-width:900px){ .v11 .sv-blad{max-width:none;margin:0;box-shadow:none} .v11 .foto{inset:0 auto 0 0;width:min(98.8vh,64vw);background:url(/img/start-park-hoog.webp) 50% 0/auto 100% no-repeat} .v11 .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,13,0) 70%,#06070D 100%)} .v11 .waas{background:linear-gradient(180deg,rgba(6,7,13,.42) 0%,rgba(6,7,13,0) 22%)} .v11 .sv-nav{padding:1.3rem 2.4rem} .v11 .sv-merk{font-size:1.5rem} .v11 .sv-pil{font-size:.8rem} .v11 .sv-vak{display:grid;grid-template-columns:min(98.8vh,56vw) 1fr;align-items:center;justify-content:start;padding:0 0 2rem} .v11 .venster{grid-column:2;justify-self:center;width:min(31rem,calc(100% - 5rem))} .v11 .titel{padding:.7rem 1rem} .v11 .titel .pad{font-size:.72rem} .v11 .titel .live{font-size:.62rem} .v11 form{padding:1.5rem 1.6rem 1.4rem;gap:.7rem} .v11 h1{font-size:clamp(1.4rem,1.75vw,1.72rem);line-height:1.16} .v11 .bijna{display:block;font-size:.95rem;max-width:40ch} .v11 .consent{font-size:.78rem} } /* ══════════════════════════════════════════════════════════════════ VARIANT 13 · Het slot Gekozen uit het variantencanvas van 21-09-2026 (daar C11): het beeld op slot, het bewijs eronder, de vijf lagen als strook ertussen. WAAROM DONKER, TERWIJL 12 JUIST LICHT WERD Omdat de voordeur nu op de hoofdsite lijkt. nomadtrading.nl is bijna zwart met een afgeronde schil, een blauwe gloed onder de vouw en cijfers in mono; /start was het enige scherm dat daar niets van had. Wat 12 oploste, de sprong van de advertentie naar het lichte /training, verschuift daarmee één stap naar achteren: die overgang staat nu tussen deze pagina en de trainingspagina, en dat is de plek waar iemand al binnen is. DRIE DINGEN DIE DE VORM BEPALEN 1. Het beeld staat op slot: vervaagd, met een hangslot in plaats van een afspeelknop. De pagina belooft zo niets wat zij niet doet, want afspelen kan pas na het formulier. 2. De vijf lagen staan als strook onder het beeld, zodat zichtbaar is wat er achter dat slot zit. 3. Het bewijs staat bovenin de kaart: 400K, geverifieerd. MONO KOMT HIER TERUG, MAAR ALLEEN OP CIJFERS EN ETIKETTEN nomad-vsl-1.css wijst --mono bewust naar DM Sans: kleine kapitalen met letterafstand in lopende tekst zijn het handschrift van elke AI-pagina. Op de hoofdsite staat data wél in JetBrains Mono, en dat is precies het herkenningspunt dat hier miste. Vandaar mono op de tijd, de duur, de verificatieregel en de vijf laagnamen, en nergens anders. .v12 blijft onaangeroerd hieronder staan; terugzetten is één klasse in de . ══════════════════════════════════════════════════════════════════ */ .v13{background:#030305;color:#8b92a6} .v13 .sv-blad{background:#030305;color:#f2f4fa;padding:10px 12px 12px} @media (min-width:761px){.v13 .sv-blad{max-width:28rem;box-shadow:none}} /* de schil van de homepage: alles staat binnen één afgeronde bak */ .v13 .schil{position:relative;flex:1;min-height:0;display:flex;flex-direction:column; border-radius:22px;overflow:hidden;background:#07080d} /* één gloed per scherm, onder de kaart, zoals onder de hero van de homepage */ .v13 .gloed{position:absolute;left:0;right:0;bottom:-60px;height:440px;z-index:0;pointer-events:none; background:radial-gradient(ellipse 62% 100% at 50% 100%,rgba(0,82,255,.26),rgba(0,82,255,.10) 42%,transparent 72%)} /* de scanlijnen van de homepage, op 1,8 procent wit: je ziet ze niet, je voelt ze */ .v13 .scan{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px)} .v13 .sv-nav{position:relative;z-index:2;padding:.85rem 1rem} .v13 .sv-merk{color:#f2f4fa} .v13 .sv-pil{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:.66rem; border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#9aa0b4} .v13 .sv-pil i{color:#8fb0ff} /* ── het beeld, op slot ─────────────────────────────────────────── Dezelfde foto als 12, maar vervaagd en gedempt. De schaal van 1,04 zit erop omdat een blur de randen doorzichtig maakt; zonder die vergroting zie je een lichte rand rond het beeld. */ .v13 .beeld{position:relative;z-index:2;margin:.15rem .9rem 0;overflow:hidden; height:clamp(10.5rem,34dvh,19rem); border:1px solid rgba(255,255,255,.07);border-bottom:0;border-radius:16px 16px 0 0;background:#06070D} /* Derde keus, en de eerste die klopt. De parkfoto is licht en groen en werd onder een blur een vlek; het gesprek aan de bar had twee onscherpe koppen op de voorgrond, wat in een smal vlak niet leest. Dit is het portret uit /over: staand, donker hout, hij kijkt je aan. Het past bij een bijna zwarte pagina, het houdt zijn vorm als het onscherp is, en in het hoge vlak op een computer valt het precies goed uit. De blur kan daardoor naar 2 pixel en de demping naar 0,66: je ziet een mens achter glas, geen waas. */ .v13 .beeld::before{content:"";position:absolute;inset:0; background:url(/img/over/portret.webp) 50% 16%/cover; filter:blur(2px) brightness(.66);transform:scale(1.04)} /* Onderin iets donkerder, zodat de strook met de vijf lagen niet tegen een lichte plek aan ligt. */ .v13 .beeld::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(3,3,5,.35) 0%,rgba(3,3,5,0) 35%,rgba(3,3,5,.55) 100%)} .v13 .slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.7rem;padding:0 1rem;text-align:center} .v13 .slot i{flex:none;width:3.55rem;height:3.55rem;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .v13 .slot svg{width:1.25rem;height:1.4rem} .v13 .slot span{font-size:.78rem;font-weight:500;color:#fff} .v13 .duurtje{position:absolute;right:.7rem;bottom:.6rem;font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.64rem;font-weight:500;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums} /* ── de vijf lagen, vast aan het beeld ──────────────────────────── Eén strook die aan de onderkant van het beeld vastzit: het is de inhoudsopgave van wat er achter het slot zit, geen los kadertje. */ .v13 .lagen{position:relative;z-index:2;margin:0 .9rem;padding:.65rem .7rem .7rem; background:#0b0d15;border:1px solid rgba(255,255,255,.07);border-top:0;border-radius:0 0 16px 16px} .v13 .lagen .balken{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px} .v13 .lagen .balken i{height:3px;border-radius:2px;background:rgba(255,255,255,.14)} .v13 .lagen .balken i:first-child{background:var(--blue)} .v13 .lagen ol{list-style:none;margin:.42rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.53rem;text-align:center;color:#5a6075} .v13 .lagen li:first-child{color:#8fb0ff;font-weight:600} /* ── de kaart ─────────────────────────────────────────────────────── */ .v13 .sv-vak{position:relative;z-index:2;justify-content:flex-end;padding:0 .9rem .9rem} .v13 .venster{flex:none;background:#0b0d15;border:1px solid rgba(255,255,255,.07);border-radius:18px; box-shadow:0 26px 60px -30px rgba(0,0,0,.85)} .v13 form{padding:.95rem .95rem .85rem;display:grid;gap:.6rem} .v13 .bewijsgroot{margin:0;display:flex;align-items:center;gap:.7rem} .v13 .bewijsgroot b{font:900 2.2rem/1 var(--display);letter-spacing:-.045em;color:#f2f4fa;font-variant-numeric:tabular-nums} .v13 .bewijsgroot span{font-size:.72rem;line-height:1.35;color:#9aa0b4} /* display:flex en niet inline-flex: op een breed scherm wikkelt de zin ernaast niet, en dan schuift het vinkje tegen "4 maanden" aan. Als blok staat hij altijd op zijn eigen regel. */ .v13 .bewijsgroot em{display:flex;align-items:center;gap:.36em;margin-top:.3rem;font-style:normal; font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:.58rem;letter-spacing:.12em; text-transform:uppercase;color:#2dd4bf} .v13 .bewijsgroot em s{text-decoration:none;width:.8rem;height:.8rem;border-radius:50%;background:#2dd4bf;color:#04121a; display:grid;place-items:center;font-size:.48rem;font-weight:700} /* de kop met het verloop van .sys-title op de homepage */ .v13 h1{font:800 clamp(1.1rem,4.4vw,1.28rem)/1.16 var(--display);letter-spacing:-.03em; background:linear-gradient(180deg,#ffffff 10%,#cdd7f0 94%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .v13 h1 em{font-style:normal;-webkit-text-fill-color:#8fb0ff} .v13 .bijna{display:none} /* de velden op donker */ .v13 .inp{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#f2f4fa} .v13 .inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.28)} .v13 .zweef .zw label{color:#6f7689} .v13 .zweef .inp:focus~label,.v13 .zweef .inp:not(:placeholder-shown)~label{color:#8fb0ff} /* het pijltje van de landcode is donkergrijs in de basis, en dus onzichtbaar hier */ /* LET OP: hier moet de héle achtergrond staan, niet alleen de kleur en de afbeelding. `.v13 .inp` zet hierboven de korte schrijfwijze `background:`, en die zet herhaling en positie terug op hun beginwaarde. Zet je daarna alleen background-image, dan tegelt het pijltje over het hele veld: dat stond op 22-09 live, als een ruitjespatroon achter +31. */ .v13 .tel select{color:#f2f4fa; background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b92a6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .8em center} /* de knop met het duurchipje, zoals de hero-knop op de homepage */ .v13 .btn-primary::after{opacity:.75;bottom:-6px;height:16px;filter:blur(10px); background:linear-gradient(90deg,rgba(0,82,255,.95),rgba(0,82,255,.85) 55%,rgba(45,212,191,.75))} .v13 .btn-primary:hover{background:#1b63ff} .v13 .duur{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums; font-size:.7rem;font-weight:500;background:rgba(255,255,255,.18);border-radius:6px;padding:.16em .44em} .v13 .fout{color:#ffb4ad;background:rgba(234,57,67,.12);border-color:rgba(234,57,67,.32)} .v13 .consent{color:#8b92a6;font-size:.64rem} .v13 .consent a{color:#8b92a6} /* Een kort scherm haalt het van het beeld af, niet van de kaart: zonder de velden is er niets te doen op deze pagina. */ @media (max-height:700px){ .v13 .beeld{height:clamp(8rem,26dvh,12rem)} .v13 form{padding:.8rem .85rem .8rem;gap:.5rem} .v13 .bewijsgroot b{font-size:1.9rem} } /* ── VARIANT 13 OP EEN COMPUTER ─────────────────────────────────────── Het beeld links met de vijf lagen eronder, het venster rechts, allebei verticaal in het midden, alles binnen dezelfde afgeronde schil. Eén DOM voor telefoon en computer; het raster zet de blokken alleen anders neer. TWEE DINGEN DIE OP 22-09 MIS WAREN 1. De kolommen stonden als `min(44rem,1.05fr)`. Een fr mag niet in min(), dus de hele regel werd weggegooid en het raster verzon zijn eigen kolommen: een smalle strook links en een veel te brede kaart rechts. Nu staan er gewone minmax()-waarden, en die klopt de browser netjes af. 2. Het beeld stond in een rij van 1fr met een minimumhoogte, en rekte daardoor uit tot een staande strook van bijna de hele pagina. Nu heeft het een eigen verhouding (4:5) met een bovengrens in beeldhoogte. ─────────────────────────────────────────────────────────────────── */ @media (min-width:900px){ .v13 .sv-blad{max-width:none;margin:0;padding:12px} .v13 .schil{ display:grid; grid-template-columns:minmax(16rem,28rem) minmax(20rem,29rem); grid-template-rows:auto auto auto; justify-content:center;align-content:center; column-gap:clamp(2rem,4vw,4rem); padding:0 clamp(1.5rem,4vw,4rem) clamp(1.5rem,3vw,3rem); } .v13 .sv-nav{grid-area:1/1/2/3;padding:1.2rem 0 1.5rem} .v13 .sv-merk{font-size:1.5rem} .v13 .sv-pil{font-size:.74rem} /* eigen verhouding, met een bovengrens zodat hij op een laag scherm niet het venster ernaast uit beeld duwt */ .v13 .beeld{grid-area:2/1/3/2;margin:0;height:auto;min-height:0; aspect-ratio:4/5;max-height:min(58dvh,30rem)} .v13 .slot i{width:4.2rem;height:4.2rem} .v13 .slot svg{width:1.5rem;height:1.65rem} .v13 .slot span{font-size:.88rem} .v13 .duurtje{font-size:.72rem;right:.9rem;bottom:.8rem} .v13 .lagen{grid-area:3/1/4/2;margin:0;padding:.8rem .9rem .85rem} .v13 .lagen .balken{gap:6px} .v13 .lagen ol{font-size:.6rem;gap:6px;margin-top:.5rem} .v13 .sv-vak{grid-area:2/2/4/3;align-self:center;padding:0;justify-content:center} .v13 .venster{width:100%;border-radius:20px} .v13 form{padding:1.45rem 1.5rem 1.35rem;gap:.72rem} .v13 .bewijsgroot b{font-size:2.7rem} .v13 .bewijsgroot span{font-size:.78rem} .v13 .bewijsgroot em{font-size:.62rem} .v13 h1{font-size:1.42rem;line-height:1.16} .v13 .consent{font-size:.7rem} .v13 .gloed{bottom:-140px;height:600px} } /* Een laag venster op een computer (een liggend scherm van 800 hoog) mag niet terugvallen op de regels voor een korte telefoon: daar wordt het beeld op een vaste hoogte gezet en hier bepaalt het raster die. */ @media (min-width:900px) and (max-height:760px){ .v13 .beeld{height:auto;min-height:0;max-height:46dvh} .v13 form{padding:1.2rem 1.3rem 1.15rem;gap:.6rem} .v13 .bewijsgroot b{font-size:2.3rem} } /* ══════════════════════════════════════════════════════════════════ VARIANT 14 · Het bewijs onder de knop Uit het variantencanvas (daar 01g). Variant 13 zette het bewijs bovenin de kaart; hier staat het er juist ónder, vlak onder de knop. WAAROM DAAR Bewijs helpt op het moment dat iemand beslist, niet op het moment dat hij begint te lezen. Boven de velden concurreert het met de kop en duwt het de knop naar beneden; onder de knop staat het precies waar de twijfel zit: ik ga dit nu versturen, aan wie eigenlijk? De kop krijgt daardoor zijn volle maat terug, en het eerste wat je ziet is de belofte in plaats van een getal. WAAROM GEEN SLOT MEER Variant 13 zette een hangslot op een vervaagd beeld. Dat werkt als het beeld een speler is. Hier draagt de foto zelf: hij kijkt je aan, in het scherpe beeld, en de pagina vraagt je iets. Een slot op een portret zou een raadsel zijn zonder antwoord. .v12 en .v13 blijven onaangeroerd hierboven staan; wisselen is één klasse in de . ══════════════════════════════════════════════════════════════════ */ .v14{background:#030305;color:#8b92a6} .v14 .sv-blad{background:#030305;color:#f2f4fa;padding:10px 12px 12px} @media (min-width:761px){.v14 .sv-blad{max-width:28rem;box-shadow:none}} .v14 .schil{position:relative;flex:1;min-height:0;display:flex;flex-direction:column; border-radius:22px;overflow:hidden;background:#07080d} .v14 .gloed{position:absolute;left:0;right:0;bottom:-60px;height:440px;z-index:1;pointer-events:none; background:radial-gradient(ellipse 62% 100% at 50% 100%,rgba(0,82,255,.22),rgba(0,82,255,.08) 42%,transparent 72%)} .v14 .scan{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px)} /* ── het beeld ──────────────────────────────────────────────────── Nu een beeld uit de training zelf: 3:34.5 uit NOMAD_vsl_june. Gezocht met Vision over de hele opname: van de 467 gemeten beelden hebben er 171 een dichte mond, en dit is het enige waar de mondhoeken ook omhoog staan. Bij een pratende kop is dat zeldzaam, en het verschil tussen een foto die vriendelijk is en een die midden in een woord zit. Dat is het enige beeld dat klopt met wat er achter de knop zit, en het scheelt de bezoeker een verrassing: wie hij op deze pagina ziet, ziet hij straks ook in de video. Staand uitgesneden op 4:5 (1200 bij 1500) omdat het vlak op de telefoon én op de computer hoger is dan breed, en teruggebracht tot 44 kB. Niet in een kadertje maar vol in de schil, en het lost onderin op in de paginakleur. Een rand om een portret maakt er een pasfoto van. */ /* De foto staat in de stylesheet en wordt dus pas opgehaald als de CSS binnen is. In de van start.html staat er een preload voor; zonder die regel is dit het laatste wat verschijnt, en het is het eerste wat je zou moeten zien. */ .v14 .beeld{position:absolute;left:0;right:0;top:0;height:56%;z-index:0; background:url(/img/start-park-hoog.webp) 50% 20%/cover} .v14 .beeld::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(3,3,5,.5) 0%,rgba(3,3,5,.06) 20%,rgba(3,3,5,.3) 54%,rgba(7,8,13,.9) 86%,#07080d 100%)} .v14 .sv-nav{position:relative;z-index:2;padding:.85rem 1rem} .v14 .sv-merk{color:#fff} .v14 .sv-pil{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:.66rem; border-color:rgba(255,255,255,.28);background:rgba(3,3,5,.42);color:#fff; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .v14 .sv-pil i{color:#8fb0ff} .v14 .sv-vak{position:relative;z-index:2;justify-content:flex-end;padding:0 .9rem .9rem} .v14 .venster{flex:none;background:#0b0d15;border:1px solid rgba(255,255,255,.07);border-radius:18px; box-shadow:0 26px 60px -30px rgba(0,0,0,.9)} .v14 form{padding:1.05rem .95rem .9rem;display:grid;gap:.65rem} /* de kop heeft hier de eerste plaats, dus hij mag een maat groter */ .v14 h1{font:800 clamp(1.3rem,5.6vw,1.62rem)/1.12 var(--display);letter-spacing:-.032em; background:linear-gradient(180deg,#ffffff 10%,#cdd7f0 94%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .v14 h1 em{font-style:normal;-webkit-text-fill-color:#8fb0ff} .v14 .bijna{display:none} .v14 .inp{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#f2f4fa} .v14 .inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.28)} .v14 .zweef .zw label{color:#7c8496} /* de blauwe focusrand van de basis is op bijna zwart te donker om te zien */ .v14 :focus-visible{outline:2px solid #8fb0ff;outline-offset:2px} .v14 .zweef .inp:focus~label,.v14 .zweef .inp:not(:placeholder-shown)~label{color:#8fb0ff} /* de hele achtergrond in één regel: .inp zet hierboven de korte schrijfwijze, en dan tegelt een los background-image over het veld */ .v14 .tel select{color:#f2f4fa; background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b92a6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .8em center} .v14 .btn-primary::after{opacity:.75;bottom:-6px;height:16px;filter:blur(10px); background:linear-gradient(90deg,rgba(0,82,255,.95),rgba(0,82,255,.85) 55%,rgba(45,212,191,.75))} .v14 .btn-primary:hover{background:#1b63ff} .v14 .duur{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums; font-size:.7rem;font-weight:500;background:rgba(255,255,255,.18);border-radius:6px;padding:.16em .44em} /* ── het bewijs, onder de knop ──────────────────────────────────── Eén rij: het getal, wat het is, en de gezichten van wie het ook deed. Op een eigen vlak, zodat het losstaat van de knop en niet meeleest als kleine lettertjes eronder. */ .v14 .bewijsrij{display:flex;align-items:center;gap:.7rem;margin:.15rem 0 0; padding:.62rem .7rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:12px} .v14 .bewijsrij b{flex:none;font:900 1.72rem/1 var(--display);letter-spacing:-.045em;color:#f2f4fa; font-variant-numeric:tabular-nums} .v14 .bewijsrij .wat{flex:1;min-width:0;font-size:.74rem;line-height:1.32;color:#9aa0b4} .v14 .bewijsrij .wat em{display:flex;align-items:center;gap:.34em;margin-top:.22rem;font-style:normal; font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:.6rem;letter-spacing:.08em; text-transform:uppercase;color:#2dd4bf} .v14 .bewijsrij .wat em s{text-decoration:none;flex:none;width:.78rem;height:.78rem;border-radius:50%; background:#2dd4bf;color:#04121a;display:grid;place-items:center;font-size:.46rem;font-weight:700} .v14 .koppen{flex:none;display:flex} .v14 .koppen img{width:1.65rem;height:1.65rem;border-radius:50%;object-fit:cover;object-position:78% 30%; border:2px solid #0e1119;background:#0e1119} .v14 .koppen img+img{margin-left:-.5rem} .v14 .fout{color:#ffb4ad;background:rgba(234,57,67,.12);border-color:rgba(234,57,67,.32)} .v14 .consent{color:#8b92a6;font-size:.64rem;margin-top:.35rem} .v14 .consent a{color:#8b92a6} @media (max-height:700px){ .v14 .beeld{height:46%} .v14 form{padding:.85rem .85rem .8rem;gap:.52rem} .v14 .bewijsrij b{font-size:1.5rem} } /* ── VARIANT 14 OP EEN COMPUTER ─────────────────────────────────────── De foto links op volle hoogte, het venster rechts, verticaal in het midden. Hetzelfde beeldelement als op de telefoon: alleen de kant waar het oplost verandert, van onder naar rechts. ─────────────────────────────────────────────────────────────────── */ @media (min-width:900px){ .v14 .sv-blad{max-width:none;margin:0;padding:12px} /* Op een heel breed scherm loopt een foto van 52% en een kaart in de rest uit elkaar: twee eilanden met leegte ertussen. De schil houdt daarom een maximum aan en staat gecentreerd, net als op de hoofdsite. */ .v14 .schil{width:100%;max-width:96rem;margin:0 auto} .v14 .beeld{inset:0 auto 0 0;width:min(52%,40rem);height:auto;background-position:50% 50%} .v14 .beeld::after{background:linear-gradient(90deg,rgba(3,3,5,.42) 0%,rgba(3,3,5,0) 30%,rgba(7,8,13,.55) 62%,rgba(7,8,13,.94) 88%,#07080d 100%)} .v14 .sv-nav{padding:1.3rem 2rem} .v14 .sv-merk{font-size:1.5rem} .v14 .sv-pil{font-size:.74rem} /* padding-left op nul: de eerste kolom rekent dan met dezelfde breedte als de foto (52% van de schil), en de kaart staat precies naast het beeld in plaats van er een stukje overheen. */ .v14 .sv-vak{justify-content:center;padding:0 clamp(1.5rem,4vw,4rem) 2rem 0; display:grid;grid-template-columns:min(52%,40rem) minmax(0,1fr);align-items:center} .v14 .venster{grid-column:2;justify-self:center;width:min(29rem,100%);border-radius:20px} .v14 form{padding:1.5rem 1.6rem 1.4rem;gap:.8rem} .v14 h1{font-size:1.72rem;line-height:1.1} .v14 .bewijsrij{padding:.72rem .8rem} .v14 .bewijsrij b{font-size:2rem} .v14 .bewijsrij .wat{font-size:.78rem} .v14 .bewijsrij .wat em{font-size:.64rem} .v14 .koppen img{width:1.9rem;height:1.9rem} .v14 .consent{font-size:.7rem} .v14 .gloed{bottom:-140px;height:600px} } /* Een laag liggend venster, bijvoorbeeld 1280 bij 620: de kaart is dan hoger dan de schil, en omdat die overflow:hidden heeft valt de consentregel er onderuit. Alles een maat kleiner in plaats van afgekapt. */ @media (min-width:900px) and (max-height:820px){ .v14 form{padding:1.15rem 1.3rem 1.05rem;gap:.6rem} .v14 h1{font-size:1.42rem} .v14 .bewijsrij{padding:.6rem .7rem} .v14 .bewijsrij b{font-size:1.72rem} .v14 .koppen img{width:1.7rem;height:1.7rem} }