[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-671-Pin-Paper":3},"# BUILD PROMPT — \"PIN & PAPER\" HANDCRAFTED LITERARY LANDING PAGE\n\n**Role & Objective.** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready, fully interactive single-page marketing site for **Pin & Paper** — a fictional handcrafted stationery & journaling subscription studio — in a **single attempt**. No TODOs, no lorem ipsum, no \"add your content here\". The experience must feel handcrafted, literary, paper-grained, and intimate — deliberately *not* digital-polished (2020s modern editorial layout). All user-facing copy must be authored in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live in a dedicated `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* All design properties, layout rules, and state styles must be targeted exclusively via class or ID selectors.\n* HTML must remain clean, semantic, and style-agnostic: changing the entire look must require editing only `style.css`, never the markup. Decorations (grain, safety pins, ruled lines, stitched borders) must be implemented via CSS backgrounds, `mask-image`, and pseudo-elements — never as extra decorative HTML nodes (any unavoidable decorative element must be empty and `aria-hidden=\"true\"`).\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light) and a `.dark` class (dark). Required names — light theme values:\n\n```css\n:root {\n  --primary: #1F3A8A;          \u002F* deep ink — actions, links *\u002F\n  --secondary: #C2342B;        \u002F* safety-pin red — accents, danger *\u002F\n  --bg-primary: #F5E8A0;      \u002F* aged yellow paper *\u002F\n  --bg-secondary: #F8F1D6;    \u002F* cream — cards, alternating sections *\u002F\n  --bg-accent: #EFE56A;       \u002F* paper yellow — highlight panels, featured card, chips (constant in both themes; always pairs with ink text) *\u002F\n  --text-primary: #1A2550;    \u002F* ink blue *\u002F\n  --text-secondary: #4A5578;  \u002F* muted ink *\u002F\n  --text-success: #4F6B3A;    \u002F* moss *\u002F\n  --text-error: #C2342B;\n  --border-default: #D4C060;  \u002F* aged paper edge *\u002F\n  --border-error: #C2342B;\n  --border-success: #4F6B3A;\n  --text-on-primary: #F8F1D6; \u002F* text on --primary surfaces *\u002F\n  --focus-ring: #1F3A8A;\n  --font-display: 'Caveat', cursive;\n  --font-base: 'Lora', Georgia, serif;\n  --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px;\n  --shadow-sm: 0 1px 3px rgba(26, 37, 80, 0.14);\n  --shadow-md: 0 6px 18px rgba(26, 37, 80, 0.18);\n  --spacing-gap: 1.25rem;\n  --transition-fast: 200ms; --transition-normal: 320ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-header: 900; --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n  --header-height: 72px;\n  --grain-image: url(\"data:image\u002Fsvg+xml,...\"); \u002F* feTurbulence noise, authored by you, ink speckle at ≤8% opacity *\u002F\n}\n```\n\nDark theme (\"Midnight Manuscript\") overrides under `.dark`:\n\n```css\n.dark {\n  --bg-primary: #141B33;  --bg-secondary: #1E2946;\n  --text-primary: #F5E8A0; --text-secondary: #C6CC9B;\n  --primary: #EFE56A;    --text-on-primary: #1A2550;\n  --secondary: #E2574B;\n  --text-success: #9DBB7A; --border-success: #9DBB7A;\n  --text-error: #E2574B;  --border-error: #E2574B;\n  --border-default: #3A4468; --focus-ring: #EFE56A;\n  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);\n  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);\n}\n```\n\n* **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens with light text (e.g., dark-mode buttons are paper-yellow `--bg-accent`\u002F`--primary` surfaces carrying ink `#1A2550` text).\n* Never use pure white. If a near-white surface is needed anywhere, use `#fefefe`, not `#ffffff`.\n* Apply `--bg-accent: #EFE56A` panels\u002Ffeatured cards identically in both themes — yellow is light, so it must always carry ink text.\n\n**1.3 Mandatory Dark Mode Support**\n* Define the dark tokens above under both a `.dark` class **and** `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` so no-JS visitors still receive dark mode, while an explicit class always wins.\n* A visible toggle in the header (Google Material Symbol `dark_mode` \u002F `light_mode`) must carry `aria-pressed` and a descriptive `aria-label`; the choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n* All backgrounds and text must switch purely through variables — zero HTML restructuring, zero duplicate stylesheets.\n* **Exception:** the source spec marks dark mode as \"None\" — honor that intent by making the aged-paper light theme the default, but the mandatory dark variant above must still ship with the same toggle, persistence, and contrast guarantees.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox. Every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., stretch-to-equal-height pricing columns).\n* Mobile-first: multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px; fluid type via `clamp()`; **horizontal scrolling is forbidden** (guard rotated paper notes with section padding so ±2° rotations never overflow the viewport).\n\n**1.5 Styling Approach — Tailwind-Conformant Custom CSS**\n* Because the HTML may reference only one script (see Section 5), do not use the Tailwind CDN. Author `style.css` as clean custom CSS organized in native cascade layers mirroring Tailwind's philosophy: `@layer base`, `@layer components`, `@layer utilities`.\n* `@layer components` must define the generic reusable classes `.btn`, `.card`, `.input-group` plus all BEM blocks; every utility\u002Fhelper must map back to the CSS variables above. No arbitrary magic numbers for colors, spacing, or motion.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>` (with `preconnect`): **Caveat** (weights 400–700) bound to `--font-display`, and **Lora** (400–700, italics) bound to `--font-base`. Caveat is reserved for display per the source spec (\"Caveat for hero headlines\"): h1\u002Fh2, button labels (≥1.25rem, weight 600), section tag notes, and handwritten annotations. Lora is used for all body copy, nav links, form labels, FAQ questions, and prices — handwriting fonts are never used for long-form reading text.\n* Load **Google Material Symbols Rounded** for every functional icon. Raw inline `\u003Csvg>` elements and local icon files are **forbidden**.\n* **Exception:** the source spec explicitly demands safety-pin SVG illustrations and paper-grain SVG texture — these are permitted *only* as SVG data-URIs authored inside `style.css` (via `background-image` \u002F `mask-image` \u002F pseudo-elements, colored with token colors or `currentColor` so pins adapt per theme); inline `\u003Csvg>` tags in HTML remain forbidden, and all functional UI icons must be Google Material Symbols.\n\n**1.7 Theme-Specific Art Direction (Pin & Paper)**\n* **Paper grain:** body background layers `var(--bg-primary)` + `var(--grain-image)` (an `feTurbulence` noise data-URI, speckle opacity ≤ 8% so it reads on both themes); cards may take a fainter grain pass.\n* **Safety pins:** each pinned element (hero badge, section tags, testimonial notes, featured pricing card, modal panel) receives a pin via a CSS `mask-image` data-URI pseudo-element colored `var(--secondary)` (red-head pin) or ink, positioned at the tag's top edge.\n* **Handcraft details:** `1px solid var(--border-default)` paper edges; stitched\u002Fdashed borders on note-style cards; faint notebook rule lines via `repeating-linear-gradient` on hero paper sheets; paper tags and testimonial notes rotated ±1–2°; slight `transform: rotate` shifts on hover for playful paper feel.\n* **Hover language (from source spec):** interactive controls (`.btn`, links, tags) use `opacity: 0.8` over `var(--transition-fast)` (200ms) with `cursor: pointer`.\n* **Exception (justified):** large cards must not use the opacity-0.8 hover because it would wash out body-text contrast; their hover feedback is elevation + `translateY(-2px)` instead.\n* **Refined focus rings:** every interactive element uses `:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }` — never remove focus indicators.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Caveat label ≥1.25rem, minimum touch target 44×44px, `border-radius: var(--radius-sm)`.\n* Variants: `.btn--primary` (`--primary` bg + `--text-on-primary`), `.btn--secondary` (transparent bg, 1px ink border — \"ink stamp\"), `.btn--danger` (red `--secondary`\u002Ferror tokens — must be clearly distinct in **both** themes), `.btn--ghost` (text link with arrow Material Symbol).\n* **Hover:** `opacity: 0.8` + subtle lift, 200ms. **Focus:** ring per 1.7. **Active:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** `aria-busy=\"true\"`, pointer events disabled to prevent double-clicks, label fades to `opacity: 0`, an absolutely-centered CSS spinner (border-based ring) appears — button dimensions must not change.\n* **Disabled:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`, no hover effects.\n* **Success\u002FError:** temporary `.is-success` \u002F `.is-error` states swap in Material Symbols `check_circle` \u002F `error` with `--text-success` \u002F `--text-error` coloration; feedback is icon + text, never color alone.\n\n**2.2 Cards**\n* `.card` base: Flexbox column (with justified stretch exception where equal heights are needed), `--bg-secondary` surface, `1px solid var(--border-default)`, `--radius-md`, `--shadow-sm`.\n* **Hover (interactive cards):** `--shadow-md` + `translateY(-2px)` over `var(--transition-fast)`. **Focus-within:** border shifts to `--focus-ring` when a child link\u002Fbutton is focused.\n* **Skeleton:** define `.skeleton` shimmer (`linear-gradient` sweep keyframes, fixed line-height placeholders so nothing jumps) in CSS, ready for any async content.\n* **Empty state:** define `.card--empty`: Material Symbol + one line of guidance text, centered flex.\n* Theme variants: `.card--feature`, `.card--pricing`, `.card--pricing--featured` (paper-yellow `--bg-accent`, ink text, raised, \"most loved\" pinned tag), `.card--testimonial` (pinned note, rotated ±1°).\n\n**2.3 Forms & Inputs**\n* `.input-group` structure: flex container wrapping a visible `\u003Clabel>`, the input, and a dedicated error container `.input-group__error`.\n* States — **Empty** (cream field, `--border-default`), **Focused** (focus ring), **Filled**, **Valid** (`--border-success` + trailing `check_circle` icon), **Invalid** (`--border-error`, red helper text + `error` icon, `aria-invalid=\"true\"`, input `aria-describedby` pointing at the error id, message announced via an `aria-live=\"polite\"` region), **Disabled** (per 2.1), **Read-only** (dashed border, muted text).\n* Placeholders render in Caveat (`--font-display`, muted ink) for handwritten charm.\n\n**2.4 Modal \u002F Dialog**\n* Triggered by hero, pricing, and nav CTAs (\"Reserve your first kit\": name + email `.input-group`s + submit).\n* **States:** Opening (backdrop fade + panel `translateY`\u002Fscale via CSS transitions), Open, Loading (submit button `.is-loading`, ~900ms simulated async), Success (form swaps to `check_circle` + Caveat thank-you note, toast fires), Error (inline invalid feedback), Closing (reverse animation, respects reduced motion).\n* `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; centered flex overlay with dimmed ink backdrop; Material Symbol `close` button with `aria-label=\"Close dialog\"`; keyboard **focus trap** (Tab\u002FShift+Tab cycle), closes on **Esc** and overlay click, focus returns to the trigger, body scroll locked, stacking at `--z-modal`.\n\n**2.5 FAQ Accordion**\n* Pattern: `\u003Ch3>\u003Cbutton class=\"faq__trigger\" aria-expanded=\"…\" aria-controls=\"…\">` + panel (`role=\"region\"`, `aria-labelledby`). CSS height transition (grid-rows or max-height technique); one panel open at a time; fully keyboard operable; `aria-expanded` always reflects state; icon (`expand_more` Material Symbol) rotates — state is conveyed by icon rotation **and** `aria-expanded`, not color alone.\n\n**2.6 Navigation, Theme Toggle & Toast**\n* Sticky header (`z-index: var(--z-header)`), cream paper surface, bottom paper border; logo in Caveat; anchor links; theme toggle (per 1.3); CTA button.\n* Mobile: hamburger (`menu` symbol) with `aria-expanded`\u002F`aria-controls`, panel at `--z-dropdown`, closes on Esc and link selection, focus managed into the panel.\n* `.toast`: paper-note card, bottom-right, `role=\"status\"` inside a persistent `aria-live=\"polite\"` region, auto-dismisses in 4s, dismiss button with `close` icon + `aria-label`, stacking at `--z-toast`.\n* Anchor targets get `scroll-margin-top: calc(var(--header-height) + 1rem)`; smooth scrolling only when motion is allowed.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography, single breakpoint strategy (~768px), zero horizontal overflow.\n* **Smooth animations:** every state change uses `transition: var(--transition-normal)` (or `--transition-fast` for hover), and the following block is mandatory:\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n* **Accessibility:** text contrast ≥ 4.5:1 in **both** themes; never color alone for state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); single `h1`, logical h2→h3 order; visible skip link; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading feedback.\n* **Mandatory visual feedback:** every click, hover, toggle, and submission triggers a visible state change.\n* **Progressive enhancement:** all content is visible and usable without JS; a scroll-reveal effect (`.reveal` → `.is-visible` via IntersectionObserver) only initializes when the user has no reduced-motion preference.\n* **No external images:** all visuals are CSS, data-URI SVG, and Material Symbols only.\n\n---\n\n## 4. PAGE COMPOSITION & REQUIRED CONTENT (WRITE THIS COPY — NO LOREM IPSUM)\n\n**4.1 Header:** Logo \"Pin & Paper\" (Caveat, tiny pin mark) · links: Features, How it works, Testimonials, Pricing, FAQ · theme toggle · `.btn--primary` \"Start writing\" (opens modal).\n\n**4.2 Hero (`#hero`):** pinned paper-tag eyebrow \"handmade · small-batch · slow\" · h1 (Caveat, `clamp(3rem, 7vw, 5.5rem)`): **\"Pin your story to paper.\"** · sub (Lora): \"Pin & Paper is a monthly stationery ritual for people who still think in ink — archival paper, gentle prompts, and a quiet place to keep every page you've ever pinned.\" · CTAs: primary \"Start writing\" (modal) + secondary anchor \"See how it works\" · Caveat footnote \"first kit ships in a paper envelope, always\" · CSS-only visual: layered rotated paper sheets with ruled lines, a pinned tag, safety pins.\n\n**4.3 Features (`#features`) — 3 `.card--feature`:** h2 \"Made slowly, by hand\". (1) `history_edu` — \"Paper with a pulse\" — 120gsm cotton-blend sheets that take fountain ink without a whisper of bleed, cut and packed by hand. (2) `tips_and_updates` — \"Prompts that whisper\" — twelve gentle prompts a month; no streaks, no pressure, one honest page. (3) `push_pin` — \"Pin & keep\" — scan any page with the companion app and pin it to your private, searchable archive.\n\n**4.4 How It Works (`#how-it-works`) — 3 steps** joined by a dashed \"stitch\" line (hidden on mobile): `local_post_office` \"01 · Receive your kit\" · `edit` \"02 · Write by hand\" · `document_scanner` \"03 · Pin it forever\".\n\n**4.5 Testimonials (`#testimonials`) — 3 pinned notes** (rotated, red safety pin): \"I bought it for the paper. I stayed for the quiet.\" — Mariana E., novelist · \"It's the only subscription that doesn't want my attention — just my handwriting.\" — Jonah R., teacher · \"Three years in, my archive is the book I always meant to write.\" — Priya S., night-shift nurse. Quotes in Lora italic; attributions in Caveat; initials in paper-yellow circles.\n\n**4.6 Pricing (`#pricing`) — 3 tiers:** Loose Leaf $9\u002Fmo (prompts, printable pack, 50-page archive) · **The Folio $24\u002Fmo — featured, `.card--pricing--featured`, paper-yellow, pinned \"most loved\" tag** (full stationery kit, journal refill, unlimited archive, quarterly letterpress print) · The Anthology $48\u002Fmo (monthly letterpress art print, reading circles, hand-pinned surprise, priority post). Buttons open the modal; footnote \"Cancel anytime. Pause whenever. The ink forgives.\" Feature lists pair `check` icons with text.\n\n**4.7 FAQ (`#faq`) — 6 accordion items:** paper weight & fountain-pen friendliness · shipping timing (first kit in 5 business days, worldwide) · pause\u002Fcancel anytime, archive retained · app optional and ad-free · gift subscriptions with a handwritten note · international flat-rate shipping.\n\n**4.8 Final CTA (`#cta`):** paper-yellow panel, h2 (Caveat) \"Your next chapter is pinned & waiting.\" · newsletter `.input-group` (label \"Email address\", Caveat placeholder \"you@somewhere.quiet\") + `.btn--primary` \"Save my spot\" · footnote \"One letter a month. Unsubscribe with one click.\" · full form states per 2.3, inline success + toast.\n\n**4.9 Footer:** inverted deep-ink surface (`#141B33` in light theme, slightly lifted in dark) with aged-paper text (pairing rule respected). Brand blurb + tagline · \"Explore\" (Features, How it works, Pricing, FAQ) · \"Studio\" (About, Journal, Contact, Gift cards) · \"Fine print\" (Privacy, Terms, Accessibility, Shipping) · `mail` icon link \"hello@pinandpaper.co\" · bottom line \"© 2025 Pin & Paper Studio. Made slowly, by hand.\" in Caveat.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* Exactly three files: `index.html`, `style.css`, `script.js`. The HTML contains **one** script reference only: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline script blocks, no inline styles, no inline event handlers — all JS via `addEventListener` in `script.js`.\n* `script.js` implements: theme persistence\u002Ftoggle, mobile menu, FAQ accordion, modal with focus trap, email validation with live feedback, loading\u002Fsuccess\u002Ferror button states, toasts, and motion-safe scroll reveals.\n* **Naming convention:** strict BEM only (`.btn`, `.btn--primary`, `.card__title`, `.pricing-card--featured`, `.input-group__error`, `.faq__trigger`, …) — never mix conventions.\n* **Placeholders:** none — the copy in Section 4 is real and final; render it verbatim (minor in-voice polish allowed). No lorem ipsum anywhere.\n* `\u003Chtml lang=\"en\">`, viewport meta, title \"Pin & Paper — Handcrafted stationery for slow writers\", meta description. Deliver the complete, working code for all three files in one response.\n",1791954991024]