[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-243-Dadaist-Collage-Web":3},"# SYSTEM PROMPT — CODING AGENT: \"DADAIST \u002F COLLAGE WEB\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in the **Dadaist \u002F Collage Web** style **on the first attempt** — full `index.html`, `style.css`, and `script.js` delivered in one pass, with no TODOs, no stubs, and no placeholder-only sections. The page must run by simply opening `index.html` in a browser.\n\n**Project Definition**\n- **Theme:** Dadaist \u002F Collage Web (`claude-artisan\u002Fbrutalist` — a 2015–present digital revival of 1916 Dada photomontage).\n- **Keywords:** cut-and-paste photomontage, ransom-note type, absurd juxtaposition and chaos, mixed-media scraps and stickers, anti-rational composition, brutalist.\n- **Sections (in this order):** sticky Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Language:** Write **all user-facing copy in English**. (The source specification's Portuguese note — \"source does not declare light\u002Fdark modes; validate in light and dark before publishing\" — is translated and superseded here: dark mode is mandatory per §1.3.)\n- **Content:** Invent one coherent fictional product (e.g., a cut-and-paste collage\u002Fdesign tool) and name it. Write original, absurdist, Dada-toned English copy — but every CTA, label, and link must remain instantly understandable. Lorem-ipsum-only submissions are prohibited.\n\n---\n\n## 0. THEME DIRECTION — DADAIST \u002F COLLAGE WEB\n\n### 0.1 Signature Move (apply everywhere)\n**Pasted-sticker scraps:** hard 2px black outline (`--cutout-border`), flat offset shadow with **zero blur**, and a slight rotation from a fixed set. Repeat this treatment on the nav, cards, badges, buttons, photo scraps, inputs, modal, and footer blocks.\n\n### 0.2 Required Token Sheet (define in `:root`, extend per §1.2)\n- **Colors:** `--color-bg: #fff6ea`, `--color-surface: #fefefe` (source declared `#ffffff` — see exception in §1.2), `--color-surface-strong: #ffe37a`, `--color-border: #101010`, `--color-text: #101010`, `--color-text-muted: #514c3f`, `--color-primary: #ff3b30`, `--color-accent: #0043ff`, `--color-sticker: #34c759`, `--color-scrap-shadow: rgba(16,16,16,0.9)`.\n- **Radius:** `--radius-sm: 0px`, `--radius-md: 2px`, `--radius-lg: 3px`, `--radius-pill: 999px`.\n- **Shadows (flat, no blur):** `--shadow-sm: 3px 3px 0`, `--shadow-md: 6px 6px 0`, `--shadow-lg: 9px 9px 0` — offset color always `--color-scrap-shadow`.\n- **Fonts:** `--font-sans`, `--font-display` (serif), `--font-stamp`, `--font-mono`, plus `--font-base` (§1.6) — Google Fonts primary, system stacks as fallbacks only.\n- **Text scale:** `--text-xs` through `--text-5xl` (0.75rem → 4rem). **Space scale:** `--space-1` through `--space-24` (4px → 96px).\n- **Motion:** `--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)`; add `--transition-fast: 150ms`, `--transition-normal: 300ms`, and `--spacing-gap: 16px`.\n- **Collage extras:** `--scrap-rotate-1: rotate(-2.2deg)`, `--scrap-rotate-2: rotate(1.8deg)`, `--scrap-rotate-3: rotate(-0.7deg)`, `--cutout-border: 2px solid var(--color-border)`.\n- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` (§1.2).\n\n### 0.3 Ransom-Note Typography\nHero and section headlines mix the three font families per word (or letter), varying size, weight, case, background scraps, and rotation. Build this from spans styled **purely by classes**; the underlying DOM text must read as one coherent string for screen readers — rotation and font-mixing are visual-only.\n\n### 0.4 Photomontage & Mixed Media\n- Layered \"paper\" scraps, tape strips (semi-transparent pseudo-elements), and CSS-generated textures (repeating-linear\u002Fradial gradients for halftone dots and paper grain). No external texture files.\n- Photos: use `https:\u002F\u002Fpicsum.photos\u002F\u003Cwidth>\u002F\u003Cheight>?seed=\u003Cseed>` only, with meaningful English `alt` text, `loading=\"lazy\"`, fixed `aspect-ratio` (no layout shift), grayscale\u002Fcontrast CSS filters, cutout border + offset shadow + rotation.\n- Apply the skeleton shimmer (§2.2) to every image until its `load` event fires.\n\n### 0.5 Chaos Constraints (non-negotiable)\nAnti-rational composition must never destroy usability: rotations come only from the `--scrap-rotate-*` set (±3° custom allowed); overlaps must never cover text or interactive elements; `overflow-x: clip` on `body`; any scrap containing interactive content keeps a tap target of ≥44×44px.\n\n### 0.6 Section Blueprint\n- **Nav (sticky):** scrap-styled bar (`--scrap-rotate-3`), ransom-note wordmark, anchor links (Features, How It Works, Pricing, FAQ), theme toggle (§1.3); on mobile, links collapse behind a Material `menu` button opening a dropdown panel (`--z-dropdown`, `aria-expanded`, `aria-controls`).\n- **Hero:** sticker `.badge`, ransom-note `h1`, stamp\u002Fmono subcopy, two CTAs — `.btn--primary` (\"Start the chaos\" → smooth-scrolls to Pricing) and a secondary `.btn` (\"Read the manifesto\" → opens the modal, §2.4); photomontage scrap collage; decorative marquee strip (§3).\n- **Features:** 3 `.card` scraps with alternating rotations, Material icon in a sticker chip, title + description; hover lift (§2.2).\n- **How It Works:** semantic `\u003Col>` of 3 steps; stamp-font numerals in sticker badges; dashed \"cut-line\" connectors; each step a rotated scrap.\n- **Testimonials:** 3 `\u003Cfigure>\u002F\u003Cblockquote>\u002F\u003Cfigcaption>` quote scraps, alternating rotations, grayscale picsum avatars with skeleton loading, stamp-font attribution.\n- **Pricing:** 3 `.card` tiers; middle tier featured — `--color-surface-strong` background, rotated \"MOST POPULAR\" `.badge`, larger shadow; ransom-note prices; feature lists with Material `check` icons; CTA buttons demonstrating the loading→success cycle (§2.1, §3).\n- **FAQ:** 4–6 native `\u003Cdetails>` scraps (§3).\n- **Final CTA:** full-width `--color-surface-strong` banner scrap with big rotation and `--shadow-lg`; ransom-note headline; email-capture form (§2.3); secondary link opening the modal.\n- **Footer:** secondary links grouped in flex columns (wrapping, collapsing to one column on mobile), Material-symbol social links with `aria-label`, stamp-font copyright, back-to-top anchor.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** every design property, layout rule, and state lives in `style.css`, targeted via class or ID selectors.\n- **Clean, semantic markup:** HTML5 structure only (`header`, `nav`, `main`, `section`, `figure`, `footer`; one `h1`; one `h2` per section). Presentational spans for the ransom-note effect are allowed but must carry classes, never styles. Re-theming the page must require editing `style.css` only — never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\n- **Mandatory token set (in addition to §0.2):** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`. Map them to the palette (e.g., `--primary: #ff3b30`, `--secondary: #0043ff`, `--bg-primary: #fff6ea`, `--bg-secondary: #fefefe`, `--text-primary: #101010`, `--text-secondary: #514c3f`) and define the rest with values that pass contrast (suggested light mode: `--text-success: #0e7a33`, `--text-error: #d70015`, with matching `--border-success`\u002F`--border-error`).\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in the default theme **and** in dark mode (§1.3). Verify every text\u002Fbackground pair at ≥4.5:1 (AA) and every UI border\u002Flarge text at ≥3:1, in both modes.\n- **Light background:** never pure white — the page background is the cream `#fff6ea`; where a near-white surface is needed, use `#fefefe`. **Exception clause:** the source palette declared `surface: #ffffff`; per this mandatory rule it is implemented as `#fefefe`.\n- **Primary-button contrast:** `#ff3b30` with white text fails AA at default sizes. **Exception clause:** keep `--primary: #ff3b30` for decorative accents, but primary buttons must either use `#101010` text on the red or a darkened red variant — whichever passes ≥4.5:1 in both themes.\n- **Radius, shadow, spacing, and transition tokens** exactly as listed in §0.2; no hard-coded hex\u002Fpx values outside `:root` and theme blocks.\n- **Elevation\u002Fstacking:** define `--z-dropdown` (nav dropdown), `--z-modal`, `--z-toast` (e.g., 1000\u002F2000\u002F3000) and use them for every layered component so nothing ever overlaps incorrectly.\n\n### 1.3 Mandatory Dark Mode\n- **Define a full dark token set** — suggested: `--color-bg: #141414`, `--color-surface: #1f1f1f`, keep `--color-surface-strong: #ffe37a` (with `#101010` text on it), `--color-text: #fff6ea`, `--color-text-muted: #a39a86`, flip `--color-border` to `#fff6ea`, flip `--color-scrap-shadow` to `rgba(255,246,234,0.9)` so the flat offset shadows stay visible, and lighten `--color-accent` (e.g., `#7aa2ff`) for text usage. Verify all pairs per §1.2.\n- **Implementation:** dark tokens under both a `.dark` class **and** `@media (prefers-color-scheme: dark)` scoped to `:root:not(.light)`, so no-JS users still get dark mode and JS can force either mode. Background and text variables must switch seamlessly with no HTML restructuring.\n- **Persistence:** store the choice in `localStorage` (e.g., key `dada-theme`); on first visit fall back to `prefers-color-scheme`.\n- **Toggle control:** a visible button in the nav, ≥44×44px, styled as a sticker scrap, showing Material Symbols `light_mode`\u002F`dark_mode`, with correct `aria-pressed` and a descriptive `aria-label` that updates with state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n- **Mobile-first:** base styles target small viewports; breakpoints enhance upward. Multi-column rows (features, steps, pricing, footer links) collapse to single columns on small screens. **No horizontal scrolling at any width** (combine with §0.5).\n\n### 1.5 Framework & CSS Organization\n- Use Tailwind CSS utilities mapped to the design tokens, or clean custom CSS organized in `@layer` blocks (`tokens`, `base`, `layout`, `components`, `utilities`) with `@apply` where useful — the provided token sheet implies the custom-CSS route. Either way, every utility maps back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`).\n\n### 1.6 Typography & Icons — Google Fonts Mandatory\n- **Text:** load Google Fonts via `\u003Clink>` in `\u003Chead>` and bind them to tokens: a grotesque sans for `--font-base`\u002F`--font-sans` (e.g., Space Grotesk or Archivo), a display serif for `--font-display` (e.g., Playfair Display or DM Serif Display), and a monospace for `--font-stamp`\u002F`--font-mono` (e.g., Courier Prime or Space Mono). **Exception clause:** the source spec's system stacks (`'Helvetica Neue'`, `'Times New Roman'`, `'Courier New'`) are retained only as fallbacks inside the `--font-*` variables.\n- **Icons:** Google Material Symbols only (e.g., `content_cut`, `stamp`, `bolt`, `check`, `close`, `expand_more`, `dark_mode`, `light_mode`, `menu`, `arrow_forward`, `error`, `priority_high`). **Raw inline SVGs and local icon files are forbidden.** Decorative icons get `aria-hidden=\"true\"`; meaningful icons get accessible labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--danger`, `.btn--ghost`)\nAll states via CSS classes and BEM modifiers:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; pill radius; cutout border; `--shadow-sm`; bold label.\n- **Hover:** `cursor: pointer`; the scrap \"lifts\" — apply `--scrap-rotate-2`, `translateY(-2px)`, and `--shadow-md`, transitioned with `var(--transition-fast) var(--ease-standard)`.\n- **Focus:** distinct keyboard ring — `outline: 3px solid var(--color-accent); outline-offset: 3px` on `:focus-visible`, visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` combined with the flattened shadow (`1px 1px 0 var(--color-scrap-shadow)`). **Exception clause:** the source sheet's `.btn:active { transform: none }` is extended, not replaced, to include the required `scale(0.97)`.\n- **Loading:** `.btn--loading` disables interaction (`pointer-events` + `aria-busy=\"true\"`), prevents double-clicks, and renders a CSS spinner or animated Material Symbol **without changing the button's dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`, no transform.\n- **Success\u002FError:** temporary feedback classes (`.btn--success`, `.btn--error`) driven by `--text-success`\u002F`--text-error`, always paired with an icon — never color alone.\n- **Destructive:** `.btn-danger` must be visually distinct in both light and dark themes (error-red family + icon), even if the landing page only defines it for reuse.\n\n### 2.2 Cards (`.card` — Features, Pricing tiers, Testimonials, Steps)\n- **Default:** flexible Flexbox layout, `--bg-secondary` background, cutout border, `--shadow-lg`, padding `--space-6`, a rotation from the scrap set (alternate per card).\n- **Hover:** `transform: translateY(-2px)` and\u002For an elevation shift (`--shadow-md` → `--shadow-lg`).\n- **Focus-within:** card border\u002Foutline highlights when a child link or button receives focus.\n- **Loading (Skeleton):** a shimmer animation defined purely in CSS (`.skeleton`), applied to images and any async region; must never cause layout jumps (reserve dimensions).\n- **Empty State:** a structured fallback layout — large Google Material Symbol + short guidance text — defined in CSS and available for any card\u002Flist that can render without data.\n\n### 2.3 Forms & Inputs (Final CTA email capture)\n- **Structure:** a flex container wrapping a `\u003Clabel>`, the `.input` field, and a dedicated error\u002Fsuccess feedback container (`aria-live=\"polite\"`).\n- **States — all styled in CSS:** empty, focused (accent outline ring), filled, valid (success border + check icon), invalid (error border + error icon + message text), disabled, read-only.\n- **Behavior:** validate on submit; empty → \"This field refuses to stay blank\"; malformed email → error icon + message; valid → button enters loading (§2.1), then success feedback (\"Welcome to the chaos — check your inbox.\") with a check icon. Never color-only: every state pairs icon + text.\n\n### 2.4 Modal (Hero secondary CTA \"Read the manifesto\")\n- **States — all animated via CSS transitions:** opening (scrap drops in with rotation settle), open, loading (spinner while \"content loads\"), success\u002Ferror (a \"Sign the manifesto\" action inside shows temporary feedback), closing.\n- **UX:** centered flex container (`align-items: center`) over a backdrop overlay (`--z-modal`); Material Symbol `close` button; keyboard focus trapped inside while open; closes via `Esc` and overlay click; focus returns to the trigger on close; `role=\"dialog\"`, `aria-modal=\"true\"`, labelled by its heading.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type\u002Fspacing via `clamp()` where helpful; no horizontal overflow at any breakpoint; smooth-scroll anchor navigation (disabled under reduced motion).\n- **Smooth animations:** every state change transitions with `var(--transition-fast)`\u002F`var(--transition-normal)` and `var(--ease-standard)`. Under `prefers-reduced-motion: reduce`, disable rotations, the marquee, shimmer, and modal motion — content appears instantly.\n- **Accessibility:** AA contrast in both themes (§1.2); semantic HTML5 throughout; correct ARIA roles\u002Flabels on the nav dropdown, FAQ, modal, and theme toggle; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback and dynamic status.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change; buttons that don't navigate must demonstrate the loading→success cycle.\n- **Destructive actions:** `.btn-danger` visually distinct in both themes (§2.1).\n- **FAQ:** native `\u003Cdetails>\u002F\u003Csummary>` styled as scraps — keyboard-operable by default; `expand_more` icon rotates 180° on `[open]`; visible `:focus-visible` ring on summaries.\n- **Marquee (hero strip):** decorative Dada text loop, `aria-hidden=\"true\"`, static under reduced motion.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`, complete and runnable by opening `index.html`. No inline `\u003Cscript>` blocks — exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`.\n- **Naming convention:** BEM only (matching `.btn--primary`, `.card`, `.nav__toggle`) — never mix conventions.\n- **Copy:** all user-facing text in English, original and theme-appropriate; lorem-ipsum-only submissions prohibited. Placeholder images allowed only via `https:\u002F\u002Fpicsum.photos` (§0.4).\n- **First attempt:** deliver the finished page in one pass — every section built, every component state styled, dark mode working, no \"coming soon\" fragments.\n",1791954983705]