Cinematic AI platform hero

# Dark cinematic photographic hero — full-bleed section

A single hero **section**, not a page. One full-bleed photograph fills the viewport; a centred nav cluster floats at the top; a two-tone headline sits bottom-left over the dark lower third, with a hairline rule under it splitting a small uppercase label (left) from a two-paragraph body block (far right). Nothing else. No buttons, no cards, no scroll cue.

## 1. Structure

- **Viewport reference:** 1440 CSS px wide × 960 tall.
- **Section box:** full-bleed, edge to edge on all four sides, `height: 100vh; min-height: 760px`. No outer margin, no border radius, no mat.
- **Container:** full width with **80px left/right gutters** → 1280px content width. 12-column grid, 24px gutters (column = 84.7px).
- **Layers / sub-sections, top to bottom:**
  1. **Nav overlay** — absolutely positioned over the image, 40px from the top, horizontally centred.
  2. **Hero stage** — the backdrop layer: photograph (`object-fit: cover`), two gradient scrims, a grain layer, a vignette.
  3. **Headline block** — bottom-anchored, left-aligned on the gutter, two lines, max-width 1060px (cols 1–10).
  4. **Meta row** — a 1px hairline across the full 1280px content width, then two columns beneath it: uppercase label in cols 1–4 (≈411px), body paragraphs in cols 9–12 (≈411px). Cols 5–8 are deliberately empty.

3 and 4 are one bottom-anchored stack sitting inside 2. At 1440×960 the headline's first line starts at roughly **57% of viewport height**.

## 2. Scroll map

| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Nav overlay | 96px (40 pad + 16 line + 40 pad) | 0.10 | 0 (overlays §2) | static + one entrance |
| 2 | Hero stage | 960px | 1.00 | 960px | scroll-linked (parallax) + entrance |
| 3 | Headline block | 176px (2 × 72px lines + 32px trailing margin) | 0.18 | 0 (inside §2) | entrance |
| 4 | Meta row | 175px (rule + 24px + 150px content) | 0.18 | 0 (inside §2) | entrance |

**Total section height: 960px = 1.00 viewport.** No motion value on this page was measured off a live build; every number in the Motion section is inferred and given as a range.

## 3. Spacing

- Section padding: `80px` left/right, `40px` top (nav), `64px` bottom.
- Nav: single flex row, `gap: 80px`, items and the centre mark all in the same row, `justify-content: center`.
- Headline: line-box 72px, two lines, no extra margin between them (line-height does the work).
- Headline block → hairline: **32px**.
- Hairline → meta row content: **24px**.
- Between the two paragraphs in the right column: **20px**.
- Label (left) and first paragraph (right) share the same top edge.
- Meta row bottom → viewport bottom: **64px**.
- Rhythm: the whole lower stack is bottom-anchored, so the gap between nav and headline is whatever the viewport leaves (≈470px at 960 tall). Do not centre the stack vertically; do not distribute it with `space-between`.

## 4. Type

**Class: neutral grotesk** — Helvetica-lineage, closed apertures, straight terminals, double-storey *g*. Free stand-in: **Inter** (variable), with `letter-spacing: -0.02em` on the display line to get the tighter Helvetica colour. Acceptable alternates: Geist Sans, Instrument Sans. One family for everything.

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

| Level | Multiple | Size / line-height | Tracking | Weight | Colour | Measure |
|-------|----------|--------------------|----------|--------|--------|---------|
| Headline line 1 | 3.5× | 60px / 1.2 (72px) | −0.02em (−1.2px) | 500 | `#FFFFFF` | 22–26 chars, ≈0.65× the width of line 2 |
| Headline line 2 | 3.5× | 60px / 1.2 (72px) | −0.02em | 500 | `rgba(255,255,255,0.55)` | 33–36 chars → 950–1040px wide |
| Nav links | 0.82× | 14px / 1.0 | 0.12em | 500, uppercase | `rgba(255,255,255,0.92)` | 1–3 words each |
| Eyebrow label (§4 left) | 0.70× | 12px / 1.35 | 0.10em | 500, uppercase | `rgba(255,255,255,0.90)` | one line, max **45 chars** at 1440 |
| Body paragraph (§4 right) | 1.0× | 17px / 1.55 (26px) | 0 | 400 | `rgba(255,255,255,0.78)` | 45–50 chars per line in a 411px column |

