/* ════════════════════════════════════════════════════════════════════════
tenant-sloepdelen.css - white-label token-override voor de Sloepdelen-editie
────────────────────────────────────────────────────────────────────────
Alles hieronder hangt onder `html:root[data-tenant="sloepdelen"]`, gezet
door src/shared/tenant.js voor de eerste paint. Zonder dat attribuut is dit
bestand een complete no-op: de Captain-site verandert niet.
WAAROM `html:root[data-tenant=...]` EN NIET `:root[data-tenant=...]`
-------------------------------------------------------------------
`:root[data-theme="dark"]` in styles/shared-prototype.css heeft
specificiteit (0,2,0). Een gelijk-specifieke tenant-selector zou van
DOCUMENTVOLGORDE afhangen, en meerdere pagina's (index.html, status.html)
dragen hun tokens INLINE in - daar is de volgorde niet te
garanderen. `html:root[...]` telt het element mee en komt op (0,2,1), dus
deze regels winnen altijd, ongeacht waar het -element staat.
BRON VAN DE KLEUREN: het GEMETEN merkpaspoort in
docs/whitelabel-research-2026-06.md sectie 7.4, en de ontwerpreferentie
docs/whitelabel-proto-sloepdelen.html:14-19.
#003366 navy merk: koppen, woordmerk, outline-knoppen
#4286C6 logoblauw de cirkel in het woordmerk
#3788D8 UI-blauw secundaire actie, links, kaartaccent
#5EC313 groen PRIMAIRE actie (nooit omdraaien met blauw)
#E7F1F8 tint licht sectievlak
#0B1533 diepnavy donker vlak / overlay / footer
CONTRAST (huisregel: witte tekst alleen onder 25% lightness)
------------------------------------------------------------
Wit op #5EC313 haalt 2,26:1 - ruim onvoldoende. De primaire CTA krijgt
daarom diepnavy #0B1533 op groen: 7,9:1. Wit op #3788D8 is 3,7:1 en dus
ook niet gebruikt voor tekstvlakken; UI-blauw blijft lijn-, link- en
accentkleur.
WAT DIT NIET DEKT - lees dit voordat je "de app is Sloepdelen" zegt
-------------------------------------------------------------------
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 - vooral de live-tour-chrome, de kaartstijlen en oudere
pagina-CSS - blijven Captain-blauw tot de aparte tokenisatiefase.
════════════════════════════════════════════════════════════════════════ */
/* ── Self-hosted merkfonts ────────────────────────────────────────────────
Zelfde aanpak als styles/fonts.css voor Libre Franklin: geen render-
blokkerende round-trip naar fonts.googleapis.com, werkt offline in de PWA
en scheelt een externe host in de CSP-discussie. Latin-subset, direct van
de Google Fonts CDN gehaald op 2026-08-01 (Poppins v24, Roboto v51).
Poppins is GEEN variabele font op Google Fonts - vandaar drie losse
gewichten (500 knoppen, 600 tussenkoppen, 700 koppen). Roboto is dat wel:
een bestand dekt de hele as 100-900.
De @font-face-regels staan bewust BUITEN de tenant-selector (dat kan niet
anders, @font-face is niet nestbaar onder een selector). Ze kosten niets:
een browser downloadt een font pas als een element het daadwerkelijk
gebruikt, en dat gebeurt alleen onder [data-tenant="sloepdelen"]. */
@font-face{
font-family:'Poppins';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('/assets/fonts/poppins-500-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:'Poppins';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('/assets/fonts/poppins-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;
}
@font-face{
font-family:'Poppins';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('/assets/fonts/poppins-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:'Roboto';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('/assets/fonts/roboto-variable-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="sloepdelen"],
html:root[data-tenant="sloepdelen"][data-theme="light"]{
/* Merkkleuren */
--bb-navy: #003366;
--bb-blue: #3788D8;
--bb-cyan: #8CC4EC; /* licht accent op donkere vlakken; merk kent geen cyaan */
--bb-red: #D6432B; /* systeemrood, iets warmer zodat het naast navy niet gilt */
/* Nieuw: de actiekleur. Groen = doen, blauw = navigeren. Nooit omdraaien. */
--bb-action: #5EC313;
--bb-action-ink: #2E6605; /* donkere zelfde-tint tekst OP een groene tint */
--bb-action-tint: #E9F7DC; /* zachte groentint als blokachtergrond */
--bb-action-on: #0B1533; /* tekstkleur OP het verzadigde groen (7,9:1) */
--bb-logo-blue: #4286C6;
--bb-deep: #0B1533;
/* Vlakken en inkt */
--bb-bg-page: #EFF5FA;
--bb-bg-card: #FFFFFF;
--bb-bg-tinted: #E7F1F8;
--bb-bg-elevated:#F5FAFD;
--bb-bg-shadow: rgba(11, 21, 51, 0.08);
--bb-card-bg: #FFFFFF;
--bb-elev-bg: #DCEAF4;
--bb-offwhite: #EFF5FA;
--bb-fg-default: #16283C;
--bb-fg-muted: rgba(11, 21, 51, 0.62);
--bb-fg-subtle: rgba(11, 21, 51, 0.42);
--bb-fg-faint: rgba(11, 21, 51, 0.34);
--bb-text: #16283C;
--bb-muted: #4A5A6B;
--bb-border: rgba(11, 21, 51, 0.10);
--bb-border-subtle: #DCE6EF;
--bb-shadow: 0 4px 16px rgba(11, 21, 51, 0.10);
/* Tinten - zacht, nooit verzadigd als blokachtergrond (huisregel) */
--bb-accent-blue-tint: #E7F1F8;
--bb-accent-green-tint: #E9F7DC;
--bb-accent-red-tint: #FBE6E2;
--bb-accent-amber-tint: #FFF4D6;
--bb-accent-purple-tint:#EAE6F5;
--bb-light-blue: #E7F1F8;
--bb-red-tint: #FBE6E2;
--bb-warning-tint: #FFF4D6;
/* Inkt-op-tint paren */
--bb-ink-blue: #003366;
--bb-ink-green: #2E6605;
--bb-ink-red: #7A1D0F;
--bb-ink-amber: #5C3A00;
--bb-ink-purple: #3D2A6B;
--bb-red-text: #7A1D0F;
--bb-warning-text: #5C3A00;
/* Accentdots / badges */
--bb-acc-blue: #3788D8;
--bb-acc-green: #4EA80F;
--bb-acc-red: #D6432B;
--bb-acc-amber: #B45309;
--bb-acc-purple: #6247A8;
--bb-success: #2E7D18;
--bb-warning: #C25708;
--bb-warning-accent: #B45309;
--bb-blue-active:#2E74BC;
/* Verbindingsstatus-balk */
--bb-conn-navy: #0B1533;
--bb-conn-cyan: #8CC4EC;
--bb-conn-green: #5EC313;
/* Focusring - UI-blauw in plaats van Captain-blauw */
--bb-focus-ring: 0 0 0 3px rgba(55, 136, 216, 0.22);
--bb-focus-ring-on-navy: 0 0 0 3px rgba(140, 196, 236, 0.28);
/* Glas (licht = frosted wit met navy inkt) */
--bb-glass-shadow: 0 14px 44px rgba(11, 21, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.70);
--bb-glass-ink: #16283C;
--bb-glass-ink-muted: rgba(11, 21, 51, 0.66);
--bb-glass-ink-faint: rgba(11, 21, 51, 0.46);
--bb-glass-hairline: rgba(11, 21, 51, 0.10);
/* Altijd-donker glas (kaartlegenda's, live-tour-paneel) */
--bb-glass-dark-bg: rgba(11, 21, 51, 0.72);
--bb-glass-dark-border: rgba(140, 196, 236, 0.30);
--bb-glass-dark-accent: #8CC4EC;
/* Typografie. Roboto voor lopende tekst, Poppins voor koppen en knoppen. */
--bb-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bb-font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Knoppenradius uit het merkpaspoort (Captain gebruikt 0). */
--bb-btn-radius: 4px;
}
/* ── DONKER ───────────────────────────────────────────────────────────────
Basis is het diepnavy #0B1533 uit het paspoort: de pagina zakt eronder,
kaarten liggen erboven. */
html:root[data-tenant="sloepdelen"][data-theme="dark"]{
--bb-bg-page: #060B1C;
--bb-bg-card: #132244;
--bb-bg-tinted: rgba(55, 136, 216, 0.16);
--bb-bg-elevated:#16264A;
--bb-bg-shadow: rgba(0, 0, 0, 0.32);
--bb-card-bg: #132244;
--bb-elev-bg: #1B2C52;
--bb-offwhite: #0B1533;
--bb-fg-default: #E7F1F8;
--bb-fg-muted: rgba(231, 241, 248, 0.72);
--bb-fg-subtle: rgba(231, 241, 248, 0.50);
--bb-fg-faint: rgba(231, 241, 248, 0.40);
--bb-text: #E7F1F8;
--bb-muted: rgba(231, 241, 248, 0.65);
--bb-border: rgba(231, 241, 248, 0.12);
--bb-border-subtle: rgba(231, 241, 248, 0.10);
--bb-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
--bb-accent-blue-tint: rgba(55, 136, 216, 0.20);
--bb-accent-green-tint: rgba(94, 195, 19, 0.18);
--bb-accent-red-tint: rgba(214, 67, 43, 0.18);
--bb-accent-amber-tint: rgba(180, 115, 9, 0.24);
--bb-accent-purple-tint:rgba(98, 71, 168, 0.24);
--bb-light-blue: rgba(55, 136, 216, 0.20);
--bb-red-tint: rgba(214, 67, 43, 0.18);
/* Op donker draaien de inkt-op-tint paren om naar de LICHTE zelfde-tint. */
--bb-ink-blue: #B9D8F2;
--bb-ink-green: #C6EBA0;
--bb-ink-red: #FFC2B6;
--bb-ink-amber: #FFD98A;
--bb-ink-purple: #CDBDF0;
--bb-red-text: #FFC2B6;
--bb-action-ink: #C6EBA0;
--bb-action-tint:rgba(94, 195, 19, 0.18);
--bb-focus-ring: 0 0 0 3px rgba(140, 196, 236, 0.24);
--bb-glass-bg: rgba(11, 21, 51, 0.74);
--bb-glass-border: rgba(140, 196, 236, 0.30);
--bb-glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--bb-glass-ink: rgba(231, 241, 248, 0.94);
--bb-glass-ink-muted: rgba(231, 241, 248, 0.66);
--bb-glass-ink-faint: rgba(231, 241, 248, 0.46);
--bb-glass-hairline: rgba(255, 255, 255, 0.12);
--bb-glass-accent: #8CC4EC;
--bb-glass-dark-ink: rgba(231, 241, 248, 0.94);
--bb-glass-dark-ink-muted: rgba(231, 241, 248, 0.66);
--bb-glass-dark-ink-faint: rgba(231, 241, 248, 0.46);
}
/* ── Typografie toepassen ────────────────────────────────────────────────
Alleen de FAMILIE wisselt. De gewichten van de app blijven staan: het
merkpaspoort schrijft Roboto 300 voor lopende tekst voor, maar 300 op elk
UI-label van 11-13 px maakt de interface dun en slecht leesbaar op een
telefoon in fel zonlicht op het water. Koppen en knoppen krijgen wel de
voorgeschreven Poppins-gewichten. */
html:root[data-tenant="sloepdelen"] h1,
html:root[data-tenant="sloepdelen"] h2,
html:root[data-tenant="sloepdelen"] h3,
html:root[data-tenant="sloepdelen"] h4{
font-family:var(--bb-font-head);
font-weight:700;
letter-spacing:-0.01em;
/* Merkpaspoort: koppen staan in het woordmerk-navy. In donkere modus zou
#003366 op #060B1C wegvallen, dus daar de lichte zelfde-tint. */
color:var(--bb-navy);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] h1,
html:root[data-tenant="sloepdelen"][data-theme="dark"] h2,
html:root[data-tenant="sloepdelen"][data-theme="dark"] h3,
html:root[data-tenant="sloepdelen"][data-theme="dark"] h4{
color:var(--bb-fg-default);
}
/* Koppen OP de donkere systeemchroom (topbalk, tabbalk, navy panelen) erven
hun kleur bewust van de ouder; de regel hierboven mag daar niet overheen. */
html:root[data-tenant="sloepdelen"] .bb-header h1,
html:root[data-tenant="sloepdelen"] .bb-header h2,
html:root[data-tenant="sloepdelen"] .bb-header h3,
html:root[data-tenant="sloepdelen"] .bb-mobile-nav h3{
color:inherit;
}
html:root[data-tenant="sloepdelen"] h5,
html:root[data-tenant="sloepdelen"] h6{
font-family:var(--bb-font-head);
font-weight:600;
}
/* ── Knoppen: de ACTIEGRAMMATICA ─────────────────────────────────────────
Ontwerpreview r2 "Proposal 3", bevinding W2. Groen = doen, blauw =
navigeren, nooit omdraaien. Een verzadigde groene knop per scherm; een
tweede actie wordt de outline-variant.
Tekst op groen is diepnavy #0B1533 (--bb-action-on), in BEIDE modi. Wit op
#5EC313 haalt 2,26:1 en zakt door de huisregel; diepnavy haalt 7,9:1. De
token staat in de LICHT-groep hierboven, waarvan de eerste selector
themaloos is - dus hij geldt ook in donkere modus, en de knop hoeft geen
dark-variant.
Wat hier verandert ten opzichte van de vorige versie: Captains uppercase +
0,08em tracking gaan eruit (het merkpaspoort schrijft sentence case voor,
en de bronstring is al "Start de vaartocht"), en maat, padding en schaduw
komen letterlijk uit de prototype-CTA
(docs/whitelabel-proto-sloepdelen.html:213-219). */
html:root[data-tenant="sloepdelen"] .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:500;
font-size:16px;
line-height:1.15;
letter-spacing:normal;
text-transform:none;
padding:15px 20px;
box-shadow:
0 8px 22px rgba(94, 195, 19, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html:root[data-tenant="sloepdelen"] .bb-cta:hover{
box-shadow:
0 12px 28px rgba(94, 195, 19, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
/* De route-detail-CTA leeft in de bb-sheet, en die schaalt hem met
!important terug naar radius 14 / 700 14px Libre Franklin
(src/tour/tour.css:1428-1434). Alleen daarom staat hier !important: zonder
die twee regels wint de sheet en blijft de knop Captain-vormig. De rest
heeft genoeg aan specificiteit (0,4,1 tegen 0,2,0). */
html:root[data-tenant="sloepdelen"] .bbs .rd-cta{
border-radius:var(--bb-btn-radius) !important;
font:500 16px/1.15 var(--bb-font-head) !important;
letter-spacing:normal;
text-transform:none;
padding:15px 20px;
box-shadow:
0 8px 22px rgba(94, 195, 19, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Secundair: 1 px outline, transparant vlak, navy in licht en de lichte
zelfde-tint in donker. Maat uit .btn-outline in het prototype (:220-226). */
html:root[data-tenant="sloepdelen"] .bb-cta-secondary{
background:transparent;
color:var(--bb-navy);
border:1px solid var(--bb-navy);
border-radius:var(--bb-btn-radius);
font-family:var(--bb-font-head);
font-weight:500;
font-size:13.5px;
letter-spacing:normal;
text-transform:none;
padding:10px 18px;
box-shadow:none;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-cta-secondary{
color:var(--bb-ink-blue);
border-color:var(--bb-ink-blue);
}
html:root[data-tenant="sloepdelen"] .bb-cta-secondary:hover{
background:var(--bb-accent-blue-tint);
box-shadow:none;
}
/* ── De bb-sheet onder de tenant ─────────────────────────────────────────
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 - precies de "blauw = navigeren"-rol uit het paspoort. Hier
gaan die drie tokens naar de merkkleuren, dan volgt de hele sheet vanzelf
en hoeft geen enkele losse regel nagelopen te worden.
Specificiteit: (0,2,1) resp. (0,3,1) tegen :root[data-theme] (0,2,0). */
html:root[data-tenant="sloepdelen"]{
--bbs-accent: #8CC4EC;
--bbs-chip-cyan-bg: rgba(140, 196, 236, 0.16);
--bbs-chip-cyan-fg: #8CC4EC;
}
html:root[data-tenant="sloepdelen"][data-theme="light"]{
--bbs-accent: #3788D8;
--bbs-chip-cyan-bg: rgba(55, 136, 216, 0.12);
--bbs-chip-cyan-fg: #3788D8;
}
/* Statchips in de routekop (5,0 km - 1 uur - 24 hoogtepunten). Het
ontwerpreview tekent ze als kaartjes, niet als pillen: wit vlak,
haarlijnrand, radius 10, Poppins 600 in het woordmerk-navy. */
html:root[data-tenant="sloepdelen"] .bbs .bbs-chip{
font-family:var(--bb-font-head);
font-weight:600;
font-size:12.5px;
letter-spacing:normal;
border-radius:10px;
padding:7px 12px;
font-variant-numeric:tabular-nums;
}
html:root[data-tenant="sloepdelen"][data-theme="light"] .bbs .bbs-chip{
background:#FFFFFF;
border:1px solid rgba(11, 21, 51, 0.10);
color:#003366;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bbs .bbs-chip{
background:rgba(255, 255, 255, 0.06);
border:1px solid rgba(231, 241, 248, 0.12);
color:#E7F1F8;
}
/* ════════════════════════════════════════════════════════════════════════
SYSTEEMCHROOM - licht Liquid Glass (ontwerpreview "Proposal 1", W1)
────────────────────────────────────────────────────────────────────────
Captain draait BEIDE balken als donker rooknavy met cyaan gloedringen. Het
Sloepdelen-paspoort kent geen cyaan en geen donker chroom op een lichte
pagina. Deze sectie vervangt de vorige tenant-overrides (die alleen het
navy verschoven) door het recept uit het prototype:
docs/whitelabel-proto-sloepdelen.html topbalk :76-105, tabbalk :107-132.
Donker is GEEN omkering maar een eigen opgave: dezelfde geometrie in
diepnavy glas met een lichtblauwe 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, die de
native balk juist vervangt zodra de native versie actief is.
════════════════════════════════════════════════════════════════════════ */
/* ── Topbalk ──────────────────────────────────────────────────────────────
Hoogte staat hier expliciet op 60 px MET border-box. Zonder dat meet de
balk 62: .bb-header-inner is 60 hoog en Chrome rondt de 0,5 px rand naar
boven af aan beide kanten. Het prototype meet 60 in totaal. */
html:root[data-tenant="sloepdelen"] .bb-header{
box-sizing:border-box;
height:60px;
border-radius:22px;
}
html:root[data-tenant="sloepdelen"] .bb-header-inner{
height:100%;
gap:12px;
padding:0 12px;
}
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-header{
background:rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border:0.5px solid rgba(11, 21, 51, 0.10);
box-shadow:
0 8px 30px rgba(11, 21, 51, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
color:var(--bb-navy);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-header{
background:rgba(11, 21, 51, 0.78);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border:0.5px solid rgba(140, 196, 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:#E7F1F8;
}
/* 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="sloepdelen"][data-theme="light"] .bb-header{
background:rgba(255, 255, 255, 0.94);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-header{
background:rgba(11, 21, 51, 0.96);
}
}
/* Paginatitel en scheidingslijn stonden op wit-op-navy. Op het lichte glas
is dat onleesbaar; ze volgen nu de inkt van de balk. */
html:root[data-tenant="sloepdelen"] .bb-header-title{
font-family:var(--bb-font-head);
font-weight:600;
font-size:15px;
color:inherit;
}
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-header-divider{
background:rgba(11, 21, 51, 0.18);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-header-divider{
background:rgba(140, 196, 236, 0.28);
}
/* ── Woordmerk in de merkslot (ontwerpreview "Proposal 2", W5) ────────────
Het zichtbare merk in de header is GEEN maar de background-image van
.bb-header-brand::before (styles/shared-prototype.css:456-462); 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 staat hard op 111 px: 24 px hoog maal de beeldverhouding van het
logo (1245,2 / 269,3 = 4,6238). Een pseudo-element leidt geen intrinsieke
verhouding af uit een background-image, dus dat getal moet er staan. */
html:root[data-tenant="sloepdelen"] .bb-header-brand::before{
width:111px;
height:24px;
border-radius:0;
background:url("/assets/whitelabel/sloepdelen-logo.svg") left center / contain no-repeat;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-header-brand::before{
background-image:url("/assets/whitelabel/sloepdelen-logo-dark.svg");
}
/* Onder 360 px klapt het woordmerk terug naar het cirkelmerk. Standaard
responsief-logo-patroon; op een 320 px toestel vreet het volledige logo
anders de halve balk op. */
@media (max-width:359.98px){
html:root[data-tenant="sloepdelen"] .bb-header-brand::before{
width:24px;
background-image:url("/assets/whitelabel/sloepdelen-mark-light.svg");
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-header-brand::before{
background-image:url("/assets/whitelabel/sloepdelen-mark-dark.svg");
}
}
/* ── Terugknop ────────────────────────────────────────────────────────────
Captain tekent hem als navy schijf met een cyaan ring en cyaan chevron.
Het prototype (.tb-back, :88-96) tekent een 34 px cirkel met een navy
rand op wit glas. De cyaan familie verdwijnt hier volledig. */
html:root[data-tenant="sloepdelen"] .bb-back,
html:root[data-tenant="sloepdelen"] .bb-rd-back{
background:rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
border:1.5px solid rgba(0, 51, 102, 0.45);
box-shadow:none;
color:var(--bb-navy);
}
html:root[data-tenant="sloepdelen"] .bb-back svg,
html:root[data-tenant="sloepdelen"] .bb-rd-back svg{
stroke:currentColor;
}
html:root[data-tenant="sloepdelen"] .bb-back:hover,
html:root[data-tenant="sloepdelen"] .bb-rd-back:hover{
border-color:rgba(0, 51, 102, 0.70);
box-shadow:0 2px 8px rgba(11, 21, 51, 0.16);
}
html:root[data-tenant="sloepdelen"] .bb-back:focus-visible,
html:root[data-tenant="sloepdelen"] .bb-rd-back:focus-visible{
outline:2px solid var(--bb-blue);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-back,
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-rd-back{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(140, 196, 236, 0.45);
color:#E7F1F8;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-back:hover,
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-rd-back:hover{
border-color:rgba(140, 196, 236, 0.75);
box-shadow:none;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-back:focus-visible,
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-rd-back:focus-visible{
outline-color:var(--bb-cyan);
}
/* ── Taalpil ──────────────────────────────────────────────────────────────
De schuivende duim droeg een cyaan gloed (shared-prototype.css:595-608).
Op wit glas wordt dat een witte lens met een navy haarlijn, precies zoals
de actieve tab hieronder - een gloedloze glasfamilie. */
html:root[data-tenant="sloepdelen"] .bb-lang-pill{
background:rgba(255, 255, 255, 0.55);
border:0.5px solid rgba(11, 21, 51, 0.10);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html:root[data-tenant="sloepdelen"] .bb-lang-pill::before{
background:rgba(255, 255, 255, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 1px 6px rgba(11, 21, 51, 0.10);
}
html:root[data-tenant="sloepdelen"] .bb-lang-btn{
color:rgba(11, 21, 51, 0.56);
}
html:root[data-tenant="sloepdelen"] .bb-lang-btn.active,
html:root[data-tenant="sloepdelen"] .bb-lang-btn:hover{
color:var(--bb-navy);
}
html:root[data-tenant="sloepdelen"] .bb-lang-btn:focus-visible{
outline:2px solid var(--bb-blue);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-lang-pill{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(140, 196, 236, 0.28);
}
html:root[data-tenant="sloepdelen"][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="sloepdelen"][data-theme="dark"] .bb-lang-btn{
color:rgba(231, 241, 248, 0.55);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-lang-btn.active,
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-lang-btn:hover{
color:#E7F1F8;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-lang-btn:focus-visible{
outline-color:var(--bb-cyan);
}
/* ── Opstap-chip in de topbalk ────────────────────────────────────────────
Gebouwd door src/tour/tenant-routes.js op de Routes-pagina, naar het
prototype (.dock-chip, :97-105) en de mockups in het ontwerpreview. Toont
vanaf welke steiger je vaart; de groene stip is het enige verzadigde
accent in de balk. Tikken brengt je naar de opstap-kiezer in de pagina. */
html:root[data-tenant="sloepdelen"] .bb-dock-chip{
display:inline-flex;
align-items:center;
gap:6px;
flex:0 0 auto;
height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(255, 255, 255, 0.55);
border:0.5px solid rgba(11, 21, 51, 0.10);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.65);
font-family:var(--bb-font-head);
font-weight:500;
font-size:12px;
line-height:1;
color:var(--bb-navy);
cursor:pointer;
white-space:nowrap;
transition:transform 160ms var(--bb-spring, cubic-bezier(.2,.7,.3,1.4));
}
html:root[data-tenant="sloepdelen"] .bb-dock-chip:active{ transform:scale(0.95); }
html:root[data-tenant="sloepdelen"] .bb-dock-chip:focus-visible{
outline:2px solid var(--bb-blue);
outline-offset:2px;
}
html:root[data-tenant="sloepdelen"] .bb-dock-chip-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(11, 21, 51, 0.20);
flex:0 0 auto;
}
html:root[data-tenant="sloepdelen"] .bb-dock-chip.is-set .bb-dock-chip-dot{
background:var(--bb-action);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-dock-chip{
background:rgba(255, 255, 255, 0.08);
border-color:rgba(140, 196, 236, 0.28);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08);
color:#E7F1F8;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-dock-chip-dot{
background:rgba(231, 241, 248, 0.25);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-dock-chip.is-set .bb-dock-chip-dot{
background:var(--bb-action);
}
/* ── Tabbalk ──────────────────────────────────────────────────────────── */
html:root[data-tenant="sloepdelen"] .bb-mobile-nav{
border-radius:26px;
padding:6px 8px;
}
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-mobile-nav{
background:rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(11, 21, 51, 0.10);
box-shadow:
0 8px 30px rgba(11, 21, 51, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-nav{
background:rgba(11, 21, 51, 0.78);
-webkit-backdrop-filter:blur(36px) saturate(180%);
backdrop-filter:blur(36px) saturate(180%);
border:0.5px solid rgba(140, 196, 236, 0.28);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* De uitzondering van Captain: boven de ALTIJD-lichte vaarinfokaart werd de
doorschijnende balk weggewassen. Dat geldt hier nog steeds, alleen de
andere kant op - wit glas boven een lichte kaart. Vandaar dekkender. */
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
background:rgba(255, 255, 255, 0.86) !important;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-nav:has(.bb-mobile-tab[href="/vaarinfo"][aria-current="page"]){
background:rgba(11, 21, 51, 0.92) !important;
}
html:root[data-tenant="sloepdelen"] .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="sloepdelen"][data-theme="light"] .bb-mobile-tab{
color:rgba(11, 21, 51, 0.56);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab{
color:rgba(231, 241, 248, 0.50);
}
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-mobile-tab[aria-current="page"],
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-mobile-tab.is-active-group{
color:var(--bb-navy);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab[aria-current="page"],
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab.is-active-group{
color:#E7F1F8;
}
/* Het actieve icoon kreeg van Captain een cyaan tint; hier erft het gewoon
de inkt van de tab. */
html:root[data-tenant="sloepdelen"] .bb-mobile-tab[aria-current="page"] svg,
html:root[data-tenant="sloepdelen"] .bb-mobile-tab.is-active-group svg{
color:inherit;
filter:none;
}
/* De actieve LENS. Wit glas met een witte haarlijn - geen cyaan gloed, geen
gekleurde ring. Prototype :125-132. */
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-mobile-tab::before{
background:rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter:blur(6px) saturate(150%);
backdrop-filter:blur(6px) saturate(150%);
border:0.5px solid rgba(255, 255, 255, 0.65);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 1px 6px rgba(11, 21, 51, 0.10);
}
html:root[data-tenant="sloepdelen"][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(255, 255, 255, 0.14);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Intrede van de lens: 380 ms, schaal 0,72 naar 1. Captain schuift hem van
opzij in met een squash; het prototype laat hem opkomen. */
@keyframes bbSdLensIn{
from{ transform:scale(0.72); opacity:0; }
to { transform:scale(1); opacity:1; }
}
html:root[data-tenant="sloepdelen"] .bb-mobile-tab[aria-current="page"]::before,
html:root[data-tenant="sloepdelen"] .bb-mobile-tab.is-active-group::before{
animation:bbSdLensIn 380ms cubic-bezier(.2, .7, .3, 1.4) both;
}
/* Hover en sleep-hover droegen dezelfde cyaan gloed. Hier: alleen de inkt
verandert, de lens blijft glas. */
@media (hover:hover){
html:root[data-tenant="sloepdelen"][data-theme="light"] .bb-mobile-tab:hover{
color:var(--bb-navy);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab:hover{
color:#E7F1F8;
}
html:root[data-tenant="sloepdelen"] .bb-mobile-tab:hover svg{
color:inherit;
filter:none;
transform:scale(1.08);
}
html:root[data-tenant="sloepdelen"] .bb-mobile-tab[aria-current="page"]:hover::before,
html:root[data-tenant="sloepdelen"] .bb-mobile-tab.is-active-group:hover::before{
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 1px 6px rgba(11, 21, 51, 0.10);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab[aria-current="page"]:hover::before,
html:root[data-tenant="sloepdelen"][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="sloepdelen"] .bb-mobile-tab.is-drag-hover svg{
color:inherit;
filter:none;
}
html:root[data-tenant="sloepdelen"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root[data-tenant="sloepdelen"] .bb-mobile-tab.is-active-group.is-drag-hover::before{
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 1px 6px rgba(11, 21, 51, 0.10);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab[aria-current="page"].is-drag-hover::before,
html:root[data-tenant="sloepdelen"][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="sloepdelen"] .bb-mobile-tab:focus-visible,
html:root[data-tenant="sloepdelen"] .bb-header-brand:focus-visible,
html:root[data-tenant="sloepdelen"] .bb-cta:focus-visible{
outline:2px solid var(--bb-blue);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-mobile-tab:focus-visible,
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-header-brand:focus-visible,
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-cta:focus-visible{
outline-color:var(--bb-cyan);
}
/* Desktopnav: dezelfde gloedloze glasfamilie als de tabbalk. */
html:root[data-tenant="sloepdelen"] .bb-nav-link{
color:inherit;
opacity:0.72;
}
html:root[data-tenant="sloepdelen"] .bb-nav-link[aria-current="page"]{
opacity:1;
background:rgba(255, 255, 255, 0.55);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-nav-link[aria-current="page"]{
background:rgba(255, 255, 255, 0.10);
}
html:root[data-tenant="sloepdelen"] .bb-nav-link[aria-current="page"]::after{
background:var(--bb-action);
}
html:root[data-tenant="sloepdelen"] .bb-nav-link:hover{
opacity:1;
background:rgba(255, 255, 255, 0.45);
border-color:rgba(11, 21, 51, 0.10);
box-shadow:0 1px 6px rgba(11, 21, 51, 0.10);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-nav-link:hover{
background:rgba(255, 255, 255, 0.10);
border-color:rgba(140, 196, 236, 0.28);
box-shadow:none;
}
html:root[data-tenant="sloepdelen"] .bb-nav-link:focus-visible{
outline:2px solid var(--bb-blue);
}
/* ════════════════════════════════════════════════════════════════════════
MERK-DONKERMODUS (ontwerpreview "Proposal 4", W4)
────────────────────────────────────────────────────────────────────────
Dit is een AFTREKSOM. De donkere tokens hierboven beschrijven het merk al
goed; wat er donker Captain uitziet komt van hardcoded effecten die
eroverheen winnen. Weg gaan: de gloed-filterketens en de #69FEFF-familie.
Terug komt: vlakke lijnen in de merk-lichtblauw #8CC4EC.
De KAART blijft ongemoeid (captain 2026-08-02: "map is actually ok"), dus
niets hieronder raakt src/live/ of het kaartcanvas.
════════════════════════════════════════════════════════════════════════ */
/* ── Routekaart-covers in donkere modus ──────────────────────────────────
pages/index.html draagt zijn eigen dark-regels voor de aquarel-cover met
het Captain-cyaan #69FEFF hard in de CSS (rond regel 494-540). Dat is geen
token, dus de tokenlaag hierboven bereikt het niet. Sloepdelen heeft geen
cyaan en geen neon in het paspoort: de lijn wordt een VLAKKE 2,5 px
#8CC4EC zonder gloed.
Specificiteit: html:root[..][..] = (0,3,1) tegen :root[data-theme] = (0,2,0),
dus dit wint ongeacht de volgorde van de . */
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover{
background:
radial-gradient(ellipse at 50% 50%, rgba(55, 136, 216, 0.18), transparent 70%),
linear-gradient(135deg, #060B1C 0%, #132244 100%);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg polyline{
stroke:#8CC4EC;
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 een aanraakscherm bestaat hover niet,
maar op desktop wel - en het rapport wordt op desktop bekeken. */
html:root[data-tenant="sloepdelen"][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="sloepdelen"][data-theme="dark"] .bb-route-card-cover *{
filter:none;
}
/* ── Actiechip op de kaart "Vrije navigatie" ─────────────────────────────
pages/index.html:468-479 geeft hem in donkere modus het Captain-cyaan als
vlak. Dit IS de groene actiechip uit het ontwerpreview: het 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. */
html:root[data-tenant="sloepdelen"] .bb-route-card-start{
background:var(--bb-accent-green-tint);
color:var(--bb-ink-green);
}
/* ── Sectielabels ─────────────────────────────────────────────────────────
Poppins 600, 11 px, uppercase, 0,12em. Een label, geen kop. */
html:root[data-tenant="sloepdelen"] .bb-section-label,
html:root[data-tenant="sloepdelen"] .mr-seclbl{
font-family:var(--bb-font-head);
font-weight:600;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--bb-fg-muted);
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg circle[fill="#091C35"][stroke="#FFFFFF"]{
fill:#8CC4EC;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g[stroke="#091C35"],
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g path[stroke="#091C35"],
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g circle[stroke="#091C35"],
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g rect[stroke="#091C35"]{
stroke:#8CC4EC;
}
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g circle[fill="#091C35"],
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g rect[fill="#091C35"],
html:root[data-tenant="sloepdelen"][data-theme="dark"] .bb-route-card-cover svg g path[fill="#091C35"]{
fill:#8CC4EC;
}
/* ── 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 (huisregel kleurgebruik).
Deze klassen bestaan alleen binnen de tenant, dus scoping is per definitie
in orde (CSS Cascade Scoping Rule). */
html:root[data-tenant="sloepdelen"] .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;
}
/* Sectielabel-maat uit het ontwerpreview (Proposal 4): Poppins 600, 11 px,
0,12em. Was 500/12/0,06em - dat leest als een kop, niet als een label. */
html:root[data-tenant="sloepdelen"] .bb-dock-chooser-label{
grid-column:1 / -1;
display:block;
font-family:var(--bb-font-head);
font-weight:600;
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--bb-fg-muted);
margin:0 0 -2px;
}
@media (max-width:420px){
html:root[data-tenant="sloepdelen"] .bb-dock-chooser{
grid-template-columns:1fr 1fr;
}
html:root[data-tenant="sloepdelen"] .bb-dock-clear{ grid-column:1 / -1; justify-self:start; }
}
html:root[data-tenant="sloepdelen"] .bb-dock-btn{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
padding:9px 14px 9px 12px;
border-radius:var(--bb-btn-radius);
border:1px solid var(--bb-border);
background:var(--bb-bg-card);
color:var(--bb-fg-default);
font:inherit;
cursor:pointer;
transition:border-color 160ms var(--bb-ease), background 160ms var(--bb-ease);
}
html:root[data-tenant="sloepdelen"] .bb-dock-btn:hover{
border-color:var(--bb-acc-blue);
}
html:root[data-tenant="sloepdelen"] .bb-dock-btn.is-active{
background:var(--bb-accent-blue-tint);
border-color:var(--bb-navy);
color:var(--bb-ink-blue);
}
html:root[data-tenant="sloepdelen"] .bb-dock-dot{
width:8px;height:8px;border-radius:50%;
background:var(--bb-border);
display:block;
margin-bottom:2px;
}
html:root[data-tenant="sloepdelen"] .bb-dock-btn.is-active .bb-dock-dot{
background:var(--bb-action);
}
html:root[data-tenant="sloepdelen"] .bb-dock-name{
font-family:var(--bb-font-head);
font-weight:600;
font-size:14px;
line-height:1.2;
}
/* 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="sloepdelen"] .bb-dock-addr{
font-size:12px;
line-height:1.2;
color:inherit;
opacity:0.75;
}
html:root[data-tenant="sloepdelen"] .bb-dock-clear{
align-self:center;
padding:7px 13px;
border-radius:999px;
border:1px solid var(--bb-border);
background:transparent;
color:var(--bb-fg-muted);
font-family:var(--bb-font-head);
font-weight:500;
font-size:12px;
cursor:pointer;
}
html:root[data-tenant="sloepdelen"] .bb-dock-clear:hover{
color:var(--bb-fg-default);
border-color:var(--bb-acc-blue);
}
/* Het woordmerk in de topbalk staat als tekst OF als . Wanneer het
tekst is (.bb-wordmark) krijgt het de merkkop-font. */
html:root[data-tenant="sloepdelen"] .bb-wordmark,
html:root[data-tenant="sloepdelen"] .wordmark{
font-family:var(--bb-font-head);
font-weight:600;
letter-spacing:0.005em;
}
/* ── Meer-tab: Captain's briefing weg, sloepdelen.nl erin ─────────────────
De Captain's briefing (pages/boat-info.html) is de persoonlijke afvaart-
runbook van de captain: ligplaats E-14, de Sary, Craftsman Marine. Voor
een Sloepdelen-huurder is dat ruis (captain 2026-08-02). In plaats
daarvan een externe link naar sloepdelen.nl voor meer informatie. De
markup staat in pages/meer.html met [hidden]; hier klapt hij open. */
html:root[data-tenant="sloepdelen"] .mr-captain-briefing{
display:none;
}
/* Default (Captain en elke andere tenant): het sloepdelen.nl-blok bestaat
niet. native-perf.css zet app-breed [hidden]{display:none !important},
dus een hidden-attribuut valt hier niet te overrulen; vandaar deze
klasse-toggle in dezelfde stylesheet. */
.mr-tenant-sloepdelen{
display:none;
}
html:root[data-tenant="sloepdelen"] .mr-tenant-sloepdelen{
display:block;
}