Wrap Recommendations (scenario tabs + cards), Budget, and Timeline in
<details> accordions. Recommendations stays open by default; Budget and
Timeline collapse closed so the post-quiz page doesn't dump everything at
once. The panel becomes the white-paint container — inner .budget-meter,
.timeline, and .scenario-tabs drop their own box treatment to avoid a
nested-card look. revealSections() now staggers the panel wrappers
instead of the inner containers, and added en/de strings for the panel
headers.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mobile browsers report 100vh as the viewport at its largest (URL bar
hidden), so flex-centred content sat below the visual centre whenever
the address bar was showing. Add 100dvh declarations after the existing
100vh ones on body, #app, .app and .quiz-section (and on the .mod-panel
max-height) so modern browsers track the visible viewport while older
browsers keep the vh fallback.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The hero H1 swapped to paintGlossHover (and paintGlossWhiteHover for
the white variant) on pointer hover, repositioning the specular
lights. Drop both hover rules and the now-unused 0.6s filter
transition so the painted wordmark holds its look regardless of
pointer position. The hover-variant SVG filters stay in defs in case
we want hover back later.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
specularConstant=0 wasn't producing a fully transparent specular
layer in Chromium — it rendered as opaque-black-masked-to-text and
got merged on top of the underlying paint colour, hiding the green
fill of body.paint-green behind a black silhouette. The dark-paint
default never revealed it because the underlying text was already
near-black.
Removed the upper-left feSpecularLighting / feComposite / feMergeNode
from paintGloss and paintGlossHover. Visible look is unchanged (the
contribution was already 0) and paint-variant background colours now
read through correctly. paintGlossWhite/Btn variants untouched —
their constants are non-zero, no black-mask risk.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Site-header .logo and quiz-progress-bar .qpb-logo now follow the
active paint variant (currently green) and read --mod-fill so they
track live changes from the modifier panel's fill picker. White
paint is intentionally excluded — a near-white logo would vanish
against the light header background. Applies on both mobile and
desktop.
- Paint H1 default updated to spec1Const=0 in both paintGloss and
paintGlossHover (matches the "Copy snippet" dump), removing the
upper-left specular highlight from the dark paint baseline.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The /7 divisor was calibrated for the wider "Kammergut" wordmark and
left ~25-45px of unused space each side of the narrower "Deepstock".
Switch to language-aware divisors that match each wordmark's actual
rendered-width-to-font-size ratio in DM Serif Display at 0.05em
tracking:
- DE / Kammergut (default): /6 — fills with ~16px gutter at viewport
widths from 320 to 768.
- EN / Deepstock: /5.2 — narrower wordmark, smaller divisor needed
to fill the same content area without clipping at 320px.
Desktop (>=900px) uses clamp() with separate ranges per language.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
CSS: hero h1 used `(100vw - 48px) / 7` on mobile and `-64px / 7` on
tablet — the wider gutter assumption left 12-16px of unused white
space inside the 16px hero padding. Tightened both to `(100vw - 32px)
/ 7` so the wordmark spans the actual hero content area. Divisor 7
preserves the safety margin for the wider "Kammergut" wordmark.
Compose: dropped the `image: kammergut:0.1.0` field. Older Portainer
Compose runtimes (pre-v2.20) ignore `pull_policy: build` and still
ran `compose pull` against the image name, hitting "pull access
denied". Without an image name there's nothing for compose pull to
attempt; build runs during `up`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The qpb-logo's "back to home" path now soft-restarts via Vue's
@click.prevent="restartQuiz", but restartQuiz never reset the inline
styles startQuiz had set on body and .app to make the quiz scrollable
(height:auto / overflow:auto). On the locked-viewport landing page
those inline overrides collapsed the hero to its content height and
left a white half-screen.
restartQuiz now clears those inline styles so the CSS-defined
height:100vh / overflow:hidden chain takes over again. The original
single-file build never hit this because its qpb-logo was a hard
href="/" reload, which reset the inline styles for free.
Also harden the Vue mount layout: #app is now an explicit 100vh flex
column so the wrapper div Vue introduces between body and main.app
forwards the body's full viewport height (fallback for the same
collapse symptom on first load).
Switch Google Fonts to display=optional + add the gstatic preconnect
to eliminate the bold-flash FOUT on cold loads — fonts now render
either immediately (cached) or stay on the system fallback rather
than swapping mid-paint.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Faithful 1:1 port of the single-file index.html to a Vite + Vue 3.5
project. All visuals, behavior, translations, quiz logic, scoring,
SVG paint filters, and modifier panel preserved. The previous
single-file build is archived as index.original.html for A/B compare.
Inline onclick handlers in the static template are converted to
Vue's @click bindings — Vue 3 ignores string-valued on* attributes,
which silently broke the qpb-logo "back to landing" navigation.
Inline handlers inside dynamically-injected innerHTML strings
(quiz options, slider, nav buttons) keep working since the browser
parses them; their target functions are exposed on window from
onMounted.
Pinned: vue 3.5.13, vite 6.4.2, @vitejs/plugin-vue 5.2.1.
Zero npm audit vulnerabilities.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
