From c8b816784b2da17f821085cecafada7a65328a7c Mon Sep 17 00:00:00 2001 From: Dorian Date: Wed, 24 Jun 2026 11:12:35 +0100 Subject: [PATCH] docs: per-card "View on site" links on both handoff docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- dist/dev-doc.html | 46 ++++++++++++++++++++++ dist/simple-doc.html | 88 +++++++++++++++++++++++++++++------------- public/dev-doc.html | 46 ++++++++++++++++++++++ public/simple-doc.html | 88 +++++++++++++++++++++++++++++------------- 4 files changed, 216 insertions(+), 52 deletions(-) diff --git a/dist/dev-doc.html b/dist/dev-doc.html index 6f30283..743cb4c 100644 --- a/dist/dev-doc.html +++ b/dist/dev-doc.html @@ -290,6 +290,23 @@ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } + /* ---- "View on site" link ---- */ + .viewlink-row { margin: 16px 0 0; } + .viewlink { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 12.5px; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + text-decoration: none; + color: var(--brand); + transition: color .15s; + } + .viewlink::after { content: "\2197"; font-size: 13px; } + .viewlink:hover { color: var(--crimson); text-decoration: underline; } + @media (max-width: 640px) { .nav-grid { grid-template-columns: 1fr; } } @@ -381,6 +398,7 @@ --color-highlight: #6eceb2;

Because these are registered in @theme, Tailwind auto-generates the utility classes bg-accent-fill, text-accent-fill-ink, border-accent-fill, hover:bg-accent-fill-hover, and text-highlight / hover:text-highlight.

+

Open in /design

@@ -395,6 +413,7 @@ --color-surface: #faf7f1; → #ffffff;

index.html — the browser theme colour was matched to white:

<meta name="theme-color" content="#ffffff" />   <!-- was #faf7f1 -->
+

Open in /design

@@ -413,6 +432,7 @@ @font-face { font-family:'Zeitung'; font-weight:700; font-display:swap; src:url('./fonts/Zeitung-Bold.woff2') format('woff2'); }

index.html — the Google Fonts <link> (Fraunces + DM Sans) and its preconnect hints were removed.

+

Open in /design

@@ -441,6 +461,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',
ℹ️

Note: secondary and accent are currently identical (both crimson). The Hero's "Learn more" secondary CTA (rendered inline, see §5) was matched to the same crimson fill.

+

Open in /design

@@ -454,6 +475,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', text-[14px] font-semibold uppercase tracking-label text-accent-fill-ink transition-colors duration-base hover:bg-accent-fill-hover"

The Hero's primary CTA already uses the accent variant on green surfaces, so it's crimson too.

+

Open in /design

@@ -473,6 +495,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', BundlePage.vueadd-to-cart already accent (unchanged) +

Open in /design

@@ -483,6 +506,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', 
<!-- checkout button -->
 <Button variant="accent" …>   <!-- was variant="primary" -->
+

Open in /design

@@ -509,6 +533,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', color: var(--color-accent-fill-ink); border-color: var(--color-accent-fill); } +

Open in /design

@@ -521,6 +546,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', 
text-accent       →  text-highlight        (active nav tab)
 hover:text-accent →  hover:text-highlight   (nav tab + footer link hover)
ℹ️

Not changed: the mobile cart-count number badge (Navbar.vue, a green circle with a count) is still yellow — it's a count indicator, not a tab highlight. Easy to switch if wanted.

+

Open in /design

@@ -539,6 +565,7 @@ hover:text-accent → hover:text-highlight (nav tab + footer link hover)

