/* ========================================================================= Vesmo huisstijl over Tumar heen DE WAARHEID STAAT IN BLOK 1 EN 2 HIERONDER, niet in dit kopje en niet in de projectdocumentatie. Wat er nu draait, sinds het herontwerp van 30-08-2026: accent #251cff inkt #0a0a0a papier #f5f4ef wit #ffffff lijn #d9d8d2 grijze tekst #6b6b6b letter Instrument Sans, variabel 400 tot 700, voor koppen en tekst mono IBM Plex Mono, alleen nummers, labels en metadata regel 1.1 voor grote koppen, 1.4 voor tekst hoeken 8px, knoppen zijn een pil Zes kleuren, geen zevende. Beide families staan zelf gehost in ../fonts/. TOT 30-08-2026 STOND HIER IETS ANDERS, en dat spookt nog rond in oudere documenten: accent #030FFC, General Sans, Lato en Fragment Mono, hoeken van 20px op beeld en 70px op de knop. Kom je die waarden ergens tegen, dan lees je iets van voor het herontwerp. De opzet naar het voorbeeld van velvele.studio is gebleven; de tokens zijn vervangen. Tumar zelf staat op Lato/Oswald/Montserrat, gewicht 700, hoofdletters met 3px letterafstand en donkere secties op #111517. Vrijwel alles hieronder draait een van die keuzes terug. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Letters, zelf gehost. Geen aanroep naar Google of Fontshare vanaf de bezoeker, scheelt een externe verbinding en een cookiebanner-discussie. HERONTWERP 30-08-2026: twee families in plaats van drie. Instrument Sans als variabele letter (een bestand voor het hele gewicht 400 tot 700) voor koppen, lopende tekst en knoppen; IBM Plex Mono uitsluitend voor nummers, labels en metadata. Lato, General Sans en Fragment Mono zijn eruit. Lato kwam van Tumar zelf, uit includes/style.php. Dat verzoek wordt afgemeld in functions.php, anders haalt elke bezoeker nog steeds negen gewichten bij Google op die nergens meer gebruikt worden. ------------------------------------------------------------------------- */ @font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------------------- 2. Het systeem. Zes kleuren, twee letterfamilies, een vaste ruimtemaat. HERONTWERP 30-08-2026. Hiervoor stonden hier vier dienstkleuren met elk drie varianten, plus Lato, General Sans en Fragment Mono naast elkaar. Die suggereerden een systeem zonder er een te zijn: rood, geel en groen droegen geen betekenis die een bezoeker kon aflezen. Ze zijn eruit. Wat ervoor in de plaats komt is een merkteken in plaats van een palet: een klein blauw vierkant, overal hetzelfde, naast sectienummers, voor links en als hover-indicator. Een eigen gezicht zonder een nieuw logo. GEEN ZEVENDE KLEUR ERBIJ. Elke waarde die hieronder niet staat, hoort er niet te zijn. De enige uitzondering is --vs-vusk, en die is van de klant. ------------------------------------------------------------------------- */ :root { --bg-light: #ffffff; /* was #f5f5f5 */ --bg-dark: #ffffff; /* was #111517, dit thema kent geen donkere secties */ /* De zes. */ --vs-inkt: #0a0a0a; /* inkt: sectievlak en voettekst */ --vs-papier: #f5f4ef; /* gebroken wit: hero en werk */ --vs-wit: #ffffff; --vs-accent: #251cff; /* Vesmo-blauw */ --vs-line: #d9d8d2; /* elke scheidingslijn */ /* Nagemeten op 30-08-2026: #707070 haalt op het gebroken wit 4,49:1 en blijft daarmee net onder de 4,5 die WCAG AA voor lopende tekst vraagt. Vier tinten donkerder is met het blote oog hetzelfde grijs en haalt 4,8. */ --vs-tekst: #6b6b6b; /* elke grijze tekst */ /* Afgeleiden, en niet meer dan nodig. --vs-ink is de zwarte letter zelf; die is inkt en niet puur zwart, zodat er maar een donkere waarde bestaat. */ --vs-ink: var(--vs-inkt); --vs-band: var(--vs-papier); --vs-muted: var(--vs-tekst); --vs-soft: var(--vs-line); --vs-hair: var(--vs-line); --vs-kop2: var(--vs-tekst); --vs-rand: var(--vs-line); --vs-vusk: #31916f; /* klantkleur, uit de live css van vusk.nl */ /* Op inkt. Wit met een dekking is hier geen zevende kleur maar dezelfde letter met minder nadruk; dat blijft binnen het systeem. */ --vs-ink-zacht: rgba(255, 255, 255, .62); --vs-mono-inkt: rgba(255, 255, 255, .49); /* was .45 = #787878 op inkt, 4,48:1 en de enige Lighthouse-fout (06-09-2026); .49 = #828282, 5,07:1 */ --vs-hair-inkt: rgba(255, 255, 255, .18); /* Van .16 naar .22 op 02-09-2026: op het volle blauw waren de lijnen nauwelijks te zien. --vs-raster-inkt is de tegenhanger in de voettekst, zodat het raster over de naad doorloopt en de twee vlakken als één geheel lezen. Lager dan het blauw, want dezelfde dekking op #0a0a0a leest een stuk harder dan op #251cff. */ --vs-raster-blauw: rgba(255, 255, 255, .22); --vs-raster-inkt: rgba(255, 255, 255, .12); /* Twee families, drie gewichten. Instrument Sans doet koppen, lopende tekst en de knoppen; IBM Plex Mono uitsluitend nummers, labels en metadata. Het invullen gebeurt in blok 1; hier staat alleen de taakverdeling. */ --vs-kop: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --vs-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --vs-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --vs-font: var(--vs-body); --vs-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Vorm. Beeld hooguit 12px; kaarten en dienstregels krijgen niets, want een afgeronde kaart is precies de vorm waar dit ontwerp vanaf wil. Alleen knoppen zijn een pil. */ --vs-radius: 8px; --vs-radius-pill: 9999px; /* Ruimte. De kantlijn schaalt mee in blok 2b; dit is de desktopwaarde. */ --vs-kant: 56px; --vs-breed: 1380px; --vs-sectie: 180px; /* verticale sectieafstand; 140 tot 07-09-2026 */ /* LUCHT (07-09-2026). Daan vond de site te druk: tekst te dicht op elkaar. Gemeten: regelafstand 1,45 overal, kolommen van 620px (78 tekens per regel), alinea-afstand 20px, lijsten zonder ruimte, 5 tot 9 blauwe blokjes per scherm. Deze twee tokens dragen de lopende tekst; de sectiematen staan per blok in vesmo-paginas.css en vesmo-home.css. Zie ONDERZOEK-2026-09-07-lucht.md in de projectmap. */ --vs-regel: 1.65; /* regelafstand lopende tekst; lijsten 1.6, mono 1.6 */ --vs-alinea: 28px; /* afstand tussen alinea's; was 20 */ --vs-kop-h: 84px; /* hoogte van de vaste kopbalk */ /* Beweging. Rustig: alles tussen 400 en 600 ms, een curve. */ --vs-ease: cubic-bezier(.22, .61, .36, 1); --vs-ease-in: cubic-bezier(.22, .61, .36, 1); --vs-duur: .5s; --vs-schaduw: 0 30px 80px -40px rgba(0, 0, 0, .28); } /* Het thema zet op zijn eigen klassen puur zwart. Dat is een zevende donkere waarde die niemand kan zien maar die wel in elke scan opduikt, dus hij gaat naar de inkt-token. EN NADRUKKELIJK NIET `.text-color-black a`. Die stond hier even, en hij zette élke verwijzing binnen zo'n WPBakery-omhulsel op inkt. Specificiteit 0,1,2, dus hij won van `.vs-hknop--gevuld` (0,1,0) en daarmee werd de tekst op de zwarte knop in de hero inkt op inkt: contrast 1,0. Een regel die alleen een scan schoner moet maken, hoort nooit een knop te kunnen slopen. */ html .text-color-black, html .tu-global-sec.text-color-black { color: var(--vs-ink); } /* --- 2b. De kantlijn en het sectieritme per breedte ----------------------- */ @media only screen and (max-width: 1279px) { :root { --vs-kant: 32px; --vs-sectie: 140px; } } @media only screen and (max-width: 767px) { :root { --vs-kant: 24px; --vs-sectie: 104px; --vs-kop-h: 68px; } } /* Tumar zet de basis op wit-op-zwart (body{background:#000;color:#fff}). Alles wat geen eigen kleurklasse heeft, zoals de voettekst, erft dat. Dit is dus geen detail maar de kern: omdraaien naar zwart-op-wit. */ body { background-color: #ffffff; color: var(--vs-ink); } /* Alles wat in een voorheen donkere sectie stond, staat nu op wit en moet dus zwart worden in plaats van wit of lichtgrijs. */ .section-bg-dark .text-color-white, .content-bg-dark .text-color-white, .text-bg-dark .text-color-white, .section-bg-dark .text-color-white:before, .content-bg-dark .text-color-white:before { color: var(--vs-ink) !important; } .text-color-dadada, .text-color-dadada:before, .text-color-e4e4e4, .text-color-e4e4e4:before, .text-color-bbbbbb, .text-color-bbbbbb:before, .text-color-b0b0b0, .text-color-b0b0b0:before, .text-color-8a8a8a, .text-color-8a8a8a:before, .text-color-979797, .text-color-979797:before, .text-color-9b9b9b, .text-color-9b9b9b:before, .text-color-969696, .text-color-969696:before, .text-color-888888, .text-color-888888:before, .text-color-838383, .text-color-838383:before, .text-color-6d6d6d, .text-color-6d6d6d:before, .text-color-6a6a6a, .text-color-6a6a6a:before { color: var(--vs-tekst) !important; } /* Lijnen die op zwart waren getekend. */ .section-bg-dark .anim-line-top, .section-bg-dark .anim-line-bottom, .content-bg-dark .anim-line-top, .content-bg-dark .anim-line-bottom, .tu-global-sec .anim-line-top, .tu-global-sec .anim-line-bottom { background-color: var(--vs-line); } .section-bg-dark .list__item:before, .content-bg-dark .list__item:before { color: var(--vs-ink); } /* Omlijnde letters: op wit is een witte omlijning onzichtbaar. */ .text-stroke-white { -webkit-text-stroke-color: rgba(0, 0, 0, .12); } .text-stroke-black { -webkit-text-stroke-color: rgba(0, 0, 0, .12); } /* De kop van elke pagina is bij Tumar een donker blok. Bij Velvele is alles wit, dus ook deze. */ section#up.section-bg-dark { background-color: #fff; } /* Alleen de kale kop zonder foto. In de foto- en slider-kop staat de tekst op een donkere afbeelding en moet hij juist wit blijven. */ section#up.section-bg-dark > .page-head-footer-overlay-fix > .padding-top-bottom-150 h2, section#up.section-bg-dark > .page-head-footer-overlay-fix > .padding-top-bottom-150 h2 span { color: var(--vs-ink); } /* ------------------------------------------------------------------------- 3. Letters. Tumar zet Lato/Oswald/Montserrat op tientallen plekken los neer, vandaar de brede selector in plaats van alleen body. ------------------------------------------------------------------------- */ body, input, textarea, select, button, p, li, a, span, div, h1, h2, h3, h4, h5, h6, .tu-text-logo, .nav-btn__inner, .headline-xxxxl, .headline-xxxl, .headline-xxl, .headline-xl, .headline-l, .headline-m, .headline-s, .headline-xs, .headline-xxs, .headline-xxxs, .headline-xxxxs, .subhead-xxl, .subhead-xl, .subhead-l, .subhead-m, .subhead-s, .subhead-xs, .subhead-xxs, .subhead-xxl p, .subhead-xl p, .subhead-l p, .subhead-m p, .subhead-s p, .subhead-xs p, .subhead-xxs p, .body-text-xl, .body-text-l, .body-text-m, .body-text-s, .body-text-xs, .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select, .blog-widget ul li, .widget_tag_cloud a, .border-btn__inner, .skew-btn__content { font-family: var(--vs-font); } /* Koppen: gewicht 500 in plaats van 700, en geen hoofdletters of letterafstand. */ .headline-xxxxl, .headline-xxxl, .headline-xxl, .headline-xl, .headline-l, .headline-m, .headline-s, .headline-xs, .headline-xxs, .headline-xxxs, .headline-xxxxs { font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; } .headline-uppercase, .subhead-uppercase { letter-spacing: 0 !important; text-transform: none !important; } .tu-text-logo { text-transform: none; font-weight: 600; letter-spacing: -0.01em; } /* De kleinste kop is bij Tumar 14px vet met hoofdletters; als kopje boven een alinea is dat te klein zodra de hoofdletters weg zijn. */ .headline-xxxxs { font-size: 18px; } /* Lopende tekst: Tumar staat op regelhoogte 1.9, Velvele op 1.4. */ .body-text-xl, .body-text-l, .body-text-m, .body-text-s, .body-text-xs { font-weight: 400; /* var(--vs-regel) sinds 07-09-2026, was 1.45. Dit is de regelafstand die elke alinea en elk lijstitem zonder klasse erft (blok 21 hieronder), dus dit ene getal bepaalt de lucht in vrijwel alle lopende tekst. */ line-height: var(--vs-regel); } .subhead-xxl, .subhead-xl, .subhead-l, .subhead-m, .subhead-s, .subhead-xs, .subhead-xxs, .subhead-xxl p, .subhead-xl p, .subhead-l p, .subhead-m p, .subhead-s p, .subhead-xs p, .subhead-xxs p { font-weight: 400; line-height: 1.4; } /* Nummering boven de dienstenblokken: bij Velvele is dat het mono-lettertype. */ .tumar-feature .subhead-xs, .subhead-xs.vs-num, .vs-num { font-family: var(--vs-mono); letter-spacing: 0; } /* ------------------------------------------------------------------------- 4. Het accent. Dit is wat de site van Velvele draagt: koppen zijn zwart, met precies een woordgroep in het blauw. ------------------------------------------------------------------------- */ .vs-accent, .vs-accent p, .vs-accent span { color: var(--vs-accent) !important; } /* Ook als de omliggende kop een text-color-klasse met !important draagt. */ .text-color-white .vs-accent, .text-color-black .vs-accent, h1 .vs-accent, h2 .vs-accent, h3 .vs-accent, h4 .vs-accent { color: var(--vs-accent) !important; } a:hover .vs-accent { color: var(--vs-accent) !important; } /* ------------------------------------------------------------------------- 5. De knop. Bij Tumar een rechthoek met dunne lijnen en 7px letterafstand, bij Velvele een blauwe pil. ------------------------------------------------------------------------- */ .border-btn { border-radius: var(--vs-radius-pill); background-color: var(--vs-accent); overflow: hidden; transition: .35s cubic-bezier(.17, .85, .438, .99); } .border-btn__inner { padding: 17px 34px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff !important; } .border-btn.black .border-btn__inner { color: #fff !important; } /* De vier lijnstukjes waaruit Tumar zijn kader opbouwt, plus de hoekjes. */ .border-btn:before, .border-btn:after, .border-btn__inner:before, .border-btn__inner:after, .border-btn__lines-1, .border-btn__lines-2 { display: none !important; } .border-btn:hover { background-color: #0009c9; } .skew-btn__content { letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 500; } /* ------------------------------------------------------------------------- 6. Vorm. Hoeken van 20px op beeld en kaarten, zoals op Velvele. Het logo en de iconen blijven er buiten. ------------------------------------------------------------------------- */ .wpb-content-wrapper img, .wpb-content-wrapper video, .grid-margin-box .hidden-box, .tu-global-port-sec .hidden-box { border-radius: var(--vs-radius); } .header-logo__img, .vs-card__media img, .vs-card__blank { border-radius: 0; } .vs-card__media img, .vs-card__blank { border-radius: inherit; } /* ------------------------------------------------------------------------- 7. Verwijzingen en de lopende tekstband. ------------------------------------------------------------------------- */ .wpb-content-wrapper a:not(.border-btn):not(.skew-btn):not(.vs-card__link):hover { color: var(--vs-accent); } /* De tekstband van Tumar staat standaard op hoofdletters met veel afstand. */ .text-slider-box .headline-uppercase, .wr-text-slider .headline-uppercase { text-transform: none !important; letter-spacing: 0 !important; } /* ------------------------------------------------------------------------- 8. Formulier. Tumar tekent alleen een onderlijn; die stond op wit. ------------------------------------------------------------------------- */ .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { font-family: var(--vs-font); font-size: 16px; letter-spacing: 0; color: var(--vs-ink); border-bottom-color: var(--vs-line); } .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { border-bottom-color: var(--vs-accent); outline: 0; } .wpcf7-form input[type="submit"] { width: auto; border: 0; border-radius: var(--vs-radius-pill); padding: 17px 34px; background: var(--vs-accent); color: #fff; font-weight: 500; } /* ------------------------------------------------------------------------- 9. Menu. Velvele houdt het klein en zonder hoofdletters. ------------------------------------------------------------------------- */ .nav-btn__inner { text-transform: none; letter-spacing: 0; font-weight: 500; } /* ------------------------------------------------------------------------- 10. Kleinere schermen. ------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .border-btn__inner { padding: 15px 28px; font-size: 15px; } } /* ------------------------------------------------------------------------- 11. Twee restanten van de oude voettekst die elders nog werk doen. Dit blok ging over de voettekst van het moederthema: kleur zwart in plaats van wit, .footer-nav-btn kleiner, .copyright in mono. Sinds 27-08-2026 draagt tumar-child/footer.php de voettekst en bestaan die klassen op deze site niet meer, dus die regels zijn weg. Wat hier staat blijft omdat het buiten de voettekst wordt gebruikt: .line-btn in vc_templates/wr_vc_con_info.php en in taxonomy-portfolio_category.php, en de randen op de tekstband in de secties. ------------------------------------------------------------------------- */ .line-btn { font-family: var(--vs-font); letter-spacing: 0; text-transform: none; } /* De lijnen boven en onder de tekstband stonden op wit. */ .inner-top-border:before, .inner-bottom-border:after, .tu-global-sec .half-bg-borders-fix-light:before { background-color: var(--vs-line); } /* ------------------------------------------------------------------------- 12. De kopbalk. WEG PER 30-08-2026, tweede herontwerp, en dat is de bedoeling. Hier stond de effen witte balk van 84px met een zichtbaar menu en een blauwe knop: .fixed-header met achtergrond en hoogte, .vs-kop__binnen als flexrij, .vs-kop .header-logo en .vs-kop .menu-icon om de mix-blend-mode van het moederthema te neutraliseren, .vs-kop__knop, en .main-content met een padding-top van --vs-kop-h. Daan wil de originele Tumar-kopbalk terug: geen balk maar twee losse vaste elementen, .header-logo linksboven en .menu-icon rechtsboven, allebei op position:fixed met mix-blend-mode:difference. Dat gedrag staat volledig in het moederthema (includes/css/style.css r. 1692-1698, 1704-1717, 1749-1762), dus terugdraaien is wegnemen en niet herbouwen. Het child overschrijft template-parts/main-header.php niet meer, waardoor get_template_part vanzelf die van het moederthema pakt. TWEE GEVOLGEN, allebei voorgelegd en bevestigd. Het woordmerk kleurt mee met wat eronder doorschuift, dus over de hero-video wisselt het per frame. En boven het blauwe slotvlak wordt het geel: wit min #251CFF is #DAE300. De ontsnapping daarvoor is de pagina-meta rnr_tumar_page_header_logo_style_..._opt op st2, die in het moederthema de klasse color-mix-blend-normal zet. De zichtbare verwijzingen en de knop "Plan een gesprek" zijn hiermee uit de balk verdwenen; het schermvullende menu doet al het navigeren. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 12b. Geen meeschuivende elementen op een smal scherm. DIT IS DE MOBIELE OVERLAPFOUT, en hij is subtieler dan hij lijkt. Sticky gaat in dit thema via data-scroll-sticky, en dat is een attribuut in de markup: LocomotiveScroll leest het bij init en zet er een inline transform op. Een media-query die position:sticky weghaalt doet daar niets aan, want er stond nooit position:sticky. Het element blijft dus meeschuiven, en zodra de twee kolommen onder de breekpunt op elkaar stapelen schuift het over zijn buur heen. Gemeten op 30-08-2026: het stappenlabel op Over ons stond op translateY(1291) en eindigde 1257px onder de lijst die eronder hoorde. Een inline stijl verslaan kan alleen met !important; dat is hier geen luiheid maar de enige route. De regel staat bewust op één plek met alle drie de elementen erin, zodat een nieuw sticky blok niet vergeten wordt. Onder 1024px hoort er sowieso niets mee te schuiven: dat is punt 4 en punt 11 van de ontwerpbrief van 30-08. ------------------------------------------------------------------------- */ @media only screen and (max-width: 1023px) { .vs-stappen__zij, .vs-slot__kop, .vs-wwd__zij { transform: none !important; } } /* ------------------------------------------------------------------------- 13. Het accent op de foto-kop. var(--vs-accent) is prachtig op wit maar haalt op een donkere foto met zwarte waas nog geen 2,5:1 aan contrast. Alleen binnen die kop daarom een lichtere tint van dezelfde kleur; op de rest van de pagina blijft het merkblauw staan. DIT IS DE ENIGE PLEK WAAR #6b64ff NOG STAAT, en dat is per 02-09-2026 bewust. Die waarde was een token, --vs-blauw-inkt, en werd op zeventien plekken gebruikt: het accent op alles wat op inkt staat. Daan heeft die tint die dag afgeschaft omdat hij paars leest naast het merkblauw van het slotvlak; alles is naar var(--vs-accent) gegaan. Het palet is daarmee terug op zes kleuren. Hier bleef hij staan omdat dit een ander geval is: geen blokje of lijntje op vlakke inkt maar TEKST op een foto. Het is een letterlijke waarde en geen token, want een token in :root is een uitspraak over het systeem en dit is een uitzondering van één regel. Ga je hier ooit weer aan rekenen: op inkt #0a0a0a haalt #6b64ff 4,61:1 en #251cff 2,54:1. Op een foto met waas ligt het lager. ------------------------------------------------------------------------- */ #up .flex-min-height-100vh .vs-accent, #up .flex-min-height-100vh .vs-accent span { color: #6b64ff !important; } /* ------------------------------------------------------------------------- 14. Wat er nog wit op wit stond. Het thema tekent standaard voor een donkere achtergrond: knoppen, opsom- mingstekens en scheidingslijnen zijn wit. Zolang de pagina zwart was viel dat niet op. Nu de pagina wit is, waren ze onzichtbaar. Hieronder alles wat uit die controle kwam, met uitzondering van de foto-kop en het uitklapmenu, want die zijn wel donker gebleven. ------------------------------------------------------------------------- */ /* De tweede knopvorm van het thema. Die stond op witte letters met 4px letterafstand en een witte pijl, dus op wit was hij helemaal weg. Nu dezelfde blauwe pil als de knop in de kop. */ .skew-btn { display: inline-block; padding: 15px 28px; border-radius: var(--vs-radius-pill); background-color: var(--vs-accent); transition: .35s cubic-bezier(.17, .85, .438, .99); } .skew-btn:hover { background-color: #0009c9; } .skew-btn__content, .skew-btn.black .skew-btn__content { margin-right: 12px; font-family: var(--vs-font); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff !important; } .skew-btn__arrow-box { width: 34px; } /* De pijl is met witte lijntjes getekend en staat nu op blauw, dus die klopt. */ .skew-btn.black .skew-btn__arrow:before { border-top-color: #fff; border-right-color: #fff; } .skew-btn.black .skew-btn__arrow:after { background-color: #fff; } /* Opsommingstekens in de lijsten. */ .main-content .list__item:before { color: var(--vs-ink); } /* Onderstreepte verwijzing, bijvoorbeeld het mailadres in de voettekst. */ .line-btn:before { background-color: var(--vs-line); } .line-btn:after { background-color: var(--vs-accent); } /* Scheidingslijnen boven en onder secties. */ .main-content .line-top, .main-content .line-bottom, .main-content .anim-line-bottom, .main-content .anim-line-top { background-color: var(--vs-line); } /* ------------------------------------------------------------------------- 15. De slider-kop. Drie slides met een foto, een waas eroverheen en witte tekst. De pijlen en bolletjes van Swiper zijn wit; die staan op de foto, dus die kloppen. Wat wel moest: de tekstblokken luchtiger en de knop niet tegen de onderrand. ------------------------------------------------------------------------- */ .js-home-slider .max-width-600 { max-width: 780px; } .js-home-slider h2 { letter-spacing: -0.01em; } /* Het thema zet de bolletjes rechts in beeld; op smalle schermen liepen ze over de knop heen. */ @media only screen and (max-width: 767px) { .js-home-slider .vertical-pagination { display: none; } } /* ------------------------------------------------------------------------- 16. Hover naar wit. Het thema laat verwijzingen bij hover naar wit lopen, omdat ze op zwart stonden. Op de contactgegevens onderaan betekende dat: link verdwijnt zodra je hem aanwijst. Nu naar het merkblauw. ------------------------------------------------------------------------- */ .main-content .text-hover-to-white:hover { color: var(--vs-accent) !important; } /* ------------------------------------------------------------------------- 17. De afwerking van Velvele. Drie dingen die op hun site het verschil maken en die met opmaak alleen te halen zijn: beeld dat lijkt te zweven, haarlijnen tussen de secties, en veel meer lucht dan Tumar standaard geeft. ------------------------------------------------------------------------- */ /* Beeld in de inhoud krijgt dezelfde vier over elkaar gelegde schaduwen als de kaarten in de werk-band. Letterlijk de waarden van velvele.studio. */ .wpb-content-wrapper .js-skills-slider .swiper-slide img, .wpb-content-wrapper .tu-global-port-sec img { box-shadow: 0 0.8px 2.4px -0.63px rgba(0, 0, 0, .075), 0 2.4px 7.2px -1.25px rgba(0, 0, 0, .075), 0 6.4px 19.1px -1.88px rgba(0, 0, 0, .075), 0 20px 60px -2.5px rgba(0, 0, 0, .075); } /* De uitspraak in grote regels met een haarlijn eronder. Tumar tekent die lijn zwart; bij Velvele is elke scheiding een haarlijn van 15 procent. */ .line-scrollanim-activate .anim-line-bottom, .line-scrollanim-activate .anim-line-top { background-color: var(--vs-line); } .line-scrollanim-activate p { font-weight: 500; letter-spacing: -0.01em; padding-top: 24px; padding-bottom: 24px; } /* Meer lucht. Tumar rekent in stappen van 30px en komt op een dichte pagina uit; Velvele zit op 80 tot 184px tussen de secties. */ .tu-global-sec .padding-top-120 { padding-top: 150px; } .tu-global-sec .padding-bottom-120 { padding-bottom: 150px; } @media only screen and (max-width: 991px) { .tu-global-sec .padding-top-120 { padding-top: 80px; } .tu-global-sec .padding-bottom-120 { padding-bottom: 80px; } } /* De grote sectietitel die Tumar half buiten beeld zet ("Werk"). Op wit was dat een zware zwarte omlijning; nu net zo licht als de haarlijnen. */ .big-head { opacity: .9; } /* De contactgegevens onderaan stonden strak tegen de knop aan. */ .wr-con-info-top-line, .main-content .anim-line-top { background-color: var(--vs-line); } /* ------------------------------------------------------------------------- 18. Twee onderdelen die nog op de oude letter stonden. ------------------------------------------------------------------------- */ /* De grote sectietitel achter de werk-band ("Werk"). Stond op Lato 900, hoofdletters en 3px letterafstand, 230px groot. Nu General Sans, gewicht 500, geen hoofdletters, en met de haarlijn-omlijning uit blok 2 wordt het een groot lichtgrijs woord achter de inhoud in plaats van een zwarte muur. */ .big-head { font-family: var(--vs-font); font-weight: 500; letter-spacing: -0.02em; text-transform: none; } /* De regels die horizontaal meebewegen beginnen bij Tumar een halve schermbreedte naar links. Op een pagina met zo veel wit valt dat op als een halve zin die buiten beeld hangt. Een kleinere aanloop houdt de beweging maar laat de zin leesbaar. */ .has-scroll-smooth .horizontal-scroll-text-offset { margin-left: 0; } /* ------------------------------------------------------------------------- 19. Het aanhalingsteken bij een citaat. Tumar zet daar een wit icoon op 40 procent dekking; op wit zag je er niets van. Komt op de pagina's Over ons en Contact voor. ------------------------------------------------------------------------- */ .quote:after { color: var(--vs-ink); opacity: .25; } /* ------------------------------------------------------------------------- 20. Tekst op de foto-kop en op de slides. Deze koppen dragen geen eigen kleurklasse; ze erfden van body. Zolang het thema op wit-op-zwart stond ging dat goed. Sinds body zwart-op-wit is, stond de kop van de slider zwart op een donkere foto en was hij nauwelijks te lezen. Alles binnen de foto-kop moet dus juist wit blijven. ------------------------------------------------------------------------- */ #up .flex-min-height-100vh h2, #up .flex-min-height-100vh h2 span, #up .flex-min-height-100vh .subhead-xxl, #up .flex-min-height-100vh .subhead-xl, #up .flex-min-height-100vh .subhead-l, #up .flex-min-height-100vh .subhead-m, #up .flex-min-height-100vh .subhead-s, #up .flex-min-height-100vh .subhead-xs, #up .flex-min-height-100vh p { color: #fff; } /* Het accent blijft de lichtere tint uit blok 13, die wint van de regel hierboven. */ /* ------------------------------------------------------------------------- 21. Alinea's binnen een tekstblok. Het thema zet de maat op de omhullende div (.body-text-m en zo), maar de alinea daarbinnen is een gewone

zonder maat. Die valt dus terug op de sectie, en elke sectie staat op .body-text-s. Gevolg: elke alinea kwam op dezelfde kleine maat uit, hoe groot je het blok ook instelde. ------------------------------------------------------------------------- */ .body-text-xl p:not([class]), .body-text-l p:not([class]), .body-text-m p:not([class]), .body-text-s p:not([class]), .body-text-xs p:not([class]), .body-text-xl li:not([class]), .body-text-l li:not([class]), .body-text-m li:not([class]), .body-text-s li:not([class]), .body-text-xs li:not([class]) { font-size: inherit; line-height: inherit; font-weight: inherit; } /* De alinea onder een gekleurde dienstenbalk en onder de gecentreerde belofte mag wat groter dan de standaard van het thema. */ .vs-lead p:not([class]), .tu-global-sec .body-text-m p:not([class]) { font-size: 17px; } /* ------------------------------------------------------------------------- 22. De gecentreerde slotsectie. Kop links, alinea er strak tegenaan, knop ergens rechts. Rechtgetrokken tot alles onder elkaar en gecentreerd. Wordt gebruikt door wr_vc_button met class="vs-center", onder meer op de case-pagina's. De voettekst-helft van dit blok is op 27-08-2026 weg: die ging over de voettekst van het moederthema (bolletjes uit het menu, labels in mono, de haarlijn erboven, de container op 90px) en sinds tumar-child/footer.php bestaan die klassen op deze site niet meer. Blok 24 en 25 zijn om dezelfde reden helemaal verdwenen: 24 zette de parallax van data-scroll-speed="-4" uit, en dat attribuut staat nergens meer; 25 trok "footer > .container" naar de kantlijn, en die container bestaat niet meer. Zie blok 38. ------------------------------------------------------------------------- */ /* Alles in de slotsectie onder elkaar en gecentreerd. */ .vs-center { text-align: center; } .vs-center .border-btn { margin: 0 auto; } /* Lucht tussen de gecentreerde kop, de alinea en de knop. */ .tu-global-sec .text-center.pull-left { float: none; width: 100%; } .tu-global-sec .text-center { margin-top: 24px; } /* ------------------------------------------------------------------------- 23. Uitlijning rechttrekken. Twee dingen stonden scheef ten opzichte van de rest van de pagina. ------------------------------------------------------------------------- */ /* De twee grote regels bewogen horizontaal mee met het scrollen. Locomotive zet die verschuiving als inline transform op het element, dus die begonnen een eind naar binnen in plaats van op de kantlijn. De beweging is aardig, maar niet ten koste van de uitlijning: transform eruit, en de regel mag afbreken in plaats van buiten beeld te lopen. */ .horizontal-scroll-text-offset { transform: none !important; margin-left: 0 !important; white-space: normal; } /* De opsommingen onder "Waar je op kunt rekenen" stonden op 12px met dertig pixels tussen het bolletje en de tekst. Iets groter en dichter op elkaar. */ .tu-global-sec .list .list__item { padding-left: 20px; font-size: 15px; line-height: 1.6; } .tu-global-sec .list .list__item:before { font-size: 5px; } /* ------------------------------------------------------------------------- 26. De kop, naar het voorbeeld van velvele.studio. Daar staat de merknaam als een enkel woord over de volle breedte, zwart op wit, met de letters strak tegen elkaar. Daaronder gecentreerd de belofte en dan een breed beeldblok met ronde hoeken. De maat is in vw en niet in pixels: het woord moet op elk scherm de breedte vullen, dat is het hele idee. ------------------------------------------------------------------------- */ .vs-hero h2.headline-xxxxl { font-size: 34vw; line-height: .78; letter-spacing: -0.05em; font-weight: 500; text-transform: lowercase; } .vs-hero .animated-line-wrapper, .vs-hero .anim-chars-fadein { overflow: visible; } /* Het beeldblok onder de belofte. Hoeken van 20px, gelijk aan al het andere beeld op de pagina; het stond als enige op 28. */ .vs-hero-media .js-2-view-slider { padding-bottom: 40px; } .vs-hero-media .swiper-slide img { border-radius: var(--vs-radius); box-shadow: 0 0.8px 2.4px -0.63px rgba(0, 0, 0, .075), 0 2.4px 7.2px -1.25px rgba(0, 0, 0, .075), 0 6.4px 19.1px -1.88px rgba(0, 0, 0, .075), 0 20px 60px -2.5px rgba(0, 0, 0, .075); } @media only screen and (max-width: 767px) { .vs-hero h2.headline-xxxxl { font-size: 33vw; } .vs-hero-media .swiper-slide img { border-radius: var(--vs-radius); } } /* ------------------------------------------------------------------------- 27. Het beeldblok in de kop liggend maken. Het thema snijdt deze beelden staand bij, waardoor de kaart hoger werd dan het scherm en de belofte erboven alleen kwam te staan. Bij Velvele is dat blok juist breed en laag. Vaste hoogte plus object-fit doet dat zonder de beelden te vervormen. ------------------------------------------------------------------------- */ .vs-hero-media .swiper-slide img { height: 62vh; object-fit: cover; } @media only screen and (max-width: 767px) { .vs-hero-media .swiper-slide img { height: 40vh; } } /* ------------------------------------------------------------------------- 28. Het blok met beeld en tekst naast elkaar. Gebouwd met de gewone kolommen van de pagina, niet met het eigen raster van het thema; dat laatste rekent met .container en liep buiten beeld zodra je het ergens anders neerzette. Het beeld krijgt dezelfde hoeken en schaduw als al het andere beeld, en een vaste hoogte zodat het liggend blijft. ------------------------------------------------------------------------- */ .vs-persoon .wpb_single_image img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--vs-radius); box-shadow: 0 0.8px 2.4px -0.63px rgba(0, 0, 0, .075), 0 2.4px 7.2px -1.25px rgba(0, 0, 0, .075), 0 6.4px 19.1px -1.88px rgba(0, 0, 0, .075), 0 20px 60px -2.5px rgba(0, 0, 0, .075); } .vs-persoon .wpb_single_image { margin-bottom: 0; } @media only screen and (max-width: 991px) { .vs-persoon .wpb_single_image img { height: 240px; } } /* Tekst naast het beeld verticaal in het midden, en de alinea niet over de volle kolombreedte laten doorlopen; dat leest niet. */ .vs-persoon .vc_row-fluid { display: flex; align-items: center; } .vs-persoon .vc_row-fluid > .vc_column_container { display: flex; align-items: center; } .vs-persoon .vc_column-inner { width: 100%; } .vs-persoon .body-text-m { max-width: 560px; margin-top: 20px; } /* ------------------------------------------------------------------------- 30. Sectieritme: wit met stille grijze banden. Besluit 27-08-2026. De pagina las als één lange witte lap; nu krijgen de secties hoofdstukken door om de zoveel blokken op een grijze band te zetten. Naadloos, zoals Eindhoven Design District het doet: geen rand, geen lijn, alleen een tonale wissel. Zie DESIGN-BESLUITEN.md. Toepassen doe je in het bouwscript met row_class="vs-band" op de [vc_row], niet hier met nth-child: dan blijft zichtbaar wélke sectie een band is en schuift het ritme niet mee zodra er een sectie tussenuit gaat. Toegewezen op de homepage, 27-08-2026, in vesmo-build/30-homepage.php. Drie banden, zodat de pagina zes hoofdstukken krijgt: wit de belofte, het beeld en de claim eronder GRIJS de lopende band met het werk wit wat we doen, de vier diensten met haarlijnen (blok 33) GRIJS wie je spreekt, het blok met beeld en tekst naast elkaar wit hoe een opdracht loopt, en waar je op kunt rekenen GRIJS de werk-strip (vesmo-strip.css) BLAUW het slotvlak uit footer.php (blok 38) wit de voettekst Elke band markeert een ander sóórt inhoud, niet elke tweede sectie. De diensten blijven bewust wit: Daan vroeg daar om wit met haarlijnen, en die op een band zetten zou dat besluit tegenspreken. Later op 27-08 is de derde band van plaats veranderd. Die was de slotvraag "Vertel wat er nu niet loopt" als laatste rij; sinds footer.php een slotvlak met "Klaar voor een betere website?" en dezelfde knop draagt, stonden er twee slotvragen achter elkaar. De rij is eruit en de werk-strip staat er nu, dus het aantal banden blijft drie. De pagina sluit niet meer af op grijs maar op blauw, en de haarlijn boven de voettekst is daarmee ook overbodig geworden: de kleurgrens doet dat werk. Zie blok 38. ------------------------------------------------------------------------- */ .tu-global-sec.vs-band { background-color: var(--vs-band); } /* Twee banden achter elkaar horen als één blok te lezen, niet als twee. */ .tu-global-sec.vs-band + .tu-global-sec.vs-band { margin-top: 0; } /* Beeld en kaarten staan op de band en moeten zich daarvan losmaken; op wit deden ze dat vanzelf. Alleen waar al een vlak lag, niet op los beeld. */ .vs-band .wpb_single_image img, .vs-band .tu-global-port-sec .hidden-box { background-color: #ffffff; } /* ------------------------------------------------------------------------- 31. De hero. Besluit 27-08-2026: de belofte bovenaan stond op headline-xs (38px), de op een na kleinste maat van het thema, met daaronder een mediablok van rond de 600px. Daardoor droeg het beeld de pagina en de boodschap niet. Velvele's grootste maat is 56px en die houden we aan; groter gaat tegen de referentie in. Wat de hero gewicht geeft is dus niet de puntgrootte maar de verhouding: krappere regelhoogte, kortere regels, en meer lucht eronder. Waarom hier en niet in het bouwscript: de hele typografieschaal van het thema wordt in dit bestand al herschaald naar Velvele (blok 5). De maat van een kop is in deze opzet opmaak, geen inhoud. ------------------------------------------------------------------------- */ .vs-hero-kop h2, #js-scroll-content section.tu-global-sec:first-of-type h2.headline-xs { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; /* De brontekst heeft al een [br] na 'die', dus de omslag ligt vast. Deze max-width is er alleen om te voorkomen dat de tweede regel op een breed scherm doorloopt. Te krap gezet breekt hij 'aanvragen opleveren' alsnog in tweeën, en dat is precies wat er op 27-08 even gebeurde bij 14ch. */ max-width: 22ch; margin-left: auto; margin-right: auto; } /* De regel eronder mag niet meelopen met de kop: die blijft lopende tekst. */ .vs-hero-kop .body-text-m, #js-scroll-content section.tu-global-sec:first-of-type .body-text-m { max-width: 46ch; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .vs-hero-kop h2, #js-scroll-content section.tu-global-sec:first-of-type h2.headline-xs { font-size: 38px; max-width: 12ch; } } /* ------------------------------------------------------------------------- 32. Het beeld in de kop niet staand uitsnijden. Blok 27 zette dit beeld op height:62vh met object-fit:cover, met als doel "breed en laag, zoals bij Velvele". In de praktijk pakt dat andersom uit: de slider toont twee beelden naast elkaar, dus een kolom is maar ~645px breed, en 62vh is op een gewoon scherm ~750px hoog. Een liggende bronfoto van 758x520 wordt daardoor tot een staande uitsnede gesneden en je ziet alleen het midden. Gemeten op 27-08-2026: 644x749 uit een bron van 758x520. Nu op de verhouding van de bron zelf, zodat er niets meer wordt weggesneden en het blok werkelijk breed en laag is. De hoogte volgt de breedte. ------------------------------------------------------------------------- */ .vs-hero-media .swiper-slide img { height: auto; aspect-ratio: 758 / 520; object-fit: cover; } @media only screen and (max-width: 767px) { .vs-hero-media .swiper-slide img { height: auto; aspect-ratio: 4 / 3; } } /* ------------------------------------------------------------------------- 33. De diensten: wit met haarlijnen. Besluit 27-08-2026. De vier diensten stonden als volle-breedte kleurbanden op #FF543E, #AB6E49, #4C9042 en #9E87EC. Dat zijn de case-kleuren van velvele.studio, maar daar staan ze als klein vlak achter een portfoliobeeld en niet als band over de volle breedte. Goed token, verkeerd toegepast: vier gekleurde vlakken achter elkaar trokken alle aandacht naar de kleur en niet naar wat er stond. Zie DESIGN-BESLUITEN.md. Nu één witte sectie met de vier diensten eronder, gescheiden door een haarlijn. Dat is hetzelfde patroon als "hoe een opdracht loopt" verderop op de pagina, dus de twee lijstjes lezen als familie van elkaar. **Dit blok heeft met opzet geen enkele regel.** Alles wat ervoor nodig is bestond al: de haarlijnen uit het thema, via inner_bottom_border="st2" op de inner row, en blok 14 zet .main-content .line-bottom al op var(--vs-line), dus ze komen als haarlijn en niet als zwarte streep binnen de ruimte uit de padding-attributen op de inner rows het wit doordat de kleurattributen uit de rij zijn gehaald De rij draagt wel row_class="vs-diensten", zodat er een aanknopingspunt is als er later toch iets moet. Wees terughoudend: een regel die hetzelfde doet als blok 14 is dubbelop, en een regel die op een klasse mikt die het thema niet uitgeeft is dood. Beide stonden hier op 27-08-2026 even in en zijn er dezelfde dag weer uit gehaald. De kleuren zijn niet uit het project verdwenen: de lopende band gebruikt ze nog als reservevlak achter een case zonder eigen beeld, en dát is wel de manier waarop velvele ze inzet. Zie inc/work-ticker.php. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 38. Het slotvlak en de voettekst. Besluit 27-08-2026, naar het voorbeeld van eindhovendesigndistrict.com. Daar is de onderkant van elke pagina drie dingen achter elkaar: een gepinde horizontale strip met werk (alleen op de home), een gekleurd vlak met de slotvraag en een knop, en daaronder een witte voettekst. Wij nemen die driedeling letterlijk over. De strip staat in vesmo-strip.css; dit blok gaat over de twee onderste. HUN ROZE, ONS BLAUW. Eindhoven zet #ffc2eb op body en op vrijwel elke sectie: het is hun paginakleur, geen blokje onderin. Een pastel dus. Ons var(--vs-accent) is dat niet, en een letterlijke vervanging maakt van een zachte achtergrond een verzadigd vlak van ruim zeshonderd pixels hoog. Daan koos op 27-08 bewust voor vol var(--vs-accent) met witte tekst, niet voor de pastelvariant. Zie DESIGN-BESLUITEN.md. DE SCHAKELAAR. Beide smaken staan hieronder als een set van zes tokens. Wat erover beslist is één woord: de klasse vs-smaak--vol of vs-smaak--pastel op body, gezet door vesmo_vlak_smaak() in functions.php en te overrulen met het filter 'vesmo_vlak_smaak'. Eén losse variabele volstond niet: bij vol blauw moet de inkt omkeren naar wit en wordt de knop juist wit-op-blauw, en dat is een omkering en geen tint. WAAROM OP BODY EN NIET OP DE SECTIE. Het bouwplan zette de modifier op het slotvlak zelf. Dat kan niet: de kopbalk staat op position:fixed en is geen afstammeling van .vs-slot, terwijl hij --vlak-ink wél nodig heeft om niet felgeel te worden boven het vlak (zie blok 12 en verderop in dit blok). Een variabele die alleen op die sectie leeft bereikt het logo nooit. ------------------------------------------------------------------------- */ :root, .vs-smaak--vol { --vlak-bg: var(--vs-accent); /* gelijk aan var(--vs-accent) */ --vlak-ink: #ffffff; --vlak-zacht: rgba(255, 255, 255, .72); --vlak-lijn: rgba(255, 255, 255, .28); /* Zwart, niet wit: de brief van 30-08 vraagt onder de slotvraag een zwarte knop, en zwart op blauw is bovendien rustiger dan wit op blauw. */ --vlak-knop-bg: var(--vs-inkt); --vlak-knop-ink: #ffffff; /* Het logo is een witte svg, dus geen kleur maar een filter. Op vol blauw blijft hij wit, op pastel moet hij juist omklappen naar zwart. */ --vlak-logo-filter: none; } .vs-smaak--pastel { --vlak-bg: #C2C5FE; /* zelfde lichtheid als hun roze */ --vlak-ink: #000000; --vlak-zacht: rgba(0, 0, 0, .62); --vlak-lijn: rgba(0, 0, 0, .15); --vlak-knop-bg: var(--vs-inkt); --vlak-knop-ink: #ffffff; --vlak-logo-filter: invert(1); } .vs-vlak { background-color: var(--vlak-bg); color: var(--vlak-ink); } /* --- html zelf, tegen de rubberband -------------------------------------- */ /* html is doorzichtig, dus bij overscroll op macOS zie je de achtergrond van body onder de voettekst. Zonder deze regel trekt de rubberband bij smaak vol een blauwe rand onderaan het scherm. */ html { background-color: var(--bg-light); } /* --- blok B, het slotvlak ------------------------------------------------ Herzien 28-08-2026 naar Paginastaart.dc.html uit de handoff. Verschillen met de versie van 27-08: kantlijn van 30 naar 50px, de kop is Lato 700 in plaats van General Sans 500 en staat sticky, er ligt een raster van twaalf haarlijnen achter, en naast de knop staat een mono-regel met het mailadres. ------------------------------------------------------------------------- */ /* HERONTWERP 30-08-2026: het vlak beslaat nu drie kwart van het scherm en de knop is zwart in plaats van wit. De sticky kop en de twaalf haarlijnen die zich intekenden zijn eruit; zie assets/vesmo-slot.js. Wat blijft is één groot blauw vlak met één vraag en één knop. */ /* HERZIEN 02-09-2026. Het vlak was 76vh hoog met de inhoud verticaal gecentreerd, en omdat de inhoud maar zo'n 280px is bleef er ruim 250px dood blauw onder de knop staan voordat de voettekst begon. Nu bepaalt de inhoud de hoogte: 140px lucht boven en onder, en 62vh als ondergrens zodat het vlak op een groot scherm niet tot een strook inzakt. Wat overblijft valt onderaan en niet in het midden. */ .vs-slot { position: relative; min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-start; margin: 0; padding: 140px var(--vs-kant); box-sizing: border-box; } /* Het raster. Twaalf kolommen, en de lijn staat aan het begin van elke kolom; de dertiende hangt aan de rechterrand omdat het raster anders een halve kolombreedte te vroeg ophoudt. transform-origin op top center, want ze tekenen zich van boven naar beneden in. RUSTSTAND IS ZICHTBAAR. scaleY(0) wordt door vesmo-slot.js gezet, niet hier. Draait dat script niet, dan staat het raster er gewoon. Dat is dezelfde afspraak als in vesmo-strip.js en het is de reden dat een kapotte animatie op deze site nooit een lege sectie oplevert. ALLEEN HIER, NIET MEER IN DE VOETTEKST (12-09-2026, tweede besluit van Daan). 's Ochtends gingen alle 26 lijnen eruit omdat de onderkant van de pagina te druk oogde. Daarna wilde hij ze in het blauwe vlak terug, en daar zit ook het verschil: hier tekenen ze zich in als de sectie in beeld komt en dragen ze beweging, terwijl het raster in de voettekst een stilstaande achtergrond was die alleen maar door de vijf menulijnen heen liep. Die komt dus niet terug; zie de aantekening bij .vs-voet verderop. */ .vs-slot__raster { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); pointer-events: none; } .vs-slot__lijn { justify-self: start; width: 1px; background-color: var(--vs-raster-blauw); transform-origin: top center; } .vs-slot__lijn--rand { position: absolute; top: 0; right: 0; bottom: 0; } /* LINKS OP HET RASTER, NIET GECENTREERD (02-09-2026). `margin: 0 auto` doet in een flex-kolom twee dingen tegelijk: het centreert het blok én het zet de stretch uit, waardoor het krimpt tot zijn eigen inhoud. .vs-slot is zo'n flex-kolom, dus de vraag en de knop stonden op 1440 op x=488 in plaats van op de kantlijn van 56. Met een expliciete breedte doet de max-width weer gewoon zijn werk en lijnt het blok uit met elke andere sectie op de site. Dezelfde valstrik als bij .vs-wwz in vesmo-home.css. */ .vs-slot__binnen { position: relative; width: 100%; max-width: var(--vs-breed); margin: 0 auto; } /* De grote vraag. DE STICKY IS ER OP 02-09-2026 UIT, en dat is een opruiming en geen ontwerpwijziging. Hij stond op `position: sticky; top: 84px` met de aantekening dat data-scroll-sticky in footer.php het echte werk deed; dat attribuut staat daar niet (meer) op de h2. En `position: sticky` doet hier sowieso niets: main.main-content staat onvoorwaardelijk op overflow:hidden, dus een sticky element pakt zich vast aan een doos die zelf nooit scrolt. Datzelfde is op 02-09 gemeten bij de werkstrip; zie het kopblok van vesmo-strip.js. Bovendien past het vlak sinds vandaag op één scherm, dus er valt niets meer te laten hangen. Maximaal 14ch, zodat de vraag over twee of drie korte regels breekt en niet over de volle 1380px uitloopt. */ .vs-slot__kop { margin: 0; max-width: 14ch; font-family: var(--vs-kop); font-size: clamp(32px, 4.4vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-transform: none; color: var(--vlak-ink); } /* Elke regel in een eigen venster met overflow:hidden, zodat de binnenste span van onderen kan inrijzen. padding-bottom is valkuil 10: bij een regelhoogte van 1 vallen de staarten van een g of een j anders buiten het venster. */ .vs-slot__regel { display: block; overflow: hidden; padding-bottom: 0.03em; } .vs-slot__regel-in { display: block; } /* Ruimer sinds 06-09-2026 (Daan: "de knop enzo moet verder uit elkaar"): 96px onder de kop in plaats van 56, en 44px tussen knop en mono-regel in plaats van 28. Onder 991px 88 en 28, zie het blok verderop. */ .vs-slot__actie { display: flex; flex-wrap: wrap; align-items: center; gap: 44px; margin-top: 96px; } .vs-slot__knop { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 55px; padding: 0 35px; box-sizing: border-box; border: 1px solid var(--vlak-knop-bg); border-radius: var(--vs-radius-pill); background-color: var(--vlak-knop-bg); color: var(--vlak-knop-ink); font-family: var(--vs-ui); font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* De knop inverteert bij hover: gevuld wordt transparant en omgekeerd. Op vol blauw is dat wit-op-blauw naar blauw-met-witte-rand. Op pastel doet het accent zijn gewone werk en gaat de knop naar zwart. */ .vs-smaak--vol .vs-slot__knop:hover { background-color: transparent; color: var(--vlak-ink); border-color: var(--vlak-ink); } .vs-smaak--pastel .vs-slot__knop:hover { background-color: var(--vs-ink); color: #ffffff; border-color: var(--vs-ink); } .vs-slot__mono { margin: 0; font-family: var(--vs-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--vlak-zacht); } /* Merktekens rond het gekleurde vlak. Twee stuks: een kopbalk die difference gebruikt moet niet alleen weten wanneer het vlak eronder schuift maar ook wanneer het weer ophoudt. STAND 30-08-2026, tweede herontwerp: deze merktekens sturen op dit moment NIETS aan. vesmo-nav.js is weg en de kopbalk staat weer op stock Tumar, dus het woordmerk wordt boven het blauwe slotvlak geel (wit min #251CFF is #DAE300). Daan heeft dat gezien en geaccepteerd. Ze blijven staan omdat ze precies het mechanisme zijn dat dat oplost als hij er ooit anders over denkt, en omdat de vondst hieronder duur was. Weggooien en later opnieuw uitzoeken is de slechtste van de twee opties. Absoluut op de rand, en dat is geen detail. In de gewone stroom zou het merkteken ónder de padding-top vallen en dus 150px te laag melden; gemeten op 27-08 kwam het daardoor nooit boven de drempel van 90px uit en sloeg de kopbalk nooit om. De secties eromheen staan op position:relative, dus de merktekens schuiven mee met de transform van Locomotive. SINDS 28-08 STAAT HET EINDMERKTEKEN ONDERAAN. De voettekst was wit en is nu inkt; het gekleurde gebied loopt dus door tot de laatste pixel van de pagina en niet tot de bovenkant van de voettekst. */ .vs-vlak-merk { position: absolute; top: 0; left: 0; width: 100%; height: 1px; margin: 0; pointer-events: none; } .vs-vlak-merk--eind { top: auto; bottom: 0; } /* --- blok C, de voettekst ------------------------------------------------ Inkt, met vijf navigatiebanden over de volle breedte. Naar de voettekst uit Paginastaart.dc.html. De vier gegevenskolommen van 27-08 blijven bestaan maar staan nu onder de banden. ------------------------------------------------------------------------- */ /* HET RASTER LIEP DOOR VAN 02-09 TOT 12-09-2026, EN HIER NIET MEER. Boven staat het nog steeds, als markup, omdat die lijnen zich intekenen; hier was het een achtergrondverloop, omdat er niets te animeren viel en een achtergrond vanzelf achter de banden en de kolommen valt zonder dat er een z-index bij hoeft. De maten volgden elkaar exact, zodat de lijnen boven en onder de naad op dezelfde x stonden. Weg op 12-09-2026 omdat de onderkant van de pagina te druk oogde: dertien stilstaande lijnen dwars door vijf menulijnen heen. Het raster van het slotvlak is diezelfde dag op verzoek teruggezet, dus de doorloop over de naad is er niet meer. Dat is een keuze en geen restant; zet je hem terug, zet dan ook de halvering naar zes onder 991px terug. */ /* Het vaste kopbalk-logo vervaagt zodra de voettekst in beeld komt, OP ELKE BREEDTE (06-09-2026). Tot vandaag gold dit alleen onder 1023px, met de aantekening "op desktop is ruimte genoeg". Gemeten op 06-09: op 1024x768 (iPad liggend) stond de klasse er wel en de regel niet, en op 1440x1000 stond het kleine woordmerk pal boven het grote op de naad en over de knop van het slotvlak heen. Twee keer VESMO boven elkaar is op geen enkele breedte de bedoeling; Daan meldde het op 06-09 opnieuw, vanaf zijn iPhone. Het geelgroene woordmerk boven het blauwe vlak blijft (valkuil 16): de trigger is de voettekst plus 240px, dus boven het slotvlak zelf staat het logo er gewoon nog. visibility erbij, met vertraging tot na de fade: een gecomposite laag met mix-blend-mode die zijn opacity niet ververst (WebKit) verdwijnt dan alsnog. Andersom springt visibility meteen terug en fadet de opacity in; daarvoor staat de transition ook op de basisregel. De klasse komt van vesmo-scroll.js: een IntersectionObserver op .vs-voet, sinds 06-09 met een scroll-terugval ernaast voor native scroll. */ .header-logo { transition: opacity var(--vs-duur) var(--vs-ease), visibility 0s 0s; } .vs-bij-de-voet .header-logo { opacity: 0; visibility: hidden; transition: opacity var(--vs-duur) var(--vs-ease), visibility 0s var(--vs-duur); pointer-events: none; } /* KOPBALK WEG BIJ SCROLLEN NAAR BENEDEN (06-09-2026, ontwerpcontrole). Logo en menuknop staan fixed met mix-blend-mode: difference; zodra tekst eronder doorschuift wordt het logo een brij, op een telefoon bij elke pagina (de tekst begint op dezelfde x als het logo) en op desktop boven de inkt-secties. kopbalkBijScrollen() in vesmo-scroll.js zet vs-kop-weg op body zodra je naar beneden scrolt en haalt hem weg bij de eerste beweging omhoog en aan de top. Zelfde overgang als bij de voettekst hierboven. */ .menu-icon { transition: opacity var(--vs-duur) var(--vs-ease), visibility 0s 0s; } .vs-kop-weg .header-logo, .vs-kop-weg .menu-icon { opacity: 0; visibility: hidden; transition: opacity var(--vs-duur) var(--vs-ease), visibility 0s var(--vs-duur); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .vs-kop-weg .header-logo, .vs-kop-weg .menu-icon { transition: none; } } /* Onder de voettekst mag niets wits meer doorschijnen. Locomotive rekent zijn scrollhoogte uit bij de init en houdt daarna een paar pixels over: gemeten op 02-09-2026 was dat 22px, met het witte body eronder, en na de update() uit vesmo-scroll.js nog 13px. Die rest is een afrondingsverschil dat per venster anders uitvalt, dus die wordt niet weggerekend maar afgedekt. Met een ::after op de voettekst zelf en niet met een achtergrond op body of op .js-animsition-overlay: dat laatste ligt achter alle secties, en secties als .vs-notitie zijn transparant. Die zouden dan zwart worden. */ /* DE BODEM VAN DE PAGINA IS INKT, EN DAT IS DE OPLOSSING VOOR HET WITTE VLAK. Locomotive rekent zijn scrollhoogte uit bij de init en houdt daarna een paar pixels over waarin je voorbij het einde van de inhoud scrolt: gemeten 22px met een correcte overflow, en dat verschilt per venster en per keer dat er nog een lettertype binnenkomt. Dat is niet weg te rekenen, en het afdekken met een laag ónder de voettekst maakte het juist erger (zie de opmerking bij .vs-voet hieronder). Wat wel werkt is de bodem zelf. #js-scroll-content ligt achter alle secties; die hebben allemaal een eigen dekkende achtergrond, dus je ziet deze kleur alleen daar waar de inhoud op is. En dat is per definitie onder de voettekst, want die is de laatste sectie en is zelf inkt. Naadloos, zonder iets aan de hoogte te veranderen. Eén sectie is transparant en die moet daarom expliciet wit: .vs-notitie. Dat is nagemeten, hij is de enige op de hele site. */ #js-scroll-content { background-color: var(--vs-inkt); } .vs-notitie { background-color: var(--vs-wit); } .vs-voet { position: relative; margin: 0; /* Boven was 64px. De onderste helft van het naadmerk staat bovenin en is ongeveer een dertiende van de breedte hoog, op 1440 dus zo'n 97px; met 64px zou hij over de aanhef vallen. */ padding: 150px 0 0; /* overflow: hidden, en dat MOET hidden blijven. Op 02-09-2026 stond hier even clip-path: inset(0 0 -400px 0), om een afdeklaag onder de voettekst zichtbaar te maken. Gevolg: de overflow ging open, en Locomotive telt dan de uitstekende absolute elementen mee in zijn scrollhoogte. Gemeten aan het werkelijke einde van de scroll ging de limiet van 8032 naar 8410: 378px voorbij het einde van de inhoud, op elke vensterhoogte hetzelfde. Het gat dat het moest dichten werd er zeventien keer groter van. Dit knipt ook de onderste helft van het naadmerk, die bovenin staat en er anders bovenuit steekt tot in het blauwe vlak. Het gat onder de voettekst wordt nu opgelost waar het hoort: met de achtergrond van #js-scroll-content, verderop in dit blok. */ overflow: hidden; background-color: var(--vs-inkt); /* Hier stond hetzelfde haarlijnenraster als in het slotvlak, als twee verlopen: dertien verticale lijnen op --vs-raster-inkt over de volle hoogte van de voettekst. Weg op 12-09-2026, samen met dat van het slotvlak. */ color: #ffffff; } .vs-voet__aanhef { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px; max-width: var(--vs-breed); margin: 0 auto; padding: 0 var(--vs-kant) 30px; box-sizing: border-box; } /* Eén mono-label voor de hele voettekst: de aanhef, de vier kolomkoppen en de afsluiting gebruiken hem allemaal. */ .vs-voet__label { margin: 0; font-family: var(--vs-mono); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--vs-mono-inkt); } /* De banden. Bij hover schuift de band naar rechts en vult een blauw vlak hem van links naar rechts in 500ms. HERZIEN 02-09-2026: dat was een achtergrond die van #0a0a0a naar #141414 ging, en dat verschil van vier procent grijs zag vrijwel niemand. Nu is het het accent van de site, en het vult van links zodat de beweging dezelfde kant op gaat als de band zelf. Een pseudo-element en geen background-position: een achtergrond die van breedte verandert kan de browser niet op de compositor afhandelen, een transform op scaleX wel. transform-origin links, want daar begint hij. overflow:hidden houdt de vulling binnen de band, en de inhoud krijgt een z-index zodat de tekst boven het blauw blijft staan. */ .vs-voet__band { position: relative; display: block; overflow: hidden; border-top: 1px solid var(--vs-hair-inkt); padding: 22px var(--vs-kant); color: #ffffff; text-decoration: none; transition: padding-left .55s var(--vs-ease); } .vs-voet__band::before { content: ''; position: absolute; inset: 0; background-color: var(--vs-accent); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--vs-ease); } .vs-voet__band:hover::before, .vs-voet__band:focus-visible::before { transform: scaleX(1); } .vs-voet__band:hover, .vs-voet__band:focus-visible { padding-left: 78px; color: #ffffff; } /* Op het blauw moeten het nummer en het blokje mee naar wit: het nummer staat op .45 dekking en haalt op #251cff geen 4,5:1, en het blokje is zelf blauw en zou verdwijnen. */ .vs-voet__band:hover .vs-voet__band-nr, .vs-voet__band:focus-visible .vs-voet__band-nr { color: #ffffff; } .vs-voet__band:hover .vs-voet__band-blok, .vs-voet__band:focus-visible .vs-voet__band-blok { background-color: #ffffff !important; } .vs-voet__band-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; max-width: var(--vs-breed); margin: 0 auto; } .vs-voet__band-links { display: flex; align-items: baseline; gap: 30px; min-width: 0; } /* .4 gaf 3,77:1 op de inkt van .vs-voet, onder de 4,5:1 die WCAG AA voor tekst van 12px vraagt (gemeten 02-09-2026). --vs-mono-inkt staat op .45 en haalt precies 4,50; dat is ook het token dat .vs-voet__label al gebruikt, dus dit is meteen één waarde minder om uit elkaar te laten lopen. */ .vs-voet__band-nr { flex: 0 0 auto; font-family: var(--vs-mono); font-size: 12px; line-height: 1.4; color: var(--vs-mono-inkt); transition: color .5s var(--vs-ease); } .vs-voet__band-naam { font-family: var(--vs-kop); font-size: 38px; font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; text-transform: none; color: #ffffff; } /* Het blokje is een vierkant en geen bolletje, en de kleur komt uit het dienstenpalet. Die staat als inline-stijl op het element omdat hij per band verschilt en uit vesmo_voet_banden() komt; dat is data, geen opmaak. */ .vs-voet__band-blok { flex: 0 0 auto; width: 8px; height: 8px; transition: background-color .5s var(--vs-ease); } .vs-voet__onder { border-top: 1px solid var(--vs-hair-inkt); padding: 34px var(--vs-kant) 0; } .vs-voet__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; max-width: var(--vs-breed); margin: 0 auto; } .vs-voet__link, .vs-voet__tekst { display: block; margin: 12px 0 0; font-family: var(--vs-body); font-size: 17px; font-weight: 400; line-height: 1.5; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--vs-ink-zacht); } .vs-voet__link { display: inline-block; color: #ffffff; text-decoration: none; transition: color .25s ease; } /* HOVER WISSELT NIET MEER VAN KLEUR (02-09-2026). Hij ging naar het accent op inkt, en toen die tint werd afgeschaft zou hij naar #251cff gaan: 2,54:1, dus donkerder bij het aanwijzen dan in rust. Een hover die de leesbaarheid verslechtert is geen hover. De link blijft wit en krijgt zijn onderstreping als teken, hetzelfde patroon als blok 16 en als het mailadres hieronder. */ .vs-voet__link:hover, .vs-voet__link:focus-visible { color: #ffffff; box-shadow: inset 0 -1px 0 #ffffff; } /* Alleen het mailadres krijgt de onderstreping; de andere twee links zijn een naam en een adres en die hoeven niet als link te schreeuwen. */ .vs-voet__kolom:first-child .vs-voet__link { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35); } .vs-voet__afsluiting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--vs-breed); margin: 44px auto 0; } .vs-voet__copy { display: flex; flex-wrap: wrap; gap: 26px; font-family: var(--vs-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; /* .55 en niet .35. Op de inkt van .vs-voet (#0a0a0a) komt .35 uit op ongeveer #626262 en daarmee op 3,15:1, onder de 4,5:1 die WCAG AA voor lopende tekst vraagt; .55 haalt ruim 5:1. Op 01-09-2026 eerst alleen onder 1024px opgelost met de aantekening dat het op elk formaat speelde; die aantekening is nu weg omdat het hier staat. */ color: rgba(255, 255, 255, .55); } .vs-voet__copy a { color: rgba(255, 255, 255, .55); text-decoration: none; transition: color .25s ease; } .vs-voet__copy a:hover, .vs-voet__copy a:focus-visible { color: #ffffff; } /* DE JURIDISCHE VERWIJZINGEN ALS LAATSTE REGEL (08-09-2026). Zelfde letter en kleur als de copyrightregel, maar een eigen rij onder de afsluiting die niet mag breken: twee korte woorden naast elkaar, ook op een telefoon. */ .vs-voet__juridisch { display: flex; flex-wrap: nowrap; gap: 26px; max-width: var(--vs-breed); margin: 18px auto 0; font-family: var(--vs-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; } .vs-voet__juridisch a { color: rgba(255, 255, 255, .55); text-decoration: none; transition: color .25s ease; } .vs-voet__juridisch a:hover, .vs-voet__juridisch a:focus-visible { color: #ffffff; } .vs-voet__omhoog { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--vs-radius-pill); color: #ffffff; text-decoration: none; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .vs-voet__omhoog:hover, .vs-voet__omhoog:focus-visible { background-color: #ffffff; color: var(--vs-inkt); border-color: #ffffff; } /* De pijl is twee randen van een vierkant, 45 graden gedraaid. currentColor, zodat hij bij hover vanzelf meekleurt met de knop eromheen. */ .vs-voet__pijl { display: block; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) translate(1px, 1px); } /* HET WOORDMERK OP DE NAAD (02-09-2026). Hiervoor was dit .vs-voet__merk: een vage streep onderaan de voettekst, 96px hoog met overflow:hidden en de svg 4% omhoog geschoven, op .16 dekking. Nu ligt het op de grens tussen het blauwe vlak en de inkt. Het hangt onderaan .vs-slot en steekt er met translateY(50%) voor de helft onderuit. Dat kan omdat .vs-slot geen overflow heeft; .vs-voet wel, dus andersom zou de bovenste helft worden afgeknipt. Volle dekking, want difference op een doorzichtig beeld levert vrijwel niets op. Zie het commentaar in footer.php voor de kleuren die eruit komen. */ /* HERBOUWD OP 06-09-2026, zelfde beeld, andere constructie. Tot vandaag was elke helft een venster met aspect-ratio 13.64/1 (de halve svg-verhouding 682/100), daarin een lazy die voor de onderste helft met translateY(-50%) omhoog stond. Daan zag op zijn iPhone het woordmerk "twee keer boven op elkaar"; in Chrome met aanraakemulatie was dat niet na te maken. Drie ingredienten waar WebKit anders mee om kan gaan dan Chrome zijn eruit: aspect-ratio op een absoluut element met alleen left/right, een transform op een img binnen overflow:hidden, en loading="lazy". Nu: de helft is een leeg venster met height 0 en een padding-bottom van 100% / 13.64. Procentuele padding rekent met de breedte van het omhullende blok, dus dat is exact een halve letterhoogte, in elke browser. Het woordmerk is een background-image (url via --vs-merk op het element, gezet in footer.php), 100% breed, boven tegen de bovenrand en onder tegen de onderrand van het venster: geen transform, niets te knippen. */ /* WIT OP VOLLE DEKKING, GEEN BLEND (12-09-2026, in twee stappen). Eerst ging de blend eruit: met difference werd de bovenste helft #dae300 op het blauw en de onderste bijna wit op de inkt, twee schreeuwerige kleuren die niets met elkaar te maken hadden. Daarbij ging de dekking naar .16. Daan wilde het merk daarna weer op volle sterkte, en dat kan nu ook: zonder difference is vol gewoon wit, op allebei de vlakken. HET IS ÉÉN BEELD OVER TWEE HELFTEN, dus de dekking geldt voor allebei. Alleen de bovenste helft vol zetten geeft een bright witte bovenkant op een donkergrijze onderkant, met de breuk dwars door de letters. Wil je dat toch, zet de opacity dan per modifier en niet hier. De aantekening hierboven dat difference volle dekking nodig heeft klopt nog steeds: die twee zijn niet te combineren. Zet je de blend terug, dan komt het geelgroen op het blauwe vlak ook terug. */ .vs-naadmerk { position: absolute; left: var(--vs-kant); right: var(--vs-kant); overflow: hidden; pointer-events: none; } .vs-naadmerk__venster { display: block; height: 0; padding-bottom: calc(100% / 13.64); background-image: var(--vs-merk); background-repeat: no-repeat; background-size: 100% auto; background-position: 0 0; } /* De bovenste helft sluit aan op de onderrand van het blauwe vlak en toont de bovenkant van de letters. */ .vs-naadmerk--boven { bottom: 0; } /* De onderste helft begint op de bovenrand van de voettekst en toont de onderkant van dezelfde letters: het beeld is twee keer zo hoog als het venster en hangt tegen de onderrand. */ .vs-naadmerk--onder { top: 0; } .vs-naadmerk--onder .vs-naadmerk__venster { background-position: 0 100%; } /* --- de kopbalk boven het gekleurde vlak --------------------------------- */ /* WEG PER 30-08-2026, en dat is de bedoeling. Hier stonden zes regels die de mix-blend-mode van logo en menuknop terugzetten boven het blauwe slotvlak, want wit min var(--vs-accent) is felgeel. De balk is nu effen wit en blendt niet meer, dus het probleem bestaat niet. De merktekens vs-vlak-merk in inc/slot.php en footer.php die dit aanstuurden zijn daarmee ook overbodig. */ /* --- kleinere schermen --------------------------------------------------- */ @media only screen and (max-width: 991px) { .vs-slot { padding: 120px var(--vs-kant) 90px; } .vs-slot__kop { font-size: 42px; } .vs-slot__actie { gap: 28px; margin-top: 88px; } /* Zes lijnen in plaats van twaalf: op deze breedte staan ze anders dichter op elkaar dan de tekst erboven en wordt het een arcering. De tegenhanger voor de voettekst is vervallen, want daar is geen raster meer. */ .vs-slot__raster { grid-template-columns: repeat(6, 1fr); } .vs-slot__lijn:nth-child(n + 7):not(.vs-slot__lijn--rand) { display: none; } .vs-voet__band-naam { font-size: 30px; } .vs-voet__band:hover { padding-left: 48px; } /* Twee kolommen: vier gegevens naast elkaar past hier niet meer. */ .vs-voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 45px; } } @media only screen and (max-width: 599px) { :root { --vs-kant: 20px; } .vs-slot { padding: 90px var(--vs-kant) 70px; } .vs-slot__kop { font-size: 36px; } .vs-slot__actie { margin-top: 80px; } .vs-slot__knop { width: 100%; } .vs-voet__band { padding: 18px var(--vs-kant); } .vs-voet__band:hover { padding-left: 34px; } .vs-voet__band-naam { font-size: 26px; } .vs-voet__band-links { gap: 18px; } .vs-voet__raster { grid-template-columns: 1fr; row-gap: 36px; } .vs-voet__afsluiting { align-items: flex-start; } /* De onderste helft van het naadmerk is hier nog maar zo'n 25px hoog (breedte gedeeld door 13,64), dus de 150px die de voettekst daarboven vrijhoudt is op dit formaat verspilde ruimte. */ .vs-voet { padding-top: 60px; } } /* ------------------------------------------------------------------------- 40. De 404-pagina. De opmaak van .vs-hknop staat in vesmo-home.css, en dat bestand laadt alleen waar een home-shortcode staat. Op de 404 is er geen shortcode, dus die twee knoppen zouden kaal zijn. Vandaar dat 404.php in functions.php de home-assets in de wachtrij zet; hier staat alleen wat de pagina zelf nodig heeft. ------------------------------------------------------------------------- */ .vs-404 { padding: 180px var(--vs-kant) var(--vs-sectie); background-color: var(--vs-papier); min-height: 70vh; } .vs-404__label { margin: 0 0 24px; color: var(--vs-accent); } .vs-404__kop { margin: 0; max-width: 14ch; font-family: var(--vs-kop); font-size: clamp(36px, 5.6vw, 80px); font-weight: 700; line-height: .95; letter-spacing: -0.03em; text-transform: none; color: var(--vs-ink); } .vs-404__tekst { max-width: 520px; margin: 28px 0 0; font-family: var(--vs-body); font-size: 18px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--vs-tekst); } .vs-404__acties { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; } /* ------------------------------------------------------------------------- 41. Video als decor. Eén regel bepaalt alles: dit is beeld dat toevallig beweegt, geen speler. Daarom pointer-events uit. Zonder die regel vangt het video-element de klik op en toont een rechtermuisknop-menu met "Video opslaan als" en "Afspeelsnelheid", ook zonder controls-attribuut. Een link eroverheen zou bovendien niet meer klikken. De maten staan hier en niet bij .vs-beeldvlak img, want .vs-beeldvlak wordt in twee bestanden gedefinieerd (vesmo-home.css en vesmo-paginas.css) en de video hoort in allebei hetzelfde te doen. vesmo-style.css laadt vóór beide, maar er is geen concurrerende regel op video, dus de volgorde doet er niet toe. ------------------------------------------------------------------------- */ .vs-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; background-color: var(--vs-papier); } /* ------------------------------------------------------------------------- 30. TIKDOELEN OP EEN TELEFOON (01-09-2026) Gemeten op 390px: de kleinste aanraakbare dingen op de site waren 18px hoog (Privacyverklaring en Algemene voorwaarden in de voettekst) en dat geldt op alle negen pagina's, want het zit in gedeelde onderdelen. De norm is 44px -- dat is de maat van een vingertop, niet van een muisaanwijzer. De letter blijft overal even groot. Wat groeit is de ruimte eromheen, want deze maten zijn een ontwerpkeuze die op desktop klopt; alleen de trefkans op een telefoon klopte niet. WAAROM 1023px EN NIET 767px. Dat was de eerste keuze, en de nameting liet zien waarom hij fout was: op 768px vielen "Bekijk het project", "vusk.nl" en het mailadres op Contact er precies buiten. Een tablet van 768 breed bedien je met dezelfde vinger als een telefoon. 1023px is bovendien de grens die de rest van dit thema al aanhoudt voor zijn mobiele opzet, dus de blokken vallen samen. De kopbalk en het schermvullende menu van Tumar blijven hier bewust buiten: die zijn stock en staan sinds 28-08 buiten scope. Het logo (20px) en de menuverwijzingen (36px) halen de norm dus niet. ------------------------------------------------------------------------- */ @media only screen and (max-width: 1023px) { /* 26px + 2x9 = 44. Blijft inline-block, dus de kolomopmaak verandert niet; de bestaande margin-top van 12px staat los van deze padding. */ .vs-voet__link { padding: 9px 0; } /* 18px + 2x13 = 44. Dit zijn flex-items in .vs-voet__copy, dus ze zijn al geblockificeerd en nemen de padding gewoon aan. */ .vs-voet__copy a { padding: 13px 0; } /* Zelfde tikdoel van 44px voor de juridische rij. */ .vs-voet__juridisch a { padding: 13px 0; } .vs-voet__juridisch { font-size: 13px; } /* Stond op 40px plus rand is 42. Twee pixels tekort is ook tekort. */ .vs-voet__omhoog { width: 44px; height: 44px; } /* DE ONDERSTE REGEL VAN DE VOETTEKST. Het contrast stond hier op 01-09-2026 alleen onder 1024px goed, met de aantekening dat het probleem op elk formaat speelde. Dat is opgelost: de kleur staat nu in de basisregel bij .vs-voet__copy zelf en geldt overal. Wat hier blijft staan is alleen de maat. Die 13px is er voor de leesbaarheid op een klein scherm en niet voor het contrast; de desktopmaat van 12px veranderen zou een ontwerpwijziging zijn die niemand heeft gevraagd. */ .vs-voet__copy { font-size: 13px; } } /* ------------------------------------------------------------------------- 42. Het schermvullende menu. Dit was het enige scherm dat nooit in de huisstijl is gezet: een vlak van #111517 met zes dunne omlijnde regels linksboven, in de standaardopmaak van Tumar. Het is tegelijk de enige navigatie die de site heeft, dus iedereen die verder wil komt erlangs. Sinds 02-09-2026 heeft het dezelfde vormtaal als de dienstenlijst: nummers in mono, een haarlijn onder elke regel, het blauwe blokje als markering, en "Plan een gesprek" als knop in plaats van als zesde regel. ALLEEN OPMAAK EN TWEE FILTERS. De markup komt uit template-parts/main-header.php van het moederthema en blijft daar. Wat de css niet kan (tekst toevoegen, weten welk item de knop wordt) staat in inc/menu.php; Escape, klikken-buiten en de focus staan in assets/vesmo-menu.js. De kopbalk blijft ongemoeid, zie valkuil 16. ------------------------------------------------------------------------- */ /* Het vlak zelf op onze inkt in plaats van het #111517 van het thema, en de lijst verticaal in het midden in plaats van tegen de bovenrand: de eerste regel liep anders achter het zwevende logo langs. De padding boven houdt het logo en de sluitknop vrij; overflow-y voor het geval de lijst op een laag scherm niet past. Het inschuiven van rechts blijft van het thema. */ .nav-container { display: flex; align-items: center; box-sizing: border-box; padding: 120px 0 72px; overflow-x: hidden; overflow-y: auto; background-color: var(--vs-inkt); } /* De achtergrondbeelden per item horen bij Tumar's menu en niet bij dit ontwerp: ze zetten een foto achter de regel waar je overheen gaat. Weg uit het beeld, en daarmee ook geen verzoek meer per menu-item. De attachments zelf blijven staan; LANCERING.md zegt dat er niets verwijderd wordt. */ .nav-container .nav-bg-box { display: none; } /* En het vlak dat die beelden moest verdonkeren, want dat blijft anders als lichtere rechthoek in beeld staan. Gemeten op 02-09-2026: 955 bij 185px op #111517, precies 72% van de lijstbreedte, wat de maat is die Tumar hier aanhoudt. Dat is de oude menukleur van het thema en niet onze inkt, dus je ziet hem staan. Zonder de beelden eronder heeft hij geen werk meer. */ .nav-bg-overlay-box::before { display: none; } /* .nav-box is Tumar's .container.small en dus 960px breed, gecentreerd. Het menu hoort op hetzelfde raster als de rest van de site: volle breedte tot --vs-breed, met de gewone kantlijn. */ .nav-container .nav-box { flex: 1 1 auto; width: 100%; max-width: none; padding: 0 var(--vs-kant); box-sizing: border-box; } /* display:block en niet flex. Tumar zet hier een flex-kolom neer en daarin krimpt elke li tot zijn eigen tekst; de haarlijnen waren daardoor per regel even lang als het woord erboven, van 267 tot 360px. Als blok loopt elke lijn van kantlijn tot kantlijn. */ .menu-box { display: block; counter-reset: vsmenu; width: 100%; max-width: var(--vs-breed); margin: 0 auto; padding: 0; list-style: none; } /* Elke regel: nummer links, titel rechts, haarlijn eronder. Grid en geen flex, want dan staat de kolom met nummers overal op dezelfde breedte. */ .menu-box > li.nav-btn-box { display: block; margin: 0; border-bottom: 1px solid var(--vs-hair-inkt); counter-increment: vsmenu; } .menu-box > li.nav-btn-box:first-child { border-top: 1px solid var(--vs-hair-inkt); } .menu-box > li.nav-btn-box > .nav-btn { display: grid; /* 8px voor het blokje, 40px voor het nummer. De ruimte blijft ook gereserveerd als het blokje op opacity 0 staat, zodat er bij hover niets verspringt. */ grid-template-columns: 8px 40px 1fr; align-items: baseline; gap: 0 16px; padding: 18px 0; text-decoration: none; /* Eén beweging bij hover: de regel schuift 12px op. Geen kleurwissel van de tekst erbij, want dan gebeuren er twee dingen tegelijk. */ transform: translateX(0); transition: transform .4s var(--vs-ease); } /* Het blauwe blokje links van het nummer. Het staat er altijd, maar pas bij hover of op de eigen pagina is het zichtbaar; zo verspringt er niets. */ .menu-box > li.nav-btn-box > .nav-btn::before { content: ''; grid-column: 1; grid-row: 1; align-self: center; width: 8px; height: 8px; background-color: var(--vs-accent); opacity: 0; transition: opacity .4s var(--vs-ease); } /* grid-row op alle drie de vakken, en dat is geen overdaad: auto-plaatsing loopt in DOM-volgorde (::before, .nav-btn__inner, ::after) en alleen vooruit. Zonder dit landt het nummer op rij 2, want kolom 3 is dan al gepasseerd. Dat stond op 02-09-2026 een ronde lang onder de titels. */ .menu-box > li.nav-btn-box > .nav-btn::after { content: counter(vsmenu, decimal-leading-zero); grid-column: 2; grid-row: 1; font-family: var(--vs-mono); font-size: 12px; line-height: 1.4; color: var(--vs-mono-inkt); } /* De titel. Tumar zet hier een omlijnde letter neer met -webkit-text-stroke en een tweede kopie via data-text; allebei terugdraaien naar gewone gevulde tekst in onze kop-letter. */ .menu-box > li.nav-btn-box .nav-btn__inner { grid-column: 3; grid-row: 1; display: block; font-family: var(--vs-kop); font-size: clamp(32px, 4vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-transform: none; color: var(--vs-wit); -webkit-text-stroke: 0; -webkit-text-fill-color: currentColor; } .menu-box > li.nav-btn-box .nav-btn__inner::before, .menu-box > li.nav-btn-box .nav-btn__inner::after { content: none; } .menu-box > li.nav-btn-box > .nav-btn:hover, .menu-box > li.nav-btn-box > .nav-btn:focus-visible { transform: translateX(12px); } .menu-box > li.nav-btn-box > .nav-btn:hover::before, .menu-box > li.nav-btn-box > .nav-btn:focus-visible::before, .menu-box > li.current-menu-item > .nav-btn::before, .menu-box > li.current_page_item > .nav-btn::before { opacity: 1; } /* "Plan een gesprek" is geen zesde regel maar een knop. Welk item dat is komt uit vesmo_menu_klassen() in inc/menu.php en niet uit :last-child: onder de lijst hangt nog het contactblok, en dat zou anders het laatste kind zijn. */ .menu-box > li.vs-menu__knop { border: 0; margin-top: 40px; counter-increment: none; } .menu-box > li.vs-menu__knop > .nav-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 55px; padding: 0 35px; box-sizing: border-box; border-radius: var(--vs-radius-pill); background-color: var(--vs-accent); transform: none; transition: background-color .4s var(--vs-ease), color .4s var(--vs-ease); } .menu-box > li.vs-menu__knop > .nav-btn::before, .menu-box > li.vs-menu__knop > .nav-btn::after { content: none; } .menu-box > li.vs-menu__knop .nav-btn__inner { font-family: var(--vs-ui); font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--vs-wit); } .menu-box > li.vs-menu__knop > .nav-btn:hover, .menu-box > li.vs-menu__knop > .nav-btn:focus-visible { background-color: var(--vs-wit); transform: none; } .menu-box > li.vs-menu__knop > .nav-btn:hover .nav-btn__inner, .menu-box > li.vs-menu__knop > .nav-btn:focus-visible .nav-btn__inner { color: var(--vs-inkt); } /* De contactgegevens onder de knop. Een menu is de plek waar mensen die zoeken. Het telefoonnummer komt hier zodra er een te verifieren nummer is. */ .menu-box > li.vs-menu__gegevens { display: flex; flex-wrap: wrap; gap: 12px 56px; margin-top: 44px; border: 0; counter-increment: none; } .vs-menu__gegeven { display: block; } .vs-menu__gegeven-label { display: block; margin-bottom: 6px; font-family: var(--vs-mono); font-size: 12px; line-height: 1.4; color: var(--vs-mono-inkt); } .vs-menu__gegeven-link, .vs-menu__gegeven-tekst { display: block; font-family: var(--vs-body); font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--vs-ink-zacht); text-decoration: none; } .vs-menu__gegeven-link { color: var(--vs-wit); transition: color .25s ease; } /* Zelfde reden als bij .vs-voet__link hierboven: wit blijft wit, de streep is het teken. */ .vs-menu__gegeven-link:hover, .vs-menu__gegeven-link:focus-visible { color: #ffffff; box-shadow: inset 0 -1px 0 #ffffff; } @media only screen and (max-width: 767px) { .menu-box > li.nav-btn-box > .nav-btn { grid-template-columns: 8px 32px 1fr; gap: 0 12px; padding: 14px 0; } .menu-box > li.vs-menu__knop > .nav-btn { width: 100%; } .menu-box > li.vs-menu__gegevens { gap: 20px 32px; } } /* ------------------------------------------------------------------------- /* ------------------------------------------------------------------------- 43. DE PAGINAWISSEL: EEN PAPIERVLAK MET EEN ACCENTRAND (12-09-2026). WAT ER STOND. Een driekleurige baan van tweemaal de schermbreedte die onder het logo doorschoof. Die is weg op verzoek van Daan: het blauw begon pas 84px onder de bovenrand, wat als een renderfout las, en er werd niets opgebouwd. Het opbouwen zit nu in het intro-scherm (blok 44) en hoort niet bij elke klik. WAT ER NU GEBEURT. Eén egaal vlak in papier dat omhoog wegschuift, met een accentlijn van 2px aan de rand die vooropgaat. Papier op een papieren pagina is op zichzelf onzichtbaar, en dat is de bedoeling: het vlak dekt alleen af dat de pagina zich opbouwt. De lijn maakt de beweging leesbaar zonder op te dringen. Gekozen uit twee varianten op een schets, 12-09. 250 MS IS GEEN KEUZE MAAR EEN GEGEVEN. Animsition navigeert in tumar/includes/js/main.js regel 36 na outDuration 300, dus alles wat langer duurt zie je niet af. 250 laat 50 ms marge. Verander je dit getal, pas dan ook de reveal-aanroep in functions.php aan: die rekent met 900 + 250 = 1150, en het intro-vlak begint pas op 1400 te schuiven. ALLES REIST OMHOOG, ook de wegschuif van het intro-scherm. Eén richting op de hele site leest rustiger dan heen en weer. HET PARENT-THEMA BLIJFT ONGEMOEID. Alles hier overschrijft alleen. Terug naar de zwarte standaard is dit blok weghalen. ------------------------------------------------------------------------- */ /* HET MOEDERTHEMA PINT DE TRANSFORM VAST. Dit is de kern van dit blok en het koste een avond om te vinden. In tumar/includes/css/tumar-main-style.css r.542-548 staat: .preloader:before, .preloader__out-overlay:before { transition: .3s cubic-bezier(.858,.01,.068,.99); transform: translateX(0) !important; } en op r.562 wordt het vlak onthuld met opacity, niet met een schuif: .js-page-in.preloader:before { opacity: 0; } Gevolg: elke transform die je hier zonder !important zet wordt genegeerd. De eerste versie van dit blok (12-09, de driekleurige baan) schóóf dus nooit; dat vlak stond stil en verdween met een fade. Op een screencast van een echte paginawissel is te zien dat het beeld in één frame van gedekt naar onthuld springt, zonder tussenliggende standen. Daarom staat hier !important op de transform. Niet uit luiheid: het is de enige manier om een !important uit een parent-bestand te overrulen zonder dat bestand aan te raken, en dat laatste ligt sinds 27-08 vast. De opacity gaat om dezelfde reden op 1: anders vervaagt het vlak tijdens de schuif en vervaagt de accentlijn mee. CONTROLEREN GAAT NIET MET getComputedStyle op een pseudo-element; dat gaf hier steeds de eenheidsmatrix, ook bij een transform die wel degelijk werkte. Meet met Page.startScreencast: die levert alleen een frame als er iets verandert, dus een animatie die niet loopt is meteen zichtbaar als een gat in de reeks. */ .preloader:before, .preloader__out-overlay:before { width: 100%; background-color: var(--vs-papier); background-image: none; mix-blend-mode: normal; will-change: transform; } /* De tweede laag zet het moederthema zelf al uit met content: normal (r.550). Deze regel is daarmee overbodig maar onschadelijk, en hij maakt de bedoeling leesbaar voor wie dat bestand niet ernaast heeft liggen. */ .preloader:after, .preloader__out-overlay:after { display: none; } /* WEGGAAN. Komt van onderen in beeld; de accentlijn zit bovenop, want dat is de rand die vooropgaat. Dit loopt op deze site nooit: animsition bindt op linkElement '.js-animsition-links' (meervoud) en dat element bestaat hier niet; de links hebben 'js-animsition-link' (enkelvoud). Gemeten 12-09: nul tegen 31 treffers. Blijft staan voor als dat ooit wordt rechtgezet. */ .preloader__out-overlay:before { transform: translateY(100%) !important; opacity: 1 !important; transition: transform 260ms cubic-bezier(.65, 0, .35, 1) !important; } .js-page-out .preloader__out-overlay:before { transform: translateY(0) !important; } /* Het menu schuift zijn eigen vlak; daar hoort dit niet overheen. */ .js-page-out.js-nav-active .preloader__out-overlay:before { transform: translateY(100%) !important; } /* AANKOMEN. Begint gedekt en loopt bovenlangs het beeld uit. GEEN ACCENTLIJN MEER (besluit Daan, 12-09). Er heeft er een avond een van 4px aan de onderrand gezeten, om de beweging leesbaar te maken toen het vlak nog papier op papier was. Dat was nodig zolang de schuif helemaal niet liep: het enige wat je zag was die lijn. Nu de transform wel wordt uitgevoerd, komt de pagina zelf van onderaf onder het vlak vandaan, en dat is de beweging. De lijn is daarmee overbodig geworden. 420 MS EN NIET 250. Op de schets legde het vlak de hoogte van een kaartje van 210px af in 250 ms; op een scherm van 900px is dat dezelfde tijd over ruim vier keer de afstand, en dan veegt de rand zo snel voorbij dat je hem niet ziet. 420 ms houdt het tempo in de buurt van wat er op de schets stond. Er staat hier geen bovengrens op: animsition's outDuration van 300 geldt alleen voor het weggaan, en dat loopt op deze site toch niet. */ .preloader:before { transform: translateY(0) !important; opacity: 1 !important; transition: transform 420ms cubic-bezier(.65, 0, .35, 1) !important; } .js-page-in.preloader:before { transform: translateY(-100%) !important; } /* HET LOGO BOVEN HET VLAK. 101 en niet 100: het vlak zit op 99. Tijdens het intro-scherm doet dit niets, want dat ligt op 9999. */ .preloader .header-logo, .js-page-out .header-logo { z-index: 101; } /* HET LOGO EN DE MENUKNOP STAAN ER METEEN. Tumar zet .header-logo__img op translateY(110%) in een overflow:hidden doos en laat hem pas omhoog komen bij js-page-in-out, met een seconde vertraging; de drie streepjes van de menuknop hebben hetzelfde. Die opkomst duurt langer dan de hele wissel en zou er dus altijd half afgekapt uitzien. */ .header-logo__img, .woocommerce .header-logo__img { transform: translateY(0); transition-delay: 0s; } .menu-icon__box:before, .menu-icon__inner:before, .menu-icon__inner:after { transition-delay: 0s; } /* MINDER BEWEGING. Geen schuif, alleen dekken en weer weg. Het vlak blijft nodig: zonder dekking zie je de pagina zich opbouwen. */ @media (prefers-reduced-motion: reduce) { .preloader:before, .preloader__out-overlay:before { transform: none !important; transition: opacity 120ms linear !important; } .preloader__out-overlay:before { opacity: 0 !important; } .js-page-out .preloader__out-overlay:before { opacity: 1 !important; } .preloader:before { opacity: 1 !important; } .js-page-in.preloader:before { opacity: 0 !important; } } /* ------------------------------------------------------------------------- 44. HET INTRO-SCHERM (12-09-2026). Eén keer per sessie. Wit vlak, het woordmerk in inkt onthult zich van links naar rechts in 1200 ms, 200 ms rust, dan schuift het vlak in 500 ms omhoog weg. Dat ritme komt van de vorige, statische vesmo.nl, waar de golf zichzelf tekende met stroke-dashoffset (site/css/vesmo.css:494-520 in het project van 21-08). De golf zit niet meer in het merk, dus hier onthult het woordmerk zich in plaats van dat het zich tekent. De haken staan in inc/intro.php, het opruimen in assets/vesmo-intro.js. De animatie zelf start bij de eerste paint en heeft geen javascript nodig; dat is met opzet, want een klasse die javascript moet zetten geeft altijd een frame vertraging en dus een zichtbare hapering aan het begin. WAAROM EEN BACKGROUND-IMAGE EN GEEN . Valkuil van 06-09 in dit project: het naadmerk in de voettekst was een met aspect-ratio en een transform binnen overflow:hidden, en op Daans iPhone stond het woordmerk dubbel. De herbouw naar een leeg venster met height:0 plus procentuele padding-bottom en het merk als background-image loste dat op. Zie .vs-naadmerk__venster in blok 38; dit is dezelfde, bewezen vorm. WAAROM CLIP-PATH EN GEEN MASK. Een SVG vraagt dat het woordmerk inline in het document staat; dat is een tweede kopie van 3,6 kB in elke pagina. background-clip knipt tot een box of tot tekst en doet geen veeg. clip-path: inset() knipt de box als geheel, precies wat hier nodig is, en loopt op de compositor. ------------------------------------------------------------------------- */ .vs-intro { position: fixed; /* inset en niet height:100vh: op iOS is 100vh groter dan het zichtbare venster, en dan schuift het vlak bij de wegschuif niet ver genoeg. */ inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: var(--vs-wit); touch-action: none; overscroll-behavior: contain; will-change: transform, opacity; animation: vs-intro-weg 500ms cubic-bezier(.65, 0, .35, 1) 1400ms forwards; } @keyframes vs-intro-weg { to { transform: translateY(-100%); opacity: 0; } } .vs-intro__woord { width: min(46vw, 420px); } .vs-intro__merk { display: block; height: 0; /* 681.8 / 100 uit de viewBox van het svg. Procentuele padding rekent met de breedte van het omhullende blok, dus dit is exact de letterhoogte, in elke browser en zonder aspect-ratio. */ padding-bottom: calc(100% / 6.818); background-image: url('vesmo-wordmark-inkt.svg'); background-repeat: no-repeat; background-size: 100% 100%; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); will-change: clip-path; animation: vs-intro-onthul 1200ms var(--vs-ease) forwards; } /* Alle vier de waarden uitschrijven, ook de nullen: inset() interpoleert alleen tussen vormen met hetzelfde aantal argumenten, dus inset(0) zou de animatie laten springen in plaats van lopen. En -webkit-clip-path hoort ook in de keyframe; oudere WebKit negeert anders de hele animatie. */ @keyframes vs-intro-onthul { to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } /* Geen clip-path (zeer oude WebKit): het woordmerk staat er gewoon, zonder onthulling. Beter een stilstaand logo dan een leeg wit vlak. */ @supports not (clip-path: inset(0 0 0 0)) { .vs-intro__merk { -webkit-clip-path: none; clip-path: none; animation: none; } } @media (max-width: 767px) { .vs-intro__woord { width: min(72vw, 320px); } } /* Helemaal overslaan, niet versnellen. */ @media (prefers-reduced-motion: reduce) { .vs-intro { display: none; } }