skills + audit: vendor taste-skill, add the Felhom override, audit the home page

Part 0 and Part A of the home-page redesign. Nothing under website/ is touched.

skills/
  - design-taste-frontend installed to ~/.claude/skills/ as a VERBATIM copy of
    github.com/Leonxlnx/taste-skill @ 717446e07a (2026-10-09, MIT). Body verified
    byte-identical line by line; the only addition is a provenance block. The repo
    holds scripts (skill.sh, scripts/*.mjs) but the SKILL FOLDER holds only SKILL.md,
    so no script was copied and none was run. Not installed via npx or skill.sh.
  - skills/felhom-web-design/SKILL.md is the override layer and names every conflict:
    the static-HTML stack fence (no React/Tailwind/Motion/npm), nothing fetched from
    another server (kills taste-skill's picsum/Unsplash/SimpleIcons ladder and its
    npm icon libraries, since we have a self-hosted sprite), real images only, the
    Hungarian gondolatjel surviving the en-dash ban, the claim rule, and the SEO-keep
    list. 137 lines, check_skills.py PASS.
  - SOURCES.md records the provenance and the kept/overridden table.

documentation/audits/redesign-2026-10-10/AUDIT.md
  Measured against the LIVE site, not the file. 12 patterns to retire (R1-R12), each
  naming the taste-skill rule it breaks; 7 to keep; dial reading 3/2/4 -> 6/3/4;
  8 levers in priority order for the operator to approve at STOP 1.

  Headline measurements: 10 922 px tall at 1440 and 19 913 px at 390 (23.6 phone
  screens); 11 sections but only 8 layout families, why-grid used 3x and
  apps-showcase 2x; 18 em dashes; 16 requests / 533 KB from exactly two hosts.
  Contrast measures 7.56:1 body and 16.67:1 headings - AAA, and an accessibility win
  to preserve rather than a thing to fix.

  Method note: resize_window does not move window.innerWidth on this workstation and
  DevTools device mode could not be driven, so the page was rendered in a same-origin
  iframe at each width. Faithful, with two positive observables: the hamburger
  computes to display:block at 390, and clientWidth == scrollWidth == 375.

Gates: site, hostinstall, hub-confirm, register and the rest green. instructions and
script-tests fail on this Windows workstation for environment reasons that predate
this change (E:\git\CLAUDE.md is the deliberate Windows adaptation the gate wants
identical; fcntl missing; relpath across C:/E:; the cp1250 console trap). Re-run on
DooPlex follows.

documentation/audits/redesign-2026-10-10/AUDIT.md

@@ -0,0 +1,196 @@
+# Home-page redesign — the audit before anything is touched
+
+**Date:** 2026-10-10 · **Scope:** `website/index.html` (+ its English twin `website/en/index.html`)
+· **Baseline:** `felhom.eu` `main` @ `7ff64f40ed`, clean, in sync with `origin/main`
+· **Method:** taste-skill §11.B, run against the **live** site, not the file on disk.
+
+Companion skill files written in the same session: `skills/felhom-web-design/SKILL.md` (the override
+layer) and `skills/SOURCES.md` (provenance of the vendored `design-taste-frontend`).
+
+---
+
+## A. Design read (taste-skill §0.B)
+
+> **Reading this as:** a redesign-preserve of a trust-first consumer landing page, for Hungarian
+> households who are considering handing their family photographs to a box in their own hall, with a
+> plain-spoken technical language, leaning toward the existing Felhom v2 token set plus real product
+> photography.
+
+The audience is the thing most of the current page gets wrong. It is not a procurement panel and not
+a self-hosting hobbyist. It is a household that has to decide whether to trust **a person**. The page
+currently contains no person, no box, and no evidence that either exists.
+
+## B. How the measurements were taken
+
+Claude in Chrome cannot resize this workstation's Chrome: `resize_window` returns success and
+`window.innerWidth` stays at 1920. Chrome DevTools device mode (R-918's recipe) could not be driven
+either, because the extension's keystrokes reach the page, not the browser chrome.
+
+**What worked, and why it is faithful:** the page was rendered inside a **same-origin iframe** of the
+chosen CSS width. The site frames itself, so the iframe's own width drives the media queries. Two
+positive observables confirm the layout really is the mobile one rather than a squeezed desktop one:
+
+- at 390 px the hamburger computes to `display: block` (it is `none` on desktop), and
+- `document.documentElement.clientWidth === scrollWidth === 375` — the viewport minus the scrollbar,
+  with **no horizontal overflow**.
+
+Both the desktop and the phone figures below come from that harness. Screenshots are cropped to the
+iframe's rectangle, so what is shown is the page at that width and nothing else.
+
+## C. Brand tokens in use (preserve)
+
+| Token | Value | Note |
+|---|---|---|
+| `--bg-0 / --bg-1 / --bg-2` | `#0A1220` / `#0F1B2E` / `#16263F` | One locked dark theme. No `prefers-color-scheme` block anywhere in `site.css` |
+| `--text-1 / --text-2` | `#EDF2F9` / `#94A6BF` | Measured **16.67:1** and **7.56:1** against `--bg-0`. AAA, not merely AA |
+| `--blue / --blue-bright` | `#0083D8` / `#2EA8F5` | One accent, used consistently. §4.2's Color Consistency Lock already passes |
+| `--radius` | `2px` | §4.4's Shape Consistency Lock already passes. `box-shadow` is in the gate's `BANNED` list |
+| `--font-ui` | Plus Jakarta Sans, self-hosted | Latin + latin-ext, 48 KB |
+| `--font-data` | JetBrains Mono, self-hosted | 31 KB — see finding **R6** |
+
+The token layer is in good shape and is **not** what makes the page look AI-made. Nothing in §C is
+proposed for change.
+
+## D. Information architecture and conversion paths (preserve)
+
+Nav: `Szolgáltatások · Alkalmazások · Technológiák · Mentések · GYIK · Kapcsolat` + language globe.
+One line at desktop, hamburger below 900 px. §4.7's nav rules already pass.
+
+Conversion path: home → `/teszteles` (primary CTA, twice) → `/kapcsolat`. Secondary paths to
+`/alkalmazasok`, `/technologiak`, `/biztonsagimentes`.
+
+**No URL, nav label, anchor ID or form field is proposed for change** (§11.F).
+
+## E. The page as it stands, measured
+
+| | Desktop 1440 | Phone 390 |
+|---|---|---|
+| Full page height | **10 922 px** | **19 913 px** |
+| Screens of scrolling | ≈ 11.6 | **≈ 23.6** |
+| Sections | 11 + footer | same |
+| Requests / weight | **16 requests, 533 KB**, hosts: `felhom.eu` 13, `stats.felhom.eu` 2 | — |
+| Em dashes (`—`) in rendered text | **18** | — |
+
+Section inventory, in page order, with the layout family each uses:
+
+| # | Heading | Layout family | Items | Height |
+|---|---|---|---|---|
+| 1 | *(hero)* | `hero-content` | 2 | 900 |
+| 2 | Mit tud a doboz ma? | `why-grid` | **10** | 1732 |
+| 3 | Így néz ki a vezérlőpult | `dash-grid` | 4 | 1120 |
+| 4 | Miért ne a felhőszolgáltatók? | `problem-grid` | 3 | 610 |
+| 5 | Miért válaszd a saját szervered? | **`why-grid` again** | 4 | 755 |
+| 6 | Hogyan működik? | `process-steps` | 5 | 715 |
+| 7 | Mit kapsz tőlünk? | `service-list` | 5 | 1010 |
+| 8 | Telepíthető Alkalmazások | `apps-showcase` | 10 | 939 |
+| 9 | Professzionális Technológiák | **`apps-showcase` again** | 7 | 939 |
+| 10 | Adataid biztonságban | `backup-content` | 2 | 519 |
+| 11 | Zárt teszt | **`why-grid` a third time** | 3 | 1056 |
+| 12 | Érdekel? Beszéljünk! | `contact-box` | 2 | 500 |
+
+## F. Patterns to keep
+
+1. **The token layer and the contrast wins** (§C). Honour them; §11.C.
+2. **"Mit tud a doboz ma?"** — the content is the best thing on the site. Ten concrete, hedged,
+   honest facts. The *layout* is wrong, the *writing* is right.
+3. **"Ismert korlátok"** — naming the shared household password and the missing DLNA is the single
+   most trust-building paragraph on the page. It stays, and it should be easier to find.
+4. **The four real dashboard screenshots.** Real product images, already vendored, already with
+   captions that are claims. They are the asset the hero is missing.
+5. **The picture viewer** (`gallery.js`), and its JS-off behaviour.
+6. **The whole SEO head block** (§H).
+7. **The nav, the footer and both CTAs' wording.** `Jelentkezem tesztelőnek` is one label for one
+   intent, used twice — §4.5's No-Duplicate-CTA-Intent already passes.
+
+## G. Patterns to retire
+
+Each row names the taste-skill rule it breaks.
+
+| # | Pattern | Where | Rule broken |
+|---|---|---|---|
+| **R1** | **The hero's "visual" is the logo** (`logo.png`, 49 KB), beside a claim that states nothing. The real product pictures sit three sections lower | hero | §4.8 "Hero needs a real visual"; a logo fills the slot without showing the product |
+| **R2** | **Hero content floats in the middle of a 900 px band**, roughly 300 px of empty space above it; on the phone the logo takes the top half and pushes the CTA to the fold | hero | §4.7 HERO TOP PADDING CAP — "reads as a layout bug, not as intentional space" |
+| **R3** | **"Professzionális otthoni szerver telepítés és üzemeltetés"** as the one-line value proposition. Also "Ipari szintű megoldások", "Professzionális Technológiák", "Kulcsrakész megoldások, professzionális kivitelezéssel" | hero + §7 + §9 | §9.D filler verbs; `felhom-web-design` §5 — an empty word with no fact beside it |
+| **R4** | **The same section header shape 11 times out of 11:** centred `h2` of two words with a blue-coloured tail in a `<span>`, then a centred grey sub-line | every section | §4.3 anti-centre bias; the templated rhythm the operator describes |
+| **R5** | **Three layout families carry five sections.** `why-grid` runs three times, `apps-showcase` twice | §2, §5, §11 / §8, §9 | §4.7 Section-Layout-Repetition Ban — a family may appear **once** |
+| **R6** | **`process-steps` numbered 1–5 and `service-list` numbered 01–05.** These 13 elements are also the **only** users of JetBrains Mono on the page: retiring them drops a 31 KB font | §6, §7 | §9.F "NO generic step labels"; "NO section-number eyebrows" |
+| **R7** | **`problem-grid` is three equal feature cards** | §4 | §9.C — banned outright |
+| **R8** | **A ten-card grid** under "Mit tud a doboz ma?", 1732 px tall, every card the same weight | §2 | §4.9 "Long lists need a different UI component, not a longer list" (> 5 items) |
+| **R9** | **18 em dashes** in the rendered text | throughout | §9.G, kept in full; in Hungarian the gondolatjel is ` – ` anyway |
+| **R10** | **Two sections are a catalogue of someone else's logos in words** — app names and technology names as plain text in identical tiles | §8, §9 | §4.9 content density; they duplicate `/alkalmazasok` and `/technologiak`, which both already exist |
+| **R11** | **Nobody is behind it.** The only human trace on the page is "Üzemeltető: Nagyfenyvesi Viktor" in the legal footer line | whole page | The brief's core finding; §0.A audience |
+| **R12** | **"Miért ne a felhőszolgáltatók?"** argues against Google before the page has said what Felhom *is* | §4 | §4.9 — the fourth section is too early for a competitor argument |
+
+## H. SEO baseline — carried over unchanged
+
+From `audits/seo-2026-10-10/` (6 indexed, 7 not indexed, nothing wrong with the home page) and the
+file itself. **These exact strings are preserved** unless the operator says otherwise:
+
+- `<title>Felhom.eu — Saját felhőd, saját szabályaid | Otthoni szerver szolgáltatás</title>`
+- `meta description` (the "58 telepíthető alkalmazás, háromszintű automatikus mentés…" line)
+- `canonical` `https://felhom.eu/`; `hreflang` hu / en / x-default
+- All Open Graph and Twitter tags, and the `LocalBusiness` JSON-LD block
+- `h1` text: *Saját felhőd, saját szabályaid*
+
+> **One conflict to settle at STOP 1.** The `<title>` and three OG/Twitter titles contain an **em
+> dash**, and the JSON-LD `description` contains "Professzionális". R3 and R9 would change them, the
+> SEO-keep rule says do not. **Recommendation: leave all four alone this round.** They are the
+> strings Google has indexed, the em dash is invisible to a visitor in a browser tab, and a title
+> change is worth doing deliberately on its own, not as a side effect of a layout change.
+
+## I. Dial reading (taste-skill §1)
+
+| Dial | Current site | Proposed | Why |
+|---|---|---|---|
+| `DESIGN_VARIANCE` | **3** — every section is a centred header over a symmetric grid | **6** | §1.A "redesign - preserve" says match existing; 3 is what *causes* R4 and R5. 6 buys asymmetry and a real hero without touching the brand |
+| `MOTION_INTENSITY` | **2** — CSS hover only, `prefers-reduced-motion` block already present | **3** | Trust-first audience (§1.A row 5 reads 2-3). Deliberately below 4 so §6.B's mandate and the no-JS-library fence never collide |
+| `VISUAL_DENSITY` | **4** | **4** | Unchanged. The density is not the problem; the repetition is |
+
+Mode: **redesign — preserve**.
+
+## J. The levers, in priority order (taste-skill §11.D)
+
+Each is one plain sentence. This is the list the operator approves, changes or cuts at STOP 1.
+
+1. **Give the hero a real picture and a sentence that says something.** Replace the logo with the
+   Indítópult screenshot, and "Professzionális otthoni szerver telepítés és üzemeltetés" with a
+   concrete sentence drawn from the facts already on the page. *(R1, R2, R3)*
+2. **Put a face and a name on the page.** A new "Ki áll mögötte" section with the operator's
+   photograph and three or four sentences in his own words. *(R11)*
+3. **Break the eleven-times-identical section header.** Vary alignment and shape so that no two
+   consecutive sections open the same way. *(R4)*
+4. **Give each section its own layout family.** Split the ten-card grid into a short scannable list,
+   and stop reusing `why-grid` and `apps-showcase`. *(R5, R7, R8)*
+5. **Re-order so the page answers "what is it" before "why not Google".** *(R12)*
+6. **Drop the two word-catalogue sections to a single line each with the link they already carry.**
+   *(R10)*
+7. **Retire the numbered step and service lists**, which also removes a 31 KB font. *(R6)*
+8. **Sweep every em dash** out of the rendered text. *(R9)*
+
+**Levers deliberately NOT proposed:** no new colour, no new font, no light mode, no animation
+library, no nav change, no URL change, no change to the four SEO strings in §H.
+
+## K. Known risks when this ships
+
+1. **`site_gates.py` walks every `*.html` under `website/` at any depth** (R-423) and fails on a page
+   that is in neither `TWINS` nor `NO_TWIN`. The preview page must be registered before the gate can
+   pass, and a registered Hungarian page must carry a nav and footer **byte-identical** to
+   `index.html`'s after normalisation — which is a second, independent reason not to touch the nav.
+2. **`site.css` is shared by every page, and scoping it has already bitten in both directions.**
+   A base-element change made for the home page leaks into `/gyik`, `/teszteles` and the legal pages;
+   but `69035f4af5` (2026-10-10) is the opposite failure — `.info-card` and `.highlight-box` were
+   scoped to `.page-technologiak` / `.page-biztonsagimentes`, so the new `.page-teszteles` pages got
+   **no card chrome at all** and rendered as unstyled text runs. That commit's own conclusion was to
+   fix base rules **site-wide** rather than patch per page.
+   **So the rule here is not "always scope":** a genuinely shared improvement (a base `a`, `ul` or
+   `code` rule) goes site-wide on purpose; only a rule that is specifically the home page's new
+   composition hides under `body.page-index`. Either way the mitigation is the same and is not
+   optional — **every other page is screenshotted at 1440 before the switch**, which is step D.3.
+3. **The English twin** must move in the same commit, or the twin gate fails.
+4. **The `?v=` cache-bust** on `site.css` must be bumped, or the change looks like it did not deploy.
+
+## L. Register
+
+Nothing here is filed as an `OPEN-ITEMS.md` row yet: the whole list is this session's work and will
+be closed in it. Anything on the list that the operator cuts at STOP 1, or that is not finished by
+the end of the session, becomes a row before the session ends.