/* ════════════════════════════════════════════════════════════════════════
tenant-mokumboot.css - white-label token-override voor de Mokumboot-editie
────────────────────────────────────────────────────────────────────────
Alles hieronder hangt onder `html:root[data-tenant="mokumboot"]`, gezet door
src/shared/tenant.js voor de eerste paint. Zonder dat attribuut is dit
bestand een complete no-op: de Captain-site en de Sloepdelen-editie
veranderen niet.
WAAROM `html:root[data-tenant=...]` EN NIET `:root[data-tenant=...]`
-------------------------------------------------------------------
`:root[data-theme="dark"]` in styles/shared-prototype.css heeft
specificiteit (0,2,0). Een gelijk-specifieke tenant-selector zou van
DOCUMENTVOLGORDE afhangen, en meerdere pagina's (index.html, status.html)
dragen hun tokens INLINE in - daar is de volgorde niet te
garanderen. `html:root[...]` telt het element mee en komt op (0,2,1), dus
deze regels winnen altijd, ongeacht waar het -element staat.
BRON VAN DE KLEUREN: het gemeten merkpaspoort zoals het in de `:root` van
docs/whitelabel-proto-mokumboot.html:39-55 staat. Letterlijk overgenomen,
geen enkele waarde eromheen verzonnen:
#F2EFE7 zand paginavlak (het merk gebruikt GEEN wit)
#DFD7CA zand-donker segment-rail, verdiept vlak
#191919 kop-zwart koppen, uppercase
#444444 tekst lopende tekst
#DA3B26 rood PRIMAIRE actie (doen)
#003333 donker donker knopvlak, structurele donkere familie
#6DCA85 groen accent, met #549C67 (mid) en #285E3E (deep)
#90A1A9 grijs #F1E07A geel
#FBF9F3 kaart rgba(25,25,25,0.10) haarlijn
tinten: #E5F0E8 groen #F8E7E3 rood #F7F2DB geel #E9EDEF grijs
knoppen: pill, border-radius 30px
CONTRAST - GEMETEN, niet geschat (WCAG 2.1 relatieve luminantie, uitgerekend
op 2026-08-05). De metingen die dit bestand sturen:
wit op #DA3B26 = 4,53:1 <- de CTA-tekst
#191919 op #DA3B26 = 3,88:1
wit op #003333 = 13,80:1
#285E3E op #E5F0E8 = 6,51:1 (groene tint)
#8C2417 op #F8E7E3 = 7,37:1 (rode tint)
#6A5B12 op #F7F2DB = 5,99:1 (gele tint)
#3F565F op #E9EDEF = 6,58:1 (grijze tint)
#003333 op #E5F0E8 = 11,81:1 (structurele inkt op de groene tint)
#444444 op #F2EFE7 = 8,48:1 (lopende tekst)
#191919 op #F2EFE7 = 15,30:1 (koppen)
#285E3E op #F2EFE7 = 6,62:1 (sectielabels, actieve tab)
DE HUISREGEL "WIT ALLEEN ONDER 25% LICHTHEID" EN DE CTA
-------------------------------------------------------
#DA3B26 heeft een RELATIEVE LUMINANTIE van 18,2% (onder de 25%-grens) en
een HSL-lichtheid van 50,2% (erboven). De twee lezingen spreken elkaar
tegen, dus beslist de meting: wit haalt 4,53:1 en kop-zwart #191919 haalt
3,88:1. Wit wint, haalt WCAG AA voor normale tekst, en is bovendien wat de
visuele spec voorschrijft (.cta in het prototype, regel 227-231). Vandaar
wit op de rode CTA. Nergens anders staat wit op een licht vlak.
WAT DIT NIET DEKT
-----------------
De app bevat honderden hardcoded merk-hex-literals BUITEN de --bb-*-tokens
(docs/whitelabel-research-2026-06.md sectie 5). Tel ze zelf:
grep -rEoh "#(3366FF|091C35|69FEFF|3367FF)" src pages styles | wc -l
Die plekken blijven Captain-blauw tot de aparte tokenisatiefase. Het
KAARTCANVAS blijft bewust ongemoeid: kaart-hertinting staat op het
won't-do-register.
════════════════════════════════════════════════════════════════════════ */
/* ── Self-hosted merkfonts ────────────────────────────────────────────────
FONT-SUBSTITUTIE, letterlijk uit het kopcommentaar van het prototype: de
echte Mokumboot-fonts (Block Berthold voor de uppercase koppen, Schulbuch
Nord OT voor tekst en UI) zijn commercieel en mogen niet ingebed worden.
Dichtstbijzijnde vrije benaderingen: 'Archivo Black' (zware, brede
uppercase koppen) en 'ABeeZee' (ronde, schoolse leesletter).
Zelfde aanpak als styles/fonts.css en tenant-sloepdelen.css: zelf gehost,
GEEN round-trip naar fonts.googleapis.com. Dat scheelt een render-blokkade,
werkt offline in de PWA en houdt de CSP dicht. Latin-subset; de
unicode-range is dezelfde als die van de Sloepdelen-fonts.
Beide families kennen maar EEN gewicht (400). Waar dit bestand 700 vraagt
op ABeeZee - zoals het prototype dat ook doet - synthetiseert de browser
dat. Bewust: de spec tekent zijn labels en knoptekst vet.
De @font-face-regels staan buiten de tenant-selector; dat kan niet anders,
@font-face is niet nestbaar. Ze kosten niets: een browser downloadt een
font pas als een element de familie daadwerkelijk gebruikt, en dat gebeurt
alleen onder [data-tenant="mokumboot"]. tools/tenant_scope_audit.py kent
deze uitzondering. */
@font-face{
font-family:'Archivo Black';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('/assets/fonts/archivo-black-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'ABeeZee';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('/assets/fonts/abeezee-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── LICHT ────────────────────────────────────────────────────────────── */
html:root[data-tenant="mokumboot"],
html:root[data-tenant="mokumboot"][data-theme="light"]{
/* Merkkleuren. De app kent historisch de rollen navy/blue/cyan/red; het
Mokumboot-paspoort kent geen blauw en geen cyaan, dus die twee sleuven
krijgen de structurele donkere familie en de groenfamilie. */
--bb-navy: #003333; /* structureel donker: koppen op glas, outlines */
--bb-blue: #549C67; /* secundair / navigeren: de groenfamilie */
--bb-cyan: #6DCA85; /* licht accent op donkere vlakken */
--bb-red: #DA3B26; /* merk-rood; in dit merk OOK de primaire actie */
/* ACTIEGRAMMATICA. Rood = doen, exact een primaire CTA per view. Groen is
secundair en navigerend. Nooit omdraaien. */
--bb-action: #DA3B26;
--bb-action-ink: #8C2417; /* donkere zelfde-tint tekst OP een rode tint */
--bb-action-tint: #F8E7E3;
--bb-action-on: #FFFFFF; /* gemeten 4,53:1 - zie kopcommentaar */
/* Merkfamilies die de app niet als rol kent, maar dit bestand wel nodig
heeft. */
--bb-sand: #F2EFE7;
--bb-sand-dark: #DFD7CA;
--bb-black: #191919;
--bb-deep: #003333;
--bb-green: #6DCA85;
--bb-green-mid: #549C67;
--bb-green-deep: #285E3E;
--bb-grey: #90A1A9;
--bb-yellow: #F1E07A;
/* Vlakken en inkt. Het merk gebruikt GEEN wit als paginavlak: zand. */
--bb-bg-page: #F2EFE7;
--bb-bg-card: #FBF9F3;
--bb-bg-tinted: #E5F0E8;
--bb-bg-elevated:#FBF9F3;
--bb-bg-shadow: rgba(25, 25, 25, 0.08);
--bb-card-bg: #FBF9F3;
--bb-elev-bg: #DFD7CA;
--bb-offwhite: #F2EFE7;
/* Lopende tekst is #444444 (paspoort), koppen #191919 - die staan in de
h1-h4-regel verderop, niet hier. */
--bb-fg-default: #444444;
--bb-fg-muted: rgba(25, 25, 25, 0.62);
--bb-fg-subtle: rgba(25, 25, 25, 0.44);
--bb-fg-faint: rgba(25, 25, 25, 0.34);
--bb-text: #444444;
--bb-muted: rgba(25, 25, 25, 0.62);
--bb-border: rgba(25, 25, 25, 0.10); /* de haarlijn uit het paspoort */
--bb-border-subtle: #DFD7CA;
--bb-shadow: 0 4px 16px rgba(25, 25, 25, 0.06);
/* Tinten - zacht, nooit verzadigd als blokachtergrond (huisregel). Het
paspoort kent vier tinten; blauw en paars bestaan niet in dit merk en
lenen daarom de grijze tint. */
--bb-accent-green-tint: #E5F0E8;
--bb-accent-red-tint: #F8E7E3;
--bb-accent-amber-tint: #F7F2DB;
--bb-accent-blue-tint: #E9EDEF;
--bb-accent-purple-tint:#E9EDEF;
--bb-light-blue: #E9EDEF;
--bb-red-tint: #F8E7E3;
--bb-warning-tint: #F7F2DB;
/* Inkt-op-tint paren, allemaal donkere zelfde-tint tekst. */
--bb-ink-green: #285E3E;
--bb-ink-red: #8C2417;
--bb-ink-amber: #6A5B12;
--bb-ink-blue: #003333;
--bb-ink-purple: #3F565F;
--bb-red-text: #8C2417;
--bb-warning-text: #6A5B12;
/* Accentdots en badges - de enige plek waar verzadigd merk mag staan. */
--bb-acc-green: #549C67;
--bb-acc-red: #DA3B26;
--bb-acc-amber: #6A5B12;
--bb-acc-blue: #003333;
--bb-acc-purple: #3F565F;
--bb-success: #285E3E;
--bb-warning: #6A5B12;
--bb-warning-accent: #6A5B12;
--bb-blue-active:#285E3E;
/* Verbindingsstatus-balk */
--bb-conn-navy: #003333;
--bb-conn-cyan: #6DCA85;
--bb-conn-green: #6DCA85;
/* Focusring - de structurele donkere familie in plaats van Captain-blauw */
--bb-focus-ring: 0 0 0 3px rgba(0, 51, 51, 0.22);
--bb-focus-ring-on-navy: 0 0 0 3px rgba(109, 202, 133, 0.32);
/* Glas (licht = frosted wit met kop-zwarte inkt, prototype :110-117) */
--bb-glass-shadow: 0 8px 30px rgba(25, 25, 25, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.60);
--bb-glass-ink: #191919;
--bb-glass-ink-muted: rgba(25, 25, 25, 0.66);
--bb-glass-ink-faint: rgba(25, 25, 25, 0.46);
--bb-glass-hairline: rgba(25, 25, 25, 0.10);
/* Altijd-donker glas (kaartlegenda's, live-tour-paneel). Prototype .legend
(:247-252): een diep groenzwart met een witte haarlijn, geen cyaan. */
/* Sinds de donkere-modus-keuze (variant A, captain 2026-08-05) hangt dit blok
aan de WARM-NEUTRALE as en niet meer aan het teal. Dit glas is
THEMA-ONAFHANKELIJK - het schildert de bottomsheet op de routedetail, de
kaartlegenda's en het live-tour-paneel - en werd daardoor niet geraakt door
de omzetting van de [data-theme="dark"]-regels. Gevolg was een groene
sheet onder een verder warm-neutrale app; de captain zag dat meteen. */
--bb-glass-dark-bg: rgba(28, 26, 21, 0.84);
--bb-glass-dark-border: rgba(255, 255, 255, 0.16);
--bb-glass-dark-accent: #DFD7CA;
/* Typografie. ABeeZee voor tekst en UI, Archivo Black voor koppen. */
--bb-font: 'ABeeZee', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bb-font-head: 'Archivo Black', 'Arial Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Knoppen zijn pillen (paspoort). Captain gebruikt 0, Sloepdelen 4. */
--bb-btn-radius: 30px;
}
/* ── DONKER - VARIANT A, "ZAND-OMKERING" (captain 2026-08-05) ─────────────
Mokumboot heeft GEEN eigen donkere identiteit: het prototype tekent alleen
licht en zegt letterlijk dat de donkere modus mock is.
DE EERSTE POGING IS AFGEKEURD, EN WAAROM
De eerste versie zette de hele donkere modus op de #003333-familie met
#6DCA85 als chrome-accent. De captain: "het groen is heel lelijk en niet
branding". Nagemeten was dat geen CONTRASTfout - #6DCA85 haalde 8,98:1 -
maar een CHROMA-fout: 47% verzadiging op 61% lichtheid tegen bijna-zwart
vibreert en leest als neon. En de merkrelatie stond op zijn kop: in de
LICHTE modus doet diezelfde rol juist het DIEPE #285E3E (40% sat, 26%
lichtheid), in donker ineens het lichtste groen.
WAT ER NU STAAT
Het merk heeft geen donkere as, maar wel een duidelijke NEUTRALE as: zand
#F2EFE7 naar zwart #191919. Deze modus klapt precies die as om. Daardoor
leest donker als dezelfde app in plaats van als een tweede huisstijl, en
wordt het rood sterker omdat het de enige verzadigde kleur op het scherm is
- exact de actiegrammatica die de lichte modus ook hanteert.
pagina #1A1815 warm bijna-zwart, afgeleid van #191919
kaart #232019 het vlak erboven
accent #DFD7CA zand-donker, 25% verzadiging
actie #DA3B26 ongewijzigd, wit erop (4,53:1)
Groen blijft bestaan als DATA-kleur (routelijnen, statusdots), niet als
chrome. Het kaartcanvas blijft ongemoeid (won't-do-register).
Gemeten contrasten:
#F2EFE7 op #1A1815 = 15,42:1 (lopende tekst)
#DFD7CA op #1A1815 = 12,41:1 (sectielabels, actieve tab)
#DFD7CA op #232019 = 11,38:1 (accent op het kaartvlak)
#B9B2A4 op #1A1815 = 8,41:1 (gedempte tekst)
Het accent ligt bewust dicht bij de gewone tekst: een sectielabel moet het
van HOOFDLETTERS, gewicht en letterspatiering hebben, niet van kleur.
TWEE PLEKKEN DIE HIER NIET IN ZITTEN EN TOCH MEE MOETEN - beide zijn we
eerst vergeten en de captain zag ze allebei terug op zijn scherm:
1. --bb-glass-dark-* hierboven. Thema-ONAFHANKELIJK glas voor de
kaartlegenda's en het live-tour-paneel.
2. het --bbs-*-blok verderop. Dat draagt ook geen thema-selector: het IS
de donkere default van de bottomsheet, met een [data-theme="light"]-
blok eronder dat hem in licht omklapt.
Wie hier een kleur wijzigt, wijzigt die daar dus ook. */
html:root[data-tenant="mokumboot"][data-theme="dark"]{
--bb-bg-page: #1A1815;
--bb-bg-card: #232019;
--bb-bg-tinted: rgba(223, 215, 202, 0.16);
--bb-bg-elevated:#0A4040;
--bb-bg-shadow: rgba(0, 0, 0, 0.32);
--bb-card-bg: #232019;
--bb-elev-bg: #0A4040;
--bb-offwhite: #232019;
--bb-fg-default: #F2EFE7;
--bb-fg-muted: rgba(242, 239, 231, 0.72);
--bb-fg-subtle: rgba(242, 239, 231, 0.50);
--bb-fg-faint: rgba(242, 239, 231, 0.40);
--bb-text: #F2EFE7;
--bb-muted: rgba(242, 239, 231, 0.68);
--bb-border: rgba(242, 239, 231, 0.14);
--bb-border-subtle: rgba(242, 239, 231, 0.10);
--bb-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
--bb-accent-green-tint: rgba(223, 215, 202, 0.18);
--bb-accent-red-tint: rgba(218, 59, 38, 0.20);
--bb-accent-amber-tint: rgba(241, 224, 122, 0.18);
--bb-accent-blue-tint: rgba(144, 161, 169, 0.22);
--bb-accent-purple-tint:rgba(144, 161, 169, 0.22);
--bb-light-blue: rgba(144, 161, 169, 0.22);
--bb-red-tint: rgba(218, 59, 38, 0.20);
--bb-warning-tint: rgba(241, 224, 122, 0.18);
/* Op donker draaien de inkt-op-tint paren om naar de LICHTE zelfde-tint. */
--bb-ink-green: #DFD7CA;
--bb-ink-red: #EB9388;
--bb-ink-amber: #F1E07A;
--bb-ink-blue: #DFD7CA;
--bb-ink-purple: #B5C4CB;
--bb-red-text: #EB9388;
--bb-warning-text: #F1E07A;
--bb-action-ink: #EB9388;
--bb-action-tint:rgba(218, 59, 38, 0.20);
--bb-focus-ring: 0 0 0 3px rgba(223, 215, 202, 0.30);
--bb-glass-bg: rgba(35, 32, 25, 0.78);
--bb-glass-border: rgba(223, 215, 202, 0.28);
--bb-glass-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--bb-glass-ink: rgba(242, 239, 231, 0.94);
--bb-glass-ink-muted: rgba(242, 239, 231, 0.66);
--bb-glass-ink-faint: rgba(242, 239, 231, 0.46);
--bb-glass-hairline: rgba(255, 255, 255, 0.12);
--bb-glass-accent: #DFD7CA;
--bb-glass-dark-ink: rgba(242, 239, 231, 0.94);
--bb-glass-dark-ink-muted: rgba(242, 239, 231, 0.66);
--bb-glass-dark-ink-faint: rgba(242, 239, 231, 0.46);
/* HET LAATSTE GROEN (captain 2026-08-05: "ik zie nog steeds veel groen in
dark mode"). De variant-A-omzetting herschreef alleen de regels binnen
[data-theme="dark"]; de tokens hieronder stonden alleen in het BASISblok
en golden dus onverkort in donker. Hier opnieuw gedeclareerd, met het
onderscheid dat de captain maakte: CHROOM naar de warme as, DATA blijft
groen.
CHROOM - deze rollen kleuren knoppen, iconen, dots en focusringen, geen
informatie. Warme as: #DFD7CA eerste niveau, #C9BFAC tweede niveau
(gemeten 12,41:1 respectievelijk 9,73:1 op #1A1815). */
--bb-cyan: #DFD7CA; /* accent op donkere vlakken (o.a. de Meer-rijicoontjes) */
--bb-blue: #DFD7CA; /* secundair / navigeren */
--bb-blue-active: #C9BFAC; /* ingedrukte staat, een niveau dieper */
--bb-acc-green: #DFD7CA; /* accentdot / badge-rand */
--bb-conn-cyan: #DFD7CA; /* verbindingsdot offline; de staat zit in tekst + puls */
--bb-conn-green: #DFD7CA; /* verbindingsdot online */
/* DATA - merkfamilie voor routelijnen en statusinformatie. Geen enkele
var()-consument buiten dit bestand (geteld met grep, 2026-08-06); de
donkere cover-routelijnen gebruiken al literals. Expliciet gelijk
gehouden zodat een toekomstige consument het merkgroen krijgt. */
--bb-green: #6DCA85;
--bb-green-mid: #549C67;
/* --bb-green-deep voedt in DONKER alleen chroom (nav-dot en focusringen
zonder eigen donker-regel); alle data-groen in donker loopt via
literals. Dus mee naar de warme as. */
--bb-green-deep: #DFD7CA;
/* Semantisch groen blijft groen, maar leesbaar: #285E3E haalt op #1A1815
maar 2,33:1 (gemeten). Zelfde omklap als de inkt-op-tint paren: licht
gebruikt het diepe groen, donker het lichte. 8,80:1 op #1A1815,
8,08:1 op #232019. */
--bb-success: #6DCA85;
/* De focusring op donkere vlakken was het laatste groen op /quiz: het
naamveld tekent box-shadow var(--bb-focus-ring-on-navy) en dat stond
alleen in het basisblok (rgba van #6DCA85). Zelfde alpha, warme as. */
--bb-focus-ring-on-navy: 0 0 0 3px rgba(223, 215, 202, 0.32);
}
/* ── Witte tekst op de warme chroom-as kan niet ──────────────────────────
--bb-blue en --bb-blue-active zijn hierboven zand geworden, maar een
handvol gedeelde regels zet hardcoded color:#fff OP dat token als
knopvlak (src/live/live-tour.css:1169,1227,1640, src/live/live-polish.css
:134-139, pages/feedback.html:229). Wit op #DFD7CA is 1,4:1 - onleesbaar,
en de huisregel zegt: wit alleen op vlakken onder 25% lichtheid. De
gedeelde bestanden blijven af (Captain en Sloepdelen draaien erop), dus
hier de donkere inkt: #191919 op #DFD7CA is 12,32:1, op #C9BFAC 9,65:1. */
html:root[data-tenant="mokumboot"][data-theme="dark"] .lt-sim-btn,
html:root[data-tenant="mokumboot"][data-theme="dark"] .lt-pickup-share,
html:root[data-tenant="mokumboot"][data-theme="dark"] body.lt-proto .lt-startbar-primary,
html:root[data-tenant="mokumboot"][data-theme="dark"] .lt-gps-card-cta,
html:root[data-tenant="mokumboot"][data-theme="dark"] .fb-submit{
color:#191919;
}
/* De ingedrukte staat van twee van die knoppen is een hardcoded Captain-blauw
#2855e0 (live-tour.css:1170,1229); met de donkere inkt hierboven zou dat
onleesbaar flitsen. Zelfde tweede niveau als --bb-blue-active. */
html:root[data-tenant="mokumboot"][data-theme="dark"] .lt-sim-btn:active,
html:root[data-tenant="mokumboot"][data-theme="dark"] .lt-pickup-share:active{
background:#C9BFAC;
}
/* De start-CTA draagt een blauwe gloed als box-shadow-literal
(live-tour.css:1641); onder een zandkleurige knop leest dat als defect. */
html:root[data-tenant="mokumboot"][data-theme="dark"] body.lt-proto .lt-startbar-primary{
box-shadow:0 4px 14px rgba(0, 0, 0, 0.35);
}
/* ── De LEGACY-aliassen, want die dragen de body ──────────────────────────
GEMETEN, niet aangenomen: op /?tenant=mokumboot mat `body` in LICHTE modus
`background-color: rgb(255,255,255)`, `color: rgb(0,0,0)` en
`font-family: "Libre Franklin"` - terwijl --bb-bg-page al netjes #F2EFE7
was. Oorzaak: src/tour/tour.css:43 zet
body{ font-family:var(--font); color:var(--text); background:var(--white) }
uit de LEGACY-aliasset in `:root` (tour.css:15-37), niet uit de --bb-*
tokens. Alleen DONKER klopte, omdat pages/index.html:129 daar apart
`:root[data-theme="dark"] body{background:var(--bb-bg-page)}` overheen zet.
Zonder deze drie regels is de hele fontsubstitutie onzichtbaar: elke
pagina blijft in Libre Franklin op een wit vlak staan. Ze horen thuis in
dit bestand en niet in tour.css, want ze gelden alleen voor deze tenant.
`:root` is (0,1,0), `html:root[data-tenant="mokumboot"]` is (0,2,1), dus
deze winnen ongeacht de laadvolgorde.
VEILIG, geteld voor deze wijziging - het zijn drie smalle aliassen:
grep -rn "var(--white)\|var(--text)" src pages styles
levert vier plekken: body (tour.css:43), de sticky chipstrip
(tour.css:1059, een vlak dat juist MOET meekleuren met de pagina) en twee
tekstkleuren (tour.css:259, :264). --font is de UI-familie en is precies
wat hier moet wisselen. */
html:root[data-tenant="mokumboot"]{
--font: var(--bb-font);
--text: #444444;
--white: #F2EFE7;
}
html:root[data-tenant="mokumboot"][data-theme="dark"]{
--text: #F2EFE7;
--white: #1A1815;
}
/* En de pagina's die hun body-font NIET uit een token halen maar uit een
hardcoded literal: pages/meer.html:67 zet
`font-family:'Libre Franklin', system-ui, sans-serif` rechtstreeks op body,
pages/quiz.html doet iets vergelijkbaars. GEMETEN: /meer gaf ondanks het
correcte --bb-font nog steeds Libre Franklin. Die bestanden zijn niet van
dit bestand om te wijzigen, maar `html:root[data-tenant="mokumboot"] body`
is (0,2,2) tegen hun (0,0,1) en haalt het dus alsnog.
BEWUST alleen font-family: geen background en geen color. Sommige pagina's
(quiz) zetten hun body-canvas met opzet, en die mag deze regel niet
omverduwen. */
html:root[data-tenant="mokumboot"] body{
font-family:var(--bb-font);
}
/* Het Captain-navy vangnet achter de statusbalk op de vaarinfokaart.
GEMETEN: /vaarinfo gaf body `background-color: rgb(9,28,53)` in BEIDE
thema's - dat is #091C35, letterlijk hardcoded in pages/vaarinfo.html:69-71
als "navy safety net ... visible behind the status bar". Het is NIET het
kaartcanvas (dat blijft met rust, won't-do-register) maar de strook die de
passagier boven en onder de kaart ziet, en dus Captain-merk in een
Mokumboot-app.
Een rolwissel, geen ontwerpwijziging: dezelfde structurele donkere kleur uit
het eigen paspoort (#003333) in dezelfde twee thema's.
TWEE ZUSTERSCHERMEN, EEN REGEL. pages/vaarverkeer.html:75-77 draagt exact
dezelfde twee regels met exact hetzelfde #091C35. Ze staan hier samen omdat
het een kaartchroom is: /vaarinfo alleen omzetten liet /vaarverkeer als enige
scherm in Captain-navy achter (gemeten: body `rgb(9,28,53)` naast
`rgb(0,51,51)` op de zusterpagina). `.vi-stage` en `.vv-stage` bestaan elk
op precies een pagina en zijn daarmee de enige haken zonder een ander bestand
aan te raken; de nette oplossing is die vier regels daar te tokeniseren
(staat in het rapport).
Geen tekst op dit vlak - het is de strook achter de statusbalk en onder de
home-indicator. #003333 haalt HSL-lichtheid 10,0% en relatieve luminantie
2,6%, dus als er ooit wel tekst op landt mag die wit zijn (13,80:1). */
html:root[data-tenant="mokumboot"]:has(.vi-stage),
html:root[data-tenant="mokumboot"] body:has(.vi-stage),
html:root[data-tenant="mokumboot"]:has(.vv-stage),
html:root[data-tenant="mokumboot"] body:has(.vv-stage){
background:#003333;
}
/* ── Info & weetjes (/fun-facts) ──────────────────────────────────────────
src/fun-facts/fun-facts.css:44-48 zet `html, body{ background:
var(--iw-bg-soft) }` en :18 zet dat token op #F4F5F8 - een neutraal
lichtgrijs dat niets met dit merk te maken heeft. GEMETEN: /fun-facts gaf
in lichte modus `rgb(244,245,248)` terwijl elk ander scherm op het zand
#F2EFE7 stond, dus een grijze pagina tussen zand-pagina's. De live
Sloepdelen-editie heeft precies hetzelfde gat.
Die pagina draait op een EIGEN tokenset (--iw-*) in plaats van op --bb-*,
dus de tokenlaag hierboven bereikt hem niet. Ze staan wel netjes op `:root`
(0,1,0) respectievelijk `[data-theme="dark"]` in pages/fun-facts.html:250
(0,1,0), dus dit blok (0,2,1) en (0,3,1) wint van allebei en er hoeft geen
enkele losse regel nagelopen te worden.
GEMETEN contrast op de nieuwe vlakken:
#191919 op #F2EFE7 (zand) = 15,30:1
#191919 op #FBF9F3 (kaart) = 16,70:1
#285E3E op #FBF9F3 = 7,22:1
muted rgba(25,25,25,0.62) op zand = 4,71:1
#F2EFE7 op #001A1A = 15,72:1
#F2EFE7 op #003333 = 12,01:1
#6DCA85 op #003333 = 6,86:1
muted rgba(242,239,231,0.62) op #001A1A = 6,58:1 */
html:root[data-tenant="mokumboot"]{
/* --iw-navy is de actieve filterchip (fun-facts.css:174-176, wit op een
verzadigd donker vlak) en de vetgedrukte woorden in een detailtekst
(:625). GEMETEN op /fun-facts: de chip "Alle 310" gaf
`rgb(9,28,53)` - #091C35, hardcoded op :9. Naar de structurele donkere
merkkleur; wit erop haalt 13,80:1 en #232019 zit met HSL-lichtheid 10,0%
ruim onder de 25%-grens, dus wit mag daar. */
--iw-navy: #232019;
--iw-bg-soft: #F2EFE7;
--iw-bg: #FBF9F3;
--iw-ink: #191919;
--iw-muted: rgba(25, 25, 25, 0.62);
--iw-border: rgba(25, 25, 25, 0.10);
--iw-accent: #C9BFAC;
--iw-accent-tint: #E5F0E8;
--iw-shadow: 0 1px 3px rgba(25, 25, 25, 0.06);
--iw-shadow-lg: 0 8px 32px rgba(25, 25, 25, 0.16);
}
html:root[data-tenant="mokumboot"][data-theme="dark"]{
/* Op donker is #232019 al de INACTIEVE chip (--iw-bg), dus de actieve mag
die kleur niet ook dragen. fun-facts.css:175 zet de chiptekst hardcoded
op #fff, dus de vulling moet donker blijven: #DFD7CA zou wit op 2,01:1
zetten en #C9BFAC op 3,32:1 - allebei onleesbaar. #C9BFAC haalt 7,61:1
en onderscheidt zich van zowel de pagina (#1A1815) als de inactieve
chip. */
--iw-navy: #C9BFAC;
--iw-bg-soft: #1A1815;
--iw-bg: #232019;
--iw-ink: #F2EFE7;
--iw-muted: rgba(242, 239, 231, 0.62);
--iw-border: rgba(242, 239, 231, 0.14);
--iw-accent: #DFD7CA;
--iw-accent-tint: rgba(223, 215, 202, 0.18);
--iw-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
--iw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
}
/* ── Typografie toepassen ────────────────────────────────────────────────
Het paspoort schrijft UPPERCASE koppen in kop-zwart voor; het prototype
doet dat met .h-upper (:168) en zet h1-h3 op var(--black). Archivo Black
kent alleen gewicht 400 - dat IS het zware gewicht van deze familie, dus
geen 700 vragen (dat zou een synthetische vetting bovenop een al zwarte
letter zetten). */
html:root[data-tenant="mokumboot"] h1,
html:root[data-tenant="mokumboot"] h2,
html:root[data-tenant="mokumboot"] h3,
html:root[data-tenant="mokumboot"] h4{
font-family:var(--bb-font-head);
font-weight:400;
text-transform:uppercase;
letter-spacing:normal;
line-height:1.12;
color:var(--bb-black, #191919);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] h1,
html:root[data-tenant="mokumboot"][data-theme="dark"] h2,
html:root[data-tenant="mokumboot"][data-theme="dark"] h3,
html:root[data-tenant="mokumboot"][data-theme="dark"] h4{
color:var(--bb-fg-default);
}
/* Koppen OP de systeemchroom (topbalk, tabbalk) erven hun kleur bewust van de
ouder; de regel hierboven mag daar niet overheen. */
html:root[data-tenant="mokumboot"] .bb-header h1,
html:root[data-tenant="mokumboot"] .bb-header h2,
html:root[data-tenant="mokumboot"] .bb-header h3,
html:root[data-tenant="mokumboot"] .bb-mobile-nav h3{
color:inherit;
}
html:root[data-tenant="mokumboot"] h5,
html:root[data-tenant="mokumboot"] h6{
font-family:var(--bb-font-head);
font-weight:400;
text-transform:uppercase;
}
/* ════════════════════════════════════════════════════════════════════════
1. ACTIEGRAMMATICA
────────────────────────────────────────────────────────────────────────
Rood #DA3B26 = doen. Exact EEN primaire CTA per view; alles wat navigeert
of nuanceert zit in de groenfamilie. Identiek gedrag in licht en donker -
de knop is in beide thema's dezelfde rode pil, want het merk kent geen
donkere variant van zijn actiekleur.
Maten letterlijk uit de prototype-CTA (:227-231): pill radius 30,
padding 15/22, 15 px, gewicht 700, tracking 0,02em, een rode gloedschaduw
plus een witte inset-lijn bovenop.
════════════════════════════════════════════════════════════════════════ */
html:root[data-tenant="mokumboot"] .bb-cta{
background:var(--bb-action);
color:var(--bb-action-on);
border-radius:var(--bb-btn-radius);
font-family:var(--bb-font);
font-weight:700;
font-size:15px;
line-height:1.15;
letter-spacing:0.02em;
text-transform:none;
padding:15px 22px;
box-shadow:
0 10px 26px rgba(218, 59, 38, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition:box-shadow 160ms var(--bb-ease), transform 160ms var(--bb-spring);
}
html:root[data-tenant="mokumboot"] .bb-cta:hover{
box-shadow:
0 12px 30px rgba(218, 59, 38, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:root[data-tenant="mokumboot"] .bb-cta:active{
transform:scale(0.96);
box-shadow:
0 6px 16px rgba(218, 59, 38, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* De route-detail-CTA leeft in de bb-sheet, en die schaalt hem met
!important terug naar radius 14 / 700 14px Libre Franklin
(src/tour/tour.css:1428-1434). Alleen daarom staat hier !important: zonder
die twee regels wint de sheet en blijft de knop Captain-vormig. De rest
heeft genoeg aan specificiteit (0,4,1 tegen 0,2,0). */
html:root[data-tenant="mokumboot"] .bbs .rd-cta{
border-radius:var(--bb-btn-radius) !important;
font:700 15px/1.15 var(--bb-font) !important;
letter-spacing:0.02em;
text-transform:none;
padding:15px 22px;
background:var(--bb-action);
color:var(--bb-action-on);
box-shadow:
0 10px 26px rgba(218, 59, 38, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:root[data-tenant="mokumboot"] .bbs .rd-cta:active{
transform:scale(0.96);
box-shadow:
0 6px 16px rgba(218, 59, 38, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Secundair: 1 px outline in de groenfamilie op een transparant vlak, zelfde
pilvorm. Geen tweede rood op het scherm - dat is de hele regel. */
html:root[data-tenant="mokumboot"] .bb-cta-secondary{
background:transparent;
color:var(--bb-green-deep, #285E3E);
border:1px solid var(--bb-green-deep, #285E3E);
border-radius:var(--bb-btn-radius);
font-family:var(--bb-font);
font-weight:700;
font-size:13.5px;
letter-spacing:0.02em;
text-transform:none;
padding:10px 20px;
box-shadow:none;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-cta-secondary{
color:var(--bb-ink-green);
border-color:var(--bb-ink-green);
}
html:root[data-tenant="mokumboot"] .bb-cta-secondary:hover{
background:var(--bb-accent-green-tint);
box-shadow:none;
}
/* ════════════════════════════════════════════════════════════════════════
2. CHROME - topbalk en tabbalk
────────────────────────────────────────────────────────────────────────
Captain draait beide balken als donker rooknavy met cyaan gloedringen. Het
Mokumboot-paspoort kent geen cyaan, geen Captain-blauw #3366FF en geen
Captain-navy #091C35. Het prototype tekent wit glas op het zandvlak met
kop-zwarte inkt en haarlijnen (topbalk :110-117, tabbalk :137-155).
Donker is geen omkering maar een eigen opgave: dezelfde geometrie in
#003333-glas met een groene haarlijn.
Let op: de iOS 26 Liquid Glass TABBALK van de native app krijgt bewust GEEN
merktint (src/shared/native-tabbar.js). Dit hier is de WEB-tabbalk.
════════════════════════════════════════════════════════════════════════ */
/* ── Topbalk ──────────────────────────────────────────────────────────────
Hoogte expliciet 60 px MET border-box: zonder dat meet de balk 62, omdat
.bb-header-inner 60 hoog is en Chrome de 0,5 px rand aan beide kanten naar
boven afrondt. Het prototype meet 60 in totaal. */
html:root[data-tenant="mokumboot"] .bb-header{
box-sizing:border-box;
height:60px;
border-radius:22px;
}
html:root[data-tenant="mokumboot"] .bb-header-inner{
height:100%;
gap:12px;
padding:0 12px;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-header{
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 58%),
rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(255, 255, 255, 0.65);
box-shadow:
0 8px 30px rgba(25, 25, 25, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
color:#191919;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-header{
background:rgba(35, 32, 25, 0.78);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(223, 215, 202, 0.28);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color:#F2EFE7;
}
/* Zonder backdrop-filter is half doorschijnend onleesbaar; dan een vrijwel
dekkende plaat in dezelfde kleurfamilie in plaats van Captains navy. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-header{
background:rgba(251, 249, 243, 0.96);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-header{
background:rgba(35, 32, 25, 0.96);
}
}
/* Paginatitel: uppercase Archivo Black met de tracking uit .tb-title (:120). */
html:root[data-tenant="mokumboot"] .bb-header-title{
font-family:var(--bb-font-head);
font-weight:400;
font-size:14px;
letter-spacing:0.04em;
text-transform:uppercase;
color:inherit;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-header-divider{
background:rgba(25, 25, 25, 0.18);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-header-divider{
background:rgba(223, 215, 202, 0.28);
}
/* ── Terugknop ────────────────────────────────────────────────────────────
Prototype .back-chip (:123-127): 34 px cirkel, wit glas 0,55, witte
haarlijn, kop-zwarte chevron. De cyaan familie verdwijnt volledig. */
html:root[data-tenant="mokumboot"] .bb-back,
html:root[data-tenant="mokumboot"] .bb-rd-back{
background:rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter:blur(12px) saturate(160%);
backdrop-filter:blur(12px) saturate(160%);
border:0.5px solid rgba(255, 255, 255, 0.70);
box-shadow:0 2px 8px rgba(25, 25, 25, 0.12);
color:#191919;
}
html:root[data-tenant="mokumboot"] .bb-back svg,
html:root[data-tenant="mokumboot"] .bb-rd-back svg{
stroke:currentColor;
}
html:root[data-tenant="mokumboot"] .bb-back:hover,
html:root[data-tenant="mokumboot"] .bb-rd-back:hover{
border-color:rgba(255, 255, 255, 0.90);
box-shadow:0 4px 12px rgba(25, 25, 25, 0.18);
}
html:root[data-tenant="mokumboot"] .bb-back:focus-visible,
html:root[data-tenant="mokumboot"] .bb-rd-back:focus-visible{
outline:2px solid var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-back,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-rd-back{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(223, 215, 202, 0.45);
box-shadow:none;
color:#F2EFE7;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-back:hover,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-rd-back:hover{
border-color:rgba(223, 215, 202, 0.75);
box-shadow:none;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-back:focus-visible,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-rd-back:focus-visible{
outline-color:var(--bb-cyan);
}
/* De KAART-variant van diezelfde chip (.bb-mapback in de live tour) staat NIET
op de header maar los op willekeurige kaartbeelden. Wit glas op 55% met een
witte haarlijn is daar vrijwel onzichtbaar (bevinding op de Sloepdelen-
editie, captain 2026-08-02). Daarom pakt deze chip exact dezelfde
--bb-mapfab-tokens als de andere kaartknoppen (tandwiel, locate, taal), zodat
hij even zwaar leest als de knoppenstack rechts en er een enkele bron voor
het kaart-oppervlak blijft.
GEEN donkere-modus-variant, en dat is opzet: de --bb-mapfab-tokens zijn in
BEIDE thema's licht (wit 92% met donkere inhoud), want deze knoppen staan op
de kaart en die is altijd licht. Een dark-regel die de chevron licht maakt
levert wit op wit op. Dezelfde klasse, twee ondergronden - de header-chip
houdt zijn glasrecept, deze regel is op .bb-mapback gescoped. */
html:root[data-tenant="mokumboot"] .bb-mapback.bb-mapback{
background:var(--bb-mapfab-bg);
border:1px solid var(--bb-mapfab-border);
box-shadow:var(--bb-mapfab-shadow);
color:#191919;
}
/* De OPEN-staat van de kaartknoppen was letterlijk Captain-blauw:
styles/shared-overlays.css zet `--bb-mapfab-bg-active:#E5EBFF`, een tint van
#3366FF, als achtergrond van elke knop met aria-expanded="true" (tandwiel,
taal) plus - via de spiegel op body.lt-proto in pages/live.html - van de
navigatie- en taalknop in de live tour. Hier de groene merktint met de
kop-zwarte inhoud erop. Geen verzadigde vulling, conform de kleurregel.
BEIDE tokens, met opzet. --lt-fab-bg-active is op body.lt-proto afgeleid van
--bb-mapfab-bg-active, dus de eerste dekt de live tour al; de tweede staat er
voor elke plek die het lt-token gebruikt zonder die body-klasse. Net als
hierboven GEEN donkere variant.
De haarlijn en de schaduw van diezelfde knoppen stonden op rgba(9,28,53,*),
oftewel Captain-navy - de brand-scan vond `button.bb-mapfab |
borderTopColor | Captain-navy` acht keer. Hier de kop-zwarte haarlijn uit
het paspoort, in exact dezelfde dekkingen. Ook deze zonder donkere variant:
de kaart is in beide thema's licht. */
html:root[data-tenant="mokumboot"]{
--bb-mapfab-bg-active: #E5F0E8;
--lt-fab-bg-active: #E5F0E8;
--bb-mapfab-border: rgba(25, 25, 25, 0.10);
--bb-mapfab-shadow: 0 4px 12px rgba(25, 25, 25, 0.22);
}
/* ── Taalpil ──────────────────────────────────────────────────────────────
De schuivende duim droeg een cyaan gloed (shared-prototype.css:595-608).
Op wit glas wordt dat een witte lens met een zachte schaduw - dezelfde
gloedloze glasfamilie als de actieve tab. */
html:root[data-tenant="mokumboot"] .bb-lang-pill{
background:rgba(255, 255, 255, 0.55);
border:0.5px solid rgba(255, 255, 255, 0.70);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html:root[data-tenant="mokumboot"] .bb-lang-pill::before{
background:rgba(255, 255, 255, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 1px 6px rgba(25, 25, 25, 0.10);
}
html:root[data-tenant="mokumboot"] .bb-lang-btn{
color:rgba(25, 25, 25, 0.55);
/* pages/quiz.html:322 zet een NAAKTE `button{...}`-regel met
`box-shadow: ... 0 6px 16px rgba(51,102,255,0.32)` - Captain-blauw. Die
raakt elke knop op die pagina, dus ook de twee vlaggetjes in de taalpil,
en tekende daar een blauwe gloed om de pil. GEMETEN op /quiz: de enige
box-shadow-regel die `.bb-lang-btn.active` raakt is letterlijk de selector
`button` uit een inline stylesheet. De taalknop hoort helemaal geen
CTA-schaduw te dragen; de pil eromheen levert het reliëf al.
De onderliggende scoping-fout op die pagina staat in het rapport. */
box-shadow:none;
}
html:root[data-tenant="mokumboot"] .bb-lang-btn.active,
html:root[data-tenant="mokumboot"] .bb-lang-btn:hover{
color:#191919;
}
html:root[data-tenant="mokumboot"] .bb-lang-btn:focus-visible{
outline:2px solid var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-lang-pill{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(223, 215, 202, 0.28);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-lang-pill::before{
background:rgba(255, 255, 255, 0.14);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-lang-btn{
color:rgba(242, 239, 231, 0.55);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-lang-btn.active,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-lang-btn:hover{
color:#F2EFE7;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-lang-btn:focus-visible{
outline-color:var(--bb-cyan);
}
/* ── Tabbalk ──────────────────────────────────────────────────────────── */
html:root[data-tenant="mokumboot"] .bb-mobile-nav{
border-radius:26px;
padding:6px 8px;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-nav{
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 42%),
rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(255, 255, 255, 0.65);
box-shadow:
0 8px 30px rgba(25, 25, 25, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-nav{
background:rgba(35, 32, 25, 0.78);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(223, 215, 202, 0.28);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Boven de ALTIJD-lichte vaarinfokaart wast de doorschijnende balk weg; daar
dekkender, in dezelfde kleurfamilie. */
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
background:rgba(255, 255, 255, 0.86) !important;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
background:rgba(35, 32, 25, 0.92) !important;
}
html:root[data-tenant="mokumboot"] .bb-mobile-tab{
border-radius:16px;
padding:7px 4px;
gap:3px;
font-size:10px;
font-weight:600;
letter-spacing:-0.012em;
line-height:1.1;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-tab{
color:rgba(25, 25, 25, 0.55);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab{
color:rgba(242, 239, 231, 0.50);
}
/* De actieve tab staat in het diepe groen (.tab.active, prototype :150). */
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-tab[aria-current="page"],
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-tab.is-active-group{
color:var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab[aria-current="page"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab.is-active-group{
color:#DFD7CA;
}
/* Het actieve icoon kreeg van Captain een cyaan gloedfilter; hier erft het
gewoon de inkt van de tab. */
html:root[data-tenant="mokumboot"] .bb-mobile-tab[aria-current="page"] svg,
html:root[data-tenant="mokumboot"] .bb-mobile-tab.is-active-group svg{
color:inherit;
filter:none;
}
/* De actieve LENS: wit glas met een groene haarlijn - geen cyaan gloed.
Prototype :152-155. */
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-tab::before{
background:rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter:blur(6px) saturate(150%);
backdrop-filter:blur(6px) saturate(150%);
border:0.5px solid rgba(40, 94, 62, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 1px 6px rgba(25, 25, 25, 0.10);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab::before{
background:rgba(255, 255, 255, 0.10);
-webkit-backdrop-filter:blur(6px) saturate(150%);
backdrop-filter:blur(6px) saturate(150%);
border:0.5px solid rgba(223, 215, 202, 0.30);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Intrede van de lens: 380 ms, schaal 0,7 naar 1 (prototype @keyframes lensIn,
:156). Prefix bbMb zodat de naam nooit met de basis botst. */
@keyframes bbMbLensIn{
from{ transform:scale(0.7); opacity:0; }
to { transform:scale(1); opacity:1; }
}
html:root[data-tenant="mokumboot"] .bb-mobile-tab[aria-current="page"]::before,
html:root[data-tenant="mokumboot"] .bb-mobile-tab.is-active-group::before{
animation:bbMbLensIn 380ms cubic-bezier(.2, .7, .3, 1.4) both;
}
@media (hover:hover){
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-mobile-tab:hover{
color:var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab:hover{
color:#DFD7CA;
}
html:root[data-tenant="mokumboot"] .bb-mobile-tab:hover svg{
color:inherit;
filter:none;
transform:scale(1.08);
}
html:root[data-tenant="mokumboot"] .bb-mobile-tab[aria-current="page"]:hover::before,
html:root[data-tenant="mokumboot"] .bb-mobile-tab.is-active-group:hover::before{
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 1px 6px rgba(25, 25, 25, 0.10);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab[aria-current="page"]:hover::before,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab.is-active-group:hover::before{
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
}
html:root[data-tenant="mokumboot"] .bb-mobile-tab.is-drag-hover svg{
color:inherit;
filter:none;
}
html:root[data-tenant="mokumboot"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root[data-tenant="mokumboot"] .bb-mobile-tab.is-active-group.is-drag-hover::before{
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 1px 6px rgba(25, 25, 25, 0.10);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab.is-active-group.is-drag-hover::before{
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Focusring: het merk kent geen cyaan. */
html:root[data-tenant="mokumboot"] .bb-mobile-tab:focus-visible,
html:root[data-tenant="mokumboot"] .bb-header-brand:focus-visible,
html:root[data-tenant="mokumboot"] .bb-cta:focus-visible{
outline:2px solid var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-mobile-tab:focus-visible,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-header-brand:focus-visible,
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-cta:focus-visible{
outline-color:var(--bb-cyan);
}
/* Desktopnav: dezelfde gloedloze glasfamilie als de tabbalk. */
html:root[data-tenant="mokumboot"] .bb-nav-link{
color:inherit;
opacity:0.72;
}
html:root[data-tenant="mokumboot"] .bb-nav-link[aria-current="page"]{
opacity:1;
background:rgba(255, 255, 255, 0.55);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-nav-link[aria-current="page"]{
background:rgba(255, 255, 255, 0.10);
}
html:root[data-tenant="mokumboot"] .bb-nav-link[aria-current="page"]::after{
background:var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"] .bb-nav-link:hover{
opacity:1;
background:rgba(255, 255, 255, 0.45);
border-color:rgba(25, 25, 25, 0.10);
box-shadow:0 1px 6px rgba(25, 25, 25, 0.10);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-nav-link:hover{
background:rgba(255, 255, 255, 0.10);
border-color:rgba(223, 215, 202, 0.28);
box-shadow:none;
}
html:root[data-tenant="mokumboot"] .bb-nav-link:focus-visible{
outline:2px solid var(--bb-green-deep, #285E3E);
}
/* ════════════════════════════════════════════════════════════════════════
3. WOORDMERK PLUS SPLASH-PAAR
────────────────────────────────────────────────────────────────────────
Het zichtbare merk in de header is GEEN maar de background-image van
.bb-header-brand::before (styles/shared-prototype.css:469-475); het
.bb-wordmark-SVG ernaast staat sinds 2026-06-15 op display:none. Vandaar
dat de wissel hier gebeurt en niet in JS. De toegankelijke naam
(aria-label) zet src/shared/tenant.js om.
BREEDTE - GEMETEN. Een pseudo-element leidt geen intrinsieke verhouding af
uit een background-image, dus de breedte moet er hard staan. De viewBox van
/assets/whitelabel/mokumboot-logo.svg is `0 0 1763 199`, oftewel 8,8593:1 -
ruim dubbel zo langgerekt als het Sloepdelen-woordmerk (4,62:1). Op de
24 px hoogte die Sloepdelen aanhoudt zou dit 212,6 px breed worden en op
een 393 px toestel samen met de taalpil buiten de balk lopen.
Vandaar 17 px hoog: 17 * 8,8593 = 150,6, afgerond 151. Het is een
volledig uppercase woordmerk, dus 17 px is ook 17 px kaphoogte - optisch
zwaarder dan een 24 px logo met onderlengtes.
HET PAST NIET OP EEN TELEFOON, EN DAT IS GEMETEN
------------------------------------------------
Met 151 px liep de topbalk over: `scrollWidth - clientWidth` op
.bb-header-inner gaf 15 px op de routepagina bij 393 px en 61 px op de
route-detail, waar de taalpil zichtbaar buiten de afgeronde rechterrand
viel. De rekensom (inner-breedte = viewport - 48; gaps 12):
routepagina brand + 12 + controls(195) -> woordmerk vanaf 406 px
route-detail terug(34) + 12 + brand + 12 + 12 + controls(195)
-> woordmerk vanaf 464 px
Geen enkele leesbare hoogte lost dat op: om op 393 px te passen zou het
woordmerk 80 px breed moeten zijn, oftewel 9 px hoog.
Dit is geen fout van dit merk alleen. Dezelfde meting op de LIVE
Sloepdelen-editie (111 px woordmerk) geeft 26 px overloop op de
route-detail bij 393 px en 44 px bij 375 px; Captain haalt overal 0, omdat
zijn merkslot een 50 px vierkant icoon is en zijn knoppencluster 90 px in
plaats van 195 px. De 195 px komt van de extra "Alle routes"-chip die beide
tenants in de balk zetten. Zie het rapport.
Vandaar EEN breekpunt op 480 px: daaronder de vierkante mark (34 px, gelijk
aan de hoogte van de terugchip en de opstapchip ernaast), daarboven het
woordmerk. Op 480 px halen beide sommen het ruim. Dat is het gewone
responsieve-logo-patroon, en het is precies wat Captain permanent doet. */
html:root[data-tenant="mokumboot"] .bb-header-brand::before{
width:151px;
height:17px;
border-radius:0;
background:url("/assets/whitelabel/mokumboot-logo.svg") left center / contain no-repeat;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-header-brand::before{
background-image:url("/assets/whitelabel/mokumboot-logo-dark.svg");
}
@media (max-width:479.98px){
html:root[data-tenant="mokumboot"] .bb-header-brand::before{
width:34px;
height:34px;
background-image:url("/assets/whitelabel/mokumboot-mark-light.svg");
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-header-brand::before{
background-image:url("/assets/whitelabel/mokumboot-mark-dark.svg");
}
}
/* Waar het woordmerk als TEKST staat in plaats van als afbeelding. */
html:root[data-tenant="mokumboot"] .bb-wordmark,
html:root[data-tenant="mokumboot"] .wordmark{
font-family:var(--bb-font-head);
font-weight:400;
text-transform:uppercase;
letter-spacing:0.03em;
}
/* ════════════════════════════════════════════════════════════════════════
4. DONKERE MODUS SWEEP
────────────────────────────────────────────────────────────────────────
De tokens hierboven beschrijven het merk al; wat er donker Captain uitziet
komt van hardcoded effecten die eroverheen winnen. Weg gaan: de
gloed-filterketens en de #69FEFF/#091C35-familie. Terug komt: vlakke lijnen
in het merkgroen #6DCA85.
HET KAARTCANVAS BLIJFT MET RUST - kaart-hertinting staat op het
won't-do-register. Niets hieronder raakt src/live/ of het kaartcanvas.
════════════════════════════════════════════════════════════════════════ */
/* Routekaart-covers in donkere modus. pages/index.html draagt zijn eigen
dark-regels voor de aquarel-cover met Captain-cyaan #69FEFF hard in de CSS
(rond regel 494-540). Dat is geen token, dus de tokenlaag bereikt het niet.
Mokumboot kent geen cyaan en geen neon: de lijn wordt een VLAKKE 2,5 px
#6DCA85 zonder gloed. Specificiteit (0,3,1) tegen :root[data-theme] (0,2,0),
dus dit wint ongeacht de volgorde van de . */
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover{
background:
radial-gradient(ellipse at 50% 50%, rgba(223, 215, 202, 0.16), transparent 70%),
linear-gradient(135deg, #1A1815 0%, #0A4040 100%);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg polyline{
stroke:#DFD7CA;
stroke-width:2.5;
filter:none;
}
/* De hover-gloed uit pages/index.html:604-609 zou de bloom alsnog terugzetten
zodra de muis over een kaart gaat. Op aanraakschermen bestaat hover niet,
op desktop wel - en het rapport wordt op desktop bekeken. */
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card:hover .bb-route-card-cover svg polyline.aq-line{
filter:none;
}
/* Vangnet voor de rest van de cover-SVG. Bewust NIET uitgebreid naar de hele
chrome: .bb-lang-btn svg gebruikt filter om de inactieve vlag te dempen, en
dat is geen gloed maar een statusaanduiding. */
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover *{
filter:none;
}
/* De cover-SVG tekent zijn boot en pins hard in Captain-navy #091C35. Op een
donker merkvlak valt dat weg; hier het merkgroen. */
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
fill:#DFD7CA;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
stroke:#DFD7CA;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg g path[fill="#091C35"]{
fill:#DFD7CA;
}
/* ════════════════════════════════════════════════════════════════════════
5. STATCHIPS, SHEETS, BADGES
════════════════════════════════════════════════════════════════════════ */
/* styles/bb-sheet.css draagt zijn eigen --bbs-*-tokens met Captain-blauw
#3366FF (licht) en Captain-cyaan #69FEFF (donker) als accent. Dat accent
kleurt de subtitel van de routekop, de preview-link en de actieve
filterchip - de "navigeren"-rol. Hier gaan die drie tokens naar de
groenfamilie, dan volgt de hele sheet vanzelf.
Specificiteit: (0,2,1) resp. (0,3,1) tegen :root[data-theme] (0,2,0).
LET OP DE VOLGORDE. In styles/bb-sheet.css is het NAAKTE `:root`-blok de
DONKERE set en `:root[data-theme="light"]` de lichte. Mijn ongekwalificeerde
tenant-blok is (0,2,1) en wint dus van dat lichte blok (0,2,0). Daarom staan
hieronder de DONKERE waarden in het ongekwalificeerde blok en de lichte in
een eigen [data-theme="light"]-blok (0,3,1). Andersom zou de sheet in lichte
modus donker worden.
Dit is de grootste enkele merkwinst van het hele bestand: de brand-scan
telde de sheet-rijen (.bbs-li-title, .bbs-li-sub, .bbs-li-go,
.bbs-list-item, .bbs-thumb) als de vier grootste Captain-clusters, allemaal
via deze tokens. */
html:root[data-tenant="mokumboot"]{
/* Variant A (captain 2026-08-05). LET OP: dit blok draagt GEEN
thema-selector - het is de DONKERE default van de sheet, met een
[data-theme="light"]-blok eronder dat hem in licht omklapt. Daardoor viel
het buiten de omzetting van de [data-theme="dark"]-regels en bleef de
bottomsheet groen onder een verder warm-neutrale app. De captain zag dat
op de routedetail. Zelfde warme as als --bb-glass-dark-* hierboven. */
--bbs-accent: #DFD7CA;
--bbs-chip-cyan-bg: rgba(223, 215, 202, 0.16);
--bbs-chip-cyan-fg: #DFD7CA;
--bbs-bg: rgba(28, 26, 21, 0.90);
--bbs-sticky: rgb(38, 35, 28);
--bbs-fg: #F2EFE7;
--bbs-fg-dim: rgba(242, 239, 231, 0.62);
--bbs-fg-body: rgba(242, 239, 231, 0.90);
--bbs-border: rgba(242, 239, 231, 0.14);
--bbs-hairline: rgba(242, 239, 231, 0.14);
--bbs-grab: rgba(242, 239, 231, 0.34);
--bbs-shadow: 0 18px 48px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--bbs-chip-bg: rgba(255, 255, 255, 0.10);
--bbs-chip-fg: #F2EFE7;
--bbs-chip-warn-bg: rgba(241, 224, 122, 0.18);
--bbs-chip-warn-fg: #F1E07A;
--bbs-ctrl-bg: rgba(255, 255, 255, 0.10);
--bbs-ctrl-border: rgba(255, 255, 255, 0.16);
--bbs-font: var(--bb-font);
/* De VERZADIGDE actie-rol van de sheet (sinds 2026-08-06 tokens in
styles/bb-sheet.css:47-54, daarvoor hardcoded #3366FF): de play-schijf in
de transport-rij, het schijfje in de Luister-pil, de primaire knop in de
body en de tegel achter een hoogtepunt.
ROOD, NIET HET ACCENT. Dit zijn ACTIES (afspelen, primaire actie) en de
actiegrammatica van deze editie zegt rood = doen. Het accent #DFD7CA is
hier expres NIET de vulling: dat zand haalt met witte inhoud 1,43:1 en
zou volgens de kleurregel donkere inhoud vragen - een zandkleurige
play-knop leest bovendien niet als actie. Wit op #DA3B26 haalt 4,53:1,
zelf nagemeten op 2026-08-06, en het rood is in beide thema's gelijk,
dus deze vijf tokens staan alleen hier en niet in het lichte blok.
De gloed hoort mee: zonder dit token bleef de BLAUWE Captain-gloed onder
een rode knop hangen (dat deed de vorige, selector-gebaseerde fix wel).
0,35 is exact de dekking van de .bb-cta-gloed hierboven.
De tint is bewust EEN doorschijnende waarde voor beide thema's: hij
composeert over de donkere en de lichte sheet en landt in dezelfde
familie als --bb-action-tint (#F8E7E3 in licht). */
--bbs-accent-strong: #DA3B26;
--bbs-on-accent: #FFFFFF;
--bbs-accent-tint: rgba(218, 59, 38, 0.20);
--bbs-accent-glow: 0 4px 12px rgba(218, 59, 38, 0.35);
--bbs-accent-glow-sm: 0 3px 10px rgba(218, 59, 38, 0.35);
/* De fototegel + het stopnummer-schijfje. Gradient #003333 -> #285E3E,
allebei uit het paspoort. GEMETEN met witte cijfers erop: 13,80:1 op het
donkere uiteinde en 7,61:1 op het lichte, dus overal ruim boven AA. Niet
#549C67 als lichte stop, want daar haalt wit nog maar 3,32:1 - te weinig
voor een badge van 11 px.
Dit token verving een blok van 27 regels dat .bbs-thumb hier op (0,3,1)
overschreef en daardoor ook alle zeven CATEGORIE-tegels (boot, stremming,
opstap, toilet, vaarregels, eten, cluster) platsloeg, zodat die er alle
zeven met dezelfde waarde weer bij moesten. Via het token blijft de
cascade van bb-sheet.css intact: .bbs--boot .bbs-thumb (0,2,0) wint nog
steeds van .bbs-thumb (0,1,0), precies zoals bij Captain. */
--bbs-thumb-grad: linear-gradient(135deg, #003333, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="light"]{
--bbs-accent: #285E3E;
--bbs-chip-cyan-bg: #E5F0E8;
--bbs-chip-cyan-fg: #285E3E;
--bbs-bg: rgba(251, 249, 243, 0.90);
--bbs-sticky: rgb(238, 234, 225);
--bbs-fg: #191919;
--bbs-fg-dim: rgba(25, 25, 25, 0.62);
--bbs-fg-body: rgba(25, 25, 25, 0.90);
--bbs-border: rgba(25, 25, 25, 0.10);
--bbs-hairline: rgba(25, 25, 25, 0.10);
--bbs-grab: rgba(25, 25, 25, 0.26);
--bbs-shadow: 0 18px 48px rgba(25, 25, 25, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.50);
--bbs-chip-bg: rgba(25, 25, 25, 0.06);
--bbs-chip-fg: #191919;
--bbs-chip-warn-bg: #F7F2DB;
--bbs-chip-warn-fg: #6A5B12;
--bbs-ctrl-bg: rgba(25, 25, 25, 0.06);
--bbs-ctrl-border: rgba(25, 25, 25, 0.12);
}
/* Sheet-thumbnails en hun nummerbadge liepen hier tot 2026-08-06 via een eigen
selectorblok; ze zitten nu in --bbs-thumb-grad hierboven. */
/* ── Meer-rij-iconen ──────────────────────────────────────────────────────
pages/meer.html:184 zet `background: var(--mr-tint-strong, rgba(105,254,255,
0.18))` en :192 `stroke: var(--mr-ink, var(--bb-blue))`. GETELD: geen van
beide tokens wordt ergens gezet - `grep -n "mr-tint-strong\|--mr-ink"
pages/meer.html` geeft alleen deze twee regels - dus de fallback geldt
altijd en dat is Captain-cyaan #69FEFF op 18%. De brand-scan vond hem 16
keer. Omdat de tokens nergens per rij verschillen, plat ik hier niets af:
ik vul precies de waarde in die het ontwerp bedoelde. */
html:root[data-tenant="mokumboot"]{
--mr-tint-strong: #E5F0E8;
--mr-ink: #285E3E;
}
html:root[data-tenant="mokumboot"][data-theme="dark"]{
--mr-tint-strong: rgba(223, 215, 202, 0.18);
--mr-ink: #DFD7CA;
}
/* Statchips in de routekop (5,0 km - 1 uur - 24 hoogtepunten). Prototype
.stat / .speed-chip (:211, :300): groene tint met de diepgroene inkt, geen
verzadigd vlak, en de pilvorm uit het paspoort. Tabulaire cijfers zodat de
drie chips niet gaan dansen tijdens het tellen. */
html:root[data-tenant="mokumboot"] .bbs .bbs-chip{
font-family:var(--bb-font);
font-weight:700;
font-size:12px;
letter-spacing:0.02em;
border-radius:var(--bb-btn-radius);
padding:7px 13px;
font-variant-numeric:tabular-nums;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bbs .bbs-chip{
background:#E5F0E8;
border:1px solid rgba(25, 25, 25, 0.10);
color:#285E3E;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bbs .bbs-chip{
background:rgba(223, 215, 202, 0.18);
border:1px solid rgba(242, 239, 231, 0.14);
color:#DFD7CA;
}
/* ── Opstap-chip in de topbalk ────────────────────────────────────────────
Gebouwd door src/tour/tenant-routes.js op de Routes-pagina, naar het
prototype (.dock-chip, :129-134). Toont vanaf welke steiger je vaart; het
rode pin-icoon en de statusdot zijn de enige verzadigde accenten in de balk.
Pilvorm 30 px conform het paspoort. */
html:root[data-tenant="mokumboot"] .bb-dock-chip{
display:inline-flex;
align-items:center;
gap:6px;
flex:0 0 auto;
height:34px;
padding:0 12px 0 9px;
border-radius:var(--bb-btn-radius);
background:rgba(255, 255, 255, 0.55);
border:0.5px solid rgba(255, 255, 255, 0.70);
box-shadow:0 2px 8px rgba(25, 25, 25, 0.12);
-webkit-backdrop-filter:blur(12px) saturate(160%);
backdrop-filter:blur(12px) saturate(160%);
font-family:var(--bb-font);
font-weight:700;
font-size:12px;
line-height:1;
color:var(--bb-green-deep, #285E3E);
cursor:pointer;
white-space:nowrap;
transition:transform 160ms var(--bb-spring, cubic-bezier(.2,.7,.3,1.4));
}
html:root[data-tenant="mokumboot"] .bb-dock-chip:active{ transform:scale(0.95); }
html:root[data-tenant="mokumboot"] .bb-dock-chip:focus-visible{
outline:2px solid var(--bb-green-deep, #285E3E);
outline-offset:2px;
}
html:root[data-tenant="mokumboot"] .bb-dock-chip svg{ color:var(--bb-action); }
html:root[data-tenant="mokumboot"] .bb-dock-chip-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(25, 25, 25, 0.20);
flex:0 0 auto;
}
html:root[data-tenant="mokumboot"] .bb-dock-chip.is-set .bb-dock-chip-dot{
background:var(--bb-action);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-dock-chip{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(223, 215, 202, 0.28);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08);
color:#DFD7CA;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-dock-chip-dot{
background:rgba(242, 239, 231, 0.25);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-dock-chip.is-set .bb-dock-chip-dot{
background:var(--bb-action);
}
/* ── Actiechip op de routekaart "Vrije navigatie" ─────────────────────────
pages/index.html:468-479 geeft hem in donkere modus het Captain-cyaan als
vlak. Dit is de enige plek op de routepagina waar "doen" staat, dus hij
hoort in de actiekleur - zachte tint met dezelfde-tint donkere inkt, nooit
verzadigd als vlak (de verzadigde rode pil is voorbehouden aan de ene
primaire CTA per view). */
html:root[data-tenant="mokumboot"] .bb-route-card-start{
background:var(--bb-accent-red-tint);
color:var(--bb-ink-red);
}
/* ── Sectielabels ─────────────────────────────────────────────────────────
Prototype .sec-label (:169-170): 11 px, vet, uppercase, 0,12em, in het
diepe groen. Een label, geen kop - dus de tekstfamilie, niet Archivo Black.
Op donker draait het naar de lichte zelfde-tint. */
html:root[data-tenant="mokumboot"] .bb-section-label,
html:root[data-tenant="mokumboot"] .mr-seclbl{
font-family:var(--bb-font);
font-weight:700;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--bb-green-deep, #285E3E);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-section-label,
html:root[data-tenant="mokumboot"][data-theme="dark"] .mr-seclbl{
color:#DFD7CA;
}
/* ── Opstap-kiezer ───────────────────────────────────────────────────────
Gebouwd door src/tour/tenant-routes.js boven het routekaarten-grid (die
module kende op het moment van schrijven nog geen mokumboot-steigers - zie
het rapport). Zachte tint als vlak, dezelfde-tint donkere tekst, en een
statusdot in de actiekleur voor de gekozen steiger. Bewust GEEN gekleurde
linkerrand en geen verzadigd vlak als achtergrond. */
html:root[data-tenant="mokumboot"] .bb-dock-chooser{
/* Twee rijen: het label op een eigen regel, daaronder de knoppen naast
elkaar. Een enkele flexrij liet het label op 375 px de eerste knop naar
rechts duwen en de tweede eronder vallen. */
display:grid;
grid-template-columns:1fr 1fr auto;
align-items:stretch;
gap:10px;
margin:0 0 22px;
}
html:root[data-tenant="mokumboot"] .bb-dock-chooser-label{
grid-column:1 / -1;
display:block;
font-family:var(--bb-font);
font-weight:700;
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--bb-green-deep, #285E3E);
margin:0 0 -2px;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-dock-chooser-label{
color:#DFD7CA;
}
@media (max-width:420px){
html:root[data-tenant="mokumboot"] .bb-dock-chooser{
grid-template-columns:1fr 1fr;
}
html:root[data-tenant="mokumboot"] .bb-dock-clear{ grid-column:1 / -1; justify-self:start; }
}
html:root[data-tenant="mokumboot"] .bb-dock-btn{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
padding:11px 16px;
border-radius:18px;
border:1px solid var(--bb-border);
background:var(--bb-bg-card);
color:var(--bb-fg-default);
font:inherit;
cursor:pointer;
transition:border-color 160ms var(--bb-ease), background 160ms var(--bb-ease);
}
html:root[data-tenant="mokumboot"] .bb-dock-btn:hover{
border-color:var(--bb-acc-green);
}
html:root[data-tenant="mokumboot"] .bb-dock-btn.is-active{
background:var(--bb-accent-green-tint);
border-color:var(--bb-acc-green);
color:var(--bb-ink-green);
}
html:root[data-tenant="mokumboot"] .bb-dock-dot{
width:8px;height:8px;border-radius:50%;
background:var(--bb-border);
display:block;
margin-bottom:2px;
}
html:root[data-tenant="mokumboot"] .bb-dock-btn.is-active .bb-dock-dot{
background:var(--bb-action);
}
html:root[data-tenant="mokumboot"] .bb-dock-name{
font-family:var(--bb-font-head);
font-weight:400;
font-size:14px;
line-height:1.2;
text-transform:uppercase;
letter-spacing:0.03em;
}
/* Sub-tekst erft de kleur van de knop en zakt in opacity, zodat hij nooit wit
blijft binnen een licht tintvlak (huisregel sub-tekst). */
html:root[data-tenant="mokumboot"] .bb-dock-addr{
font-size:12.5px;
line-height:1.2;
color:inherit;
opacity:0.75;
}
html:root[data-tenant="mokumboot"] .bb-dock-clear{
align-self:center;
padding:7px 15px;
border-radius:var(--bb-btn-radius);
border:1px solid var(--bb-border);
background:transparent;
color:var(--bb-fg-muted);
font-family:var(--bb-font);
font-weight:700;
font-size:12px;
cursor:pointer;
}
html:root[data-tenant="mokumboot"] .bb-dock-clear:hover{
color:var(--bb-fg-default);
border-color:var(--bb-acc-green);
}
/* ── Meer-tab: Captain's briefing weg, mokumboot.nl erin ──────────────────
De Captain's briefing (pages/boat-info.html) is de persoonlijke afvaart-
runbook van de captain: ligplaats E-14, de Sary, Craftsman Marine. Voor een
Mokumboot-passagier is dat ruis. In plaats daarvan een externe link naar
mokumboot.nl. De markup staat in pages/meer.html. */
html:root[data-tenant="mokumboot"] .mr-captain-briefing{
display:none;
}
/* De DEFAULT (verborgen voor Captain en elke andere tenant) staat in
styles/shared-prototype.css:445-448: een tenant-stylesheet mag per
tools/tenant_scope_audit.py geen selector zonder zijn eigen [data-tenant]
dragen, en die default geldt juist voor de anderen. Hier alleen het
openklappen. */
html:root[data-tenant="mokumboot"] .mr-tenant-mokumboot{
display:block;
}
/* De changelog-rij op de statuspagina. De pagina zelf wordt op een tenant-deploy
door tools/scope_tenant_pages.sh verwijderd (captain 2026-08-05: geen changelog
en geen TODO op een tenant), dus zonder deze regel wijst de rij naar een 404.
Zelfde patroon als .mr-captain-briefing hierboven. */
html:root[data-tenant="mokumboot"] #card-changelog{
display:none;
}
/* ── Sheet-knoppen die nog Captain-blauw waren ────────────────────────────
Deze drie knoppen (.bbs-pbtn, .bbs-hl-audio-ico, .bbs-act--primary) stonden
hier als een eigen selectorblok, omdat styles/bb-sheet.css #3366FF
HARDCODED zette. De simvaart van 2026-08-05 mat dat als 2226 px #3366FF op
de Luister-knop, in BEIDE thema's - het enige blauw op een scherm van een
merk dat geen blauw kent.
Sinds 2026-08-06 lopen ze via --bbs-accent-strong / --bbs-on-accent /
--bbs-accent-glow* hierboven. Dat blok pakt ook de GLOED, die deze regels
lieten staan: een rode knop met een blauwe schaduw eronder. */
/* De afvink-indicator aan het eind van een tour is GEEN actie maar een
bevestiging, dus die volgt het accent en niet het rood. .lt-finish-check
leest var(--bbs-accent-strong), dus dit blok moet blijven bestaan. */
html:root[data-tenant="mokumboot"] .lt-finish-check{
color:#285E3E;
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .lt-finish-check{
color:#DFD7CA;
}
/* ── Routekaart-covers in LICHTE modus ────────────────────────────────────
De aquarel-covers worden gegenereerd door src/shared/route-cover.js, en dat
bestand tekent lijn, boot en pins HARD in Captain-navy #091C35 met een
Captain-cyaan gloed rgba(105,254,255,...). De donkere modus hierboven was al
omgezet, de LICHTE niet - alle twaalf regels hingen achter
[data-theme="dark"]. De live-audit van 2026-08-05 mat dat exact: 94
Captain-treffers op de Routes-pagina in licht, 0 in donker.
Hier dezelfde omzetting, maar met de LICHTE inktwaarden: het diepe groen
#285E3E leest op het lichte cover-vlak (6,62:1 op zand), waar het zand
#DFD7CA van de donkere variant juist zou wegvallen. */
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover{
background:
radial-gradient(ellipse at 50% 50%, rgba(40, 94, 62, 0.10), transparent 70%),
linear-gradient(135deg, #F2EFE7 0%, #DFD7CA 100%);
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg polyline{
stroke:#285E3E;
stroke-width:2.5;
filter:none;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card:hover .bb-route-card-cover svg polyline.aq-line,
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover *{
filter:none;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
fill:#285E3E;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
stroke:#285E3E;
}
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root[data-tenant="mokumboot"][data-theme="light"] .bb-route-card-cover svg g path[fill="#091C35"]{
fill:#285E3E;
}
/* De cover-SVG tekent ook een gloed-cirkel met fill rgba(105,254,255,0.15) -
Captain-cyaan, hard in src/shared/route-cover.js. Die zit op een
ZONDER fill-attribuut in de DOM (het staat in de gegenereerde SVG-string),
dus de attribuutselectors hierboven vangen hem niet. Gemeten na de eerste
ronde: 47 treffers over 25 kaarten, precies deze een. Beide thema's, want de
donkere variant heeft dezelfde cirkel. */
html:root[data-tenant="mokumboot"] .bb-route-card-cover svg circle[fill^="rgba(105"],
html:root[data-tenant="mokumboot"] .bb-route-card-cover svg circle[fill="#69FEFF"]{
fill:rgba(40, 94, 62, 0.12);
}
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg circle[fill^="rgba(105"],
html:root[data-tenant="mokumboot"][data-theme="dark"] .bb-route-card-cover svg circle[fill="#69FEFF"]{
fill:rgba(223, 215, 202, 0.14);
}