/* ═══════════════════════════════════════════════════════════════════ NOMAD VSL — de donkere jas Laadt NA nomad-vsl-1.css en nomad-vsl-pagina-1.css, en doet alleen iets onder html.donker. Die klasse zet een scriptje in de van training.html zodra het pad met /coaching begint, dus vóór de eerste streek verf: geen witte flits. WAAROM EEN LAAG EN GEEN TWEEDE PAGINA Dezelfde training, twee jassen. Een kopie van training.html zou vanaf dag twee uit elkaar lopen -- elke hoofdstukgrens, elke knop en elke meting zou je twee keer moeten bijwerken. Eén bestand met een laag erover blijft vanzelf gelijk. HOE HET WERKT Bijna alles op de trainingspagina tekent met tokens (--bg, --ink, --line, --stil). Die worden hieronder omgezet; custom properties erven, dus dat werkt door tot in de diepste kaart. Daarna volgt een korte lijst reparaties: plekken die een lichte ondergrond aannemen met een vaste kleur, en vlakken die op wit uit elkaar vielen door een schaduw en op zwart door een rand moeten. DE KLEUR KOMT VAN DE HOMEPAGE #06070D als grond, #111628 als paneel, #EEF1F8 als tekst, #8089A0 als stil, en hetzelfde blauw. Dat zijn letterlijk de waarden uit nomad-verhoogd.css, zodat /coaching en gostart.nomadtrading.nl aan elkaar vast voelen. ═══════════════════════════════════════════════════════════════════ */ html.donker{ color-scheme:dark; /* ── grond en vlakken ── */ --bg:#06070D; --bg-2:#11141F; /* hover en het lichtere vlak; op wit was dit juist donkerder */ --panel-2:#1A2135; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.17); /* ── letter ── --muted en --stil dragen op wit hun contrast op een lichte grond. Op zwart moeten ze omhoog, anders zakken de onderregels weg. */ --ink:#EEF1F8; --muted:#B7BFD1; --dim:#A2ABC0; --stil:#8E97AC; /* ── blauw ── --blue-2 is op wit de donkere variant (hover op een knop, tekst in een pilletje). Op zwart moet datzelfde token juist lichter worden, anders is de tekst in de pil niet te lezen. */ --blue:#0052FF; --blue-2:#7D9EFF; --blue-pale-l:#8FB0FF; --chip-bg:rgba(0,82,255,.18); --chip-tx:#A8C1FF; --tint-04:rgba(0,82,255,.07); --tint-07:rgba(0,82,255,.11); /* --dark is op wit het zwarte vlak dat ergens overheen valt. Hier is de grond al zwart, dus wordt het een opgetild paneel. */ --dark:#0E1220; --dark-2:#232C44; } /* ── de knop ── Het blauw blijft, maar de gloed eronder mag op zwart sterker. */ html.donker .btn-primary{box-shadow:0 10px 30px rgba(0,82,255,.34)} html.donker .btn-secondary{background:#141827;border-color:rgba(255,255,255,.13)} html.donker .btn-secondary:hover{background:#1B2133} /* ── vensters ── Op wit lag er een schaduw onder het venster en dat was genoeg. Op zwart valt een schaduw niet op: het venster moet zelf lichter zijn dan de grond, anders zie je alleen tekst zweven. */ html.donker .modal{background:#0E1220;border-color:rgba(255,255,255,.12); box-shadow:0 40px 100px rgba(0,0,0,.7)} html.donker .scrim{background:rgba(2,3,7,.72)} html.donker .modal-x{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#C9D1E2} html.donker .modal-x:hover{background:rgba(255,255,255,.12)} /* De koppen van de WhatsApp-kaart en de finale waren het zwarte deel van een wit venster. Nu is het venster zelf donker, dus tillen we ze op. */ html.donker .pu-kop,html.donker .fin-kop{background:#141A2E} html.donker .lijst{border-color:rgba(255,255,255,.11)} html.donker .lijst .kopje{background:rgba(255,255,255,.035)} html.donker .pu-rij{background:transparent} html.donker .pu-rij.keuze:hover{background:rgba(255,255,255,.05)} html.donker .vink{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)} html.donker .pu-rij.vast .vink{background:#2A3350;border-color:#2A3350} html.donker .stuur{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)} html.donker .bericht q{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)} /* De QR blijft wit: een code op een donkere ondergrond scant niet. */ html.donker .qr{background:#fff} /* ── de finale ── De twee keuzes waren witte kaarten op wit. Hier tilt de blauwe keuze zichzelf op met kleur en de andere met een rand. */ html.donker .fin-keus{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11)} html.donker .fin-keus:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)} html.donker .fin-keus.primair{background:var(--blue);border-color:#3D74FF} html.donker .fin-keus.primair:hover{background:#1A62FF;border-color:#5E8BFF} html.donker .fin-keus.wa .ic{background:rgba(61,224,140,.14);color:#4BE3A0} html.donker .fin-ring .spoor{stroke:rgba(255,255,255,.14)} /* ── de agenda ── */ html.donker .cal-tijd{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} html.donker .cal-tijd:hover{background:rgba(0,82,255,.2);border-color:var(--blue)} /* Het wiel. De vervaging moet naar het vlak van het venster lopen (#0E1220) en niet naar de paginagrond (#06070D): anders staat er een donkere veeg boven en onder de tijden. */ html.donker .cal-tijden{--cal-vel:#0E1220} html.donker .cal-band{background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} html.donker .cal-band.vol{background:linear-gradient(148deg,#2E6BFF,#0052FF 62%,#0B3ECC);box-shadow:0 10px 26px -8px rgba(0,82,255,.55)} html.donker .cal-moment .tik{background:rgba(255,255,255,.22)} html.donker .cal-moment.heel .tik{background:rgba(255,255,255,.42)} html.donker .cal-moment.gat .t::before,html.donker .cal-moment.gat .t::after{background:rgba(255,255,255,.1)} /* In rust al blauw, net als de band van de klok. --chip-bg mengt met --bg (#06070D) en dat is dónkerder dan het venster zelf (#0E1220); op zwart moet die tint dus met de hand. */ html.donker #cal-int .iopt button{ background:rgba(0,82,255,.14);border-color:transparent; box-shadow:inset 0 0 0 1px rgba(94,139,255,.22); } html.donker #cal-int .iopt button:hover{ background:rgba(0,82,255,.26);box-shadow:inset 0 0 0 1px rgba(94,139,255,.42); } html.donker .iopt button{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)} html.donker .iopt button:hover{background:rgba(255,255,255,.08)} /* De stip op het monogram staat met een rand op het vlak van het venster. */ html.donker .v-mono::after{border-color:#0E1220} html.donker .v-pil{background:rgba(0,82,255,.18);color:#9DBBFF} html.donker .ispoor .chip{background:rgba(0,82,255,.14);color:#B9CCFF} html.donker .ispoor .chip i{background:#3D74FF} html.donker .iopt button .bol{border-color:rgba(94,139,255,.5);background:transparent} html.donker .iopt button .pl{color:rgba(157,187,255,.6)} /* De intake in de taal van de agenda: streepjesschaal, bolletje, spoor. */ html.donker .itiks i{background:rgba(255,255,255,.16)} html.donker .itiks i.klaar{background:#3D74FF} html.donker .itiks i.nu{background:#5E8BFF} html.donker .iopt button .bol{border-color:rgba(255,255,255,.22)} html.donker .iopt button .tk{color:var(--ink)} html.donker .iopt button .pl{color:rgba(255,255,255,.3)} html.donker .iopt button.aan{background:linear-gradient(148deg,#2E6BFF,#0052FF 62%,#0B3ECC);border-color:transparent} html.donker .iopt button.aan .bol{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 5px #0052FF} html.donker .ispoor{border-top-color:rgba(255,255,255,.09)} html.donker .ispoor .chip{background:rgba(255,255,255,.06);color:var(--muted)} /* ── het kader om de video ── Op wit was dit een computerscherm op een bureau. Op zwart blijft dat beeld staan, maar de chrome moet zichtbaar blijven tegen de grond. */ html.donker .cc{border-color:rgba(255,255,255,.1);box-shadow:0 40px 90px rgba(0,0,0,.55)} html.donker .cc-chrome{background:#0E1220;border-color:rgba(255,255,255,.08)} html.donker .cc-screen,html.donker .cc-cell,html.donker .cc-panel{background:transparent} html.donker .v6-seg .lijn{background:rgba(255,255,255,.13)} html.donker .v6-cap,html.donker .v6-foot{border-color:rgba(255,255,255,.09)} html.donker .v6-foot{background:transparent} html.donker .v6-foot.actief{background:rgba(0,82,255,.12)} /* ── het bewijs ── De coverkaarten waren al zwart; op een zwarte grond vielen ze weg. Een haarlijn eromheen zet ze terug. */ html.donker .rv{border:1px solid rgba(255,255,255,.1)} html.donker .quo{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)} html.donker .quo.acc{background:rgba(0,82,255,.12)} html.donker .card,html.donker .pillar,html.donker .inst-panel,html.donker .s-boek-kaart{ background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)} html.donker .card:hover,html.donker .pillar:hover{background:rgba(255,255,255,.06)} html.donker .s-boek-kaart{box-shadow:0 20px 50px rgba(0,0,0,.5)} /* ── de knoppen die op wit wit waren ── Een actieve keuze werd aangegeven met een wit vlakje. Op zwart is dat een wit blok met witte letters; hier wordt het blauw. */ html.donker .vp3d-modes button.on,html.donker .inst-chips button.on{ background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(0,82,255,.4)} html.donker .vp3d-tip{background:rgba(14,18,32,.97);border-color:rgba(0,82,255,.45);color:var(--ink)} html.donker .vp3d,html.donker .vp3d-bar,html.donker .vp3d-stage{background:transparent} html.donker .marquees{background:transparent;border-color:rgba(255,255,255,.08)} /* ── de nav en de voet ── */ /* Doorzichtig bij binnenkomst, daarna zwart in plaats van wit. De regel in nomad-vsl-pagina-1.css zet .vast op rgba(255,255,255,.9); zonder deze tegenhanger zou de nav op de donkere versie halverwege wit oplichten. */ html.donker .s-nav{background:transparent;border-bottom-color:transparent} html.donker .s-nav.vast{background:rgba(6,7,13,.88);border-bottom-color:rgba(255,255,255,.09)} html.donker .nav-links a:hover{background:rgba(255,255,255,.07)} html.donker .footer{border-color:rgba(255,255,255,.08)} /* De slotsectie was al #06070D. Op een even zwarte pagina begint hij nergens; een haarlijn en de blauwe gloed geven hem zijn eigen grond terug. */ html.donker .finale{border-top:1px solid rgba(255,255,255,.08);background:#080A12} /* ── de balken onderin (telefoon) ── */ html.donker .s-vast,html.donker .v6-mp{background:rgba(12,15,26,.95);border-color:rgba(255,255,255,.12)} html.donker .v6-mp .x{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)} /* ── het raster achter de kop ── Op wit waren dat lichtgrijze lijnen; op zwart moeten ze licht zijn, anders is er niets te zien. */ html.donker .lp-hero .hero-grid{opacity:.5;filter:invert(1) brightness(1.6)}