Placeholder copy by role: nav — three items left of the mark, three right, 1–2 words each, the last reading as an entry point ("Get started") but set as plain text, not a button. Headline — a two-line statement: line 1 a short imperative pair (3–4 words), line 2 a longer clause (5–6 words). Label — a single uppercase sentence fragment, 6–9 words. Body — paragraph 1 of 2–3 lines (110–130 chars), paragraph 2 of 2 lines (85–95 chars).

Max line length on the page: 50 characters (the paragraph column). The headline never exceeds two lines at 1440.

## 5. Colour

Almost the entire surface is the photograph; the UI contributes only white and transparent white. Palette:

- `#2B2828` — **dominant**: the dark ground. Silhouetted towers, foliage, the near-black bottom third of the frame. This is the colour a viewer would call "the background".
- `#484745` — **secondary mass**: the fog/haze bank across the middle of the frame and the desaturated cloud shadow.
- `#986B67` — **atmosphere**: dusty rose in the sky at the top of the frame and in the shadowed side of the clouds.
- `#F4B796` — **the single accent**: the warm sun glow. It is allowed to appear *only inside the photograph* — the vertical slot of light between the towers, the lit edges of the clouds, the thin diagonal beam. It never touches type, rules, borders, hover states or focus rings.
- `#FDF5D6` — the pale warm core at the very centre of the light, a few hundred px² at most. Brightest point in the frame.
- `#FFFFFF` — nav links, headline line 1, the mark.
- `rgba(255,255,255,0.55 / 0.78 / 0.20)` — headline line 2, body copy, hairline rule.
- Scrim / page base: `#1A1818` (a warm near-black). **Never `#000000`.**

## 6. Surface

- Borders: exactly one — the meta-row hairline, `1px solid rgba(255,255,255,0.20)`, full 1280px content width.
- Corner radii: **0** everywhere. The section is square to the viewport edges. The only curved form on the page is the logo mark's arch.
- Shadows: none. No `box-shadow`, no `text-shadow`, no drop-shadow on type. Contrast comes from the image's own dark lower third plus the scrim.
- Scrims on the hero stage: (a) bottom `linear-gradient(to top, rgba(20,18,18,0.78) 0%, rgba(20,18,18,0.35) 28%, transparent 52%)`; (b) top `linear-gradient(to bottom, rgba(20,18,18,0.35), transparent 18%)` for nav legibility.
- Grain: a tiling noise texture over the whole stage at 6–9% opacity, `mix-blend-mode: overlay`, `pointer-events: none`. Plus a soft radial vignette darkening the four corners by ~20%.

## 7. Imagery

One image, one job.

**Hero backdrop** — 3:2 native, placed full-bleed `object-fit: cover; object-position: center`, sitting behind everything in §2.

Subject: two colossal, vertically fissured monoliths — basalt-column or ruined-tower masses with ragged, broken tops — rising out of a sea of fog and separated by a narrow vertical slot barely wider than a doorway. A low sun burns in that slot, its pale core at roughly 52% of the frame's width and 60% of its height; the light spills upward as a soft peach column and downward as a single thin, fiery diagonal beam raking toward the lower-left corner. Banks of cloud pile to the left and right of the towers, backlit along their upper edges, shadowed and grey beneath. Dark branch silhouettes intrude into the top-left, top-right and bottom-left corners, framing the frame like a natural vignette. The bottom third falls to near-black.

Treatment: heavily desaturated — the only chroma is in the sun core and the cloud rims; everything else is warm grey. Matte, lifted blacks, coarse film grain, soft-focus haze in the mid-ground. Photographic or photoreal render, not illustration, not a 3D clay look, not painterly.

Mobile crop: the same scene re-cropped to 4:5, keeping the slot of light and both tower tops in frame.

## 8. Motion

Restrained throughout: one entrance sequence on load, one shallow parallax, nothing else. All values below are **inferred**; no timing was measured on a live page, so each is a range rather than a fixed number.

