/* ════════════════════════════════════════════════════════════════════════
tenant-canalmotorboats.css - white-label token-override voor de
Canal Motorboats-editie
────────────────────────────────────────────────────────────────────────
Alles hieronder hangt onder `html:root[data-tenant="canalmotorboats"]`,
gezet door src/shared/tenant.js voor de eerste paint. Zonder dat attribuut
is dit bestand een complete no-op: de Captain-site, de Sloepdelen-editie en
de Mokumboot-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 merkpaspoort is op 2026-08-06 met getComputedStyle van de LIVE site
gemeten, niet geschat. Letterlijk overgenomen:
--bs-primary #00498E merknavy, draagt bijna alles (276 elementen)
--bs-secondary #FF9D00 oranje, UITSLUITEND de primaire actie (8)
--bs-secondary-dark #07335D diepnavy, donkere vlakken
--bs-primary-light #ECF0F5 lichte tint
--bs-light #D9E2EC rail, verdiept vlak
--bs-highlight #F9F1EA warme tint
--bs-midlight #E6E0D9
--bs-middark #D6D6D6
--bs-success #95C22B
--bs-warning #FECD58
--bs-dark #333333
paginavlak #FFFFFF echt wit (95 elementen)
Typografie: koppen en knoppen Baloo Bhaijaan 2 700 (h1 32 px, h2 24 px in
#00498E), lopende tekst Open Sans 400 16 px in #00498E - hun body-kleur IS
de merknavy. Knoppen: pill, border-radius 30 px, padding 10px 15px.
WAT WEL AFGELEID IS, EN WAAROM
De merksite kent geen TINT-schaal en geen donkere modus. Vier waarden zijn
daarom door mij afgeleid en hieronder per stuk gemeten:
#EFF6DE groene tint (uit #95C22B)
#FFF4D9 amber tint (uit #FECD58)
#04203A donker paginavlak (een stap onder #07335D, zelfde tint 209 graden)
#B3C4D6 tweede accentniveau in donker (een stap onder #D9E2EC)
plus drie inkten voor die tinten: #3F5410, #5E4400, #7A4300.
HET CONTRASTBESLUIT OVER HET ORANJE - DIT IS EEN BESLUIT, GEEN SUGGESTIE
-----------------------------------------------------------------------
#FF9D00 heeft een RELATIEVE LUMINANTIE van 45,4% (HSL-lichtheid 50,0%).
De huisregel in CLAUDE.md staat wit alleen toe op vlakken onder 25%
lichtheid, en de meting bevestigt waarom:
wit op #FF9D00 = 2,08:1 FAIL
#07335D op #FF9D00 = 6,14:1 AA <- DIT is de inkt op oranje
#00498E op #FF9D00 = 4,30:1 FAIL voor normale tekst (alleen AA-large)
#333333 op #FF9D00 = 6,06:1 AA
De merksite zelf zet WEL wit op zijn oranje knoppen. Wij wijken daar
BEWUST van af en zetten het diepnavy #07335D als inkt: dat is dezelfde
merkfamilie, het haalt AA, en het is de enige lezing die met de huisregel
te verenigen is. Zie --bb-action-on hieronder.
Wit MAG wel op de twee navy's: 8,96:1 op #00498E en 12,80:1 op #07335D.
Op het merkgroen #95C22B mag het niet (2,09:1); daar is #07335D de inkt
(6,11:1).
ALLE METINGEN (WCAG 2.1 relatieve luminantie, uitgerekend 2026-08-06 met
dezelfde formule als tenant-mokumboot.css)
LICHT
#00498E op #FFFFFF = 8,96:1 lopende tekst en koppen
#07335D op #FFFFFF = 12,80:1 structurele inkt
#00498E op #ECF0F5 = 7,83:1 merknavy op de lichte tint
#07335D op #ECF0F5 = 11,18:1 diepnavy op de lichte tint
#00498E op #D9E2EC = 6,84:1 merknavy op de rail
#07335D op #D9E2EC = 9,78:1 diepnavy op de rail
#7A4300 op #F9F1EA = 7,15:1 actie-inkt op de warme tint
#3F5410 op #EFF6DE = 7,60:1 groene inkt op de groene tint
#5E4400 op #FFF4D9 = 8,34:1 amber-inkt op de amber-tint
#3F5410 op #FFFFFF = 8,44:1 success-inkt op wit
#5E4400 op #FFFFFF = 9,12:1 warning-inkt op wit
#7A4300 op #FFFFFF = 7,98:1 actie-inkt op wit
rgba(7,51,93,0.68) op #FFFFFF = 4,88:1 gedempte tekst
DONKER
#ECF0F5 op #04203A = 14,42:1 lopende tekst
#ECF0F5 op #07335D = 11,18:1 lopende tekst op het kaartvlak
#D9E2EC op #04203A = 12,60:1 accent
#D9E2EC op #07335D = 9,78:1 accent op het kaartvlak
#B3C4D6 op #04203A = 9,26:1 accent tweede niveau
#B3C4D6 op #07335D = 7,18:1 accent tweede niveau op het kaartvlak
#FF9D00 op #04203A = 7,92:1 de actiekleur zelf
#FFC46B op #04203A = 10,50:1 lichte actie-inkt
#B7DE4E op #04203A = 10,66:1 licht merkgroen
#FECD58 op #04203A = 11,07:1 merkgeel
#FFFFFF op #0C4275 = 10,23:1 wit op het verhoogde vlak
rgba(236,240,245,0.72) op #04203A = 8,01:1 gedempte tekst
DE OMGEKEERDE KANT VAN DE CHROOM-AS IN DONKER
wit op #D9E2EC = 1,31:1 onleesbaar - vandaar de uitzondering
#07335D op #D9E2EC = 9,78:1
#07335D op #B3C4D6 = 7,18:1
DONKERE MODUS: GEEN TWEEDE HUISSTIJL
Canal Motorboats heeft geen eigen donkere identiteit. Deze modus klapt de
NAVY-as van het merk om in plaats van er een nieuwe as bij te verzinnen:
het diepste vlak zit in de #07335D-familie, de vlakken erboven zijn navy-
tinten, en het oranje blijft ongewijzigd omdat het daardoor de enige
verzadigde kleur op het scherm is - precies de actiegrammatica die de
lichte modus ook hanteert. Het KAARTCANVAS blijft er bewust buiten:
kaart-hertinting staat op het won't-do-register.
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.
════════════════════════════════════════════════════════════════════════ */
/* ── Self-hosted merkfonts ────────────────────────────────────────────────
Baloo Bhaijaan 2 (koppen en knoppen, gewicht 700) en Open Sans (lopende
tekst, 400 en 600) zijn de fonts die de merksite zelf gebruikt. Ze zijn
allebei vrij beschikbaar, dus anders dan bij Mokumboot is hier geen
substitutie nodig.
Zelfde aanpak als styles/fonts.css en de twee andere tenant-stylesheets:
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 andere
merkfonts.
De woff2-bestanden worden gebouwd door de assets-pijplijn en staan in
TENANT_ASSETS.canalmotorboats.fonts in service-worker.js.
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="canalmotorboats"]. tools/tenant_scope_audit.py
kent deze uitzondering. */
@font-face{
font-family:'Baloo Bhaijaan 2';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('/assets/fonts/baloo-bhaijaan-2-700-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:'Open Sans';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('/assets/fonts/open-sans-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:'Open Sans';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('/assets/fonts/open-sans-600-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="canalmotorboats"],
html:root[data-tenant="canalmotorboats"][data-theme="light"]{
/* Merkkleuren. De app kent historisch de rollen navy/blue/cyan/red. Dit
merk kent geen cyaan en geen rood, dus die twee sleuven krijgen de lichte
navy-tint respectievelijk de actiekleur - zelfde aanpak als de
Mokumboot-editie, die zijn rood ook in de --bb-red-sleuf zette. */
--bb-navy: #07335D; /* structureel donker: koppen op glas, outlines */
--bb-blue: #00498E; /* merknavy: secundair / navigeren, draagt bijna alles */
--bb-cyan: #D9E2EC; /* licht accent, UITSLUITEND op donkere vlakken */
--bb-red: #FF9D00; /* het merk kent geen rood; de actiekleur vult deze rol */
/* ACTIEGRAMMATICA. Oranje = doen, exact een primaire CTA per view; de
merksite gebruikt het op precies 8 van de 379 zichtbare elementen. Alles
wat navigeert of nuanceert zit in de navy-familie. Nooit omdraaien. */
--bb-action: #FF9D00;
--bb-action-ink: #7A4300; /* donkere zelfde-tint tekst OP de warme tint, 7,15:1 */
--bb-action-tint: #F9F1EA; /* --bs-highlight, de warme merktint */
--bb-action-on: #07335D; /* 6,14:1 - NIET wit, dat haalt 2,08. Zie de kop. */
/* Merkfamilies die de app niet als rol kent, maar dit bestand wel nodig
heeft. Een-op-een de gemeten --bs-*-tokens. */
--bb-brand-navy: #00498E;
--bb-brand-deep: #07335D;
--bb-brand-orange: #FF9D00;
--bb-primary-light: #ECF0F5;
--bb-light: #D9E2EC;
--bb-highlight: #F9F1EA;
--bb-midlight: #E6E0D9;
--bb-middark: #D6D6D6;
--bb-green: #95C22B;
--bb-yellow: #FECD58;
--bb-dark: #333333;
/* Vlakken en inkt. Het paginavlak is ECHT wit - dat is het merk, gemeten op
95 zichtbare elementen. Kaarten zijn daarom ook wit en krijgen hun
scheiding van de haarlijn plus de zachte schaduw, niet van een vulling.
Dat is precies hoe de merksite het doet. */
--bb-bg-page: #FFFFFF;
--bb-bg-card: #FFFFFF;
--bb-bg-tinted: #ECF0F5;
--bb-bg-elevated:#ECF0F5;
--bb-bg-shadow: rgba(7, 51, 93, 0.10);
--bb-card-bg: #FFFFFF;
--bb-elev-bg: #ECF0F5;
--bb-offwhite: #FFFFFF;
/* Lopende tekst IS de merknavy (gemeten body-kleur #00498E, 8,96:1 op wit).
Gedempte tekst zakt naar het diepnavy met alpha, zodat hij binnen dezelfde
tint blijft in plaats van naar grijs te lopen. */
--bb-fg-default: #00498E;
--bb-fg-muted: rgba(7, 51, 93, 0.68);
--bb-fg-subtle: rgba(7, 51, 93, 0.50);
--bb-fg-faint: rgba(7, 51, 93, 0.38);
--bb-text: #00498E;
--bb-muted: rgba(7, 51, 93, 0.68);
--bb-border: rgba(7, 51, 93, 0.14);
--bb-border-subtle: #D9E2EC;
--bb-shadow: 0 4px 16px rgba(7, 51, 93, 0.08);
/* Tinten - zacht, nooit verzadigd als blokachtergrond (huisregel). Het merk
levert er twee kant en klaar (#ECF0F5 en #F9F1EA); de groene en de amber
tint zijn afgeleid uit #95C22B en #FECD58 en hieronder gemeten. Paars
bestaat niet in dit merk en leent de lichte navy-tint. */
--bb-accent-green-tint: #EFF6DE;
--bb-accent-red-tint: #F9F1EA;
--bb-accent-amber-tint: #FFF4D9;
--bb-accent-blue-tint: #ECF0F5;
--bb-accent-purple-tint:#ECF0F5;
--bb-light-blue: #ECF0F5;
--bb-red-tint: #F9F1EA;
--bb-warning-tint: #FFF4D9;
/* Inkt-op-tint paren, allemaal donkere zelfde-tint tekst (huisregel). */
--bb-ink-green: #3F5410; /* 7,60:1 op #EFF6DE */
--bb-ink-red: #7A4300; /* 7,15:1 op #F9F1EA */
--bb-ink-amber: #5E4400; /* 8,34:1 op #FFF4D9 */
--bb-ink-blue: #07335D; /* 11,18:1 op #ECF0F5 */
--bb-ink-purple: #07335D;
--bb-red-text: #7A4300;
--bb-warning-text: #5E4400;
/* Accentdots en badges - de enige plek waar verzadigd merk mag staan. */
--bb-acc-green: #3F5410;
--bb-acc-red: #FF9D00;
--bb-acc-amber: #5E4400;
--bb-acc-blue: #00498E;
--bb-acc-purple: #07335D;
--bb-success: #3F5410; /* 8,44:1 op wit; het merkgroen zelf haalt 2,09 */
--bb-warning: #5E4400; /* 9,12:1 op wit; het merkgeel zelf haalt 1,53 */
--bb-warning-accent: #5E4400;
--bb-blue-active:#07335D;
/* Verbindingsstatus-balk */
--bb-conn-navy: #07335D;
--bb-conn-cyan: #D9E2EC;
--bb-conn-green: #95C22B;
/* Focusring - de merknavy in plaats van Captain-blauw */
--bb-focus-ring: 0 0 0 3px rgba(0, 73, 142, 0.24);
--bb-focus-ring-on-navy: 0 0 0 3px rgba(217, 226, 236, 0.34);
/* Glas (licht = frosted wit met diepnavy inkt, 12,80:1) */
--bb-glass-shadow: 0 8px 30px rgba(7, 51, 93, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.60);
--bb-glass-ink: #07335D;
--bb-glass-ink-muted: rgba(7, 51, 93, 0.66);
--bb-glass-ink-faint: rgba(7, 51, 93, 0.46);
--bb-glass-hairline: rgba(7, 51, 93, 0.12);
/* Altijd-donker glas (kaartlegenda's, live-tour-paneel). THEMA-ONAFHANKELIJK:
dit blok draagt met opzet geen thema-selector, want de kaartlegenda en het
live-tour-paneel zijn in beide thema's donker. Het diepnavy op 0,86 met
#D9E2EC als accent (9,78:1 op het dekkende equivalent). */
--bb-glass-dark-bg: rgba(4, 32, 58, 0.86);
--bb-glass-dark-border: rgba(255, 255, 255, 0.16);
--bb-glass-dark-accent: #D9E2EC;
/* Typografie. Open Sans voor tekst en UI, Baloo Bhaijaan 2 voor koppen. */
--bb-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bb-font-head: 'Baloo Bhaijaan 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Knoppen zijn pillen: gemeten border-radius 30 px. Captain gebruikt 0,
Sloepdelen 4, Mokumboot 30. */
--bb-btn-radius: 30px;
}
/* ── DONKER - DE NAVY-AS OMGEKLAPT ───────────────────────────────────────
Canal Motorboats heeft geen eigen donkere identiteit: de merksite tekent
alleen licht. In plaats van er een tweede huisstijl bij te verzinnen klapt
deze modus de as om die het merk WEL heeft: wit #FFFFFF naar diepnavy
#07335D. Daardoor leest donker als dezelfde app, en wordt het oranje
sterker omdat het de enige verzadigde kleur op het scherm is - exact de
actiegrammatica die de lichte modus ook hanteert.
pagina #04203A een stap onder het diepnavy, zelfde tint (209 graden)
kaart #07335D het merk-diepnavy, het vlak erboven
verhoogd #0C4275 een stap boven het merknavy
accent #D9E2EC --bs-light, 33% verzadiging
actie #FF9D00 ongewijzigd, met #07335D erop (6,14:1)
Het kaartcanvas blijft ongemoeid (won't-do-register).
TOKENS DIE HIER OPNIEUW STAAN, EN WAAROM DAT MOET
Een token dat alleen in het basisblok hierboven staat, HOUDT zijn lichte
waarde in donker. Dat is precies de fout die de Mokumboot-bouw een hele
herstelronde kostte ("ik zie nog steeds veel groen in dark mode"). Elk
token dat in donker een andere waarde nodig heeft staat daarom hieronder
opnieuw. Wat bewust NIET terugkomt, en waarom:
--bb-cyan is in beide thema's #D9E2EC. Het is de rol "licht
accent op een DONKER vlak" en wordt uitsluitend op
altijd-donkere oppervlakken geconsumeerd (het
live-tour-paneel, .iw-detail, en regels die zelf al
onder [data-theme="dark"] hangen). Op wit zou het
1,31:1 halen; daar staat het dus ook nooit.
--bb-action* het oranje is in beide thema's gelijk; alleen de
INKT-op-tint en de tint zelf klappen om, en die twee
staan hieronder.
--bb-navy structureel donker, in beide thema's #07335D.
--bb-glass-dark-* thema-onafhankelijk, zie het basisblok.
--bb-btn-radius,
--bb-font* vorm en typografie zijn thema-onafhankelijk. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"]{
--bb-bg-page: #04203A;
--bb-bg-card: #07335D;
--bb-bg-tinted: rgba(217, 226, 236, 0.16);
--bb-bg-elevated:#0C4275;
--bb-bg-shadow: rgba(0, 0, 0, 0.32);
--bb-card-bg: #07335D;
--bb-elev-bg: #0C4275;
--bb-offwhite: #07335D;
--bb-fg-default: #ECF0F5;
--bb-fg-muted: rgba(236, 240, 245, 0.72);
--bb-fg-subtle: rgba(236, 240, 245, 0.50);
--bb-fg-faint: rgba(236, 240, 245, 0.40);
--bb-text: #ECF0F5;
--bb-muted: rgba(236, 240, 245, 0.68);
--bb-border: rgba(236, 240, 245, 0.16);
--bb-border-subtle: rgba(236, 240, 245, 0.10);
--bb-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
/* De tinten worden doorschijnend zodat ze over pagina en kaartvlak
composeren. Gemeten met hun eigen inkt erop, op het paginavlak EN op het
kaartvlak (de laagste van de twee staat erbij):
blauw 8,32 / 6,51 groen 7,32 / 5,79
amber 7,36 / 5,84 actie 7,50 / 6,07 */
--bb-accent-green-tint: rgba(149, 194, 43, 0.20);
--bb-accent-red-tint: rgba(255, 157, 0, 0.20);
--bb-accent-amber-tint: rgba(254, 205, 88, 0.18);
--bb-accent-blue-tint: rgba(217, 226, 236, 0.16);
--bb-accent-purple-tint:rgba(217, 226, 236, 0.16);
--bb-light-blue: rgba(217, 226, 236, 0.16);
--bb-red-tint: rgba(255, 157, 0, 0.20);
--bb-warning-tint: rgba(254, 205, 88, 0.18);
/* Op donker draaien de inkt-op-tint paren om naar de LICHTE zelfde-tint. */
--bb-ink-green: #B7DE4E;
--bb-ink-red: #FFC46B;
--bb-ink-amber: #FECD58;
--bb-ink-blue: #D9E2EC;
--bb-ink-purple: #D9E2EC;
--bb-red-text: #FFC46B;
--bb-warning-text: #FECD58;
--bb-action-ink: #FFC46B;
--bb-action-tint:rgba(255, 157, 0, 0.20);
--bb-focus-ring: 0 0 0 3px rgba(217, 226, 236, 0.30);
/* Stond in het basisblok al op de lichte as, maar met een andere dekking;
hier expliciet, zodat de ring op een donker vlak dezelfde zwaarte heeft
als elders in deze modus. */
--bb-focus-ring-on-navy: 0 0 0 3px rgba(217, 226, 236, 0.32);
--bb-glass-bg: rgba(7, 51, 93, 0.78);
--bb-glass-border: rgba(217, 226, 236, 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(236, 240, 245, 0.94);
--bb-glass-ink-muted: rgba(236, 240, 245, 0.66);
--bb-glass-ink-faint: rgba(236, 240, 245, 0.46);
--bb-glass-hairline: rgba(255, 255, 255, 0.12);
--bb-glass-accent: #D9E2EC;
--bb-glass-dark-ink: rgba(236, 240, 245, 0.94);
--bb-glass-dark-ink-muted: rgba(236, 240, 245, 0.66);
--bb-glass-dark-ink-faint: rgba(236, 240, 245, 0.46);
/* CHROOM naar de LICHTE navy-as. Deze rollen kleuren knoppen, iconen, dots
en focusringen - geen informatie. Zonder deze regels houden ze hun lichte
waarde (#00498E, #07335D) en die verdwijnen op een donker vlak: #00498E
haalt op #04203A maar 1,84:1.
#D9E2EC eerste niveau 12,60:1 op de pagina, 9,78:1 op het kaartvlak
#B3C4D6 tweede niveau 9,26:1 op de pagina, 7,18:1 op het kaartvlak */
--bb-blue: #D9E2EC; /* secundair / navigeren */
--bb-blue-active: #B3C4D6; /* ingedrukte staat, een niveau dieper */
--bb-acc-blue: #D9E2EC; /* accentdot / badge-rand */
--bb-acc-purple: #D9E2EC;
--bb-conn-navy: #04203A; /* het vangnet achter de statusbalk */
--bb-conn-cyan: #D9E2EC;
--bb-conn-green: #B7DE4E;
/* SEMANTISCHE kleuren blijven semantisch, maar leesbaar: de lichte inkten
in plaats van de donkere. #3F5410 haalt op #04203A maar 1,54:1.
#B7DE4E op #04203A = 10,66:1
#FECD58 op #04203A = 11,07:1 */
--bb-success: #B7DE4E;
--bb-warning: #FECD58;
--bb-warning-accent: #FECD58;
--bb-acc-green: #B7DE4E;
--bb-acc-amber: #FECD58;
/* DATA-kleuren: het merkgroen en het merkgeel zelf, voor routelijnen en
statusinformatie. Expliciet gelijk gehouden aan het basisblok zodat een
toekomstige consument het echte merk krijgt en niet de inkt-variant. */
--bb-green: #95C22B; /* 7,88:1 op #04203A */
--bb-yellow: #FECD58; /* 11,07:1 op #04203A */
}
/* ── Witte tekst op de lichte chroom-as kan niet ─────────────────────────
--bb-blue en --bb-blue-active zijn hierboven licht geworden, maar vijf
gedeelde regels zetten hardcoded color:#fff OP dat token als knopvlak
(src/live/live-tour.css:1169, :1227, :1640, src/live/live-polish.css:134,
pages/feedback.html:229-230). Wit op #D9E2EC is 1,31:1 - onleesbaar, en de
huisregel zegt: wit alleen op vlakken onder 25% lichtheid (#D9E2EC zit op
88,8%). De gedeelde bestanden blijven af (Captain, Sloepdelen en Mokumboot
draaien erop), dus hier de donkere inkt: #07335D op #D9E2EC is 9,78:1, op
#B3C4D6 7,18:1. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .lt-sim-btn,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .lt-pickup-share,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] body.lt-proto .lt-startbar-primary,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .lt-gps-card-cta,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .fb-submit{
color:#07335D;
}
/* De ingedrukte staat van twee van die knoppen is een hardcoded Captain-blauw
#2855e0 (live-tour.css:1171, :1230); met de donkere inkt hierboven zou dat
onleesbaar flitsen. Zelfde tweede niveau als --bb-blue-active. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .lt-sim-btn:active,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .lt-pickup-share:active{
background:#B3C4D6;
}
/* De start-CTA draagt een Captain-blauwe gloed als box-shadow-literal
(live-tour.css:1642, rgba(51,102,255,0.42)); onder een lichte knop leest
dat als defect. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] body.lt-proto .lt-startbar-primary{
box-shadow:0 4px 14px rgba(0, 0, 0, 0.35);
}
/* Het pictogram in die knop is hard op stroke:#fff gezet (live-tour.css:1648)
en zou als enige wit overblijven op een lichte pil. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] body.lt-proto .lt-startbar-primary svg{
stroke:#07335D;
}
/* ── De LEGACY-aliassen, want die dragen de body ──────────────────────────
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. Zonder deze drie regels blijft elke pagina in Libre Franklin op een
Captain-wit vlak staan en is de hele merktypografie onzichtbaar. Ze horen
in dit bestand en niet in tour.css, want ze gelden alleen voor deze tenant.
`:root` is (0,1,0), `html:root[data-tenant="canalmotorboats"]` is (0,2,1),
dus deze winnen ongeacht de laadvolgorde.
--white is bij deze tenant in LICHT toevallig hetzelfde als de basiswaarde
(#FFFFFF): het merkpaginavlak IS wit. De alias staat er toch, omdat --text
en --font het wel nodig hebben en omdat de donkere variant hem hoe dan ook
moet omklappen. */
html:root[data-tenant="canalmotorboats"]{
--font: var(--bb-font);
--text: #00498E;
--white: #FFFFFF;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"]{
--text: #ECF0F5;
--white: #04203A;
}
/* En de pagina's die hun body-font NIET uit een token halen maar uit een
hardcoded literal: pages/meer.html zet
`font-family:'Libre Franklin', system-ui, sans-serif` rechtstreeks op body,
pages/quiz.html doet iets vergelijkbaars. Die bestanden zijn niet van dit
bestand om te wijzigen, maar `html:root[data-tenant="canalmotorboats"] 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="canalmotorboats"] body{
font-family:var(--bb-font);
}
/* Het Captain-navy vangnet achter de statusbalk op de vaarinfokaart.
pages/vaarinfo.html:69-71 en pages/vaarverkeer.html:75-77 zetten body
`background:#091C35` hard, 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 Canal Motorboats-app.
Een rolwissel, geen ontwerpwijziging: dezelfde structurele donkere kleur uit
het eigen paspoort (#07335D) in beide thema's. `.vi-stage` en `.vv-stage`
bestaan elk op precies een pagina en zijn daarmee de enige haken zonder een
ander bestand aan te raken.
Geen tekst op dit vlak - het is de strook achter de statusbalk en onder de
home-indicator. #07335D haalt HSL-lichtheid 19,6% en relatieve luminantie
3,2%, dus als er ooit wel tekst op landt mag die wit zijn (12,80:1). */
html:root[data-tenant="canalmotorboats"]:has(.vi-stage),
html:root[data-tenant="canalmotorboats"] body:has(.vi-stage),
html:root[data-tenant="canalmotorboats"]:has(.vv-stage),
html:root[data-tenant="canalmotorboats"] body:has(.vv-stage){
background:#07335D;
}
/* ── Info & weetjes (/fun-facts) ──────────────────────────────────────────
Die pagina draait op een EIGEN tokenset (--iw-*) in plaats van op --bb-*,
dus de tokenlaag hierboven bereikt hem niet: src/fun-facts/fun-facts.css:18
zet --iw-bg-soft op #F4F5F8 en :9 --iw-navy op Captain-navy #091C35. De
tokens staan 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.
GEMETEN op de nieuwe vlakken:
#00498E op #FFFFFF = 8,96:1 (tekst)
#07335D op #FFFFFF = 12,80:1 (koppen)
wit op #00498E = 8,96:1 (de actieve filterchip, tekst hardcoded #fff)
#ECF0F5 op #04203A = 14,42:1
#ECF0F5 op #07335D = 11,18:1
wit op #0C4275 = 10,23:1 (de actieve filterchip in donker) */
html:root[data-tenant="canalmotorboats"]{
/* --iw-navy is de actieve filterchip (fun-facts.css:174-176, met een
HARDCODED color:#fff) en de vetgedrukte woorden in een detailtekst. De
vulling moet dus donker genoeg blijven voor wit: #00498E haalt 8,96:1 en
zit met HSL-lichtheid 27,8% net boven de 25%-grens, maar met relatieve
luminantie 6,7% ruim eronder - en de meting beslist, net als bij het
oranje hierboven. */
--iw-navy: #00498E;
--iw-bg-soft: #FFFFFF;
--iw-bg: #FFFFFF;
--iw-ink: #00498E;
--iw-muted: rgba(7, 51, 93, 0.68);
--iw-border: rgba(7, 51, 93, 0.14);
--iw-accent: #00498E;
--iw-accent-tint: #ECF0F5;
--iw-shadow: 0 1px 3px rgba(7, 51, 93, 0.06);
--iw-shadow-lg: 0 8px 32px rgba(7, 51, 93, 0.16);
/* GETIJDENBANDEN op deze pagina. Bewust GEEN parallel bandsysteem: deze
vier tokens leunen op de --cmb-band-*-waarden onderaan dit bestand, zodat
/fun-facts dezelfde drie vlakken draait als /app/routes. Welk element
welke band krijgt staat in het GETIJDENBANDEN-blok.
band 1 de zoekrij = het paginavlak (body draagt --iw-bg-soft)
band 2 de chipsrij
band 3 de resultatenlijst
De chipsrij is 50 px hoog; met de golfrand erboven wordt dat 70. Die
hoogte zit in de height-calc van .iw-main (fun-facts.css:190), dus hij
MOET via dit token lopen en niet als losse regel. */
--iw-chips-h: 70px;
--iw-band-2: var(--cmb-band-2);
--iw-band-3: var(--cmb-band-3);
--iw-band-card: var(--cmb-onband-card);
--iw-band-shadow: var(--cmb-onband-shadow);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"]{
/* Op donker is #07335D al de INACTIEVE chip (--iw-bg), dus de actieve mag
die kleur niet ook dragen. #0C4275 ligt er een stap boven en houdt wit
op 10,23:1; #D9E2EC zou wit op 1,31:1 zetten en is dus onbruikbaar zolang
fun-facts.css:175 de chiptekst hard op #fff zet. */
--iw-navy: #0C4275;
--iw-bg-soft: #04203A;
--iw-bg: #07335D;
--iw-ink: #ECF0F5;
--iw-muted: rgba(236, 240, 245, 0.68);
--iw-border: rgba(236, 240, 245, 0.16);
--iw-accent: #D9E2EC;
--iw-accent-tint: rgba(217, 226, 236, 0.16);
--iw-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
--iw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
/* De banden klappen mee met --cmb-band-* hieronder; deze aliassen hoeven
dus geen eigen donkere waarde. Ze staan hier toch NIET opnieuw, want een
var()-alias wordt bij GEBRUIK opgelost, niet bij declaratie - de lichte
declaratie hierboven pakt in donker vanzelf de donkere --cmb-waarde. Dat
is precies andersom dan bij een LETTERLIJKE hex, en daarom staan de
letterlijke waarden verderop wel dubbel. */
}
/* Het detailpaneel van /fun-facts is een ALTIJD-donker glaspaneel, in beide
thema's - src/fun-facts/fun-facts.css:385-388 zet er letterlijk
`rgba(9,28,53,0.72)` op, oftewel Captain-navy, met een Captain-cyaan
linkerrand rgba(105,254,255,0.30). Dat is geen token, dus de --iw-*-laag
hierboven bereikt het niet.
Zelfde vorm, eigen merk: het diepe paginavlak op 0,78 met de accent-haarlijn
ernaast. GEMETEN op de gecomposeerde paneelkleur: over de witte pagina wordt
het #3B5165 (#D9E2EC = 6,29:1, #ECF0F5 = 7,19:1), over de donkere pagina
#04203A (12,60:1 respectievelijk 14,42:1). */
html:root[data-tenant="canalmotorboats"] .iw-detail{
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(4, 32, 58, 0) 30%),
rgba(4, 32, 58, 0.78);
border-left-color:rgba(217, 226, 236, 0.30);
color:rgba(236, 240, 245, 0.94);
}
/* pages/fun-facts.html:239-243 zet de "Lees meer"-link op var(--bb-blue) in
LICHT en var(--bb-cyan) in DONKER - maar de link staat in beide gevallen op
dat altijd-donkere paneel. In licht zou --bb-blue (#00498E) daar 1,09:1
halen. Vandaar in beide thema's de lichte accentkleur. */
html:root[data-tenant="canalmotorboats"] .iw-detail .iw-detail-link{
color:#D9E2EC;
}
/* ── Typografie toepassen ────────────────────────────────────────────────
Het paspoort schrijft koppen in Baloo Bhaijaan 2 700 voor, in het merknavy
#00498E (h1 32 px, h2 24 px). GEEN uppercase: anders dan bij Mokumboot
zetten deze koppen hun eigen kapitalisatie. Baloo Bhaijaan 2 is hier alleen
in gewicht 700 gehost, dus dat is ook het enige gewicht dat gevraagd wordt.
Line-height 1,2 - Baloo heeft ruime onderlengtes, 1,12 zou stapelen. */
html:root[data-tenant="canalmotorboats"] h1,
html:root[data-tenant="canalmotorboats"] h2,
html:root[data-tenant="canalmotorboats"] h3,
html:root[data-tenant="canalmotorboats"] h4{
font-family:var(--bb-font-head);
font-weight:700;
text-transform:none;
letter-spacing:normal;
line-height:1.2;
color:var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] h1,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] h2,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] h3,
html:root[data-tenant="canalmotorboats"][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="canalmotorboats"] .bb-header h1,
html:root[data-tenant="canalmotorboats"] .bb-header h2,
html:root[data-tenant="canalmotorboats"] .bb-header h3,
html:root[data-tenant="canalmotorboats"] .bb-mobile-nav h3{
color:inherit;
}
html:root[data-tenant="canalmotorboats"] h5,
html:root[data-tenant="canalmotorboats"] h6{
font-family:var(--bb-font-head);
font-weight:700;
text-transform:none;
}
/* ════════════════════════════════════════════════════════════════════════
1. ACTIEGRAMMATICA
────────────────────────────────────────────────────────────────────────
Oranje #FF9D00 = doen. Exact EEN primaire CTA per view; alles wat navigeert
of nuanceert zit in de navy-familie. Identiek gedrag in licht en donker -
de knop is in beide thema's dezelfde oranje pil, want het merk kent geen
donkere variant van zijn actiekleur.
Maten uit het gemeten paspoort: pill radius 30, gewicht 700 in de kopfamilie
(de merksite zet knoptekst in Baloo Bhaijaan 2), padding 10/15 opgerekt naar
15/22 voor de app-CTA, die vingergroot moet zijn.
DE INKT IS #07335D EN NIET WIT. Zie het kopcommentaar: wit haalt 2,08:1 op
dit oranje en zakt daarmee ver onder AA. Dit is de enige plek in het bestand
waar wij bewust van de merksite afwijken. */
html:root[data-tenant="canalmotorboats"] .bb-cta{
background:var(--bb-action);
color:var(--bb-action-on);
border-radius:var(--bb-btn-radius);
font-family:var(--bb-font-head);
font-weight:700;
font-size:15px;
line-height:1.15;
letter-spacing:0.01em;
text-transform:none;
padding:15px 22px;
box-shadow:
0 10px 26px rgba(255, 157, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition:box-shadow 160ms var(--bb-ease, ease), transform 160ms var(--bb-spring, cubic-bezier(.2,.7,.3,1.4));
}
html:root[data-tenant="canalmotorboats"] .bb-cta:hover{
box-shadow:
0 12px 30px rgba(255, 157, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:root[data-tenant="canalmotorboats"] .bb-cta:active{
transform:scale(0.96);
box-shadow:
0 6px 16px rgba(255, 157, 0, 0.28),
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; de rest
heeft genoeg aan specificiteit (0,4,1 tegen 0,2,0). */
html:root[data-tenant="canalmotorboats"] .bbs .rd-cta{
border-radius:var(--bb-btn-radius) !important;
font:700 15px/1.15 var(--bb-font-head) !important;
letter-spacing:0.01em;
text-transform:none;
padding:15px 22px;
background:var(--bb-action);
color:var(--bb-action-on);
box-shadow:
0 10px 26px rgba(255, 157, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:root[data-tenant="canalmotorboats"] .bbs .rd-cta:active{
transform:scale(0.96);
box-shadow:
0 6px 16px rgba(255, 157, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Secundair: 1 px outline in de merknavy op een transparant vlak, zelfde
pilvorm. Geen tweede oranje op het scherm - dat is de hele regel. */
html:root[data-tenant="canalmotorboats"] .bb-cta-secondary{
background:transparent;
color:var(--bb-brand-navy, #00498E);
border:1px solid var(--bb-brand-navy, #00498E);
border-radius:var(--bb-btn-radius);
font-family:var(--bb-font-head);
font-weight:700;
font-size:13.5px;
letter-spacing:0.01em;
text-transform:none;
padding:10px 20px;
box-shadow:none;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-cta-secondary{
color:var(--bb-ink-blue);
border-color:var(--bb-ink-blue);
}
html:root[data-tenant="canalmotorboats"] .bb-cta-secondary:hover{
background:var(--bb-accent-blue-tint);
box-shadow:none;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-cta-secondary:hover{
background:var(--bb-bg-tinted);
}
/* ════════════════════════════════════════════════════════════════════════
2. CHROME - topbalk en tabbalk
────────────────────────────────────────────────────────────────────────
Captain draait beide balken als donker rooknavy met cyaan gloedringen. Het
Canal Motorboats-paspoort kent geen cyaan, geen Captain-blauw #3366FF en
geen Captain-navy #091C35. Licht wordt wit glas op het witte paginavlak met
diepnavy inkt en haarlijnen; donker is geen omkering maar dezelfde
geometrie in #07335D-glas met een lichte 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. */
html:root[data-tenant="canalmotorboats"] .bb-header{
box-sizing:border-box;
height:60px;
border-radius:22px;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner{
height:100%;
gap:12px;
padding:0 12px;
}
html:root[data-tenant="canalmotorboats"][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.66);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(7, 51, 93, 0.12);
box-shadow:
0 8px 30px rgba(7, 51, 93, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
color:#07335D;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-header{
background:rgba(7, 51, 93, 0.78);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(217, 226, 236, 0.28);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color:#ECF0F5;
}
/* 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="canalmotorboats"][data-theme="light"] .bb-header{
background:rgba(255, 255, 255, 0.96);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-header{
background:rgba(7, 51, 93, 0.96);
}
}
/* Paginatitel: de kopfamilie, kleine graad, geen uppercase. */
html:root[data-tenant="canalmotorboats"] .bb-header-title{
font-family:var(--bb-font-head);
font-weight:700;
font-size:15px;
letter-spacing:0.01em;
text-transform:none;
color:inherit;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-header-divider{
background:rgba(7, 51, 93, 0.18);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-header-divider{
background:rgba(217, 226, 236, 0.28);
}
/* ── Terugknop ────────────────────────────────────────────────────────────
34 px cirkel, wit glas met een navy haarlijn en een diepnavy chevron. De
cyaan familie verdwijnt volledig. */
html:root[data-tenant="canalmotorboats"] .bb-back,
html:root[data-tenant="canalmotorboats"] .bb-rd-back{
background:rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter:blur(12px) saturate(160%);
backdrop-filter:blur(12px) saturate(160%);
border:0.5px solid rgba(7, 51, 93, 0.16);
box-shadow:0 2px 8px rgba(7, 51, 93, 0.14);
color:#07335D;
}
html:root[data-tenant="canalmotorboats"] .bb-back svg,
html:root[data-tenant="canalmotorboats"] .bb-rd-back svg{
stroke:currentColor;
}
html:root[data-tenant="canalmotorboats"] .bb-back:hover,
html:root[data-tenant="canalmotorboats"] .bb-rd-back:hover{
border-color:rgba(7, 51, 93, 0.30);
box-shadow:0 4px 12px rgba(7, 51, 93, 0.20);
}
html:root[data-tenant="canalmotorboats"] .bb-back:focus-visible,
html:root[data-tenant="canalmotorboats"] .bb-rd-back:focus-visible{
outline:2px solid var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-back,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-rd-back{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(217, 226, 236, 0.45);
box-shadow:none;
color:#ECF0F5;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-back:hover,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-rd-back:hover{
border-color:rgba(217, 226, 236, 0.75);
box-shadow:none;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-back:focus-visible,
html:root[data-tenant="canalmotorboats"][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 60% met een
fijne 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, zodat hij even zwaar leest
als de knoppenstack rechts.
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="canalmotorboats"] .bb-mapback.bb-mapback{
background:var(--bb-mapfab-bg);
border:1px solid var(--bb-mapfab-border);
box-shadow:var(--bb-mapfab-shadow);
color:#07335D;
}
/* De OPEN-staat van de kaartknoppen is 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 lichte merktint met de
diepnavy inhoud erop (11,18:1). 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 kaart is in beide thema's licht. */
html:root[data-tenant="canalmotorboats"]{
--bb-mapfab-bg-active: #ECF0F5;
--lt-fab-bg-active: #ECF0F5;
--bb-mapfab-border: rgba(7, 51, 93, 0.14);
--bb-mapfab-shadow: 0 4px 12px rgba(7, 51, 93, 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="canalmotorboats"] .bb-lang-pill{
background:rgba(255, 255, 255, 0.60);
border:0.5px solid rgba(7, 51, 93, 0.14);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html:root[data-tenant="canalmotorboats"] .bb-lang-pill::before{
background:rgba(255, 255, 255, 0.90);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root[data-tenant="canalmotorboats"] .bb-lang-btn{
color:rgba(7, 51, 93, 0.60);
/* 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.
De taalknop hoort helemaal geen CTA-schaduw te dragen; de pil eromheen
levert het relief al. */
box-shadow:none;
}
html:root[data-tenant="canalmotorboats"] .bb-lang-btn.active,
html:root[data-tenant="canalmotorboats"] .bb-lang-btn:hover{
color:#07335D;
}
html:root[data-tenant="canalmotorboats"] .bb-lang-btn:focus-visible{
outline:2px solid var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-lang-pill{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(217, 226, 236, 0.28);
}
html:root[data-tenant="canalmotorboats"][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="canalmotorboats"][data-theme="dark"] .bb-lang-btn{
color:rgba(236, 240, 245, 0.55);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-lang-btn.active,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-lang-btn:hover{
color:#ECF0F5;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-lang-btn:focus-visible{
outline-color:var(--bb-cyan);
}
/* ── Tabbalk ──────────────────────────────────────────────────────────── */
html:root[data-tenant="canalmotorboats"] .bb-mobile-nav{
border-radius:26px;
padding:6px 8px;
}
html:root[data-tenant="canalmotorboats"][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.66);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(7, 51, 93, 0.12);
box-shadow:
0 8px 30px rgba(7, 51, 93, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-nav{
background:rgba(7, 51, 93, 0.78);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(217, 226, 236, 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="canalmotorboats"][data-theme="light"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
background:rgba(255, 255, 255, 0.90) !important;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
background:rgba(7, 51, 93, 0.92) !important;
}
html:root[data-tenant="canalmotorboats"] .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="canalmotorboats"][data-theme="light"] .bb-mobile-tab{
color:rgba(7, 51, 93, 0.58);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab{
color:rgba(236, 240, 245, 0.50);
}
/* De actieve tab staat in het merknavy (8,96:1 op wit). */
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-mobile-tab[aria-current="page"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-mobile-tab.is-active-group{
color:var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab[aria-current="page"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab.is-active-group{
color:#D9E2EC;
}
/* Het actieve icoon kreeg van Captain een cyaan gloedfilter; hier erft het
gewoon de inkt van de tab. */
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab[aria-current="page"] svg,
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab.is-active-group svg{
color:inherit;
filter:none;
}
/* De actieve LENS: wit glas met een navy haarlijn - geen cyaan gloed. */
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-mobile-tab::before{
background:rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter:blur(6px) saturate(150%);
backdrop-filter:blur(6px) saturate(150%);
border:0.5px solid rgba(0, 73, 142, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root[data-tenant="canalmotorboats"][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(217, 226, 236, 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. Prefix bbCmb zodat de naam
nooit met de basis of met een andere tenant botst. */
@keyframes bbCmbLensIn{
from{ transform:scale(0.7); opacity:0; }
to { transform:scale(1); opacity:1; }
}
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab[aria-current="page"]::before,
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab.is-active-group::before{
animation:bbCmbLensIn 380ms cubic-bezier(.2, .7, .3, 1.4) both;
}
@media (hover:hover){
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-mobile-tab:hover{
color:var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab:hover{
color:#D9E2EC;
}
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab:hover svg{
color:inherit;
filter:none;
transform:scale(1.08);
}
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab[aria-current="page"]:hover::before,
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab.is-active-group:hover::before{
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab[aria-current="page"]:hover::before,
html:root[data-tenant="canalmotorboats"][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="canalmotorboats"] .bb-mobile-tab.is-drag-hover svg{
color:inherit;
filter:none;
}
html:root[data-tenant="canalmotorboats"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root[data-tenant="canalmotorboats"] .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(7, 51, 93, 0.12);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root[data-tenant="canalmotorboats"][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="canalmotorboats"] .bb-mobile-tab:focus-visible,
html:root[data-tenant="canalmotorboats"] .bb-header-brand:focus-visible,
html:root[data-tenant="canalmotorboats"] .bb-cta:focus-visible{
outline:2px solid var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-mobile-tab:focus-visible,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-header-brand:focus-visible,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-cta:focus-visible{
outline-color:var(--bb-cyan);
}
/* Desktopnav: dezelfde gloedloze glasfamilie als de tabbalk. */
html:root[data-tenant="canalmotorboats"] .bb-nav-link{
color:inherit;
opacity:0.72;
}
html:root[data-tenant="canalmotorboats"] .bb-nav-link[aria-current="page"]{
opacity:1;
background:rgba(255, 255, 255, 0.60);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-nav-link[aria-current="page"]{
background:rgba(255, 255, 255, 0.10);
}
html:root[data-tenant="canalmotorboats"] .bb-nav-link[aria-current="page"]::after{
background:var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-nav-link[aria-current="page"]::after{
background:#D9E2EC;
}
html:root[data-tenant="canalmotorboats"] .bb-nav-link:hover{
opacity:1;
background:rgba(255, 255, 255, 0.50);
border-color:rgba(7, 51, 93, 0.14);
box-shadow:0 1px 6px rgba(7, 51, 93, 0.12);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-nav-link:hover{
background:rgba(255, 255, 255, 0.10);
border-color:rgba(217, 226, 236, 0.28);
box-shadow:none;
}
html:root[data-tenant="canalmotorboats"] .bb-nav-link:focus-visible{
outline:2px solid var(--bb-brand-navy, #00498E);
}
/* Op donker zou die ring #00498E blijven en dat haalt op het paginavlak
#04203A maar 1,84:1 - een focusring die je niet ziet is geen focusring. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-nav-link:focus-visible{
outline-color:var(--bb-cyan);
}
/* ════════════════════════════════════════════════════════════════════════
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 - NU WEL GEMETEN AAN HET EINDBESTAND (2026-08-07). De lockup
bestaat inmiddels; de viewBox van assets/whitelabel/canalmotorboats-logo.svg
is `0 0 935.667 290.665`, dus de verhouding is 3,2192:1. Een pseudo-element
leidt geen intrinsieke verhouding af uit een background-image, dus de
breedte staat er als `hoogte * 3,2192`. Verander je de hoogte, dan volgt de
breedte vanzelf. HERMEET de factor als de generator een andere viewBox
oplevert:
grep -o 'viewBox="[^"]*"' assets/whitelabel/canalmotorboats-logo.svg
HOOGTE - captain-besluit 2 (2026-08-06): de topbalk draagt de VOLLEDIGE
lockup, op elk scherm. De vierkante merkteken-val onder 480 px is daarmee
vervallen; het woordmerk mag nooit verdwijnen. Wat er wel gebeurt op een
smal scherm is SCHALEN, via clamp() op de hoogte:
34 px vanaf 375 px viewport (9,07vw x 375 = 34,0)
29 px op 320 px (9,07vw x 320 = 29,0 -> lockup 93,4 breed)
Zie het GETIJDENBANDEN-blok onderaan dit bestand voor --cmb-lockup-h en de
gemeten passom op 320 px. */
html:root[data-tenant="canalmotorboats"] .bb-header-brand::before{
width:calc(var(--cmb-lockup-h) * 3.2192);
height:var(--cmb-lockup-h);
border-radius:0;
background:url("/assets/whitelabel/canalmotorboats-logo.svg") left center / contain no-repeat;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-header-brand::before{
background-image:url("/assets/whitelabel/canalmotorboats-logo-dark.svg");
}
/* Waar het woordmerk als TEKST staat in plaats van als afbeelding. */
html:root[data-tenant="canalmotorboats"] .bb-wordmark,
html:root[data-tenant="canalmotorboats"] .wordmark{
font-family:var(--bb-font-head);
font-weight:700;
text-transform:none;
letter-spacing:0.01em;
}
/* ════════════════════════════════════════════════════════════════════════
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 de merknavy-as.
HET KAARTCANVAS BLIJFT MET RUST - kaart-hertinting staat op het
won't-do-register.
════════════════════════════════════════════════════════════════════════ */
/* 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.
Dit merk kent geen cyaan en geen neon: de lijn wordt een VLAKKE 2,5 px
#D9E2EC zonder gloed (12,60:1 op het donkere paginavlak). Specificiteit
(0,3,1) tegen :root[data-theme] (0,2,0), dus dit wint ongeacht de volgorde
van de . */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover{
background:
radial-gradient(ellipse at 50% 50%, rgba(217, 226, 236, 0.16), transparent 70%),
linear-gradient(135deg, #04203A 0%, #0C4275 100%);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg polyline{
stroke:#D9E2EC;
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="canalmotorboats"][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="canalmotorboats"][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 de lichte accentkleur. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
fill:#D9E2EC;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
stroke:#D9E2EC;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg g path[fill="#091C35"]{
fill:#D9E2EC;
}
/* ════════════════════════════════════════════════════════════════════════
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 tokens naar de navy-familie,
dan volgt de hele sheet vanzelf.
LET OP DE VOLGORDE. In styles/bb-sheet.css is het NAAKTE `:root`-blok de
DONKERE set en `:root[data-theme="light"]` de lichte. Een ongekwalificeerd
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. */
html:root[data-tenant="canalmotorboats"]{
/* DONKERE default van de sheet. Dit blok draagt met opzet GEEN
thema-selector; zie de uitleg hierboven. Gemeten op de gecomposeerde
sheetkleur rgba(7,51,93,0.90) over #04203A = #07315A:
#ECF0F5 = 11,50:1 #D9E2EC = 10,05:1 */
--bbs-accent: #D9E2EC;
--bbs-chip-cyan-bg: rgba(217, 226, 236, 0.16);
--bbs-chip-cyan-fg: #D9E2EC;
--bbs-bg: rgba(7, 51, 93, 0.90);
--bbs-sticky: rgb(9, 44, 78);
--bbs-fg: #ECF0F5;
--bbs-fg-dim: rgba(236, 240, 245, 0.62);
--bbs-fg-body: rgba(236, 240, 245, 0.90);
--bbs-border: rgba(236, 240, 245, 0.16);
--bbs-hairline: rgba(236, 240, 245, 0.16);
--bbs-grab: rgba(236, 240, 245, 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: #ECF0F5;
--bbs-chip-warn-bg: rgba(254, 205, 88, 0.18);
--bbs-chip-warn-fg: #FECD58;
--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 (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.
ORANJE, NIET HET ACCENT. Dit zijn ACTIES (afspelen, primaire actie) en de
actiegrammatica van deze editie zegt oranje = doen. Het accent #D9E2EC is
hier expres NIET de vulling: dat haalt met witte inhoud 1,31:1 en zou
volgens de kleurregel donkere inhoud vragen - een lichtblauwe play-knop
leest bovendien niet als actie.
--bbs-on-accent is #07335D en NIET wit: wit op #FF9D00 is 2,08:1, het
diepnavy 6,14:1. Zelfde besluit als bij .bb-cta hierboven. Het oranje 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 blijft de BLAUWE Captain-gloed onder
een oranje knop hangen. 0,32 is exact de dekking van de .bb-cta-gloed.
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 (#F9F1EA in licht). */
--bbs-accent-strong: #FF9D00;
--bbs-on-accent: #07335D;
--bbs-accent-tint: rgba(255, 157, 0, 0.20);
--bbs-accent-glow: 0 4px 12px rgba(255, 157, 0, 0.32);
--bbs-accent-glow-sm: 0 3px 10px rgba(255, 157, 0, 0.32);
/* De fototegel + het stopnummer-schijfje. Gradient #07335D -> #00498E,
allebei uit het paspoort. GEMETEN met witte cijfers erop: 12,80:1 op het
donkere uiteinde en 8,96:1 op het lichte, dus overal ruim boven AA.
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, #07335D, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="light"]{
--bbs-accent: #00498E;
--bbs-chip-cyan-bg: #ECF0F5;
--bbs-chip-cyan-fg: #07335D;
--bbs-bg: rgba(255, 255, 255, 0.92);
--bbs-sticky: rgb(236, 240, 245);
--bbs-fg: #07335D;
--bbs-fg-dim: rgba(7, 51, 93, 0.68);
--bbs-fg-body: rgba(7, 51, 93, 0.90);
--bbs-border: rgba(7, 51, 93, 0.14);
--bbs-hairline: rgba(7, 51, 93, 0.14);
--bbs-grab: rgba(7, 51, 93, 0.26);
--bbs-shadow: 0 18px 48px rgba(7, 51, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.50);
--bbs-chip-bg: rgba(7, 51, 93, 0.06);
--bbs-chip-fg: #07335D;
--bbs-chip-warn-bg: #FFF4D9;
--bbs-chip-warn-fg: #5E4400;
--bbs-ctrl-bg: rgba(7, 51, 93, 0.06);
--bbs-ctrl-border: rgba(7, 51, 93, 0.12);
}
/* ── 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))`. Geen van beide
tokens wordt ergens gezet - `grep -n "mr-tint-strong\|--mr-ink"
pages/meer.html` geeft alleen die twee regels - dus de fallback geldt altijd
en dat is Captain-cyaan #69FEFF op 18%. Omdat de tokens nergens per rij
verschillen wordt hier niets afgeplat: dit vult precies de waarde in die het
ontwerp bedoelde. */
html:root[data-tenant="canalmotorboats"]{
--mr-tint-strong: #ECF0F5;
--mr-ink: #00498E;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"]{
--mr-tint-strong: rgba(217, 226, 236, 0.16);
--mr-ink: #D9E2EC;
}
/* Statchips in de routekop (5,0 km - 1 uur - 24 hoogtepunten): lichte
merktint met de diepnavy inkt (11,18:1), 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="canalmotorboats"] .bbs .bbs-chip{
font-family:var(--bb-font);
font-weight:600;
font-size:12px;
letter-spacing:0.01em;
border-radius:var(--bb-btn-radius);
padding:7px 13px;
font-variant-numeric:tabular-nums;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bbs .bbs-chip{
background:#ECF0F5;
border:1px solid rgba(7, 51, 93, 0.14);
color:#07335D;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bbs .bbs-chip{
background:rgba(217, 226, 236, 0.16);
border:1px solid rgba(236, 240, 245, 0.16);
color:#D9E2EC;
}
/* ── Opstap-chip in de topbalk ────────────────────────────────────────────
Gebouwd door src/tour/tenant-routes.js op de Routes-pagina. Toont vanaf
welke steiger je vaart; het oranje pin-icoon en de statusdot zijn de enige
verzadigde accenten in de balk. Pilvorm 30 px conform het paspoort. */
html:root[data-tenant="canalmotorboats"] .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.60);
border:0.5px solid rgba(7, 51, 93, 0.16);
box-shadow:0 2px 8px rgba(7, 51, 93, 0.14);
-webkit-backdrop-filter:blur(12px) saturate(160%);
backdrop-filter:blur(12px) saturate(160%);
font-family:var(--bb-font);
font-weight:600;
font-size:12px;
line-height:1;
color:var(--bb-brand-navy, #00498E);
cursor:pointer;
white-space:nowrap;
transition:transform 160ms var(--bb-spring, cubic-bezier(.2,.7,.3,1.4));
}
html:root[data-tenant="canalmotorboats"] .bb-dock-chip:active{ transform:scale(0.95); }
html:root[data-tenant="canalmotorboats"] .bb-dock-chip:focus-visible{
outline:2px solid var(--bb-brand-navy, #00498E);
outline-offset:2px;
}
/* Zelfde reden als bij .bb-nav-link: de chip zit in donker op het
#07335D-glas, waar #00498E 1,43:1 haalt. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-dock-chip:focus-visible{
outline-color:var(--bb-cyan);
}
html:root[data-tenant="canalmotorboats"] .bb-dock-chip svg{ color:var(--bb-action); }
html:root[data-tenant="canalmotorboats"] .bb-dock-chip-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(7, 51, 93, 0.22);
flex:0 0 auto;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-chip.is-set .bb-dock-chip-dot{
background:var(--bb-action);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-dock-chip{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(217, 226, 236, 0.28);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08);
color:#D9E2EC;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-dock-chip-dot{
background:rgba(236, 240, 245, 0.25);
}
html:root[data-tenant="canalmotorboats"][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 oranje pil is voorbehouden aan de ene
primaire CTA per view). */
html:root[data-tenant="canalmotorboats"] .bb-route-card-start{
background:var(--bb-accent-red-tint);
color:var(--bb-ink-red);
}
/* ── Sectielabels ─────────────────────────────────────────────────────────
11 px, vet, uppercase, 0,12em, in de merknavy. Een label, geen kop - dus de
tekstfamilie, niet de kopfamilie. Op donker naar de lichte zelfde-tint. */
html:root[data-tenant="canalmotorboats"] .bb-section-label,
html:root[data-tenant="canalmotorboats"] .mr-seclbl{
font-family:var(--bb-font);
font-weight:600;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--bb-brand-navy, #00498E);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-section-label,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .mr-seclbl{
color:#D9E2EC;
}
/* ── Opstap-kiezer ───────────────────────────────────────────────────────
Gebouwd door src/tour/tenant-routes.js boven het routekaarten-grid. 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.
LET OP: deze tenant heeft op 2026-08-06 nog geen routes en dus nog geen
steigers in tenant-routes.js. Deze regels zijn vast gebouwd zodat de kiezer
meteen in het merk staat zodra die data er is. */
html:root[data-tenant="canalmotorboats"] .bb-dock-chooser{
/* Het label op een eigen regel, daaronder de steigers naast elkaar.
Een enkele flexrij liet het label op 375 px de eerste knop naar rechts
duwen en de tweede eronder vallen.
WAAROM AUTO-FIT EN NIET `1fr 1fr auto`
Die vorm komt uit de Sloepdelen-stylesheet, en Sloepdelen heeft TWEE
steigers: twee kolommen voor de knoppen en een smalle auto-kolom voor
"Toon alle routes". Deze tenant heeft er VIJF. Gemeten op 1440 px gaf
dat `553px 553px 130px`: twee kaarten van een halve schermbreedte, en de
derde steiger geplet in de kolom die voor het knopje bedoeld was.
Auto-fit vult de rij met even brede cellen, hoeveel steigers het er ook
zijn, en het knopje staat altijd op zijn eigen regel.
Mokumboot (zeven steigers) had hetzelfde scheve raster; die staat sinds
2026-08-07 op ditzelfde recept in styles/tenant-mokumboot.css. Sloepdelen
heeft er twee en houdt de oude vorm - daar klopt hij. */
display:grid;
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
align-items:stretch;
gap:10px;
margin:0 0 22px;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-clear{
grid-column:1 / -1;
justify-self:start;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-chooser-label{
grid-column:1 / -1;
display:block;
font-family:var(--bb-font);
font-weight:600;
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--bb-brand-navy, #00498E);
margin:0 0 -2px;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-dock-chooser-label{
color:#D9E2EC;
}
/* Onder 420 px zou auto-fit met een minimum van 180 px op een enkele kolom
uitkomen; twee naast elkaar leest daar beter. */
@media (max-width:420px){
html:root[data-tenant="canalmotorboats"] .bb-dock-chooser{
grid-template-columns:1fr 1fr;
}
}
html:root[data-tenant="canalmotorboats"] .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, ease), background 160ms var(--bb-ease, ease);
}
html:root[data-tenant="canalmotorboats"] .bb-dock-btn:hover{
border-color:var(--bb-acc-blue);
}
html:root[data-tenant="canalmotorboats"] .bb-dock-btn.is-active{
background:var(--bb-accent-blue-tint);
border-color:var(--bb-acc-blue);
color:var(--bb-ink-blue);
}
html:root[data-tenant="canalmotorboats"] .bb-dock-dot{
width:8px;height:8px;border-radius:50%;
background:var(--bb-border);
display:block;
margin-bottom:2px;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-btn.is-active .bb-dock-dot{
background:var(--bb-action);
}
html:root[data-tenant="canalmotorboats"] .bb-dock-name{
font-family:var(--bb-font-head);
font-weight:700;
font-size:14px;
line-height:1.2;
text-transform:none;
letter-spacing:0.01em;
}
/* 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="canalmotorboats"] .bb-dock-addr{
font-size:12.5px;
line-height:1.2;
color:inherit;
opacity:0.75;
}
html:root[data-tenant="canalmotorboats"] .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:600;
font-size:12px;
cursor:pointer;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-clear:hover{
color:var(--bb-fg-default);
border-color:var(--bb-acc-blue);
}
/* ── Meer-tab: Captain's briefing weg, canalmotorboats.com 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
Canal Motorboats-passagier is dat ruis. In plaats daarvan een externe link
naar canalmotorboats.com. De markup staat in pages/meer.html. */
html:root[data-tenant="canalmotorboats"] .mr-captain-briefing{
display:none;
}
/* De DEFAULT (verborgen voor Captain en elke andere tenant) staat in
styles/shared-prototype.css:445-449: 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. Bewust een KLASSE-toggle en geen [hidden]: styles/native-perf.css
zet app-breed [hidden]{display:none !important} en dat valt niet te
overrulen. */
html:root[data-tenant="canalmotorboats"] .mr-tenant-canalmotorboats{
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="canalmotorboats"] #card-changelog{
display:none;
}
/* ── Sheet-knoppen ────────────────────────────────────────────────────────
De drie knoppen die styles/bb-sheet.css eerder hardcoded op #3366FF zette
(.bbs-pbtn, .bbs-hl-audio-ico, .bbs-act--primary) lopen sinds 2026-08-06 via
--bbs-accent-strong / --bbs-on-accent / --bbs-accent-glow* hierboven, gloed
inbegrepen. Er is dus geen selectorblok meer voor nodig.
De afvink-indicator aan het eind van een tour is GEEN actie maar een
bevestiging, dus die volgt het accent en niet het oranje. .lt-finish-check
leest var(--bbs-accent-strong), dus dit blok moet blijven bestaan. */
html:root[data-tenant="canalmotorboats"] .lt-finish-check{
color:#00498E;
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .lt-finish-check{
color:#D9E2EC;
}
/* ── 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 is al
omgezet; deze regels doen hetzelfde met de LICHTE inktwaarden. De merknavy
#00498E leest op het lichte cover-vlak (7,83:1 op #ECF0F5), waar het
#D9E2EC van de donkere variant juist zou wegvallen (1,31:1 op wit). */
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover{
background:
radial-gradient(ellipse at 50% 50%, rgba(0, 73, 142, 0.10), transparent 70%),
linear-gradient(135deg, #FFFFFF 0%, #D9E2EC 100%);
}
/* De cover-SVG tekent zelf een dekkend papiervlak: een rect met de blauwe
Captain-gradient, hard in src/shared/route-cover.js. Die ligt OVER de
achtergrond hierboven, dus het lichtblauwe merkvlak was in de lichte stand
nooit te zien. Zie de gelijke regel in styles/tenant-mokumboot.css voor de
volledige toelichting; de donkere stand deed dit al. */
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg > rect[fill^="url(#aq-bg-"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg > rect[fill^="url(#aqi-bg-"]{
fill:transparent;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg polyline{
stroke:#00498E;
stroke-width:2.5;
filter:none;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card:hover .bb-route-card-cover svg polyline.aq-line,
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover *{
filter:none;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
fill:#00498E;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
stroke:#00498E;
}
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root[data-tenant="canalmotorboats"][data-theme="light"] .bb-route-card-cover svg g path[fill="#091C35"]{
fill:#00498E;
}
/* Vangnet voor de achtergrondbollen. De ECHTE uitschakeling zit in
src/shared/route-cover.js (skipBlobs), want de Routes-pagina draait in de
app-shell-iframe en de stylesheet-link daarin lost op naar
/app/styles/tenant-canalmotorboats.css, wat door de netlify.toml-rewrite
/app/* -> /pages/app.html HTML oplevert in plaats van CSS. Gemeten:
/styles/... 81329 bytes CSS tegen /app/styles/... 106686 bytes HTML. Deze
regel dekt dus alleen de contexten waar de CSS wel aankomt, zoals de losse
route-detailpagina en oude covers die nog uit een cache komen.
De selector mikt op een circle die een DIRECT kind van de svg is en geen
klasse draagt: precies de bollen. De start- en eindstip dragen aq-dot-start
en aq-dot-end, en de boot en de pijl zitten in een g, dus die blijven
staan. */
html:root[data-tenant="canalmotorboats"] .bb-route-card-cover svg > circle:not([class]),
html:root[data-tenant="canalmotorboats"] .lt-splash-route-cover svg > circle:not([class]){
display:none;
}
/* ════════════════════════════════════════════════════════════════════════
8. GETIJDENBANDEN - het sectieritme van de merksite in de app
────────────────────────────────────────────────────────────────────────
Voorstel 1 uit docs/whitelabel-canalmotorboats-design-review.html (frames
"Voorstel 1 - licht" en "- donker", regels 260-345). De pagina wisselt,
net als de homepage van het merk, zachte banden af, gescheiden door een
golvende rand. (Het oranje squiggle onder de paginatitel dat hier eerst
bij hoorde is geschrapt; zie 8.1.)
VIER PAGINA'S, NIET MEER (captain-besluit 7): /app/routes, /app/meer,
/app/quiz en /fun-facts. Het kaartcanvas, de sheets en de live tour
blijven bandloos. Daarom hangt ELKE regel hieronder niet alleen onder
[data-tenant="canalmotorboats"] maar OOK onder een pagina-poort:
body.bb-cards-mode .bb-route-cards de routekiezer (index.html)
body:has(> .mr-wrap) /app/meer
body.quiz-proto /app/quiz
body:has(.iw-main) /fun-facts
`:has()` is hier al in gebruik (zie `body:has(.vv-stage)` hierboven) en
is de enige manier om meer.html en fun-facts.html te herkennen: die twee
dragen geen klasse op en de pagina-HTML is voor deze bouw
read-only.
HOE EEN BAND WORDT GETEKEND ZONDER EEN ENKELE WRAPPER IN DE HTML
----------------------------------------------------------------
De banden lopen over RIJEN van broertjes-elementen (label + grid + label +
grid ...). Een achtergrond per element geeft naden op elke marge ertussen.
Daarom worden de banden als GORDIJNEN geschilderd, van onder naar boven:
1. De pagina (of de sectiecontainer) draagt de kleur van de LAATSTE band.
Die vult dus alles.
2. Het EERSTE element van band 3 krijgt een ::before dat van zijn eigen
bovenkant tot ver daarboven de kleur van band 2 legt (z-index -2).
3. Het EERSTE element van band 2 doet hetzelfde met de kleur van band 1
(z-index -1) en dekt daarmee het gordijn van stap 2 in het bovenste
deel weer af.
Twee dingen maken dat veilig:
- De container krijgt `isolation:isolate`. Zonder eigen stacking context
zou zijn ACHTERGROND na de negatieve-z-gordijnen geschilderd worden (de
schildervolgorde van de wortelcontext zet blok-achtergronden na
negatieve z-index) en zou je de gordijnen nooit zien.
- De gordijnen steken alleen naar BOVEN en naar LINKS/RECHTS uit. Overloop
naar boven en naar links is per definitie niet scrollbaar, dus er komt
geen horizontale of verticale scrollbalk bij. Naar beneden uitsteken zou
dat wel doen; dat gebeurt hier nergens.
De zijwaartse bleed is exact `-24px`: dat is de padding van de canonieke
.bb-page-kolom (styles/shared-prototype.css:358-367), dus op een mobiel
scherm loopt de band precies van rand tot rand. Boven 1352 px viewport is
de kolom afgetopt op 1304 en is de band even breed als die kolom - een
100vw-bleed zou daar juist een horizontale scrollbalk kosten zodra het
besturingssysteem een zichtbare scrollbalk tekent.
DE GOLFRAND
Letterlijk de curve uit de mockup (regel 272/280 van het review-document):
viewBox 0 0 340 20, preserveAspectRatio none, pad
`M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12`. In de mockup wordt de
ruimte ONDER de curve gevuld met de kleur van de volgende band; hier wordt
de ruimte ERBOVEN gevuld met de kleur van de vorige band (`V0 H0 Z` in
plaats van `V20 H0 Z`), omdat de volgende band hier al als vlak achter de
rand ligt. Zelfde curve, zelfde beeld, een laag minder.
De rand is puur decoratief: het is een background-image op een pseudo-
element met pointer-events:none, dus hij zit niet in de
toegankelijkheidsboom en vangt geen tikken. Er landt nooit tekst op: het
eerste element van een band krijgt --cmb-wave-h extra padding-top, en de
rand wordt precies in die padding getekend.
ALLE KLEUREN KOMEN UIT DE REVIEW, GEMETEN, NIET HERREKEND
band 1 licht #FFFFFF donker #04203A inkt #00498E 8,96:1 / #ECF0F5 14,42:1
band 2 licht #ECF0F5 donker #07335D inkt #00498E 7,83:1 / #ECF0F5 11,18:1
kicker #00498E / #D9E2EC
band 3 licht #F9F1EA donker #0A2B4C kicker #7A4300 7,15:1 / #FFC46B 9,13:1
kaart licht #FFFFFF + 0 4px 14px rgba(7,51,93,0.10), GEEN haarlijn
donker #0C4275 + 0 4px 14px rgba(0,0,0,0.30); wit erop is
10,23:1 en de lopende inkt #ECF0F5 is 8,94:1
════════════════════════════════════════════════════════════════════════ */
html:root[data-tenant="canalmotorboats"]{
--cmb-band-1:#FFFFFF;
--cmb-band-2:#ECF0F5;
--cmb-band-3:#F9F1EA;
--cmb-band-2-kicker:#00498E;
--cmb-band-3-kicker:#7A4300;
/* Kaart OP een band. De haarlijn vervalt: de band levert de scheiding al,
en de review vraagt expliciet om schaduw zonder rand. */
--cmb-onband-card:#FFFFFF;
--cmb-onband-shadow:0 4px 14px rgba(7, 51, 93, 0.10);
--cmb-onband-ring:#00498E; /* alleen als ring op een GEKOZEN kaart */
--cmb-wave-h:20px;
/* Hoever een band buiten de inhoudskolom doorloopt. Dit is een BEREKENING
en geen vast getal, want de kolom is niet altijd even breed als het
scherm. De banden zijn absoluut gepositioneerd binnen die kolom, dus een
percentage rekent tegen de KOLOM en 50vw tegen het SCHERM; het verschil
is precies de afstand tot de schermrand.
mobiel 375: kolom 327 -> 163,5 - 187,5 = -24 px (de paginamarge)
desktop 1440: kolom 1304 -> 652 - 720 = -68 px
Met de oude vaste -24px bleef er op 1440 px aan elke kant 44 px kolom
ONGEVERFD naast de band staan; op de schermafdruk hield het bandvlak
halverwege op. */
--cmb-bleed:calc(50% - 50vw);
/* Hoogte van de merk-lockup in de topbalk (zie blok 3 hierboven).
34 px is de maat uit het voorstel; hij blijft staan zolang de rij past.
De passom staat bij de smalle-schermregels onderaan dit blok. */
--cmb-lockup-h:34px;
--cmb-wave-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
--cmb-wave-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%23ECF0F5'/%3E%3C/svg%3E");
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"]{
--cmb-band-1:#04203A;
--cmb-band-2:#07335D;
--cmb-band-3:#0A2B4C;
--cmb-band-2-kicker:#D9E2EC;
--cmb-band-3-kicker:#FFC46B;
--cmb-onband-card:#0C4275;
--cmb-onband-shadow:0 4px 14px rgba(0, 0, 0, 0.30);
--cmb-onband-ring:#D9E2EC;
--cmb-wave-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%2304203A'/%3E%3C/svg%3E");
--cmb-wave-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q 42 2 85 12 T 170 12 T 255 12 T 340 12 V0 H0 Z' fill='%2307335D'/%3E%3C/svg%3E");
}
/* ── 8.1 GEEN squiggle ───────────────────────────────────────────────────
Voorstel 1 tekende een oranje golflijntje onder elke paginatitel, en dat
is gebouwd geweest. De captain heeft het op 2026-08-07 geschrapt, in
licht en in donker. Het bandenritme en de golfranden blijven; die dragen
het merk al.
Zet hem dus NIET terug omdat de designreview of de bouwbrief hem noemt -
dit besluit is later. */
/* ── 8.2 /app/routes ──────────────────────────────────────────────────────
Volgorde van de kinderen van #bbRouteCards bij deze tenant, zoals
src/tour/tenant-routes.js ze neerzet (render(), regel 780-840):
h1 band 1
.bb-dock-chooser band 2 "Vertrek vanaf"
.bb-section-label + .bb-route-cards-grid band 3 "Onze lussen met audio"
[.bb-section-label + grid per extra sectie] band 3
Exact het ritme van de mockup. */
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards{
isolation:isolate;
/* GEEN overflow-x hier. Dat is geprobeerd om een eventuele scrollbalk-
overshoot van 50vw af te vangen, en het knipt precies de banden af die
buiten deze kolom horen te lopen: gemeten kleurde de rand daarna weer
body-blauw in plaats van de bandkleur. De overshoot is hoogstens een halve
scrollbalkbreedte en wordt door de pagina zelf opgevangen; gemeten over
375 tot 1920 px met een ZICHTBARE scrollbalk is er geen horizontale
scroll. Zie audit/meet_banden_desktop.mjs. */
background:var(--cmb-band-3);
/* Band 3 is de laatste band en moet tot de onderrand van het scherm lopen,
ook als er maar een handvol kaarten staat. */
min-height:100dvh;
}
/* Band 2 begint bij de opstapkiezer. De kiezer is display:grid; een absoluut
gepositioneerd pseudo-element is per spec GEEN grid-item, dus dit verstoort
de kolomindeling niet. */
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards > .bb-dock-chooser{
position:relative;
padding-top:var(--cmb-wave-h);
}
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards > .bb-dock-chooser::before{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:-100vmax;
bottom:100%;
background:var(--cmb-band-1);
z-index:-1;
pointer-events:none;
}
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards > .bb-dock-chooser::after{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:0;
height:var(--cmb-wave-h);
background:var(--cmb-wave-1) 0 0 / 100% 100% no-repeat;
z-index:-1;
pointer-events:none;
}
/* Band 3 begint bij het eerste sectielabel (dat is het label dat de PAGINA
zelf levert; de labels van ingevoegde secties dragen data-tenant-section). */
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards > .bb-section-label:not([data-tenant-section]){
position:relative;
padding-top:var(--cmb-wave-h);
}
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards > .bb-section-label:not([data-tenant-section])::before{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:-100vmax;
bottom:100%;
background:var(--cmb-band-2);
z-index:-2;
pointer-events:none;
}
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards > .bb-section-label:not([data-tenant-section])::after{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:0;
height:var(--cmb-wave-h);
background:var(--cmb-wave-2) 0 0 / 100% 100% no-repeat;
z-index:-2;
pointer-events:none;
}
/* Alle sectielabels op de routepagina staan op band 3 en krijgen dus de
warme kicker-inkt (7,15:1 licht, 9,13:1 donker). De kicker van de
opstapkiezer staat op band 2 en houdt de navy-inkt uit blok 6. */
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-cards .bb-section-label{
color:var(--cmb-band-3-kicker);
}
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-dock-chooser-label{
color:var(--cmb-band-2-kicker);
}
/* ── 8.3 /app/meer ───────────────────────────────────────────────────────
Zichtbare secties bij deze tenant (de Captain's briefing is verborgen, zie
blok 6): Verkennen, Meer informatie, Weergave, Systeem, Contact. De
verdeling houdt het ritme van de mockup zonder zebra:
band 1 paginakop + Verkennen
band 2 Meer informatie
band 3 Weergave, Systeem, Contact - tot de onderrand
De body draagt band 3, want .mr-wrap eindigt boven de tabbalk-ruimte en
daaronder zou anders het paginavlak terugkomen. */
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap){
background:var(--cmb-band-3);
}
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-wrap{
isolation:isolate;
}
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats{
position:relative;
padding-top:var(--cmb-wave-h);
color:var(--cmb-band-2-kicker);
}
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats::before{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:-100vmax;
bottom:100%;
background:var(--cmb-band-1);
z-index:-1;
pointer-events:none;
}
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats::after{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:0;
height:var(--cmb-wave-h);
background:var(--cmb-wave-1) 0 0 / 100% 100% no-repeat;
z-index:-1;
pointer-events:none;
}
/* Band 3 begint bij het eerstvolgende gewone sectielabel na het tenant-blok.
De keten label -> lijstkaart -> label is de enige manier om "Weergave" te
raken: alle drie de onderste labels dragen dezelfde klasse en CSS kan geen
voorganger selecteren. */
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats + .mr-listcard + .mr-seclbl{
position:relative;
padding-top:var(--cmb-wave-h);
color:var(--cmb-band-3-kicker);
}
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats + .mr-listcard + .mr-seclbl::before{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:-100vmax;
bottom:100%;
background:var(--cmb-band-2);
z-index:-2;
pointer-events:none;
}
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats + .mr-listcard + .mr-seclbl::after{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:0;
height:var(--cmb-wave-h);
background:var(--cmb-wave-2) 0 0 / 100% 100% no-repeat;
z-index:-2;
pointer-events:none;
}
/* De twee labels die daarna nog komen (Systeem, Contact) staan ook op band 3. */
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-seclbl.mr-tenant-canalmotorboats + .mr-listcard + .mr-seclbl ~ .mr-seclbl{
color:var(--cmb-band-3-kicker);
}
/* ── 8.4 /app/quiz ───────────────────────────────────────────────────────
De quiz kent maar EEN inhoudsblok tegelijk (intro, vraag of uitslag), dus
hier past geen drieslag: twee banden, een golfrand. Band 1 is de strook
onder de topbalk, band 2 draagt de kaart - precies het "wit-op-band in
plaats van wit-op-wit" waar het voorstel om vraagt.
Het paginavlak was Captain: in donker een cyaan/blauwe verlooplaag
(pages/quiz.html:153-159). Die kent dit merk niet; het wordt het vlakke
bandvlak. */
html:root[data-tenant="canalmotorboats"] body.quiz-proto{
background:var(--cmb-band-2);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] body.quiz-proto{
background:var(--cmb-band-2);
}
html:root[data-tenant="canalmotorboats"] body.quiz-proto .wrap{
isolation:isolate;
}
html:root[data-tenant="canalmotorboats"] body.quiz-proto #app{
position:relative;
padding-top:var(--cmb-wave-h);
}
html:root[data-tenant="canalmotorboats"] body.quiz-proto #app::before{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:-100vmax;
bottom:100%;
background:var(--cmb-band-1);
z-index:-1;
pointer-events:none;
}
html:root[data-tenant="canalmotorboats"] body.quiz-proto #app::after{
content:"";
position:absolute;
left:var(--cmb-bleed);
right:var(--cmb-bleed);
top:0;
height:var(--cmb-wave-h);
background:var(--cmb-wave-1) 0 0 / 100% 100% no-repeat;
z-index:-1;
pointer-events:none;
}
/* ── 8.5 /fun-facts ──────────────────────────────────────────────────────
Deze pagina scrollt niet met de body: de zoekrij en de chipsrij plakken en
.iw-list is een eigen scrollvlak met een berekende hoogte. Gordijnen zijn
hier dus overbodig - elk van de drie stroken IS al een eigen vlak over de
volle breedte, dus die krijgen hun bandkleur rechtstreeks:
band 1 .iw-search-row (transparant; body draagt --iw-bg-soft)
band 2 .iw-chips
band 3 .iw-list
De golfrand van band 2 zit in de extra padding-top van de chipsrij (en
daarom staat --iw-chips-h in het --iw-blok op 70 in plaats van 50: die
hoogte zit in de height-calc van .iw-main). De golfrand van band 3 is een
background-image op .iw-list; met de standaard background-attachment blijft
die aan de rand van het scrollvlak staan en scrollt hij niet mee. */
html:root[data-tenant="canalmotorboats"] body:has(.iw-main) .iw-search-row{
border-bottom:0;
}
html:root[data-tenant="canalmotorboats"] body:has(.iw-main) .iw-chips{
position:sticky;
background:var(--iw-band-2);
border-bottom:0;
padding-top:var(--cmb-wave-h);
background-image:var(--cmb-wave-1);
background-repeat:no-repeat;
background-position:0 0;
background-size:100% var(--cmb-wave-h);
}
html:root[data-tenant="canalmotorboats"] body:has(.iw-main) .iw-list{
background:var(--iw-band-3) var(--cmb-wave-2) 0 0 / 100% var(--cmb-wave-h) no-repeat;
padding-top:calc(16px + var(--cmb-wave-h));
}
/* ── 8.6 Kaarten OP een band ─────────────────────────────────────────────
Licht: wit met een zachte schaduw en GEEN haarlijn - de band levert de
scheiding al. Donker: #0C4275 met schaduw (wit 10,23:1, #ECF0F5 8,94:1).
Sub-tekst in een
kaart erft de kleur en zakt in opacity; nergens een vaste rgba(255,255,255)
die op een licht vlak onzichtbaar wordt. */
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-route-card,
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-dock-btn,
html:root[data-tenant="canalmotorboats"] body:has(> .mr-wrap) .mr-listcard,
html:root[data-tenant="canalmotorboats"] body.quiz-proto #app > .intro,
html:root[data-tenant="canalmotorboats"] body.quiz-proto #app > .question,
html:root[data-tenant="canalmotorboats"] body:has(.iw-main) .iw-card{
background:var(--cmb-onband-card);
border-color:transparent;
box-shadow:var(--cmb-onband-shadow);
}
/* De gekozen steiger mag niet in de bandkleur vallen (de actieve tint IS
#ECF0F5, precies band 2). Hij houdt dus het kaartvlak en krijgt een ring
plus de oranje statusdot die blok 6 al zet. */
html:root[data-tenant="canalmotorboats"] body.bb-cards-mode .bb-dock-btn.is-active{
background:var(--cmb-onband-card);
border-color:transparent;
box-shadow:var(--cmb-onband-shadow), inset 0 0 0 1.5px var(--cmb-onband-ring);
}
/* De intro-kaart van de quiz droeg een eigen verloop plus een zware schaduw;
op een band is dat dubbelop. */
html:root[data-tenant="canalmotorboats"] body.quiz-proto #app > .intro{
background-image:none;
}
/* ── 8.7 De topbalk op een smal scherm ───────────────────────────────────
GEMETEN op localhost, /app/routes (de drukste balk: lockup + opstapchip +
taalpil). De rij is een flexbox met gap 12 en een .bb-header-spacer
ertussen, dus tussen lockup en knoppencluster valt 2 x 12 = 24 px.
375 px balk-inner 349, inhoudsbreedte 325
lockup 109,4 + 24 + opstapchip 99,3 + 6 + taalpil 90 = 328,7
-> 3,7 px OVER de inhoudsbreedte (de pil at de binnenmarge op)
320 px balk-inner 294, inhoudsbreedte 270
93,4 + 24 + 99,3 + 6 + 90 = 312,7
-> 42,7 px OVER: de Britse vlag werd zichtbaar afgekapt
Het woordmerk verbergen mag niet (captain-besluit 2), dus de compactie
zit in de rest van de rij.
WAT BEWUST NIET WORDT INGELEVERD: de taalpil. Zijn NL/EN-tekst staat al
site-breed op display:none (shared-prototype.css:645) - de pil is 90 px
omdat elke vlagknop `min-width:44px` draagt, en dat is de tikdoel-vloer
die de audit van 2026-07-13 als HIGH heeft afgedwongen. De ::after die
het doel vergroot rekt alleen VERTICAAL (anders overlappen de twee
vlaggen elkaar), dus de breedte krimpen betekent het tikdoel krimpen.
Dat wordt hier niet gedaan.
Onder 390 px: krappere rij-gap en een krappere opstapchip.
Onder 340 px komt daar de balk zelf bij (inzet 12 -> 8, binnenmarge
12 -> 8) plus een lockup van 26 px in plaats van 34.
GEMETEN NA DEZE REGELS (metingen.json in dezelfde map):
375 px balk-inner x=13 w=349, inhoudsrand 350,0
lockup 109,4 + opstapchip 93,3 + taalpil 90 -> eindigt op 350,0
320 px balk-inner x=9 w=302, inhoudsrand 303,0
lockup 83,7 + opstapchip 85,1 + taalpil 90 -> eindigt op 303,0
In beide gevallen dus precies binnen de rand, en op geen enkele van de vier
pagina's een horizontale overloop (document.scrollWidth == clientWidth). */
@media (max-width:389.98px){
html:root[data-tenant="canalmotorboats"] .bb-header-inner{
gap:8px;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-chip{
padding:0 9px 0 7px;
gap:5px;
}
}
@media (max-width:339.98px){
html:root[data-tenant="canalmotorboats"]{
--cmb-lockup-h:26px;
}
html:root[data-tenant="canalmotorboats"] .bb-header{
left:8px;
right:8px;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner{
padding:0 8px;
gap:6px;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-chip{
padding:0 8px 0 6px;
gap:4px;
font-size:11px;
}
}
/* ── 8.8 Het Captain-raster op de quizpagina ─────────────────────────────
pages/quiz.html:162-168 legt in donker een vast 80 px-raster van
rgba(255,255,255,0.025) over de HELE viewport (position:fixed, z-index 0).
Dat is de textuur van de Captain-tour; over een vlakke getijdenband leest
het als vuil op het glas. Dit merk kent geen raster. */
html:root[data-tenant="canalmotorboats"][data-theme="dark"] body.quiz-proto::before{
display:none;
}
/* ── 9. De legacy-tokens van de quizpagina ───────────────────────────────
pages/quiz.html draagt in zijn eigen een blok dat daar letterlijk
"Legacy token aliases retained so unmigrated rules below keep working"
heet. Het zet --navy, --navy-deep, --blue, --cyan en --gold, en tientallen
regels op die pagina hangen er nog aan. Die waarden zijn de CAPTAIN-
huisstijl, geen rol: --blue is #3366FF en --cyan is #69FEFF.
GEMETEN, niet vermoed. Op de quizpagina van deze tenant in donker telde
ik in de gerenderde schermafdruk 2781 pixels exact #69FEFF (het kompas-
embleem en de focusring van het naamveld). Reproduceer met:
python3 - <<'PY'
from PIL import Image
im = Image.open('').convert('RGB')
print(sum(1 for c in im.getdata() if c == (105, 254, 255)))
PY
Dit blok vertaalt die aliassen naar de rollen die dit merk al heeft. Het
is geen nieuwe kleurenset: elke waarde hieronder staat al in blok 1 van
dit bestand, met zijn meting.
WAAROM DIT WERKT ZONDER pages/quiz.html AAN TE RAKEN
Het blok in die pagina is een kaal `:root`, specificiteit (0,1,0). De
selector hieronder is (0,2,1) en wint dus ongeacht de documentvolgorde -
precies het verhaal uit de kop van dit bestand. */
html:root[data-tenant="canalmotorboats"]{
--navy: #07335D; /* 12,80:1 op wit */
--navy-deep: #04203A; /* het donkere paginavlak van dit merk */
--blue: #00498E; /* 8,96:1 op wit, wit erop is 8,96:1 */
--cyan: #D9E2EC; /* zelfde rol als --bb-cyan: licht accent, en het
staat op deze pagina UITSLUITEND op donkere
vlakken (9,78:1 op #07335D, 12,60:1 op #04203A) */
}
/* De literals die NIET door een var lopen. Elk van deze regels zet het
Captain-cyaan of het Captain-blauw rechtstreeks in een rgba(), dus een
token-override raakt ze niet. Ze staan hier een voor een, met het
regelnummer in pages/quiz.html waar het origineel staat - grep het na,
vertrouw dit commentaar niet. */
/* quiz.html: het embleem boven de introtitel. Licht een schaduw in
Captain-blauw, donker een vlak in Captain-cyaan. */
html:root[data-tenant="canalmotorboats"] .intro .q-emblem{
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(7,51,93,0.16);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .intro .q-emblem{
background:rgba(217,226,236,0.12);
/* De regel hierboven is (0,3,1) en zou de donkere schaduw van quiz.html
(0,3,0) overschrijven met de LICHTE inset. Daarom hier expliciet terug;
zie het kopje "de themaval" onderaan dit blok. */
box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px rgba(0,0,0,0.30);
}
/* quiz.html: de focushalo van het naamveld. LET OP: er is een aparte
donkere nodig. Zonder die tweede regel wint de lichte halo (0,3,1) van
de donkere regel in quiz.html (0,3,0), en dan staat er in donker een
ring van rgba(0,73,142,.22) op een navy veld - dat is geen zichtbare
focus meer. Gemeten voordat dit erin stond. */
html:root[data-tenant="canalmotorboats"] .name-field:focus,
html:root[data-tenant="canalmotorboats"] .name-field:focus-visible{
box-shadow:0 0 0 3px rgba(0,73,142,0.22);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .name-field:focus,
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .name-field:focus-visible{
box-shadow:var(--bb-focus-ring-on-navy);
}
/* quiz.html: de gloed op de voortgangsbalk.
De `.result::before`-gloed staat hier NIET meer bij. quiz.html:849 zet
`body.quiz-proto .result::before { display:none }` - specificiteit (0,3,1),
gelijk aan de mijne, en dat blok staat LATER in de documentvolgorde, dus
het wint. Die regels waren dood; ze zijn weg in plaats van dat ze de
volgende lezer op het verkeerde been zetten. */
html:root[data-tenant="canalmotorboats"] .progress .bar > div{
box-shadow:0 0 12px rgba(0,73,142,0.28);
}
/* DE UITSLAGKAART IS GEEN BANDKAART - EEN GEMETEN FOUT, HIER GECORRIGEERD
quiz.html:836-870 geeft `.result` een FOTO met een navy scrim eroverheen
en zet daarop alle tekst hard op wit: de begroeting, de noemer /10, de
rangpil en de uitlegzin. Blok 8.6 hierboven trok die kaart aanvankelijk
het bandkaart-recept in, dus het vlak werd #FFFFFF in licht - en toen
stond al die witte tekst op wit. Gemeten in de gerenderde pagina:
begroeting, "Jouw score", /10, de uitlegzin en de secundaire knop op
1:1, de rangpil op 1,13:1. Zie
docs/reports/cmb-getijdenbanden-2026-08-07/audit/quiz-result-canalmotorboats-light.png
De uitslagkaart staat daarom NIET meer in de selectorlijst van 8.6. Zijn
fotoscrim blijft, in beide thema's, en de inkten hieronder zijn dus altijd
inkten-op-donker. Dat is meteen de reden dat er geen lichte variant is.
Deze regels dragen `body.quiz-proto` mee, want de pagina-eigen regels doen
dat ook; zonder die extra klasse verliezen ze op documentvolgorde. */
html:root[data-tenant="canalmotorboats"] body.quiz-proto .result .score{
background:none;
-webkit-text-fill-color:currentColor;
color:#ECF0F5; /* op de navy scrim */
}
html:root[data-tenant="canalmotorboats"] body.quiz-proto .result .rank{
background:rgba(217,226,236,0.16);
color:#ECF0F5;
border-color:rgba(217,226,236,0.55);
box-shadow:0 4px 14px rgba(4,32,58,0.40);
}
/* quiz.html:540 zet het Captain-periwinkle #E5EBFF als vlak van het gekozen
antwoord. */
html:root[data-tenant="canalmotorboats"] .opt.selected{
background:#ECF0F5; /* inkt #07335D erop is 11,18:1 */
}
/* quiz.html:921 zet de rangpil in donker op #EAFEFF, een cyaan-getint wit.
Zelfde familie als het Captain-cyaan; hier de gewone lichte inkt van dit
merk (14,42:1 op #04203A). */
/* DE THEMAVAL IN DIT BLOK, EEN KEER OPGESCHREVEN
quiz.html schrijft zijn donkere varianten als `[data-theme="dark"] .x`,
specificiteit (0,3,0). Elke regel hierboven die met
`html:root[data-tenant="canalmotorboats"] .x` begint is (0,3,1) en wint
dus OOK in donker, ook als hij als lichte regel bedoeld was. Wie hier een
regel bij zet, controleert of quiz.html een donkere variant van diezelfde
eigenschap heeft, en zet die dan expliciet terug. Grep:
grep -n 'data-theme="dark"' pages/quiz.html */
/* ── 10. De routedetail-balk: een knop meer dan de metingen van blok 8.7 ──
Blok 8.7 mat de topbalk op /app/routes en kreeg hem op 375 en 320 px
precies binnen de rand. Die balk heeft drie dingen: lockup, opstapchip,
taalpil. De ROUTEDETAIL-balk (/route/) heeft er vier - er staat een
terugknop `.bb-rd-back` voor de lockup - en die is nooit gemeten.
GEMETEN op 375 px, /route/cmb-1u-zandhoek, voor deze regels:
.bb-rd-back eindigt op 59
.bb-header-brand 109 breed, eindigt op 176
.bb-header-controls 207 breed, eindigt op 399
inhoudsrand van .bb-header-inner 363
-> 36 px OVERLOOP, en document.scrollWidth bleef 375, dus er kwam geen
scrollbalk: de rechterkant van de taalpil werd stilzwijgend afgekapt.
Op de schermafdruk is de Britse vlag half weg.
Reproduceer:
open /route/cmb-1u-zandhoek?tenant=canalmotorboats op 375 px en meet
.bb-header-controls.getBoundingClientRect().right tegen
.bb-header-inner.getBoundingClientRect().right
Dezelfde meting op de andere drie tenants, ter vergelijking (merkbreedte
-> overloop): captain 50 -> -8, mokumboot 34 -> -12, sloepdelen 111 -> +61.
Sloepdelen heeft dit defect dus AL en los van dit werk; dat is gemeld, niet
hier gefixt - deze tenant-stylesheet mag geen andere tenant raken.
De oplossing verkleint de lockup op DEZE balk en haalt de gaps aan, in
plaats van de taalpil te versmallen: die zit op de tikdoel-vloer van 44 px
per vlagknop uit de HIGH-audit van 2026-07-13.
`:has()` is hier de enige poort - de routedetailpagina deelt zijn
body-klasse met de kaartpagina's. */
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back){
gap:8px;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
height:26px;
width:calc(26px * 3.2192);
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-dock-chip{
padding:0 9px 0 7px;
gap:5px;
}
/* En de ECHTE variabele: de steigernaam in de chip. Gemeten op de
routedetail-balk, 375 px: `.bb-dock-chip` is 112 px breed met
"Borneosteiger" erin (naam alleen al 82), tegen ongeveer 80 px met
"Zandhoek". De overloop hing dus af van WELKE steiger de passagier had
gekozen - "Westerdoksdijk" en "Borneosteiger" duwden de taalpil eruit,
"Zandhoek" niet. Een lockup die klein genoeg is voor de langste naam zou
het woordmerk op elke andere pagina onnodig verkleinen.
Daarom hier een harde bovengrens op de naam, met ellips. De chip blijft
aanwijsbaar, de taalpil blijft heel, en de gekozen steiger staat sowieso
groot op de pagina zelf. */
/* WAAROM HIER GEEN VASTE BREEDTE EN GEEN FORMULE STAAT
Twee eerdere versies faalden, allebei omdat ze op losse breedtes waren
getuned in plaats van op het mechanisme:
1. Een vaste 64 px plus een breekpunt op 359,98. Werkte op 375 en 320 - de
twee breedtes die gemeten waren - en liet er precies tussenin een gat:
+11 px overloop op 360, +6 op 365, +1 op 370. 360 px is de gangbare
Android-breedte.
2. Een formule `min(64px, calc(100vw - 303px))`. Nog steeds gokwerk: de
constante klopte niet (break-even ligt op 371, niet op 367) en er zijn
DRIE bereiken met verschillende inzetten - onder 340 px staat
.bb-header namelijk op left/right 8px in plaats van 12px, dus daar is
er 8 px meer ruimte. Gemeten faalde hij op 340, 360, 362, 365 en 370.
De balk is een flexbox. Het mechanisme dat hier hoort is dus KRIMP, niet
een getal: de steigernaam is het enige dat mag inleveren, en hij levert
precies zoveel in als er tekortkomt, op elke breedte, zonder dat iemand
een constante hoeft bij te houden.
.bb-header-controls mag krimpen, en geeft dat door
.bb-dock-chip mag krimpen; min-width:0 want anders houdt de
flexbox de intrinsieke minimumbreedte aan en
krimpt hij niet
.bb-dock-chip-name krimpt en kapt af met een ellips
.bb-lang-pill krimpt NIET: 44 px per vlagknop is de tikdoel-vloer
uit de HIGH-audit van 2026-07-13
.bb-header-brand krimpt niet; het woordmerk mag niet weg
(captain-besluit 2)
Geverifieerd over vijftien breedtes van 320 tot 430 en in beide
chip-toestanden (gekozen steiger en "Alle routes") met
docs/reports/cmb-getijdenbanden-2026-08-07/audit/meet_balk_breedtes.mjs */
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-header-controls{
flex:0 1 auto;
min-width:0;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-dock-chip{
flex:0 1 auto;
min-width:0;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-dock-chip-name{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-lang-pill{
flex:0 0 auto;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-header-brand{
flex:0 0 auto;
}
/* Onder 360 px krimpt de lockup mee, zodat de steigernaam niet als eerste
tot een enkele letter wordt teruggebracht. */
@media (max-width:359.98px){
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
height:22px;
width:calc(22px * 3.2192);
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back){
gap:6px;
}
}
/* DE UITSLAGKAART IS GEEN BANDKAART - EEN GEMETEN FOUT, HIER GECORRIGEERD
quiz.html:836-870 geeft `.result` een FOTO met een navy scrim eroverheen
en zet daarop alle tekst hard op wit: de begroeting, de noemer /10, de
rangpil en de uitlegzin. Blok 8.6 hierboven trok die kaart aanvankelijk
het bandkaart-recept in, dus het vlak werd #FFFFFF in licht - en toen
stond al die witte tekst op wit. Gemeten in de gerenderde pagina:
begroeting, "Jouw score", /10, de uitlegzin en de secundaire knop op
1:1, de rangpil op 1,13:1. Zie
docs/reports/cmb-getijdenbanden-2026-08-07/audit/quiz-result-canalmotorboats-light.png
De uitslagkaart staat daarom NIET meer in de selectorlijst van 8.6. Zijn
fotoscrim blijft, in beide thema's, en de inkten hieronder zijn dus altijd
inkten-op-donker. Dat is meteen de reden dat er geen lichte variant is.
Deze regels dragen `body.quiz-proto` mee, want de pagina-eigen regels doen
dat ook; zonder die extra klasse verliezen ze op documentvolgorde. */
html:root[data-tenant="canalmotorboats"] body.quiz-proto .result .score{
background:none;
-webkit-text-fill-color:currentColor;
color:#ECF0F5; /* op de navy scrim */
}
html:root[data-tenant="canalmotorboats"] body.quiz-proto .result .rank{
background:rgba(217,226,236,0.16);
color:#ECF0F5;
border-color:rgba(217,226,236,0.55);
box-shadow:0 4px 14px rgba(4,32,58,0.40);
}
/* quiz.html:540 zet het Captain-periwinkle #E5EBFF als vlak van het gekozen
antwoord. */
html:root[data-tenant="canalmotorboats"] .opt.selected{
background:#ECF0F5; /* inkt #07335D erop is 11,18:1 */
}
/* quiz.html:921 zet de rangpil in donker op #EAFEFF, een cyaan-getint wit.
Zelfde familie als het Captain-cyaan; hier de gewone lichte inkt van dit
merk (14,42:1 op #04203A). */
/* DE THEMAVAL IN DIT BLOK, EEN KEER OPGESCHREVEN
quiz.html schrijft zijn donkere varianten als `[data-theme="dark"] .x`,
specificiteit (0,3,0). Elke regel hierboven die met
`html:root[data-tenant="canalmotorboats"] .x` begint is (0,3,1) en wint
dus OOK in donker, ook als hij als lichte regel bedoeld was. Wie hier een
regel bij zet, controleert of quiz.html een donkere variant van diezelfde
eigenschap heeft, en zet die dan expliciet terug. Grep:
grep -n 'data-theme="dark"' pages/quiz.html */
/* ── 10. De routedetail-balk: een knop meer dan de metingen van blok 8.7 ──
Blok 8.7 mat de topbalk op /app/routes en kreeg hem op 375 en 320 px
precies binnen de rand. Die balk heeft drie dingen: lockup, opstapchip,
taalpil. De ROUTEDETAIL-balk (/route/) heeft er vier - er staat een
terugknop `.bb-rd-back` voor de lockup - en die is nooit gemeten.
GEMETEN op 375 px, /route/cmb-1u-zandhoek, voor deze regels:
.bb-rd-back eindigt op 59
.bb-header-brand 109 breed, eindigt op 176
.bb-header-controls 207 breed, eindigt op 399
inhoudsrand van .bb-header-inner 363
-> 36 px OVERLOOP, en document.scrollWidth bleef 375, dus er kwam geen
scrollbalk: de rechterkant van de taalpil werd stilzwijgend afgekapt.
Op de schermafdruk is de Britse vlag half weg.
Reproduceer:
open /route/cmb-1u-zandhoek?tenant=canalmotorboats op 375 px en meet
.bb-header-controls.getBoundingClientRect().right tegen
.bb-header-inner.getBoundingClientRect().right
Dezelfde meting op de andere drie tenants, ter vergelijking (merkbreedte
-> overloop): captain 50 -> -8, mokumboot 34 -> -12, sloepdelen 111 -> +61.
Sloepdelen heeft dit defect dus AL en los van dit werk; dat is gemeld, niet
hier gefixt - deze tenant-stylesheet mag geen andere tenant raken.
De oplossing verkleint de lockup op DEZE balk en haalt de gaps aan, in
plaats van de taalpil te versmallen: die zit op de tikdoel-vloer van 44 px
per vlagknop uit de HIGH-audit van 2026-07-13.
`:has()` is hier de enige poort - de routedetailpagina deelt zijn
body-klasse met de kaartpagina's. */
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back){
gap:8px;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
height:26px;
width:calc(26px * 3.2192);
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-dock-chip{
padding:0 9px 0 7px;
gap:5px;
}
/* En de ECHTE variabele: de steigernaam in de chip. Gemeten op de
routedetail-balk, 375 px: `.bb-dock-chip` is 112 px breed met
"Borneosteiger" erin (naam alleen al 82), tegen ongeveer 80 px met
"Zandhoek". De overloop hing dus af van WELKE steiger de passagier had
gekozen - "Westerdoksdijk" en "Borneosteiger" duwden de taalpil eruit,
"Zandhoek" niet. Een lockup die klein genoeg is voor de langste naam zou
het woordmerk op elke andere pagina onnodig verkleinen.
Daarom hier een harde bovengrens op de naam, met ellips. De chip blijft
aanwijsbaar, de taalpil blijft heel, en de gekozen steiger staat sowieso
groot op de pagina zelf. */
/* WAAROM DIT EEN FORMULE IS EN GEEN VAST GETAL
De eerste versie zette hier 64 px en liet de rest aan een breekpunt op
359,98 over. Dat werkte op 375 en op 320 - de twee breedtes die gemeten
waren - en liet er precies tussenin een gat: op 360 px liep de balk weer
11 px over, op 365 nog 6, op 370 nog 1. 360 px is de gangbare
Android-breedte, dus dat gat is niet theoretisch.
De naam schaalt daarom mee met de viewport. Op 375 blijft hij 64 px (de
balk heeft daar 8 px speling, dus de speling raakt op bij 367); onder die
breedte krimpt hij een-op-een mee.
Meet het na op elke breedte, niet alleen op de ronde getallen:
.bb-header-controls.getBoundingClientRect().right
tegen .bb-header-inner.getBoundingClientRect().right */
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-dock-chip-name{
max-width:min(64px, calc(100vw - 303px));
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Onder 360 px komt er ruimte bij doordat de lockup en de gaps krimpen, dus
daar hoort een eigen, ruimere formule. Die dekt in een keer tot 320 px; het
aparte breekpunt op 340 dat hier eerst stond is daarmee overbodig. */
@media (max-width:359.98px){
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-header-brand::before{
height:22px;
width:calc(22px * 3.2192);
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back){
gap:6px;
}
html:root[data-tenant="canalmotorboats"] .bb-header-inner:has(.bb-rd-back) .bb-dock-chip-name{
max-width:min(56px, calc(100vw - 276px));
}
}
/* ── 11. Geen paginascrim over een KAART ─────────────────────────────────
styles/safe-area-polish.css zet een vaste `body::after` bovenaan het
scherm: een strook in --bb-bg-page die naar transparant vervaagt, zodat
paginainhoud niet onder de statusbalk doorloopt. Op een gewone pagina is
dat precies goed.
Op de twee KAARTpagina's is het dat niet. Daar loopt de kaart tot de
bovenrand door en is er geen tekst om af te dekken, dus het enige wat de
scrim doet is een navy verloop over een lichte kaart leggen. De captain
zag dat op zijn toestel en noemde het lelijk (2026-08-07); weg dus.
De statusbalk blijft leesbaar: die staat op deze pagina's al op zijn eigen
ondoorzichtige vlak (zie het blok over .vi-stage en .vv-stage hierboven,
dat het paspoortnavy in beide thema's zet).
LET OP: dit is een GEDEELDE regel, dus captain, sloepdelen en mokumboot
hebben dezelfde scrim over hun kaartpagina's. Dat is gemeld, niet hier
gefixt - deze stylesheet mag geen andere tenant raken. */
html:root[data-tenant="canalmotorboats"] body:has(.vi-stage)::after,
html:root[data-tenant="canalmotorboats"] body:has(.vv-stage)::after{
display:none;
}