# 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.** | §6, §7 | §9.F "NO generic step labels"; "NO section-number eyebrows" |
| **R6b** | **JetBrains Mono (31 KB) is loaded for 13 characters.** Exactly 13 elements on the page use `--font-data`: the ten numbers in R6, **plus the `3` / `2` / `1` of the backup rule**. Retiring R6 alone therefore does **not** drop the font — the 3-2-1 figures must also move to the UI font, which they do not need | §6, §7, §10 | page weight; §4.9 (mono is for data, and these are not data) |
| **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, and move the 3-2-1 figures off the mono font**,
   which together take JetBrains Mono (31 KB) off the home page. *(R6, R6b)*
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.
5. **One em dash cannot be swept from one page alone.** The shared footer reads
   `© 2026 felhom.eu — Saját felhőd, saját szabályaid`, and gate 3 requires every Hungarian page's
   `<footer>` to be **identical** to `index.html`'s. So "zero em dashes" is achievable on the home
   page's own copy, but that last one needs the same edit on all 14 pages at once. It is a
   one-character change per file and mechanical, but it is a site-wide change, not a home-page one.
   **Carried as a separate decision for the operator at STOP 3**, not done silently.
6. **A preview page cannot be registered as a twin pair.** Gate 3 requires the nav to be identical to
   `index.html`'s (whose language globe points at `/` and `/en/`), while the twin gate requires a
   `TWINS` pair's globe to point at the pair's own two URLs. For `preview/` those two demands
   contradict each other. The Hungarian preview therefore goes in `NO_TWIN` (where nav, globe
   structure, BOM, emoji, analytics, dash-language and viewer checks all still run, and only the
   twin-specific canonical/hreflang checks do not), and **the English twin is written in Part D, in
   the same commit as the switch**, where the twin gate does its real job on two public pages.
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.