### §1 Nav overlay
- **kind** — entrance (plays once, on load)
- **what moves** — the seven nav items and the centre mark, as one group
- **from → to** — opacity 0 → 1; translateY −4px → 0
- **range** — trigger: page load, after a 100–200ms hold; duration 500–700ms; easing ease-out (cubic-bezier ≈ .16,1,.3,1); stagger: none, the row moves as a single unit
- **reduced motion** — rendered at final state, no transform, no fade

### §2 Hero stage
- **kind** — entrance on load, then scroll-linked for the life of the section
- **what moves** — the backdrop photograph only. The grain and vignette layers are fixed and never transform.
- **from → to** — *entrance:* scale 1.06 → 1.00, opacity 0 → 1. *Scroll-linked:* translateY 0 → −80px (inferred; keep within a −60…−90px range) while the scrims and all text stay put, so the image drifts behind the copy.
- **range** — entrance: page load, 1400–1800ms, ease-out, no stagger. Scroll-linked: from the section top at scroll 0 until the section bottom reaches the viewport top — one viewport of travel — and it **reverses on the way back up**.
- **reduced motion** — no entrance scale, no parallax; the image is static at scale 1 and translateY 0, fading in over 200ms or not at all

### §3 Headline block
- **kind** — entrance (plays once; does not re-run and does not reverse on scroll-up)
- **what moves** — headline line 1, then headline line 2, as two separate targets
- **from → to** — opacity 0 → 1; translateY 20px → 0 (keep within 16–24px). No scale, no blur, no per-character split.
- **range** — trigger: on load, 300–400ms after the nav; if the section is mounted below the fold, trigger once when its top reaches 80% of the viewport. Duration 700–900ms, ease-out, **stagger 80–120ms between the two lines**.
- **reduced motion** — both lines at final state, opacity fades only, 150ms

### §4 Meta row
- **kind** — entrance (plays once)
- **what moves** — the hairline rule; then the uppercase label and the two paragraphs
- **from → to** — rule: `transform: scaleX(0) → scaleX(1)`, `transform-origin: left`. Label and paragraphs: opacity 0 → 1, translateY 10px → 0 (8–12px range).
- **range** — trigger: same load sequence, starting 150–250ms after headline line 2 begins. Rule duration 800–1100ms, ease-out; label/paragraphs 600–800ms with a 60–100ms stagger (label → paragraph 1 → paragraph 2), all beginning once the rule is ~60% drawn.
- **reduced motion** — rule drawn at full width immediately; text fades only, 150ms

### Ambient (optional, §2)
- **kind** — scroll-independent loop
- **what moves** — a radial glow element pinned to the slot of light
- **from → to** — opacity 0.85 ↔ 1.00, scale 1.00 ↔ 1.03
- **range** — 6–9s per cycle, ease-in-out, infinite alternate. Not measured; if in doubt, omit it entirely — the design reads correctly with a completely still image.
- **reduced motion** — removed

### Interaction transitions (not part of the scroll choreography)
- Nav link hover: colour `rgba(255,255,255,0.92)` → `#FFFFFF`, and a 1px `rgba(255,255,255,0.5)` underline grows from the left edge, 180–220ms ease-out; on leave it retracts to the left.
- Nav link press: opacity → 0.7, 80ms, no transform.
- Mark hover: opacity 1 → 0.75, 200ms. It is not a link target for anything else.
- Focus-visible (all interactive elements): 1px solid `#FFFFFF` outline, 4px offset, no radius, no glow.
- Mobile menu open/close: full-screen `#1A1818` panel at 96% opacity, fades in over 250ms while the links stagger up 12px at 40ms intervals; close reverses in 200ms.
- There are no other interactive elements. Nothing in §3 or §4 responds to hover.

## 9. Responsive (below 640px)

