Galleria Grand — Gallery wall hero

# Gallery Wall Hero — dark salon-hang landing section

A single full-bleed, full-viewport hero: a near-black gallery wall with five framed oil paintings hung at a deliberately irregular salon spacing, a two-line didone headline threaded through them, a small paragraph, and a minimal nav. Built at **1440 × 900** CSS px. The page is edge to edge — no outer margin, no page background colour behind it, no rounded corners on the stage, no card. The stage is `overflow: hidden` so the frames at the top and bottom edges are cropped by the viewport itself.

---

## 1. Structure

Full-bleed stage, `width: 100vw`, no max-width container. Nothing is centred in a content column — the composition is positioned, not gridded. A nominal 12-column grid (48px margins, 24px gutters, 90px columns, column *n* starts at `48 + (n-1)·114`) is used only to place the nav and the text block; every art element gets an explicit `left/top` in px on an absolutely-positioned layer.

Two layers on the stage, in this z-order from back to front:

- **Art layer** (z 1) — the five framed paintings.
- **Type layer** (z 2) — headline, paragraph, nav. The type is **above** the art: the second headline line crosses the big right-hand frame, and the wordmark sits over the top-centre frame's canvas.

Sections, top to bottom:

1. **Nav overlay** — 96px tall band overlaid on the hero, not a separate row: wordmark lockup centred at x 720, `BOOK NOW` pill + menu circle flush right, 48px side padding. Absolute, scrolls away with the hero.
2. **Gallery wall stage** — 1440 × 900, `#0A0A0A`, contains:
   - **2a — Art layer**: five framed paintings, positions below.
   - **2b — Type block**: headline line 1 at x 279, line 2 indented to x 516, paragraph at x 503 / y 591, 340px wide.
3. **Section boundary** — the stage ends hard at 900px. Whatever follows continues on the same `#0A0A0A` with no rule, no divider, no gradient fade. Frame E is clipped by the stage's bottom edge, not by a wrapper.