(--color-cream is now #ffffff, so these read as white on the green heroes.)

+

View on site

@@ -553,6 +580,7 @@ viewBox: 0 0 1440 64 → 0 0 1440 128 path: (cubic-bézier wave) → M0,0 L0,116 L1440,12 L1440,0 Z

The seam-free construction is unchanged: a full-height <rect> paints the lower section colour and the <path> paints the upper section colour.

The same diagonal divider also sits between the Kaiserhacks green header and the white body below it: Kaiserhacks.vue imports WaveDivider and renders <WaveDivider from="brand" to="surface" /> between the bg-brand header and the content <div> (which gains -mt-px to sit flush).

+

View on site

@@ -565,6 +593,7 @@ path: (cubic-bézier wave) → M0,0 L0,116 L1440,12 L1440,0 Z 
// brand tone
 price: 'text-accent'  →  'text-cream'   // (#ffffff on green)

The paper and cream tones keep text-brand (unchanged).

+

Open in /design

@@ -581,6 +610,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
  • Animation unchanged — same choreography/timing: lady slides in from the left (left-m), waterfall from the right (right-m), the white natron fades in once she's landed (mound-m), tagline + SINCE 1881 last; same edge-feather mask and reduced-motion handling.
    • ℹ️

    Side effect: the home-page chunk shrank ~214 KB → ~70 KB because the new heroFigures.js (~57 KB) replaces the much larger traced splashPaths.js import. splashPaths.js / SplashIntro.vue remain only as unused legacy.

    +

    View on site

    @@ -594,6 +624,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
  • Where product images live: public/products/*.webp (served as static assets; the build mirrors them to dist/products/*.webp). Convention: transparent RGBA, ~1200 px tall.
  • The replacement was supplied as a 939×1200 transparent PNG and saved straight to WebP (quality 92, no scaling needed — already matching the original dimensions), so edges/text stay crisp.
    • +

    View on site

    @@ -603,6 +634,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
    src/pages/design/ColorsSection.vue

    The new accent-fill, accent-fill-hover, accent-fill-ink tokens were added to the colour-swatch reference so the in-app design-system page stays accurate.

    +

    Open in /design

    @@ -626,6 +658,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
    ℹ️

    Not touched: generic ingredient references ("Natron", "Natronwasser", "Natron-basierte …") — those mean the substance, not the brand, so they take no ®. Image alt text keeps the plain hyphenated name (not on-screen).

    +

    View on site

    @@ -640,6 +673,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green) EN "Kaiser-Natron® for everything that should shine." → "Kaiser-Natron® for almost anything at home." +

    View on site

    @@ -659,6 +693,7 @@ EN "Kaiser-Natron® for everything that should shine." text-[10px] font-medium uppercase tracking-label text-white/55 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]">AI Edited</span>
    ℹ️

    Set a bundle's aiEdited: false (or drop it) in bundles.js to remove the badge once its image is a real photo.

    +

    View on site

    @@ -674,6 +709,7 @@ EN "Kaiser-Natron® for everything that should shine."

    This is done at the usage site, not the component: revitCopy no longer passes features or notifyCta, and the :features / :notify-cta / @notify bindings (and the orphaned onRevitNotify handler) were removed. The section now renders eyebrow + headline + sub only.

    Revitalization.vue is unchanged and still reusable — its v-if="features.length" and v-if="notifyCta" guards simply render nothing when those props are absent. The unused revit.feature.* / revit.notifyCta i18n keys are left in place (harmless) in case the section is restored.

    +

    Open in /design

    @@ -720,6 +756,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • messages.js — full category.kueche.* copy (de + en), mirroring pflege/haushalt.
    • ℹ️

    Resolved (see §21). The three content-complete category pages (/kueche, /haushalt, /pflege) are now wired into the footer. /waesche (wash) is intentionally deferred pending brand copy — the shop's in-page wash section covers laundry in the meantime.

    +

    View on site

    @@ -740,6 +777,7 @@ EN "Kaiser-Natron® for everything that should shine."

    Route slugs are unchanged (/haushalt still serves the clean group); only the visible labels/eyebrows moved to the new names.

    +

    View on site

    @@ -764,6 +802,7 @@ EN "Kaiser-Natron® for everything that should shine."

    The headline.em stays "Vorteile / Benefits" — it now reads as the bundles' advantages rather than membership perks.

    +

    View on site

    @@ -779,6 +818,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • image-alt → "Kaiser-Natron® Pulver 3.490 g Eimer".

    • No new asset needed — the bucket image already shipped in public/products/.

    +

    View on site

    @@ -793,6 +833,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • Stripped the now-dead { key: 'nav.revitalization', href: '/#revitalize' } entry from every page's nav array (9 files) so nothing links to the missing anchor.

    • Kept in reserve (not deleted): Revitalization.vue, its design-system docs page, the revit.* i18n keys, and the /design/preview/revitalization route — so the section can be reinstated (with a corrected name) by re-adding the import, revitCopy, the render block, and the nav entries.

    +

    View on site

    @@ -802,6 +843,7 @@ EN "Kaiser-Natron® for everything that should shine."
    src/api/products.js

    Brand-owner review: Sport Profi is a laundry product and belongs under Household, not Bathing & Care. In the four-group taxonomy laundry = wash, so USE_CASE_BY_CATEGORY.Sport changed 'care' → 'wash'. The kaiser-natron-sport-profi-250-ml product now appears in the Wäsche / wash (plum) section instead of Pflege / care. Doc comment updated to match.

    +

    View on site

    @@ -812,6 +854,7 @@ EN "Kaiser-Natron® for everything that should shine."

    Brand-owner review: the "Original from Austria" claim is inaccurate. Removed the leading sentence from footer.tagline (DE + EN); the tagline now opens at "Reines Natron für Küche, Haushalt und Pflege …" / "Pure sodium bicarbonate for the kitchen, the home, and personal care …".

    ℹ️

    Other Austria-flavoured strings remain and are separate decisions, not part of this change: footer.madeIn / product.prop.made-in-austria ("In Österreich abgefüllt" / "Bottled in Austria") and the Impressum/Datenschutz Vienna address. Flag to the user if the origin correction should extend to these.

    +

    View on site

    @@ -834,6 +877,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • scrollToSection(id) calls el.scrollIntoView({ behavior: 'smooth' }); each section's existing scroll-mt keeps the landing just below the sticky nav.

    • White gap removed. The thin white band (-mt-px h-6 md:h-10 bg-cream) and its preceding WaveDivider from="brand" to="cream" — added in §20 — are gone. The green hero now flows straight into the first colour banner via a single diagonal: the section loop is (section, i) and the first divider is :from="i === 0 ? 'brand' : 'cream'".

    +

    View on site

    @@ -851,6 +895,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • Revitalization. Showcase description notes it's in reserve / not used on the live site (removed in §24).
  • Stale references swept. tokens.css header rewritten; checkout font in the Stripe / Express mounts changed from hardcoded DM Sans → the --font-sans stack; "Fraunces" / "pine green" comments corrected.
    • +

    Open in /design

    @@ -866,6 +911,7 @@ EN "Kaiser-Natron® for everything that should shine." 
    Crimson  #cc0230   — all buttons / CTAs / solid pills (with #ffffff text)
 Mint     #6eceb2   — nav tab + footer link hover/active highlight
 White    #ffffff   — page backgrounds (cream + surface) and button text on green
    +

    Open in /design

    diff --git a/dist/simple-doc.html b/dist/simple-doc.html index b1299bd..2f682a7 100644 --- a/dist/simple-doc.html +++ b/dist/simple-doc.html @@ -140,6 +140,40 @@ .group.waiting > h2 { border-bottom-color: var(--crimson); } .group.waiting ul.items li { border-left-color: var(--crimson); } + /* "View on site" link */ + .viewlink-row { margin: -6px 0 16px; } + .viewlink { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 12.5px; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + text-decoration: none; + color: var(--brand); + transition: color .15s; + } + .viewlink::after { content: "\2197"; font-size: 13px; } + .viewlink:hover { color: var(--crimson); text-decoration: underline; } + .cat a, ul.items li strong a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mint); transition: color .15s, border-color .15s; } + .cat a:hover, ul.items li strong a:hover { color: var(--crimson); border-color: var(--crimson); } + + /* Per-card "view on site" link */ + ul.items li { position: relative; } + .cardlink { + display: inline-block; + margin-top: 10px; + font-size: 11.5px; + font-weight: 600; + letter-spacing: .05em; + text-transform: uppercase; + color: var(--brand); + text-decoration: none; + } + .cardlink::after { content: " \2197"; } + .cardlink:hover { color: var(--crimson); text-decoration: underline; } + footer.foot { margin-top: 44px; padding-top: 20px; @@ -176,34 +210,34 @@

    Look & feel

      -
    • Colours. The site now uses the official brand palette: the deep brand green #006548, a crimson red #cc0230 for anything clickable (buttons, "add to cart"), and a soft mint #6eceb2 that lights up links when you hover them. The warm yellow #e9c84b is now used only as emphasis text on green. (Full reference at the bottom.)
      • -
    • Backgrounds are white. Pages sit on clean white #ffffff instead of the old tinted panels, so products and text stand out.
      • -
    • Brand typeface. Headlines and text use the brand's own "Zeitung" font, self-hosted by the site (a local .woff2 file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.
      • -
    • Section dividers are diagonal. The wavy lines between coloured bands were replaced with clean diagonal edges.
      • -
    • Buttons. All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.
      • -
    • Removed the yellow highlight. Headlines no longer use the old yellow accent; they're cleaner now.
      • +
    • Colours. The site now uses the official brand palette: the deep brand green #006548, a crimson red #cc0230 for anything clickable (buttons, "add to cart"), and a soft mint #6eceb2 that lights up links when you hover them. The warm yellow #e9c84b is now used only as emphasis text on green. (Full reference at the bottom.)
      View on site
      • +
    • Backgrounds are white. Pages sit on clean white #ffffff instead of the old tinted panels, so products and text stand out.
      View on site
      • +
    • Brand typeface. Headlines and text use the brand's own "Zeitung" font, self-hosted by the site (a local .woff2 file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.
      View on site
      • +
    • Section dividers are diagonal. The wavy lines between coloured bands were replaced with clean diagonal edges.
      View on site
      • +
    • Buttons. All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.
      View on site
      • +
    • Removed the yellow highlight. Headlines no longer use the old yellow accent; they're cleaner now.
      View on site

    Brand details

      -
    • Trademark & spelling. Every visible mention now reads Kaiser-Natron® — hyphenated, with the ® symbol.
      • -
    • Hero headline. The opening line now speaks to versatility — "Kaiser-Natron® for almost anything at home" — instead of the old "that should shine" wording.
      • -
    • Intro artwork. The brand intro uses the official Hebe + waterfall artwork.
      • -
    • 250 g pack image. The large pack image was recoloured to the correct brand green so it no longer clashes with its background.
      • -
    • "One powder, a hundred uses" banner. This banner used to show the bath product, which didn't match its message. It now shows powder (the bulk bucket), and its buttons add/link to that powder product.
      • -
    • Logo & search. Prices in the search dropdown are now white so they're readable on the green bar.
      • +
    • Trademark & spelling. Every visible mention now reads Kaiser-Natron® — hyphenated, with the ® symbol.
      View on site
      • +
    • Hero headline. The opening line now speaks to versatility — "Kaiser-Natron® for almost anything at home" — instead of the old "that should shine" wording.
      View on site
      • +
    • Intro artwork. The brand intro uses the official Hebe + waterfall artwork.
      View on site
      • +
    • 250 g pack image. The large pack image was recoloured to the correct brand green so it no longer clashes with its background.
      View on site
      • +
    • "One powder, a hundred uses" banner. This banner used to show the bath product, which didn't match its message. It now shows powder (the bulk bucket), and its buttons add/link to that powder product.
      View on site
      • +
    • Logo & search. Prices in the search dropdown are now white so they're readable on the green bar.
      View on site

    Honesty & content

      -
    • "AI Edited" note on bundle images. The bundle photos that were AI-assisted now carry a small, honest "AI Edited" caption. (These can be switched off the moment real photographs replace them.)
      • -
    • Revitalization section removed. The off-brand "Revitalization Center" section (icons + name the owner flagged) is taken off the site for now. It's kept in reserve and can return with a corrected name later.
      • -
    • "The Original from Austria" removed. That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.
      • -
    • Membership fully removed. There's no membership programme, so every trace of one is gone: the "become a member" button, the lower "member price", and the member-perks wording. Bundles now show a single price everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.
      • +
    • "AI Edited" note on bundle images. The bundle photos that were AI-assisted now carry a small, honest "AI Edited" caption. (These can be switched off the moment real photographs replace them.)
      View on site
      • +
    • Revitalization section removed. The off-brand "Revitalization Center" section (icons + name the owner flagged) is taken off the site for now. It's kept in reserve and can return with a corrected name later.
      View on site
      • +
    • "The Original from Austria" removed. That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.
      View on site
      • +
    • Membership fully removed. There's no membership programme, so every trace of one is gone: the "become a member" button, the lower "member price", and the member-perks wording. Bundles now show a single price everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.
      View on site
    @@ -213,29 +247,31 @@
  • Four colour-coded sections. The shop is now organised by what you're doing, each with its own brand colour:
    -
    Küche / Kitchen — lime green #c6d47d (baking, cooking, digestion)
    -
    Reinigung / Clean — grapefruit red #eb5a61 (household cleaning)
    -
    Wäsche / Wash — plum #c15a7e (laundry & textile care)
    -
    Pflege / Care — orange #f1864c (bath, body)
    +
    Küche / Kitchen — lime green #c6d47d (baking, cooking, digestion)
    +
    Reinigung / Clean — grapefruit red #eb5a61 (household cleaning)
    +
    Wäsche / Wash — plum #c15a7e (laundry & textile care)
    +
    Pflege / Care — orange #f1864c (bath, body)
    + View on site
    • -
  • Banners. Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.
    • -
  • Quick category buttons. Under the shop's main heading there's now a row of angled buttons — one per category, each in its own colour — that smoothly scroll you down to that section. The green header now flows straight into the first coloured section (the little white gap is gone).
    • -
  • Sport Profi moved to Laundry. It's a laundry product, so it now sits under Wäsche / Wash instead of Care.
    • +
  • Banners. Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.
    View on site
    • +
  • Quick category buttons. Under the shop's main heading there's now a row of angled buttons — one per category, each in its own colour — that smoothly scroll you down to that section. The green header now flows straight into the first coloured section (the little white gap is gone).
    View on site
    • +
  • Sport Profi moved to Laundry. It's a laundry product, so it now sits under Wäsche / Wash instead of Care.
    View on site

    • Category pages

      -
    • Three dedicated pages are now reachable from the footer: Küche, Reinigung (Haushalt) and Pflege — each a fuller landing page with its own products, benefits and call-to-action.
      • -
    • Consistent names. These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.
      • -
    • Wäsche / Wash page is on hold until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.
      • +
    • Three dedicated pages are now reachable from the footer: Küche, Reinigung (Haushalt) and Pflege — each a fuller landing page with its own products, benefits and call-to-action.
      View on site
      • +
    • Consistent names. These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.
      View on site
      • +
    • Wäsche / Wash page is on hold until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.
      View on site

    Quick reference (for the developer)

    +

    Open the design system

    The exact values, in case they're handy — nothing you need to act on.

    Brand green#006548
    diff --git a/public/dev-doc.html b/public/dev-doc.html index 6f30283..743cb4c 100644 --- a/public/dev-doc.html +++ b/public/dev-doc.html @@ -290,6 +290,23 @@ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } + /* ---- "View on site" link ---- */ + .viewlink-row { margin: 16px 0 0; } + .viewlink { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 12.5px; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + text-decoration: none; + color: var(--brand); + transition: color .15s; + } + .viewlink::after { content: "\2197"; font-size: 13px; } + .viewlink:hover { color: var(--crimson); text-decoration: underline; } + @media (max-width: 640px) { .nav-grid { grid-template-columns: 1fr; } } @@ -381,6 +398,7 @@ --color-highlight: #6eceb2;

    Because these are registered in @theme, Tailwind auto-generates the utility classes bg-accent-fill, text-accent-fill-ink, border-accent-fill, hover:bg-accent-fill-hover, and text-highlight / hover:text-highlight.

    +

    Open in /design

    @@ -395,6 +413,7 @@ --color-surface: #faf7f1; → #ffffff;

    index.html — the browser theme colour was matched to white:

    <meta name="theme-color" content="#ffffff" />   <!-- was #faf7f1 -->
    +

    Open in /design

    @@ -413,6 +432,7 @@ @font-face { font-family:'Zeitung'; font-weight:700; font-display:swap; src:url('./fonts/Zeitung-Bold.woff2') format('woff2'); }

    index.html — the Google Fonts <link> (Fraunces + DM Sans) and its preconnect hints were removed.

    +

    Open in /design

    @@ -441,6 +461,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',
    ℹ️

    Note: secondary and accent are currently identical (both crimson). The Hero's "Learn more" secondary CTA (rendered inline, see §5) was matched to the same crimson fill.

    +

    Open in /design

    @@ -454,6 +475,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', text-[14px] font-semibold uppercase tracking-label text-accent-fill-ink transition-colors duration-base hover:bg-accent-fill-hover"

    The Hero's primary CTA already uses the accent variant on green surfaces, so it's crimson too.

    +

    Open in /design

    @@ -473,6 +495,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', BundlePage.vueadd-to-cart already accent (unchanged) +

    Open in /design

    @@ -483,6 +506,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', 
    <!-- checkout button -->
 <Button variant="accent" …>   <!-- was variant="primary" -->
    +

    Open in /design

    @@ -509,6 +533,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', color: var(--color-accent-fill-ink); border-color: var(--color-accent-fill); } +

    Open in /design

    @@ -521,6 +546,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label', 
    text-accent       →  text-highlight        (active nav tab)
 hover:text-accent →  hover:text-highlight   (nav tab + footer link hover)
    ℹ️

    Not changed: the mobile cart-count number badge (Navbar.vue, a green circle with a count) is still yellow — it's a count indicator, not a tab highlight. Easy to switch if wanted.

    +

    Open in /design

    @@ -539,6 +565,7 @@ hover:text-accent → hover:text-highlight (nav tab + footer link hover)

    (--color-cream is now #ffffff, so these read as white on the green heroes.)

    +

    View on site

    @@ -553,6 +580,7 @@ viewBox: 0 0 1440 64 → 0 0 1440 128 path: (cubic-bézier wave) → M0,0 L0,116 L1440,12 L1440,0 Z

    The seam-free construction is unchanged: a full-height <rect> paints the lower section colour and the <path> paints the upper section colour.

    The same diagonal divider also sits between the Kaiserhacks green header and the white body below it: Kaiserhacks.vue imports WaveDivider and renders <WaveDivider from="brand" to="surface" /> between the bg-brand header and the content <div> (which gains -mt-px to sit flush).

    +

    View on site

    @@ -565,6 +593,7 @@ path: (cubic-bézier wave) → M0,0 L0,116 L1440,12 L1440,0 Z 
    // brand tone
 price: 'text-accent'  →  'text-cream'   // (#ffffff on green)

    The paper and cream tones keep text-brand (unchanged).

    +

    Open in /design

    @@ -581,6 +610,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
  • Animation unchanged — same choreography/timing: lady slides in from the left (left-m), waterfall from the right (right-m), the white natron fades in once she's landed (mound-m), tagline + SINCE 1881 last; same edge-feather mask and reduced-motion handling.
    • ℹ️

    Side effect: the home-page chunk shrank ~214 KB → ~70 KB because the new heroFigures.js (~57 KB) replaces the much larger traced splashPaths.js import. splashPaths.js / SplashIntro.vue remain only as unused legacy.

    +

    View on site

    @@ -594,6 +624,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
  • Where product images live: public/products/*.webp (served as static assets; the build mirrors them to dist/products/*.webp). Convention: transparent RGBA, ~1200 px tall.
  • The replacement was supplied as a 939×1200 transparent PNG and saved straight to WebP (quality 92, no scaling needed — already matching the original dimensions), so edges/text stay crisp.
    • +

    View on site

    @@ -603,6 +634,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
    src/pages/design/ColorsSection.vue

    The new accent-fill, accent-fill-hover, accent-fill-ink tokens were added to the colour-swatch reference so the in-app design-system page stays accurate.

    +

    Open in /design

    @@ -626,6 +658,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)
    ℹ️

    Not touched: generic ingredient references ("Natron", "Natronwasser", "Natron-basierte …") — those mean the substance, not the brand, so they take no ®. Image alt text keeps the plain hyphenated name (not on-screen).

    +

    View on site

    @@ -640,6 +673,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green) EN "Kaiser-Natron® for everything that should shine." → "Kaiser-Natron® for almost anything at home." +

    View on site

    @@ -659,6 +693,7 @@ EN "Kaiser-Natron® for everything that should shine." text-[10px] font-medium uppercase tracking-label text-white/55 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]">AI Edited</span>
    ℹ️

    Set a bundle's aiEdited: false (or drop it) in bundles.js to remove the badge once its image is a real photo.

    +

    View on site

    @@ -674,6 +709,7 @@ EN "Kaiser-Natron® for everything that should shine."

    This is done at the usage site, not the component: revitCopy no longer passes features or notifyCta, and the :features / :notify-cta / @notify bindings (and the orphaned onRevitNotify handler) were removed. The section now renders eyebrow + headline + sub only.

    Revitalization.vue is unchanged and still reusable — its v-if="features.length" and v-if="notifyCta" guards simply render nothing when those props are absent. The unused revit.feature.* / revit.notifyCta i18n keys are left in place (harmless) in case the section is restored.

    +

    Open in /design

    @@ -720,6 +756,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • messages.js — full category.kueche.* copy (de + en), mirroring pflege/haushalt.
    • ℹ️

    Resolved (see §21). The three content-complete category pages (/kueche, /haushalt, /pflege) are now wired into the footer. /waesche (wash) is intentionally deferred pending brand copy — the shop's in-page wash section covers laundry in the meantime.

    +

    View on site

    @@ -740,6 +777,7 @@ EN "Kaiser-Natron® for everything that should shine."

    Route slugs are unchanged (/haushalt still serves the clean group); only the visible labels/eyebrows moved to the new names.

    +

    View on site

    @@ -764,6 +802,7 @@ EN "Kaiser-Natron® for everything that should shine."

    The headline.em stays "Vorteile / Benefits" — it now reads as the bundles' advantages rather than membership perks.

    +

    View on site

    @@ -779,6 +818,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • image-alt → "Kaiser-Natron® Pulver 3.490 g Eimer".

    • No new asset needed — the bucket image already shipped in public/products/.

    +

    View on site

    @@ -793,6 +833,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • Stripped the now-dead { key: 'nav.revitalization', href: '/#revitalize' } entry from every page's nav array (9 files) so nothing links to the missing anchor.

    • Kept in reserve (not deleted): Revitalization.vue, its design-system docs page, the revit.* i18n keys, and the /design/preview/revitalization route — so the section can be reinstated (with a corrected name) by re-adding the import, revitCopy, the render block, and the nav entries.

    +

    View on site

    @@ -802,6 +843,7 @@ EN "Kaiser-Natron® for everything that should shine."
    src/api/products.js

    Brand-owner review: Sport Profi is a laundry product and belongs under Household, not Bathing & Care. In the four-group taxonomy laundry = wash, so USE_CASE_BY_CATEGORY.Sport changed 'care' → 'wash'. The kaiser-natron-sport-profi-250-ml product now appears in the Wäsche / wash (plum) section instead of Pflege / care. Doc comment updated to match.

    +

    View on site

    @@ -812,6 +854,7 @@ EN "Kaiser-Natron® for everything that should shine."

    Brand-owner review: the "Original from Austria" claim is inaccurate. Removed the leading sentence from footer.tagline (DE + EN); the tagline now opens at "Reines Natron für Küche, Haushalt und Pflege …" / "Pure sodium bicarbonate for the kitchen, the home, and personal care …".

    ℹ️

    Other Austria-flavoured strings remain and are separate decisions, not part of this change: footer.madeIn / product.prop.made-in-austria ("In Österreich abgefüllt" / "Bottled in Austria") and the Impressum/Datenschutz Vienna address. Flag to the user if the origin correction should extend to these.

    +

    View on site

    @@ -834,6 +877,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • scrollToSection(id) calls el.scrollIntoView({ behavior: 'smooth' }); each section's existing scroll-mt keeps the landing just below the sticky nav.

    • White gap removed. The thin white band (-mt-px h-6 md:h-10 bg-cream) and its preceding WaveDivider from="brand" to="cream" — added in §20 — are gone. The green hero now flows straight into the first colour banner via a single diagonal: the section loop is (section, i) and the first divider is :from="i === 0 ? 'brand' : 'cream'".

    +

    View on site

    @@ -851,6 +895,7 @@ EN "Kaiser-Natron® for everything that should shine."
  • Revitalization. Showcase description notes it's in reserve / not used on the live site (removed in §24).
  • Stale references swept. tokens.css header rewritten; checkout font in the Stripe / Express mounts changed from hardcoded DM Sans → the --font-sans stack; "Fraunces" / "pine green" comments corrected.
    • +

    Open in /design

    @@ -866,6 +911,7 @@ EN "Kaiser-Natron® for everything that should shine." 
    Crimson  #cc0230   — all buttons / CTAs / solid pills (with #ffffff text)
 Mint     #6eceb2   — nav tab + footer link hover/active highlight
 White    #ffffff   — page backgrounds (cream + surface) and button text on green
    +

    Open in /design

    diff --git a/public/simple-doc.html b/public/simple-doc.html index b1299bd..2f682a7 100644 --- a/public/simple-doc.html +++ b/public/simple-doc.html @@ -140,6 +140,40 @@ .group.waiting > h2 { border-bottom-color: var(--crimson); } .group.waiting ul.items li { border-left-color: var(--crimson); } + /* "View on site" link */ + .viewlink-row { margin: -6px 0 16px; } + .viewlink { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 12.5px; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + text-decoration: none; + color: var(--brand); + transition: color .15s; + } + .viewlink::after { content: "\2197"; font-size: 13px; } + .viewlink:hover { color: var(--crimson); text-decoration: underline; } + .cat a, ul.items li strong a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mint); transition: color .15s, border-color .15s; } + .cat a:hover, ul.items li strong a:hover { color: var(--crimson); border-color: var(--crimson); } + + /* Per-card "view on site" link */ + ul.items li { position: relative; } + .cardlink { + display: inline-block; + margin-top: 10px; + font-size: 11.5px; + font-weight: 600; + letter-spacing: .05em; + text-transform: uppercase; + color: var(--brand); + text-decoration: none; + } + .cardlink::after { content: " \2197"; } + .cardlink:hover { color: var(--crimson); text-decoration: underline; } + footer.foot { margin-top: 44px; padding-top: 20px; @@ -176,34 +210,34 @@

    Look & feel

      -
    • Colours. The site now uses the official brand palette: the deep brand green #006548, a crimson red #cc0230 for anything clickable (buttons, "add to cart"), and a soft mint #6eceb2 that lights up links when you hover them. The warm yellow #e9c84b is now used only as emphasis text on green. (Full reference at the bottom.)
      • -
    • Backgrounds are white. Pages sit on clean white #ffffff instead of the old tinted panels, so products and text stand out.
      • -
    • Brand typeface. Headlines and text use the brand's own "Zeitung" font, self-hosted by the site (a local .woff2 file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.
      • -
    • Section dividers are diagonal. The wavy lines between coloured bands were replaced with clean diagonal edges.
      • -
    • Buttons. All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.
      • -
    • Removed the yellow highlight. Headlines no longer use the old yellow accent; they're cleaner now.
      • +
    • Colours. The site now uses the official brand palette: the deep brand green #006548, a crimson red #cc0230 for anything clickable (buttons, "add to cart"), and a soft mint #6eceb2 that lights up links when you hover them. The warm yellow #e9c84b is now used only as emphasis text on green. (Full reference at the bottom.)
      View on site
      • +
    • Backgrounds are white. Pages sit on clean white #ffffff instead of the old tinted panels, so products and text stand out.
      View on site
      • +
    • Brand typeface. Headlines and text use the brand's own "Zeitung" font, self-hosted by the site (a local .woff2 file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.
      View on site
      • +
    • Section dividers are diagonal. The wavy lines between coloured bands were replaced with clean diagonal edges.
      View on site
      • +
    • Buttons. All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.
      View on site
      • +
    • Removed the yellow highlight. Headlines no longer use the old yellow accent; they're cleaner now.
      View on site

    Brand details

      -
    • Trademark & spelling. Every visible mention now reads Kaiser-Natron® — hyphenated, with the ® symbol.
      • -
    • Hero headline. The opening line now speaks to versatility — "Kaiser-Natron® for almost anything at home" — instead of the old "that should shine" wording.
      • -
    • Intro artwork. The brand intro uses the official Hebe + waterfall artwork.
      • -
    • 250 g pack image. The large pack image was recoloured to the correct brand green so it no longer clashes with its background.
      • -
    • "One powder, a hundred uses" banner. This banner used to show the bath product, which didn't match its message. It now shows powder (the bulk bucket), and its buttons add/link to that powder product.
      • -
    • Logo & search. Prices in the search dropdown are now white so they're readable on the green bar.
      • +
    • Trademark & spelling. Every visible mention now reads Kaiser-Natron® — hyphenated, with the ® symbol.
      View on site
      • +
    • Hero headline. The opening line now speaks to versatility — "Kaiser-Natron® for almost anything at home" — instead of the old "that should shine" wording.
      View on site
      • +
    • Intro artwork. The brand intro uses the official Hebe + waterfall artwork.
      View on site
      • +
    • 250 g pack image. The large pack image was recoloured to the correct brand green so it no longer clashes with its background.
      View on site
      • +
    • "One powder, a hundred uses" banner. This banner used to show the bath product, which didn't match its message. It now shows powder (the bulk bucket), and its buttons add/link to that powder product.
      View on site
      • +
    • Logo & search. Prices in the search dropdown are now white so they're readable on the green bar.
      View on site

    Honesty & content

      -
    • "AI Edited" note on bundle images. The bundle photos that were AI-assisted now carry a small, honest "AI Edited" caption. (These can be switched off the moment real photographs replace them.)
      • -
    • Revitalization section removed. The off-brand "Revitalization Center" section (icons + name the owner flagged) is taken off the site for now. It's kept in reserve and can return with a corrected name later.
      • -
    • "The Original from Austria" removed. That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.
      • -
    • Membership fully removed. There's no membership programme, so every trace of one is gone: the "become a member" button, the lower "member price", and the member-perks wording. Bundles now show a single price everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.
      • +
    • "AI Edited" note on bundle images. The bundle photos that were AI-assisted now carry a small, honest "AI Edited" caption. (These can be switched off the moment real photographs replace them.)
      View on site
      • +
    • Revitalization section removed. The off-brand "Revitalization Center" section (icons + name the owner flagged) is taken off the site for now. It's kept in reserve and can return with a corrected name later.
      View on site
      • +
    • "The Original from Austria" removed. That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.
      View on site
      • +
    • Membership fully removed. There's no membership programme, so every trace of one is gone: the "become a member" button, the lower "member price", and the member-perks wording. Bundles now show a single price everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.
      View on site
    @@ -213,29 +247,31 @@
  • Four colour-coded sections. The shop is now organised by what you're doing, each with its own brand colour:
    -
    Küche / Kitchen — lime green #c6d47d (baking, cooking, digestion)
    -
    Reinigung / Clean — grapefruit red #eb5a61 (household cleaning)
    -
    Wäsche / Wash — plum #c15a7e (laundry & textile care)
    -
    Pflege / Care — orange #f1864c (bath, body)
    +
    Küche / Kitchen — lime green #c6d47d (baking, cooking, digestion)
    +
    Reinigung / Clean — grapefruit red #eb5a61 (household cleaning)
    +
    Wäsche / Wash — plum #c15a7e (laundry & textile care)
    +
    Pflege / Care — orange #f1864c (bath, body)
    + View on site
    • -
  • Banners. Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.
    • -
  • Quick category buttons. Under the shop's main heading there's now a row of angled buttons — one per category, each in its own colour — that smoothly scroll you down to that section. The green header now flows straight into the first coloured section (the little white gap is gone).
    • -
  • Sport Profi moved to Laundry. It's a laundry product, so it now sits under Wäsche / Wash instead of Care.
    • +
  • Banners. Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.
    View on site
    • +
  • Quick category buttons. Under the shop's main heading there's now a row of angled buttons — one per category, each in its own colour — that smoothly scroll you down to that section. The green header now flows straight into the first coloured section (the little white gap is gone).
    View on site
    • +
  • Sport Profi moved to Laundry. It's a laundry product, so it now sits under Wäsche / Wash instead of Care.
    View on site

    • Category pages

      -
    • Three dedicated pages are now reachable from the footer: Küche, Reinigung (Haushalt) and Pflege — each a fuller landing page with its own products, benefits and call-to-action.
      • -
    • Consistent names. These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.
      • -
    • Wäsche / Wash page is on hold until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.
      • +
    • Three dedicated pages are now reachable from the footer: Küche, Reinigung (Haushalt) and Pflege — each a fuller landing page with its own products, benefits and call-to-action.
      View on site
      • +
    • Consistent names. These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.
      View on site
      • +
    • Wäsche / Wash page is on hold until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.
      View on site

    Quick reference (for the developer)

    +

    Open the design system

    The exact values, in case they're handy — nothing you need to act on.

    Brand green#006548