- Gutters 80px → **20px**; content width = viewport − 40px.
- Section height `100svh`, `min-height: 640px`; bottom padding 64 → 32px, top padding 40 → 24px.
- Backdrop swaps to the 4:5 crop, `object-position: 50% 45%`, so the slot of light stays visible above the copy. Bottom scrim strengthens to `rgba(20,18,18,0.86)` at the base.
- Nav: the centred seven-item row collapses to the mark centred alone, with a 14px uppercase `MENU` label right-aligned on the gutter. Links move into the full-screen panel, stacked, 20px, 0.08em tracking, 20px row gap, left-aligned on the gutter.
- Headline: 60px → **34px** (2.0× the body, which stays 17px), line-height 1.15, tracking −0.015em. Let it break naturally across 3 lines; keep the two-tone split by line meaning, not by line count — the muted colour starts at the second sentence wherever it falls.
- Meta row: the two columns stack — label first, then the paragraphs — 28px apart, both full width. The hairline stays, full content width. Paragraph measure drops to ~38 chars; keep 17px, do not shrink it.
- Nothing is dropped. The label, both paragraphs and the rule all survive.
- Parallax disabled below 640px; the image is static.

## 10. Don'ts

- **Don't build a page.** This is one section and it ends at the bottom edge of the hero. No feature grid, no logo wall, no stats strip, no testimonial, no footer, no second screen. If it is being dropped into a longer page, the next section starts immediately at 960px with no top margin.
- **Don't put a button in the hero.** No pill CTA under the headline, no arrow link, no "Watch the film". The only call to action is the last plain-text nav item, styled identically to its siblings — same size, same weight, same colour, no border, no fill, no chevron.
- **Don't rebuild the nav as left-logo / right-links.** It is one centred flex row with 80px gaps and the mark sitting in the middle of the links, three on each side. No sticky behaviour, no background bar, no bottom border, no blur panel, no shrink-on-scroll.
- **Don't make the headline display-sized.** 60px at 1440 is the point — a restrained editorial scale at 3.5× the body. 96px, 120px or `clamp()` up to 8vw destroys it. Equally, don't drop it below 54px.
- **Don't set both headline lines in white.** The white-then-55%-white split across two lines is the entire typographic device. And don't be clever with it: line 2 is neutral grey-white, never the peach accent, never a gradient.
- **Don't let `#F4B796` out of the photograph.** No peach buttons, links, underlines, focus rings, borders or hover states. Every pixel of UI is white or transparent white.
- **Don't centre anything except the nav.** Headline, label and rule are left-aligned on the 80px gutter; the paragraph block is right-aligned to the opposite gutter with a deliberate empty gap of four columns between them. Don't close that gap, don't move the paragraph under the headline, don't turn the meta row into a three-column feature list.
- **Don't add a plate behind the text** — no blurred glass panel, no dark card, no `text-shadow`, no semi-opaque box. Legibility is the bottom scrim's job and the photograph is already near-black down there.
- **Don't use pure black.** Blacks are warm: `#1A1818` for the base, `#2B2828` for the darkest mass in the image. `#000` reads as a hole.
- **Don't round or inset the section.** No border radius on the hero, no margin, no coloured mat around it. It bleeds to all four edges.
- **Don't add a scroll indicator** — no mouse glyph, no bouncing chevron, no "scroll" label, no progress bar.
- **Don't saturate or "enhance" the image.** It is desaturated, matte, grainy and hazy, with warmth only at the sun core. Skip the HDR/clarity/teal-orange instinct. No video background, no particles, no canvas fluid sim.
- **Don't overdo the parallax.** ~80px of image drift, nothing more; no scale-on-scroll, no rotation, no pinning, no clip-path reveal. The section holds still.
- **Don't re-run the entrances.** They play once on load. If any of them reverse or replay on scroll-up, it's wrong.
- **Don't animate per character or per word.** Both headline lines move as whole lines, with one 80–120ms stagger between them.
- **Don't reach for a geometric or quirky sans.** No Poppins, no Space Grotesk, no rounded terminals. A neutral grotesk at −0.02em tracking on the display line.
- **Don't drop or brighten the hairline.** It is 1px at 20% white across the full 1280px content width, and it is the only border on the page.
- **Don't justify the paragraph column or centre the label.** Left-aligned, ragged right, 45–50 characters.
- **Don't let the uppercase label go below 12px** in pursuit of the delicate look — shorten the copy to 45 characters instead.