Full-bleed photography studio hero

# Full-bleed portrait photo hero — rebuild prompt

A single full-viewport section: one edge-to-edge photograph carrying the whole surface, with a transparent nav, a left-aligned copy column, and a small two-item stats band floating on the right. No cards, no panels, no coloured fills. Everything warm in the design comes out of the photograph itself.

No live-page motion report was supplied for this reference. Every motion value below is marked **(inferred)** and durations are given as ranges, not exact measurements.

---

## 1. Structure

- **Container:** max-width **1200px**, centred, **120px** side margin at 1440 (so content runs x=120 → x=1320). 12 columns, **24px** gutter. The photograph ignores the container and bleeds to all four edges.
- **Section height:** exactly **100vh = 1024px** at 1440, `min-height: 720px`. It does not grow with content; content is vertically centred in it.
- **Layering:** one stacking context — photograph (z0) → gradient scrim (z1) → nav + copy + stats (z2). The copy column and stats band are overlay layers *inside* section 2, not siblings below it.

Sections top to bottom:

1. **Header / nav bar** — transparent, overlaid on the photograph, not fixed at this size. Row is 48px tall with 40px of padding above it, so link centres sit 64px from the page top. Logo left at x=120; links + outlined button right, flush to x=1320.
2. **Hero stage** — the full-bleed photograph plus its scrim. Spans 0 → 1024px, full 1440 width.
3. **Hero copy column** — overlay on 2. Left edge at x=120, spans cols 1–6, max-width 720px. Vertically: eyebrow top at y=382, button bottom at y=712 — i.e. the block's optical centre sits at ~53% of the viewport height, a touch below true centre.
4. **Stats band** — overlay on 2. A 220px-wide left-aligned column with its left edge at **x=1100** and right edge flush to the container at 1320. Two stacked stat items; first item's glyph top at y=440, second item's glyph top at y=577.

---

## 2. Scroll map

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Header / nav bar | 88px (inside 2) | 0.09 | 0 (overlay) | entrance, then scroll-linked scrim over the first 120px of scroll *(inferred)* |
| 2 | Hero stage | 1024px | 1.00 | 1024px | scroll-linked (parallax on the image only) *(inferred)* |
| 3 | Hero copy column | 330px (inside 2) | 0.32 | 0 (overlay) | entrance *(inferred)* |
| 4 | Stats band | 195px (inside 2) | 0.19 | 0 (overlay) | entrance *(inferred)* |

**Total page height: 1024px (1.00 viewport).** Nothing pins, nothing stacks. As a standalone section that is the entire scrollable height; when dropped onto a longer page, the section-2 parallax runs from the section top at the viewport top until the section bottom reaches the viewport top — one viewport of scroll, and no more.

---

## 3. Spacing

- Page gutters: **120px** left and right, everywhere.
- Header: `padding: 40px 120px 0`. Nav link-to-link gap **36px**. Gap from the last link to the outlined button **40px**. Logo is optically centred against the link row.
- Copy column internal rhythm (all margin-bottom):
  - eyebrow → headline: **28px**
  - headline → sub-paragraph: **28px**
  - sub-paragraph → button row: **36px**
- Eyebrow dot → eyebrow text: **12px**.
- Button row: pill and circular arrow are siblings with a **4px** gap, not one merged shape.
- Stats band: glyph → heading **12px**; heading → sub-label **6px**; item 1 → item 2 **128px**. That large inter-item gap is the point — the band reads as two separate marks in space, not a list.
- Vertical rhythm between the copy column and the stats band: they are not aligned to each other. The stats band starts ~58px lower than the headline's cap line. Do not line them up.

---

## 4. Type

Two families only.

- **Wordmark:** heavy slab serif, all caps, 4 letters. Free stand-in: **Roboto Slab 800** or **Bitter 800**.
- **Everything else:** neo-grotesk with a double-storey *a* and *g* and slightly narrow caps. Free stand-in: **Inter** (or **Inter Tight** for the headline).

Body anchor: **17px** running text at 1440. All other levels stated as a multiple of it.

