/* tiq-shell.css — TIQ-side override for the parai-core shell chrome. * * WHY THIS FILE EXISTS * -------------------- * TIQ is a parai-core *consumer*. The global shell (header, module-nav, * language picker, branding) lives in parai-core's * frontend/src/routes/+layout.svelte, which this repo must NOT modify * (opdrachtgeverskeuze: parai-core source is read-only). parai-core exposes * no UI config-hook (the only App options are WithName / WithStaticFS / * WithConfigFile / WithModuleConfigurator; config.yaml has no `ui.locales`), * so the language picker, module chip and brand label cannot be configured * away server-side. * * MECHANISM * --------- * The shell's index.html is served verbatim from the embedded static/ dir * (parai-core server.go spaFallback). `make spa` rebuilds that index.html from * the parai-core build, then a post-step (Makefile `spa` target) injects a * to THIS stylesheet into the served HTML. The injection is idempotent * and re-applied on every `make spa`, so this is a reproducible build step — * not a hand-edit of a generated file. This file is git-tracked and survives * `make spa` (which only wipes static/_app + static/images). * * The CSP allows style-src 'self' 'unsafe-inline', so a same-origin * stylesheet loads fine. * * Selectors target the shell's stable hooks: * [data-testid="language-toggle"] — the language picker wrapper * [data-testid="module-nav"] — the module chip / module navigation * header .font-serif.text-lg.font-bold — the "Parai" brand label * header img[alt] — the Parai logo * :root — the brand design tokens * .login-hero-panel/.login-hero-glow — the login decorative surfaces * These are owned by parai-core; if parai-core renames them, this override * degrades gracefully (controls reappear / colours fall back to the * parai-default, no breakage) rather than crashing the app. * * COLOUR OVERRIDE — WHY :root:root (double), NOT plain :root * --------------------------------------------------------- * UX-02 asks for the "donkerblauwe kleurvlak" to become TGSC-green. That blue * is parai-core's --secondary (oklch hue 265); the whole brand palette lives * in the shell bundle as `:root{ --primary … --secondary … }` * (_app/immutable/assets/0.*.css). That bundle is loaded by SvelteKit/Vite as * a APPENDED to AT RUNTIME — i.e. AFTER this static stylesheet. * A plain `:root{…}` here has equal specificity (0-1-0) and an EARLIER source * order, so the shell bundle would WIN and our colours would never apply. We * therefore raise specificity to `:root:root` (0-2-0) so the override wins * regardless of load order, and `:root:root.dark` (0-3-0) for dark mode. This * is a token override, NOT a copy of parai-core source (no // Bron needed). * The values mirror modules/tiq/frontend/src/app.css so shell + module read as * one TGSC-green product. */ /* UX-007 — TIQ is Nederlands-only for this delivery. Hide the language picker * so the shell never promises an English UI that the TIQ module doesn't * provide. Hidden (not removed) so layout/flex spacing stays intact. */ [data-testid="language-toggle"] { display: none !important; } /* UX-008 — single-module consumer: the module chip ("Tiq") is not a real * choice (main.go registers exactly one module). Hide the module-nav so the * header reads as one finished product, not a dev scaffold. */ [data-testid="module-nav"] { display: none !important; } /* UX-008 — replace generic "Parai" brand text + logo with TGSC branding. * The brand text is a paraglide message ("Parai") we cannot edit from * here, so we visually hide it and render the product name via a pseudo * element on its parent. */ header > div:first-child > span.font-serif.text-lg.font-bold { font-size: 0; /* hide the original "Parai" glyphs */ line-height: inherit; } header > div:first-child > span.font-serif.text-lg.font-bold::after { content: "TGSC portaal"; font-size: 1.125rem; /* text-lg */ line-height: 1.75rem; font-weight: 700; white-space: nowrap; } /* UX-02/UX-03 — swap the shell logo for the TGSC placeholder mark. * The asset lives at static/tgsc-logo.svg (served at /tgsc-logo.svg). It sits * at the static ROOT on purpose: `make spa` wipes static/_app + static/images * but NOT the static root, so the logo (like this stylesheet) survives a fresh * shell copy without a Makefile cp-step. `content:` replaces the rendered * bitmap; the original alt text stays for a11y. */ header > div:first-child > img[alt] { content: url(/tgsc-logo.svg); } /* Single-module TIQ deploy — toon het TGSC-merk linksboven (waar de parai-logo * stond). .shell-header__home is de merk/home-