From 43189e89728169c0439e5f575c65a0c133f445ad Mon Sep 17 00:00:00 2001
From: kisfenyo <nagyfenyvesi.viktor@gmail.com>
Date: Thu, 2 Jul 2026 22:19:58 +0200
Subject: [PATCH] =?UTF-8?q?D3=20Part=204:=20docs=20=E2=80=94=20.tag/.badge?=
 =?UTF-8?q?=20addendum,=20website=20CHANGELOG,=20REPORT?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- design-system.md: the .tag (outline+dot, state) vs .badge (filled
  chip, static informational label) distinction the D1 unified view
  left implicit, + a Website (TASK-D3) section (shared site.css,
  self-hosted fonts, external sprite, mask-based CSS marks, ?v=
  cache-busting, site_gates.py enforcement).
- website/CHANGELOG.md created (newest-on-top) with the D3 entry.
- REPORT.md overwritten per §15 (baselines, commits, gate outputs +
  all three red-proofs, 84-problem/182-emoji baseline → 0, contact-form
  freeze proof + live TESZT submission resend id, live checks, the
  narrow-viewport limitation, observations).
---
 REPORT.md                             | 105 ++++++++++++++++++++++----
 documentation/design/design-system.md |  27 +++++++
 website/CHANGELOG.md                  |  26 +++++++
 3 files changed, 145 insertions(+), 13 deletions(-)
 create mode 100644 website/CHANGELOG.md

diff --git a/REPORT.md b/REPORT.md
index 7ddc63b..facf4ae 100644
--- a/REPORT.md
+++ b/REPORT.md
@@ -4,18 +4,97 @@
 
 ---
 
-# REPORT — F3 doc: operator vmid selection runbook (companion to agent v0.60.0 F1/F2 fix)
+# REPORT — TASK-D3: felhom.eu website re-skin (design system v2, static-site edition)
 
-**Date:** 2026-07-02 · **Repo:** `felhom.eu` (`documentation/` only, no version bump) · **Class:** doc
-companion to the Risky/supervised fix in felhom-agent v0.60.0 (see that repo's REPORT.md for the full
-F1/F2 deliverables).
+**Date:** 2026-07-02 · **Deploy:** push = live via nginx + git-sync (verified per commit)
 