| Level | Multiple | Size | Line-height | Letter-spacing | Weight | Max line length |
|---|---|---|---|---|---|---|
| Headline (2 lines) | 4.25× | **72px** | **1.06** (76px) | −0.02em | 400 | 720px, ~20–22 chars/line |
| Stat heading | 1.4× | **24px** | 1.25 | −0.01em | 400 | 220px |
| Body / sub-paragraph | 1.0× | **17px** | **1.6** (27px) | 0 | 400 | **420px, ~46 characters** |
| Nav links | 0.88× | **15px** | 1.4 | −0.005em | 450 | — |
| Button labels (both) | 0.88× | **15px** | 1 | 0 | 500 | — |
| Eyebrow | 0.82× | **14px** | 1.4 | 0.01em | 450 | — |
| Stat sub-label | 0.76× | **13px** | 1.4 | 0.02em | 400 | — |
| Wordmark | 1.2× | **20px** | 1 | 0.08em | 800 | — |

The headline is **regular weight at display size** — the contrast comes from scale, not from bold. Nothing on this page is above 500 except the four-letter wordmark.

Placeholder copy by role:
- Eyebrow: 2–3 words, availability-style, sentence case.
- Headline: 6–8 words on exactly two lines, each line ending in a full stop. Balance so line 2 is slightly wider than line 1.
- Sub-paragraph: one sentence, 12–16 words, wrapping to exactly two lines at 420px.
- Primary button: 3 words.
- Nav: 4 single-word links + 1 three-word button.
- Stat heading: 2 words. Stat sub-label: a short value — a quarter/year, or a number with a `+`.

---

## 5. Colour

The photograph covers ~100% of the surface, so the palette is read *out of* the image rather than painted onto the page.

| Hex | Role |
|---|---|
| **#B8663B** | The dominant mid-tone — lit skin and the shaft of light. The single accent of the design, and it is delivered **only by the photograph**. It is never used as a fill, a button, a border or a link colour. |
| **#281D1B** | Deep shadow. Occupies the upper-right wedge (~25% of the frame). Also the page background behind the image (what shows before load / on overscroll) and the ink colour of the white solid button. |
| **#884925** | The shadowed half of the accent — the tone the left-edge scrim resolves toward. Used for the scrim mix, not as a flat surface. |
| **#D4B7A5** | The palest note, the lower-left wedge. Also the tint for de-emphasised text: stat sub-labels sit at `rgba(212,183,165,0.82)`. |
| **#FFFFFF** | All primary text, the solid pill button's fill, the circular arrow button's fill, and the stats glyphs. |

Text opacities over the image: headline and button labels **100%** white; nav links and eyebrow **92%**; sub-paragraph **86%**; stat headings **88%**; stat sub-labels **72%**.

Scrims (the only fills on the page):
- Left-to-right linear gradient, `rgba(40,29,27,0.48)` at x=0 → `rgba(40,29,27,0)` at 58% width.
- Top-down linear gradient, `rgba(40,29,27,0.34)` at y=0 → transparent at 200px, for the nav.

Rule: if you want a warmer page, regrade the photograph. Do not introduce an orange fill.

---

## 6. Surface

- **Radii:** buttons are full pills (`999px`); the arrow button and the eyebrow dot are perfect circles. **Everything else is 0.** The photograph has no corner radius — it is edge to edge.
- **Borders:** exactly one. The nav button: `1px solid rgba(255,255,255,0.45)`. No other rules, dividers or outlines exist on the page.
- **Shadows:** none. No drop-shadow on buttons, no text-shadow for legibility — legibility is the scrim's job. The only soft edge in the composition is inside the photograph (the bloom along the light shaft).
- **Backdrop blur:** none. No glass, no frosted panel behind the copy.
- Component sizes: solid pill **44px** tall, `padding: 0 24px`; arrow circle **44px** diameter with a 45°-up arrow glyph ~16px, stroke 1.5px, in #281D1B; nav button **40px** tall, `padding: 0 20px`; eyebrow dot **12px** ring with a 5px filled core.

---

## 7. Imagery

**One photograph**, plus two vector glyphs.

**Hero photograph** — aspect ratio delivered at **1.41:1 (1440×1024)**, `object-fit: cover`, focal point ~**48% horizontal / 55% vertical**.

Subject: an extreme close crop of a human face, tight enough that a single eye sits near the optical centre of the frame and the nose and brow run off the edges. The eye is open and looking just past the camera — sharp iris, visible lashes, skin texture retained (pores, fine hairs), nothing retouched smooth.

