/* ══════════════════════════════════════════════════════════════════════════ basboudewijn.nl — REBUILD FUNDAMENT (Fase 0) dual-toon tokensysteem + banen-lint + gedeelde component-basis ────────────────────────────────────────────────────────────────────────── STATUS: nieuw, NIET live. Vervangt site.css (nog) niet. Geen pagina linkt dit bestand. Veilig om op te bouwen zonder de beta te raken. Bronnen (1:1): plannen/rebuild/visual-designer.md §0 (token-set), §3 (thema's), §5 (banen/scroll), §10 (contrast); front-end-designer.md §2 (CSS-architectuur); 00-concept-brief.md §2; merksysteem v2 (site.css — fonts, .bseal/.tri/.crux, --airmail, de 390px-overflowfix). FONTS: worden CENTRAAL in de geladen (Google Fonts: Spectral / Newsreader / Hanken Grotesk / JetBrains Mono). Dit bestand laadt GEEN fonts en verwijst er alleen naar via --f-* tokens. ══════════════════════════════════════════════════════════════════════════ HOE HET WERKT — lees dit vóór je erop bouwt (lead/visual/audio): ══════════════════════════════════════════════════════════════════════════ 1) DRIE LAGEN a. STAM-TOKENS (:root) — de ruwe hexwaarden uit v2 (warm) + de nacht-set. NOOIT direct gebruiken in een component. b. SEMANTISCHE ROLLEN (--bg, --fg, --surface, --accent, --line, --mono-c …) — wat een component AANROEPT. Wisselen per modus. Default = warm perkament. c. THEMA-LAAG (--t-bg/--t-surface/--t-line/--t-accent) — smal, per-reis (trip-pagina's). Apart bestand/sectie; alleen de --t-* variëren. 2) MODUS SCHAKELEN — via data-toon (afgestemd met lead-programmer): document.body.dataset.toon = 'nacht' // koel-slate "buitennacht" document.body.dataset.toon = 'nacht-warm' // warm-houtskool "binnennacht" (leeg / 'warm' / afwezig) // perkament — de default Body-default kan ook per band lokaal overschreven worden:
…
De band herdefinieert DAAR de semantische rollen, zodat kaarten/knoppen erin automatisch meekleuren — één component, beide modi. 3) COMPONENTEN GEBRUIKEN UITSLUITEND SEMANTISCHE VARS. Schrijf .card / .cta / .eyebrow met var(--surface), var(--accent), enz. NOOIT var(--night) of var(--outback) direct in een component → anders breekt de andere modus. De twee nacht-stammen verschillen ALLEEN in de neutrale grijzen; accenten + merktekens zijn identiek (visual §0 één-systeem-garantie). 4) BANEN, GEEN SECTIES. Een pagina is één scroll-lint van .band's die elkaar zonder marge raken en van kleur golven. Elke band zet zijn eigen modus. Niets breder dan 100vw (390px-proof, harde regel). 5) De volledige rol-tabel staat hieronder bij "SEMANTISCHE ROLLEN". ══════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════ LAAG A — STAM-TOKENS (ruw; niet direct in componenten) ════════════════════════════════════════════════════════ */ :root{ /* ── WARM — perkament/inkt (merksysteem v2, 1:1 uit site.css) ── */ --paper-50:#FBF9F1; --paper:#F6F2E7; --paper-warm:#F4F0E4; /* zip-hero-perkament */ --sand:#ECE6D5; --stone:#DCD4BF; --taupe:#C7BEA4; --ink:#221E18; --ink-deep:#1F1B14; --bistre:#2E2820; --umber:#5B5345; --drab:#8A8270; --reader:#2A251D; /* zip-leestekstkleur */ --ink3:#6B6354; /* AA-contrast op papier */ --outback:#B4462B; /* ★ rood-accent op licht */ --rust:#B4462B; --rust-deep:#A53F26; --clay:#8E3620; --terracotta:#D38E74; --ember:#D6603C; --wash:#EAD6CB; --sky:#5F7F96; --deep-sky:#3F5E76; --haze:#9DB6C6; --mist:#DCE6EC; --ochre:#BE8638; --eucalypt:#7C7F5F; /* ── NACHT — koel-slate stam ("buitennacht", open hemel) ── */ --night:#15171C; /* body Home / Bending Points / Apps */ --night-slate-1:#1B1E25; /* verhoogd paneel op slate-nacht */ --night-slate-2:#23262d; /* rand/footer-scheiding op slate-nacht */ --slate-line:#2c3038; /* lijn/kader op nacht */ --slate-edge:#3a4350; /* subtiele rand/scrollcue-ring */ --slate-mute:#5f6773; /* gedempte mono-label op nacht */ --slate-soft:#6f7886; /* zachte footer-mono op nacht */ --slate-star:rgba(214,222,231,.30); /* sterren op slate-nacht (koel) */ /* ── NACHT — warm-houtskool stam ("binnennacht", daktent/plaat/vuur) ── */ --char:#16140F; /* body Veldopnames + alle donkere CTA-banen */ --char-1:#1B1813; /* verhoogd paneel (tracklist) */ --char-line:#241f19; /* track-scheiding */ --char-line-2:#2e2a22; /* kop-scheiding op houtskool */ --char-edge:#3a342a; /* knop-rand/play-rand op houtskool */ --char-num:#5f5746; /* tracknummer-mono */ --warm-star:rgba(251,249,241,.34); /* sterren op houtskool (crème) */ /* ── gedeelde nacht-tekst + accenten (zelfde merk!) ── */ --on-night:#ECE6D5; /* lopende tekst op nacht */ --on-night-hi:#FBF9F1; /* koppen/woordmerk op nacht */ --on-night-mute:#C2BBAA; /* dek/inleiding op nacht (≥18px, contrast §10) */ --on-night-nav:#9a9384; /* nav/links op nacht (minimum voor labels) */ --night-accent:#D6603C; /* = --ember: HÉT rood op nacht */ --night-accent-soft:#E9B4A2; /* zachte terracotta op nacht (brief), spaarzaam */ /* ── typografie — vier rollen, vier fonts (centraal geladen, niet hier) ── */ --f-d:'Spectral',Georgia,serif; /* display/koppen/leestekst/woordmerk */ --f-b:'Hanken Grotesk',system-ui,sans-serif; /* UI/nav/knoppen/web-tekst + labels */ --f-i:'Newsreader',Georgia,serif; /* cursief: citaten/dek/bijschrift/de 'b' */ --f-m:'JetBrains Mono',ui-monospace,monospace; /* ALLÉÉN cijfers/coördinaten/postwaarden */ /* ── signatuur-motieven (stam) ── */ /* luchtpost-rand — één motief; de "witte" band = var(--bg), dus modus-proof */ --airmail:repeating-linear-gradient(45deg,var(--outback) 0 11px,var(--bg) 11px 22px,var(--deep-sky) 22px 33px,var(--bg) 33px 44px); --papertile:none; /* main.js vult dit met paperTileURL() uit globe.js */ /* ── motion + maatvoering ── */ --ease:cubic-bezier(.22,.61,.36,1); --reveal-dur:.5s; --pad-band:clamp(48px,8vh,90px) clamp(22px,5vw,40px); /* baan-padding, 390px-proof */ --wrap-max:1180px; } /* ════════════════════════════════════════════════════════ LAAG B — SEMANTISCHE ROLLEN (gebruik DEZE in componenten) ────────────────────────────────────────────────────────── Rol-tabel: --bg baan/body-achtergrond --fg lopende tekst / koppen --fg-soft dek, inleiding, gedempte tekst (Newsreader) --fg-mute fijne labels / metadata --surface verhoogd paneel / kaart-vlak --surface-2 tweede paneel-laag (rij-hover, sub-paneel) --accent HÉT rood (markers, punt, CTA, links-hover) --accent-2 zacht/secundair accent (terracotta) --line rand/kader/scheiding --edge subtielere rand (scrollcue-ring, knop-rand) --mono-c kleur voor mono-coördinaten/tellingen --star sterkleur voor het sterrenveld --focus focusring-kleur --on-accent tekst óp een rood vlak (witte pill-tekst) Default hieronder = WARM perkament. ════════════════════════════════════════════════════════ */ body{ --bg:var(--paper-warm); --fg:var(--reader); --fg-soft:var(--umber); --fg-mute:var(--ink3); --surface:var(--paper-50); --surface-2:var(--paper); --accent:var(--outback); --accent-2:var(--terracotta); --line:var(--taupe); --edge:var(--stone); --mono-c:var(--drab); --star:var(--slate-star); /* niet zichtbaar op warm; voor losse nacht-panelen */ --focus:var(--rust); --on-accent:#fff; } /* ── WARM — perkament-reset op een band binnen een nacht-pagina ── Zonder deze regel erft een warme band (band--paper/band--sand) op een nacht-pagina de lichte nacht-tekstkleur → kop wordt licht-op-licht (onzichtbaar). Spiegelt de warme defaults uit body{} hierboven. */ .band[data-toon="warm"]{ --bg:var(--paper-warm); --fg:var(--reader); --fg-soft:var(--umber); --fg-mute:var(--ink3); --surface:var(--paper-50); --surface-2:var(--paper); --accent:var(--outback); --accent-2:var(--terracotta); --line:var(--taupe); --edge:var(--stone); --mono-c:var(--drab); --star:var(--slate-star); --focus:var(--rust); --on-accent:#fff; } /* ── NACHT — koel-slate ("buitennacht") ── */ body[data-toon="nacht"], .band[data-toon="nacht"]{ --bg:var(--night); --fg:var(--on-night); --fg-soft:var(--on-night-mute); --fg-mute:var(--on-night-nav); --surface:var(--night-slate-1); --surface-2:var(--night-slate-2); --accent:var(--ember); --accent-2:var(--night-accent-soft); --line:var(--slate-line); --edge:var(--slate-edge); --mono-c:var(--slate-mute); --star:var(--slate-star); --focus:var(--on-night-hi); --on-accent:#fff; } /* ── NACHT-WARM — houtskool ("binnennacht": daktent/plaat/vuur) ── */ body[data-toon="nacht-warm"], .band[data-toon="nacht-warm"]{ --bg:var(--char); --fg:var(--on-night); --fg-soft:var(--on-night-mute); --fg-mute:var(--on-night-nav); --surface:var(--char-1); --surface-2:var(--char-line-2); --accent:var(--ember); --accent-2:var(--night-accent-soft); --line:var(--char-line); --edge:var(--char-edge); --mono-c:var(--char-num); --star:var(--warm-star); --focus:var(--on-night-hi); --on-accent:#fff; } /* ════════════════════════════════════════════════════════ RESET + BASIS (390px-proof: niets breder dan 100vw) ════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{ font-family:var(--f-b); background:var(--bg); color:var(--fg); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; /* de 390px-overflowfix — niet-onderhandelbaar */ max-width:100vw; transition:background .4s var(--ease),color .4s var(--ease); /* zachte dag→nacht */ } img{display:block;max-width:100%} a{color:inherit} ::selection{background:var(--accent);color:var(--on-accent)} /* ── "Lichtval": de site reageert heel subtiel op het lokale tijdstip ────────── Eén vaste, niet-klikbare gloed-laag bovenin het scherm; kleur + intensiteit nuanceren met data-hour-band (core.js zet die uit de lokale klok). Binnen de merk-tinten, nooit een themawissel — een spoor warmer 's ochtends, koeler/ dieper diep in de nacht. Volledig additief: zonder het attribuut is er niets. */ html[data-hour-band] body::before{ content:"";position:fixed;left:0;right:0;top:0;height:46vh;z-index:0; pointer-events:none;opacity:0; background:radial-gradient(120% 80% at 50% -20%, var(--lightfall, transparent), transparent 70%); transition:opacity 1.2s var(--ease), background 1.2s var(--ease); } html[data-hour-band="ochtend"] body::before{ --lightfall:rgba(214,160,96,.06); opacity:1 } html[data-hour-band="dag"] body::before{ --lightfall:rgba(255,250,235,.05); opacity:1 } html[data-hour-band="avond"] body::before{ --lightfall:rgba(179,70,43,.05); opacity:1 } html[data-hour-band="nacht"] body::before{ --lightfall:rgba(63,94,118,.07); opacity:1 } /* op nacht-banen valt de gloed iets warmer/dieper, nooit fel */ html[data-hour-band="nacht"] body[data-toon="nacht"]::before{ --lightfall:rgba(95,127,150,.08) } @media (prefers-reduced-motion:reduce){ html[data-hour-band] body::before{ transition:none } } /* ── "Meereizende" pagina-overgang (innovatie #5) ───────────────────────────── Bij het verlaten veegt een dunne inkt-lijn + het b-zegel over de pagina (alsof je over Bas' kaart navigeert); op de nieuwe pagina komt het van de andere kant binnen. Fail-open: bij twijfel doet de browser gewoon de normale navigatie; core.js onderschept niet bij reduced-motion. */ .bb-transit{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0; transition:opacity .5s var(--ease, ease)} .bb-transit-ink{position:absolute;left:0;top:0;bottom:0;width:0; background:linear-gradient(90deg, transparent, var(--night, #15171C) 14%, var(--night, #15171C)); transition:width .42s var(--ease, cubic-bezier(.22,.61,.36,1))} .bb-transit-seal{position:absolute;top:50%;left:-60px;transform:translateY(-50%); width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--outback, #B4462B);color:#FBF9F1;font-family:var(--f-d);font-weight:700; box-shadow:0 6px 24px rgba(0,0,0,.3);transition:left .42s var(--ease, cubic-bezier(.22,.61,.36,1))} .bb-transit-seal b{font-size:22px;line-height:1} /* vertrekken: inkt veegt naar rechts dicht, zegel reist mee de pagina uit */ .bb-transit.is-leaving{opacity:1} .bb-transit.is-leaving .bb-transit-ink{width:115%} .bb-transit.is-leaving .bb-transit-seal{left:calc(100% + 60px)} /* aankomen: de inkt staat vol en het zegel rechts (instant), dan trekt alles terug naar links — alsof je net op de nieuwe pagina bent "aangereisd". De .is-entering-klasse zet de eindstand; core haalt 'm in de volgende frame weg zodat de transition van vol → leeg loopt (zelfde curve als vertrek). */ .bb-transit.is-entering{opacity:1} .bb-transit.is-entering .bb-transit-ink{width:115%;transition:none} .bb-transit.is-entering .bb-transit-seal{left:calc(100% + 60px);transition:none} /* terugtrekken na aankomst: inkt leeg, zegel uit beeld links, dan fade weg */ .bb-transit.is-arriving{opacity:1} .bb-transit.is-arriving .bb-transit-ink{width:0} .bb-transit.is-arriving .bb-transit-seal{left:-60px} @media (prefers-reduced-motion:reduce){ .bb-transit{display:none} } /* gedeelde wrap — gecentreerd, nooit breder dan viewport */ .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 clamp(22px,5vw,40px);width:100%} /* skip-link (a11y) */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent); padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;font-size:14px} .skip:focus{left:0} /* ════════════════════════════════════════════════════════ BANEN-LINT — .band = full-bleed baan, volle breedte, geen overflow Een pagina = reeks .band's die elkaar zonder marge raken en van kleur golven. Elke band zet lokaal zijn modus via data-toon. ════════════════════════════════════════════════════════ */ .band{ position:relative; width:100%; background:var(--bg); color:var(--fg); padding:var(--pad-band); /* een baan kan zijn eigen modus dragen → background/color volgen --bg/--fg */ } .band > .wrap{position:relative;z-index:1} /* baan-varianten als korte alias (zetten alleen de modus, identiek aan data-toon) */ .band--paper{ } /* default warm; expliciet voor leesbaarheid */ .band--sand{ --bg:var(--sand); } /* tweede warme tint (recency-feed) */ .band--night{ } /* gebruik data-toon="nacht" op de band */ .band--char{ } /* gebruik data-toon="nacht-warm" op de band */ /* ── sterrenveld-utilities (nacht-equivalent van de perkament-arcering) ── pure CSS radial-gradients (goedkoop). --star wisselt per modus. */ .sky{position:relative} .sky::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, var(--star), transparent), radial-gradient(1px 1px at 24% 70%, var(--star), transparent), radial-gradient(1px 1px at 50% 18%, var(--star), transparent), radial-gradient(1.5px 1.5px at 78% 64%, var(--star), transparent), radial-gradient(1px 1px at 64% 82%, var(--star), transparent), radial-gradient(1px 1px at 88% 30%, var(--star), transparent), radial-gradient(1px 1px at 36% 50%, var(--star), transparent), radial-gradient(1.2px 1.2px at 6% 56%, var(--star), transparent); } .sky > *{position:relative;z-index:1} /* ── scroll-reveal — werkt mee met de core scroll-engine ── core.js voegt .in toe als een .reveal in beeld komt. Transform/opacity-only. PER BAAN, niet per element (geen animatie-spam). ────────────────────────────────────────────────────────────────────────── FAIL-OPEN (hard): de verborgen beginstand geldt ALLEEN als JS draait (html.js, gezet in de ). Zonder JS — of als een page-script breekt vóór BB.Scroll.reveal() — blijft alle content gewoon zichtbaar. Daarnaast geeft een pure-CSS animatie elke .reveal sowieso na hooguut 1.6s zijn eindstand, los van welke JS dan ook (de IO/`.in` neemt het normaal eerder over; deze animatie is enkel een vangnet, geen primaire weg). */ .reveal{opacity:1;transform:none} /* default zichtbaar (no-JS / fail-open) */ .js .reveal{opacity:0;transform:translateY(16px); transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease); animation:bb-reveal-failsafe 0s linear 1.6s forwards} .js .reveal.in{opacity:1;transform:none;animation:none} @keyframes bb-reveal-failsafe{to{opacity:1;transform:none}} /* ════════════════════════════════════════════════════════ GEDEELDE COMPONENT-BASIS (modus-neutraal, semantische vars) Géén definitieve per-pagina layouts — alleen herbruikbaar fundament. ════════════════════════════════════════════════════════ */ /* ── NAV + hamburger (semantisch; werkt op warm én nacht) ── */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:26px; padding:18px clamp(22px,5vw,52px); background:linear-gradient(var(--bg) 55%, transparent)} .nav-name{position:relative;font-family:var(--f-d);font-weight:600;font-size:17px;color:var(--fg);text-decoration:none} .nav-name::after{content:'';position:absolute;left:1px;bottom:-4px;width:14px;height:5px; border-bottom:1.6px solid var(--fg-mute);border-radius:0 0 60% 40%/0 0 5px 3px; opacity:0;transform:rotate(-2deg);transition:opacity .25s,width .25s} .nav-name:hover::after,.nav-name:focus-visible::after{opacity:1;width:34px} .nav-links{margin-left:auto;display:flex;gap:24px;align-items:center} .nav-links a{color:var(--fg-soft);text-decoration:none;font-size:14.5px;font-weight:500} .nav-links a:hover{color:var(--accent)} .nav-links a[aria-current="page"]{color:var(--accent)} .nav-cta{color:var(--accent) !important;border:1px solid var(--line);border-radius:100px;padding:7px 17px} /* ── taaltoggle: een strakke, on-brand segmented pill (NL | EN) ────────────── De JS (i18n.js/core.js) zet btn.textContent op de HUIDIGE taal ("NL"/"EN") en dat blijft de toegankelijke naam. We verbergen die tekst visueel (font-size:0, maar leesbaar voor screenreaders) en tekenen zelf twee segmenten met ::before ("NL") en ::after ("EN"). Welk segment actief is, leidt de pill af uit — dus zónder de JS-logica te raken. Touch-target ≥40px. */ .lang{ position:relative;display:inline-flex;align-items:stretch; font-size:0;line-height:0; /* verbergt de JS-tekstnode visueel, blijft a11y-naam */ font-family:var(--f-m);font-weight:600;letter-spacing:.08em; border:1px solid var(--line);border-radius:100px; background:var(--surface);padding:2px;min-height:40px;cursor:pointer; -webkit-tap-highlight-color:transparent;overflow:hidden; transition:border-color .18s var(--ease)} .lang::before,.lang::after{ display:inline-flex;align-items:center;justify-content:center; min-width:34px;height:100%;padding:0 11px;border-radius:100px; font-size:11px;letter-spacing:.1em;line-height:1;color:var(--fg-soft); transition:color .18s var(--ease),background .18s var(--ease)} .lang::before{content:'NL'} .lang::after{content:'EN'} /* actief segment = de huidige taal (gelezen uit , NL is default) */ html:not([lang="en"]) .lang::before, html[lang="nl"] .lang::before{background:var(--accent);color:var(--paper-50,#FBF9F1)} html[lang="en"] .lang::after{background:var(--accent);color:var(--paper-50,#FBF9F1)} .lang:hover{border-color:var(--accent)} .lang:hover::before,.lang:hover::after{color:var(--fg)} html:not([lang="en"]) .lang:hover::before,html[lang="nl"] .lang:hover::before, html[lang="en"] .lang:hover::after{color:var(--paper-50,#FBF9F1)} /* actief segment houdt licht */ /* hamburger — alleen op mobiel zichtbaar (zie media-query) */ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:36px; padding:0 9px;border:1px solid var(--line);border-radius:9px;background:none;cursor:pointer} .nav-toggle span{display:block;height:1.7px;width:100%;background:var(--fg-soft);border-radius:2px; transition:transform .25s,opacity .2s} .nav.open .nav-toggle span:nth-child(1){transform:translateY(6.7px) rotate(45deg)} .nav.open .nav-toggle span:nth-child(2){opacity:0} .nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)} .nav-toggle:hover{border-color:var(--accent)} /* ── KNOPPEN ── één primaire rode CTA + lijn-knop + tekstlink ── */ .cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent); text-decoration:none;font-family:inherit;font-weight:600;font-size:14px;border:none;cursor:pointer; border-radius:100px;padding:14px 28px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(180,70,43,.32)} .btn-line{display:inline-flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none; font-family:inherit;font-weight:500;font-size:14px;border:1px solid var(--line);background:none;cursor:pointer; border-radius:100px;padding:13px 26px;transition:border-color .25s,color .25s} .btn-line:hover{border-color:var(--accent);color:var(--accent)} /* QUICK-WIN #4 — de "Speel de tour"-CTA als rustige merk-knop met play-driehoek (papier/roest). De driehoek staat al in de accentkleur (roest); we schalen 'm passend bij de tekst en lijnen 'm netjes uit. De knop blijft de ingetogen pill-stijl van .btn-line, consistent met de rest van de site. */ .btn-line--play .tri--play{--t:6px;--h:11px;margin-right:2px} .btn-line--play:hover .tri--play{border-left-color:var(--accent)} .link{color:var(--accent);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s} .link:hover{border-bottom-color:var(--accent)} /* ── EYEBROW / MONO-LABEL ── getrackt; mono alleen bij cijfers/coördinaten ── */ .eyebrow{font-family:var(--f-b);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);display:inline-flex;align-items:center;gap:12px} .eyebrow--line::before{content:'';width:34px;height:1px;background:currentColor} .mono{font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mono-c)} /* ── LIVE-BADGE (canonieke bron — gedeeld door álle pagina's) ─────────────── Eén component, één markup (.pip), één livePulse. Strip-duplicaten uit v3-pages.css zijn verwijderd; v3-globe.css houdt nog een eigen .live-dot- variant die de PM moet gelijktrekken (zie review/ronde-C-beeld.md). De box-shadow-puls wordt óók gedeeld door .essay-soon-dot en de route-"hier nu". */ .live-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line); border-radius:100px;padding:7px 15px 7px 13px;background:var(--surface); font-family:var(--f-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)} .live-badge .pip{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto} .live-badge b{color:var(--fg);font-weight:500} @media (prefers-reduced-motion:no-preference){ .live-badge .pip{animation:livePulse 2.4s ease-in-out infinite} } @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(214,96,60,.5)}50%{box-shadow:0 0 0 6px rgba(214,96,60,0)}} /* ── KAART ── één vorm, beide modi (de "laatste van de weg"-feed e.d.) ── */ .card{position:relative;display:block;background:var(--surface);color:var(--fg);text-decoration:none; border:1px solid var(--line);border-radius:12px;padding:24px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)} .card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.10);background:var(--surface-2)} .card-title{font-family:var(--f-d);font-weight:600;font-size:clamp(18px,2.2vw,24px);line-height:1.12;color:var(--fg)} .card-body{margin-top:8px;color:var(--fg-soft);font-size:15px;line-height:1.55} /* ── MERKTEKENS (afgestemd op beide modi via semantische vars) ── */ /* 'b'-zegel: Newsreader cursief in een schijf. Zegel = altijd het rode accent. */ .bseal{--d:60px;width:var(--d);height:var(--d);border-radius:50%; display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1; background:var(--accent)} .bseal b{font-family:var(--f-i);font-style:italic;font-weight:500;font-size:calc(var(--d) * .61);line-height:1;color:var(--on-accent)} .bseal--dotted{background:transparent;border:1.5px dotted var(--accent)} .bseal--dotted b{color:var(--accent);font-size:calc(var(--d) * .57)} /* driehoek — markering (omhoog) / play (rechts). Vlamt in het accent. */ .tri{--t:14px;--h:24px;width:0;height:0;flex:0 0 auto; border-left:var(--t) solid transparent;border-right:var(--t) solid transparent; border-bottom:var(--h) solid var(--accent)} .tri--play{border-left:0;border-right:0;border-bottom:0; border-top:var(--t) solid transparent;border-bottom:var(--t) solid transparent; border-left:var(--h) solid var(--accent)} .tri--sm{--t:7px;--h:12px} /* Zuiderkruis — 5 sterren; ster-A in het accent met glow, rest in --star/--fg */ .crux{position:relative;display:inline-block;width:90px;height:120px;flex:0 0 auto} .crux i{position:absolute;border-radius:50%;background:var(--fg)} .crux .crux-a{left:46%;top:0;width:8px;height:8px;background:var(--accent);box-shadow:0 0 8px var(--accent)} .crux .crux-b{left:40%;top:100%;width:9px;height:9px;margin-top:-9px} .crux .crux-g{left:2%;top:52%;width:7px;height:7px} .crux .crux-d{left:90%;top:38%;width:7px;height:7px} .crux .crux-e{left:58%;top:72%;width:4px;height:4px;background:var(--mono-c)} /* luchtpost-rand als herbruikbare strook (modus-proof: --bg = de "witte" band) */ .airmail{background:var(--airmail)} .airmail--top{height:3px;width:100%} .airmail--side{width:8px} /* ════════════════════════════════════════════════════════ LAAG C — PER-REIS THEMA (smal; alleen --t-* variëren) Familie-constanten staan in .trip-card/.trip-hero en variëren NIET per thema. Toewijzing trip→thema komt uit backend (trip.theme enum). ════════════════════════════════════════════════════════ */ .trip{ --t-bg:var(--bg); --t-surface:var(--surface); --t-line:var(--line); --t-accent:var(--accent); } .trip[data-theme="atlas"] { --t-bg:#F4F0E4; --t-surface:#FBF9F1; --t-line:#C7BEA4; --t-accent:#B4462B; } .trip[data-theme="ink"] { --t-bg:#F6F2E7; --t-surface:#FBF9F1; --t-line:#CDBF9E; --t-accent:#D6603C; } .trip[data-theme="wire"] { --t-bg:#FBF9F1; --t-surface:#FBF9F1; --t-line:#C7BEA4; --t-accent:#A53F26; } .trip[data-theme="night"] { --t-bg:#15171C; --t-surface:#1B1E25; --t-line:#2c3038; --t-accent:#D6603C; } .trip[data-theme="oldmap"] { --t-bg:#EDE3C8; --t-surface:#F4EEDF; --t-line:#B7A77E; --t-accent:#A53F26; } .trip[data-theme="record"] { --t-bg:#16140F; --t-surface:#1B1813; --t-line:#241f19; --t-accent:#D6603C; } /* nacht-thema's zetten óók de tekst-rollen, zodat tekst op de trip leesbaar blijft */ .trip[data-theme="night"], .trip[data-theme="record"]{ --fg:var(--on-night); --fg-soft:var(--on-night-mute); --fg-mute:var(--on-night-nav); } /* thema-constanten (familie — niet per thema variëren) */ .trip-card{background:var(--t-surface);border:1px solid var(--t-line);border-radius:12px;overflow:hidden; box-shadow:0 8px 22px rgba(34,30,24,.10)} .trip-hero{background:var(--t-bg);color:var(--fg)} .trip-eyebrow{font-family:var(--f-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-accent)} /* ════════════════════════════════════════════════════════ TOEGANKELIJKHEID + MOTION ════════════════════════════════════════════════════════ */ /* zichtbare focusring — de potlood-dash uit v2, modus-proof via --focus */ a:focus-visible,button:focus-visible,input:focus-visible, .cta:focus-visible,.btn-line:focus-visible,.link:focus-visible, .card:focus-visible,.nav-toggle:focus-visible,.lang:focus-visible{ outline:2px dashed var(--focus);outline-offset:4px;border-radius:4px} /* reduced motion — eindstaat direct, geen loops/animaties/transitions die bewegen */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .reveal{opacity:1;transform:none} body{transition:none} } /* ════════════════════════════════════════════════════════ MOBIEL (390px-proof; alle grids → 1 kolom; hamburger aan) ════════════════════════════════════════════════════════ */ @media (max-width:720px){ .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(80vw,300px); flex-direction:column;align-items:flex-start;gap:18px; padding:84px 28px 28px;background:var(--surface);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .3s var(--ease);z-index:49} .nav.open .nav-links{transform:none} .nav-toggle{display:flex;margin-left:auto;z-index:51;width:44px;height:44px} /* menu-links: ruime aantik-regels (≥44px) i.p.v. krappe 28px */ .nav-links a{font-size:17px;display:flex;align-items:center;min-height:44px;width:100%} .nav-links .nav-cta{justify-content:center} } /* harde vangrail: niets mag breder dan de viewport worden */ @media (max-width:390px){ .band{padding-left:22px;padding-right:22px} } /* ════════════════════════════════════════════════════════ BBPlayer — site-brede, persistente mini-speler (player.js → .bbp*) Vaste balk onderaan; nacht-warm; body.bbp-active houdt ruimte vrij. class-based (player.js zet enkel de fill-breedte inline). Staat in rebuild.css (door ÁLLE pagina's geladen, incl. The Journey) zodat de persistente speler overal gestyled is — ook na soft-nav. ════════════════════════════════════════════════════════ */ .bbp{position:fixed;left:0;right:0;bottom:0;z-index:130; background:var(--char-1, #1B1813);border-top:1px solid var(--char-edge, #3a342a); color:var(--on-night, #ECE6D5); transform:translateY(110%);transition:transform .28s var(--ease); --bg:var(--char-1);--fg:var(--on-night);--accent:var(--ember)} .bbp[hidden]{display:none} .bbp.bbp-show{transform:none} .bbp-inner{display:flex;align-items:center;gap:12px;max-width:var(--wrap-max);margin:0 auto; padding:10px clamp(14px,4vw,28px) 12px;width:100%} .bbp-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto; border:1px solid var(--char-edge, #3a342a);border-radius:50%;background:none;cursor:pointer; color:var(--on-night, #ECE6D5);transition:border-color .2s,color .2s,background .2s} .bbp-btn:hover{border-color:var(--ember);color:var(--ember)} .bbp-toggle{background:var(--ember);border-color:var(--ember)} .bbp-toggle:hover{background:var(--ember);filter:brightness(1.06)} .bbp-ic{display:inline-block;position:relative;width:14px;height:14px} /* play-driehoek */ .bbp-ic-play{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent; border-left:12px solid #fff;margin-left:2px} /* pauze: twee strepen */ .bbp-ic-pause{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff} /* vorige/volgende */ .bbp-ic-prev{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent; border-right:9px solid currentColor} .bbp-ic-next{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent; border-left:9px solid currentColor} .bbp-ic-min{width:12px;height:2px;background:currentColor;align-self:flex-end;margin-top:10px} .bbp-ic-max{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent; border-bottom:9px solid currentColor} .bbp-ic-close{font-size:20px;line-height:1;color:currentColor;border:0;width:auto;height:auto} /* volume-luidspreker (eenvoudige geometrie, currentColor) */ .bbp-ic-vol{width:14px;height:14px;position:relative} .bbp-ic-vol::before{content:"";position:absolute;left:1px;top:4px;width:5px;height:6px;background:currentColor} .bbp-ic-vol::after{content:"";position:absolute;left:5px;top:1px;width:0;height:0; border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid currentColor} .bbp.is-muted .bbp-ic-vol{opacity:.45} .bbp.is-muted .bbp-mute{border-color:var(--ember);color:var(--ember)} /* wachtrij-glyph: drie streepjes */ .bbp-ic-queue{width:14px;height:10px;background: linear-gradient(currentColor,currentColor) 0 0/14px 2px, linear-gradient(currentColor,currentColor) 0 4px/14px 2px, linear-gradient(currentColor,currentColor) 0 8px/9px 2px;background-repeat:no-repeat} .bbp.bbp-queue-open .bbp-queuebtn{border-color:var(--ember);color:var(--ember)} .bbp-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .bbp-titles{display:flex;align-items:baseline;gap:10px;min-width:0} .bbp-title{font-family:var(--f-d);font-weight:500;font-size:14.5px;color:var(--on-night-hi, #FBF9F1); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bbp-artist{font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;color:var(--char-num, #5f5746); white-space:nowrap;flex:0 0 auto} .bbp-seekrow{display:flex;align-items:center;gap:10px} .bbp-time{font-family:var(--f-m);font-size:10.5px;color:var(--char-num, #5f5746);flex:0 0 auto;min-width:34px} .bbp-cur{text-align:right} .bbp-seek{flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;cursor:pointer; background:var(--char-edge, #3a342a);border-radius:3px;outline-offset:4px} .bbp-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%; background:var(--ember);border:0;cursor:pointer} .bbp-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--ember);border:0;cursor:pointer} .bbp-progress{position:absolute;left:0;right:0;top:0;height:2px;background:var(--char-edge, #3a342a)} .bbp-progress-fill{display:block;height:100%;width:0;background:var(--ember)} /* volume: knop + slider (compact, nacht-warm) */ .bbp-vol{display:flex;align-items:center;gap:8px;flex:0 0 auto} .bbp-volrange{width:74px;height:4px;-webkit-appearance:none;appearance:none;cursor:pointer; background:var(--char-edge, #3a342a);border-radius:3px;outline-offset:4px} .bbp-volrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%; background:var(--ember);border:0;cursor:pointer} .bbp-volrange::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ember);border:0;cursor:pointer} /* wachtrij/"nu speelt"-paneel — boven de balk, uitklapbaar, scrollbaar */ .bbp-queue{position:absolute;left:0;right:0;bottom:100%;max-height:46vh;overflow-y:auto; background:var(--char-1, #1B1813);border-top:1px solid var(--char-edge, #3a342a); box-shadow:0 -10px 30px rgba(0,0,0,.35)} .bbp-queue[hidden]{display:none} .bbp-queue-head{display:flex;align-items:center;justify-content:space-between; padding:12px clamp(14px,4vw,28px) 8px;font-family:var(--f-m);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--char-num, #8a8068);max-width:var(--wrap-max);margin:0 auto} .bbp-queue-count{color:var(--ember)} .bbp-q-row{display:flex;align-items:center;gap:13px;width:calc(100% - 0px);max-width:var(--wrap-max);margin:0 auto; text-align:left;background:none;border:0;border-top:1px solid var(--char-line, #241f19);cursor:pointer; padding:11px clamp(14px,4vw,28px);color:var(--on-night, #ECE6D5);font-family:inherit;transition:background .18s} .bbp-q-row:hover{background:rgba(255,255,255,.03)} .bbp-q-row.is-current .bbp-q-title{color:var(--ember)} .bbp-q-no{flex:0 0 auto;width:22px;font-family:var(--f-m);font-size:11px;color:var(--char-num, #5f5746);text-align:right} .bbp-q-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .bbp-q-title{font-family:var(--f-d);font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bbp-q-sub{font-family:var(--f-m);font-size:10px;letter-spacing:.06em;color:var(--char-num, #5f5746)} .bbp-q-now{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--ember)} .bbp.is-playing .bbp-q-row.is-current .bbp-q-now{box-shadow:0 0 0 0 rgba(196,90,52,.5);animation:bbpPulse 1.8s ease-out infinite} @keyframes bbpPulse{0%{box-shadow:0 0 0 0 rgba(196,90,52,.45)}100%{box-shadow:0 0 0 7px rgba(196,90,52,0)}} /* dichtgeklapt: alleen de bedienknoppen + titel, geen seekrij/volume */ .bbp.bbp-min .bbp-seekrow,.bbp.bbp-min .bbp-vol{display:none} .bbp.bbp-min .bbp-inner{padding-top:8px;padding-bottom:9px} /* body houdt ruimte vrij voor de balk zodat niets afgedekt wordt */ body.bbp-active{padding-bottom:78px} body.bbp-active .foot{margin-bottom:0} @media (prefers-reduced-motion:reduce){ .bbp{transition:none} .bbp.is-playing .bbp-q-row.is-current .bbp-q-now{animation:none} } @media (max-width:640px){ /* op smal: volume-slider weg (hardware-volume volstaat); titel/seek krijgen voorrang */ .bbp-volrange{display:none} .bbp-queue-count,.bbp-q-sub{display:none} } /* ── MOBIELE SPELER (telefoon): twee rijen zodat titel + een echte, grijpbare scrubber volle breedte krijgen, en alle bedienknoppen ≥44px touch-doel zijn. Compact/idle (.bbp-min) blijft één rij; alleen de uitgeklapte staat valt in twee rijen. iOS safe-area onderaan vrijgehouden. ── */ @media (max-width:560px){ /* knoppen: ruim genoeg om met de duim te raken */ .bbp-btn{width:44px;height:44px} .bbp-toggle{width:50px;height:50px} /* mute- en dichtklap-knop hebben op telefoon weinig nut → weg, scheelt drukte (let op: .bbp-btn.bbp-min = de KNOP, niet de balkstaat .bbp.bbp-min) */ .bbp-mute,.bbp-btn.bbp-min{display:none} /* uitgeklapt → twee rijen: transport links, wachtrij/sluiten rechts, titel+scrubber eronder */ .bbp:not(.bbp-min) .bbp-inner{flex-wrap:wrap;column-gap:8px;row-gap:10px; padding:10px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))} .bbp:not(.bbp-min) .bbp-prev{order:1} .bbp:not(.bbp-min) .bbp-toggle{order:2} .bbp:not(.bbp-min) .bbp-next{order:3} .bbp:not(.bbp-min) .bbp-queuebtn{order:4;margin-left:auto} .bbp:not(.bbp-min) .bbp-close{order:5} .bbp:not(.bbp-min) .bbp-meta{order:10;flex:1 1 100%;gap:7px} /* titel mag op eigen regel groter en goed leesbaar; artiest weer zichtbaar */ .bbp:not(.bbp-min) .bbp-title{font-size:16px} .bbp:not(.bbp-min) .bbp-artist{display:inline;font-size:11px} /* grotere, beter grijpbare scrubber + tijdlabels */ .bbp-seek{height:6px} .bbp-seek::-webkit-slider-thumb{width:22px;height:22px} .bbp-seek::-moz-range-thumb{width:22px;height:22px} .bbp-seekrow{gap:12px} .bbp-time{font-size:12px;min-width:36px} /* idle/compact: één nette rij — titel inline, geen lege tweede regel */ .bbp.bbp-min .bbp-meta{flex:1 1 auto;min-width:0} .bbp.bbp-min .bbp-artist{display:none} /* extra onderruimte voor de uitgeklapte twee-rij-balk (anders dekt 'ie de laatste regel tekst af tijdens lezen-met-muziek) */ body.bbp-active{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))} body.bbp-active.bbp-expanded{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))} /* wachtrij-rijen ruimer aantikbaar */ .bbp-q-row{padding-top:14px;padding-bottom:14px} } /* mobiel: ruimere tap-zone voor de taal-pill (AAA), geen visuele wijziging */ @media (max-width:720px){ .lang{min-height:44px} }