/* 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; } /* ── flip-deck: één roterend podium met twee fysieke vlakken (pane-a voor, pane-b achter). card-flip.js verplaatst de twee faces uit .flip-faces naar de panes en draait 0°↔180°. Mobiel-schaling gaat via fit() op .flip. ── */ .flip { position: relative; width: 550px; margin-inline: auto; perspective: 2200px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .flip-stage { position: relative; width: 100%; height: 770px; transition: transform .85s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; } .flip-stage .card { cursor: pointer; } .flip-pane { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .flip-pane.pane-b { transform: rotateY(180deg); } .flip-faces { display: none; } .flip:focus-visible { outline: 3px solid rgba(46,120,130,.6); outline-offset: 8px; border-radius: 30px; } /* ════════════ DE KAART — uniforme cyaan rand ════════════ */ .card { width: 100%; max-width: 550px; margin-inline: auto; height: 770px; /* 550×770 = 5:7 */ /* cyaan-familie, ÉÉN kleur die zacht verdiept (geen kleursprong): de drie stops liggen dicht bij elkaar in dezelfde teal-hue, alleen de lichtheid zakt naar onderen — net als de subtiele warme register-rand. Onderin donker genoeg voor de ivoren systeemstrooktekst. */ --gr-a: #7ec1c7; --gr-b: #609ea6; --gr-c: #366b74; --on: #1c6d76; border-radius: 34px; padding: 16px 16px 0; position: relative; isolation: isolate; display: flex; flex-direction: column; /* inner + sysstrip in de flow → strook schaalt betrouwbaar mee */ background: var(--gr-b); background: linear-gradient(180deg, var(--gr-a) 0%, var(--gr-b) 48%, var(--gr-c) 100%); box-shadow: 0 20px 42px rgba(0,0,0,.17), 0 3px 8px rgba(0,0,0,.11), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 22px rgba(0,0,0,.30); /* buitenschaduw afgezwakt (was .30/.20) */ } /* ── systeemstrook (verhoogde onderrand): editie · wordmark · nummer ── */ .sysstrip { position: static; flex: 0 0 auto; height: 52px; z-index: 2; pointer-events: none; white-space: nowrap; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 22px 2px; font: 600 8px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(236,244,246,.66); /* ivoor, contrast op de diepe rand-onderkant */ text-shadow: 0 -1px 0 rgba(8,20,30,.42), 0 1px 0 rgba(255,255,255,.06); } .sysstrip > span:first-child { justify-self: start; } .sysstrip > span:last-child { justify-self: end; display: inline-flex; align-items: center; gap: 7px; } /* de flip-glyph (rond pijltje) naast TURN — non-serif, optisch op kapitaalhoogte */ .ss-sym { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 400; line-height: 1; letter-spacing: 0; position: relative; top: -2px; } /* ── het lichte vlak (perkament) — identiek aan register.css ── */ .inner { position: relative; overflow: hidden; border-radius: 22px; flex: 1 1 auto; min-height: 0; padding: 6px; display: flex; flex-direction: column; background: url('data:image/svg+xml;utf8,') repeat, radial-gradient(1200px 220px at 50% -20px, rgba(120,80,50,.05) 0%, rgba(120,80,50,.03) 40%, rgba(0,0,0,0) 80%), radial-gradient(600px 160px at -80px -40px, rgba(120,80,50,.05), rgba(0,0,0,0) 70%), radial-gradient(600px 160px at calc(100% + 80px) -40px, rgba(120,80,50,.05), rgba(0,0,0,0) 70%), linear-gradient(to right, var(--paper-top) 0%, var(--paper-top) 10%, var(--paper-blend) 22%, var(--paper-mid) 38%, var(--paper-mid) 62%, var(--paper-blend) 78%, var(--paper-top) 90%, var(--paper-top) 100%), var(--paper); background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; /* binnenkaderlijn: witte inzet-ring + subtiele keyline in de rubriek-tint */ /* de zone tussen kaartrand en binnenkaderlijn: DEKKEND, exact dezelfde kleur als op de rug. Half-transparant kleurde hij mee met het papierverloop eronder (gemeten #EBE9E3 boven, #ECEAE5 onder) — klein, maar het maakt de regel toevallig in plaats van afdwingbaar. */ box-shadow: inset 0 0 0 4px #ebe9e5, inset 0 0 0 6px rgba(var(--base-rgb), .16), inset 0 0 40px rgba(60,95,110,.10); } .frame { position: relative; height: 100%; overflow: hidden; border-radius: 16px; display: flex; flex-direction: column; } /* ════════════ KOP — strak, gemeenschappelijk met register/Eo Ena ════════════ Alleen titel links + nummer-pil rechts; geen badge, streep of ondertitel. */ .head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px 15px; border-bottom: 1.5px solid rgba(var(--base-rgb), .28); } .head-title { margin: 0; font-family: var(--body); font-weight: 700; font-size: 28px; line-height: 1.25; letter-spacing: -.02em; color: #20201e; white-space: nowrap; overflow: hidden; } /* mono → iets krapper gespatieerd */ /* De kaartbediening hoort optisch bij de titelregel. De gedeelde kaartmacro houdt het icoon bewust klein en neutraal; op de Vic-voorkant krijgt het de maat en merkinkt van deze kop. Alleen het getekende icoon groeit — de knop blijft transparant en de donkere achterkant behoudt haar lichte contrast. */ .card.vic .head .card-tools .tools-tab { width: 42px; height: 42px; } .card.vic .head .card-tools .tools-tab svg { width: 23px; height: 23px; } .card.vic .head .card-tools .tools-tab svg path { stroke-width: 2.3; } .card.vic:not(.back) .head .card-tools:not(.tools-stil) .tools-tab { color: var(--cta, #1d8f9c); } .card.vic:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:hover, .card.vic:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:focus-visible { color: var(--cta, #1d8f9c); } /* geen .small-variant: de titelgrootte varieert nergens en nooit — te lang is een redactieprobleem (titel inkorten), geen vormgevingsprobleem */ /* nummer-pil rechtsboven (register-anatomie), rand in de lichtste rand-cyaan */ .pill { flex: none; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #2c2620; border: 2px solid var(--gr-a); border-radius: 7px; padding: 5px 9px 4px; background: transparent; white-space: nowrap; } /* ════════════ het beeld (55%) + boek-contour handelsmerk ════════════ */ .art { position: relative; z-index: 2; flex: 0 0 55%; min-height: 0; margin: 0; overflow: hidden; } .art-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; display: block; pointer-events: none; z-index: 4; } /* DE GOLF IS EEN GAT, GEEN KLEUR (12 aug 2026) — zie register.css voor het waarom. De donkere grond verhuist mee naar de img, zodat hij wordt weggesneden. */ .art > img, .art .vignette { -webkit-mask-image: linear-gradient(#000,#000), var(--golf-mask); -webkit-mask-size: 100% calc(100% - var(--golf-h)), 100% var(--golf-h); -webkit-mask-position: top, bottom; -webkit-mask-repeat: no-repeat, no-repeat; mask-image: linear-gradient(#000,#000), var(--golf-mask); mask-size: 100% calc(100% - var(--golf-h)), 100% var(--golf-h); mask-position: top, bottom; mask-repeat: no-repeat, no-repeat; } .art > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; /* GEEN FILTER OP HET VIC-BEELD (20 aug 2026). Hier stond `saturate(1.04) contrast(1.03)` — zinnig toen alle hero's foto's waren, maar de Vic-beelden zijn sinds het kleursysteem duotone lijntekeningen met vastgelegde inkten (papier #F7F1E7, blauwzwart #123443, één spotinkt per familie). Een filter maakt de getoonde kleur dan aantoonbaar anders dan de gespecificeerde, en bij een licht beeld loopt het papier vast op wit: op helena 5,2% van alle kanalen, precies waar de lijnsubtiliteit zit (gemeten gemiddelde 218,8 → 221,4 — het beeld oogde lichter dan het origineel, wat Tom opmerkte). De andere huiden houden hun filter: daar zijn de hero's nog foto's. */ background: #12171a; } .vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(150% 105% at 50% 32%, transparent 72%, rgba(0,0,0,.15) 100%); } /* De kaartsoort staat als redactionele rubricering ín het beeld: klein genoeg om de illustratie niet te kapen, maar expliciet genoeg om kleur niet eerst te hoeven leren. De positie blijft vrij van de boeklijn en is op elke Vic-kaart identiek. */ .art-kind { position: absolute; left: 10px; bottom: 47px; z-index: 5; padding: 0 0 3px; border-bottom: 1px solid currentColor; font: 600 11px/1 var(--body); letter-spacing: .045em; text-transform: uppercase; color: #123c42; pointer-events: none; } /* ════════════ tekstvlak ════════════ vaste Vic-vorm: links gezet, gelijke zijmarges en bewust ademruimte tussen boekpunt en boodschap. */ .lede { position: relative; z-index: 3; flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; margin: -22px 32px 0; padding: 28px 0 4px; background: transparent; } /* de wenkbrauw: de tagline boven de lede — zelfde anatomieplek als op de Eo Ena-kaart (subtitle → eyebrow), in het Vic-idioom: mono, gesperd kapitaal, het rubriekaccent als kleur. */ .lede .eyebrow { margin: 0 0 14px; font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cta); text-align: left; } .lede p { margin: 0; max-width: none; font-family: var(--body); font-size: 13px; line-height: 1.45; letter-spacing: 0; color: #33302b; text-align: left; } /* Op kaarten met een quote volgen subtitel en broodtekst direct op elkaar. De quote sluit af, na twee tekstregels wit. */ .lede.heeft-quote .eyebrow { margin-bottom: 0; } .lede .lede-quote { margin-top: 38px; } /* De titel van de tekst, in het contentgebied — verschijnt alleen als de kaart een eigen `name:` draagt die van de titel verschilt (naam ≠ titel, 22 aug 2026). De wenkbrauw erboven blijft (vormbewijs variant B). */ .lede .content-kop { margin: 0 0 10px; font-family: var(--body); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink, #2a2520); text-align: left; max-width: none; margin-inline: 0; } .lede .eyebrow + .content-kop { margin-top: 2px; } /* ════════════ ACHTERKANT — routes op het donkere merkvlak ════════════ */ /* De hele tegel is de handeling. Een doorschijnende teal-laag en lichte lijnvoering houden de routes in dezelfde wereld als rug, kompas en kop; er is daarom geen tweede, nagebootste knop binnen de klikzone. */ .card.back .mid { position: relative; z-index: 3; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 12px 20px; } .card.back .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* oneven aantal (3 tegels): de losse laatste centreert op halve breedte */ .card.back .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } .card.back .tile { background: rgba(18,60,66,.18); border: 1px solid rgba(220,241,241,.24); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; cursor: pointer; padding: 18px 12px 16px; gap: 11px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .card.back .tile:hover { background: rgba(18,60,66,.30); border-color: rgba(125,211,217,.66); transform: translateY(-1px); } .card.back .tile:focus-visible { outline: 3px solid rgba(125,211,217,.72); outline-offset: 3px; } .card.back .tile-badge { width: 60px; height: 60px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: 1.5px solid rgba(163,226,231,.82); box-shadow: none; } .card.back .tile-badge .ico { width: 56%; height: 56%; background-color: #b9e8eb; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* De Jumbo Stack is zelf al een krachtig silhouet. Zonder medaillon leest hij direct als kaartobject; een vaste maskmaat geeft de bron rondom ademruimte, zodat lijnen die tot aan de PNG-rand lopen niet worden afgeknipt. */ .card.back .tile-jumbo .tile-badge { border:0; border-radius:0; } .card.back .tile-jumbo .tile-badge .ico { width:44px; height:54px; -webkit-mask-size:36px auto; mask-size:36px auto; } .card.back .tile-name { font: 600 15px/1 var(--body); color: #f0f6f5; } .card.back .tile-btn { margin-top: 3px; display: flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; padding: 3px 0; font: 600 12px/1 var(--body); letter-spacing: .08em; background: transparent; color: #b9e8eb; border: 0; } .card.back .tile-btn .arr { transition: transform .18s ease; } .card.back .tile:hover .tile-btn .arr { transform: translateX(3px); } /* ══ 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; --site-corner-bg: rgba(252,250,244,.20); --site-corner-filter: blur(5px) saturate(1.04); --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, ~225px) heeft een vaste hoogte — plus de golf-reserve onderin. Onder ~1780px 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 ~1780px wint de verhouding vanzelf, en ≤1100px zet de mobiele regel zijn eigen hoogte. `cover` snijdt het beeld gewoon iets ruimer bij. */ min-height: 300px; --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 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; } .tb-curated { margin: 8px 0 0; font: 600 clamp(9px, .85vw, 11px)/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #102e32; } /* 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; } } .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; } } /* ── 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; } /* ── merk-achterkant: het Vic-kompas als medaillon (colofon-kant) ── Zelfde anatomie als de Stoutenburger makerkaart: de .inner neemt de donkerste kleur van de kaartrand → kaart en vlak worden één naadloos medaillon. Het kompas is een masker in de ivoorkleur van de systeemstrooktekst, half doorschijnend, zodat het merkteken met het teal-vlak versmelt. */ .card.vic.markback .inner { background: var(--gr-c); box-shadow: inset 0 0 0 4px #86a6ac, inset 0 0 0 6px #3f6b73; } /* De lege rug heeft wel dezelfde kopgeometrie nodig voor haar bediening, maar geen zichtbare kop: geen titel, nummer of scheidingslijn op het merkvlak. */ .card.vic.markback .markback-head { z-index: 7; border-bottom: 0; } .vic-back { position: relative; z-index: 3; flex: 1 1 auto; display: grid; place-items: center; padding: 24px; } /* HET HART VAN DE KAART (13 aug 2026): absoluut gecentreerd op .card, niet op het contentvlak — dat scheelt de halve systeemstrook en zag er net-niet-midden uit. */ .vic-back-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; width: 62%; max-width: 300px; aspect-ratio: 1; background: rgba(240,244,244,.5); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } /* 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; } /* ══ DE RUG-CANON (14 aug 2026, Tom — na vormbewijs op EOE-004) ═══════════════ FRONT = licht veld / wereld in beeld · BACK = wereldveld / wereld als watermerk. De informatie op de rug staat ín de kleur van haar wereld; het kompas is er een zeer zacht watermerk onder (.06 — zachter waar tekst overheen loopt was de eis, dus overal .06). De crème CTA blijft: die springt als handeling uit de informatiezijde. Inktwaarden zijn GEMETEN, niet geschat: vol ivoor haalt 6.0/5.0/7.3 op de drie velden, secundair (.92) 5.4/4.5/6.5 — drempel 4.5. Het watermerk staat in het hart van de KAART: +18px onder het frame-centrum, want het frame mist de halve systeemstrook (les van de merkvlakken). De lege rug blijft het volle merkvlak — één teken, twee volumes. */ /* DE RUG IS OVERAL DE VIC-099-RUG (19 aug 2026, Toms canon). Het merkvlak van VIC-099 is de maat: hetzelfde veld, dezelfde binnenkaderlijn en hetzelfde kompas — met content erop wordt het kompas alleen doorschijnend (.06). Concreet betekent dat: GEEN eigen box-shadow (de gewone binnenkaderlijn van .inner blijft staan — witte inzet-ring .5 + keyline — die had ik eerst naar .12 verzwakt en dát was de inconsistentie), en het kompas op de merkvlak-maat (62%, max 300px) in plaats van 78% zonder maximum. */ .card.vic.back .inner { background: var(--gr-c); /* het diepe merk-cyaan als veld */ /* DE ZONE TUSSEN KAARTRAND EN BINNENKADERLIJN (20 aug 2026): die moet aan beide zijden dezelfde kleur hebben. De ring stond hier op .5 wit — dus wél aanwezig, maar half doorzichtig, en dus kleurde hij mee met het veld eronder: gemeten #9FB5B9 op de rug tegen #EBE9E5 op de voorkant. Vandaar dat de correctie steeds "terugkwam". Een dekkende kleur is de enige sluitende vorm; de keyline blijft de lijn zelf. */ /* zone = veld + 40% wit (blijft cyaan, dus de opstaande rand van hetzelfde vlak); lijn = haar kleur van vóór deze ingreep, rgba(108,108,108,.16) over #366b74, vooraf uitgerekend. Beide DEKKEND: geen verloop over dit gebied. */ box-shadow: inset 0 0 0 4px #86a6ac, inset 0 0 0 6px #3f6b73; } .card.vic.back .frame::before { content:""; position:absolute; top:calc(50% + 18px); left:50%; transform:translate(-50%,-50%); width:62%; max-width:300px; aspect-ratio:1; z-index:0; pointer-events:none; background:rgba(240,244,244,.06); -webkit-mask:url('../cards/vic-compass.webp') center/contain no-repeat; mask:url('../cards/vic-compass.webp') center/contain no-repeat; } /* De kop vormt een eigen stacking context. De CTA-laag (.mid) staat op z-index 3; met dezelfde waarde won zij als later DOM-element en ving zij de kliks onder het uitgeklapte menu af. De hele kop moet daarom erboven liggen — een hogere z-index op .tools-tray alléén kan nooit uit de stacking context ontsnappen. */ .card.vic.back .head { z-index:7; border-bottom-color:rgba(240,244,244,.28); } .card.vic.back .head-title { color:#f0f6f5; } .card.vic.back .pill { color:#f0f6f5; border-color:rgba(220,241,241,.24); } /* De routes blijven doorschijnend: ze horen bij het merkvlak en leggen geen tweede, crèmekleurige kaartwereld over de rug heen. */