# Hero 01 — Dark Botanical Glass · Replication Prompt

Paste into Claude, Cursor, or v0:

```
Build a dark, cinematic newsletter hero section as a single self-contained HTML file (inline CSS, no frameworks, no JS dependencies). The mood is "premium nature editorial": a near-black page with moody moss/forest photography bleeding in from the left and right edges.

LAYOUT & BACKGROUND
- Page background: #070907 (near-black with a green undertone).
- Two fixed-position background images (dark moss-covered forest rocks, deep emerald green, heavily shadowed): one anchored to the left edge, one to the right, each ~46vw wide, full height, object-fit: cover, opacity 1.0. Fade each into the page with a mask-image linear gradient (90% opaque at the outer edge, fully transparent by 92% inward). On mobile, widen to ~90vw and drop opacity to 0.3.
- Add a light radial vignette overlay (ellipse 64% 48% centered at 50% 38%): rgba(7,9,7,0.38) at the center fading through rgba(7,9,7,0.08) at 52% to fully transparent at the edges — the moss and ferns stay clearly visible across the whole frame. Compensate with text-shadows on the kicker, headline, and subhead (soft dark green-black glows, e.g. 0 2px 30px rgba(7,9,7,0.75)) so type stays readable without a heavy overlay.
- Generate or source the photography: "cinematic dark moody photograph of ancient moss-covered forest floor and granite rocks, deep emerald moss, wet dark stone, overcast diffused light, near-black shadows, shallow depth of field, atmospheric mist." Create darkened, edge-faded variants for the left/right backdrop.

TYPOGRAPHY
- Fonts via Google Fonts: "Inter Tight" (400/500/600) for UI text, "Instrument Serif" italic for display accents.
- Kicker: 12px, weight 500, uppercase, letter-spacing 0.32em, color rgba(242,244,240,0.42), centered.
- Headline: two-part, centered, max-width 15ch. Line 1: Inter Tight 600, clamp(44px, 6.4vw, 84px), line-height 1.04, letter-spacing -0.035em, color #f2f4f0. Line 2: Instrument Serif italic, same size, on its own block line.
- Subhead: 17px, line-height 1.65, color rgba(242,244,240,0.62), max-width 560px, centered.
- Primary text color: #f2f4f0. Accent color (small rules under stats): #9fbe5a (moss green).

CONTENT (use exactly):
- Wordmark: "Dispatch" with a small 2x2 grid SVG logo (rounded squares, two #f2f4f0, two #9fbe5a at different opacities).
- Nav: wordmark left; centered pill nav (Home Page / About / Archive / Pricing) in a frosted glass rounded-full container (rgba(255,255,255,0.06) bg, 1px rgba(255,255,255,0.14) border, 18px backdrop blur); right side: "Login" text link + "Get started" white pill button (dark text). Hide pill nav below 640px.
- Kicker: "The Weekly Dispatch · Issue N°142"
- Headline: "The ideas worth" / "your inbox." (second line in the italic serif)
- 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."
- Signup: centered pill form, max-width 520px, frosted glass (same glass treatment as nav), containing a transparent text input (placeholder "you@example.com", placeholder color rgba(242,244,240,0.42)) and a white "Subscribe" pill button (dark text, weight 600). Below it, microcopy: "Free forever. Unsubscribe anytime." at 13px, faint. On mobile the form stacks vertically with a 24px radius.
- Stats row: 4 minimal editorial cards in a grid (gap 18px), collapsing to 2 columns at 980px and 1 column at 640px. Each card: 18px border radius, ~250px min height, a single 1px rgba(242,244,240,0.12) border, no background fill (the page's moss backdrop shows through), padding 26px, content bottom-anchored via flex column + justify-content flex-end. Inside each card: the stat value in Instrument Serif italic (~44px), a 34px × 2px moss-green rule, the label in 15.5px semibold, and a 13px muted one-line note.
  Card 1: "24,000+" / "Subscribers" / "Readers who open, finish, and forward — not just names on a list."
  Card 2: "Weekly" / "Every Friday" / "One email, same time every week. Predictable by design."
  Card 3: "5 min" / "Average read" / "Long enough to matter. Short enough to actually finish."
  Card 4: "100%" / "Free, no ads" / "No sponsors, no tracking pixels, no noise. Just the ideas."
- Footer: tiny centered line, 12.5px, faint: "© Dispatch — The ideas worth your inbox."

DETAILS
- Buttons: subtle hover lift (translateY(-1px)) and brighten to pure white.
- All glass surfaces use backdrop-filter: blur + saturate with -webkit- prefix.
- Spacing: hero section ~84px top / 110px bottom padding; 30px between kicker and headline; 30px under headline; signup at 44px; stats at 90px.
- Fully responsive, no horizontal scroll, text never overlaps photography at unreadable contrast.
```