lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: per-card "View on site" links on both handoff docs

Browse Source 
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>
This commit is contained in:
Dorian
2026-06-24 11:12:35 +01:00
parent 123dd321df
commit c8b816784b
4 changed files with 216 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
dist/dev-doc.html vendored
View File

@@ -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;</code></pre>
<p>Because these are registered in <code>@theme</code>, Tailwind auto-generates the utility classes <code>bg-accent-fill</code>, <code>text-accent-fill-ink</code>, <code>border-accent-fill</code>, <code>hover:bg-accent-fill-hover</code>, and <code>text-highlight</code> / <code>hover:text-highlight</code>.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/colors" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -395,6 +413,7 @@
--color-surface: #faf7f1; → #ffffff;</code></pre>
<p><code>index.html</code> — the browser theme colour was matched to white:</p>
<pre><code>&lt;meta name="theme-color" content="#ffffff" /&gt; &lt;!-- was #faf7f1 --&gt;</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/colors" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -413,6 +432,7 @@
@font-face { font-family:'Zeitung'; font-weight:700; font-display:swap;
src:url('./fonts/Zeitung-Bold.woff2') format('woff2'); }</code></pre>
<p><code>index.html</code> — the Google Fonts <code>&lt;link&gt;</code> (Fraunces + DM Sans) and its <code>preconnect</code> hints were <strong>removed</strong>.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/typography" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -441,6 +461,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
</tbody>
</table>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Note:</strong> <code>secondary</code> and <code>accent</code> are currently identical (both crimson). The Hero's "Learn more" secondary CTA (rendered inline, see §5) was matched to the same crimson fill.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/design/buttons" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -454,6 +475,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
text-[14px] font-semibold uppercase tracking-label text-accent-fill-ink
transition-colors duration-base hover:bg-accent-fill-hover"</code></pre>
<p>The Hero's <strong>primary</strong> CTA already uses the <code>accent</code> variant on green surfaces, so it's crimson too.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/hero" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -473,6 +495,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
<tr><td><code>BundlePage.vue</code></td><td>add-to-cart already <code>accent</code> (unchanged)</td></tr>
</tbody>
</table>
<p class="viewlink-row"><a class="viewlink" href="/design/buttons" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -483,6 +506,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
<div class="body">
<pre><code>&lt;!-- checkout button --&gt;
&lt;Button variant="accent" …&gt; &lt;!-- was variant="primary" --&gt;</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/buttons" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -509,6 +533,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
color: var(--color-accent-fill-ink);
border-color: var(--color-accent-fill);
}</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/badges" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -521,6 +546,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
<pre><code>text-accent → text-highlight (active nav tab)
hover:text-accent → hover:text-highlight (nav tab + footer link hover)</code></pre>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Not changed:</strong> the mobile cart-count number badge (<code>Navbar.vue</code>, a green circle with a count) is still yellow — it's a count indicator, not a tab highlight. Easy to switch if wanted.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/design/navbar" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -539,6 +565,7 @@ hover:text-accent → hover:text-highlight (nav tab + footer link hover)</cod
</tbody>
</table>
<p>(<code>--color-cream</code> is now <code>#ffffff</code>, so these read as white on the green heroes.)</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -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</code></pre>
<p>The seam-free construction is unchanged: a full-height <code>&lt;rect&gt;</code> paints the <em>lower</em> section colour and the <code>&lt;path&gt;</code> paints the <em>upper</em> section colour.</p>
<p>The same diagonal divider also sits between the <strong>Kaiserhacks</strong> green header and the white body below it: <code>Kaiserhacks.vue</code> imports <code>WaveDivider</code> and renders <code>&lt;WaveDivider from="brand" to="surface" /&gt;</code> between the <code>bg-brand</code> header and the content <code>&lt;div&gt;</code> (which gains <code>-mt-px</code> to sit flush).</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -565,6 +593,7 @@ path: (cubic-bézier wave) → M0,0 L0,116 L1440,12 L1440,0 Z</code></pre>
<pre><code>// brand tone
price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<p>The <code>paper</code> and <code>cream</code> tones keep <code>text-brand</code> (unchanged).</p>
<p class="viewlink-row"><a class="viewlink" href="/design/search" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -581,6 +610,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<li><strong>Animation unchanged</strong> — same choreography/timing: lady slides in from the left (<code>left-m</code>), waterfall from the right (<code>right-m</code>), the white natron fades in once she's landed (<code>mound-m</code>), tagline + SINCE 1881 last; same edge-feather mask and reduced-motion handling.</li>
</ul>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Side effect:</strong> the home-page chunk shrank ~214 KB → ~70 KB because the new <code>heroFigures.js</code> (~57 KB) replaces the much larger traced <code>splashPaths.js</code> import. <code>splashPaths.js</code> / <code>SplashIntro.vue</code> remain only as unused legacy.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -594,6 +624,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<li><strong>Where product images live:</strong> <code>public/products/*.webp</code> (served as static assets; the build mirrors them to <code>dist/products/*.webp</code>). Convention: <strong>transparent RGBA, ~1200 px tall</strong>.</li>
<li>The replacement was supplied as a 939×1200 transparent PNG and saved straight to WebP (<code>quality 92</code>, no scaling needed — already matching the original dimensions), so edges/text stay crisp.</li>
</ul>
<p class="viewlink-row"><a class="viewlink" href="/shop" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -603,6 +634,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<div class="files"><span class="file-chip">src/pages/design/ColorsSection.vue</span></div>
<div class="body">
<p>The new <code>accent-fill</code>, <code>accent-fill-hover</code>, <code>accent-fill-ink</code> tokens were added to the colour-swatch reference so the in-app design-system page stays accurate.</p>
<p class="viewlink-row"><a class="viewlink" href="/design" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -626,6 +658,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
</tbody>
</table>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Not touched:</strong> generic ingredient references ("Natron", "Natronwasser", "Natron-basierte …") — those mean the substance, not the brand, so they take no ®. Image <code>alt</code> text keeps the plain hyphenated name (not on-screen).</p></div>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -640,6 +673,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
EN "Kaiser-Natron® for everything that should shine."
→ "Kaiser-Natron® for almost anything at home."</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -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)]"&gt;AI Edited&lt;/span&gt;</code></pre>
<div class="callout info"><span class="ico">ℹ️</span><p>Set a bundle's <code>aiEdited: false</code> (or drop it) in <code>bundles.js</code> to remove the badge once its image is a real photo.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -674,6 +709,7 @@ EN "Kaiser-Natron® for everything that should shine."
</ul>
<p>This is done at the <strong>usage</strong> site, not the component: <code>revitCopy</code> no longer passes <code>features</code> or <code>notifyCta</code>, and the <code>:features</code> / <code>:notify-cta</code> / <code>@notify</code> bindings (and the orphaned <code>onRevitNotify</code> handler) were removed. The section now renders <strong>eyebrow + headline + sub only</strong>.</p>
<p><code>Revitalization.vue</code> is unchanged and still reusable — its <code>v-if="features.length"</code> and <code>v-if="notifyCta"</code> guards simply render nothing when those props are absent. The unused <code>revit.feature.*</code> / <code>revit.notifyCta</code> i18n keys are left in place (harmless) in case the section is restored.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/revitalization" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -720,6 +756,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><code>messages.js</code> — full <code>category.kueche.*</code> copy (de + en), mirroring pflege/haushalt.</li>
</ul>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Resolved (see §21).</strong> The three content-complete category pages (<code>/kueche</code>, <code>/haushalt</code>, <code>/pflege</code>) are now wired into the footer. <code>/waesche</code> (wash) is intentionally <strong>deferred</strong> pending brand copy — the shop's in-page <code>wash</code> section covers laundry in the meantime.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/shop" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -740,6 +777,7 @@ EN "Kaiser-Natron® for everything that should shine."
</tbody>
</table>
<p>Route slugs are unchanged (<code>/haushalt</code> still serves the <code>clean</code> group); only the visible labels/eyebrows moved to the new names.</p>
<p class="viewlink-row"><a class="viewlink" href="/kueche" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -764,6 +802,7 @@ EN "Kaiser-Natron® for everything that should shine."
</li>
</ul>
<p>The <code>headline.em</code> stays "Vorteile / Benefits" — it now reads as the bundles' advantages rather than membership perks.</p>
<p class="viewlink-row"><a class="viewlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -779,6 +818,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><code>image-alt</code> → "Kaiser-Natron® Pulver 3.490 g Eimer".</li>
</ul>
<p>No new asset needed — the bucket image already shipped in <code>public/products/</code>.</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -793,6 +833,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li>Stripped the now-dead <code>{ key: 'nav.revitalization', href: '/#revitalize' }</code> entry from every page's nav array (9 files) so nothing links to the missing anchor.</li>
</ul>
<p>Kept in reserve (not deleted): <code>Revitalization.vue</code>, its design-system docs page, the <code>revit.*</code> i18n keys, and the <code>/design/preview/revitalization</code> route — so the section can be reinstated (with a corrected name) by re-adding the import, <code>revitCopy</code>, the render block, and the nav entries.</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -802,6 +843,7 @@ EN "Kaiser-Natron® for everything that should shine."
<div class="files"><span class="file-chip">src/api/products.js</span></div>
<div class="body">
<p>Brand-owner review: <em>Sport Profi is a laundry product and belongs under Household, not Bathing &amp; Care.</em> In the four-group taxonomy laundry = <code>wash</code>, so <code>USE_CASE_BY_CATEGORY.Sport</code> changed <code>'care'</code> → <code>'wash'</code>. The <code>kaiser-natron-sport-profi-250-ml</code> product now appears in the <strong>Wäsche / wash</strong> (plum) section instead of Pflege / care. Doc comment updated to match.</p>
<p class="viewlink-row"><a class="viewlink" href="/shop#wash" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -812,6 +854,7 @@ EN "Kaiser-Natron® for everything that should shine."
<div class="body">
<p>Brand-owner review: the "Original from Austria" claim is inaccurate. Removed the leading sentence from <code>footer.tagline</code> (DE + EN); the tagline now opens at <em>"Reines Natron für Küche, Haushalt und Pflege …"</em> / <em>"Pure sodium bicarbonate for the kitchen, the home, and personal care …"</em>.</p>
<div class="callout info"><span class="ico">ℹ️</span><p>Other Austria-flavoured strings remain and are separate decisions, not part of this change: <code>footer.madeIn</code> / <code>product.prop.made-in-austria</code> ("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.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -834,6 +877,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><code>scrollToSection(id)</code> calls <code>el.scrollIntoView({ behavior: 'smooth' })</code>; each section's existing <code>scroll-mt</code> keeps the landing just below the sticky nav.</li>
</ul>
<p><strong>White gap removed.</strong> The thin white band (<code>-mt-px h-6 md:h-10 bg-cream</code>) and its preceding <code>WaveDivider from="brand" to="cream"</code> — added in §20 — are gone. The green hero now flows <strong>straight into the first colour banner</strong> via a single diagonal: the section loop is <code>(section, i)</code> and the first divider is <code>:from="i === 0 ? 'brand' : 'cream'"</code>.</p>
<p class="viewlink-row"><a class="viewlink" href="/shop" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -851,6 +895,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><strong>Revitalization.</strong> Showcase description notes it's in reserve / not used on the live site (removed in §24).</li>
<li><strong>Stale references swept.</strong> <code>tokens.css</code> header rewritten; checkout font in the Stripe / Express mounts changed from hardcoded DM Sans → the <code>--font-sans</code> stack; "Fraunces" / "pine green" comments corrected.</li>
</ul>
<p class="viewlink-row"><a class="viewlink" href="/design" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -866,6 +911,7 @@ EN "Kaiser-Natron® for everything that should shine."
<pre><code>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</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/colors" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>

88
dist/simple-doc.html vendored
View File

@@ -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 @@
<section class="group">
<h2>Look &amp; feel</h2>
<ul class="items">
<li><strong>Colours.</strong> The site now uses the official brand palette: the deep brand green <code>#006548</code>, a crimson red <code>#cc0230</code> for anything clickable (buttons, "add to cart"), and a soft mint <code>#6eceb2</code> that lights up links when you hover them. The warm yellow <code>#e9c84b</code> is now used only as emphasis text on green. <em>(Full reference at the bottom.)</em></li>
<li><strong>Backgrounds are white.</strong> Pages sit on clean white <code>#ffffff</code> instead of the old tinted panels, so products and text stand out.</li>
<li><strong>Brand typeface.</strong> Headlines and text use the brand's own <strong>"Zeitung"</strong> font, self-hosted by the site (a local <code>.woff2</code> file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.</li>
<li><strong>Section dividers are diagonal.</strong> The wavy lines between coloured bands were replaced with clean diagonal edges.</li>
<li><strong>Buttons.</strong> All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.</li>
<li><strong>Removed the yellow highlight.</strong> Headlines no longer use the old yellow accent; they're cleaner now.</li>
<li><strong>Colours.</strong> The site now uses the official brand palette: the deep brand green <code>#006548</code>, a crimson red <code>#cc0230</code> for anything clickable (buttons, "add to cart"), and a soft mint <code>#6eceb2</code> that lights up links when you hover them. The warm yellow <code>#e9c84b</code> is now used only as emphasis text on green. <em>(Full reference at the bottom.)</em><br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Backgrounds are white.</strong> Pages sit on clean white <code>#ffffff</code> instead of the old tinted panels, so products and text stand out.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Brand typeface.</strong> Headlines and text use the brand's own <strong>"Zeitung"</strong> font, self-hosted by the site (a local <code>.woff2</code> file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Section dividers are diagonal.</strong> The wavy lines between coloured bands were replaced with clean diagonal edges.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Buttons.</strong> All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Removed the yellow highlight.</strong> Headlines no longer use the old yellow accent; they're cleaner now.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Brand details</h2>
<ul class="items">
<li><strong>Trademark &amp; spelling.</strong> Every visible mention now reads <strong>Kaiser-Natron®</strong> — hyphenated, with the ® symbol.</li>
<li><strong>Hero headline.</strong> The opening line now speaks to versatility — <em>"Kaiser-Natron® for almost anything at home"</em> — instead of the old "that should shine" wording.</li>
<li><strong>Intro artwork.</strong> The brand intro uses the official Hebe + waterfall artwork.</li>
<li><strong>250 g pack image.</strong> The large pack image was recoloured to the correct brand green so it no longer clashes with its background.</li>
<li><strong>"One powder, a hundred uses" banner.</strong> This banner used to show the <em>bath</em> product, which didn't match its message. It now shows <strong>powder</strong> (the bulk bucket), and its buttons add/link to that powder product.</li>
<li><strong>Logo &amp; search.</strong> Prices in the search dropdown are now white so they're readable on the green bar.</li>
<li><strong>Trademark &amp; spelling.</strong> Every visible mention now reads <strong>Kaiser-Natron®</strong> — hyphenated, with the ® symbol.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Hero headline.</strong> The opening line now speaks to versatility — <em>"Kaiser-Natron® for almost anything at home"</em> — instead of the old "that should shine" wording.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Intro artwork.</strong> The brand intro uses the official Hebe + waterfall artwork.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>250 g pack image.</strong> The large pack image was recoloured to the correct brand green so it no longer clashes with its background.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>"One powder, a hundred uses" banner.</strong> This banner used to show the <em>bath</em> product, which didn't match its message. It now shows <strong>powder</strong> (the bulk bucket), and its buttons add/link to that powder product.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Logo &amp; search.</strong> Prices in the search dropdown are now white so they're readable on the green bar.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Honesty &amp; content</h2>
<ul class="items">
<li><strong>"AI Edited" note on bundle images.</strong> 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.)</li>
<li><strong>Revitalization section removed.</strong> 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.</li>
<li><strong>"The Original from Austria" removed.</strong> That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.</li>
<li><strong>Membership fully removed.</strong> 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. <strong>Bundles now show a single price</strong> everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.</li>
<li><strong>"AI Edited" note on bundle images.</strong> 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.)<br><a class="cardlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Revitalization section removed.</strong> 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.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>"The Original from Austria" removed.</strong> That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Membership fully removed.</strong> 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. <strong>Bundles now show a single price</strong> everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.<br><a class="cardlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
@@ -213,29 +247,31 @@
<li>
<strong>Four colour-coded sections.</strong> The shop is now organised by what you're doing, each with its own brand colour:
<div class="cats">
<div class="cat"><span class="sw" style="background:var(--kitchen)"></span> <span><strong>Küche / Kitchen</strong> — lime green <code>#c6d47d</code> (baking, cooking, digestion)</span></div>
<div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong>Reinigung / Clean</strong> — grapefruit red <code>#eb5a61</code> (household cleaning)</span></div>
<div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong>Wäsche / Wash</strong> — plum <code>#c15a7e</code> (laundry &amp; textile care)</span></div>
<div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong>Pflege / Care</strong> — orange <code>#f1864c</code> (bath, body)</span></div>
<div class="cat"><span class="sw" style="background:var(--kitchen)"></span> <span><strong><a href="/shop#cook" target="_blank" rel="noopener">Küche / Kitchen</a></strong> — lime green <code>#c6d47d</code> (baking, cooking, digestion)</span></div>
<div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong><a href="/shop#clean" target="_blank" rel="noopener">Reinigung / Clean</a></strong> — grapefruit red <code>#eb5a61</code> (household cleaning)</span></div>
<div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong><a href="/shop#wash" target="_blank" rel="noopener">Wäsche / Wash</a></strong> — plum <code>#c15a7e</code> (laundry &amp; textile care)</span></div>
<div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong><a href="/shop#care" target="_blank" rel="noopener">Pflege / Care</a></strong> — orange <code>#f1864c</code> (bath, body)</span></div>
</div>
<a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a>
</li>
<li><strong>Banners.</strong> Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.</li>
<li><strong>Quick category buttons.</strong> 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).</li>
<li><strong>Sport Profi moved to Laundry.</strong> It's a laundry product, so it now sits under Wäsche / Wash instead of Care.</li>
<li><strong>Banners.</strong> Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Quick category buttons.</strong> 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).<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Sport Profi moved to Laundry.</strong> It's a laundry product, so it now sits under Wäsche / Wash instead of Care.<br><a class="cardlink" href="/shop#wash" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Category pages</h2>
<ul class="items">
<li><strong>Three dedicated pages are now reachable</strong> from the footer: <strong>Küche</strong>, <strong>Reinigung</strong> (Haushalt) and <strong>Pflege</strong> — each a fuller landing page with its own products, benefits and call-to-action.</li>
<li><strong>Consistent names.</strong> These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.</li>
<li><strong>Wäsche / Wash page is on hold</strong> until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.</li>
<li><strong>Three dedicated pages are now reachable</strong> from the footer: <strong><a href="/kueche" target="_blank" rel="noopener">Küche</a></strong>, <strong><a href="/haushalt" target="_blank" rel="noopener">Reinigung</a></strong> (Haushalt) and <strong><a href="/pflege" target="_blank" rel="noopener">Pflege</a></strong> — each a fuller landing page with its own products, benefits and call-to-action.<br><a class="cardlink" href="/kueche" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Consistent names.</strong> These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.<br><a class="cardlink" href="/kueche" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Wäsche / Wash page is on hold</strong> until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.<br><a class="cardlink" href="/shop#wash" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Quick reference (for the developer)</h2>
<p class="viewlink-row"><a class="viewlink" href="/design" target="_blank" rel="noopener">Open the design system</a></p>
<p style="font-size:14px;color:var(--muted);margin:0 0 14px;">The exact values, in case they're handy — nothing you need to act on.</p>
<div class="refgrid">
<div class="refcard"><span class="chip" style="background:#006548"></span><span><span class="role">Brand green</span><span class="hex">#006548</span></span></div>

46
public/dev-doc.html
View File

@@ -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;</code></pre>
<p>Because these are registered in <code>@theme</code>, Tailwind auto-generates the utility classes <code>bg-accent-fill</code>, <code>text-accent-fill-ink</code>, <code>border-accent-fill</code>, <code>hover:bg-accent-fill-hover</code>, and <code>text-highlight</code> / <code>hover:text-highlight</code>.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/colors" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -395,6 +413,7 @@
--color-surface: #faf7f1; → #ffffff;</code></pre>
<p><code>index.html</code> — the browser theme colour was matched to white:</p>
<pre><code>&lt;meta name="theme-color" content="#ffffff" /&gt; &lt;!-- was #faf7f1 --&gt;</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/colors" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -413,6 +432,7 @@
@font-face { font-family:'Zeitung'; font-weight:700; font-display:swap;
src:url('./fonts/Zeitung-Bold.woff2') format('woff2'); }</code></pre>
<p><code>index.html</code> — the Google Fonts <code>&lt;link&gt;</code> (Fraunces + DM Sans) and its <code>preconnect</code> hints were <strong>removed</strong>.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/typography" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -441,6 +461,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
</tbody>
</table>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Note:</strong> <code>secondary</code> and <code>accent</code> are currently identical (both crimson). The Hero's "Learn more" secondary CTA (rendered inline, see §5) was matched to the same crimson fill.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/design/buttons" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -454,6 +475,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
text-[14px] font-semibold uppercase tracking-label text-accent-fill-ink
transition-colors duration-base hover:bg-accent-fill-hover"</code></pre>
<p>The Hero's <strong>primary</strong> CTA already uses the <code>accent</code> variant on green surfaces, so it's crimson too.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/hero" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -473,6 +495,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
<tr><td><code>BundlePage.vue</code></td><td>add-to-cart already <code>accent</code> (unchanged)</td></tr>
</tbody>
</table>
<p class="viewlink-row"><a class="viewlink" href="/design/buttons" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -483,6 +506,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
<div class="body">
<pre><code>&lt;!-- checkout button --&gt;
&lt;Button variant="accent" …&gt; &lt;!-- was variant="primary" --&gt;</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/buttons" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -509,6 +533,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
color: var(--color-accent-fill-ink);
border-color: var(--color-accent-fill);
}</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/badges" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -521,6 +546,7 @@ lg: 'text-[14px] px-[34px] py-[17px] tracking-label',</code></pre>
<pre><code>text-accent → text-highlight (active nav tab)
hover:text-accent → hover:text-highlight (nav tab + footer link hover)</code></pre>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Not changed:</strong> the mobile cart-count number badge (<code>Navbar.vue</code>, a green circle with a count) is still yellow — it's a count indicator, not a tab highlight. Easy to switch if wanted.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/design/navbar" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -539,6 +565,7 @@ hover:text-accent → hover:text-highlight (nav tab + footer link hover)</cod
</tbody>
</table>
<p>(<code>--color-cream</code> is now <code>#ffffff</code>, so these read as white on the green heroes.)</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -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</code></pre>
<p>The seam-free construction is unchanged: a full-height <code>&lt;rect&gt;</code> paints the <em>lower</em> section colour and the <code>&lt;path&gt;</code> paints the <em>upper</em> section colour.</p>
<p>The same diagonal divider also sits between the <strong>Kaiserhacks</strong> green header and the white body below it: <code>Kaiserhacks.vue</code> imports <code>WaveDivider</code> and renders <code>&lt;WaveDivider from="brand" to="surface" /&gt;</code> between the <code>bg-brand</code> header and the content <code>&lt;div&gt;</code> (which gains <code>-mt-px</code> to sit flush).</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -565,6 +593,7 @@ path: (cubic-bézier wave) → M0,0 L0,116 L1440,12 L1440,0 Z</code></pre>
<pre><code>// brand tone
price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<p>The <code>paper</code> and <code>cream</code> tones keep <code>text-brand</code> (unchanged).</p>
<p class="viewlink-row"><a class="viewlink" href="/design/search" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -581,6 +610,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<li><strong>Animation unchanged</strong> — same choreography/timing: lady slides in from the left (<code>left-m</code>), waterfall from the right (<code>right-m</code>), the white natron fades in once she's landed (<code>mound-m</code>), tagline + SINCE 1881 last; same edge-feather mask and reduced-motion handling.</li>
</ul>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Side effect:</strong> the home-page chunk shrank ~214 KB → ~70 KB because the new <code>heroFigures.js</code> (~57 KB) replaces the much larger traced <code>splashPaths.js</code> import. <code>splashPaths.js</code> / <code>SplashIntro.vue</code> remain only as unused legacy.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -594,6 +624,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<li><strong>Where product images live:</strong> <code>public/products/*.webp</code> (served as static assets; the build mirrors them to <code>dist/products/*.webp</code>). Convention: <strong>transparent RGBA, ~1200 px tall</strong>.</li>
<li>The replacement was supplied as a 939×1200 transparent PNG and saved straight to WebP (<code>quality 92</code>, no scaling needed — already matching the original dimensions), so edges/text stay crisp.</li>
</ul>
<p class="viewlink-row"><a class="viewlink" href="/shop" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -603,6 +634,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
<div class="files"><span class="file-chip">src/pages/design/ColorsSection.vue</span></div>
<div class="body">
<p>The new <code>accent-fill</code>, <code>accent-fill-hover</code>, <code>accent-fill-ink</code> tokens were added to the colour-swatch reference so the in-app design-system page stays accurate.</p>
<p class="viewlink-row"><a class="viewlink" href="/design" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -626,6 +658,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
</tbody>
</table>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Not touched:</strong> generic ingredient references ("Natron", "Natronwasser", "Natron-basierte …") — those mean the substance, not the brand, so they take no ®. Image <code>alt</code> text keeps the plain hyphenated name (not on-screen).</p></div>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -640,6 +673,7 @@ price: 'text-accent' → 'text-cream' // (#ffffff on green)</code></pre>
EN "Kaiser-Natron® for everything that should shine."
→ "Kaiser-Natron® for almost anything at home."</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -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)]"&gt;AI Edited&lt;/span&gt;</code></pre>
<div class="callout info"><span class="ico">ℹ️</span><p>Set a bundle's <code>aiEdited: false</code> (or drop it) in <code>bundles.js</code> to remove the badge once its image is a real photo.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -674,6 +709,7 @@ EN "Kaiser-Natron® for everything that should shine."
</ul>
<p>This is done at the <strong>usage</strong> site, not the component: <code>revitCopy</code> no longer passes <code>features</code> or <code>notifyCta</code>, and the <code>:features</code> / <code>:notify-cta</code> / <code>@notify</code> bindings (and the orphaned <code>onRevitNotify</code> handler) were removed. The section now renders <strong>eyebrow + headline + sub only</strong>.</p>
<p><code>Revitalization.vue</code> is unchanged and still reusable — its <code>v-if="features.length"</code> and <code>v-if="notifyCta"</code> guards simply render nothing when those props are absent. The unused <code>revit.feature.*</code> / <code>revit.notifyCta</code> i18n keys are left in place (harmless) in case the section is restored.</p>
<p class="viewlink-row"><a class="viewlink" href="/design/revitalization" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -720,6 +756,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><code>messages.js</code> — full <code>category.kueche.*</code> copy (de + en), mirroring pflege/haushalt.</li>
</ul>
<div class="callout info"><span class="ico">ℹ️</span><p><strong>Resolved (see §21).</strong> The three content-complete category pages (<code>/kueche</code>, <code>/haushalt</code>, <code>/pflege</code>) are now wired into the footer. <code>/waesche</code> (wash) is intentionally <strong>deferred</strong> pending brand copy — the shop's in-page <code>wash</code> section covers laundry in the meantime.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/shop" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -740,6 +777,7 @@ EN "Kaiser-Natron® for everything that should shine."
</tbody>
</table>
<p>Route slugs are unchanged (<code>/haushalt</code> still serves the <code>clean</code> group); only the visible labels/eyebrows moved to the new names.</p>
<p class="viewlink-row"><a class="viewlink" href="/kueche" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -764,6 +802,7 @@ EN "Kaiser-Natron® for everything that should shine."
</li>
</ul>
<p>The <code>headline.em</code> stays "Vorteile / Benefits" — it now reads as the bundles' advantages rather than membership perks.</p>
<p class="viewlink-row"><a class="viewlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -779,6 +818,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><code>image-alt</code> → "Kaiser-Natron® Pulver 3.490 g Eimer".</li>
</ul>
<p>No new asset needed — the bucket image already shipped in <code>public/products/</code>.</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -793,6 +833,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li>Stripped the now-dead <code>{ key: 'nav.revitalization', href: '/#revitalize' }</code> entry from every page's nav array (9 files) so nothing links to the missing anchor.</li>
</ul>
<p>Kept in reserve (not deleted): <code>Revitalization.vue</code>, its design-system docs page, the <code>revit.*</code> i18n keys, and the <code>/design/preview/revitalization</code> route — so the section can be reinstated (with a corrected name) by re-adding the import, <code>revitCopy</code>, the render block, and the nav entries.</p>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -802,6 +843,7 @@ EN "Kaiser-Natron® for everything that should shine."
<div class="files"><span class="file-chip">src/api/products.js</span></div>
<div class="body">
<p>Brand-owner review: <em>Sport Profi is a laundry product and belongs under Household, not Bathing &amp; Care.</em> In the four-group taxonomy laundry = <code>wash</code>, so <code>USE_CASE_BY_CATEGORY.Sport</code> changed <code>'care'</code> → <code>'wash'</code>. The <code>kaiser-natron-sport-profi-250-ml</code> product now appears in the <strong>Wäsche / wash</strong> (plum) section instead of Pflege / care. Doc comment updated to match.</p>
<p class="viewlink-row"><a class="viewlink" href="/shop#wash" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -812,6 +854,7 @@ EN "Kaiser-Natron® for everything that should shine."
<div class="body">
<p>Brand-owner review: the "Original from Austria" claim is inaccurate. Removed the leading sentence from <code>footer.tagline</code> (DE + EN); the tagline now opens at <em>"Reines Natron für Küche, Haushalt und Pflege …"</em> / <em>"Pure sodium bicarbonate for the kitchen, the home, and personal care …"</em>.</p>
<div class="callout info"><span class="ico">ℹ️</span><p>Other Austria-flavoured strings remain and are separate decisions, not part of this change: <code>footer.madeIn</code> / <code>product.prop.made-in-austria</code> ("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.</p></div>
<p class="viewlink-row"><a class="viewlink" href="/" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -834,6 +877,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><code>scrollToSection(id)</code> calls <code>el.scrollIntoView({ behavior: 'smooth' })</code>; each section's existing <code>scroll-mt</code> keeps the landing just below the sticky nav.</li>
</ul>
<p><strong>White gap removed.</strong> The thin white band (<code>-mt-px h-6 md:h-10 bg-cream</code>) and its preceding <code>WaveDivider from="brand" to="cream"</code> — added in §20 — are gone. The green hero now flows <strong>straight into the first colour banner</strong> via a single diagonal: the section loop is <code>(section, i)</code> and the first divider is <code>:from="i === 0 ? 'brand' : 'cream'"</code>.</p>
<p class="viewlink-row"><a class="viewlink" href="/shop" target="_blank" rel="noopener">View on site</a></p>
</div>
</div>
@@ -851,6 +895,7 @@ EN "Kaiser-Natron® for everything that should shine."
<li><strong>Revitalization.</strong> Showcase description notes it's in reserve / not used on the live site (removed in §24).</li>
<li><strong>Stale references swept.</strong> <code>tokens.css</code> header rewritten; checkout font in the Stripe / Express mounts changed from hardcoded DM Sans → the <code>--font-sans</code> stack; "Fraunces" / "pine green" comments corrected.</li>
</ul>
<p class="viewlink-row"><a class="viewlink" href="/design" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>
@@ -866,6 +911,7 @@ EN "Kaiser-Natron® for everything that should shine."
<pre><code>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</code></pre>
<p class="viewlink-row"><a class="viewlink" href="/design/colors" target="_blank" rel="noopener">Open in /design</a></p>
</div>
</div>

88
public/simple-doc.html
View File

@@ -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 @@
<section class="group">
<h2>Look &amp; feel</h2>
<ul class="items">
<li><strong>Colours.</strong> The site now uses the official brand palette: the deep brand green <code>#006548</code>, a crimson red <code>#cc0230</code> for anything clickable (buttons, "add to cart"), and a soft mint <code>#6eceb2</code> that lights up links when you hover them. The warm yellow <code>#e9c84b</code> is now used only as emphasis text on green. <em>(Full reference at the bottom.)</em></li>
<li><strong>Backgrounds are white.</strong> Pages sit on clean white <code>#ffffff</code> instead of the old tinted panels, so products and text stand out.</li>
<li><strong>Brand typeface.</strong> Headlines and text use the brand's own <strong>"Zeitung"</strong> font, self-hosted by the site (a local <code>.woff2</code> file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.</li>
<li><strong>Section dividers are diagonal.</strong> The wavy lines between coloured bands were replaced with clean diagonal edges.</li>
<li><strong>Buttons.</strong> All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.</li>
<li><strong>Removed the yellow highlight.</strong> Headlines no longer use the old yellow accent; they're cleaner now.</li>
<li><strong>Colours.</strong> The site now uses the official brand palette: the deep brand green <code>#006548</code>, a crimson red <code>#cc0230</code> for anything clickable (buttons, "add to cart"), and a soft mint <code>#6eceb2</code> that lights up links when you hover them. The warm yellow <code>#e9c84b</code> is now used only as emphasis text on green. <em>(Full reference at the bottom.)</em><br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Backgrounds are white.</strong> Pages sit on clean white <code>#ffffff</code> instead of the old tinted panels, so products and text stand out.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Brand typeface.</strong> Headlines and text use the brand's own <strong>"Zeitung"</strong> font, self-hosted by the site (a local <code>.woff2</code> file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Section dividers are diagonal.</strong> The wavy lines between coloured bands were replaced with clean diagonal edges.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Buttons.</strong> All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Removed the yellow highlight.</strong> Headlines no longer use the old yellow accent; they're cleaner now.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Brand details</h2>
<ul class="items">
<li><strong>Trademark &amp; spelling.</strong> Every visible mention now reads <strong>Kaiser-Natron®</strong> — hyphenated, with the ® symbol.</li>
<li><strong>Hero headline.</strong> The opening line now speaks to versatility — <em>"Kaiser-Natron® for almost anything at home"</em> — instead of the old "that should shine" wording.</li>
<li><strong>Intro artwork.</strong> The brand intro uses the official Hebe + waterfall artwork.</li>
<li><strong>250 g pack image.</strong> The large pack image was recoloured to the correct brand green so it no longer clashes with its background.</li>
<li><strong>"One powder, a hundred uses" banner.</strong> This banner used to show the <em>bath</em> product, which didn't match its message. It now shows <strong>powder</strong> (the bulk bucket), and its buttons add/link to that powder product.</li>
<li><strong>Logo &amp; search.</strong> Prices in the search dropdown are now white so they're readable on the green bar.</li>
<li><strong>Trademark &amp; spelling.</strong> Every visible mention now reads <strong>Kaiser-Natron®</strong> — hyphenated, with the ® symbol.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Hero headline.</strong> The opening line now speaks to versatility — <em>"Kaiser-Natron® for almost anything at home"</em> — instead of the old "that should shine" wording.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Intro artwork.</strong> The brand intro uses the official Hebe + waterfall artwork.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>250 g pack image.</strong> The large pack image was recoloured to the correct brand green so it no longer clashes with its background.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>"One powder, a hundred uses" banner.</strong> This banner used to show the <em>bath</em> product, which didn't match its message. It now shows <strong>powder</strong> (the bulk bucket), and its buttons add/link to that powder product.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Logo &amp; search.</strong> Prices in the search dropdown are now white so they're readable on the green bar.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Honesty &amp; content</h2>
<ul class="items">
<li><strong>"AI Edited" note on bundle images.</strong> 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.)</li>
<li><strong>Revitalization section removed.</strong> 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.</li>
<li><strong>"The Original from Austria" removed.</strong> That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.</li>
<li><strong>Membership fully removed.</strong> 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. <strong>Bundles now show a single price</strong> everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.</li>
<li><strong>"AI Edited" note on bundle images.</strong> 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.)<br><a class="cardlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Revitalization section removed.</strong> 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.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>"The Original from Austria" removed.</strong> That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.<br><a class="cardlink" href="/" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Membership fully removed.</strong> 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. <strong>Bundles now show a single price</strong> everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.<br><a class="cardlink" href="/#bundles" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
@@ -213,29 +247,31 @@
<li>
<strong>Four colour-coded sections.</strong> The shop is now organised by what you're doing, each with its own brand colour:
<div class="cats">
<div class="cat"><span class="sw" style="background:var(--kitchen)"></span> <span><strong>Küche / Kitchen</strong> — lime green <code>#c6d47d</code> (baking, cooking, digestion)</span></div>
<div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong>Reinigung / Clean</strong> — grapefruit red <code>#eb5a61</code> (household cleaning)</span></div>
<div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong>Wäsche / Wash</strong> — plum <code>#c15a7e</code> (laundry &amp; textile care)</span></div>
<div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong>Pflege / Care</strong> — orange <code>#f1864c</code> (bath, body)</span></div>
<div class="cat"><span class="sw" style="background:var(--kitchen)"></span> <span><strong><a href="/shop#cook" target="_blank" rel="noopener">Küche / Kitchen</a></strong> — lime green <code>#c6d47d</code> (baking, cooking, digestion)</span></div>
<div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong><a href="/shop#clean" target="_blank" rel="noopener">Reinigung / Clean</a></strong> — grapefruit red <code>#eb5a61</code> (household cleaning)</span></div>
<div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong><a href="/shop#wash" target="_blank" rel="noopener">Wäsche / Wash</a></strong> — plum <code>#c15a7e</code> (laundry &amp; textile care)</span></div>
<div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong><a href="/shop#care" target="_blank" rel="noopener">Pflege / Care</a></strong> — orange <code>#f1864c</code> (bath, body)</span></div>
</div>
<a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a>
</li>
<li><strong>Banners.</strong> Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.</li>
<li><strong>Quick category buttons.</strong> 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).</li>
<li><strong>Sport Profi moved to Laundry.</strong> It's a laundry product, so it now sits under Wäsche / Wash instead of Care.</li>
<li><strong>Banners.</strong> Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Quick category buttons.</strong> 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).<br><a class="cardlink" href="/shop" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Sport Profi moved to Laundry.</strong> It's a laundry product, so it now sits under Wäsche / Wash instead of Care.<br><a class="cardlink" href="/shop#wash" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Category pages</h2>
<ul class="items">
<li><strong>Three dedicated pages are now reachable</strong> from the footer: <strong>Küche</strong>, <strong>Reinigung</strong> (Haushalt) and <strong>Pflege</strong> — each a fuller landing page with its own products, benefits and call-to-action.</li>
<li><strong>Consistent names.</strong> These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.</li>
<li><strong>Wäsche / Wash page is on hold</strong> until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.</li>
<li><strong>Three dedicated pages are now reachable</strong> from the footer: <strong><a href="/kueche" target="_blank" rel="noopener">Küche</a></strong>, <strong><a href="/haushalt" target="_blank" rel="noopener">Reinigung</a></strong> (Haushalt) and <strong><a href="/pflege" target="_blank" rel="noopener">Pflege</a></strong> — each a fuller landing page with its own products, benefits and call-to-action.<br><a class="cardlink" href="/kueche" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Consistent names.</strong> These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.<br><a class="cardlink" href="/kueche" target="_blank" rel="noopener">View on site</a></li>
<li><strong>Wäsche / Wash page is on hold</strong> until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.<br><a class="cardlink" href="/shop#wash" target="_blank" rel="noopener">View on site</a></li>
</ul>
</section>
<section class="group">
<h2>Quick reference (for the developer)</h2>
<p class="viewlink-row"><a class="viewlink" href="/design" target="_blank" rel="noopener">Open the design system</a></p>
<p style="font-size:14px;color:var(--muted);margin:0 0 14px;">The exact values, in case they're handy — nothing you need to act on.</p>
<div class="refgrid">
<div class="refcard"><span class="chip" style="background:#006548"></span><span><span class="role">Brand green</span><span class="hex">#006548</span></span></div>