Treatment — this is the part that carries the design: the frame is cut by **three parallel hard-edged diagonal bands running lower-left → upper-right at roughly 50–55° off horizontal**, as if the face were lit through a gap.
- Upper-right wedge: deep shadow, crushed to #281D1B, holding almost no detail.
- Centre band: the face in full warm light, terracotta #B8663B, with a slight bloom along the band's upper boundary.
- Lower-left wedge: a pale, out-of-focus fall-off to #D4B7A5.

Grade: heavy warm split-tone, orange highlights against brown shadows, **no neutral whites and no pure black anywhere in the image**. One cool accent is allowed and only one: a faint teal-green cast in the hair at the very top-left corner. Grain is fine and present; the image should not look digitally clean.

**Two stats glyphs** — 18×18px, white at ~90%, 1.5px stroke, abstract and geometric (e.g. a small corner/flag mark and a radial burst). Line-art marks, not filled icons, not from a rounded UI icon set.

---

## 8. Motion

Restrained by design. Nothing travels far; nothing plays twice. All values inferred from the stills — no live measurement was available, so durations are ranges.

### Section 1 — Header / nav bar
- **kind:** entrance, then scroll-linked *(inferred)*
- **what moves:** the wordmark, the link row, the outlined button; separately, the top scrim.
- **from → to:** entrance — `opacity 0 → 1`, `translateY −10px → 0`. Scroll-linked — the top scrim goes `rgba(40,29,27,0.34) → rgba(40,29,27,0.62)`; no transform on the nav itself.
- **range:** entrance triggers once on load, no scroll trigger. Duration **0.45–0.6s** *(not measured — use 0.5s)*, easing `cubic-bezier(0.22,1,0.36,1)`, stagger **50ms** across wordmark → links → button. Scroll-linked scrim runs from scroll 0 to scroll 120px and **reverses on the way back up**.
- **reduced motion:** entrance becomes an opacity-only fade at 0.2s, no translate. Scrim change still applies (it is not motion).

### Section 2 — Hero stage
- **kind:** scroll-linked *(inferred)*
- **what moves:** the photograph layer only. The scrim, the copy and the stats do not move with it.
- **from → to:** `translateY 0 → −80px` and `scale 1.00 → 1.04`, as a direct function of scroll position. On load only, a separate entrance settles `scale 1.06 → 1.00` with `opacity 0 → 1`.
- **range:** scroll-linked from the section top at the viewport top until the section bottom reaches the viewport top (1.00 viewport of scroll), linear mapping, **reverses on the way back up**. The load settle is a one-shot entrance, **0.8–1.1s** *(not measured — use 0.9s)*, easing `cubic-bezier(0.16,1,0.3,1)`.
- **reduced motion:** parallax removed entirely — the image is static at `translateY 0, scale 1`. The load settle becomes a plain fade.

### Section 3 — Hero copy column
- **kind:** entrance, plays once on arrival, does not reverse *(inferred)*
- **what moves:** eyebrow dot, eyebrow text, headline line 1, headline line 2, sub-paragraph, button row — six items as one stagger chain. Whole lines move; the headline is **not** split into words or characters.
- **from → to:** `opacity 0 → 1`, `translateY 24px → 0`. No scale, no clip-path, no blur.
- **range:** triggers once when the element's top reaches 80% of the viewport (on first load, fires immediately after the section-2 settle begins, at +0.15s). Duration **0.6–0.8s** per item *(not measured — use 0.7s)*, easing `cubic-bezier(0.22,1,0.36,1)`, stagger **80ms**.
- **reduced motion:** opacity 0 → 1 only, 0.2s, no translate, stagger reduced to 0.

### Section 4 — Stats band
- **kind:** entrance, plays once on arrival, does not reverse *(inferred)*
- **what moves:** each stat item as a unit (glyph + heading + sub-label together — the three lines do not stagger internally).
- **from → to:** `opacity 0 → 1`, `translateY 16px → 0`. Shorter travel than the copy column, deliberately — this band should arrive quietly.
- **range:** triggers once when the element's top reaches 80% of the viewport; on load it begins **after** the copy chain, at roughly +0.55s. Duration **0.6–0.8s** *(not measured — use 0.7s)*, same easing, stagger **120ms** between the two items.
- **reduced motion:** opacity only, 0.2s, no stagger.

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

