[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-729-CUT-PASTE-a-paper-collage-zine":3},"# CODING PROMPT — Build the \"CUT & PASTE: A Paper-Collage Zine\" Landing Page\n\n**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below in a single attempt. It must ship fully responsive, accessible, light-default with a fully working dark theme, and 100% themed — no scaffolding, no TODOs, no lorem ipsum.\n\n---\n\n## 0. PROJECT BRIEF\n\n**0.1 Theme Identity & Product Context**\nBuild a marketing landing page for \"Cut & Paste,\" a fictional web app for creating digital paper-collage zines. The page itself must look like a hand-assembled 2020s zine: torn paper edges, masking tape, tilted paper blocks, typewriter labels, duotone gradient washes, and playful scribble energy. Author ALL user-facing copy in English, in a playful, craft-forward, slightly irreverent zine editorial voice (e.g., headlines like \"Snip. Layer. Ship.\").\n\n**0.2 Art Direction (Mandatory Techniques)**\n- **Torn edges & collage:** `clip-path` polygons for torn paper shapes and section dividers; tilted blocks via `transform: rotate()`; hand-cut \"wobble\" border radius (`255px 15px 225px 15px \u002F 15px 225px 15px 255px`) on buttons and cards.\n- **Blend modes:** overlapping paper shapes use `mix-blend-mode: multiply` on the cream background for authentic collage layering.\n- **CSS Filters:** tasteful `sepia`\u002F`saturate`\u002F`contrast` for aged-paper washes; `grayscale` on disabled elements.\n- **Neumorphism (paper-softened):** soft dual box-shadows (dark + light) derived from the cream background for buttons, inputs, and cards.\n- **Gradients:** duotone paper washes on hero shapes and CTA banner; never allow gradients to reduce text contrast.\n- **Motion:** gentle floating hero collage pieces (staggered keyframes), infinite tape-marquee, hover lift\u002Frotate, accordion\u002Fmodal transitions, shimmer skeletons.\n- **No image assets:** every visual is CSS-composed. Avatars are CSS monogram circles. No raw inline SVGs — icons come exclusively from Google Material Symbols.\n\n**0.3 Palette → Token Map (Light theme — designed default)**\n```\n--primary: #e04a2a         (zine red-orange: CTAs, highlights, tape accents)\n--secondary: #2e7fa4        (cut-paper blue: links, step badges, icons)\n--bg-primary: #f2e8d5      (main cream paper background)\n--bg-secondary: #faf3e3    (paper card\u002Fsheet background)\n--text-primary: #1b1512    (ink black)\n--text-secondary: rgba(27, 21, 18, 0.68)   (faded ink)\n--text-success: #2e7d4f    --text-error: #b3261e\n--border-default: #d9c9a3   (aged paper tan)   --border-success \u002F --border-error: match text tokens\n--tape: rgba(217, 201, 163, 0.8)   (masking-tape overlay)\n```\nDark ink text on cream backgrounds — contrast pairing satisfied.\n\n**0.4 Mandatory Dark Token Overrides (defined under `[data-theme=\"dark\"]`)**\n```\n--bg-primary: #1b1512   --bg-secondary: #2a211b   --text-primary: #faf3e3\n--text-secondary: #d9c9a3   --primary: #ff6b47   --secondary: #6fb6d9\n--border-default: #4a3b30   --text-success: #7fd6a0   --text-error: #ff8f80\n```\n\n**0.5 Required Page Sections (in order)**\n1. **Sticky Header (furniture):** \"CUT & PASTE\" wordmark + `content_cut` icon; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scroll; theme toggle; compact CTA button. Below 768px, links collapse behind an accessible menu button (`aria-expanded` disclosure panel).\n2. **Hero:** masking-tape kicker strip in Special Elite uppercase (\"ISSUE Nº 01 — MAKE SOMETHING\"); `\u003Ch1>` in the display font with a hard offset text-shadow; subcopy; primary CTA \"Start Collaging\" + ghost anchor CTA \"See How It Works\"; a CSS-composed floating collage (torn clip-path shapes in red-orange, blue, tan, cream with gradient washes, `multiply` blend, tape strips, scattered Material Symbol chips) — staggered float keyframes, `aria-hidden=\"true\"`, `pointer-events: none`.\n3. **Tape Marquee Divider:** thin infinite-scroll band \"CUT • PASTE • CREATE • REPEAT\" via `translateX` keyframes; halts under reduced motion.\n4. **Features (3 cards):** section heading + three paper-scrap `.card`s with alternating slight rotation (≈ ±1.5deg); each card has a Material Symbol on a tilted paper chip, a title, and two lines of copy.\n5. **How It Works (3 steps):** horizontal flex row of three steps, each with a blue numbered paper badge (1\u002F2\u002F3), title, and copy; dashed \"cut line\" connectors with a small `content_cut` icon between steps; stacks vertically below 768px.\n6. **Testimonials (3 quotes):** paper-scrap quote cards with a tape corner pseudo-element, a row of `star` Material Symbols (decorative, `aria-hidden`), CSS monogram avatar circles, and authored name + role in zine voice.\n7. **Pricing (3 tiers):** tier names (e.g., SCRAP \u002F STAPLER \u002F PRESS) on Special Elite tape labels, price, feature list with `check` icons, per-tier CTA; middle tier is `.card--featured` (primary border, slight raise, tape badge \"MOST INKED\"); small-print billing note.\n8. **FAQ:** section heading + accessible accordion (per Rule 2.5) with at least 5 authored questions; a \"Still have questions?\" `.btn-secondary` that opens the contact modal (per Rule 2.4).\n9. **Final CTA:** full-width collage banner with torn `clip-path` top\u002Fbottom edges and gradient wash; big display headline; email capture form (per Rule 2.3) — input + button inline on desktop, stacked on mobile; inline success\u002Ferror feedback.\n10. **Footer (secondary links):** an ink strip in light mode (bg `#1b1512`, text `#faf3e3`\u002F`#d9c9a3` — in dark mode use `--bg-secondary` with standard dark tokens); brand blurb, three secondary link columns (Product anchors, Company, Legal), Material Symbol social buttons with `aria-label`s, copyright, and a \"hand-assembled with CSS\" credit.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target all properties, layout, and states via class or ID selectors only.\n- HTML must be semantic and styling-agnostic (header, nav, main, section, article, footer); reskinning the site must require editing CSS only.\n- Build collage decoration with classes + `::before`\u002F`::after` pseudo-elements; every purely decorative layer gets `aria-hidden=\"true\"` and `pointer-events: none`.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store every token in `:root` and re-map under `[data-theme=\"dark\"]`: the full color set from 0.3\u002F0.4; radii `--radius-sm: 4px`, `--radius-md: 12px`, `--radius-lg: 24px`, `--radius-wobble` (hand-cut); shadows `--shadow-sm`, `--shadow-md`, `--shadow-poster` (hard offset ink shadow), `--shadow-neu` (dual neumorphic shadow) — all re-tokenized per theme; spacing `--spacing-gap: 1.5rem`, `--section-padding: clamp(4rem, 10vw, 7rem)`; motion `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(.4,0,.2,1)`, `--ease-paper: cubic-bezier(.34,1.56,.64,1)`; stacking `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`; fonts `--font-display`, `--font-base`, `--font-zine`.\n- **Contrast pairing law:** light background ↔ dark text, dark background ↔ light text, enforced in every theme. Any near-white must be `#fefefe`, never `#ffffff`.\n- Verify WCAG AA in both themes: 4.5:1 for body text, 3:1 for large\u002Fbold text and UI components; if a pairing fails, adjust within the palette family.\n\n**1.3 Mandatory Dark Mode Support**\n- Light is the designed default, but dark tokens must be fully defined under `[data-theme=\"dark\"]` on `\u003Chtml>`, with `color-scheme` declared.\n- **Persistence:** store the user's choice in `localStorage`; a visible header toggle with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"); icon swap (`dark_mode`\u002F`light_mode`) driven purely by CSS on `[data-theme]`. Theme initialization must be the very first statements in `script.js` to minimize flash.\n- Dark-mode adaptations required: replace `multiply` blending with `screen`\u002F`soft-light` or plain layering where it would kill contrast; re-tokenize neumorphic and poster shadows; keep tape overlays visible.\n- **Exception clause (this brief selects Light):** on first visit, default to the light theme instead of consulting `prefers-color-scheme`; persist the user's explicit toggle choice thereafter.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout container with Flexbox. **Default to `align-items: center`** unless an exception is explicitly justified (text-heavy cards may use `flex-start`).\n- Mobile-first: multi-column rows collapse to a single column below 768px; no horizontal overflow at any viewport from 320px up; fluid type and spacing via `clamp()`; absolutely positioned collage pieces must be contained by their parents.\n\n**1.5 Framework & Styling Strategy**\n- Tailwind CSS (CDN) may be used for structural utilities only (flex, gap, sizing, responsive prefixes). ALL thematic styling — colors, collage effects, component skins — lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, …). Alternatively, deliver clean custom CSS; never mix half-defined conventions or one-off utility soup for themed components.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Google Fonts via `\u003Clink>` with `preconnect`: **Archivo Black** (display, `--font-display`), **Space Grotesk** 400\u002F500\u002F700 (body, `--font-base`), **Special Elite** (zine typewriter for kickers, labels, tape notes, `--font-zine`).\n- Icons: **Google Material Symbols (Rounded)**. Required icons include `content_cut`, `content_paste`, `check`, `close`, `expand_more`, `dark_mode`, `light_mode`, `progress_activity`, `star`. **Inline SVGs and local icon files are forbidden; never use emoji as icons.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n- Variants: `.btn-primary` (red-orange), `.btn-secondary` (blue), `.btn-ghost` (ink outline, transparent), `.btn-danger` (distinct in both themes).\n- **Default:** flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`), minimum 44×44px touch target, wobble radius, hard offset poster shadow.\n- **Hover:** lifts (`translate(-2px, -2px)`) with the shadow growing; `cursor: pointer`.\n- **Focus:** distinct visible ring via CSS variables on `:focus-visible` for keyboard navigation — never removed.\n- **Active\u002FPressed:** `transform: scale(0.97)` with the shadow collapsing — a \"pressed into paper\" feel.\n- **Loading (`.is-loading`):** `aria-busy=\"true\"`, interactions disabled to prevent double-clicks, label swaps to a spinning `progress_activity` icon without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, `grayscale` filter, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styles driven by `--text-success`\u002F`--text-error`, always paired with an icon and\u002For text change — never color alone.\n\n**2.2 Cards**\n- **Default:** paper-scrap base — `--bg-secondary`, torn edge via `clip-path` polygon, slight rotation, tape pseudo-element; because `clip-path` clips box-shadows, use `filter: drop-shadow()` so the shadow follows the torn silhouette.\n- **Hover:** `transform: translateY(-2px)` with rotation settling to 0deg and a shadow shift.\n- **Focus-within:** border\u002Fhighlight change when a child link or button receives focus.\n- **Loading (Skeleton):** define shimmer keyframe classes for testimonial cards to prevent layout jumps.\n- **Empty State:** define a fallback pattern — a Material Symbol plus short guidance copy.\n- **Featured modifier (`.card--featured`):** primary border, raised shadow\u002Fscale, tape badge — used for the middle pricing tier.\n\n**2.3 Forms & Inputs** (Final CTA email capture + modal contact field)\n- **Structure:** `.input-group` flex container wrapping a tape-styled label (Special Elite), the input, and a dedicated `.input-error` feedback container.\n- **States:** empty; focused (visible ring via CSS variables); filled; valid (success border + `check` icon); invalid (error border + error icon + specific error text); disabled; read-only.\n- **Behavior:** JS validates on submit and blur; the error container has `aria-live=\"polite\"` and is linked to the input via `aria-describedby`; on success, show an inline confirmation announcement and route the button through `.is-loading` → `.is-success`. Zine-voiced error copy is encouraged (\"That email looks torn — try again?\").\n\n**2.4 Modal \u002F Popup** (FAQ \"Still have questions?\" contact modal)\n- **States:** opening (scale 0.96→1 + fade), open, loading (submitting), success\u002Ferror (inline feedback), closing (reverse transition) — all CSS-animated.\n- **UX:** centered flex container (`align-items: center; justify-content: center`), dimmed backdrop overlay at `--z-modal`, Material Symbol `close` button, focus trapping (Tab\u002FShift+Tab cycle), close via `Esc` and overlay click, focus returns to the trigger, body scroll locked. `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`. Reduced motion: fade only.\n\n**2.5 FAQ Accordion**\n- Each item: a full-width flex `\u003Cbutton>` trigger (question text + `expand_more` icon that rotates 180deg) and a content panel.\n- ARIA: trigger has `aria-expanded` + `aria-controls`; panel has `role=\"region\"` + `aria-labelledby`.\n- Animate height with the CSS Grid `0fr → 1fr` rows technique (no JS height measuring); items toggle independently; native button keyboard behavior preserved; visible focus states.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints without horizontal overflow from 320px up.\n- **Smooth animations:** transitions on all state changes via the motion tokens; keyframes for float, marquee, shimmer, and spinner. Under `prefers-reduced-motion: reduce`, stop floats\u002Fmarquee, shorten transitions, and keep feedback non-animated.\n- **Accessibility (a11y):** AA contrast in both themes; never rely on color alone to communicate state; semantic HTML5 with a single `\u003Ch1>` and logical heading order; a skip-to-content link; correct ARIA on the theme toggle, menu, accordion, and modal; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, modal status, and CTA confirmations.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn-danger` must be visually distinct in both light and dark themes.\n- **Blend & layer guard:** text must never sit beneath a blend layer that reduces its contrast; decorative layers are `aria-hidden` and `pointer-events: none`; animate only `transform` and `opacity`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `script.js` reference; zero inline styles.\n- **Naming:** BEM throughout (`block__element--modifier`, e.g., `.hero__title`, `.card--featured`, `.faq__panel`). Never mix conventions.\n- **Copy:** author real English copy in the zine voice for every section — realistic testimonial names and roles, plausible tier pricing, five genuine FAQ questions. No lorem ipsum.\n- **Head:** Google Fonts and Material Symbols `\u003Clink>` tags with `preconnect`.\n- **Self-check before finishing:** both themes pass contrast; the theme toggle persists across reloads; a keyboard-only walkthrough works end-to-end (menu → anchors → FAQ → modal → email form); a 320px viewport shows no horizontal overflow.\n",1791954991743]