Art layer positions (CSS px from the stage's top-left, 1440 × 900):

| Ref | Element | left | top | size | notes |
|---|---|---|---|---|---|
| A | Top-centre crested portrait | 507 | 0 | 288 × 228 | topmost moulding clipped ~12px by the viewport top |
| B | Left blossom still life | 0 | 122 | 181 × 292 | flush to the left edge, rotated −1.5° |
| C | Large right self-portrait | 985 | 183 | 442 × 476 | right edge 13px from the viewport right, rotated +1° |
| D | Small lower-left landscape | 204 | 666 | 160 × 145 | the smallest object on the wall |
| E | Bottom-centre marine | 672 | 774 | 347 × 270 | only the top 126px is visible; clipped by the stage bottom |

Type block anchors: headline line 1 cap-top at y 344; line 2 cap-top at y 471; paragraph first-line top at y 591, last line bottom at y 707. Nav controls' vertical centre at y 48.

---

## 2. Scroll map

1. **Nav overlay** — 96px / 0.11 vp, consumes 0 scroll (overlaid on section 2, not sticky, not fixed) — kind: **entrance** (on load only).
2. **Gallery wall stage** — 900px / 1.00 vp, consumes 900px — kind: **entrance** on load, then **scroll-linked** parallax on the art layer while the stage is in view.
   - 2a Art layer — scroll-linked, range: scroll 0 → 900 (stage bottom reaches viewport top).
   - 2b Type block — entrance on load; static thereafter apart from the shared parallax of its own layer.
3. **Section boundary** — 0px, consumes 0 scroll — kind: **static**.

**Total height of this artifact: 900px (1.00 viewport).** No section pins, none stacks, nothing consumes more scroll than its height.

---

## 3. Spacing

- Stage padding: **none**. Content is placed by coordinate; the art bleeds off three edges (top, left, bottom) on purpose.
- Nav: band height **96px**, side padding **48px**, `BOOK NOW` pill → menu circle gap **14px**, pill padding `0 26px` (min-width 118px, height 42px), circle 42 × 42.
- Wordmark lockup: `GALLERIA` over `GRAND`, **6px** between them, lockup top at y 20.
- Headline: two lines, baseline-to-baseline **127px**; line 2 indented **237px** past line 1 (279 → 516).
- Headline line 2 baseline → paragraph first-line top: **32px**.
- Paragraph: 340px wide, line-height 25.5px, no paragraph spacing (it is one block of 6 lines).
- Art spacing rhythm — this is the point of the design, so it is uneven by design: nearest-edge gaps run **44px (D→E), 78px (A→C), 96px (B→headline), 180px (B→D)**. Never equalise them.
- Vertical rhythm between sections: there is only one section; the stage is exactly 1.00 viewport and the next section begins at 900px with **0px** gap.

---

## 4. Type

Two families:

- **Display / wordmark** — high-contrast didone serif, vertical stress, hairline thins, sharp unbracketed serifs, no ball terminals. Free stand-in: **Bodoni Moda** (400). Second choice: **Playfair Display** (400). Never a slab, never a humanist serif, never a geometric sans.
- **UI / body** — neutral grotesk, closed apertures, no quirk. Free stand-in: **Inter** (400 / 500).

Body anchor: **17px at 1440**. Everything else is a multiple of it.

| Level | Ratio | Size / line-height | Letter-spacing | Weight | Colour |
|---|---|---|---|---|---|
| Display headline (2b) | 7.8× | **132px** / 0.95 (125px) | −0.01em (−1.3px) | 400 | `#F2EDE6` |
| Wordmark, line 1 (1) | 1.3× | **22px** / 1.0 | 0.30em (6.6px), caps | 400 serif | `#F2EDE6` |
| Wordmark, line 2 (1) | 0.7× | **12px** / 1.0 | 0.50em (6px), caps | 400 serif | `#C8B49A` |
| Nav / button label (1) | 0.82× | **14px** / 1.0 | 0.14em (2px), caps | 500 grotesk | `#F2EDE6` |
| Body paragraph (2b) | 1.0× | **17px** / 1.50 (25.5px) | 0 | 400 grotesk | `#C8B49A` |
| Caption / artwork meta | 0.76× | **13px** / 1.3 | 0.08em | 400 grotesk | `#C8B49A` at 70% |

Max line length: paragraph **340px ≈ 44 characters** — six lines, hard-capped, never widened. The headline is never a wrapping paragraph: it is two hand-set lines of 2–3 words each, each line under 650px.

Width check for the headline (use this to verify the size rather than trusting the font's metrics): line 1, 2 words / 7 glyphs, sets **535–545px** wide; line 2, 2 words / 9 glyphs, sets **610–630px** wide. If your lines come out much wider, the size is too big.

Placeholder copy by role: eyebrow — none. Wordmark — one 8-letter word over one 5-letter word. Headline — 4 words on two lines, an unhurried, second-person-free phrase. Paragraph — 4 sentences, ~230 characters total, describing the place in plain declarative prose. Nav label — 2 words, uppercase.

---

## 5. Colour

| Hex | Role |
|---|---|
| `#0A0A0A` | **The wall.** ~90% of the surface. Flat, edge to edge. Optionally a barely-perceptible warm radial lift to `#141210` at 35% opacity, 900px radius, centred behind frame C — if it is visible as a shape, it is too strong. |
| `#282726` | Warm near-black. The only lifted surface: the wide mat inside frame E, and the fill of the menu circle on hover. |
| `#574639` | Deep umber. The shadow side of the gilt mouldings, the warm tint inside the frames' contact shadows, and the darkest browns within the paintings themselves. |
| `#967836` | **The single accent — antique gold.** Allowed in exactly one place: the carved mouldings of the five frames, with highlights running up toward `#C8B49A` and shadows down into `#574639`. It appears nowhere else. Not on text, not on borders, not on buttons, not on hover states, not on an underline. |
| `#C8B49A` | Warm bone. Paragraph text, the wordmark's second line, captions, and the gilt's brightest highlight. |
| `#F2EDE6` | Display white — a warm white mixed from the bone. Headline, wordmark line 1, nav label. Never `#FFFFFF`. |

The paintings supply the only saturated colour in the design: frame C's blues and greens are the loudest thing on the page and are meant to be. Never tint, duotone, sepia or desaturate the artwork toward the palette.

---

## 6. Surface

- **Corner radii:** `0` everywhere — the stage, the art, the type. The only radii on the page are the nav controls: the `BOOK NOW` pill at `999px` and the menu button as a true 42px circle.
- **Borders:** one weight only — **1px** hairline, `rgba(242, 237, 230, 0.35)`, on the pill and the circle. The artwork has **no CSS border**; its frame is part of the image.
- **Menu icon:** two 14px × 1.5px bars, `#F2EDE6`, 5px apart, centred in the circle.
- **Shadows:** used, and only under the art. Each frame carries two: a tight contact shadow `0 4px 12px rgba(10, 8, 6, 0.55)` and a long soft one `0 26px 60px rgba(10, 8, 6, 0.65)`, both offset down and slightly right — the whole wall is lit from the upper left, consistently. Shadows are warm-black, never blue-black. No shadow on text, no glow, no inner shadow, no backdrop blur anywhere.

---

## 7. Imagery

Five pictures. They are **real oil paintings in real carved frames**, photographed as cut-outs on transparency — not CSS rectangles, not gradient fills, not abstract renders, not modern photography. Four different genres and four different frame profiles; if any two of them read as the same picture or the same moulding, the wall has failed. Each sits at a very slight angle to the wall (±1–2° roll plus a hint of yaw, near side larger) so it reads as hung, not pasted.

**A — Top-centre crested portrait.** 288 × 228 as drawn, clipped ~12px by the viewport top; canvas inside is near-square, ~5:6 portrait, moulding ~55px. A Belle-Époque academic half-length of a young woman: auburn-red hair swept up, pale shoulders and throat, a dark olive-black ground, soft sfumato modelling and almost no visible brush texture. Frame: bright gold leaf, deeply carved acanthus scrolls and a crest at the top, ornate corners. The wordmark sits directly over the upper part of this canvas.

**B — Left blossom still life.** 181 × 292, flush to the left edge (a few px cropped), canvas 4:5 portrait. White dogwood or apple blossom on bare grey branches against a soft, atmospheric grey-green ground; thin impressionist strokes, paint scraped rather than piled, a quiet picture with nothing at its centre. Frame: fluted gold with a plain flat outer moulding — the simplest of the five.

**C — Large right self-portrait.** 442 × 476, right edge 13px from the viewport right; canvas 4:5 portrait, ~312 × 380, moulding ~65px. A post-impressionist bust: a man with close-cropped ginger hair and a red beard, in a pale blue-turquoise coat, painted entirely in short directional strokes, the background a halo of spiralling blue-green. Colour is high — cobalt, turquoise, ochre, vermilion in the beard. This is the anchor of the composition and the only saturated area on the page. Frame: the most sculptural of the five — dark antique gold going bronze in the hollows, deep carved scrollwork, genuinely three-dimensional, its ornament casting its own shadows.

**D — Small lower-left landscape.** 160 × 145, canvas ~8:7 landscape. A southern European hill town: ochre and terracotta walls, two or three dark cypress spires, a pale road cutting through, dusty green foliage, thick impasto and a high horizon. Frame: slim bright-gold reeded moulding, no ornament.

**E — Bottom-centre marine.** 347 wide, clipped by the stage bottom so only the top 126px shows; canvas 4:3 landscape inside a wide `#282726` mat (~26px) and a thin gold slip, with a thin gold outer frame. Dark sails and rigging silhouetted against a pale blue-white sky over a low horizon. The mat is what makes this one read differently from the other four at a glance.

---

## 8. Motion

The page is restrained: nothing bounces, nothing loops, nothing tracks the cursor across the whole wall. No motion was measured off a live page — every value below is **(inferred)** from the stills, and durations are given as ranges rather than exact numbers.

### 1. Nav overlay
- **kind** — entrance (on load, once). Not sticky, not fixed: it scrolls away with the hero.
- **what moves** — the wordmark lockup; the `BOOK NOW` pill; the menu circle.
- **from → to** — opacity 0 → 1; translateY +10px → 0. No scale, no blur.
- **range** — trigger: page load, after fonts resolve. Duration 500–700ms (inferred; not measured). Easing: ease-out, `cubic-bezier(0.22, 1, 0.36, 1)` (inferred). Stagger 60–80ms, wordmark first, then pill, then circle. Begins ~200ms after the art layer starts.
- **reduced motion** — no translate; opacity 0 → 1 over 150ms, or appear instantly.

### 2a. Art layer
- **kind** — entrance on load, then scroll-linked. Both, in that order.
- **what moves** — the five framed paintings, each independently.
- **from → to** — *Entrance:* opacity 0 → 1, scale 0.985 → 1, translateY +18px → 0 (frames A and E, which bleed off an edge, come from +26px). *Scroll-linked:* translateY as a function of scroll, at per-frame rates — C (largest, nearest) 0 → −90px across the range; A 0 → −40px; E 0 → −30px; B 0 → −55px; D 0 → −20px. Nothing else changes: no scale, no rotation, no opacity on scroll.
- **range** — *Entrance:* trigger is page load; duration 900–1100ms (inferred; not measured); easing ease-out `cubic-bezier(0.16, 1, 0.3, 1)` (inferred); stagger 90–120ms in the order C → A → B → E → D, so the big portrait lands first. *Scroll-linked:* from scroll 0 until the stage's bottom reaches the viewport top (900px of scroll); linear in scroll, reverses exactly on the way back up.
- **reduced motion** — parallax disabled entirely (all frames at their resting positions); entrance becomes a 200ms opacity fade with no translate and no stagger.

### 2b. Type block
- **kind** — entrance (on load, once). Static afterwards; it does not parallax independently of the stage.
- **what moves** — headline line 1; headline line 2; the paragraph.
- **from → to** — each line: `clip-path: inset(0 0 100% 0)` → `inset(0 0 -10% 0)` (a clean upward wipe from its own baseline) with translateY +24px → 0, opacity 1 throughout — the wipe does the work, not a fade. Paragraph: opacity 0 → 1, translateY +14px → 0.
- **range** — trigger: page load, starting ~350ms after the art layer. Duration 800–1000ms per line (inferred; not measured). Easing ease-out `cubic-bezier(0.16, 1, 0.3, 1)` (inferred). Stagger 110–140ms: line 1, line 2, then the paragraph 200ms after line 2.
- **reduced motion** — no wipe, no translate; opacity 0 → 1 over 200ms, all three at once.

### 3. Section boundary
- **kind** — static.
- **what moves** — nothing. There is no reveal, no divider animation, no colour transition into whatever follows.
- **from → to** — n/a.
- **range** — n/a.
- **reduced motion** — n/a; already static.

### Interaction transitions (not part of the scroll choreography)

- `BOOK NOW` **hover**: border `rgba(242,237,230,0.35)` → `rgba(242,237,230,0.7)`, fill transparent → `rgba(242,237,230,0.08)`, 180–220ms ease-out. Label does not move and does not change colour.
- `BOOK NOW` **press**: scale 1 → 0.985, 90–120ms; no colour change.
- Menu circle **hover**: fill transparent → `#282726`, border brightens as above, the two bars spread 5px → 6px apart, 180–220ms.
- Menu **open**: full-stage overlay `#0A0A0A` at 0 → 0.92 opacity, 320–400ms ease-out; the art layer behind it drops to 35% opacity over the same interval; bars cross into an X over 220ms. **Close** reverses the same values at the same durations.
- Artwork **hover**: the hovered frame lifts translateY 0 → −6px, scale 1 → 1.015, long shadow deepens to `0 34px 72px rgba(10,8,6,0.75)`, 380–450ms ease-out. Cursor stays the default arrow — no custom cursor, no magnetic pull, no zoom lens.
- Reduced motion: hovers keep the colour/opacity changes and drop every transform.

---

## 9. Responsive (below 640px)

Stage becomes `100vw × 100svh`, min-height 720px, still full-bleed and still `overflow: hidden`.

- **Art:** drop **B** (it collides with the headline at this width). Keep four: **A** centred at top, width 150px, still clipped by the top edge; **C** anchored to the right edge at `right: -30px`, `top: 300px`, width 210px — it must stay the largest thing on the wall; **D** at `left: 16px`, `bottom: 150px`, width 92px; **E** centred at the bottom, width 190px, only its top ~70px visible.
- **Type:** headline 2.6× body → **44px** / 0.98 / −0.01em, still two lines, line 2 indented 40px instead of 237px. Paragraph 16px / 1.55, width `min(88vw, 300px)`. Headline left margin 24px.
- **Nav:** side padding 24px. Wordmark shrinks to 18px / 11px and moves flush left (it no longer needs to sit over frame A). The `BOOK NOW` pill is dropped from the bar and moves inside the opened menu; the menu circle stays, at 36px, flush right.
- **Motion:** the scroll-linked parallax in 2a is disabled below 640px — the art layer keeps only its load entrance, at the same durations with the stagger reduced to 70ms. 2b's wipe is kept.
- Nothing becomes a carousel, a grid, or a stack of cards. It stays a wall.

---

## 10. Don'ts

- **Don't put placeholders in the frames.** No grey rectangles, no gradient fills, no solid swatches, no abstract 3D blobs, no generative noise, no modern photography, no AI-glossy "artwork". Five specific oil paintings, four genres: a Belle-Époque auburn-haired portrait, a white-blossom still life, an impasto hill-town landscape, a swirling post-impressionist bearded self-portrait, and a marine with dark sails. If all five could be swapped for one another, it is wrong.
- **Don't build the frames in CSS.** `border: 10px solid gold`, double borders, `linear-gradient` bevels and box-shadow insets all read as plastic. These are photographed carved gilt mouldings with ornament, nicks, worn gesso and specular highlights, each a different profile: crested (A), fluted (B), heavily scrolled and sculptural (C), slim reeded (D), thin gold around a wide black mat (E).
- **Don't equalise the wall.** Largest to smallest is a 2.8× range (442px → 160px). Don't grid them, don't align their tops or centres, don't set equal gaps, don't give them all the same rotation, don't give them all the same aspect ratio.
- **Don't tint the paintings.** No duotone, no sepia, no overlay to "match the palette", no brightness knocked down to make them polite. Frame C's cobalt and turquoise are the only saturated colour on the page and are the reason the wall works.
- **Don't let the art cover the headline.** The type layer is above the art: the second line's final letters cross frame C's carved edge and canvas, and the wordmark sits over frame A. Never add a scrim, a dark box or a blur plate behind the type to make it legible.
- **Don't centre the headline, and don't set both lines flush left.** Line 1 at x 279, line 2 indented to x 516 where the paragraph also starts — that stagger is the composition.
- **Don't reach for pure values.** No `#FFFFFF`, no `#000000`, no neutral-grey shadows. The white is warm (`#F2EDE6`), the black is warm (`#0A0A0A`), the shadows are warm.
- **Don't spend the gold.** `#967836` touches the frame mouldings and nothing else — not a gold `BOOK NOW`, not a gold hairline, not gold caps on the wordmark, not a gold hover underline.
- **Don't use an olive/green sheet, border or background anywhere.** The page is `#0A0A0A` from edge to edge.
- **Don't round the page or the art.** Radius `0` on the stage and every image. The only round things are the pill and the circle in the nav. No cards, no inset panel, no drop-shadowed container around the whole design.
- **Don't make the nav sticky.** No fixed bar, no `backdrop-filter: blur()`, no shrink-on-scroll, no background appearing at 100px. It scrolls away with the hero.
- **Don't add hero furniture.** No filled CTA button, no scroll-down chevron, no "scroll" label, no progress bar, no social icons, no marquee strip, no video background.
- **Don't over-animate.** No continuous floating or bobbing frames, no mousemove tilt of the whole wall, no spring overshoot, no letter-by-letter headline reveal with rotation, no blur-in, no counter, no infinite loop. The parallax is 20–90px total and linear in scroll; the entrance plays once.
- **Don't widen the paragraph** past 340px or set it above 17px. It is deliberately small and quiet against a 132px headline — that contrast is the design, not an oversight.
- **Don't set the headline in a geometric sans, a slab, or a bold weight.** It is a high-contrast didone in caps at weight 400; at 132px the hairlines must actually be hairlines.
- **Don't add more pictures.** Five, in these five places. Not a grid of thumbnails, not a repeating pattern, not a sixth to "balance" the empty lower-right — the emptiness under frame C is intentional.