/* Vic Boomer — PAGE FRAME (30 sep 2026): alles rond de kaart — body, banner, index, raster, voet. De kaart zelf staat in vicboomer.card.css, afgebakend met .w-vic, zodat een Vic-kaart overal (ook in een Deck van een andere wereld) haar eigen vorm houdt. */ /* Vic Boomer kaart — op de gedeelde almanak-template (register-anatomie): .card (uniforme cyaan gradient-rand) → .inner (perkament) → .frame → verhoogde onderrand/systeemstrook. Fonts: IBM Plex Mono (behouden, het eigen karakter van de Vic-kaart). De rubriek stuurt alléén nog het accent (badge + titelstreep); de rand is merk-cyaan, gelijk over alle Vic-kaarten. */ /* ── IBM Plex Mono, lokaal gebundeld (axioma 2: geen CDN-afhankelijkheid) ── */ @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/PlexMono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2192, U+2212; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/PlexMono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BB, U+1E00-1EFF, U+2020, U+20A0-20AB; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('../fonts/PlexMono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2192, U+2212; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('../fonts/PlexMono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BB, U+1E00-1EFF, U+2020, U+20A0-20AB; } :root { /* DE KAART IS EEN COMPOSITIE, GEEN THEMA (15 aug 2026): licht perkament en het donkere wereldveld zijn ontworpen paren. color-scheme:light zegt browsers met een automatische donkere modus dat ze hier niets te herschilderen hebben. */ color-scheme: light; --ink: #20201e; --muted: #6f6a63; --gold: #a8905a; /* perkament — identiek aan de register-/Eo Ena-kaart, zodat het interieur (incl. de boek-golf) tot de zelfde familie hoort; alléén de rand is cyaan. */ --paper: #f9f5ef; /* Frissere contentzone, in lijn met de subtielere papierverdeling van KJM. */ --paper-top: #fbf7f0; --paper-mid: #fefcf7; --paper-blend:#fcf9f4; --body: 'IBM Plex Mono', ui-monospace, monospace; --serif: 'IBM Plex Mono', ui-monospace, monospace; /* rubriek-accent (fallback = merk-cyaan als een kaart geen rubriek heeft) */ --base: #7DD3D9; --base-rgb: 125, 211, 217; --cta: #1d8f9c; /* cyaan van de prime-knop op de achterkant */ } /* HET VEL SPREEKT VIC (22 aug 2026). overlay.njk levert bewust een neutraal systeemrecept; op Vic-pagina's krijgen kaartoverlay en uitklapmenu de diepe teal van het woordmerk. Cyaan blijft het interactieve accent via --wereld. */ body.vic-card-page, body.vic-gallery { --vel-ink: #123c42; --vel-ink-rgb: 18,60,66; --vel-dash: rgba(18,60,66,.40); --vel-secondary: rgba(18,60,66,.68); } * { box-sizing: border-box; } /* iOS text-autosizing UIT (anders blaast iPhone-WebKit de kleine systeemstrook op ná de kaart-schaling) — zelfde regel als register.css/eoena.css. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; padding: 34px 16px; overflow-x: hidden; display: grid; place-items: center; color: var(--ink); font-family: var(--body); background: #eef1ee; } /* Losse Vic-kaarten krijgen op desktop hetzelfde grote kompaswatermerk als de jumbostacks. Het blijft achter de kaart en verdwijnt volledig op mobiel. */ @media screen and (min-width: 960px) { body.vic-card-page { position: relative; isolation: isolate; } body.vic-card-page::before { content: ""; position: fixed; z-index: 0; pointer-events: none; width: min(88vw, 1680px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('../cards/vic-compass-screen.webp') center/contain no-repeat; opacity: .12; } body.vic-card-page > .world-card-main, body.vic-card-page > .world-site-foot { position: relative; z-index: 1; } } /* ══ voordeur-gallery (card-vic-gallery.njk) ══════════════════════════════ Zelfde COMPOSITIE als eoena.com — banner, index-sectie, kaarten, voet — maar in de kleur en het lettertype van Vic Boomer. De klassenamen zijn bewust dezelfde (.topbanner, .index, .home-foot): dat maakt zichtbaar dat het één indeling is die twee werelden dragen, in plaats van twee losse ontwerpen. */ body.vic-gallery { display: block; padding: 0; background: #f4f6f4; color: var(--ink); --site-corner-accent: #1d8f9c; /* De Boekkrul blijft doorzichtig glas, maar spreekt nu zichtbaar Vic-cyaan. */ --site-corner-bg: rgba(125,211,217,.26); --site-corner-filter: blur(5px) saturate(1.10); --banner-glow-rgb: 252,250,244; --banner-glow-core: .28; --banner-glow-mid: .20; --banner-glow-outer: .08; } /* Het hamburgerteken spreekt dezelfde diepe teal als woordmerk en bannertekst. De boeklijn houdt bewust haar eigen, lichtere accent via --site-corner-accent. */ body.vic-gallery #vic-site-corner .site-corner-button, body.vic-gallery #vic-site-corner .site-corner-button:hover, body.vic-gallery #vic-site-corner .site-corner-button:focus-visible { color: #102e32; } /* ── top-banner: panoramische sfeer-strip (6:1) met de titel eroverheen ── */ /* De voordeuren delen dezelfde panoramische circa-6:1-verhouding en dezelfde flauwe golf. Het actuele Vic-beeld is 3111x505; `cover` bewaakt de uitsnede. */ .topbanner { position: relative; width: 100%; aspect-ratio: 3072/512; overflow: hidden; /* DE STAPEL PAST ALTIJD (18 aug 2026). De banner schaalt 6:1 met het venster, maar de titelstapel (teken + woordmerk + drie regels, ~250px) heeft een vaste hoogte — plus de golf-reserve onderin. Onder ~1980px werd de banner lager dan stapel + golf en stak het teken er bóven uit (gemeten: −11px op 1600, −30px op 1300 — precies de laptopbreedtes). De min-height houdt de banner op maat; boven ~1980px wint de verhouding vanzelf, en ≤1100px zet de mobiele regel zijn eigen hoogte. `cover` snijdt het beeld gewoon iets ruimer bij. */ min-height: 330px; --spatial-focus-x: .10; --spatial-focus-y: .5; } .topbanner-img { position: absolute; inset: 0; background: 10% center/cover no-repeat; } /* het ruimtelijke canvas (spatial-banner.js) ligt óp de statische banner en onder titel (2) en golf (4); zonder canvas verandert er niets */ .spatial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } /* DE MENIGTEKLOK is de banner zelf (2 nov 2026). Het canvas tekent op een vaste maat van 3111x505 (6,16:1). De banner is 6:1, maar `min-height: 330px` maakt haar op laptopbreedtes vierkanter (4,85:1 op 1600px) — `cover` sneed dan de minuten weg. Daarom `contain`: de hele klok staat er altijd, verankerd LINKS. De banden die overblijven dragen dezelfde kleur als het canvas, dus ze vallen niet op. En het canvas houdt onderin de golf-reserve vrij, net als de titelstapel: anders verdwijnt de secondeloper (op 95,6% van de hoogte) achter de boek-golf. */ /* DE KLOKBANNER IS RECHTHOEKIG (2 nov 2026): zij draagt exact de verhouding van het canvas, 3111:505. Een fotobanner verdraagt bijsnijden, een getekende klok niet — elke afwijkende verhouding kostte óf de minuten (`cover`) óf crème banden met een kleurtrap bij de golf (`contain`). `min-height` vervalt: die stond er voor de titelstapel in het midden, en die stapel verhuist. */ .topbanner-klok { aspect-ratio: 3111/505; min-height: 0; background: #F4EAD8; } /* Geen boek-golf op de klokbanner: de secondeloper loopt op 95,6% van de hoogte en verdween eronder. De onderrand van de klok ís nu de onderrand. De regel die de golf hier verborg is op 2 nov vervallen met de golf zelf uit het sjabloon. */ /* DE ONDERRAND ALS LIJN (2 nov 2026). De boek-golf droeg haar eigen 1px-lijn (`bookWave(..., '#123c42')`, non-scaling): de grens tussen banner en pagina. Zonder golf viel die lijn weg en stond er een harde kleurovergang crème→pagina. Hier staat zij als dezelfde kleur op 60%, dus een tint lichter dan op de andere voordeuren — de klok heeft geen zware rand nodig. Een pseudo-element, geen `border-bottom`: een border zit binnen de verhouding en zou het canvas 1px indrukken, waarmee de banner niet meer 1-op-1 op het canvas staat. */ .topbanner-klok::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(18, 60, 66, .6); z-index: 5; pointer-events: none; } /* ── DE MERKINTRO RECHTS VAN DE KLOK (2 nov 2026) ───────────────────────────── Naar Toms zetsel (2000x317): teken, woordmerk en twee onderschriften, links uitgelijnd op 52,95% van de bannerbreedte en verticaal gecentreerd. De klok eindigt op 45,65% (CLOCK_X 120 + CLOCK_W 1300 van 3111), dus het teken past in de tussenruimte zonder de minuten te raken. Alle maten in `cqw`: één procent van de BANNERBREEDTE, niet van het venster. Dat is hier het enige eerlijke anker — de banner is één tekening met een vaste verhouding, dus zetsel en klok horen in dezelfde pas te schalen. `vw` telt de schuifbalk mee en laat het zetsel een procent verlopen. Afgelezen uit het zetsel, omgerekend naar bannerbreedte: tekstkant links 1059/2000 = 52,95% kapitaalhoogte 51/2000 = 2,55% (woordmerk 5,571 breed per hoogte) onderschrift 32/2000 = 1,60% regelafstand 42/2000 = 2,10% -> interlinie 1,3125 Inkt afgelezen: woordmerk, teken en onderschrift 1 #405457 (de inkt van de menigte zelf), onderschrift 2 #82847D. Beide onderschriften dekken even veel pixels, dus ze staan in dezelfde grootte en hetzelfde gewicht. */ .topbanner-klok { container-type: inline-size; } .topbanner-klok > .topbanner-title { inset: 0; padding: 0 4cqw 0 52.95cqw; align-items: flex-start; justify-content: center; text-align: left; } /* HET MERKTEKEN STAAT VOOR DE LETTERS (Toms correctie, 2 nov 2026): teken en woordmerk vormen samen één regel, en de onderschriften lijnen links uit op het TEKEN, niet op de letters. De linkerkant van het blok blijft dus op 52,95% staan — de plek die tegenover de klok klopt — en VIC BOOMER schuift naar rechts. Het teken is 3,2% van de bannerbreedte: 1,25x de kapitaalhoogte, zodat het vierkant optisch even zwaar weegt als de letters in plaats van eronder weg te vallen. De tussenruimte van 1,3% is ongeveer één letterbreedte van het woordmerk (284/10 glyphs). */ .topbanner-klok .tb-lockup { display: flex; align-items: center; gap: 1.3cqw; } .topbanner-klok .tb-badge { position: static; flex: none; translate: none; width: 3.2cqw; height: 3.2cqw; margin: 0; background: #405457; } /* VIC BOOMER blijft het woordmerk (de logo-letters), geen gezette tekst. De verhouding is nu die van het bestand zelf (1649x296); met de oude 2400/296 zweeft het masker onder `contain` in een te breed vak en klopt de kapitaalhoogte niet. */ .topbanner-klok .tb-mark { width: 14.21cqw; aspect-ratio: 1649/296; margin: 0; background: #405457; -webkit-mask-position: left center; mask-position: left center; } .topbanner-klok .tb-curated { margin: 1cqw 0 0; font-weight: 400; font-size: 1.6cqw; line-height: 1.3125; letter-spacing: 0; text-transform: none; color: #405457; } /* geen kompas-ornament in dit zetsel */ .topbanner-klok .tb-rule { display: none; } .topbanner-klok .tb-lede { margin: 0; font-size: 1.6cqw; line-height: 1.3125; color: #82847D; } .topbanner canvas.menigteklok { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: left center; z-index: 1; } /* de boek-golf snijdt de onderrand van de banner weg in de paginakleur */ /* Een FLAUWE golf (Toms correctie, 8 aug): compositie vóór kaartverhouding. */ .book-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(28px, 4vw, 64px); display: block; z-index: 4; pointer-events: none; } /* De stapel centreert in het deel bóven de golf — alleen bij Vic nodig: deze stapel (teken + woordmerk + drie regels) is hoger dan die van Eo Ena en zakte anders met de onderste regels in de vouw. */ .topbanner-title { position: absolute; inset: 0 0 clamp(28px, 4vw, 64px) 0; z-index: 2; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; } /* Op brede schermen draagt de panoramabanner de merkintro. In het rustige middenvlak hoort die aan de BOVENKANT verankerd te zijn. Een verschuiving vanuit het geometrische centrum werkte op gewone desktops, maar zakte op ultrabrede schermen weer mee met de steeds hogere 6:1-banner. */ @media (min-width: 1101px) { .topbanner-title { inset:clamp(24px,1.5vw,60px) 0 auto 0; justify-content:flex-start; transform:none; } } /* De banner staat er ONBEWERKT (Toms keuze): geen waas, leesgloed of tekstschaduw over het beeld. Leesbaarheid mag volledig uit het beeld komen. */ .vic-gallery .site-banner-title::before, .vic-gallery .site-banner-title::after { display:none; } /* het VIC BOOMER-woordmerk (het merk zelf), kleurbaar via mask — zoals het Eo Ena-woordmerk op de andere voordeur. Geen gezette letters meer. */ /* het VIC-teken boven het woordmerk, in dezelfde kleur als de letters */ .tb-badge { width: min(5vw, 60px); aspect-ratio: 1; display: block; margin: 0 auto 14px; background: #102e32; -webkit-mask: url('../cards/vic-mark.webp') center/contain no-repeat; mask: url('../cards/vic-mark.webp') center/contain no-repeat; } .tb-mark { width: min(32vw, 400px); aspect-ratio: 2400/296; display: block; margin: 0 auto; background: #102e32; -webkit-mask: url('../cards/vic-wordmark.webp') center/contain no-repeat; mask: url('../cards/vic-wordmark.webp') center/contain no-repeat; } .visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } .tb-curated { margin: 10px 0 0; font: 700 clamp(12.75px, 1.2vw, 15.5px)/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #08272b; } /* het ornament: kompas geflankeerd door uitfadende lijntjes */ .tb-rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: 210px; margin: 8px auto; } .tb-rule::before, .tb-rule::after { content: ""; flex: 1; height: 1px; } .tb-rule::before { background: linear-gradient(to left, rgba(29,143,156,.75), transparent); } .tb-rule::after { background: linear-gradient(to right, rgba(29,143,156,.75), transparent); } .tb-compass { flex: none; width: 18px; height: 18px; background: var(--cta); -webkit-mask: url('../cards/vic-compass.webp') center/contain no-repeat; mask: url('../cards/vic-compass.webp') center/contain no-repeat; } .tb-lede { margin: 0; font-family: var(--body); font-size: clamp(11px, 1.15vw, 14px); line-height: 1.7; color: #102e32; } /* TABLET (≤1100px): de 6:1-strip wordt te laag voor de titelstapel — gemeten liep die bij 1024px al 26px over de banner heen, waardoor logo en tekst wegvielen. Daarom een vaste hoogte in plaats van de vlakke verhouding, en het brandpunt naar links zodat de figuur in beeld blijft bij die krappere uitsnede. */ @media (max-width: 1100px) { .topbanner { aspect-ratio: auto; height: 30vh; min-height: 250px; --spatial-focus-x: .10; } @supports (height: 1svh) { .topbanner { height: 30svh; } } /* De klokbanner houdt ook hier haar eigen verhouding: een vensterhoogte in plaats van een beeldverhouding zou de klok weer uit de pas trekken. */ .topbanner-klok { aspect-ratio: 3111/505; height: auto; min-height: 0; } @supports (height: 1svh) { .topbanner-klok { height: auto; } } .topbanner-img { background-position: 10% center; } .tb-badge { width: 46px; margin-bottom: 10px; } .tb-mark { width: min(300px, 46vw); } } /* mobiel: geen platte strip maar een hoge banner met uitsnede, zodat de titelstapel leesbaar blijft — zelfde aanpak als de Eo Ena-voordeur */ @media (max-width: 760px) { /* Geen boek-golf op mobiel: de banner is daar een hoge uitsnede in plaats van een platte strip, en de vouw leest dan niet als een boekrand maar als een hap uit het beeld. De titelstapel mag dus ook weer de volle hoogte gebruiken. */ .book-wave { display: none; } .topbanner-title { inset: 0; } .topbanner { aspect-ratio: auto; height: 56vh; min-height: 380px; /* Vic blijft als coulisse links in beeld — óók in het WebGL-canvas, dat anders op deze ultrabrede strip alleen het lege midden zou tonen. */ --spatial-focus-x: .04; } @supports (height: 1svh) { .topbanner { height: 56svh; } } .topbanner-img { background-position: 4% center; } .tb-badge { width: 56px; } .tb-mark { width: min(320px, 82vw); } .tb-lede { font-size: 14px; } } /* ── index-sectie ── */ .index { max-width: 1240px; margin: 0 auto; padding: 52px 24px 8px; text-align: center; } .index-eyebrow { margin: 0; font: 700 14px var(--body); letter-spacing: .34em; text-transform: uppercase; color: var(--cta); } .index-title { margin: 12px 0 0; font-family: var(--body); font-weight: 700; font-size: 32px; letter-spacing: .06em; text-transform: uppercase; color: #123c42; } /* de drukvel-link neemt het cyaan van de pagina, niet de gouden terugval */ .dv-link { --dv-ink: var(--cta); } .index-sub { margin: 12px auto 0; max-width: 52ch; font-family: var(--body); font-size: 15px; line-height: 1.7; color: #4a5250; } /* ── de kaarten onder elkaar (Toms indeling voor deze voordeur) ── */ .cards-col { display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 44px 16px 72px; } /* ── DE OPSTELLING: op ware grootte, maximaal `columns` per rij ────────────── Toms regel (20 aug 2026), herzien dezelfde dag: de kaarten houden hun WARE GROOTTE — 550px, precies zoals op eoena.com — want die maat draagt de impact en de typografie is erop afgestemd. Ze zijn dus niet geschaald; het aantal per rij volgt uit de ruimte: op 1920px passen er drie, op 1600px twee, en pas vanaf ~2350px vier. `columns` uit het Deck is daarmee een MAXIMUM, geen dwang: de container is precies zo breed als dat aantal kaarten, zodat er nooit meer naast elkaar komen — ook niet op een ultrabreed scherm. Zelfde flex-wrap als de Eo Ena- voordeur (.cards-row), zodat beide etalages zich gelijk gedragen. De eerste zoom-versie verkleinde de kaarten naar 284-384px; dat kostte precies de impact waar het om ging. */ .cards-col.cards-grid { --kaart: 550px; --gap: 40px; --rand: 28px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; max-width: calc(var(--kolommen, 4) * var(--kaart) + (var(--kolommen, 4) - 1) * var(--gap) + 2 * var(--rand)); margin-inline: auto; gap: var(--gap); padding: 44px var(--rand) 72px; } /* De basiskaart draagt `margin-inline: auto` (voor een LOSSE kaart op haar eigen pagina). In een flex-rij eist die auto-marge álle vrije ruimte op, en dan komt er precies één kaart per rij — gemeten, en de reden dat de eerste poging op elk scherm één kolom gaf. Binnen de voordeur dus geen auto-marge. */ .cards-grid .flip { margin-inline: 0; } /* Mobiel behoudt dezelfde 550px-grondmaat. card-flip.js schaalt pas wanneer de viewport werkelijk smaller is; een vaste tussenzoom veroorzaakte bij 640px eerst een sprong naar 319px en daarna juist weer groei bij verder versmallen. */ @media (max-width: 640px) { .cards-col.cards-grid { --gap: 26px; padding: 36px 12px 64px; } } /* De Ulam-schikking staat in ulam-veld.css (gedeeld met de Stack-pagina). */ /* ── voet: exact de opbouw van eoena.com (maten, ruimte, typografie), met het kompas van Vic Boomer als merkteken ── */ .home-foot { border-top: 1px solid rgba(20,60,66,.16); width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px 24px 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } /* het VIC-teken in zijn EIGEN kleur — daarom een afbeelding en geen mask */ .foot-mark { width: 38px; height: auto; display: block; } .foot-brand { font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #4a5250; line-height: 1.9; } .foot-brand span { color: #8a918e; letter-spacing: .08em; } .foot-brand .foot-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .foot-brand .foot-link:hover { color: var(--world-color, #1d8f9c); } /* De rechterrand-reserve is 15 aug 2026 vervallen: de bediening woont nu linksboven in een eigen interface-regel (card-tools.njk) en het menu is een tijdelijk paneel óver de content — het contentgebied is weer de volle breedte. */ /* EEN KAART IS GEEN BESTAND (13 aug 2026). Sleepbare afbeeldingen geven een spookbeeld aan de cursor en veranderen een veeg in een sleep. Dit is het vangnet voor Safari/Chrome; de werkende regel voor álle browsers staat als dragstart-guard in assets/js/card-flip.js. `-webkit-touch-callout` haalt op iOS het vasthoud-menu ("Bewaar afbeelding") weg — dezelfde onderbreking, maar dan met een vinger. */ img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }