# Hero 08 — Surreal Collage · Replication Prompt

Paste into Claude, Cursor, or v0:

```
Build a surreal-collage newsletter hero as a single self-contained HTML file (inline CSS, no frameworks). The mood is "dreamy risograph collage": a gradient sky flowing from cobalt blue through purple to peach, a vintage halftone mountain range across the bottom, whimsical floating paper-cutout objects, and a huge lowercase rounded wordmark.

BACKGROUND SCENE (single composited image)
- Page background: CSS linear-gradient fallback at 155deg — #1a2a6c (cobalt) → #5b3a8c (purple) at 45% → #e88a5a (peach). This shows wherever the image doesn't cover (e.g., below the fold on mobile).
- The scene image is fixed full-bleed (absolute full-height on mobile), object-fit cover, anchored center bottom (58% bottom on mobile so the left-side balloon doesn't clip).
- Scene generation prompt: "Surreal dreamy collage artwork: a smooth gradient sky flowing from deep cobalt blue at top left through soft purple into warm peach at the right, a crescent moon floating high, a vintage halftone screen-print style mountain range with snowy peaks spanning the bottom of the frame in muted teal and slate tones, a large whimsical hot air balloon shaped like a paper airplane with a small wicker basket floating at upper left, a glowing golden sun disc that looks like a shiny wax seal floating at lower right above the peaks, a tiny white envelope with small angel wings flying near the center, retro risograph print texture, paper collage cutout aesthetic, wide cinematic composition with a large empty expanse of gradient sky in the center for typography, no text, no letters."
- Readability glow: behind the hero content, a radial gradient (ellipse 62% 52% at 50% 44%, rgba(19,26,58,0.42) → transparent) so white text lifts off the busy collage — implement as a hero::before with z-index -1.

TYPOGRAPHY
- Fonts via Google Fonts: "Nunito" (400/600/700/800/900) for the wordmark, headline, buttons, and stat values; "Inter" (400/500/600) for body and nav.
- Display wordmark: "dispatch" — lowercase, Nunito 900, clamp(72px, 13vw, 190px), letter-spacing -0.04em, white, with a soft navy text-shadow (0 12px 60px rgba(19,26,58,0.35)), centered near the top of the hero.
- Kicker: "The Weekly Dispatch · Issue N°142" — 11.5px, uppercase, letter-spacing 0.34em, 55% white.
- Headline: "The ideas worth your inbox." — Nunito 800, clamp(30px, 3.6vw, 52px), letter-spacing -0.025em, white, centered.
- 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." — Inter 15.5px/1.7, 78% white, max-width 500px, centered.

LAYOUT
- Nav: lowercase wordmark left ("dispatch" + a small paper-plane SVG — white plane, one gold stroke), centered links (Issues / Topics / Manifesto / About, 13.5px, weight 600, dim white), right: white pill button "Hop aboard" (navy #131a3a text, 700). Buttons on this design playfully rotate -1deg and lift on hover. Hide links below 960px.
- Hero is a full-viewport flex column, centered: display word, kicker, headline, subhead, signup, then the stats pushed to the bottom with margin-top auto.
- Signup: centered pill form, max-width 500px, frosted glass (rgba(255,255,255,0.16) background, 1px rgba(255,255,255,0.4) border, 16px backdrop blur, deep navy shadow); transparent input (placeholder "you@example.com", 55% white); a GOLD "Subscribe" pill button (#f2b53a background, navy text, Nunito 900) — the gold echoes the wax-seal sun in the collage. Microcopy below: "Free forever. Unsubscribe anytime." at 12.5px, 85% white with a navy text-shadow for contrast against the mountains.
- Stats: four frosted-glass "tickets" in a grid (gap 18px), each with rgba(255,255,255,0.14) background, 1px rgba(255,255,255,0.34) border, 18px blur, 24px radius, navy shadow. The collage touch: each ticket is slightly rotated (alternating -1.2deg / +0.8deg / -0.7deg / +1.1deg, like pasted paper scraps) and floats gently (8s ease-in-out translateY ±9px, staggered delays). Value: Nunito 900, clamp(24px, 2.3vw, 32px); label: 12.5px, uppercase, letter-spacing 0.08em, dim white. Stats: "24,000+ / Subscribers", "Weekly / Every Friday", "5 min / Average read", "100% / Free, no ads".

RESPONSIVE
- Below 960px: nav links hidden; stats become a 2-column grid; the scene repositions to 58% bottom; the CSS gradient fallback deepens.
- Below 560px: stats stack single-column; signup stacks vertically (24px radius, full-width gold button); hero height relaxes.

DETAILS
- Buttons: translateY(-2px) rotate(-1deg) on hover — the tilt is this design's personality.
- All glass uses backdrop-filter with -webkit- prefix.
- Keep everything white + navy + that single gold accent. No other colors — the collage supplies the rest.
```