# Hero 21 — Fogged Glass · Replication Prompt

Paste into Claude, Cursor, or v0:

```
Build a mysterious fogged-glass newsletter hero as a single self-contained HTML file (inline CSS, no frameworks). The mood is "thriller movie poster": a full-bleed photograph of condensation-covered glass with a figure's eyes barely visible through a clear band, bold uppercase type split across the top and bottom of the frame, and everything text-shadowed for legibility.

PALETTE & TYPE
- Fallback background: #4c5a55 muted sage-gray. Text: #ffffff. Dim rgba(255,255,255,0.82), faint rgba(255,255,255,0.6). Every text element gets a soft dark text-shadow (0 2px 22px rgba(20,30,28,0.65)) for contrast against the photo.
- Fonts via Google Fonts: "Archivo" (500/700/800) for headline, wordmark, and stat values; "Inter" (400/500/600) for kicker, subhead, nav.

BACKDROP
- Full-bleed fixed photo (absolute full-height on mobile), object-fit cover, positioned center 32%.
- Image generation prompt: "Atmospheric photograph looking through fogged condensation-covered glass at a person standing behind it, the entire frame covered in textured mist and water droplets except one clean horizontal band wiped clear across the upper-middle of the frame revealing a pair of sharp striking eyes looking directly through, moody desaturated gray-green tones, mysterious and cinematic, the clear band crisp and the rest deeply obscured, no text."

LAYOUT
- Nav: wordmark left ("Dispatch" + a small envelope SVG), right: text links (Issues / Topics / About, 13px, weight 600). Hide links below 900px.
- Hero fills the viewport as a flex column:
  - A spacer (24vh, 18vh on mobile) pushes the first headline down to roughly where the clear band sits in the photo.
  - Headline top: "THE IDEAS WORTH" — Archivo 800, uppercase, clamp(30px, 4.6vw, 66px), letter-spacing 0.02em, max-width 14ch, positioned above the clear eye-band.
  - A large gap (16–20vh) so the second headline line sits below the eyes.
  - Headline bottom: "YOUR INBOX." — same type treatment, right-aligned, pushed down with margin-top: auto.
  - Below that, a split row: kicker "The Weekly Dispatch · Issue N°142" (11.5px, uppercase, letter-spacing 0.3em) on the left, subhead "One email every Friday. Big ideas, clear thinking, and zero noise — for 24,000 readers who like their insights sharp and their inboxes calm." (14px/1.7, right-aligned, max-width 380px) on the right.
  - Signup: frosted pill (rgba(20,30,28,0.55) background, 1px rgba(255,255,255,0.4) border, 14px backdrop blur); transparent input (placeholder "you@example.com"); white "Subscribe" pill button (dark green text). Microcopy: "Free forever. Unsubscribe anytime." at 12.5px.
  - Stats: four columns above a 1px white/35%-opacity top border, separated by matching left borders. Value: Archivo 800 uppercase, clamp(19px, 2vw, 27px); label: 11px uppercase letter-spacing 0.14em. Stats: "24,000+ / Subscribers", "Weekly / Every Friday", "5 min / Average read", "100% / Free, no ads".

RESPONSIVE
- Below 900px: nav links hidden; the sub-row stacks (kicker then left-aligned subhead); stats wrap 2 per row.
- Below 560px: stats stack full-width; signup stacks vertically; headline sizes drop to clamp(26px, 8.5vw, 40px).

DETAILS
- The text-shadow on every element is not optional — it's what keeps type legible against the fog texture.
- The gap between the two headline halves must roughly frame the photo's clear eye-band; adjust the spacer height to match your specific image.
- No card backgrounds except the signup form — everything else floats directly on the photo.
```