321 lines
19 KiB
HTML
321 lines
19 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); }
|
|
|
|
/* "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;
|
|
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 26 June 2026 · Branch feat/shop-category-sections</p>
|
|
<p class="meta"><a href="/simple-doc-de" style="color:var(--mint);text-decoration:underline;">Deutsch ↗</a></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><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 & 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 & 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 & 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.)<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>
|
|
|
|
<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><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 & 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.<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><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>Mobile menu button</h2>
|
|
<ul class="items">
|
|
<li><strong>Menu button is now red.</strong> On phones, the round menu button in the bottom-right corner used to be green, which made it blend in next to the red cart button. It's now the same <strong>crimson red</strong> as the cart and every other button, so the two match and clearly look tappable.<br><a class="cardlink" href="/" 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>
|
|
<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>
|