From 25e7e29ad7629f1eb07fa73619a55eea50ec969b Mon Sep 17 00:00:00 2001 From: Dorian Date: Sun, 10 May 2026 08:00:03 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20results=20page=20redesign=20=E2=80=94?= =?UTF-8?q?=20modal=20form,=20paint-style=20cards,=20session=20save?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The post-quiz results page is restructured around progressive disclosure and the embossed-paint visual language used on the homepage CTAs. Capture form - Moved into a viewport-scaled modal with sticky header (title + close) and sticky footer (submit). Body scrolls between them. - Privacy note now sits inside the form, above the newsletter checkbox, so the message is part of the consent flow rather than a footnote. - Close button is the secondary white-with-border style; the X glyph is drawn from two CSS strokes so it stays pixel-centred regardless of font metrics. - iOS-Safari-safe scroll lock: body becomes position:fixed with the saved scrollY pinned via inline top, restored on close. Result panels - Recommendations / Budget / Timeline use the white-paint container (#FAFAFA) and inner cards switch to the #F0F0F0 paint look that the quiz q-opt items already used. Text colours flip to the dark palette for legibility. - Risk banner gets four paint variants — maroon (critical), amber (high), olive (medium), green (low / "PREPARED") — each rendered via ::before with the paintGlossBtn filter. Text is warm cream #f4ecd8. - Narrative ("Your Personal Analysis") wears the same white-paint frame with a slightly greyer header band. - Headings (risk title, protein offer, panel headers, narrative title) switched from DM Serif Display to Barlow to share the button typeface. Scenario tabs - Container loses its border + padding; inactive tabs are quiet text buttons. Active tab wears the green-paint CTA fill. - Mobile lays them out as a 2×2 grid; desktop is a single row of 4. Other tweaks - Results section bumped 15% wider on desktop (max-width 690px). - Site header gets a soft white fade on results-active so content scrolling underneath doesn't clash with the logo. - Modifier (⚙) toggle hidden via a single display:none rule, styles preserved so we can re-enable it later. - Protein button has a responsive label: "Secure Source Now" on mobile, "Secure protein source now" on desktop. Arrow icons removed from protein, retake, send-plan buttons. Unified primary-button typography across the site (var(--font-body), 400 weight, 13px, 0.2em tracking). Session persistence - Quiz progress (answers, currentQ, lang, scenario, stage) is saved to sessionStorage under "kammergut.state.v1" — purely client-side, dies when the tab closes. Stale sessions (>4h) are discarded on load. - Reload mid-quiz or mid-results re-enters the right view. restartQuiz clears the saved session. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/App.vue | 404 ++++++++++++++++++++++++++++-------------- src/styles.css | 472 +++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 687 insertions(+), 189 deletions(-) diff --git a/src/App.vue b/src/App.vue index 4eb064e..92f88d1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -319,7 +319,10 @@
🔒 Exclusive — DACH Region Priority Access
Secure your high-grade animal protein source
You indicated that your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Deepstock members in Germany, Austria, and Switzerland.
- → Secure My Protein Source Now + + Secure Source Now + Secure protein source now + @@ -339,123 +342,134 @@ - -
+ +