# Lovasember full-length design specification

Revision 1, 30 September 2026. Build all four complete pages from the exact donor, not the rejected short pages. The source structure and live brand are observed. Proposed composition choices are labeled below. The final Gemini design may improve finish and rhythm while retaining every defining donor layout and all four finalized copy documents.

## Source authority and inspected references

- Complete canonical contract: `/Users/agency/Documents/Agty/lovasember-project/.tmp/lll-full-pages-2026-09-30/goal.md`.
- Exact donor snapshot: `reference/donor.html`, SHA256 `fcf5e7d69d15817ea7532c6d86b52443568afb11121d0ff5bcb09741c46cdb5f`. Full CSS, DOM and JavaScript inspected. Source classes and defining dimensions appear in `../section-map.md`.
- Live [Lovasember](https://www.lovasember.hu/) fetched and rendered September 30. Exact fresh source is `reference/brand-live.html`, screenshot `reference/brand-viewport.png`. Brand is visual authority, not authority to repeat every legacy promise or audience.
- Consultation screenshot: `/Users/agency/Documents/Agty/lovasember-project/.tmp/lll-landing-upgrade-2026-09-29/inputs/cta-reference.png`, visually inspected. N03 retains its two-column composition and content roles while using current source-backed terms.
- [Photo catalog](https://review.clientsflow.hu/lovasember-image-catalog-2026-09-29-v1/) and `/Users/agency/Documents/Agty/lovasember/catalog.json`. All 36 local assets verified, recorded with dimensions, source IDs, source URLs and fresh hashes in `photo-inventory.json`. Scope remains 36 of at least 100.
- Installed AL-Design `clone`, `marketing-ui`, `make-design-md` and `gsap` were read. Their SHA256 values still match the September 29 install receipt. No reinstall. Contract specifically requires a pre-generation design specification, so that overrides marketing-ui's normal generate-first preference. Brand/source-photo requirements override that skill's generic typography and generated-image suggestions. No unsupported new artwork or typeface is needed.

## Observed brand tokens

| Token | Exact live value | Application |
|---|---|---|
| Deep green | `#0C2107` | Hero, meaningful dark bands, N03 |
| Gold | `#D1A300` | Buttons, rules, step numerals, sparse small labels |
| Cream | `#fdfcf8` | Reading fields and soft contrast against white |
| White | `#ffffff` | Card surfaces and text on green |
| Main text | `#333333` | Main text on light fields |
| Reading text | `#4a4a4a` | Secondary text on light fields |
| Heading | `Lora`, serif, 700 | Live h1-h4 system, main headlines |
| Body/UI | system-ui, -apple-system, sans-serif | Live body variable, form controls and navigation |
| Reading | Georgia, Times New Roman, serif | Live global paragraph variable |
| Signature | Dancing Script, cursive, 700 | Signature use only, never paragraphs |
| Signature card | white, 5px gold top, 8px radius, 50px/40px padding | Observed live card style |
| Primary button | gold field, green type, 16px/32px padding, 4px radius | Strong single next action |
| Divider | 60px × 3px gold | Short heading accent |
| Hero heading | 3.5rem, line-height 1.2 in live hero rule | Desktop primary hierarchy |
| Booking | 1200px max, 1fr/1fr, 100px gap, 120px vertical | N03 visual authority |

The current site mixes system sans-serif, Open Sans in isolated blocks, and Georgia reading text. Resolve the inconsistency deliberately: use Lora for headings and brand CTA labels, system sans for operative UI, Georgia for narrative paragraphs. Do not claim the source is uniformly one body face. Set narrative at 18px/1.65 and UI at 16–18px/1.5 as a proposed normalization, subject to rendered Hungarian line length.

## Proposed art direction and geometry

A quiet, large-scale photographic editorial treatment with actual golden-hour horse and human interaction. Deep green anchors the narrative, cream reading areas provide rest, gold is functional emphasis. Avoid full-page gold gradients, generic SaaS cards, huge empty spacers and decorative spinning.

Keep donor content container 1320px maximum with 24px inner gutters where its compositions require space. Use 1200px maximum in N03. Main sections retain donor 160px vertical spacing as a starting point, service blocks 80px. Reduce individual surplus gaps only after full-page QA shows the need, never remove content or shorten the page merely to fit a count. Source header-bottom gap is 80px, inner service gap 80px, cards 25–40px. On 1440px desktop, narrative text columns should normally stay below 65 characters per line. Heading max widths and purposeful breaks must prevent accidental single-word tails.

The hero must remain donor 1.1/0.9 text-to-selector geometry. Do not replace its selector card with only a hero photo. The first photo spectacle arrives through T02. A low-contrast decorative crop may support the hero background only if it does not compete with the copy or card. The full-size source photographs carry T02, T04–T06, T09, T11, T13 and T16.

T10 preserves three equal portrait/context cards. Sanyi and Dóri each get equal card geometry, photo height, heading scale, role and meaningful biography space. The third card is explicitly the setting, never a fictional third team member. This retains the donor three-column layout without inventing a person.

Keep T08 a functioning comparison slider. Use an illustrative two-perspective composition over the same scene with concise labels. It must not show two anonymous people as a demonstrated before/after result. T15 retains three moving vertical columns, but uses useful labeled reflection questions until exact testimonial evidence is approved in the source matrix. No stars, review-provider logos, fabricated names or attributed quotation styling.

## New layout sketches

These are three additional geometries, not renamed donor sections. They appear once per page, with persona-specific content.

```text
N01 Audience fork (open editorial lanes, no cards)
               Shared question
                      │
       ───────────────┴────────────────
  01 Leader lane                     02 Self-knowledge lane
  Current situation                  [starts 48px lower]
  Relevant next route                Current situation + route
```

```text
N02 Situation ledger (ruled table-like editorial composition)
LABEL 25%       RECOGNIZABLE MOMENT 35%       USEFUL QUESTION 40%
─────────────── fine gold rule ────────────────────────────────
Row one         specific context            inquiry, not promise
Row two         practical cost              inquiry, not promise
Row three       everyday desire             inquiry, not promise
```

```text
N03 Consultation panel (screenshot-led)
DEEP GREEN FIELD                    CREAM CARD / GOLD TOP
Eyebrow                              How it works
Large invitation                     1 ─ choose/contact
Gold rule                            │
Plain offer                          2 ─ confirm details
3 icon + benefit rows                │
                                     3 ─ first conversation
                                     FULL GOLD CTA
                                     truthful price / next step note
```

N01 differs from the donor's boxed selector and equal card grid by its open branching path. N02 differs from cards, service splits and the four-step process by its ruled 25/35/40 ledger. N03 differs from T17 because it has no intake form, subject grid or contact directory: it is a benefits-and-vertical-steps offer panel. Use these distinctions visibly, not just in class names.

## Photos, crops and asset integrity

Use `photo-map.md` and `photo-inventory.json` as the exact source map. T02 uses one identical source image for both gate halves so the seam closes correctly. Avoid arbitrary independent crops on the two halves. Gallery photos preserve faces, hands, rope and horse eyes/muzzles. Do not crop human/horse interaction into anonymous texture. Portrait cylinder assets fill 400×500 while the lightbox exposes the whole source. All source identities remain unnamed unless the primary source identifies them.

Bundle selected optimized image files into each immutable version directory, preserving source-to-derived names in that version's manifest. Carry full-resolution source links only in evidence/lightbox if practical. Do not hotlink to a mutable sibling page version. Avoid image repetition within a nine-frame gate grid, and distribute pools across the full page.

## Visitor-facing operation

Home and About show both routes with clearly separated terms. Leader uses the verified free first conversation with an email draft to info@alovasember.hu. Self-knowledge uses the verified 30-minute / 5,000 Ft Calendar route. N03 copy must wait for the research/copy team's refreshed operative facts. T17 is a useful message-preparation composition with a truthful draft-opening label. It must not simulate a completed send. Hero state two offers the actual route with a back button. No dead form submission, invented chat operator, or exit-intent pressure overlay is required.

Use native buttons, links, details and range controls. Focus must remain visible and every gallery/accordion state available by keyboard. Animation failure must leave content visible. These are required behavior/accessibility details, not a new access gate.

## Evidence boundary

Reference screenshots show source compositions and brand only. `reference/donor-hero.png`, `donor-services.png` and `donor-sticky.png` are actual in-app browser captures. The sticky capture includes a source fade transition, so it is geometry evidence, not a final opacity target. These are not full donor QA or final page comparison screenshots. Actual 1440×1000 deployed comparison, annotations, motion-state coverage and fresh Luna acceptance belong to the generation/integration rounds.