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>
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>
Two fixes:
- Bring back savedPosition handling in scrollBehavior so /shop ⇄
/shop/<slug> back-nav restores the previous scroll y.
- Add a route.hash watcher in HomePage that calls scrollIntoView with
smooth behaviour. Vue Router's scrollBehavior alone wasn't reliably
firing for same-route hash navigations, so this catches them
explicitly. Also handles direct /#bundles deep-links via immediate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Navbar's primary, secondary, mobile and logo links were plain
<a href> tags, which triggered full-page reloads instead of SPA
navigation — Vue Router's scrollBehavior never ran. Switching them
to RouterLink keeps the user inside the SPA so the smooth-scroll
behaviour for /#bundles, /#revitalize, /#about kicks in.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Anchor links like /#bundles, /#revitalize, /#about now smooth-scroll
to their target instead of jumping. Reverts the earlier instant-jump
choice — for the homepage nav, the animation is the desired feedback.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Anchor links (e.g. /#bundles) still scroll to their target section.
Back/forward navigation now lands at the top of the destination
instead of restoring the previous scroll y, for predictable arrivals.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
