/* ========================================================= TSCB — NAVIGATIE Onderdeel van het tscb-systeem, zie basis/kleur.css voor de kleur-bridge en het versie-/hergebruikbeleid. Un-layered laten: zo winnen deze regels van de Bricks- defaults (die in @layer bricks zitten) zonder !important. --------------------------------------------------------- OFF-CANVAS BUTTONS (Bricks nav-menu, mobileMenu = always) Markup die Bricks rendert: nav.bricks-mobile-menu-wrapper ul.bricks-mobile-menu li > a (item zonder subitems) li > .brx-submenu-toggle > a+button (item mét subitems) LET OP — wat NIET hier hoort: - de item-KLEUR komt uit de Bricks-control "Background" (mobileMenuItemBackground). Die rendert als ID-regel (#brxe-… ), dus die wint altijd van dit bestand. Bewust: vorm hier, kleur in de builder — zelfde tweedeling als onderdelen/button.css. - om diezelfde reden zet dit bestand GEEN background-color en GEEN font-size op de ; zet je die in de builder, dan winnen die en blijft dit bestand kloppen. ========================================================= */ /* --------------------------------------------------------- 1. KNOPPEN — één set variabelen om aan te draaien. Staan op de wrapper, dus alles eronder erft ze en je kunt ze per breakpoint of per site in één regel omzetten. --------------------------------------------------------- */ /* De waas hoort hier en niet bij de andere knoppen: de overlay is een BROER van het paneel, geen kind. Een variabele op het paneel bereikt hem dus nooit, en dan valt background-color stil terug op transparant. */ .brxe-nav-menu { --nav_oc_waas: rgb(0 0 0 / 37%); } .brxe-nav-menu .bricks-mobile-menu-wrapper { /* Paneelbreedte. Bricks-default = 300px; ruimer zetten als langere menu-items door de hoofdletters gaan afbreken. */ --nav_oc_width: 300px; /* Knop-maat en -ritme */ --nav_oc_btn_min: 67%; /* bodem: nooit smaller dan dit deel van het paneel */ /* Gelijk aan --nav_oc_btn_min zolang de linkerranden één rechte lijn vormen: een afwijkende breedte zet de actieve knop uit de schuinte, en bij hover zou die knik heen en weer springen. */ --nav_oc_btn_min_active: 67%; --nav_oc_inset: 55px; /* lucht aan de OPEN kant; de andere kant sluit tegen de paneelrand aan */ --nav_oc_gap: 3px; /* ruimte tussen de knoppen */ /* De uitsparing waarin de knoppen liggen. Radius links, want rechts loopt hij de paneelrand in — zelfde vorm als de knoppen zelf. */ --nav_oc_well_radius: 15rem; --nav_oc_well_diepte: 0.7; /* 0 = vlak, hoger = dieper */ --nav_oc_well_lucht: 65px; /* boven en onder de knoppenrij */ --nav_oc_well_inzet: 13%; /* waar de uitsparing links begint */ /* Niet-actieve knoppen: links vrijwel doorzichtig, naar rechts vol van kleur, en op de rand een donkere kern. LET OP: de Bricks-instelling "Mobile menu item background" moet LEEG blijven. Die zet een background-color via een ID-regel en dekt dan het doorzichtige deel weer af. */ --nav_oc_wash_begin: 34%; /* waar de kleur begint op te komen */ --nav_oc_wash_vol: 92%; /* waar hij volledig is */ --nav_oc_kern: color-mix(in srgb, var(--tscb_primary_3) 80%, #000); --nav_oc_kern_maat: 34%; /* straal van de donkere kern */ --nav_oc_item_marge: 4px; /* extra lucht boven/onder elk item */ --nav_oc_glide: 0.2s; /* hoe traag de knop naar z’n hover-breedte glijdt */ --nav_oc_pad_y: 1em; /* knop-hoogte, schaalt mee met de tekst */ --nav_oc_pad_x: 2em; --nav_oc_align: right; /* welke paneelrand de knoppen raken: left | right (center kan ook, maar dan zweven ze los) */ /* Alleen de buitenhoeken van het blok zijn rond: linksboven bij het eerste item, linksonder bij het laatste. De rest is vierkant, zodat de knoppen als één vorm lezen. */ --nav_oc_hoek: 5.6rem; /* De linkerranden lopen schuin: elk item is een stap breder dan het vorige. Gelijke hoogtes + gelijke stap = een rechte lijn. */ --nav_oc_schuinte: 0; /* 1 = de linkerrand van elke knop loopt zelf ook schuin, zodat de trapjes verdwijnen en het één doorlopende lijn wordt. 0 = rechte randen (dan zie je de stap per knop). */ --nav_oc_schuin_snee: 0; /* Hoeveel de ONDERrand meeloopt met de schuinte. Gelijk aan de schuinte houdt de knop even hoog aan de linker- als aan de rechterkant; 0 laat de onderrand vlak. */ --nav_oc_schuin_onder: 0; /* Extra onderaan de knop, zodat hij naar beneden uitloopt. */ --nav_oc_pad_onder: 0.7em; /* Rand om de knop. */ --nav_oc_rand_kleur: rgb(233 187 155 / 76%); --nav_oc_rand_dikte: 1px; /* Tekst — bewust in em, niet via de tscb_text_* tokens. Die schaal is in rem gedacht vanaf een 16px root, maar Bricks zet html op 62.5% (1rem = 10px) en deze site overschrijft dat nergens. --tscb_text_l komt hier dus uit op ~13.5px: kleiner dan de 15px die het menu al had. Met em rekent de maat tegen de erfelijke tekstgrootte, dus 1.25em is hier altijd een kwart groter — ook als de root-font-size later wél op 100% wordt gezet. */ --nav_oc_text: 1.25em; --nav_oc_tracking: 0.06em; /* hoofdletters hebben extra letterruimte nodig */ /* Kleur — zelfde basiskleur en gradient als .brxe-button (zie onderdelen/button.css), maar een tint lichter. --nav_oc_tint volgt de kleur-utility die op de sitebuttons staat: tscb_btn_primary_medium = --tscb_primary_2. Zet je de knoppen op een andere utility, pas 'm hier mee aan. */ --nav_oc_tint: var(--tscb_primary_2); /* basiskleur = die van .brxe-button */ --nav_oc_tint_light: var(--tscb_primary_1); /* waar 'lichter' naartoe gaat */ --nav_oc_lighten: 60%; /* inactief: lichter, richting --primary1 */ --nav_oc_lighten_active: 0%; /* huidige pagina: exact de kleur van .brxe-button */ --nav_oc_lighten_hover: 50%; /* aanwijzen: die kleur, een tikje lichter */ /* Lichter maken gaat bewust naar --primary1 en niet naar wit. Wit ontkleurt: op 30% naar wit was de knop slate-blauw en niet meer als teal herkenbaar (verzadiging 0.54 tegen 0.59 nu). --primary1 is dezelfde kleur, alleen lichter — dat is precies waar de 1/2/3-tinten in het palet voor zijn. */ /* De rood/magenta waar het verloop naartoe zakt. Uit de échte knop teruggerekend: hij ligt tussen de mid (#ff008c) en de shade (#9e0000) die button.css voor z'n glans gebruikt. */ --nav_oc_glow: #d7326e; /* Glans-sterkte, 0-100 net als --tscb_btn_gloss in button.css. 100 = exact het verloop van .brxe-button. Op een lichtere knop mag 'ie zachter: vol verloop trekt de onderkant naar een middentoon waar geen enkele tekstkleur meer 4.5:1 haalt. */ --nav_oc_gloss: 87; /* Labelkleur voor de SUBITEMS. De knoppen zelf houden bewust de witte tekst van Bricks (de color-regel op de knop staat daarom uitgecommentarieerd, zie sectie 2). Subitems moeten wél donker: die hebben geen achtergrond en staan direct op het crème paneel — wit is daar onzichtbaar. Deze regel dus niet "voor de symmetrie" ook uitzetten. Contrast-stand van nu: de huidige pagina is de donkerste knop en haalt 4.20:1 met wit; de overige, lichtere items halen 2.97:1. Wil je die laatste omhoog zonder de witte tekst of het licht/donker-onderscheid op te geven, dan is --nav_oc_lighten de knop: op 20% wordt het 3.53 en blijft het verschil met de actieve pagina goed zichtbaar. */ --nav_oc_ink: var(--tscb_grey_900); /* Indruk-diepte — de enige knop die hover/active/actief bedienen. De waarde heeft een TEKEN: negatief = de knop steekt uit 0 = vlak positief = de knop ligt in een uitsparing Alle vijf de schaduwlagen hieronder spiegelen mee met dat teken (licht en donker wisselen van kant), dus rust en hover zijn één formule en geen twee losse recepten. -1.5 = rust (inactief): de knop komt duidelijk omhoog. */ --nav_oc_depth: -2.5; width: var(--nav_oc_width); max-width: 100vw; } /* De