From 185afdd5b127d16531e6bc6a1e74bf3c5759aa31 Mon Sep 17 00:00:00 2001 From: Dorian Date: Sun, 10 May 2026 13:16:38 +0100 Subject: [PATCH] language selector and visual tweaks --- src/App.vue | 12 +++++++--- src/styles.css | 62 +++++++++++++++++--------------------------------- 2 files changed, 30 insertions(+), 44 deletions(-) diff --git a/src/App.vue b/src/App.vue index 852a474..9ef7afb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -209,7 +209,7 @@
- +
@@ -2132,9 +2132,15 @@ onMounted(() => { // Initial render — pull saved session state (if any) so reload mid-quiz // restores the user where they left off. Lang sets first so renderQuestion - // / renderResults pick up the right strings. + // / renderResults pick up the right strings. If no saved language, sniff + // navigator.language so German speakers land on the German copy without + // having to click the toggle. const saved = loadState() - const lang = (saved && saved.currentLang) || 'en' + const detectLang = () => { + const nav = (navigator.language || navigator.userLanguage || 'en').toLowerCase() + return nav.startsWith('de') ? 'de' : 'en' + } + const lang = (saved && saved.currentLang) || detectLang() setLang(lang) updateRegionIndicator() diff --git a/src/styles.css b/src/styles.css index 5c91fb0..79ea0fb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -116,11 +116,18 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f .page-bg-pattern { position: fixed; inset: 0; - z-index: 0; + /* z-index:-1 keeps the pattern below normal-flow content (hero / quiz + / results) without forcing those sections into their own stacking + context. That matters because creating a context on .results-section + would trap the capture-modal (a position:fixed descendant) inside + it, and its z-index:200 wouldn't escape that context to sit above + the body-level site-header. Body bg is the canvas; the pattern + paints above the canvas and below positioned content. */ + z-index: -1; pointer-events: none; user-select: none; overflow: hidden; - background: #F0F0F0; + background: #FAFAFA; /* Parent is always visible — the intro overlay covers it during the intro, and the per-row animations handle the staggered reveal once intro-done lands. Nothing to fade on the wrapper. */ @@ -148,31 +155,18 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f reads comfortably across viewport sizes. */ font-size: clamp(42px, 8vw, 60px); letter-spacing: 0.04em; - /* Emboss: text colour matches the panel; only the shadows render — - highlight top-left, faint dark on bottom-right. */ - color: #F0F0F0; - text-shadow: - -1px -1px 0 rgba(255, 255, 255, 0.95), - 1px 1px 0 rgba(0, 0, 0, 0.06); -} -.page-bg-pattern .bg-row span { display: inline-block; } - -/* Lighter pattern on the assessment + results pages — homepage stays - on the slightly darker #F0F0F0 panel; quiz / results lift to #FAFAFA - so the questions and result cards (also #FAFAFA white-paint) sit on - a softer background. Text colour follows so the emboss effect still - relies on shadows alone. */ -body.quiz-active .page-bg-pattern, -body.results-active .page-bg-pattern { - background: #FAFAFA; -} -body.quiz-active .page-bg-pattern .bg-row, -body.results-active .page-bg-pattern .bg-row { + /* Emboss: text colour matches the panel (#FAFAFA on every page now); + only the shadows render — white highlight top-left, faint dark + bottom-right. */ color: #FAFAFA; text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.95), 1px 1px 0 rgba(0, 0, 0, 0.05); } +.page-bg-pattern .bg-row span { display: inline-block; } + +/* Background pattern uses the same #FAFAFA across every page now — + homepage, quiz, results all on the lighter panel. */ /* Rows slide in horizontally with alternating direction — odd rows come from the left, even rows from the right — so the pattern weaves itself together rather than fading in as one slab. The translateX @@ -207,26 +201,12 @@ body.intro-done .page-bg-pattern .bg-row:nth-child(7) { animation-delay: 0.72s; to { opacity: 1; transform: translateX(0); } } -/* Lighter background on the quiz/results pages — FAFAFA matches the - white-paint cards, and the embossed text colour shifts to match so - only the highlight + shadow text-shadows render (same trick as the - homepage, just on a lighter base). */ -body.quiz-active .page-bg-pattern, -body.results-active .page-bg-pattern { - background: #FAFAFA; -} -body.quiz-active .page-bg-pattern .bg-row, -body.results-active .page-bg-pattern .bg-row { - color: #FAFAFA; -} +/* (Per-page bg override removed — every page now uses #FAFAFA.) */ -/* Sections that sit above the pattern need to live in a higher - stacking context. Position:relative + z-index:1 puts hero / quiz / - results / about content above the fixed pattern. */ -.hero, .quiz-section, .results-section, .about-section { - position: relative; - z-index: 1; -} +/* No section-level stacking context needed — the pattern lives at + z-index:-1 so normal-flow sections paint above it automatically. + Avoiding a stacking context on .results-section also lets the + capture-modal (z-index:200) reach above the site-header. */ .hero-eyebrow { position: relative; z-index: 1; font-family: var(--font-body);