/* shell.css — basis website-shell (B49). Kleuren komen uit /api/shell/skin.css (CSS-variabelen --color-*, per tenant_domain). Geen Max-layouts (M2). */ /* --- self-hosted fonts (geen Google-CDN) ------------------------------------ Spectral = display/serif (koppen, prijzen), Public Sans = body. Beide latin + latin-ext (Nederlandse diakrieten), font-display:swap zodat tekst nooit onzichtbaar wacht op het font. Bestanden onder student-frontend/fonts/ → geserveerd via de /static-mount (main.py). */ @font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/spectral-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: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/spectral-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/spectral-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: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/spectral-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/publicsans-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: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/publicsans-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/publicsans-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: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/publicsans-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/publicsans-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: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/publicsans-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/publicsans-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: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/publicsans-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* KLEUR-fallbacks. skin.css (/api/shell/skin.css) laadt NA dit bestand en emit ALTIJD deze zes (skin_generator merget elke site over DEFAULT_PALETTE), dus voor een echte site winnen die waarden — ook zonder eigen override. Deze zes zijn dus puur een vangnet als skin.css faalt te laden. Wil je de look van één site wijzigen: tenant_domains.color_scheme, niet hier. */ --color-primary: #1f6feb; --color-accent: #0969da; --color-background: #ffffff; --color-surface: #f6f8fa; --color-text: #1f2328; --color-muted: #656d76; --font-scale: 1; /* ONTWERPTAAL — gedeelde default voor ELKE site. skin.css emit deze tokens niet, dus ze blijven staan; een tenant die afwijkt overschrijft ze later via de skin- laag. Bewust KLEURLOOS: de merk-kleur komt uit de zes palet-tokens hierboven. */ --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 12px; --radius-sm: 8px; --wrap: 1180px; /* v23.25 — LEESBREEDTE, naast --wrap. Die 1180px is de breedte van een PAGINA-raster (kaartenrijen, hero, footer); voor lopende tekst is hij veel te ruim: een regel van 1180px dwingt het oog aan het eind van elke regel een sprong te maken en de volgende begin terug te vinden. De richtlijn is ~65-72 tekens per regel, en bij de 17px van de body komt dat neer op ~576px lopende tekst. v23.29 — 36rem WORDT 42rem, en dat is GEEN ruimere regel maar dezelfde. Sinds de berichten in een kaart staan is deze maat niet meer de tekstbreedte maar de KOLOM eromheen: de kaart pakt daar 90% van en trekt er links en rechts --space (0,85rem) binnenruimte van af. 42rem × 0,9 = 37,8rem, min 1,7rem binnenruimte = 36,1rem ≈ 578px lopende tekst — dezelfde regel als de 36rem hiervoor, nu mét het kader eromheen. Bleef dit op 36rem staan, dan zou de tekst in de kaart terugvallen naar ~56 tekens en dat is ónder de richtlijn. ⚠ DEZE TOKEN STUURT OOK .reply-form, en dat is gemeten en met opzet zo gelaten. Het formulier loopt dus van 0 tot 42rem terwijl geen enkele kaart dat doet — maar de Klantenservice-kaarten beginnen op 0 en de Jij-kaarten eindigen op 42rem, dus de linkerrand van het formulier valt samen met de ene familie en de rechterrand met de andere. Het formulier is precies de omhullende van het gesprek; smaller maken zou het juist bij één van de twee vandaan trekken. */ --wrap-prose: 42rem; --gap: 22px; --sec-pad: 60px; /* v23.24 — zes maten die dit bestand FEITELIJK al hanteerde maar nergens als token, zodat het berichten-blok onderaan geen losse getallen hoeft te herhalen: --font-size-meta bijschrift-grootte (.order-date, .line-vat, .att-download, .att-error, .att-toggle stonden allemaal rond 0,85rem) --font-size-badge statuslabel (.order-status, .lic-badge, .refund-badge) --radius-badge de badge-hoek — kleiner dan --radius-sm, drie keer in dit bestand als losse 5px --pad-badge de badge-binnenruimte, in diezelfde drie regels 4px 9px --track-badge de letterspatiëring van datzelfde statuslabel --line-hair de haarlijn: de 1px die dit bestand ~40 keer trekt De vier badge-tokens horen bij elkaar: wie er één verandert hoort de badge overal mee te zien veranderen. Daarom is het badge-recept HEEL getokeniseerd en niet half. ⚠ v23.28 — --line-strong (3px, de "nadruk-lijn") IS HIER WEG. Hij is in v23.24 gemaakt voor de afzenderstreep in de thread, en die streep is met de DOCUMENT-herbouw verdwenen; daarmee had het token nul gebruikers in dit bestand. De streep onder de actieve accounttab (.account-tabs, ~regel 722) staat nog als losse 3px en zou de logische nieuwe drager zijn — dat is een sweep over de accountschil en dus een andere wijziging. Wie die doet zet dit token terug; tot dan is een variabele die nergens wordt aangeroepen alleen maar ruis. ⚠ De BESTAANDE regels zijn hierbij ONGEMOEID gelaten en dragen hun eigen literals nog. Ze hier omzetten zou een sweep over ~40 regels zijn en dus een andere wijziging dan deze; het token is vanaf nu wel de plek waar die waarde hoort te staan. */ --font-size-meta: 0.85rem; --font-size-badge: 0.7rem; --radius-badge: 5px; --pad-badge: 4px 9px; --track-badge: 0.06em; --line-hair: 1px; /* AFSTANDEN (v23.24). Dit bestand kende alleen --gap (22px, het raster van de landing) en --sec-pad (60px, sectiehoogte); voor alles daaronder stonden er losse rem-waarden. Dat liep in het berichten-blok hieronder meteen mis: 0,75 / 0,8 / 0,85 / 0,9rem stonden er naast elkaar zonder dat één van die verschillen een bedoeling had. Vier stappen, genoeg voor de dichtheden die deze schermen kennen, in de modifier-naamstijl van --radius / --radius-sm en --color-tint / --color-tint-strong (dus GEEN numerieke ladder --space-1/2/3, dat is een andere huisstijl). ⚠ REIKWIJDTE: hier gedefinieerd en gebruikt door het berichten-blok. De ~1800 regels hierboven dragen hun eigen waarden nog; die omzetten is een sweep en een andere wijziging dan deze. Voor nieuw werk is dit wel de plek waar de afstand hoort. ⚠ v23.29 — --space-xl (2rem) IS HIER WEG, en zijn afwezigheid is óók een REPARATIE. Hij is in v23.28 toegevoegd voor de witruimte-hiërarchie van de "document"-vorm (2rem tussen beurten tegen 0,5rem erbinnen); die vorm is vervangen door kaarten en de kaart doet het groeperen nu zelf, dus het token had nul aanroepen. Wie ooit weer een vijfde stap nodig heeft zet hem hier terug — dezelfde route als bij --line-strong hierboven. ⚠⚠ EN DIT STOND STUK. De v23.28-alinea hierboven begon NA een commentaar-sluiter en eindigde met een tweede, dus stond hij BUITEN het commentaar. Van "v23.28 — VIJFDE STAP" tot de eerstvolgende puntkomma las de CSS-parser daardoor één ongeldige declaratie — en die slikte de regel `--space-xs` hieronder mee op. Dat token was dus sinds v23.28 ONGEDEFINIEERD, en de vier plekken die het aanroepen (.att-item, .msg-meta, .ticket-row > a, en de bijlagengroep in de kaart) vielen stil terug op de initiële waarde. Alleen het commentaarhek is hersteld; aan de waarden is niets veranderd. ⚠ Wie deze alinea bewerkt: schrijf de twee tekens van een commentaar-sluiter hier NOOIT letterlijk uit. Dit blok kapotmaken kost precies één zo'n paar, en de schade valt een stuk verderop stil (een token dat niet meer bestaat), niet hier. */ --space-xs: 0.3rem; /* binnen een regel: gaten tussen inline-onderdelen */ --space-sm: 0.5rem; /* tussen items in een lijst, en tussen twee kaarten in de thread */ --space: 0.85rem; /* binnenruimte van een blok, inspringing */ --space-lg: 1.25rem; /* tussen blokken onderling */ /* HOVER-LIFT (v23.24). Kaarten die oplichten onder de muis (.cat, .book, .order-card en nu de ticketrij) delen één recept: 0,16s, twee pixels omhoog, een zachte schaduw in de MERK-kleur. Die vier getallen stonden als losse waarden in elke regel, en dan is "dezelfde lift" een afspraak in plaats van een feit. --lift-shadow draagt de color-mix mee: custom properties resolven bij GEBRUIK, dus de var(--color-primary) daarbinnen pakt gewoon de skin-kleur van de site. Zelfde reikwijdte-voorbehoud als hierboven — .order-card c.s. dragen hun eigen getallen nog. */ --anim-quick: 0.16s; --lift-y: -2px; --lift-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 10%, transparent); /* AFGELEIDE kleuren — color-mix uit de palet-tokens, GEEN literals: zo volgen ze automatisch de tenant-kleur i.p.v. teal/brass vast te pinnen. Custom properties resolven bij gebruik, dus de var()'s hierin pakken de skin-waarde die ná dit bestand geladen wordt. */ /* --color-band — achtergrond van de footerband. DIT IS DE DEFAULT, NIET HET LAATSTE WOORD: /api/shell/skin.css laadt NA dit bestand en zet dezelfde variabele op :root met gelijke specificiteit, dus een site die zelf een band heeft overschrijft deze regel. Zet ze er geen, dan levert skin.css de sleutel helemaal niet en blijft deze afleiding staan. Die volgorde is dwingend en staat uitgelegd in index.html. v23.32 — DE AFLEIDING IS TERUG OP `primary 82%, #000`, precies zoals vóór v23.30. Twee ronden lang is hieraan gesleuteld en beide keren was dat verkeerd: v23.30 draaide de menging om naar `primary 88%, #fff` omdat de band op dev-mijnprivedocent te donker uitviel. Dat was de verkeerde dader — de band was daar donker doordat de PRIMARY van die site te donker stond, niet door deze formule. Op vastgoedboek deed hij het al die tijd goed, en dat is ook wat er nu op prod draait. v23.31 verving hem door een kale terugval op primary. Daarmee werd de footer even donker als .over eronder en verdween de scheiding tussen die twee. Wat overeind blijft van v23.31 is het goede deel: band IS een skin-sleutel, dus een site kan hier wél van afwijken. Alleen de terugval is weer de oude afleiding. ⚠ De bekende beperking blijft, en die is bewust geaccepteerd: een color-mix met een vast percentage schaalt mee met zijn bron, dus een merkkleur die zelf al zeer donker is levert een bijna-zwarte band. Dat is nu geen formulefout meer maar een signaal — staat de band te donker, dan staat de primary van die site te donker, of de site zet gewoon een eigen band. */ --color-band: color-mix(in srgb, var(--color-primary) 82%, #000); --color-accent-strong: color-mix(in srgb, var(--color-accent) 85%, #000); /* accent-hover */ --color-line: color-mix(in srgb, var(--color-text) 12%, var(--color-background)); /* haarlijn */ --color-tint: color-mix(in srgb, var(--color-primary) 8%, transparent); /* badge/icon-chip */ --color-tint-strong: color-mix(in srgb, var(--color-primary) 14%, transparent); /* Neutraal "subtiel vlak" (facetten, badges, chips, cover-placeholder, tabelkop). Deze plekken gebruikten --color-surface als lichtgrijs vlak; in het warme palet ís surface juist het WIT van de kaarten, waardoor ze onzichtbaar werden. Een eigen token die de tenant volgt: een vleugje tekstkleur over de achtergrond. */ --color-subtle: color-mix(in srgb, var(--color-text) 6%, var(--color-background)); } /* Formulier-elementen erven het font niet van (UA-default = Arial/system). Zonder dit stonden de account-tabs, knoppen en invoervelden in een ander font dan de rest van de site. :where() = specificiteit 0, dus elke component-regel wint hierover. */ :where(button, input, select, textarea, optgroup) { font-family: inherit; font-size: inherit; } /* v23.143 — DE PLACEHOLDER, ÉÉN REGEL VOOR DE HELE STUDENTFRONTEND. Vóór deze regel stond er in dit bestand GEEN enkele `::placeholder`-declaratie: elk veld erfde de UA-default. Die is in Chromium `#757575` — gemeten, niet aangenomen — en dat is het enige stukje tekst op de pagina dat NIET uit de tokens komt. Het beweegt dus ook niet mee zodra een site zijn eigen kleuren zet, wat precies het half-werkende-knop-probleem is waar de literal-regel voor bestaat. Bewust ONGESCOOPT (geen selector op het postcodeveld): elk veld met een placeholder heeft hetzelfde gedrag, en een gescoopte regel zou de volgende vijf velden weer aan de UA overlaten. ⚠ `currentColor` EN NIET `var(--color-muted)`, en dat is een gemeten keuze. De invoer- velden dragen nergens een eigen `color`/`background`: ze staan op de UA-default zwart op wit — óók in het donkere thema, waar ze witte eilanden blijven. `--color-muted` is daar `#8b949e`, en dat levert op zo'n wit veld 3,08:1. Een palet-token zou dus een toestand ONDER AA introduceren die vandaag niet bestaat. `currentColor` is de kleur van het veld zelf: de placeholder is per definitie een verbleekte versie van wat je zou typen, en blijft dat ook als de velden ooit wél een palet-kleur krijgen. ⚠ DE DEKKING IS DE LAAGSTE DIE AA NOG HAALT, en dat is geen ruime marge maar de bodem. Gemeten op het veld zoals het vandaag rendert (zwarte tekst, wit vlak): 55% -> 4,76:1 <- deze regel 54% -> 4,59:1 <- de UA-default van vandaag 53% -> 4,42:1 (onder AA) De ruimte om de placeholder VAGER te maken dan hij nu is, is daarmee nul: de UA-default zat al op de AA-grens. Wie hem zichtbaar lichter wil, kiest bewust voor sub-AA — dat is geen keuze die hier stilzwijgend gemaakt is. De getypte waarde staat er ter vergelijking op 21:1, dus het onderscheid hint/waarde is ruim. */ ::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); } * { box-sizing: border-box; } /* Scrollbar-gutter altijd reserveren. Zonder dit springt élk gecentreerd blok (.app-nav ul, .wrap — beide `margin: 0 auto`) een halve scrollbarbreedte naar rechts zodra je van een lange pagina naar een korte gaat: de scrollbar verdwijnt, het viewport wordt breder en de centrering verschuift mee. Zichtbaar bij o.a. Inloggen en Over ons. */ html { scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font-body); font-size: calc(17px * var(--font-scale)); color: var(--color-text); background: var(--color-background); line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* Koppen dragen het display-font, site-breed. Bewust in :where() (specificiteit 0): de prose-basislaag verderop (óók :where(), dus gelijke specificiteit) staat LATER in dit bestand en wint daarmee op kleur/grootte/marge — die twee vullen elkaar aan in plaats van te vechten. Component-classes (.card-title, .pay-btn …) winnen sowieso. Een kale `h1,h2,h3{}`-regel (specificiteit 1) zoals in het mockup zou de prose-laag juist OVERSTEMMEN — daarom niet. */ :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--color-primary); } body[data-theme="dark"] { --color-background: #0d1117; --color-surface: #161b22; --color-text: #e6edf3; --color-muted: #8b949e; } /* --- meekijkbalk (v23.x) --- Alleen zichtbaar in een MEEKIJKSESSIE (`ctx.meekijken` uit /api/shell/context); een gewone bezoeker ziet hem nooit, want dan blijft #app-meekijk leeg. Amber en niet rood, net als in het partnerportaal: er is niets mis, er kijkt alleen iemand mee. ⚠ VASTE KLEUREN EN GEEN SKIN-VARIABELEN, bewust. Deze balk moet op ELKE site hetzelfde signaal geven; een site-palet dat 'm in de eigen huisstijl opneemt maakt hem onzichtbaar op precies de plek waar hij moet opvallen. Om dezelfde reden staat hij BOVEN de header en niet erin. */ .meekijk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fef3c7; border-bottom: 1px solid #f59e0b; color: #78350f; padding: 10px 2rem; } .meekijk-tekst { font-size: 0.9rem; } .meekijk button { background: #78350f; color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; font-family: inherit; } .meekijk button[disabled] { opacity: 0.6; cursor: default; } /* --- header + nav --- Twee losse strooken: #app-header draagt ALLEEN het merk (logo XOR merknaam-tekst), #app-nav is de menubalk (menu_builder). Bewust niet samengevoegd tot één balk zoals het mockup: één renderer per menu-locatie (zie header.js). Ze delen wel de opmaak — papier-achtergrond + warme haarlijn eronder — zodat het als één kop leest. */ /* Inset bewust ruimer dan de nav eronder: het logo plakte tegen de linker- en bovenrand. Alleen deze strook — de nav-items hangen aan hun eigen wrap-uitlijning (.app-nav ul) en mogen niet meeschuiven. */ .app-header { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem 0.85rem; background: var(--color-background); } .app-header .brand { display: flex; align-items: center; gap: 0.6rem; } .app-header .brand img { height: 40px; width: auto; } /* De merk-link is het wordmark, geen gewone link: geen browser-default blauw + streep. Zichtbaar op sites zonder logo (daar is de merknaam tekst, in het display-font). */ .app-header .brand a { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--color-primary); text-decoration: none; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } /* Sticky menubalk: blijft bij scrollen bovenaan (alleen #app-nav; #app-header scrollt weg). sticky (niet fixed) houdt de balk in de document-flow, zodat de scroll-restore (9a7a744/2018f8f) blijft kloppen. Geen overflow-val: de enige ancestors zijn html/body en geen van beide zet overflow/transform/contain/filter. De achtergrond is al dekkend (--color-background), dus content scrolt niet zichtbaar door de balk. z-index 50 = boven de pagina-content (max 40: .suggest-dropdown) en onder de cart-lade/overlay (90/91). Boven alles staat sinds v23.341 de toast (.mpd-toast, 100): een melding die onder de openstaande cart-lade valt is geen melding. */ .app-nav { position: sticky; top: 0; z-index: 50; background: var(--color-background); border-bottom: 1px solid var(--color-line); } .app-nav ul { list-style: none; display: flex; gap: 30px; margin: 0 auto; /* Symmetrische verticale ruimte (top == bottom): stond op 0 top / 0.9rem bottom, waardoor de inhoud tegen de bovenrand plakte — zichtbaar zodra de balk sticky is en tegen de viewport-rand staat. 0.5rem boven én onder centreert de inhoud optisch zonder de balk te veel te laten groeien. Horizontaal (28px) en align-items:center ongewijzigd. Net boven de #app-nav min-height van 48px (33,6px knop + 2× 0,5rem ≈ 49,6px), dus de verlaging blijft zichtbaar en de inhoud blijft gecentreerd. */ padding: 0.5rem 28px; width: min(var(--wrap), 100%); /* align-items:center: zonder dit valt de nav terug op `stretch` en top-lijnen de items op hun eigen offset (menu-links padding-top 4px, cart-knop veel minder), waardoor de cart-indicator te hoog tegen de bovenkant plakt. Centreren zet icoon, teller, bedrag én de menu-/account-links op dezelfde middenlijn. */ align-items: center; } /* Menu-link: brass-onderstreping die uitschuift bij hover (mockup .nav-links a::after). Géén gevulde primary-hover meer — dat vocht met de rustige papier-kop. */ .app-nav a { position: relative; display: inline-block; padding: 4px 0; text-decoration: none; color: var(--color-text); font-weight: 500; font-size: 0.97rem; } .app-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--color-accent); transition: width 0.18s ease; } .app-nav a:hover { color: var(--color-primary); } .app-nav a:hover::after { width: 100%; } /* Auth-link: geen menu_builder-item maar auth-conditioneel (navigation.js kiest label + route op basis van /api/student/profile). Daarom visueel afgezet — naar rechts geduwd — zodat hij niet als vierde menu-item leest. v23.247 — de haarlijn ervóór is eruit. De rest van de balk draagt geen enkele scheiding, dus één losse verticale lijn las als een restant in plaats van als structuur. De plaatsing doet het werk nu alleen: `margin-left: auto` slokt alle vrije ruimte op en duwt de groep tegen de rechterkant, ver van het laatste menu-item. `padding-left` blijft op 30px staan en gaat NIET omhoog. Op een ruime balk voegt hij niets zichtbaars toe (de auto-marge levert daar allang meer afstand dan welke padding ook) en zou een grotere waarde alleen de groep verder van de rechterrand duwen. Hij telt juist in het ENIGE geval waarin de auto-marge niets doet: een balk zónder vrije ruimte — smal venster, veel menu-items, of de gewrapte vorm onder 640px. Dáár is dit de laatste scheiding die er nog is, en samen met de 30px `gap` op `.app-nav ul` staat de groep dan op 60px van het laatste menu-item: het dubbele van de normale item-afstand, wat als groepsgrens leest zonder dat er een lijn voor nodig is. */ .app-nav .nav-auth { margin-left: auto; padding-left: 30px; } .app-nav .nav-auth a { color: var(--color-primary); font-weight: 600; } /* v23.245 — de streep hoort bij de GROEP, niet bij elk lid. De auth-groep telt twee li's (uitgelogd Registreren + Inloggen, ingelogd Mijn account + Uitloggen) en de regel hierboven gaf ze allebei een border-left én een margin-left:auto. Dat zijn twee fouten tegelijk: een tweede haarlijn middenin de groep, en twee auto-marges die de vrije ruimte ONDERLING verdelen — waardoor de twee links ook nog eens uit elkaar getrokken werden in plaats van als paar rechts te staan. Deze regel neutraliseert allebei bij elke .nav-auth die DIRECT op een andere volgt; de 30px tussenruimte komt dan van de gap op .app-nav ul, net als tussen de menu-items. Waarom een selector en geen klasse die JavaScript bijhoudt: de streep moet vóór de EERSTE van de groep staan, en CSS leidt zelf af wie dat is. Wie er eerste staat, hoeveel leden de groep telt en of hun inhoud net gewisseld is doet niet ter zake — er is geen moment waarop de markup en een handgezette klasse uit de pas kunnen lopen. v23.247 — de border is uit de regel hierboven verdwenen, dus `border-left: 0` hieronder neutraliseert vandaag niets meer. Het blijft bewust staan als vangnet: komt de haarlijn ooit terug, dan verschijnt hij meteen weer één keer in plaats van bij elk lid van de groep. De twee andere declaraties zijn wél levend en dragen nu het hele gedrag — `margin-left: 0` is wat de twee links als paar bij elkaar houdt. */ .app-nav .nav-auth + .nav-auth { margin-left: 0; padding-left: 0; border-left: 0; } /* Geen menu-items voor deze site → navigation.js laat #app-nav leeg. Zonder dit zou de lege