/* ════════════════════════════════════════════════════════════════════════
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);
}
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);
}
/* 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 - EEN AFGELEIDE, GEEN METING AAN HET EINDBESTAND. Een pseudo-element
leidt geen intrinsieke verhouding af uit een background-image, dus de
breedte moet er hard staan. Op het moment van schrijven bestond
/assets/whitelabel/canalmotorboats-logo.svg nog niet (die maakt de
assets-pijplijn). De verhouding komt daarom van het BRONbestand
assets/whitelabel/canalmotorboats-src-logo-full.png, gemeten met sips:
936 x 345 px = 2,7130:1. Op 26 px hoog is dat 70,5 px, afgerond 71.
Dat is ruim: de topbalk-inner is viewport minus 48, de knoppencluster is
195 px en de terugchip 34 px, dus zelfs op de route-detail bij 375 px
(inner 327) blijft 71 + 12 + 34 + 12 + 195 = 324 net binnen de balk. Toch
staat het breekpunt op 479,98 px hieronder: zodra de assets-pijplijn een
BREDER, alleen-woordmerk-lockup oplevert klopt de som niet meer, en de
vierkante mark (viewBox 0 0 512 512, dus exact 1:1) is dan de veilige val.
HERMEET DEZE TWEE REGELS zodra de definitieve SVG er is. */
html:root[data-tenant="canalmotorboats"] .bb-header-brand::before{
width:71px;
height:26px;
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");
}
@media (max-width:479.98px){
html:root[data-tenant="canalmotorboats"] .bb-header-brand::before{
width:34px;
height:34px;
background-image:url("/assets/whitelabel/canalmotorboats-mark-light.svg");
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-header-brand::before{
background-image:url("/assets/whitelabel/canalmotorboats-mark-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{
/* Twee rijen: het label op een eigen regel, daaronder de knoppen naast
elkaar. Een enkele flexrij liet het label op 375 px de eerste knop naar
rechts duwen en de tweede eronder vallen. */
display:grid;
grid-template-columns:1fr 1fr auto;
align-items:stretch;
gap:10px;
margin:0 0 22px;
}
html:root[data-tenant="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;
}
@media (max-width:420px){
html:root[data-tenant="canalmotorboats"] .bb-dock-chooser{
grid-template-columns:1fr 1fr;
}
html:root[data-tenant="canalmotorboats"] .bb-dock-clear{ grid-column:1 / -1; justify-self:start; }
}
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%);
}
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;
}
/* De cover-SVG tekent ook een gloed-cirkel met fill rgba(105,254,255,0.15) -
Captain-cyaan, hard in src/shared/route-cover.js. Die zit op een
ZONDER fill-attribuut in de DOM (het staat in de gegenereerde SVG-string),
dus de attribuutselectors hierboven vangen hem niet. Beide thema's, want de
donkere variant heeft dezelfde cirkel. */
html:root[data-tenant="canalmotorboats"] .bb-route-card-cover svg circle[fill^="rgba(105"],
html:root[data-tenant="canalmotorboats"] .bb-route-card-cover svg circle[fill="#69FEFF"]{
fill:rgba(0, 73, 142, 0.12);
}
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg circle[fill^="rgba(105"],
html:root[data-tenant="canalmotorboats"][data-theme="dark"] .bb-route-card-cover svg circle[fill="#69FEFF"]{
fill:rgba(217, 226, 236, 0.14);
}