/* ============================================================ 2BU$Y — visual system Energy: Dutch main-stage pop/house. Electric blue signal, near-black canvas, festival-poster display type, glossy motion. ============================================================ */ /* ---- Lettertypes, zelf gehost (2026-10-06) ----------------- Stonden tot nu toe bij fonts.googleapis.com. Dat betekende dat Google het IP-adres van elke bezoeker zag, op elke pagina, vóórdat er iets te kiezen was — en het stond in geen van de twee juridische teksten. Nu van eigen domein: geen derde partij, geen extra DNS- en TLS-handshake. Dit zijn de VARIABELE versies: één bestand per familie dekt 400 t/m 700, waar de Google-aanroep vier losse gewichten per familie haalde (inclusief 300, dat nergens gebruikt werd). Samen 70 kB. Alleen de `latin`-subset. `latin-ext` (Pools, Tsjechisch, Hongaars) is 104 kB extra voor tekens die in Nederlandse content niet voorkomen; komt er ooit toch zo'n teken voorbij, dan valt alleen dát teken terug op Arial. De ?v=1 is handwerk en geen vergissing: serveFile() geeft alles met een ?v= een jaar `immutable` mee, en deze bestanden veranderen nooit. Vervang je er ooit één, verhoog dan het getal. */ @font-face{ font-family:'Inter'; src:url('fonts/inter-var.woff2?v=1') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } @font-face{ font-family:'Oswald'; src:url('fonts/oswald-var.woff2?v=1') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } /* ---- Tokens ------------------------------------------------ */ :root{ --accent:#0066ff; --accent-2:oklch(0.62 0.20 295); /* violet sibling, same energy */ --accent-ink:#ffffff; /* text on accent fills */ /* TWEE fonts, elk met een eigen taak: display = Oswald → wat je ZIET: grote koppen, logo, menu-overlay. Smal en hoog, posterachtig — dezelfde rol als het oude Anton, maar met meerdere gewichten. text/mono = Inter → wat je LEEST: menu, knoppen, lopende tekst, labels. Gemaakt voor schermen; hoge x-hoogte, dus scherp op 13–15px. Daar zat het leesprobleem. LET OP bij display: Oswald gaat tot gewicht 700 (niet 900). Koppen staan daarom op 600, de grootste (hero + footer-logo) op 700. mono is bewust dezelfde familie als text — het verschil zit nu in hoofdletters + letterafstand, niet in een ander lettertype. */ --font-stack:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-display:'Oswald', 'Arial Narrow', var(--font-stack); --font-text:'Inter', var(--font-stack); --font-mono:'Inter', var(--font-stack); --motion:1; /* 0..1.4 motion multiplier */ /* dark is default */ --bg:#050507; --bg-2:#0b0c11; --surface:#0e0f16; --text:#f4f5f7; --muted:#8b8e9c; /* De kleur van LOPENDE TEKST (2026-09-18). Bewust een eigen token en niet --muted: dat is de kleur van bijzaken (labels, eyebrows, de footerregel) en op een hele alinea leest die te donker. Deze zit tussen --muted en --text in: rustig genoeg om **vet** er wit bovenuit te laten springen, licht genoeg om een lap tekst prettig te lezen. Zie "RIJKE TEKST". */ --text-soft:#c3c6d0; --line:rgba(255,255,255,0.12); --line-strong:rgba(255,255,255,0.22); --ph-a:rgba(255,255,255,0.05); --ph-b:rgba(255,255,255,0.02); --glass:rgba(12,13,18,0.55); } [data-theme="light"]{ --bg:#eef0ee; --bg-2:#e4e6e4; --surface:#ffffff; --text:#07080c; --muted:#5b5e69; --text-soft:#34373f; /* zie --text-soft hierboven */ --line:rgba(0,0,0,0.12); --line-strong:rgba(0,0,0,0.24); --ph-a:rgba(0,0,0,0.06); --ph-b:rgba(0,0,0,0.02); --glass:rgba(255,255,255,0.6); --accent-ink:#ffffff; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--font-text); font-weight:400; line-height:1.45; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .6s ease, color .6s ease; } body.no-scroll{overflow:hidden;height:100vh} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img,canvas{display:block;max-width:100%} ::selection{background:var(--accent);color:#fff} /* Hier stond de regel die de gewone muisaanwijzer verbergde (`cursor:none`) ten gunste van een zelfgetekende cursor. Die is er op 2026-09-15 helemaal uit — zie het kopje CURSOR verderop. */ /* ---- Layout helpers --------------------------------------- */ .wrap{width:min(1400px,92vw);margin-inline:auto} /* Kleine labels blijven in hoofdletters — dat is hier stijl, geen leestekst. Wel veel minder letterafstand: 0.28em was te ver uit elkaar om vlot te lezen. */ .eyebrow{ font-family:var(--font-mono); font-size:clamp(11px,0.85vw,13px); font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted); } .accent{color:var(--accent)} /* Verberg op mobiel — voor bijzaak-tekst die op smalle schermen alleen ruimte kost (bijv. de intro-regel rechts in een .sec-head, die door flex-wrap onder de titel valt). Zet 'hide-mobile' naast de bestaande klassen; hier centraal geregeld, niet per plek. */ @media(max-width:700px){.hide-mobile{display:none}} section{position:relative} .sec-pad{padding:clamp(80px,11vh,160px) 0} /* Alle secties staan op --bg. Er was een `.sec-alt` die Mixes en Tekst + Afbeelding op --bg-2 zette om secties van elkaar te scheiden; op verzoek weg (2026-09-16), zodat de pagina één doorlopend zwart vlak is. De FOOTER houdt --bg-2 — dat is nu het enige dat van de ondergrond afwijkt, en precies daardoor markeert het het einde van de pagina. */ /* De intro-regel rechtsboven in een .sec-head. Smal gehouden (ongeveer een halve regel), zodat hij naast de kop past en niet mee-uitdijt. De maten stonden eerder inline per sectie; hier is 30ch de standaard en is 34ch de uitzondering voor twee blokken met een langere tekst. */ .sec-intro{max-width:30ch;text-align:right} .sec-intro-breed{max-width:34ch} /* Contact heeft geen .sec-head maar een eigen kolom: ruimer en links uitgelijnd. */ .ct-intro{max-width:36ch;line-height:1.8} /* Melding op de plek van een lege lijst ("Nog geen shows aangekondigd"). */ .list-empty{padding:22px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between; gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vh,64px)} .sec-title{ font-family:var(--font-display); font-weight:600; /* Oswald gaat tot 700; 600 = de koppenstijl */ line-height:0.88; letter-spacing:0.01em; text-transform:uppercase; /* h1-maat. De ondergrens ging op 2026-09-18 van 42px naar 56px — zie de uitleg bij h2.sec-title hieronder: op alles onder 950px was de h1 KLEINER dan de h2 eronder, omdat deze regel op 42px bleef staan terwijl de h2 nog doorgroeide. Boven 700px (waar 8vw de 56px passeert) verandert er niets. 2026-10-19 (op verzoek): h1 = clamp(52px,7vw,96px) en h2 = clamp(36px,4vw,56px), dus h2 ≈ 4/7 (0,57) × h1. Die verhouding vervangt de 0,68 uit de uitleg hieronder; de cqi-koppen (Contact, FAQ) volgen hem. */ font-size:clamp(52px,7vw,96px); } /* Alle h2-koppen op 64px (2026-09-15, op verzoek). Bewust `h2.sec-title` en niet `.sec-title`: dezelfde klasse kan via "Kopniveau" in het CMS ook een h1 zijn (op /mixtapes en /agenda is dat zo), en die houdt zijn eigen maat uit de regel hierboven. Een klasse + een tag wint van alleen de klasse, dus dit overschrijft precies de h2's en laat de h1's met rust. De twee andere koppen (.ti-title en .ct-title) staan bij hun eigen blok op dezelfde maat, en volgen sinds 2026-09-20 allebei hetzelfde klasse/tag-patroon als hier: de klasse draagt de h1-maat, `h2.ti-title` en `h2.ct-title` overschrijven hem naar de h2-maat. Alle drie de koppen kunnen nu dus een h1 zijn — de keuze "Kopniveau" zit bij élk blok met een titel in het CMS. VLOEIEND GEMAAKT (2026-09-18) — 76px is het PLAFOND, niet de enige maat. Waarom: 76px stond vast terwijl elke andere maat in deze sheet meeschaalt, en een lang woord kan niet afbreken. "SOUNDCLOUD" is op 76px 426px breed; .wrap is 92vw, dus 359px op een telefoon van 390px. Die 67px verschil kon je op /muziek wegscrollen — de hele pagina was te breed. AAN DE H1 GEKOPPELD (2026-09-18, later die dag, op verzoek). De eerste versie hierboven gebruikte 16vw: de grootste waarde waarbij "SOUNDCLOUD" op 320px nog binnen 92vw past. Dat loste het scrollen op, maar legde een tweede fout bloot die er al langer zat: op ELK scherm onder 950px was de h1 KLEINER dan de h2. De twee koppen hadden namelijk niets met elkaar te maken — de h1 loopt op 8vw naar een plafond van 140px, de h2 liep op 16vw naar 76px, dus de h2 groeide dubbel zo hard en de h1 stond op een ondergrens van 42px stil. Gemeten op een telefoon van 390px: h1 42px, h2 62px — de paginatitel was daar een derde KLEINER dan de sectiekop eronder, terwijl hij op een laptop van 1400px juist 1,47× zo groot is. Daarom is deze maat nu AFGELEID van de h1 in plaats van los gekozen: h2 = 0,68 × h1 → 8vw × 0,68 = 5,44vw ondergrens: 56px × 0,68 = 38px plafond: 76px (ongewijzigd) 0,68 is niet verzonnen: 76 ÷ 112 is precies de verhouding die op een scherm van 1400px al op de site stond. Het gevolg is dat h1 en h2 zich nu op élke breedte tot 1400px als 1,47 : 1 verhouden — dezelfde verhouding als op de laptop waar de maten vandaan komen. Vanaf 1400px verandert er niets: daar loopt deze clamp tegen zijn plafond van 76px, precies als hiervoor. Onder 1400px wordt de h2 wél kleiner (390px: 62 → 38px, 1024px: 76 → 56px). Dat is de bedoeling — die 62px op een telefoon was het gevolg van een maat die zo ruim mogelijk was gekozen, niet van een ontwerpkeuze. Zelfde clamp bij h2.ti-title en h2.ct-title — die drie horen dezelfde maat te houden. Verander je er één, verander dan alle drie. Het vangnet voor woorden die zelfs voor de ondergrens te lang zijn staat hieronder bij overflow-wrap. */ h2.sec-title{font-size:clamp(36px,4vw,56px)} /* VANGNET tegen een te brede pagina. De clamps hierboven dekken de koppen die er nu staan; een langer woord kan nog steeds uitsteken. Op /privacyverklaring gebeurt dat: die kop is een h1 en staat op een telefoon op de ondergrens van 56px, en is daar 491px breed tegen 359px ruimte. Hij brak ook al op de oude 42px (368px). Op /cookiebeleid gebeurt het alleen nog op een scherm van 320px: "COOKIEBELEID" is daar 328px tegen 294px ruimte. `anywhere` en NIET `break-word` — dat is hier het hele punt. setSplitText() zet elk woord in een met display:inline-block (nodig voor het kinetische effect). `break-word` laat de intrinsieke breedte van zo'n blokje ongemoeid, dus het blijft even breed uitsteken; `anywhere` telt wél mee in de min-content-breedte en laat het blokje krimpen. Zet je dit ooit om naar `break-word`, dan is het stil weer stuk. */ .sec-title,.ti-title,.ct-title{overflow-wrap:anywhere} /* Hier stond .sec-index — het kleine label linksboven in elke sectie ([ 01 — RELEASES ] enz.). Op 2026-09-15 op verzoek helemaal verwijderd: het invulvak is uit het CMS en het element uit cms-render.js. */ /* Subpagina's bestaan volledig uit blokken. Er stond hier een .page-head met een "terug naar home"-link en de paginatitel; die is verwijderd, en daarmee ook .page-back en .page-title. Het eerste blok moet daardoor zélf onder de vaste nav vandaan komen — het stond op padding-top:0 omdat de kop die ruimte al maakte. Dezelfde maat als die kop gebruikte, dus de pagina begint op dezelfde hoogte als voorheen. Let op: .sec-pad begint op 80px en de nav is bij een uitgeklapte balk al ~90px hoog, dus dit overschrijven met alleen .sec-pad zou botsen. Alleen op een pagina ZONDER hero (klasse .no-hero op #page-blocks, gezet in pagina.html): op de homepage staat er al een hero boven #page-blocks, dus daar mag het eerste blok gewoon zijn normale .sec-pad-padding houden. Vaste maat i.p.v. vh (2026-10-19, op verzoek): de nav is overal ~90px, dus de ruimte eronder hoort niet met de schermHOOGTE te groeien. Met 15vh stond de h1 op een hoge desktop ~70–100px onder de nav, op mobiel ~20px. Nu 110px op mobiel (ongewijzigd) tot 130px op desktop — voor elk eerste blok, ook een blok met achtergrondfoto (die had een eigen regel, nu overbodig). */ #page-blocks.no-hero > section:first-child{padding-top:clamp(110px,100px + 2vw,130px)} /* Footer tegen de onderkant op een pagina zonder inhoud (2026-09-15). Een pagina zonder blokken — een nieuwe pagina waar nog niets in staat, of /boeken — heeft een lege
van 0px hoog. De footer bleef daardoor direct onder de nav hangen, halverwege het scherm. Body als flexkolom met een groeiende
duwt hem naar beneden; staat er wél inhoud, dan verandert er niets omdat main dan groter is dan de resterende ruimte. Alleen op de subpagina-shell (pagina.html zet de klasse). De homepage heeft altijd een hero en de 404 regelt het zelf met .err{min-height:100vh}. Dit kan zo simpel omdat élk ander direct kind van body vast gepositioneerd is — .nav-bar, #menu en .player staan allemaal op position:fixed en doen dus niet mee aan de flexverdeling. Blijft dat zo als je hier iets toevoegt? Zo niet, dan wordt het een flexitem. svh naast vh: op mobiel is svh de kleinste stand van de viewport, dus de footer valt nooit half achter de browserbalk. Zelfde aanpak als .err. */ .page-shell{min-height:100vh;min-height:100svh;display:flex;flex-direction:column} .page-shell > #page-blocks{flex:1 0 auto} .page-shell > .footer{flex-shrink:0} /* ===================================================================== 404 — foutpagina (404.html, geserveerd door sendNotFound() in server.js) Het grote doorzichtige cijfer is een outline-behandeling (-webkit-text- stroke) en de kop is een gewone .sec-title. Dat cijfer was de tweeling van `.foot-mega`, het outline-merklogo in de footer; dat is op 2026-09-17 verdwenen, dus dit is nu de enige plek op de site met die behandeling. ===================================================================== */ /* 100svh naast 100vh: op mobiel telt vh de adresbalk mee, waardoor een verticaal gecentreerde pagina zichtbaar scheef komt te staan. */ .err{min-height:100vh;min-height:100svh;display:grid;align-content:center; justify-items:center;text-align:center; padding:clamp(120px,18vh,200px) 0 clamp(70px,10vh,120px)} /* Massief, niet doorzichtig. Dit begon als de outline-behandeling van het logo in de footer, maar die werkt daar omdat het decoratie is: een lijn van 1px om een letter van 400px is een haarlijn en in een muted lijnkleur nauwelijks te zien. Hier is het cijfer de boodschap, dus vol in de tekstkleur. */ /* Gewoon massieve cijfers in de tekstkleur. Er zijn hier een contour, een accentkleur, een verloop en een gloed langsgekomen — dit is wat het werd. padding-block houdt lucht om de letters: met line-height .8 is de contentbox korter dan de letters zelf. */ .err-code{font-family:var(--font-display);font-weight:700;line-height:.8; font-size:clamp(100px,20vw,330px);letter-spacing:.01em; padding-block:.06em;color:var(--text);user-select:none} .err-lead{max-width:44ch;margin:clamp(18px,3vh,34px) auto 0; font-size:clamp(15px,1.35vw,19px);line-height:1.7;color:var(--muted)} .err-actions{margin-top:clamp(28px,4.2vh,46px);display:flex;flex-wrap:wrap; justify-content:center;align-items:center;gap:14px} /* kinetic split-text primitives ----------------------------- */ .kin{display:inline-block;vertical-align:top} .kin > span{display:inline-block;transform:translateY(0.7em) rotate(4deg);opacity:0; will-change:transform,opacity} .reveal-on .kin > span{transform:none;opacity:1; transition:transform calc(0.9s / var(--motion)) cubic-bezier(.16,1,.3,1), opacity calc(0.6s / var(--motion)) ease} .fade-up{opacity:0;transform:translateY(40px);will-change:transform,opacity} .reveal-on.fade-up,.reveal-on .fade-up{opacity:1;transform:none; transition:opacity .8s ease, transform calc(.9s/var(--motion)) cubic-bezier(.16,1,.3,1)} /* placeholder surfaces -------------------------------------- */ .ph{position:relative;overflow:hidden;background:var(--bg-2); background-image:repeating-linear-gradient(135deg, var(--ph-a) 0 2px, transparent 2px 11px); border:1px solid var(--line);} .ph::after{content:attr(data-ph);position:absolute;inset:0;display:grid; place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);} .ph[data-ph=""]::after{display:none} /* ===================================================================== BUTTONS — centrale knop-stijl (dé plek om knoppen te beheren/toevoegen) De site kent DRIE knopsoorten. Nieuwe knop = alleen de juiste klasse: Label → 1. PRIMAIR (gevuld blauw) Label → 2. SECUNDAIR (outline) Label → 3. TERTIAIR (tekstknop, blauw) Alle hover-effecten staan hier centraal — nooit per plek dupliceren. In gebruik: hero (primair + secundair), nav CONTACT (primair), muziek "Alle releases" (primair), mixes "Alle mixes" (tertiair), formulier-submit (primair). ===================================================================== */ /* Zelfde leesbaarheidsingreep als bij de menu-links: was mono 12px in HOOFDLETTERS met .18em afstand. Nu gewone schrijfwijze, 14px, halfvet. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.01em; padding:14px 24px;border-radius:999px;cursor:pointer; border:1px solid var(--line-strong);background:transparent;color:var(--text); transition:background .3s ease,color .3s ease,border-color .3s ease, box-shadow .3s ease,transform .3s ease; position:relative;overflow:hidden} /* 1. PRIMAIR — helderder blauw + blauwe gloed op hover */ .btn-fill{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-fill:hover{background:#2b7bff;border-color:#2b7bff;color:#fff; box-shadow:0 12px 30px rgba(0,102,255,.45)} /* 2. SECUNDAIR — keert om op hover (vult met tekstkleur, label wordt donker) */ .btn:hover{transform:translateY(-3px);background:var(--text);color:var(--bg); border-color:var(--text);box-shadow:0 12px 28px rgba(0,0,0,.30)} /* 3. TERTIAIR — kale tekstknop in accentblauw. Hover: lichter blauw + onderstreping (leest als "opgelicht"). overflow:visible zodat de underline-offset niet wordt afgekapt. Staat ná .btn:hover, anders wint de secundaire hover. */ .btn-tertiary{border-color:transparent;background:none;color:var(--accent); padding-inline:0;overflow:visible} .btn-tertiary:hover{background:none;border-color:transparent;color:#5c9dff; box-shadow:none;transform:translateY(-1px); text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px} .btn .dot{width:7px;height:7px;border-radius:50%;background:currentColor; flex:none} /* ===================================================================== CURSOR — VERWIJDERD (2026-09-15, op verzoek) Hier stond een zelfgetekende cursor: een witte stip met een ring eromheen die er met vertraging achteraan liep, groter werd boven een link, en een label toonde uit `data-cursor`. De gewone muisaanwijzer werd daarvoor verborgen met `cursor:none`. Alles is weg: deze opmaak, het `.cursor`-element uit de drie shells, het blok in motion.js en alle `data-cursor`-attributen. Wil je zoiets ooit terug, bouw het dan opnieuw — er staat nu nergens meer een half restant dat bij een muisbeweging ineens tevoorschijn komt. ===================================================================== */ /* ===================================================================== NAV Opbouw: .nav-bar is de vaste balk over de volle breedte (achtergrond, verbergen bij scrollen), .nav is de gecentreerde inhoud van 1400px. Die twee lagen zijn nodig: een achtergrond op .nav alleen zou een zwevend paneel van 92vw geven i.p.v. een balk van rand tot rand. De markup komt uit headerHtml() in server.js. ===================================================================== */ .nav-bar{position:fixed;top:0;left:0;right:0;z-index:7000;color:#fff; border-bottom:1px solid transparent; transition:background .35s ease,border-color .35s ease, color .35s ease,backdrop-filter .35s ease} /* Voorbij de hero: leesbare ondergrond. Zonder dit zweeft de tekst over de cover-artwork van de muzieksectie, en die helderheid heb je niet in de hand. */ .nav-bar.is-stuck{background:var(--glass);color:var(--text); border-bottom-color:var(--line); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4)} /* De balk blijft ALTIJD zichtbaar. Eerder verborg hij zich bij omlaag scrollen; op verzoek weg, want dan moet je terugscrollen om bij het menu te komen. De balk krimpt wel (is-stuck hieronder), dus hij kost minder ruimte zodra je leest. */ .nav{width:min(1400px,92vw);margin-inline:auto; display:flex;align-items:center;gap:24px; padding-block:22px;transition:padding-block .35s ease} .nav-bar.is-stuck .nav{padding-block:12px} /* logo links — afbeelding uit de mediabibliotheek, linkt naar de homepage. Was de merknaam in tekst (.nav-brand); dat is vervangen door een echt logo. Staat er geen logo in header.json, dan rendert de server hier niets. De hoogte stuurt, de breedte volgt: een horizontale rechthoek mag zo breed worden als hij nodig heeft, maar nooit zo breed dat hij de menu-items van het scherm duwt — vandaar de max-width. */ .nav-logo{display:flex;align-items:center;flex:0 0 auto;transition:opacity .3s} .nav-logo:hover{opacity:.7} .nav-logo img{display:block;height:38px;width:auto;max-width:min(260px,34vw); object-fit:contain;transition:height .35s ease} /* Meekrimpen met de balk (die gaat van 22px naar 12px padding); zonder dit blijft het logo de balk op zijn oude hoogte houden. */ .nav-bar.is-stuck .nav-logo img{height:30px} @media(max-width:860px){ .nav-logo img{height:32px} .nav-bar.is-stuck .nav-logo img{height:26px} } .nav-links{display:flex;gap:30px;align-items:center;margin-left:auto} /* Leesbaarheid: dit was mono 13px in HOOFDLETTERS met .16em letterafstand. Die drie samen maakten het lastig te lezen. Nu gewone schrijfwijze, groter en zwaarder, met normale letterafstand. De labels in header.json staan al in gewone schrijfwijze ("Muziek"), dus die komen nu tot hun recht. */ .nav-links a{font-family:var(--font-text);font-size:15px;font-weight:600; letter-spacing:.01em;position:relative} .nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px; width:0;background:currentColor;transition:width .3s} .nav-links a:hover::after{width:100%} .nav-links a.nav-cta::after{display:none} /* actieve sectie (scrollspy in main.js). Niet op de CTA: die is al gevuld. */ .nav-links a.is-active:not(.nav-cta){color:var(--accent)} .nav-links a.is-active:not(.nav-cta)::after{width:100%;background:var(--accent)} @media(max-width:860px){.nav-links{display:none}} /* hamburger-knop (mobiel) — drie strepen i.p.v. het woord MENU */ .nav-menu-btn{display:none;background:none;border:0;padding:0;cursor:pointer; width:44px;height:44px;color:inherit;margin-left:auto; align-items:center;justify-content:center} @media(max-width:860px){.nav-menu-btn{display:flex}} .nav-burger{position:relative;display:block;width:26px;height:2px; background:currentColor;border-radius:2px} .nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0; width:26px;height:2px;background:currentColor;border-radius:2px} .nav-burger::before{top:-8px} .nav-burger::after{top:8px} /* overslaan naar de inhoud — alleen zichtbaar met toetsenbordfocus */ .skip-link{position:fixed;top:8px;left:8px;z-index:7600; transform:translateY(-160%);transition:transform .2s ease; background:var(--accent);color:var(--accent-ink); font-family:var(--font-mono);font-size:12px;letter-spacing:.14em; text-transform:uppercase;padding:12px 18px;border-radius:8px} .skip-link:focus,.skip-link:focus-visible{transform:none} #hero:focus,#page-blocks:focus{outline:none} /* ===================================================================== HERO ===================================================================== */ #hero{height:100svh;min-height:640px;position:relative;overflow:hidden; display:grid;place-items:center;--hero-ov:.5;--smoke-op:.7} #liquid{position:absolute;inset:0;width:100%;height:100%;z-index:0} /* photographic hero bg + legibility overlay */ .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:54% 24%;z-index:0;opacity:0;transition:opacity .6s ease} /* Overlay = VLAKKE zwarte laag: 0% = niets, 100% = helemaal zwart. Bewust geen gradient + mix-blend-mode meer — daarmee was 100% niet echt zwart en kon je niet donkerder dan het origineel. Sterkte komt uit het hero-blok in het CMS en wordt als --hero-ov (0–1) op #hero gezet. */ .hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; transition:opacity .6s ease;background:#000} /* mode: animated shader only (original) */ #hero[data-herobg="shader"] .hero-photo, #hero[data-herobg="shader"] .hero-overlay{opacity:0} #hero[data-herobg="shader"] #liquid{opacity:1;mix-blend-mode:normal} /* mode: photo only */ #hero[data-herobg="photo"] .hero-photo{opacity:1} #hero[data-herobg="photo"] .hero-overlay{opacity:var(--hero-ov)} #hero[data-herobg="photo"] #liquid{opacity:0} /* mode: photo + drifting smoke (default) */ #hero[data-herobg="both"] .hero-photo{opacity:1;filter:brightness(.72) saturate(1.03)} #hero[data-herobg="both"] .hero-overlay{opacity:var(--hero-ov)} #hero[data-herobg="both"] #liquid{opacity:var(--smoke-op);mix-blend-mode:screen} .hero-grain{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); mix-blend-mode:overlay} .hero-inner{position:relative;z-index:2;text-align:center;width:100%; padding-inline:4vw} /* De titel staat stil en is gewone tekst (2026-09-17, op verzoek). Eerder zat elke letter in een eigen voor de letter-voor-letter reveal, en was dit een flexrij waarin die spans de items waren. LETTER-SPACING — niet zomaar aanpassen. Tussen twee letters zat vroeger 0.01em letter-spacing plus 0.01em flex-`gap`, samen 0.02em. Nu de flexrij weg is moet die volle 0.02em uit letter-spacing komen, anders kruipt de titel zichtbaar in elkaar. Vandaar 0.02em en niet 0.01em. Centreren gaat via `text-align:center` op .hero-inner. */ .hero-word{font-family:var(--font-display);text-transform:uppercase; font-weight:700; /* het zwaarste dat Oswald heeft */ line-height:0.85;letter-spacing:0.02em;color:#fff; font-size:clamp(58px,var(--title-size,17vw),320px); text-shadow:0 6px 70px rgba(0,0,0,.55), 0 1px 18px rgba(0,0,0,.45)} /* Korte tijd heeft hier een kloppende $ gestaan (hartslagritme op het dollarteken). Op verzoek weer weg — de titel beweegt helemaal niet meer. */ .hero-sub{margin-top:clamp(14px,2.4vh,30px);display:flex;justify-content:center; gap:18px;flex-wrap:wrap;font-family:var(--font-mono); font-size:clamp(17px,2.2vw,32px);font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:#fff} [data-theme="light"] .hero-sub{color:rgba(0,0,0,.7)} .hero-actions{margin-top:clamp(26px,4vh,44px);display:flex;justify-content:center; flex-wrap:wrap;gap:16px} /* 15px: gelijkgetrokken met de menu-links, net als voorheen (die stonden toen allebei op 13px). Anders zijn de grootste knoppen van de site de kleinste tekst. */ .hero-actions .btn{font-size:15px;padding:16px 30px; min-width:240px;justify-content:center} .hero-cta{position:absolute;left:50%;bottom:clamp(22px,4vh,42px); transform:translateX(-50%);z-index:3;display:flex;flex-direction:column; align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px; letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)} [data-theme="light"] .hero-cta{color:rgba(0,0,0,.7)} .hero-cta .arr-down{display:flex;flex-direction:column;align-items:center;gap:4px; animation:arrowBounce 1.6s ease-in-out infinite} .hero-cta .arr-down i{display:block;width:10px;height:10px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:1} .hero-cta .arr-down i:nth-child(2){opacity:.55} .hero-cta .arr-down i:nth-child(3){opacity:.25} @keyframes arrowBounce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}} .hero-play{position:absolute;top:50%;right:clamp(20px,5vw,70px); transform:translateY(-50%);z-index:3;width:118px;height:118px;border-radius:50%; border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff; display:grid;place-items:center;font-family:var(--font-mono);font-size:10px; letter-spacing:.2em;text-transform:uppercase;animation:spinSlow 16s linear infinite} @keyframes spinSlow{to{transform:translateY(-50%) rotate(360deg)}} .hero-play .ico{position:absolute;inset:0;display:grid;place-items:center; animation:spinSlow 16s linear infinite reverse;font-size:20px} @media(max-width:860px){.hero-play{display:none}} /* ===================================================================== MARQUEE TICKER ===================================================================== */ .ticker{border-block:1px solid var(--line);overflow:hidden; background:var(--accent);color:var(--accent-ink);padding:18px 0} .ticker[data-variant="outline"]{background:transparent;color:var(--text)} .ticker-track{display:flex;gap:0;white-space:nowrap;width:max-content; will-change:transform;font-family:var(--font-display);font-weight:600; text-transform:uppercase; font-size:clamp(30px,5vw,76px);line-height:1} .ticker-track span{padding-inline:.35em;display:inline-flex;align-items:center;gap:.35em} .ticker-track .star{font-size:.5em;transform:translateY(-.1em)} /* ===================================================================== RELEASES — cover-kaarten (1:1), 3 per rij Desktop : de kaart ÍS de cover. Hover → donkere overlay + inzoom, play-knop in het midden, titel/artiest onderin. Mobiel : 1 kolom, horizontale kaart (mini-cover · tekst · play rechts). ===================================================================== */ .tag{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px; background:var(--accent);color:var(--accent-ink);margin-bottom:14px} .music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,28px)} .music-more,.mixes-more{padding-top:clamp(22px,3vw,36px)} .mu-card{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden; background:var(--bg-2)} /* cover = knop (hele vlak klikbaar) */ .mu-art{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0; background:none;cursor:pointer;display:block;overflow:hidden} .mu-art img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.16,1,.3,1)} .mu-card:hover .mu-art img{transform:scale(1.08)} .mu-noart{position:absolute;inset:0;display:grid;place-items:center; font-size:34px;color:var(--muted)} /* donkere overlay + play-knop */ .mu-ovl{position:absolute;inset:0;display:grid;place-items:center; background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s} .mu-card:hover .mu-ovl,.mu-card:focus-within .mu-ovl, .mu-card.playing .mu-ovl{opacity:1} .mu-play{width:clamp(52px,4.6vw,68px);aspect-ratio:1;border-radius:50%; background:var(--accent);color:var(--accent-ink);display:grid;place-items:center; transform:scale(.82);transition:transform .35s} .mu-card:hover .mu-play,.mu-card.playing .mu-play{transform:scale(1)} /* Beide iconen zitten in de knop; alleen de juiste is zichtbaar. Scheelt het herschrijven van HTML bij elke wisseling — de klasse .playing doet het. */ .mu-play .ic,.mu-play-btn .ic{display:none;place-items:center} .mu-play .ic-play,.mu-play-btn .ic-play{display:grid} .mu-card.playing .mu-play .ic-play, .mu-card.playing .mu-play-btn .ic-play{display:none} .mu-card.playing .mu-play .ic-pause, .mu-card.playing .mu-play-btn .ic-pause{display:grid} .mu-play svg{width:clamp(20px,1.85vw,27px);height:auto;display:block} /* de driehoek oogt links-zwaar, het pauzeteken niet */ .mu-play .ic-play svg{margin-left:6%} /* titel + artiest onderin — verschijnen bij hover */ .mu-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none; padding:clamp(14px,1.6vw,22px); background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.45) 55%,transparent); opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s} .mu-card:hover .mu-meta,.mu-card:focus-within .mu-meta, .mu-card.playing .mu-meta{opacity:1;transform:none} .mu-title{font-size:clamp(15px,1.25vw,19px);font-weight:600;line-height:1.15;color:#fff} .mu-artist{font-family:var(--font-mono);font-size:clamp(11px,.85vw,13px); letter-spacing:.06em;color:rgba(255,255,255,.72);margin-top:5px} /* Bronlinks in de kaart (SoundCloud / Spotify). .mu-meta staat op pointer-events:none — zodat een klik op de titel gewoon de cover-knop eronder raakt — dus de links zetten hun klikbaarheid zelf terug. */ .mu-srcs{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px} .mu-src{pointer-events:auto;display:inline-flex;align-items:center;gap:7px; font-family:var(--font-text);font-size:12px;font-weight:600; letter-spacing:.01em;color:rgba(255,255,255,.78);transition:color .25s} .mu-src svg{width:15px;height:15px;flex:none} /* huisstijlkleur van de dienst, alleen bij hover */ .mu-src.is-sc:hover{color:#ff5500} .mu-src.is-sp:hover{color:#1db954} .mu-play-btn{display:none} /* alleen mobiel */ /* Mobiele weergave van deze kaarten staat centraal onder "MOBIELE MEDIAKAARTEN" (gedeeld met de mix-archiefkaarten). */ /* ===================================================================== MIXES — ÉÉN speler-kaart Bovenin de uitgelichte mix: cover, titel en een afspeelbalk. Daaronder, binnen dezelfde kaart, de overige mixes als regels. WAAROM DIT GEEN RASTER MEER IS: de sectie toont er hooguit vier (1 groot + 3 kaarten in een 3-koloms raster), maar in de praktijk staan er vaak maar één of twee ingesteld. Dan stond dat raster half leeg en had het grote blok een lege rechterhelft. Bovendien heeft élke mix cover-artwork in het CMS, en dat kwam nergens in beeld — terwijl de muzieksectie er juist helemaal op leunt. Dit ontwerp staat goed bij 1, 2, 3 én 4 mixes. ===================================================================== */ /* badge bij de uitgelichte mix (leeg = door JS verborgen) */ .mx-badge{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px; background:var(--accent);color:var(--accent-ink);line-height:1.4} /* --mix-gap is de ENIGE verticale maat in deze kaart: de ruimte boven de cover, tussen de cover en de scheidingslijn, tussen lijn en regel, en onder de laatste regel. Eén variabele, zodat die witruimte overal gelijk blijft. */ .mix-feature{ --mix-gap:clamp(14px,1.7vw,22px); border:1px solid var(--line);border-radius:16px; background:var(--surface); padding:var(--mix-gap) clamp(16px,2vw,26px)} /* Actief = blauwe titel, zowel boven als bij de regels. Bewust GEEN rand om de kaart: die lichtte het geheel op terwijl er maar één mix speelt. */ .mix-feature.is-playing .mf-title{color:var(--accent)} /* ── bovenste helft: cover · tekst · speler ── */ .mf-top{ display:grid; grid-template-columns:clamp(96px,14vw,190px) 1fr; gap:clamp(16px,2.6vw,34px); align-items:center; cursor:pointer} .mf-cover{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden; background:var(--bg-2);border:1px solid var(--line)} .mf-cover img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .mf-top:hover .mf-cover img{transform:scale(1.05)} .mf-noart{position:absolute;inset:0;display:grid;place-items:center; font-size:clamp(22px,3vw,38px);color:var(--muted)} .mf-main{min-width:0} .mf-header{display:flex;align-items:center;gap:12px;margin-bottom:10px} .mf-title{font-family:var(--font-display);text-transform:uppercase; font-weight:600;letter-spacing:.01em; font-size:clamp(26px,3.8vw,58px);line-height:.95; overflow-wrap:anywhere;transition:color .3s} .mf-artist{font-family:var(--font-mono);font-size:clamp(11px,1vw,13px); letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px} /* ── de speler: ronde knop · waveform · tijd ── */ .mf-player{display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:clamp(12px,1.6vw,20px);margin-top:clamp(14px,2vw,22px)} .mf-play-btn{width:clamp(44px,4vw,54px);aspect-ratio:1;flex-shrink:0; border:none;border-radius:50%;background:var(--accent);color:var(--accent-ink); display:grid;place-items:center;font-size:14px;cursor:pointer; transition:transform .3s,box-shadow .3s} .mf-play-btn:hover{transform:scale(1.07);box-shadow:0 8px 32px rgba(0,102,255,.35)} .mf-play-ico{line-height:1} /* De balk is de waveform zelf: het gespeelde deel kleurt vol accent (zie assets/waveform.js). --prog wordt door cms-render.js gezet en stuurt de speelkop; de padding maakt de klikzone iets hoger dan de balkjes. */ .mf-bar{position:relative;cursor:pointer;padding-block:6px;--prog:0} .mf-wave{display:block;width:100%;height:clamp(38px,4.2vw,60px)} .mf-bar::after{content:'';position:absolute;top:6px;bottom:6px; left:calc(var(--prog) * 100%);width:2px;background:var(--text); opacity:0;transition:opacity .3s} .mix-feature.is-playing .mf-bar::after{opacity:.8} .mf-time{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em; color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} .mf-sep{opacity:.45;margin:0 4px} /* ── de overige mixes: regels binnen dezelfde kaart ── De negatieve ondermarge heft de padding van de kaart op, zodat de ruimte onder de laatste regel gelijk is aan --mix-gap in plaats van dubbel te tellen. De hover-band blijft daardoor wél even hoog als bij de andere. */ .mix-archive:not(:empty){margin-top:var(--mix-gap);border-top:1px solid var(--line); margin-bottom:calc(var(--mix-gap) * -1)} .ma-card{ display:grid; grid-template-columns:clamp(38px,4vw,50px) minmax(0,1fr) auto auto; align-items:center;gap:clamp(10px,1.6vw,20px); padding:var(--mix-gap) 2px; border-top:1px solid var(--line);cursor:pointer; transition:background .3s} .ma-card:first-child{border-top:0} .ma-card:hover{background:var(--ph-a)} .ma-art{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden; background:var(--bg-2);display:block} .ma-art img{width:100%;height:100%;object-fit:cover;display:block} .ma-noart{position:absolute;inset:0;display:grid;place-items:center; font-size:16px;color:var(--muted)} .ma-body{min-width:0} .ma-title{font-family:var(--font-display);text-transform:uppercase; font-weight:600;letter-spacing:.01em; font-size:clamp(15px,1.6vw,24px);line-height:1.05; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .3s} .ma-artist{font-family:var(--font-mono);font-size:11px;color:var(--muted); letter-spacing:.12em;text-transform:uppercase;margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ma-dur{font-family:var(--font-mono);font-size:12px;color:var(--muted); letter-spacing:.06em;font-variant-numeric:tabular-nums} .ma-play{width:38px;height:38px;border-radius:50%; border:1px solid var(--line-strong);display:grid;place-items:center; font-size:11px;color:var(--text); transition:background .3s,border-color .3s,color .3s} .ma-card:hover .ma-play,.ma-card.is-playing .ma-play{ background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .ma-card.is-playing .ma-title{color:var(--accent)} /* Smaller: cover en titel omlaag, de tijd zakt onder de balk. */ @media(max-width:820px){ .mf-top{grid-template-columns:clamp(84px,22vw,120px) 1fr;align-items:start} .mf-player{grid-template-columns:auto 1fr;row-gap:8px} .mf-time{grid-column:2;justify-self:end} } /* Te smal voor 64 balkjes: alleen knop + tijd. */ @media(max-width:560px){ .mf-bar{display:none} .mf-time{grid-column:auto;justify-self:end} } /* ===================================================================== MOBIELE MEDIAKAARTEN (≤700px) — GEDEELD door de muzieklijst (.music-grid .mu-card) en het mix-archief (.ma-card). Beide worden hier één horizontale lijstregel: mini-cover links · titel + kleinere artiest · play rechts. Voeg een nieuw kaarttype toe door het aan deze selectors te hangen — niet opnieuw uitschrijven. LET OP: alleen de LAYOUT is gedeeld, de randen bewust niet: · muziek → doorlopende, schermbrede lijnen zonder doos · mixes → losse rechthoek met rand rondom (zoals op desktop) Hou die twee gescheiden; ze zien er expres verschillend uit. WAAROM `.music-grid .mu-card` EN NIET GEWOON `.mu-card` (2026-09-18): dezelfde kaart staat sinds het Muziek highlight-blok ook op een tweede plek, in `.mh-card`, en die moet op mobiel juist vierkant BLIJVEN — daar is hij het onderwerp van de sectie, niet een regel in een lijst. Deze hele media query gaat dus alleen over kaarten in de lijst. Zie "MUZIEK HIGHLIGHT" verderop voor wat de highlight-kaart op touch doet. ===================================================================== */ @media(max-width:700px){ .music-grid{grid-template-columns:1fr} /* GEDEELDE LAYOUT (bewust zonder randen — die verschillen per sectie) */ .music-grid .mu-card,.ma-card{aspect-ratio:auto;display:grid; grid-template-columns:60px 1fr auto;align-items:center;gap:14px; background:transparent;transform:none} /* MUZIEK — doorlopende, schermbrede lijnenlijst (geen doos). .wrap is min(1400px,92vw) → 4vw gutter; die halen we weg met een negatieve marge en geven we terug als padding, zodat de lijn doorloopt tot de schermrand maar de inhoud uitgelijnd blijft. Elke kaart border-top, alleen de laatste ook border-bottom → de onderlijn van de één is de bovenlijn van de volgende. Werkt alleen zolang .wrap/section géén overflow:hidden hebben. */ .music-grid{gap:0} .music-grid .mu-card{border:0;border-top:1px solid var(--line);border-radius:0; margin-inline:-4vw;padding:14px 4vw} .music-grid .mu-card:last-child{border-bottom:1px solid var(--line)} /* MIXES — regels binnen de speler-kaart, zoals op desktop. Alleen de kolommen worden krapper; de scheidingslijn en --mix-gap blijven. */ .ma-card{padding:var(--mix-gap) 0} /* mini-cover links */ .music-grid .mu-art,.ma-art{position:relative;width:60px;height:60px;border-radius:6px; overflow:hidden;display:block;background:var(--bg-2)} .ma-art img,.music-grid .mu-art img{width:100%;height:100%;object-fit:cover;display:block} .music-grid .mu-card:hover .mu-art img{transform:none} .music-grid .mu-ovl{display:none} .music-grid .mu-noart,.ma-noart{position:absolute;inset:0;display:grid;place-items:center; font-size:22px;color:var(--muted)} /* tekstblok — altijd zichtbaar (geen hover op touch) */ .music-grid .mu-meta,.ma-body{position:static;opacity:1;transform:none;padding:0; background:none;pointer-events:auto;min-width:0} .music-grid .mu-title,.ma-title{color:var(--text);font-family:var(--font-text); font-size:15px;font-weight:600;line-height:1.15;text-transform:none; letter-spacing:normal;margin-top:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .music-grid .mu-artist,.ma-artist{color:var(--muted);font-size:12px;margin-top:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* verbergen op mobiel: de duur (te krap naast titel + knop) */ .ma-dur{display:none} /* play-knop rechts */ .music-grid .mu-play-btn,.ma-play{display:grid;place-items:center;position:static; width:42px;height:42px;border-radius:50%; border:1px solid var(--line-strong);background:transparent;color:var(--text); cursor:pointer;transition:background .3s,border-color .3s,color .3s} .music-grid .mu-play-btn svg{width:15px;height:15px;margin-left:2px} /* actieve staat (alleen muziek — mixes wisselen enkel hun play-icoon) */ .music-grid .mu-card.playing{border-color:var(--accent)} .music-grid .mu-card.playing .mu-play-btn{background:var(--accent);border-color:var(--accent); color:var(--accent-ink)} .music-grid .mu-card.playing .mu-title{color:var(--accent)} } /* ===================================================================== SHOWS (vertical list — agenda stijl) ===================================================================== */ .show-list{border-top:1px solid var(--line);transition:border-color .35s; /* Eén raster voor de hele lijst; elke regel (en elke maandgroep) neemt de kolommen over met `subgrid`. Zo is de knopkolom overal zo breed als de breedste knop en zijn alle knoppen even breed (2026-10-19, op verzoek). Datumkolom vast, zodat de namen in elke regel op dezelfde lijn beginnen. Max 112px sinds de datum 30px is (was 140 bij 40px); "DONDERDAG" op 13px en "28 SEP" op 30px zijn allebei zo'n 85px. */ display:grid; grid-template-columns:clamp(96px,8vw,112px) minmax(0,1fr) auto; column-gap:clamp(14px,2.5vw,44px)} .sh-groep,.show-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid} .sh-maand,.show-list .list-empty{grid-column:1/-1} .show-row{ /* kolommen + gap komen van .show-list (subgrid, zie hierboven) */ align-items:center; padding:clamp(12px,1.8vw,24px) 6px; border-bottom:1px solid var(--line); /* `overflow:hidden` stond hier tot 2026-09-29 en komt niet terug: de naam en de plaats kappen zichzelf af met hun eigen masker, en er loopt niets anders buiten de regel. */ position:relative; /* GEEN cursor:pointer (weg op 2026-09-29): alleen de knop is klikbaar, de rij zelf is nergens een link naartoe. Een handje boven de hele regel beloofde iets dat er niet is. */ transition:border-color .35s} /* ⚠️ HET HELE NAAR-VOREN-EFFECT IS ERUIT (2026-10-08, op verzoek). Tussen 2026-09-29 en vandaag kwam één regel als kaart naar voren — opgetild met `transform:scale(1.02)`, met een pseudo-element eronder dat buiten de regel uitstak en een schaduw naar twee kanten gaf — terwijl de rest van de lijst naar 70% dimde. Bij het laden stond de bovenste zo, daarna verhuisde het met de muis mee en bleef het staan waar de muis het laatst was. Dat is nu allemaal weg: elke regel staat op volle sterkte, niets tilt op, niets dimt. Wat eruit ging: `.show-row::before` (de kaart), `.show-row.actief` (optillen + aanzetten), `isolation:isolate` en de transform/opacity-overgang op `.show-row`, de hele `--rij`-tabel, en aan de JS-kant `volgDeMuis()` + `FIJNE_MUIS` + het bijhouden van die klasse in `paintShowRows()`. Ook de lege `.sh-fill` in elke regel is meegegaan — die was een overblijfsel van een nog oudere versie van dit effect en stond al op `display:none`. Alles staat in git (laatste versie: commit vóór v1.101.6). Zet er niets van terug zonder dat erom gevraagd wordt. Wat WEL blijft: een uitverkochte regel staat terughoudender dan de rest. Dat is geen hover-effect maar informatie — zo'n show is voorbij als mogelijkheid. 45%, de waarde die een uitverkochte regel had als hij naar voren stond. */ .show-list .show-row.sold{opacity:.45} /* date block — dag en maand naast elkaar, weekdag eronder, even groot als de naam: 30px op desktop (2026-10-19, op verzoek; was 40px, daarvoor dag boven maand, 61/36px). */ /* Onder dag + maand de weekdag als `.sh-city` — dezelfde regel als de plaats onder de naam, zodat de twee kolommen exact gelijk lopen. */ .sh-date{min-width:0} .sh-dm{display:flex;align-items:baseline;gap:.25em;line-height:1; font-size:clamp(24px,3vw,30px)} .sh-day,.sh-mon{font-family:var(--font-display);font-weight:600;font-size:1em; line-height:.92;text-transform:uppercase;letter-spacing:.01em; font-variant-numeric:tabular-nums} /* event info — naam van de locatie/het evenement, met de plaats eronder. Het jaar (.sh-yr) en de aparte typeregel (.sh-venue) zijn er op 2026-09-29 uit gehaald; staan hier dus bewust niet meer. */ .sh-info{min-width:0} .sh-name{font-family:var(--font-display);text-transform:uppercase; font-weight:600;letter-spacing:.01em; font-size:clamp(24px,3vw,30px);line-height:.92; transition:color .35s} .sh-city{font-family:var(--font-mono);font-size:13px; letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-top:8px; transition:color .35s} /* Te lange namen en plaatsnamen faden uit aan de rechterkant in plaats van af te breken of over twee regels te lopen (2026-09-29, op verzoek). Zelfde truc als in de speler — zie de uitleg bij `.player .meta .t`: het masker zit op de DOOS, niet op de tekst. Past de naam gewoon, dan eindigt hij vóór het verloop en zie je niets. DAT WERKT ALLEEN zolang .sh-info de breedte van zijn kolom vult. Die kolom is `1fr` in .show-row, dus dat zit goed — maar zet .sh-info nooit op `width:max-content` of `justify-self:start`, want dan is de doos zo breed als de langste regel en faadt élke naam. `min-width:0` hierboven is om dezelfde reden nodig: zonder dat weigert een grid-kolom te krimpen onder zijn inhoud en loopt de naam de knop in. */ .sh-name,.sh-city{white-space:nowrap;overflow:hidden; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)} /* De weekdag onder de datum (ook .sh-city) vervaagt NIET: die is nooit te lang, en "DONDERDAG" kwam anders net in het verloop. De datumkolom is breed genoeg gemaakt voor de langste dag (ook op een telefoon, zie hieronder). */ .sh-date .sh-city{-webkit-mask-image:none;mask-image:none;overflow:visible} /* Maandkoppen (blok-vinkje "Per maand", aan op /agenda). Elke maand een eigen groep met de bovenrand; de lijst zelf heeft hem dan niet. Maat 18–22px: duidelijk een kop boven de regels, maar kleiner en gedempt naast de 30px namen, zodat de shows zelf de blikvanger blijven. */ .show-list.per-maand{border-top:0} .sh-maand{font-family:var(--font-display);font-weight:600;text-transform:uppercase; letter-spacing:.01em;font-size:clamp(18px,1.6vw,22px);color:var(--muted); margin:clamp(32px,4vw,56px) 0 clamp(10px,1.2vw,16px)} .sh-maand:first-child{margin-top:0} .sh-groep{border-top:1px solid var(--line)} /* right col — alleen nog de knop of "Uitverkocht" */ /* stretch: de knop vult de (gedeelde) kolom, dus alle knoppen even breed */ .sh-right{display:flex;flex-direction:column;align-items:stretch; gap:10px;text-align:right} /* ⚠️ De knop is sinds 2026-09-29 `btn btn-fill` (de primaire blauwe knop). Zet hier dus GEEN `background`, `border`, `color` of `border-radius` meer neer: deze regel staat verderop in het bestand dan de knoppen-sectie en wint bij gelijke specificiteit — precies de fout die de oude "Meer shows"-knop eerder maakte. Ook het FORMAAT hoort hier niet: deze knop moet even groot zijn als de boekingsknop onderaan de pagina (op verzoek, 2026-09-29), en die is een kale `.btn.btn-fill`. Hier stond even `font-size:13px; padding:9px 16px` — dat maakte hem kleiner dan de rest en is er daarom uit. Blijft over: niet afbreken, en geen onderstreping omdat het een link is. */ .sh-btn{white-space:nowrap;text-decoration:none} .sh-ico{width:16px;height:16px;flex:none} .sh-sold{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} /* sold row */ /* UITVERKOCHT staat zachter; die regel staat bovenaan deze sectie, bij wat er van het verwijderde naar-voren-effect overbleef. Hij stond hier tot 2026-09-29 en zat daarna een tijd in de `--rij`-tabel die met dat effect is verdwenen. `pointer-events:none` stond hier ook achter en komt niet terug: er valt niets te blokkeren — bij uitverkocht wordt de knop niet getekend, dus er zit geen link in de regel. */ /* Knop onder de agenda — een gewone LINK, meestal naar /agenda. Hier stonden tot 2026-09-29 twee dingen die weg zijn met het uitklappen: `.show-row.show-extra` (rijen die met een max-height-animatie open schoven) en de opmaak van `.shows-more-btn` (een pijltje dat omklapte en een label dat wisselde tussen "Meer" en "Minder"). Die knop laadt niets meer bij; de homepage toont een handvol shows en linkt door. De opmaak van de knop zelf komt van `.btn.btn-fill` in de knoppen-sectie. Zet hier dus geen `border`, `background`, `color` of `padding` neer — dat overschrijft `.btn-fill`, want deze regel staat verderop in het bestand en wint bij gelijke specificiteit. Hier hoort alleen de plaatsing. Links, net als onder Muziek en Mixes (2026-10-19, op verzoek; was gecentreerd). */ .shows-more-wrap{display:flex;justify-content:flex-start;padding-top:clamp(20px,3vw,36px)} @media(max-width:640px){ /* De datumkolom was `clamp(60px,18vw,90px)` — op een telefoon van 390px dus 70px breed, terwijl "05" en "OKT" daar samen zo'n 35px van vullen. Die lege helft las als een groot gat tussen de datum en de naam, nog vóór de `gap` begon. Kolom smaller én gap kleiner (2026-09-29). */ /* min. 80px: daar past "DONDERDAG" (11px, .08em) in — zie .sh-date .sh-city */ .show-list{grid-template-columns:clamp(80px,21vw,100px) minmax(0,1fr) auto; column-gap:clamp(8px,2.2vw,14px)} /* De plaats stond hier verborgen zolang hij in de rechterkolom zat en daar met de knop vocht. Sinds 2026-09-29 staat hij onder de naam en past hij ook op een telefoon — en hij blijft op één regel: hij breekt niet af maar faadt weg, net als de naam erboven. Zet hier dus geen `white-space:normal` neer. */ /* 11px op een telefoon (was 13, 2026-10-19 op verzoek) — geldt ook voor de weekdag */ .sh-city{font-size:11px;letter-spacing:.08em;margin-top:5px} .sh-name,.sh-city{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)} /* De knop is op desktop een kale `.btn.btn-fill`, even groot als de boekingsknop — zo gevraagd. Op een telefoon klopt dat formaat niet meer: die knop is daar breder dan de naam ernaast en trekt de hele regel scheef. Alleen hier dus kleiner. Kleur, rand en radius blijven van `.btn-fill`; zet die hier niet neer. */ .sh-btn{font-size:12px;padding:10px 15px;gap:7px} .sh-ico{width:14px;height:14px} } /* ===================================================================== MEDIA / VISUALS — vaste indeling (bloktype 'video') Vier plekken in plaats van een vrij raster: ┌───────────────────────┬─────────┐ │ liggend 16:9 │ staand │ │ (2/3 breed) │ 9:16 │ ├───────────┬───────────┤ (1/3) │ │ foto 1/3 │ foto 1/3 │ │ └───────────┴───────────┴─────────┘ Wie bepaalt welke hoogte? • De drie kolommen zijn even breed (w), met `gap` ertussen. • De staande tegel rechts is w breed en dus w × 16/9 hoog. Die hoogte is de hoogte van het hele blok. • De liggende tegel is 2w + gap breed en dus (2w+gap) × 9/16 hoog. • Wat er overblijft, is de hoogte van de twee foto's: w × 16/9 − (2w+gap) × 9/16 − gap ≈ 0,65 w − 1,6 gap. Bij een volle .wrap (1400px) komt dat neer op zo'n 452 × 261 — ongeveer 16:9, dus de rij eronder oogt vanzelf als twee liggende foto's. Daarom mag hier wél aspect-ratio (het oude staande raster gebruikte met opzet een ::before-spacer): de hoogtes zijn hier niet meer "de hoogste tegel wint", maar liggen vast. .med-main is een flexkolom die door het grid op de hoogte van de staande tegel wordt gerekt; de fotorij (flex:1) pakt precies wat de liggende tegel overlaat. ===================================================================== */ .med-grid{--med-gap:clamp(12px,1.6vw,22px); display:grid;grid-template-columns:repeat(3,1fr);gap:var(--med-gap);align-items:stretch} .med-main{grid-column:span 2;display:flex;flex-direction:column;gap:var(--med-gap);min-height:0} .med-hero{flex:0 0 auto;aspect-ratio:16/9} .med-row{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--med-gap)} .med-side{aspect-ratio:9/16} /* knoppen linksonder, onder het geheel */ .med-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(18px,2.4vw,30px)} .vid{display:block;position:relative;border-radius:12px;overflow:hidden;cursor:pointer; background:#0a0a0a;border:1px solid var(--line);min-height:0} .vid .ph{position:absolute;inset:0;border:0} /* media uit de bibliotheek vult de tegel; zonder media blijft .ph staan */ .vid-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transition:transform calc(.7s/var(--motion)) cubic-bezier(.16,1,.3,1)} .vid:hover .vid-media{transform:scale(1.04)} /* ── De waas over de tegel (2026-09-29, op verzoek) ────────────────────── Een tegel toont eerst alléén beeld. Ga je er met de muis overheen, dan komt hier een donkere laag overheen waarop de tekst verschijnt. Tot 2026-09-29 stond het bijschrift er permanent, met alleen een verloop eronder. Een verloop aan de kant waar de tekst staat, meer niet: dat houdt hem leesbaar op een lichte foto en laat de rest van het beeld met rust. De vlakke verdonkering die er tot 2026-10-08 overheen lag, is eruit op verzoek — die was er voor de cijfers middenop, en die zijn weg. Een YouTube-tegel houdt hem wél (daar staat de grote speelknop middenop) en draait het verloop om, want daar staat de titel BOVENIN. Het verloop reikt tot **34%** van de tegel, niet tot 58% zoals tot 2026-10-08 (op verzoek: het liep veel te ver door). Dat is ruim voor wat er staat: sinds het bijschrift op één regel wordt afgekapt is dat een naamregel plus één regel tekst, onderkant op 13px — samen zo'n 45px. Maak je `.cap` ooit hoger (meer regels, grotere letter), dan moet dit percentage mee; alleen `.vid-yt` staat los, want daar zit de tekst bovenin. Waarom een eigen element en geen ::after op de tegel: die is al bezet geweest, en met een element is het omdraaien voor YouTube één regel. Op een AANRAAKSCHERM bestaat hover niet. Daar blijft alleen het verloop staan — een vlakke waas zou elke foto de hele tijd donker maken. Zie het blok `@media(hover:none)` hieronder; daar staan alle aanraakstanden bij elkaar. */ .vid-ov{position:absolute;inset:0;z-index:1;pointer-events:none; opacity:0;transition:opacity .35s ease; background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0) 34%)} .vid-yt .vid-ov{ background:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,0) 58%),rgba(0,0,0,.4)} .vid:hover .vid-ov,.vid:focus-visible .vid-ov{opacity:1} /* Teken dat er iets te spelen valt. Alleen bij YouTube: de eigen knopvorm van YouTube, maar in het blauw van de site met een witte driehoek — niet in YouTube-rood, dat vloekt met alles eromheen. Wat TikTok en Instagram krijgen, is nog niet besloten; die hebben voorlopig niets. De svg zit in cms-render.js (YOUTUBE_PLAY_SVG); het witte vlak zit dáár, want het pad heeft de driehoek eruit gesneden. */ .vid .play-ico{position:absolute;inset:0;display:grid;place-items:center;z-index:2} .yt-play{width:clamp(62px,6.4vw,96px);color:var(--accent);display:block; filter:drop-shadow(0 6px 22px rgba(0,0,0,.45));transition:transform .35s} .yt-play svg{width:100%;height:auto;display:block} .vid:hover .yt-play{transform:scale(1.07)} /* De cijfers van de post (weergaven, likes, reacties) stonden hier tot 2026-10-08 middenop, bij hover. Eruit op verzoek: ze lagen over de naam en het bijschrift heen en vroegen een vlakke waas over de hele foto. De regels staan in git; het blok bewaart de cijfers nog wel (CMS → Cijfers ophalen). */ /* ── De tekst op de tegel ──────────────────────────────────────────────── Twee soorten tegel, twee plekken (de klasse komt uit medTile): .vid-social accountnaam + bijschrift linksonder, als een echte post .vid-yt de titel LINKSBOVEN — middenop staat de YouTube-knop Alles komt tegelijk met de waas in beeld en schuift daarbij een paar pixels mee: bij een YouTube-tegel van boven naar beneden, bij de rest andersom — de tekst komt zo altijd vanaf de dichtstbijzijnde rand. `-webkit-line-clamp:1` op `.cap-tekst`: **één regel, en wat niet past eindigt in …** (2026-10-08, op verzoek). Tot dan mocht een bijschrift twee regels en een titel drie; een lange tekst vulde daarmee een kwart van de foto. Nu breekt hij nergens meer naar een tweede regel. Staat op de gedeelde klasse, dus zowel het bijschrift als de titel doet het — en het hoort ook samen met `display:-webkit-box` + `overflow:hidden` daar, want alleen die drie samen geven dat afkappen mét puntjes. Elke soort zegt zelf hoe zijn tekst leest; in `.cap-tekst` staat alleen wat ze delen. Zo overrult de een de ander niet, en hoeft niemand op de volgorde in dit bestand te letten. */ .vid .cap{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;pointer-events:none; display:flex;flex-direction:column;gap:3px; font-family:var(--font-mono);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6); opacity:0;transform:translateY(8px); transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)} .vid-yt .cap{top:14px;bottom:auto;transform:translateY(-8px)} .vid:hover .cap,.vid:focus-visible .cap{opacity:1;transform:none} /* ⚠️ Maten in `clamp()` en niet vast op 12px (2026-10-08, op verzoek: te klein om goed te lezen). Een tegel is zo breed als het venster toelaat (de `.wrap` is 92vw), dus schaalt de tekst met vw mee: op een telefoon blijft het de oude 12px — daar is een socialkaart ~200px breed en leest 12px als een echte post — en op een breed scherm, waar diezelfde kaart het dubbele is, loopt het op. De bovengrens houdt het een bijschrift en geen kop. Dezelfde vorm als de YouTube-titel hieronder al had. */ .cap-naam{font-size:clamp(12px,.9vw,14px);font-weight:700;letter-spacing:.1em; text-transform:uppercase} .cap-tekst{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden; -webkit-line-clamp:1} /* Het bijschrift van een post: gewone schrijfwijze, iets zachter dan de naam erboven. Kapitalen zouden daar als een tweede kop lezen. */ .vid-social .cap-tekst{font-size:clamp(12px,1vw,15px);line-height:1.45;letter-spacing:.02em; opacity:.92} /* Een geopende foto draagt sinds 2026-10-08 geen tekst meer (op verzoek, een paar uur nadat hij er juist in ging): groot bekeken mag de foto alleen zijn. De eigen maten die `.vplay-frame` hier even had, staan in git. */ /* Bij een YouTube-tegel is diezelfde regel geen bijschrift maar de TITEL van de video, en die staat er alleen — geen naam erboven. Dus groter, zwaarder en op volle sterkte. Ook hij staat op één regel; het afkappen komt van `.cap-tekst`. ⚠️ Géén kapitalen en geen extra letterruimte (2026-09-29, op verzoek): de titel wordt in het CMS met gewone hoofd- en kleine letters ingevuld, en dan hoort hij er ook zo te staan. Tot dat verzoek stond hier `text-transform:uppercase`, geërfd van de labelvorm die de rest van de site gebruikt — zet dat niet terug. */ .vid-yt .cap-tekst{font-size:clamp(15px,1.5vw,21px);font-weight:600;line-height:1.25} /* Het blauwe klikteken rechtsboven (`.vid-hint`: driehoekje bij een video, vergroot-teken bij een foto) is er op 2026-10-08 uit gegaan, op verzoek: de tegel komt bij hover al naar voren en dat zegt genoeg. De regels staan in git. De YouTube-knop middenop (`.play-ico`) blijft — die hoort bij het platform, niet bij "je kunt hier klikken". */ /* ── Aanraakscherm: geen hover, dus alles staat er meteen ───────────────── Het leesverloop en de tekst staan er permanent; verder is er niets dat bij hover hoort te verschijnen. */ @media(hover:none){ .vid-ov{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0) 34%)} .vid-yt .vid-ov{background:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,0) 55%)} .vid .cap{opacity:1;transform:none} } /* Smaller dan een laptop — en dit geldt tot en met de telefoon: ┌─────────────────────────┐ │ liggend 16:9 │ ├────────────┬────────────┤ │ foto │ │ ├────────────┤ staand │ │ foto │ 9:16 │ └────────────┴────────────┘ De liggende tegel over de volle breedte, daaronder de twee foto's ONDER elkaar links en de staande tegel rechts — dezelfde kant als op een groot scherm. `display:contents` haalt .med-main uit de weg, zodat alle vier de tegels gewoon in hetzelfde raster liggen. De fotokolom wordt door het grid op dezelfde hoogte gerekt als de staande tegel ernaast en verdeelt die over twee (flex:1). Twee dingen die hier tot 2026-09-22 anders waren, allebei op verzoek weg: · De staande tegel stond op een tablet LINKS en de foto's rechts — precies omgekeerd aan het grote scherm. · Onder 560px klapte alles onder elkaar. Dat leek logisch (een 9:16 tegel is immers de vorm van het scherm zelf), maar in de praktijk werd die staande video daardoor loeigroot en viel het blok uit elkaar. */ @media(max-width:900px){ .med-grid{grid-template-columns:1fr 1fr} .med-main{display:contents} .med-hero{grid-column:1/-1} .med-row{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:var(--med-gap)} .med-side{grid-column:2;grid-row:2} .med-foto{flex:1 1 0} } /* ===================================================================== MEDIA SHOWCASE — video 16:9, YouTube-knop, dan vijf foto's Vaste indeling sinds 2026-10-19; zie mountMediaShowcase in cms-render.js. Zes kolomsporen: drie foto's van 4:5 (2 sporen elk), daaronder twee van 3:2 (3 sporen elk). Ook op een telefoon, daar zijn ze gewoon kleiner. ===================================================================== */ .msc-kop{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:clamp(18px,2.4vw,30px)} .msc-intro{text-align:left;max-width:46ch;margin-top:clamp(18px,2vw,26px);color:var(--text-soft)} .msc-video{aspect-ratio:16/9;width:100%} iframe.msc-video{display:block;border:0;border-radius:12px;background:#000} .msc-yt{margin-top:clamp(18px,2.4vw,30px)} /* Onderaan de helft van .sec-pad (op verzoek): de foto's lopen tot de rand door, zonder knop eronder, en dan voelde de volle padding plus die van de volgende sectie als een gat. */ [data-block="mediashowcase"]{padding-bottom:clamp(40px,5.5vh,80px)} .msc-grid{--msc-gap:clamp(10px,1.3vw,18px);margin-top:clamp(32px,4vw,56px); display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--msc-gap)} .msc-portret{grid-column:span 2;aspect-ratio:4/5} .msc-landschap{grid-column:span 3;aspect-ratio:3/2} /* ===================================================================== SOCIALS — vier staande kaarten naast elkaar, knoppen linksonder Tot 2026-10-19 een carrousel (slepen, pijlen, timer); nu een vaste rij van vier, op een telefoon twee bij twee. Gap gelijk aan het Media overzicht. ===================================================================== */ .soc-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)} .soc-card{aspect-ratio:9/16} .soc-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(18px,2.4vw,30px)} @media(max-width:700px){ .soc-track{grid-template-columns:1fr 1fr} } /* ── speler-overlay: de video op ware grootte, mét geluid ───────────── Ligt boven de nav (7000) maar onder het mobiele menu (7200) is niet genoeg — hij moet er juist bovenop, want vanuit het menu is de sectie bereikbaar. Vandaar 7300. */ .vplay{position:fixed;inset:0;z-index:7300;background:rgba(0,0,0,.78); display:grid;place-items:center;padding:clamp(44px,5.5vh,64px) clamp(12px,2.4vw,32px); opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s} .vplay.open{opacity:1;visibility:visible} /* --vplay-ruimte: wat er naast de video zelf nog aan hoogte nodig is (de rand boven en onder, plus het bijschrift). ⚠️ BEIDE `width:100%`-regels hieronder zijn nodig, en om dezelfde reden. `.vplay-box` is een flexkolom met `align-items:center` en `.vplay-slot` een flex-item daarin: zonder opgegeven breedte is zo'n item precies zo breed als zijn inhoud. De inhoud is een `