- Nav link hover: colour `rgba(255,255,255,0.92) → #FFFFFF`, 150ms ease-out. No underline slide, no colour shift to orange.
- Nav button hover: border `rgba(255,255,255,0.45) → rgba(255,255,255,0.8)`, background → `rgba(255,255,255,0.08)`, 180ms ease-out. It never fills solid.
- Solid pill hover: background `#FFFFFF → #D4B7A5`, label stays #281D1B, 180ms ease-out.
- Arrow circle hover: the arrow glyph translates `+3px, −3px` and a second copy enters from `−3px, +3px`, 220ms `cubic-bezier(0.22,1,0.36,1)`; circle background matches the pill's hover tint. Pill and circle respond together when either is hovered.
- Press (all buttons): `scale 0.97`, 90ms ease-out.
- Focus-visible: `2px solid #FFFFFF` outline, `3px` offset, no glow.
- Eyebrow dot: a slow 2.4s opacity pulse `1 → 0.45 → 1` on the 5px core only. Disabled under reduced motion.

---

## 9. Responsive (below 640px)

- Section height becomes `min-height: 100svh` with content top-aligned at 96px rather than centred, so the face's eye stays visible in the lower two-thirds.
- Gutters **120px → 20px**. Container is full width.
- Nav links (4) collapse behind a 40px circular menu button at the right; the wordmark stays at 20px; the outlined "book" button is **dropped from the header** and re-appears nowhere — the solid pill in the copy column is the only CTA.
- Headline **72px → 2.5× body = 40px**, line-height 1.1, still forced to two lines (shorter placeholder if needed). Body **17 → 16px**, max-width 100%. Eyebrow 14px, stat headings **24 → 20px**.
- Stats band leaves the right edge and stacks **below** the button row as a left-aligned pair with a **32px** gap between items (not 128px), separated from the button by 48px. It does not become a horizontal 2-up row and does not gain a border.
- Photograph focal point shifts to **62% horizontal / 48% vertical** to keep the eye in frame at portrait crop; the left-edge scrim becomes a bottom-up scrim, `rgba(40,29,27,0.6)` at the bottom → transparent at 55% height.
- Parallax (section 2) is disabled below 640px. Entrances stay.

---

## 10. Don'ts

- **Don't flatten the photo under a uniform black overlay.** The whole composition depends on the image's own diagonal light bands surviving. Use the directional left + top gradients and nothing else. A 50% black `::before` kills this design instantly.
- **Don't paint the accent.** #B8663B must never appear as a button fill, a link colour, a border, an underline or a badge. It exists only inside the photograph. A page with an orange CTA is a different, worse design.
- **Don't centre the hero copy.** It is hard left at x=120 and the asymmetry against the floating right-hand stats band is the layout.
- **Don't align the stats band to the headline.** Its deliberate vertical offset is what makes it read as annotation rather than as a second column.
- **Don't put the stats in a box.** No border, no `rgba(255,255,255,0.1)` card, no backdrop-blur pill, no divider line between them. Two glyphs and four lines of text floating on the photograph.
- **Don't make the headline bold.** 400 weight at 72px. `font-weight: 700` on a 72px display line is the single most common way to ruin this.
- **Don't let the headline breathe.** Line-height is **1.06**, letter-spacing −0.02em. Default 1.2 line-height opens a gap between the two lines that breaks the block.
- **Don't split the headline for animation.** No per-word, per-character or blur-in text reveals. Two lines, two fades, 80ms apart.
- **Don't merge the pill and the arrow into one shape.** They are two separate rounded elements with a 4px gap that react as one on hover.
- **Don't add a scroll cue** — no chevron, no mouse-wheel glyph, no "scroll" label. The section ends flush.
- **Don't reach for a geometric sans.** Poppins, Montserrat and Circular all read wrong here; use a neo-grotesk (Inter/Inter Tight). Keep the slab serif for the 4-letter wordmark only — do not let it touch headings.
- **Don't round the photograph or inset it.** Full bleed, zero radius, no margin, no container.
- **Don't use a clean, smiling, half-body stock portrait.** It is an extreme crop of one eye, grainy, hard-lit, unretouched.
- **Don't apply text-shadow to win contrast.** If text is unreadable, deepen the gradient scrim or move the image's focal point — never outline or shadow the type.
- **Don't parallax the text.** Only the image layer translates on scroll; the copy and the stats stay locked to the viewport.
- **Don't make the nav sticky at desktop.** It sits on the photograph and scrolls away with it.