/* Register-kaart (almanak mini-card) — gegenereerd uit card-textile-exp, CSS-relatieve paden */ /* ── Site-fonts: Lora + EB Garamond — het eigen karakter van de Stoutenburger-kaart (bewust behouden; Jost-experiment teruggedraaid) ── */ @font-face { font-family: "Lora"; src: url("../fonts/Lora-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/Lora-Italic-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; } @font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } :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; /* ══ DE STOUTENBURGER-BASIS (20 aug 2026) ══ De kaartrand was een per-kaart materiaaltint; negen kaarten naast elkaar oogden daardoor druk. Nu één rand voor het hele register: warm mineral bone dat naar een ontzadigde kalksteenvoet zakt (variant F1 — de voet is 10% minder verzadigd en 3% lichter dan het eerste mineraal, zodat het verloop kalksteen→mineraal wordt en niet crème→taupe). base_color blijft als materiaaldata in de frontmatter, maar stuurt geen vorm meer aan. */ --sb-bone: #D8D1C3; /* de rand zelf — boven en opzij */ --sb-mid: #c1bbaf; /* halverwege */ --sb-voet: #9a9589; /* de voet, waar de systeemstrook in gedrukt staat */ --sb-veld: #9a9589; /* de rug: dezelfde kleur als de voet */ /* de zone tussen kaartrand en binnenkaderlijn — DEKKEND, zodat voor- en achterkant per definitie dezelfde kleur dragen. Een half-transparante ring kleurt mee met wat eronder ligt en werd op de rug dus grauw. */ --sb-kaderveld: #f6f3ee; --sb-keyline: rgba(70,62,50,.20); /* de binnenkaderlijn zelf */ /* OP DE RUG (20 aug 2026, Toms correctie): de zone hoort NIET licht te zijn maar in de kleurfamilie van het veld — het is de opstaande rand van het véld, zoals de zone op de voorkant de opstaande rand van het papier is. Gemeten op de voorkant: rand #457D85 → zone #EBE9E5 → lijn #D9D5CB → papier #F0EADE; de zone ligt daar 3% onder de content, niet bij de rand. Een neutraal lichte zone werd daardoor een witte lijst om een donker vlak. Nu: veld + 40% wit, DEKKEND (nooit een verloop over dit gebied), en de binnenkaderlijn behoudt haar kleur van vóór deze hele ingreep — rgba(240,232,214,.10) over het veld, vooraf uitgerekend. */ --sb-kaderveld-rug: #c2bfb8; --sb-keyline-rug: #a39d91; --sb-inkt: #2e261c; /* systeem-inkt op bone en op de rug */ --base: #3d2747; /* legacy-vangnet; niet meer sturend */ --green: var(--base); --ink: #2a2520; --muted: #8a8077; --gold: #a8905a; --paper: #f9f5ef; --paper-top: #f7f0e2; --paper-mid: #fdf9f3; --paper-blend: #faf5eb; /* = mix(--paper-top 50%, --paper-mid); vooraf berekend (geen color-mix) */ --serif: "Lora", Georgia, "Times New Roman", serif; --body: "EB Garamond", Georgia, serif; --mono: grayscale(1) sepia(.72) saturate(.8) brightness(.97) contrast(1.06); --tilemono: grayscale(1) sepia(.92) saturate(1.5) hue-rotate(-8deg) brightness(1.12) contrast(.9); } * { box-sizing: border-box; } /* iOS text-autosizing UIT: iPhone-WebKit blaast anders "te kleine" tekst (de 9px-systeemstrook) op ná de kaart-schaling — waardoor de strook vol formaat leek terwijl de rest van de kaart netjes meekromp. */ 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: #fbf8f5; /* bijna-witte pagina-achtergrond, gelijk aan eoena.com */ } /* ════════════ DE KAART ════════════ */ .card { width: 100%; max-width: 550px; margin-inline: auto; height: 770px; /* 550×770 = 5:7 exact (MTG-verhouding 2,5″×3,5″) */ /* één rand voor élke registerkaart (zie :root) — niet meer per materiaal */ --gr-a: var(--sb-bone); --gr-b: var(--sb-mid); --gr-c: var(--sb-voet); --base-rgb: 216, 209, 195; /* = --sb-bone, voor de rgba()-afgeleiden */ --veld: var(--sb-veld); /* De inkt van de beschikbaarheidsstrook en de badge. Kwam tot 20 aug uit de macro (base_color gemengd met zwart) en viel weg toen de kaartkleur een systeemkleur werd — de icoontjes onderop de tradingcards werden daardoor transparant. Vast nu, en gekozen binnen de oude bandbreedte: per materiaal lag --on tussen 10,7:1 en 14,8:1 op het papier; #3a352c geeft 11,6:1. */ --on: #3a352c; --badge: #4a4238; /* crème rand met materiaal-tint. --frame en --gr-a/b/c worden per kaart in de macro geïnjecteerd (vooraf berekende color-mix → werkt in élke browser, ook oudere iPad-Safari). Voor de info/maker-face staan ze vast bij .card.info. */ /* gelaagde opbouw (algemene kaart-template): dit vlak ís de rand (gradient + patroon); daarop ligt het lichte vlak (.inner). Boven/links/rechts gelijke randdikte, onderin hoger → estate voor de systeemstrook (metadata). */ border-radius: 34px; padding: 16px 16px 0; position: relative; isolation: isolate; display: flex; flex-direction: column; /* inner + sysstrip in de flow → sysstrip schaalt betrouwbaar mee (ook Safari-zoom) */ background: var(--base); /* ultra-fallback als custom properties ontbreken */ /* rijke 3-stops gradient (Eo Ena-diepte): licht-boven → donker-onder, per kaart getint zodat elke categorie z'n eigen kleur houdt (tafellicht van boven) */ background: linear-gradient(180deg, var(--gr-a) 0%, var(--gr-b) 48%, var(--gr-c) 100%); /* de donkere binnengloed (inset 22px) is vervallen: op een licht randmateriaal maakt hij de rand grauw. De 1px hairline blijft — die tekent de rand af. */ 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); } /* ── Systeemstrook: de onderste kaartrand als vaste identificatie van het kaartsysteem — editie · wordmark · nummer, heel klein kapitaal, als gedrukt in het randmateriaal. Vervangt de footerline (+ fade-lijntjes) in het crèmevlak; kan later ook set-/verificatiegegevens dragen. ── */ .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 24px 2px; /* 24px + 16px kaart-padding = tekst op ~40px van de rand */ font: 600 9px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; /* de rand is licht geworden, dus de inkt draait om: donker op kalksteen. α .94 op --sb-voet = 4,56:1 (gemeten, drempel 4,5). */ color: rgba(46,38,28,.94); text-shadow: 0 1px 0 rgba(255,255,255,.40), 0 -1px 0 rgba(0,0,0,.05); } .sysstrip > span:first-child { justify-self: start; } .sysstrip > span:last-child { justify-self: end; display: inline-flex; align-items: center; gap: 8px; } /* icoon optisch gecentreerd naast TURN */ .ss-sym { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* non-serif: strak rond pijltje */ font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: 0; position: relative; top: -2.5px; } /* optisch omhoog, op de hoogte van de TURN-kapitalen */ /* het lichte vlak: afgeronde hoeken, draagt het papier; de suggestie van de kaartrand ontstaat door de positie op het gradient-vlak. */ .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, /* het contentgebied verloopt vanuit het hart naar de randen richting de randkleur — maar blijft er duidelijk lichter dan (bone 25% = #f1ece4). De drie warme radialen en de gelige --paper-top zijn vervallen: die gaven het vlak een gele waas. */ radial-gradient(ellipse 120% 92% at 50% 46%, var(--paper-mid) 0%, var(--paper-mid) 34%, #f1ece4 88%, #f1ece4 100%), #f1ece4; background-repeat: repeat, no-repeat, no-repeat; /* binnenkaderlijn op de Eo Ena-manier: witte inzet-ring + subtiele keyline, dicht tegen de kaartrand (6px) — geen losse kaderlijn meer op .frame */ box-shadow: inset 0 0 0 4px var(--sb-kaderveld), inset 0 0 0 6px var(--sb-keyline); } .frame { position: relative; height: 100%; overflow: hidden; border-radius: 16px; display: flex; flex-direction: column; } .inner::before { content: ""; position: absolute; inset: 11px; border: 0; border-radius: 15px; pointer-events: none; z-index: 25; } .inner::after { content: ""; position: absolute; inset: 0; z-index: 26; pointer-events: none; opacity: .22; mix-blend-mode: multiply; background-image: none; } /* ── kop: één rustige regel (Eo Ena-anatomie) — titel links, nummer-pil rechts. Materiaal-badge vervallen: foto + kaartkleur dragen die informatie al. ── */ .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); } /* lijn over de volle kaderbreedte */ .head-title { margin: 0; font-family: var(--body); font-weight: 700; font-size: 30px; /* originele maat (alleen Eo Ena werd kleiner) */ line-height: 1.3; letter-spacing: -.005em; color: #251f1b; /* 1.3: staartletters (g/j) vallen binnen de regelbox — geen afsnijding meer */ white-space: nowrap; overflow: hidden; } /* De hamburger krijgt dezelfde prominente maat en lijndikte als Vic en Eo Ena, maar spreekt op de lichte voorkant de donkere Stoutenburger-titelinkt. */ .card .head .card-tools .tools-tab { width: 42px; height: 42px; } .card .head .card-tools .tools-tab svg { width: 23px; height: 23px; } .card .head .card-tools .tools-tab svg path { stroke-width: 2.3; } .card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab, .card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:hover, .card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:focus-visible { color: #251f1b; } /* geen .small-variant: de titelgrootte varieert nergens en nooit — te lang is een redactieprobleem (titel inkorten), geen vormgevingsprobleem */ /* pil: metriek 1-op-1 gelijk aan de Eo Ena-kaart (normale regelhoogte — geen /1) */ .pill { flex: none; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #2c2620; border: 2px solid rgba(var(--base-rgb), .5); border-radius: 7px; padding: 5px 10px 4px; background: transparent; } .badge { position: relative; width: 72px; height: 72px; margin: 0 0 0 4px; border-radius: 999px; display: grid; place-items: center; padding: 0; background: var(--base); /* fallback als custom properties ontbreken */ background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.16), transparent 40%), var(--badge); border: 6px solid #f7f1e6; box-shadow: 0 1px 3px rgba(60,45,20,.16), inset 0 0 0 1px rgba(255,255,255,.14); } .badge .glyph { width: 42px; height: 42px; background-color: #ecdcb0; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .badge .lbl { font: 600 8.5px/1 var(--body); letter-spacing: .16em; color: #ecdcb0; } .title { padding-top: 5px; min-width: 0; text-align: center; } /* Vaste maat, géén clamp(): een kaarttitel varieert nergens en nooit — ook niet met de viewport (Toms regel, 12 aug 2026). Deze kop (glyph-badge + gecentreerde titel) wordt op dit moment door geen enkele template meer gerenderd; de maat staat hier vast zodat hij, mócht hij terugkeren, meteen de regel volgt in plaats van stilletjes mee te schalen. 30px = gelijk aan .head-title. */ .title h1 { margin: 0; font-family: var(--body); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.005em; color: #251f1b; } .title p { margin: 5px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px; line-height: 1; color: #4a423a; } .fire { width: 26px; height: 40px; margin-top: 4px; color: #8d8475; } .num { padding: 5px 0 0 12px; border-left: 1px solid rgba(0,0,0,.18); text-align: right; } .num strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .02em; color: #2c2620; white-space: nowrap; } .num span { display: block; margin-top: 6px; font: 600 8.5px/1.5 var(--body); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; } /* ── het beeld: van binnenkaderlijn tot binnenkaderlijn, rechte bovenkant aansluitend op de kop-lijn. ── */ .art { position: relative; z-index: 2; flex: 0 0 55%; min-height: 0; margin: 0; overflow: hidden; } /* golf-deckle: het beeld lost onderin op in perkament (Eo Ena-familietrek). DE GOLF IS EEN GAT, GEEN KLEUR (12 aug 2026) — het beeld wordt weggesneden en je ziet het echte papier eronder, inclusief de inset-gloed van .inner. De donkere grond staat op de img zodat hij mee wordt weggesneden; het masker mag niet op .art staan, want dan verdwijnt de gouden lijn mee. Het ZEGEL is uitgezonderd: dat is een los absoluut geplaatst img'je van 82px dat zijn eigen masker zou krijgen en onderaan afgesneden zou worden. */ .art-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; display: block; pointer-events: none; z-index: 4; } .art > img:not(.seal), .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; filter: saturate(1.04) contrast(1.04); background: #16120f; } .cartouche { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; z-index: 4; display: block; } .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%); } .art > img.seal { position: absolute; top: 62px; right: 16px; width: 82px; height: 82px; object-fit: contain; z-index: 6; display: block; transform: rotate(4deg); } /* tekstvlak: vult de ruimte tussen beeld en actie-kader; tekst verticaal gecentreerd. Geen eigen onderlijn — de koperen rand van het actie-kader is de afsluiting. */ /* Het tekstvak begint visueel bij de PUNT van het boek, niet bij de harde onderrand van het beeld-element (het perkament in de golfband hoort erbij): -22px = de diepte van de rug-punt onder de beeldrand. Zo centreert de tekst tussen punt en kaartvoet; padding-top geeft ademruimte onder de punt. */ .lede { position: relative; z-index: 3; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: -22px 22px 0; padding: 20px 2px; background: transparent; } /* korte catchy titel boven de lede (vet kapitaal — het Eo Ena-eyebrow-gebaar) */ .lede-title { margin: 0 0 12px; font: 700 12px/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--on); text-align: center; } .lede p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; letter-spacing: 0; color: #3e352a; text-align: center; max-width: 44ch; } /* een maat groter — optisch gelijk aan het Eo Ena-tekstgebied */ /* Maker-rij */ .makerrow { position: relative; z-index: 3; display: flex; align-items: center; gap: 13px; margin: 0 6px; padding: 15px 18px; background: rgba(246,240,230,.9); } .makerrow .k { font: 600 10px/1 var(--body); letter-spacing: .16em; color: var(--muted); } .makerrow .v { font-family: var(--serif); font-size: 18px; font-weight: 600; color: #2b2620; } /* OPEN KAART-knop */ .open { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 16px; height: 50px; margin: 13px 16px; border-radius: 14px; text-decoration: none; color: #f3e9d2; font-family: var(--body); font-weight: 600; letter-spacing: .32em; font-size: 14px; background: linear-gradient(180deg, var(--gr-a) 0%, var(--gr-c) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(168,144,90,.25), 0 3px 7px rgba(0,0,0,.22); } .open:hover { filter: brightness(1.08); } .open .arrow { font-size: 22px; letter-spacing: 0; line-height: 1; transform: translateY(-2px); } /* ── Footer met flip-affordances: ← FLIP · STOUTENBURGER · THE ALMANAC · FLIP → ── */ .colophon { position: relative; z-index: 3; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 12px 14px 22px; } .footerline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center; padding: 0 13px; } .footerline .mark { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .footerline .mark .label { font: 600 9.5px/1 var(--body); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; } /* Flip-affordance links + rechts; "FLIP" in de wordmark-stijl (bold), pijl in de --base-kleur. */ .flip-aff { display: flex; align-items: center; gap: 7px; min-width: 0; } .flip-aff.fa-left { justify-content: flex-start; } .flip-aff.fa-right { justify-content: flex-end; } .flip-word { flex: 0 0 auto; font: 700 9.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .18s ease, transform .18s ease; } .flip-line { flex: 1 1 auto; min-width: 8px; height: 2px; background: rgba(var(--base-rgb), .26); } /* Uitfadende lijn naast de wordmark: sterk bij de wordmark, transparant naar de rand (richting volgt de cel). */ .foot-fade { flex: 1 1 auto; min-width: 8px; height: 2px; } .fa-left .foot-fade { background: linear-gradient(to left, rgba(var(--base-rgb), .26), transparent); } .fa-right .foot-fade { background: linear-gradient(to right, rgba(var(--base-rgb), .26), transparent); } .flip-arrow { flex: 0 0 auto; width: 0; height: 0; transition: transform .18s ease, border-color .18s ease; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .flip-aff.fa-left .flip-arrow { border-right: 7px solid rgba(var(--base-rgb), .50); } .flip-aff.fa-right .flip-arrow { border-left: 7px solid rgba(var(--base-rgb), .50); } /* Flip-affordance licht op: de engine zet data-hint="left|right" op .flip — de pijl waar je over hovert (mits aanwezig), of anders (buiten een actiegebied) de default-richting. */ .flip[data-hint="right"] .fa-right .flip-word { color: var(--base); } .flip[data-hint="right"] .fa-right .flip-arrow { transform: scale(1.4); border-left-color: var(--base); filter: drop-shadow(0 0 3px rgba(var(--base-rgb), .45)); } .flip[data-hint="left"] .fa-left .flip-word, .fa-back:hover .flip-word { color: var(--base); } .flip[data-hint="left"] .fa-left .flip-arrow, .fa-back:hover .flip-arrow { transform: scale(1.4); border-right-color: var(--base); filter: drop-shadow(0 0 3px rgba(var(--base-rgb), .45)); } .fa-back { cursor: pointer; } /* Info-kaart: --base is grijs (≈ --muted), dus de standaard-hover valt weg. Donkerder accent. */ .card.info .fa-back:hover .flip-word { color: #3f3930; } .card.info .fa-back:hover .flip-arrow { border-right-color: #3f3930; filter: drop-shadow(0 0 3px rgba(63,57,48,.4)); } @media (max-width: 460px) { .head { grid-template-columns: 54px 1fr auto; gap: 7px; padding: 14px 20px 8px; } .num { padding-left: 7px; } .num strong { font-size: 13px; } .num span { font-size: 8px; } .badge { width: 54px; height: 54px; border-width: 4px; margin: 4px 0 0 0; } .badge .glyph { width: 30px; height: 30px; } .brandmark { width: 46px; height: 46px; margin: 8px 0 0 4px; } .fire { display: none; } .title h1 { font-size: 18px; white-space: nowrap; } .title p { font-size: 13px; } .art { min-height: 180px; } .art > img.seal { width: 64px; height: 64px; top: 54px; right: 14px; } .lede { padding: 17px; } .lede p { font-size: 15px; } .open { letter-spacing: .26em; font-size: 12px; } /* Footer op mobiel op de oude positie houden (de +6px-omhoog geldt alleen op desktop). Achterkant-footer op mobiel op gelijke hoogte als de voorkant (die gecentreerd hoger zit). */ .colophon { padding-bottom: 4px; } .card.back .ena-foot { padding-bottom: 37px; } .footerline { transform: translateY(4px); gap: 10px; } /* beide footers nog 4px lager op mobiel */ /* Woordmerk smaller (minder letterspatie) zodat de affordance-lijntjes ruimte houden en ◄ INFO / ◄ TERUG duidelijk los van de tekst staan. */ .footerline .mark .label { letter-spacing: .08em; font-size: 9px; } .footerline .flip-aff { gap: 9px; } .footerline .flip-line, .footerline .foot-fade { min-width: 22px; } } /* ════════════════════════ ACHTERKANT (flip-zijde) ════════════════════════ */ /* Achterkant: zelfde materiaal-hue als de voorkant, maar zachtere rand-tint (30% i.p.v. 70%). Inner (papier + effect) erft van .inner. */ /* --frame en de zachtere 3-stops rand (--gr-a/b/c) worden per kaart in de macro geïnjecteerd met achterkant-tinten; de .card-basisregel rendert ze. Geen override meer nodig, geen color-mix. */ .back2 { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; padding: 24px 20px 16px; gap: 13px; } .eyebrow { text-align: center; margin: 0; font: 700 9px/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: #8a7a5f; } /* Brandstempel = zelfde maat/positie als de bruine disc binnen de voorkant-badge (badge 72px met 6px rand → disc 60px, 6px naar binnen) */ .brandmark { width: 60px; height: 60px; margin: 6px 0 0 10px; align-self: start; background-color: var(--muted); -webkit-mask: url(../img/sba-stamp.png) center/contain no-repeat; mask: url(../img/sba-stamp.png) center/contain no-repeat; } /* Achterkant: vier gelijke tegels (Gebouwd · Bouwpakket · Maak zelf · Maker) in een 2×2-raster. */ .mid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 10px 18px; } .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Oneven aantal (bv. 3 tegels): centreer de losse laatste tegel op halve breedte. */ .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } /* ── ROUTES OP HET MATERIAALVLAK ──────────────────────────────────────────── De hele tegel is de handeling; er ligt geen tweede crèmekleurige kaart en geen nagebootste knop meer in de klikzone. Een warme, vrijwel transparante steenlaag houdt de routes bij de lichte rug. Donkerbruine drukinkt draagt informatie, pictogram, actie én interactie; alleen toonsterkte en beweging veranderen bij hover/focus. Contrast op de effectieve tegelgrond: titel/actie 5.44, meta 4.51. */ .tile { background: rgba(249,245,239,.07); border: 1px solid rgba(46,38,28,.26); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; cursor: pointer; padding: 18px 12px 16px; gap: 9px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .tile:hover { background: rgba(249,245,239,.14); border-color: rgba(46,38,28,.62); transform: translateY(-1px); } .tile:focus-visible { outline: 3px solid rgba(46,38,28,.72); outline-offset: 3px; } /* Voorpublicatie: de vorm blijft herkenbaar, maar gedempt grijs vertelt vóór de aanraking al dat deze aanbodroute nog niet beschikbaar is. */ .tile[aria-disabled="true"] { cursor: default; opacity: .42; filter: grayscale(1); } .tile[aria-disabled="true"]:hover { background: rgba(249,245,239,.07); border-color: rgba(46,38,28,.26); transform: none; } .tile[aria-disabled="true"]:hover .tile-btn .arr { transform: none; } .tile-badge { width: 68px; height: 68px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; overflow: hidden; border: 1.5px solid rgba(46,38,28,.52); box-shadow: none; } .tile-badge .ico { width: 62%; height: 62%; background-color: var(--sb-inkt); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } .tile-badge.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .tile-name { font-family: var(--body); font-weight: 700; font-size: 16px; letter-spacing: .01em; color: var(--sb-inkt); line-height: 1; margin-top: 2px; } /* de hiërarchie is titel → prijs → knop: de prijs is informatie, de knop de actie */ .tile-meta { font-family: var(--body); font-weight: 600; font-size: 12.5px; color: #3d3327; letter-spacing: .02em; line-height: 1.1; } .tile-btn { margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; padding: 3px 0; font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--sb-inkt); background: transparent; border: 0; box-shadow: none; } .tile-btn .arr { transition: transform .18s ease; } .tile:hover .tile-btn .arr { transform: translateX(3px); } /* Achterkant-/checkout-footer = zelfde wordmark als de voorkant ("Stoutenburger · the Almanac"). Geen Eo Ena-portret; scheidingslijnen + pijl erven de materiaalkleur (--base) net als de voorkant. */ .ena-foot { flex: 0 0 auto; padding: 12px 14px 25px; } /* ════════════════════════ FLIP-DECK (N faces, magische kaart) ════════════════════════ */ /* Eén roterend podium met twee fysieke vlakken (pane-a voor, pane-b achter). De engine (card-flip.js) accumuleert de rotatie (rechtsom = vooruit, linksom = terug) en zet de volgende face op het verborgen vlak vóór elke draai. */ .flip { position: relative; width: 550px; margin-inline: auto; perspective: 2200px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } /* geen grijze iOS-tik-highlight over de klikbare kaart (leek een kaart-slot). JS schaalt op smalle schermen; pan-y = verticaal scrollen, horizontaal = swipe */ /* Beide vlakken zijn volledig klikbaar (→ flip); de CTA-panelen op de achterkant dragen hun eigen pointer en navigeren zelf. */ .flip-stage .card { cursor: pointer; } /* Lieve vlieg op de maker-kaart — fly-watch in de randkleur-tint (maker-fly.webp). Rechts uitgelijnd net als bestelkaart stap 1; geen glow/schaduw. */ .maker-fly { position: absolute; top: -61px; right: 50px; width: 66px; height: auto; z-index: 50; pointer-events: none; } /* eo-maker iets groter; voeten boven MKR-001 */ /* achterkant: Eo Ena van achteren, linksboven — hoger geplaatst zodat ze óp de rand zit (billen op de rand, rug/hoofd erboven), i.p.v. in de kaart te zakken */ .maker-fly-back { right: auto; left: 42px; top: -66px; width: 90px; } .flip-stage { position: relative; width: 100%; height: 770px; transition: transform .85s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; } .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(120,90,50,.6); outline-offset: 8px; border-radius: 30px; } /* ════════════════════════ INFO/MAKER-FACE ════════════════════════ */ /* Rand-gradient komt — net als bij de productkaarten — uit de per-kaart geïnjecteerde --gr-a/b/c (maker: bosgroen). Fallback-tinten voor het geval een info-face ooit zonder injectie rendert. */ .card.info { --base: #7d756a; --base-rgb: 125, 117, 106; } .card.info .title h1 { font-family: var(--serif); font-weight: 700; font-size: 30px; } /* ── Maker-achterkant: een groen medaillon (verzadigd bosgroen uit de rand- familie) met de gouden SB-kompasroos erop — als een zegel. ── */ .card.maker.back .inner { background: var(--gr-c); } /* egaal = het donkerste groen van de kaartrand → naadloos medaillon */ .maker-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. */ .maker-back-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; width: 60%; max-width: 290px; aspect-ratio: 1; /* kleur van de STOUTENBURGER-strooktekst (ivoor) met transparantie → het merkteken versmelt zacht met het groene vlak i.p.v. erop te liggen */ background: rgba(240,232,214,.5); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } /* ── Maker-kaart: portret + naam + feiten (groene accenten, rand in maker-groen) ── */ .card.maker { --mk: #4e6840; } /* maker-accent: bosgroen */ .card.maker .title h1 { font-size: 26px; } .maker-body { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 26px 0; } .maker-portrait { width: 166px; height: 166px; margin: 2px 0 0; border-radius: 999px; overflow: hidden; flex: 0 0 auto; border: 2px solid var(--mk); /* groene randlijn */ background: radial-gradient(circle at 50% 34%, #faf6ee, #ece3d0); box-shadow: 0 2px 9px rgba(50,42,30,.16); } .maker-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(11px); } /* vult de cirkel; mannen iets gezakt → lucht boven de hoofden */ .maker-name { margin: 16px 0 0; font: 700 34px var(--serif); color: var(--mk); line-height: 1; } .maker-role { margin: 8px 0 0; font: italic 400 16px var(--serif); color: #6b6055; } /* Scheiding tussen kop (portret/naam) en de feiten: bee-embleem met links/rechts uitfadende lijnen. */ .maker-div { display: flex; align-items: center; gap: 15px; width: 100%; max-width: 286px; margin: 18px 0 30px; } .md-line { flex: 1 1 auto; height: 3px; border-radius: 2px; } .maker-div .md-line:first-child { background: linear-gradient(to left, rgba(78, 104, 64, .6), transparent); } .maker-div .md-line:last-child { background: linear-gradient(to right, rgba(78, 104, 64, .6), transparent); } .md-bee { flex: 0 0 auto; width: 27px; height: 27px; background-color: var(--mk); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } .maker-facts { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; max-width: 286px; display: flex; flex-direction: column; gap: 22px; } .maker-facts li { display: flex; align-items: flex-start; gap: 16px; text-align: left; } .mf-ic { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--mk); margin-top: 0; } .mf-ic svg { width: 29px; height: 29px; display: block; } .mf-ic .ico { width: 29px; height: 29px; background-color: var(--mk); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } .mf-txt { font-family: var(--serif); font-size: 15.5px; line-height: 1.4; color: #2d2722; padding-top: 4px; } .mf-quote { font-style: italic; color: #4a4136; } /* Overzichts-mascotte (alleen op de eerste gallery-kaart; reist mee met de face). */ .gallery-fly { position: absolute; width: 88px; height: auto; z-index: 6; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(40,28,10,.25)); } .gallery-fly.front-fly { top: -62px; right: 50px; width: 54px; } /* eo-front-a — voorkant, groter; 2px omhoog */ .gallery-fly.back-fly { top: -62px; left: 50px; width: 54px; } /* eo-back-a — achterkant, iets groter; haartop gelijk aan voorkant, zit op de rand */ /* (Het oude @supports-fallbackblok is vervallen: color-mix() is volledig geëlimineerd — alle materiaal-tinten worden in de build vooraf berekend en als kant-en-klare custom properties op de kaart geïnjecteerd. Werkt in élke browser, ook iPadOS-Safari < 16.2, mét behoud van de per-materiaal kleur.) */ /* 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. */ /* HET VELD (20 aug 2026): één kleur voor élke registerkaart, gelijk aan de voet van de rand (--sb-veld). Negen materiaalruggen naast elkaar oogden rommelig; nu vloeit de rug onderaan naadloos over in de kaartrand. Het veld is dáármee licht geworden, dus de inkt op de rug draait om: donker op kalksteen in plaats van ivoor op diep bruin. Alle waarden zijn gemeten op --sb-veld (#9a9589, Y .302), drempel 4,5:1. */ .card.back .inner { background: var(--sb-veld); /* exact twee insets: zone en lijn. Geen gloed erover — die maakte er in de oude versie een verloop van (donker bovenin, licht onderin). */ box-shadow: inset 0 0 0 4px var(--sb-kaderveld-rug), inset 0 0 0 6px var(--sb-keyline-rug); } /* :not(.maker) — de makerkaart draagt óók class="card ... back" en kreeg dit watermerk dus bovenop haar eigen, kleinere merkteken (.maker-back-mark). Twee kompassen over elkaar; het grootste moest weg. (Tom, 20 aug 2026) Maat gelijkgetrokken met dat merkteken: 60% / max 290px in plaats van 78% zonder maximum, en een slag transparanter (.07 → .05). */ .card.back:not(.maker) .frame::before { content:""; position:absolute; top:calc(50% + 18px); left:50%; transform:translate(-50%,-50%); width:60%; max-width:290px; aspect-ratio:1; z-index:0; pointer-events:none; background:rgba(46,38,28,.05); /* watermerk mee omgedraaid: donker op licht */ -webkit-mask:url('../cards/sb-compass.webp') center/contain no-repeat; mask:url('../cards/sb-compass.webp') center/contain no-repeat; } .card.back .head { border-bottom-color:rgba(46,38,28,.26); } .card.back .head-title { color:var(--sb-inkt); } /* 4,99:1 */ .card.back .pill { color:var(--sb-inkt); border-color:rgba(46,38,28,.26); } /* de bedieningsstrook staat in de macro op ivoor voor donkere ruggen (VIC, EOE); op deze lichte rug moet hij donker zijn. Hogere specificiteit, want de macro zet haar stijl inline ná de externe CSS. */ .card.back .card-tools .tools-tab { color: rgba(46,38,28,.62); } .card.back .card-tools .tools-tab:hover { color: var(--sb-inkt); background: rgba(46,38,28,.07); }