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

docs: add served plain-language guide at /simple-doc.html

Browse Source 
HTML render of STYLE-CHANGES-simple.md, styled to match dev-doc/review-doc
(brand hero, category swatches, crimson "waiting on you" section). Flat
file in public/ so it serves at /simple-doc.html in dev and prod. dist/ rebuilt.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-06-24 10:20:08 +01:00
parent d3ccc30715
commit c24be1a015
2 changed files with 460 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
dist/simple-doc.html vendored Normal file
View File

@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kaiser-Natron® — What Changed (Plain-Language Guide)</title>
<style>
:root {
--brand: #006548;
--brand-soft: #4a9079;
--crimson: #cc0230;
--mint: #6eceb2;
--gold: #e9c84b;
--ink: #0a2c20;
--muted: #5c7a6f;
--paper: #ffffff;
--cream: #f4f7f4;
--line: #d9e4df;
--kitchen: #c6d47d;
--clean: #eb5a61;
--wash: #c15a7e;
--care: #f1864c;
--serif: 'Zeitung', 'Iowan Old Style', 'Palatino', Georgia, serif;
--sans: 'Zeitung', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.6;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
/* Header */
header.hero {
background: var(--brand);
color: #fff;
padding: 56px 24px 64px;
position: relative;
overflow: hidden;
}
header.hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 64px;
background: var(--cream);
clip-path: polygon(0 100%, 100% 100%, 100% 38%);
}
.hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }
.eyebrow {
text-transform: uppercase;
letter-spacing: .22em;
font-size: 12px;
font-weight: 600;
color: var(--mint);
margin: 0 0 14px;
}
h1 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(30px, 5vw, 46px);
line-height: 1.05;
margin: 0 0 14px;
letter-spacing: -0.01em;
}
h1 em { font-style: italic; font-weight: 300; color: var(--mint); }
.hero p { max-width: 60ch; color: rgba(255,255,255,.85); margin: 0; font-size: 16px; }
.meta { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.7); }
/* Intro */
.intro {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 22px;
margin: -34px 0 38px;
position: relative;
z-index: 2;
box-shadow: 0 10px 30px rgba(0,101,72,.07);
font-size: 15px;
color: var(--muted);
}
/* Sections */
section.group { margin-bottom: 34px; }
.group > h2 {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--brand);
}
ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.items li {
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--mint);
border-radius: 10px;
padding: 14px 16px;
font-size: 15px;
}
ul.items li strong { color: var(--brand); font-weight: 600; }
ul.items li em { font-style: italic; color: var(--ink); }
/* Category swatch list */
.cats { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.cat .sw { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06); }
/* "Waiting on you" — crimson accent */
.group.waiting > h2 { border-bottom-color: var(--crimson); }
.group.waiting ul.items li { border-left-color: var(--crimson); }
footer.foot {
margin-top: 44px;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 12.5px;
color: var(--muted);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
@media print {
body { background: #fff; }
.intro, ul.items li { box-shadow: none; }
ul.items li { break-inside: avoid; }
}
</style>
</head>
<body>
<header class="hero">
<div class="hero-inner">
<p class="eyebrow">Plain-Language Guide</p>
<h1>Kaiser-Natron<sup>®</sup> —<br><em>what changed, in plain words</em></h1>
<p>A non-technical summary of the visual and content changes to the site. The detailed developer version lives at <strong>/dev-doc.html</strong> — this is the same story without the code.</p>
<p class="meta">Updated 24 June 2026 · Branch feat/shop-category-sections</p>
</div>
</header>
<div class="wrap">
<div class="intro">
Everything below pulls the site <em>toward</em> the established Kaiser-Natron® brand — the official palette, typeface and angular design — rather than introducing a new look.
</div>
<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, a crimson red for anything clickable (buttons, "add to cart"), and a soft mint that lights up links when you hover them.</li>
<li><strong>Backgrounds are white.</strong> Pages sit on clean white 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 "Zeitung" font, loaded directly by the site (not borrowed from Google), so it always looks the same and loads fast.</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>
</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>
</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>
</ul>
</section>
<section class="group">
<h2>The shop, by use</h2>
<ul class="items">
<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 (baking, cooking, digestion)</span></div>
<div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong>Reinigung / Clean</strong> — grapefruit red (household cleaning)</span></div>
<div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong>Wäsche / Wash</strong> — plum (laundry &amp; textile care)</span></div>
<div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong>Pflege / Care</strong> — orange (bath, body)</span></div>
</div>
</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>
</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>
</ul>
</section>
<section class="group waiting">
<h2>Still waiting on a decision (content owner)</h2>
<ul class="items">
<li><strong>Remaining origin wording.</strong> The "Original from Austria" line is gone, but a couple of "bottled in Austria" mentions and the Vienna imprint address remain. Let us know if the correction should extend to those.</li>
<li><strong>Holste &amp; Linda product descriptions.</strong> These aren't on the brand site, so the copy needs to come from you.</li>
<li><strong>Wäsche / Wash landing page.</strong> Provide copy if you want a dedicated page.</li>
<li><strong>Legal pages.</strong> Terms (AGB), withdrawal/cancellation, shipping, delivery costs, and the manufacturer-vs-reseller transparency note.</li>
</ul>
</section>
<footer class="foot">
<span>Kaiser-Natron® — plain-language change guide</span>
<span>Detailed version: /dev-doc.html</span>
</footer>
</div>
</body>
</html>

230
public/simple-doc.html Normal file
View File

@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kaiser-Natron® — What Changed (Plain-Language Guide)</title>
<style>
:root {
--brand: #006548;
--brand-soft: #4a9079;
--crimson: #cc0230;
--mint: #6eceb2;
--gold: #e9c84b;
--ink: #0a2c20;
--muted: #5c7a6f;
--paper: #ffffff;
--cream: #f4f7f4;
--line: #d9e4df;
--kitchen: #c6d47d;
--clean: #eb5a61;
--wash: #c15a7e;
--care: #f1864c;
--serif: 'Zeitung', 'Iowan Old Style', 'Palatino', Georgia, serif;
--sans: 'Zeitung', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.6;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
/* Header */
header.hero {
background: var(--brand);
color: #fff;
padding: 56px 24px 64px;
position: relative;
overflow: hidden;
}
header.hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 64px;
background: var(--cream);
clip-path: polygon(0 100%, 100% 100%, 100% 38%);
}
.hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }
.eyebrow {
text-transform: uppercase;
letter-spacing: .22em;
font-size: 12px;
font-weight: 600;
color: var(--mint);
margin: 0 0 14px;
}
h1 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(30px, 5vw, 46px);
line-height: 1.05;
margin: 0 0 14px;
letter-spacing: -0.01em;
}
h1 em { font-style: italic; font-weight: 300; color: var(--mint); }
.hero p { max-width: 60ch; color: rgba(255,255,255,.85); margin: 0; font-size: 16px; }
.meta { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.7); }
/* Intro */
.intro {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 22px;
margin: -34px 0 38px;
position: relative;
z-index: 2;
box-shadow: 0 10px 30px rgba(0,101,72,.07);
font-size: 15px;
color: var(--muted);
}
/* Sections */
section.group { margin-bottom: 34px; }
.group > h2 {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--brand);
}
ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.items li {
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--mint);
border-radius: 10px;
padding: 14px 16px;
font-size: 15px;
}
ul.items li strong { color: var(--brand); font-weight: 600; }
ul.items li em { font-style: italic; color: var(--ink); }
/* Category swatch list */
.cats { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.cat .sw { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06); }
/* "Waiting on you" — crimson accent */
.group.waiting > h2 { border-bottom-color: var(--crimson); }
.group.waiting ul.items li { border-left-color: var(--crimson); }
footer.foot {
margin-top: 44px;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 12.5px;
color: var(--muted);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
@media print {
body { background: #fff; }
.intro, ul.items li { box-shadow: none; }
ul.items li { break-inside: avoid; }
}
</style>
</head>
<body>
<header class="hero">
<div class="hero-inner">
<p class="eyebrow">Plain-Language Guide</p>
<h1>Kaiser-Natron<sup>®</sup> —<br><em>what changed, in plain words</em></h1>
<p>A non-technical summary of the visual and content changes to the site. The detailed developer version lives at <strong>/dev-doc.html</strong> — this is the same story without the code.</p>
<p class="meta">Updated 24 June 2026 · Branch feat/shop-category-sections</p>
</div>
</header>
<div class="wrap">
<div class="intro">
Everything below pulls the site <em>toward</em> the established Kaiser-Natron® brand — the official palette, typeface and angular design — rather than introducing a new look.
</div>
<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, a crimson red for anything clickable (buttons, "add to cart"), and a soft mint that lights up links when you hover them.</li>
<li><strong>Backgrounds are white.</strong> Pages sit on clean white 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 "Zeitung" font, loaded directly by the site (not borrowed from Google), so it always looks the same and loads fast.</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>
</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>
</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>
</ul>
</section>
<section class="group">
<h2>The shop, by use</h2>
<ul class="items">
<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 (baking, cooking, digestion)</span></div>
<div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong>Reinigung / Clean</strong> — grapefruit red (household cleaning)</span></div>
<div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong>Wäsche / Wash</strong> — plum (laundry &amp; textile care)</span></div>
<div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong>Pflege / Care</strong> — orange (bath, body)</span></div>
</div>
</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>
</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>
</ul>
</section>
<section class="group waiting">
<h2>Still waiting on a decision (content owner)</h2>
<ul class="items">
<li><strong>Remaining origin wording.</strong> The "Original from Austria" line is gone, but a couple of "bottled in Austria" mentions and the Vienna imprint address remain. Let us know if the correction should extend to those.</li>
<li><strong>Holste &amp; Linda product descriptions.</strong> These aren't on the brand site, so the copy needs to come from you.</li>
<li><strong>Wäsche / Wash landing page.</strong> Provide copy if you want a dedicated page.</li>
<li><strong>Legal pages.</strong> Terms (AGB), withdrawal/cancellation, shipping, delivery costs, and the manufacturer-vs-reseller transparency note.</li>
</ul>
</section>
<footer class="foot">
<span>Kaiser-Natron® — plain-language change guide</span>
<span>Detailed version: /dev-doc.html</span>
</footer>
</div>
</body>
</html>