- Add full German translations of the three handoff docs (public/*-de.html),
each with an "English ↗" toggle; added "Deutsch ↗" toggle to the EN docs.
- Register the -de slugs in vite.config.js so the clean URLs work in dev
(nginx $uri.html already handles them in prod).
dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Every section card now links to its related live page/section, opening in
a new tab (root-relative hrefs, target=_blank rel=noopener):
- dev-doc: one link per §1–§28 card + the quick-reference card (→ /design/*
for token/component sections, the matching page/anchor for site features).
- simple-doc: switched from section-level to per-card links on each item
(23 links), mapped to /, /shop, /shop#wash, /#bundles, /kueche, etc.;
kept the inline category links and the Quick-reference → /design link.
dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- nginx: try_files adds $uri.html so /dev-doc, /simple-doc, /review-doc
resolve to the flat .html files before the SPA fallback (prod).
- vite: dev-only middleware mirrors the same rewrite so the clean URLs
work under `vite dev` too (no SPA-fallback / router warning).
- simple-doc: add hex values inline + a "Quick reference (for the
developer)" swatch grid (full palette + category colours) and type/
button/divider specs — kept layman. Cross-links now use /dev-doc.
dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
HTML render of STYLE-CHANGES-simple.md, styled to match dev-doc/review-doc
(brand hero, category swatches, crimson "waiting on you" section). Flat
file in public/ so it serves at /simple-doc.html in dev and prod. dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The directory form (public/dev-doc/index.html) only resolved at a clean
/dev-doc under nginx; in Vite dev the extensionless path hit the SPA
fallback (router "No match" warning). Flat files serve identically in
dev and prod at /dev-doc.html and /review-doc.html. dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Audited all 26 showcase sections and fixed every drift from the live
design system:
- Colors: add mint highlight, the four category colours, brand-float,
cream-dark; rewrite description.
- Typography: cards now read Zeitung (was Fraunces/DM Sans); add the
fluid headline scale (display/headline-lg/headline-md); rewrite copy.
- Hero: add the four category banner tones to the switcher + HeroPreview
validator; description "three tones" → seven.
- Buttons: accent described as crimson (not warm-yellow); brand-green.
- Revitalization: noted in reserve / not on the live site.
- Sweep stale refs: tokens.css header, Stripe/Express checkout font
(DM Sans → --font-sans stack), Fraunces/pine-green comments.
Docs: STYLE-CHANGES.md §28 + served HTML dev-doc. dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move the HTML dev-doc render to public/dev-doc/index.html and add the
brand-review status page at public/review-doc/index.html. nginx's
try_files $uri $uri/ serves them at /dev-doc and /review-doc ahead of the
SPA fallback; CSP already permits the inline styles. Unlisted (URL-only).
dist/ rebuilt so Portainer bakes them in.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Brand-owner review follow-ups:
- Shop hero (§27): add four skewed, category-coloured jump-buttons under the
hero text that smooth-scroll to each section; remove the white gap below the
hero so the green flows straight into the first colour banner.
- Revitalization (§24): remove the off-brand "Revitalization Center" section
from the homepage and strip the dead /#revitalize nav links from all pages.
Component + i18n + DS docs kept in reserve.
- Sport-Profi (§25): reclassify from care → wash (it's a laundry product).
- Origin (§26, G1): remove the "Das Original aus Österreich" / "The original
from Austria" sentence from the footer tagline (DE + EN).
Docs: STYLE-CHANGES.md §24-27, simple guide, and a new on-brand HTML render
STYLE-CHANGES.html (mirrors the review-status page design). dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The cream second-fold banner reads "Ein Pulver, hundert Anwendungen" but
showed the Bad 500 g (bath) product and its CTA/link pointed there too.
Repoint the whole banner to powder — the 3.490 g bulk bucket (distinct
from the 250 g first-fold hero): image, add-to-cart product, learn-more
link, and alt text. No new asset needed.
Docs: STYLE-CHANGES.md §23 + simple guide. dist/ rebuilt.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Category pages (§21): link /kueche, /haushalt, /pflege from the footer
(/kueche was orphaned); align footer labels + page eyebrows to the shop's
section names (Küche/Reinigung/Pflege · Kitchen/Clean/Care). /waesche
deferred pending brand copy; route slugs unchanged.
Membership (§22, U2): no programme exists, so remove every trace. Drop
memberPrice from bundle data + BundleCard/Bundles/BundlePage/HomePage, the
joinCta prop/emit/buttons, and all member copy. Bundles are now single-price
(retail only); sub + benefits rewritten as bundle value. priceLabel → Preis/
Price. DS demos updated to match.
Docs: STYLE-CHANGES.md §21/§22; new plain-language STYLE-CHANGES-simple.md.
dist/ rebuilt for the Portainer/gitea deploy.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Shop page rebuilt into four brand colour-coded use-group sections (Küche/lime,
Reinigung/grapefruit, Wäsche/plum, Pflege/care/orange): colour banners with diagonal
dividers, per-section grid titles, crimson 'add to cart' + white-outline 'learn more'
CTAs, plain-name eyebrows, first-fold halved + thin white band. Split old Haushalt
group into clean+wash.
Also in this checkpoint (brand-owner feedback items):
- L11: Kaiser-Natron® on every visible mention, hyphenated (de+en, products, logo, nav)
- L4: product-hero headline reworded to the brand versatility voice
- L5/L6: faint 'AI Edited' badge on AI bundle images (data-driven aiEdited flag)
- L10: Revitalization animation row + early-access CTA removed
- U2: membership 'become a member' button removed
- New category tokens (cat-kitchen/clean/wash/care) + Hero/WaveDivider tones
- New /kueche category page (route + copy) — not yet linked (see STYLE-CHANGES caveat)
- Homepage reverted to original ProductTeaser (banners belong on /shop)
dist/ rebuilt and included for the Portainer/gitea deploy. Open decisions tracked
in STYLE-CHANGES.md §20 and memory.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the 250 g powder box product shot with a render carrying the correct
vivid brand green (matching the 50 g sachet); red band and 3-D side panels
intact. 939×1200 transparent WebP, updated in public/ and dist/. Document the
change and product-image conventions in STYLE-CHANGES.md.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the hand-traced figures in the home-page intro animation with the
official Kaiser-Natron brand vectors (Ikone "Hebe" + Waterfall), rendered as
flat mint silhouettes (dark print outline dropped) on the brand-green hero.
Lady at the origin holding the white natron; waterfall half-scale, vertically
centred to her right. Same entrance choreography/timing as before. Source SVGs
in src/assets/brand/, path data in heroFigures.js.
Drops the ~570KB traced splashPaths.js import from the home page (HomePage
chunk ~214KB -> ~70KB).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add WaveDivider (brand→surface) between the Kaiserhacks green header and body.
Make search-overlay price labels white on the brand-green tone. Rebuild dist
and update STYLE-CHANGES.md.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Add --color-accent-fill (#cc0230) / -hover / -ink tokens; repoint all
solid yellow "button" surfaces (Button accent, IconButton accent,
language-selector active pill, Navbar cart CTA, Kaiserhacks chip,
accent Badge) to crimson fill + white ink. Yellow --color-accent kept
for functional text accents.
- Secondary button: transparent fill, white border, white text/icons,
translucent-white hover (no longer mimics the primary default).
- Surfaces to pure white: --color-cream and --color-surface -> #ffffff
(cream-toned logo follows via text-cream); theme-color -> #ffffff.
- Self-host Zeitung (Regular/Bold woff2, mirrored from production);
point --font-sans/--font-serif at Zeitung; drop Google Fonts CDN.
- Remove yellow highlighting on hero/title emphasis and hero eyebrows
(text-accent-soft -> text-cream, eyebrows -> text-cream/75).
- WaveDivider + homepage section dividers: straight diagonal (low-left,
high-right) at double height for ~2x the right-to-left difference.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The hand-fragment layer was popping in immediately while the rest
of the figure animated, looking detached. Slides in from the left
on the same timing curve as left-m (translateX -14% → 0, 800ms /
150ms delay) so the finger reads as part of her grip arriving with
her arm. Reduced-motion users still get the final state instantly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The dPortMound trace shipped two subpaths — the main natron handful
and a small finger-shaped subpath sitting at its base. The previous
fix dropped the second subpath because it bled white past the
woman's grip. Restoring it as a separate `dPortMoundFinger` export
and rendering it as a `mound-finger` layer in the mint hand colour
(#b5d8b6) so it reads as part of her hand instead of a stray white
spur. Painted between the white mound and the woman silhouette so
it sits on top of the mound but under the rest of her features.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dPortMound traced out as two subpaths — the main natron handful at
y≈1115-1240 and a smaller 24-point blob at y≈1234-1274 sitting just
below it. The second subpath rendered as a white "finger" extending
past the woman's grip on the BrandHero (and on the splash entrance
that this artwork shipped with). Stripping it leaves the main
handful intact and removes the bleed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reordering layers didn't fix the white finger because the bleeding
area is a HOLE in the woman silhouette (evenodd cuts it out), not
geometry the mound is overrunning. With nonzero, even-odd subpath
holes fill in (assuming consistent winding), so the finger reads
mint and the mound only shows where the woman path doesn't cover.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The traced mound path extends slightly past the woman's grip
outline; with mound-m on top (the splash entrance order) one finger
bled white where the mound overlapped it. Reordering so the woman
silhouette renders LAST on both viewports — fingers read mint where
they wrap the natron handful, mound stays visible between them
(those gaps are inside the woman path's evenodd fill, so they pass
through to the layer below).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Homepage 3-product teaser now uses tone="cream" (white image area
+ cream card body) instead of the brand-green media wash, and the
add-to-cart buttons render as the yellow accent variant for visual
emphasis on the brand-green section above.
· First bundle's hero image swapped to /bundles/background/haushalt-bundle-2.webp
per fresh asset.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two prior commits tried to fix a case-sensitivity ghost on the
deployed nginx (Haushalts-Bundle.webp vs haushalts-bundle.webp) by
forcing git to record the rename, but the asset still 404'd after
the Portainer redeploy. Sidestepping the case-history entirely by
shipping a fresh filename — `haushalt-bundle.webp` (singular). New
file, no name collision in any tree, code reference updated to
match.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Previous commit fixed public/ but the Dockerfile copies dist/ into
nginx, and git was still tracking dist/bundles/{background,transparent}/
Haushalts-Bundle.webp + Vorrats-Bundle.webp under their CamelCase
names. Portainer's redeploy was therefore serving the same
case-mismatched files. Same git mv-to-temp-then-back trick on dist/.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
git was tracking Haushalts-Bundle.webp / Vorrats-Bundle.webp in both
public/bundles/{background,transparent}/ even though the on-disk
files had been renamed to lowercase (haushalts-bundle.webp etc.).
macOS's case-insensitive APFS hid the discrepancy locally, but the
deployed case-sensitive Linux filesystem 404'd the lowercase URL,
leaving the Haushalts-Bundle card with a broken image icon.
Forced the rename through git via a two-step mv-to-temp-then-back
so the index records the case change. Vorrats-Bundle.webp came
along for the ride even though no SKU references it yet — keeps the
asset directory consistent.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The cream tone was flipped to paper body / cream media earlier so the
homepage 3-product teaser could share its cream section ground. That
broke the shop catalogue: cards on cream sections lost their image
contrast and blended into the alternating cream / surface bands.
Cream tone now back to its original mapping (cream body, paper media)
— catalogue cards pop on every section. The new `brand` tone (paper
body, brand-green media) stays exclusive to the homepage teaser, which
is the only surface that asked for green-washed media.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The brand-green media wash was only meant for the homepage's
3-product teaser, not the full shop catalogue. Reverts ShopPage's
ProductCard tone from `brand` → `cream` so shop cards keep the
cream image area / paper body that the rest of the catalogue uses.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundle data was carrying localized strings (name, usage, items,
description, imageAlt, badge) directly, so EN visitors saw German
copy on the bundle page and home grid. Strings are now keyed under
bundle.<id>.<field> in the i18n catalogue (DE + EN); src/api/bundles.js
keeps only structural data + i18n key references.
HomePage builds a localizedBundles computed that resolves the keys
through t() before passing to the Bundles design-system component,
so the existing component stays agnostic of i18n. BundlePage exposes
a `bundleCopy` computed for the same reason, and resolvedItems now
maps over `itemKeys` instead of static labels.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous "split" commit shipped the background-banner version
under a misleading message. Desktop now genuinely renders as a
1.4fr / 1fr grid: wide 16:9 image on the LEFT, copy + items + price
+ qty + add-to-cart on the RIGHT. Back button stays in its row
above the hero on every viewport — no overlay, no full-bleed
background, no gradient sidebar.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reverts the full-bleed background-banner desktop hero. Desktop uses
a 1.4fr / 1fr grid: image column gets the heavier ratio so the 16:9
landscape source has room for its full composition; copy + items +
purchase cluster sits in the right column. Back button stays in its
own row above the hero on every viewport — no overlay.
BundleCard now uses RouterLink for internal hrefs (was rendering a
plain <a>, which triggered a hard navigation and lost vue-router's
saved scroll position when the user hit back from a bundle page).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Desktop: back button moves out of its dedicated row (which wasted a
strip of brand-green above the image) into an absolute overlay at
the top-left of the max-width column, so the hero artwork starts at
the very top of the fold. Mobile keeps the in-flow row since there's
no overlay surface there.
Gradient stops: from-25% / via-brand/90 via-65% / to-brand to-80%
— image stays clean for the first quarter, then ramps quickly to
opaque brand-green by the two-thirds mark, leaving the right edge
fully solid for the cream-on-green copy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Desktop (lg+) now renders the bundle artwork as the hero background
with a brand-green left → right gradient over the right ~50% so the
cream copy stays legible. All purchase actions (name, description,
items, price, qty, add-to-cart) overlay on the right column,
vertically centred in the fold. The mobile / tablet treatment keeps
the natural-aspect banner + stacked content underneath since the
single-column scroll is the right pattern at thumb-zone widths.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Source bundle art is ~16:9 (1200×670); the previous aspect-square
crop dropped roughly half the picture. Banner now spans the full
container at the image's natural aspect on mobile and caps at 55svh
on desktop so the landscape composition reads in full.
Below the banner: description on the left and the items / price /
qty / add-to-cart cluster on the right (lg+), or stacked on mobile.
Buy actions stay aligned to the same scan column on every viewport.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundle data extracted to src/api/bundles.js (single source of truth
shared by HomePage's grid and the new BundlePage). Each card on the
home grid now links to the bundle's detail route.
BundleCard's `imageFit` default flipped to `cover` to match the new
/bundles/background/* artwork — full-bleed lifestyle scenes instead
of padded product line-ups. The `contain` mode stays available for
future bundles whose art needs breathing room.
BundlePage layout: split brand-green hero with the bundle artwork
on the left, name + items list (linking to component product pages
where matched) + pricing + qty + add-to-cart on the right. Mirrors
ProductPage chrome (Navbar, dynamic back button, CartDrawer) so the
detail-page experience reads as one piece across SKUs and bundles.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bumps the desktop/mobile split from Tailwind's md (768 px) to a
custom min-[1100px] threshold so tablets and small laptops get the
mobile chrome (menu button + bottom-right floating cluster) instead
of an over-cramped desktop nav. Bottom-clearance spacers on Home and
Shop track the same threshold so they don't disappear before the
floating cluster does.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hero copy was reading translations via const = t('key') in setup,
which captures the string at first paint and never updates when the
user switches locale. Calls now happen inline in the template so
Vue's reactivity system tracks state.locale access during render and
re-runs the binding when DE/AT/EN flips.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundles now sits directly under the Pulver hero (surface band), with
the cream "ein Pulver, hundert Anwendungen" banner below it. Wave
dividers re-routed brand → surface → cream → brand to keep the
colour rhythm continuous across the new ordering.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Wire bundle cards to /bundles/transparent/* artwork; rename the
ä/ü/&-bearing source files to ASCII-safe names so dev server and
CDN paths don't choke on URL-encoding edge cases.
· BundleCard gains an `imageFit` prop (`contain` default vs `cover`)
so per-bundle artwork can opt into edge-to-edge framing without
forcing the whole grid to the same fit.
· BrandHero side-fade fade-out now syncs with the tagline fade-in
(700ms ease 1150ms) — one smooth landing instead of two staggered
beats.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Home page now opens with a BrandHero that plays the figure entrance
animation in flow (replacing the full-screen SplashIntro overlay),
followed by a 3-product Cook/Clean/Care teaser feeding the shop. Splash
paths extracted to a shared module so BrandHero can render the same
illustration without duplicating ~500KB of SVG path strings.
ProductCard gains `cream` and `brand` tones (cream/green media wash
with white card body); homepage teaser uses `brand`, shop catalogue
switches to the green wash too. Bundle cards point at the new
/bundles/background/* artwork.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The two newly-shipped components (Footer with cream/brand/paper
tones, CheckoutStepper with active/completed/upcoming states) are
now documented in the design system at /design/footer and
/design/checkout-stepper. Sidebar entries added under "Sections"
and "Components" respectively, with DE + EN copy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Both pages were rendering the Navbar with cart-count but not
listening for the @cart event or rendering the drawer, so tapping
the cart icon did nothing. Hooked up cartOpen ref, search-add,
qty/remove handlers, goCheckout, and the CartDrawer template — same
pattern as HomePage / ShopPage / CategoryPage / LegalPage.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Native <select> chevrons render at varying offsets across browsers.
Replaced them with `appearance-none` + an absolute-positioned
chevron-down Icon at right-4 (16px) so the gap between the chevron
and the right border is consistent. Applied to RegisterPage's
salutation select and ShippingStep's shipping/billing country selects.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switched both the desktop and mobile account IconButton from `ghost`
to `float` (bg-brand-float + text-accent) with shadow disabled — same
md size (w-11 h-11) as the cart button beside it, so the pair reads
as a balanced complementary set: yellow cart, green account.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- IconButton (icon: user) in the desktop right cluster, left of cart,
and a mobile-only top-right account icon. Both navigate to /login.
- RegisterPage now matches the live kaiser-natron.at flow: salutation
dropdown (Frau/Herr/Divers), required terms & privacy checkbox
linking to /datenschutz, marketing opt-in.
- auth.js stub carries salutation + acceptsTerms through to the
session payload so the eventual backend swap is a no-op.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Vue Router's scrollBehavior doesn't fire when RouterLink resolves to
the current URL (logo while on /, /#bundles while already at #bundles),
so the smooth scroll never happened. Added onNavClick + onLogoClick
handlers that intercept the click when the destination is the same
route and call scrollIntoView / window.scrollTo with behavior:'smooth'
directly. Cross-route nav still goes through Vue Router's scrollBehavior
unchanged (savedPosition restore + same-route smooth + cross-route
instant).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