-- **NEW `documentation/runbooks/provisioning.md`** — the F3 note from
-  `documentation/audits/CAMPAIGN-pool-effects-2026-07-01.md`: operators MUST pick a provision `-vmid`
-  from the host's full guest list (`pct list` + `qm list` on the node), never from the pool-only hub
-  inventory; documents the reserved bands (9999, 990000–990009 fleet-wide) and the safe collision
-  behavior under agent >= v0.60.0.
-- **`documentation/audits/CAMPAIGN-pool-effects-2026-07-01.md`** — resolution banner added: F1 fixed at
-  root (proof-of-launch destroy gating, all three destroy paths), F2 fixed (band-advance + skip), F3
-  documented; F4/F5/F6 remain open; operator follow-up = hub Day-0 artifact manifest bump to agent
-  0.60.0 (binary published to Gitea).
+## 1. Baselines
+
+- felhom.eu `main` @ `a336fe3` — matched the spec; **main had not moved** at session start.
+- felhom-controller @ `d0c70a7` (v0.98.3) — read-only source of the 4 woff2 files (byte-copied).
+
+## 2. Commits (all pushed to `main`, live site checked after each)
+
+| Commit | Content |
+|---|---|
+| `dd54e4c` | Part 1: assets + gates — site.css, fonts/, icons.svg (70 symbols), scripts/site_gates.py; pages untouched, live site unaffected |
+| `bed8675` | Part 2: index + kapcsolat converted |
+| `ccbb13a` | Part 3: the remaining five pages converted; ALL 8 gates green |
+| `f114f4a` | Open Source badge: checkmark-green.svg image → sprite `.ico-yes` check (found live) |
+| (docs) | Part 4: design-system addendum + website/CHANGELOG.md + this REPORT |
+
+## 3. What changed per page (uniform)
+
+Google Fonts links + preconnects removed → `/assets/site.css?v=1`; embedded `<style>` deleted
+(7→0); `page-<name>` body class; canonical nav/footer (active marker per page; index's
+`#szolgaltatasok` href normalized to `/#szolgaltatasok`); every emoji → sprite icon (`.ico-tile`
+48px bg-2 feature squares / `.ico-lg` heading icons / inline `.ico`) or plain text; legacy inline
+`var(--…)` names → v2 tokens. Content, copy, meta/SEO/JSON-LD, and the umami analytics snippet
+preserved verbatim (gate-asserted per page). `alkalmazasok.html` verified **hand-maintained**
+(no generator anywhere in the workspace) before editing; its 49-card grid, screenshots, and
+logos untouched. `szolgaltatasok-nonpublic` re-skinned, still unlinked from nav.
+
+## 4. Gate outputs + red-proofs
+
+Final run: **`site gates OK — BOM, emoji=0, nav/footer consistent, analytics present, no CDN,
+no legacy tokens, no <style>, cache-busted assets`** (8 gates).
+
+Baselines (pre-task tree): **84 problems, 182 emoji** (the spec's leftover estimate was low — the
+website was never swept; the Python gate counts what Windows grep could not). Style blocks 7→0.
+Banned tokens (Google Fonts refs, legacy hexes, 999px, box-shadow) → 0.
+
+Red-proofs (run on a copy, shown, restored):
+- **A (BOM):** stripping gyik.html's BOM → `FAIL: gyik.html: missing UTF-8 BOM (first bytes: 3c2144)`; restored → exit 0.
+- **B (nav/footer):** mutating one footer char on technologiak → `FAIL: technologiak.html: <footer> differs from index.html`; restored → 0.
+- **C (emoji):** planting 🔒 into index → `FAIL: index.html: 1 emoji (🔒 …)`; restored → 0. Pre-task tree count: 182.
+
+## 5. Contact form (Scenario E)
+
+Functional markup frozen — the `bed8675` diff shows **zero** changed lines touching
+`contactForm`, `formEndpoint` (`/api/contact`), or any field `name=`/`id=`
+(name/email/subject/message/privacy/website honeypot). Visual-only JS changes: file-type/paperclip
+emoji strings → sprite refs, `✕` → `&#215;`, status-message emoji prefixes dropped.
+
+**Live TESZT submission** (real UI, after deploy): success status rendered
+(„Üzeneted sikeresen elküldtük!"), and the contact-mailer pod logged
+`[OK] Email sent: resend_id=6835b3ac-6f46-45c0-8aa8-a10b852aaa7a subject="[Felhom.eu] Egyéb –
+TESZT — D3 website re-skin validálás"` — accepted end-to-end via Resend.
+
+## 6. Live checks
+
+- All 7 pages **200** with `site.css?v=1`, zero `fonts.googleapis`/`<style>` in the served bytes;
+  BOM passes through nginx byte-for-byte (`efbbbf` leading the served /).
+- Assets: `site.css?v=1` 200 text/css, `icons.svg?v=1` 200 image/svg+xml, woff2 200 font/woff2.
+- Internal linkcheck (live): every internal href across the pages → 200.
+- Chrome (live): `document.fonts.check` true for both faces; **0** Google requests; self-hosted
+  pjs-latin + pjs-latin-ext + jbm-latin loaded (ő/ű render in PJS — hero screenshot); DOM-asserted
+  0 box-shadows, 0 radii other than 0/2px/50%; 31 sprite icons on index; comparison lists render
+  the mask-based ✓/✗ marks; screenshots of index (hero + feature tiles), alkalmazasok grid,
+  technologiak comparison.
+- **Responsive:** the mobile menu CSS/JS moved verbatim (same ≤900px breakpoint); the served
+  site.css verifiably contains the mobile rules (CSSOM check: `.hamburger {display:block}`,
+  off-canvas `.nav-links`). A true ~375px viewport screenshot was NOT possible — the window
+  manager forced the browser window back to 1920px; noted under §7.
+
+## 7. NOT live-validated
+
+- **Narrow-viewport rendering** (real ~375px screenshot): resize was overridden by the window
+  manager; verified statically instead (mobile rules present in the served CSS + the pre-existing,
+  unchanged menu JS). Worth one phone-check by the operator.
+- Cache expiry over the 7-day window (the ?v= scheme makes future changes safe regardless).
+
+## 8. Observations (not acted on)
+
+1. `alkalmazasok.html` feature keywords remain filled chips (restyled flat 2px, blue-dim) — per
+   the new `.tag` vs `.badge` addendum they are informational `.badge`-semantics labels; converting
+   ~200 of them to icon+text metarows would need per-feature icon inventions. Deliberate deviation
+   from the literal "chips → metarow" wording, documented in the addendum.
+2. The comparison/cons lists inherited `--warn`-colored ✗ marks from the original orange — kept
+   (a con is a warning-ish signal); pure-absence marks use muted.
+3. The nonpublic draft still carries placeholder pricing copy (content freeze — untouched).
+4. Weight: alkalmazasok.html is ~97 KB HTML + dozens of webp screenshots; a lazy-loading pass
+   would help mobile data budgets.
+5. The hero float animation + nav backdrop blur kept (motion, not shadow); a
+   `prefers-reduced-motion` block now disables animations globally.
+6. `assets/checkmark-green.svg` is now unreferenced (after `f114f4a`) — left in place; removable
+   in a later cleanup.
diff --git a/documentation/design/design-system.md b/documentation/design/design-system.md
index 56b17ac..0a84dff 100644
--- a/documentation/design/design-system.md
+++ b/documentation/design/design-system.md
@@ -133,6 +133,33 @@ Categorical series (data, not status): cpu `#2EA8F5`, memory `#8E7CE8`, temp `#E
 load `#5EC4B6`. Chrome: tooltip bg `#0F1B2E`, title `#EDF2F9`, body `#94A6BF`, border `#22344F`,
 ticks `#94A6BF`, axis titles `#5E7392`, grid `rgba(34,52,79,.5)`.
 
+## `.tag` vs `.badge` (D3 addendum — resolves the D1 parallel-component drift)
+
+Both exist in the controller; they are distinct components, not variants:
+
+- **`.tag`** — outline + dot; expresses **state** (run/progress/warn/crit/neutral/off). Use it
+  whenever the thing shown can change at runtime: container state, drive activity, health.
+  The dot is part of the semantics (pulsing = in progress, hollow = inert).
+- **`.badge`** — filled chip (dim background, no dot); expresses a **static informational label**:
+  tier names, protocol/type markers (USB, NFS), feature keywords on catalog cards. Nothing about
+  it changes at runtime.
+- If the label has an icon-and-text metadata character ("~512M", "Pi kompatibilis"), prefer
+  **`.metarow`** (no container at all) over either chip.
+- On the website, catalog feature keywords are `.badge`-class chips (filled, 2px, blue-dim) —
+  informational labels, not states.
+
+## Website (TASK-D3)
+
+The seven felhom.eu pages share ONE stylesheet (`website/assets/site.css?v=N`) built on this
+document's tokens: self-hosted fonts (`/assets/fonts/`, no CDN — GDPR), a 70-symbol external
+Lucide sprite (`/assets/icons.svg?v=N#i-name`; feature tiles = `.ico-tile` 48px bg-2 squares),
+the two-tone heading as the brand signature (accent span = solid `--blue-bright`), and
+mask-based ✓/✗ marks for CSS-generated content (sprites can't reach `::before`). Marketing-only
+scale addition: hero H1 up to ~3.5rem/800. Assets are cache-busted with `?v=N` (nginx `expires
+7d`) — bump every reference together. Enforcement: `scripts/site_gates.py` (BOM, emoji=0,
+nav/footer consistency, analytics presence, no-CDN, banned tokens, zero `<style>` blocks,
+cache-busting).
+
 ## Enforcement
 
 The D0 grep gate (all counts must be 0 in `controller/internal/{web,setup}`):
diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md
new file mode 100644
index 0000000..d37d515
--- /dev/null
+++ b/website/CHANGELOG.md
@@ -0,0 +1,26 @@
+# website/ changelog (newest on top)
+
+## 2026-07-02 — TASK-D3: design system v2 re-skin (content-preserving)
+
+All seven pages re-skinned to the v2 language (`documentation/design/design-system.md`); URLs,
+copy, meta/SEO, analytics, and the contact form's functional markup unchanged.
+
+- **One stylesheet:** the seven near-identical embedded `<style>` blocks (≈120 KB combined)
+  extracted into `assets/site.css?v=1` — vendored `@font-face`, the v2 `:root` tokens, a deduped
+  shared base, and per-page sections scoped by `page-<name>` body classes. Zero `<style>` blocks
+  remain.
+- **Self-hosted fonts:** Plus Jakarta Sans + JetBrains Mono (variable woff2, latin+latin-ext,
+  copied byte-identical from felhom-controller) served from `/assets/fonts/` — the Google Fonts
+  CDN (a GDPR exposure for a data-sovereignty product) is gone, preconnect hints included.
+- **Icons:** all 182 emoji replaced by a 70-symbol external Lucide sprite
+  (`/assets/icons.svg?v=1#i-name`): feature tiles as `.ico-tile` 48px bg-2 squares, heading icons
+  `.ico-lg`, inline `.ico`; the alkalmazasok "Open Source" green checkmark image → sprite check
+  (`.ico-yes`, blue). CSS-generated ✓/✗/★ content → currentColor mask marks / plain text.
+- **Nav/footer normalized** across all seven pages (index's `#szolgaltatasok` →
+  `/#szolgaltatasok`); byte-identical after the active-marker strip.
+- **Visual v2:** navy tokens, single 2px radius, no shadows/gradients/hover-lifts, two-tone
+  heading kept as solid `--blue-bright`, `prefers-reduced-motion` respected.
+- **Gates:** `scripts/site_gates.py` (BOM ×7, emoji, nav/footer, analytics, no-CDN, banned
+  tokens, style-blocks, `?v=` cache-busting) — baseline 84 problems + 182 emoji → **all green**.
+- kapcsolat: form fields/JS/endpoint byte-identical; live TESZT submission accepted
+  (contact-mailer `[OK] Email sent`, resend id logged).