123dd321df
- nginx: try_files adds $uri.html so /dev-doc, /simple-doc, /review-doc resolve to the flat .html files before the SPA fallback (prod). - vite: dev-only middleware mirrors the same rewrite so the clean URLs work under `vite dev` too (no SPA-fallback / router warning). - simple-doc: add hex values inline + a "Quick reference (for the developer)" swatch grid (full palette + category colours) and type/ button/divider specs — kept layman. Cross-links now use /dev-doc. dist/ rebuilt. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
277 lines
15 KiB
HTML
277 lines
15 KiB
HTML
<!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); }
|
|
|
|
code {
|
|
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
font-size: 0.86em;
|
|
background: var(--cream);
|
|
border: 1px solid var(--line);
|
|
border-radius: 5px;
|
|
padding: 1px 6px;
|
|
color: var(--brand);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Developer reference — swatch cards + spec rows */
|
|
.refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
|
|
.refcard {
|
|
display: flex; align-items: center; gap: 12px;
|
|
background: var(--paper); border: 1px solid var(--line);
|
|
border-radius: 10px; padding: 10px 12px;
|
|
}
|
|
.refcard .chip { width: 34px; height: 34px; border-radius: 7px; flex: none; border: 1px solid rgba(0,0,0,.08); }
|
|
.refcard .role { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
|
|
.refcard .hex { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); }
|
|
.specs { margin: 14px 0 0; font-size: 14px; color: var(--ink); }
|
|
.specs li { margin-bottom: 6px; }
|
|
|
|
/* "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</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 & 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>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="group">
|
|
<h2>Brand details</h2>
|
|
<ul class="items">
|
|
<li><strong>Trademark & 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 & 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 & 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 <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 & 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>
|
|
</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">
|
|
<h2>Quick reference (for the developer)</h2>
|
|
<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>
|
|
<div class="refcard"><span class="chip" style="background:#cc0230"></span><span><span class="role">Crimson — buttons/CTAs</span><span class="hex">#cc0230</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#6eceb2"></span><span><span class="role">Mint — link hover</span><span class="hex">#6eceb2</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#e9c84b"></span><span><span class="role">Yellow — emphasis on green</span><span class="hex">#e9c84b</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#ffffff"></span><span><span class="role">White — backgrounds</span><span class="hex">#ffffff</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#c6d47d"></span><span><span class="role">Kitchen — lime</span><span class="hex">#c6d47d</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#eb5a61"></span><span><span class="role">Clean — grapefruit</span><span class="hex">#eb5a61</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#c15a7e"></span><span><span class="role">Wash — plum</span><span class="hex">#c15a7e</span></span></div>
|
|
<div class="refcard"><span class="chip" style="background:#f1864c"></span><span><span class="role">Care — orange</span><span class="hex">#f1864c</span></span></div>
|
|
</div>
|
|
<ul class="specs">
|
|
<li><strong>Typeface:</strong> Zeitung (self-hosted <code>.woff2</code>), one family for headlines and body.</li>
|
|
<li><strong>Buttons:</strong> fully rounded "pill" shape; crimson fill with white text.</li>
|
|
<li><strong>Dividers:</strong> straight diagonal edges between coloured bands (no waves).</li>
|
|
<li><strong>Full technical detail:</strong> see <strong>/dev-doc</strong>.</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 & 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</span>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|