[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-292-Film-Grain-Noise":3},"# System Prompt — Build a \"Film Grain \u002F Noise\" Themed Landing Page (Retro & Pop)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a **complete, production-quality landing page on the first attempt** — no stubs, no \"to be implemented\" comments, no lorem ipsum.\n\n**Project brief:**\n- **Theme:** Film Grain \u002F Noise — analog film heritage; cinematic, tactile, warm; subtle photographic grain over flat color on every major surface.\n- **Product concept:** A coherent fictional product in the analog-film space (suggested: a photo editor or preset library that applies authentic film grain and film-stock emulation to digital images). You may invent the brand name, but all copy must be written for this concept.\n- **Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **All user-facing copy must be written in English.**\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 Selectors Only:** All design properties, layout rules, and states must be targeted via class selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic (landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling. Changing the site's look must require editing only the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens (Mandatory Base)\nAdopt the following token block **verbatim as the default (dark) theme**, then extend it. Do not redesign or rename these tokens:\n\n```css\n:root {\n  --color-bg: #211d1a;\n  --color-surface: #2b2622;\n  --color-surface-strong: #35302a;\n  --color-border: #4a423a;\n  --color-text: #f2ece2;\n  --color-text-muted: #bdb2a3;\n  --color-primary: #d98c4a;\n  --color-accent: #7fa08f;\n  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);\n  --shadow-md: 0 8px 20px rgba(0,0,0,0.42);\n  --shadow-lg: 0 18px 40px rgba(0,0,0,0.5);\n  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;\n  --font-display: 'Fraunces', 'Georgia', serif;\n  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --grain-image: url(\"data:image\u002Fsvg+xml;utf8,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='120' height='120'>\u003Cfilter id='n'>\u003CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\u002F>\u003CfeColorMatrix type='saturate' values='0'\u002F>\u003C\u002Ffilter>\u003Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'\u002F>\u003C\u002Fsvg>\");\n  --grain-opacity: 0.16;\n}\n```\n\n- **Required Extensions (same naming convention):** Add `--color-success`, `--color-error`, `--color-border-success`, `--color-border-error`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--spacing-gap: 16px`. Never mix naming conventions — the `--color-*` \u002F `--space-*` \u002F `--radius-*` prefixes are canonical.\n- **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in **both** themes. The provided pairings (`#211d1a` ↔ `#f2ece2`, `#d98c4a` fill ↔ `#211d1a` text, `#7fa08f` fill ↔ `#16241d` text) must be preserved or equivalently contrasted.\n- **No Pure White:** Never use `#ffffff`. Where a near-white is needed in light mode, use `#fefefe` — but prefer warm paper tones that fit the analog mood (see 1.3).\n\n### 1.3 Mandatory Dual-Theme Support (Dark \"Darkroom\" + Light \"Analog Paper\")\nThe source spec does not declare modes — therefore you must **build and validate both themes before considering the page done**:\n\n- **Dark (default brand mode):** The exact palette in 1.2 — deep warm brown-black surfaces, cream text, amber primary, sage accent.\n- **Light (\"Analog Paper\"):** Derive a warm light palette in the same hue family — suggested starting point: `--color-bg: #f2ecdf`, `--color-surface: #e9e1d2`, `--color-surface-strong: #ded4c1`, `--color-border: #c4b79f`, `--color-text: #26211c`, `--color-text-muted: #6e6252`, `--color-primary: #a35c1e` (darkened amber for AA contrast on paper), `--color-accent: #4e7a63`. Fine-tune as needed to pass WCAG AA (4.5:1 body text, 3:1 large text\u002FUI). Never pure white.\n- **Implementation:** Define dark tokens in `:root`, light tokens under `[data-theme=\"light\"]`, plus a `@media (prefers-color-scheme: light) { :root:not([data-theme]) { … } }` fallback for no-JS first visits. Theme switching must require **zero HTML restructuring** — only variable redefinition.\n- **Persistence:** `script.js` reads `localStorage` (key: `filmgrain-theme`); on first visit with no stored value, fall back to `prefers-color-scheme`; if no preference is detectable, default to **dark** (the brand mode). Apply via `data-theme` attribute on `\u003Chtml>`.\n- **Toggle Control:** A visible theme-toggle button in the nav with a Google Material Symbols icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and an `aria-label` that updates (\"Switch to light mode\" \u002F \"Switch to dark mode\").\n- **Grain in Both Themes:** The grain texture must remain visible in light mode. Adjust intensity per theme (e.g., a second `--grain-image` data-URI with lower internal rect opacity, or a pseudo-element overlay using `var(--grain-opacity)`). Grain must never push text below AA contrast.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox** (and CSS Grid only for multi-card grids where columns are genuinely 2-dimensional).\n- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (e.g., stacked hero text).\n- **Mobile-First:** All rows convert to columns on small viewports; no horizontal scrolling at any breakpoint; minimum touch target of 44×44px on all interactive elements.\n\n### 1.5 Styling Approach & Naming Convention\n- Use **clean vanilla custom CSS** driven by the provided token\u002Fcomponent system (the spec's custom CSS is the framework for this build — do not introduce Tailwind or any other framework).\n- **Naming Convention:** BEM exclusively (`.btn`, `.btn--primary`, `.card`, `.card--featured`, `.nav__link`, `.faq__item`). Never mix conventions.\n- All component classes must map back to CSS variables — no hard-coded colors, shadows, or radii in component rules.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text Fonts (Google Fonts only, loaded via `\u003Clink>` with `preconnect` and `display=swap`):** The spec's `Suisse Int'l` and `Canela` are proprietary — substitute with Google Fonts equivalents: **Inter** for `--font-sans`, **Fraunces** for `--font-display` (editorial serif, Canela-like), **IBM Plex Mono** for `--font-mono` (available on Google Fonts as-is). Keep the fallback stacks.\n- **Icons:** Use **Google Material Symbols (Rounded variant)** loaded via Google Fonts. Every icon must be `aria-hidden=\"true\"` when decorative, or carry an `aria-label` when meaningful.\n- **No raw inline SVGs or local icon files.** **Explicit exception:** the fractal-noise SVG data-URI inside `--grain-image` is a CSS background *texture*, not an icon — it is the single permitted SVG and must be kept exactly as specified, living only in `style.css`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\nAdopt the spec's base component classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) as your design-system foundation, then extend as follows:\n\n### 2.1 Button\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Variants: `.btn--primary` (amber fill, dark text), `.btn--ghost` (transparent, border), `.btn--danger` (visually distinct via `--color-error` in **both** themes).\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer` (spec's `translateY(-1px)` + `--shadow-md`).\n- **Focus:** distinct `:focus-visible` ring using `outline` with `--color-primary` and offset.\n- **Active\u002FPressed:** visible transform feedback (the spec's `translateY(0)` reset qualifies; `scale(0.97)` also acceptable).\n- **Loading:** `.is-loading` class — disables interaction, prevents double-clicks, renders a CSS spinner or animated Material icon **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` temporary feedback styles driven by `--color-success` \u002F `--color-error`, paired with an icon or text (never color alone).\n\n### 2.2 Card\n- **Default:** Flexbox layout, grain surface (`--color-surface` + `--grain-image`), `--color-border` border, `--radius-lg`, `--shadow-md`.\n- **Hover (interactive cards only):** `transform: translateY(-2px)` and shadow shift.\n- **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define `.card--skeleton` with a CSS shimmer animation to prevent layout jumps.\n- **Empty State:** define `.card--empty` — a Google icon plus clear guidance text.\n\n### 2.3 Form & Input (Final CTA email capture)\n- **Structure:** A flex `.input-group` wrapping a label, the `.input` field, and a dedicated error-feedback container.\n- **States — all styled via CSS classes:** Empty, Focused (the spec's primary border + `rgba(217,140,74,0.28)` ring), Filled, Valid (success border + check icon), Invalid (error border, error text, error icon), Disabled, Read-only.\n- **Feedback:** Validation messages render in an `aria-live=\"polite\"` region. Never rely on color alone — pair border color with icon and text.\n\n### 2.4 FAQ Accordion (Disclosure)\n- Build with native `\u003Cdetails>`\u002F`\u003Csummary>` (preferred for robust a11y) or a button + region pattern with `aria-expanded` \u002F `aria-controls`.\n- **Summary row:** flex, `align-items: center`, `justify-content: space-between`, with a Material Symbols chevron (`expand_more`) that rotates 180° on open.\n- **Animation:** smooth open\u002Fclose transition via CSS; must respect `prefers-reduced-motion`. Fully keyboard operable — no mouse-only interactions.\n- **No modals\u002Fpopups are in scope for this build — do not add any.**\n\n---\n\n## 3. PAGE STRUCTURE & ART DIRECTION\n\n**Global art direction (Retro & Pop, analog heritage):** mono uppercase \"film-credit\" kickers (IBM Plex Mono, letter-spaced) above Fraunces display headlines; generous `--space-24` section rhythm; grain applied to **every major surface** (body, nav, cards, hero, footer) so texture reads as one continuous analog surface; warm gradients always layered with grain (multiple backgrounds: `radial-gradient(...), var(--grain-image)`) to eliminate banding; optional retro film-frame\u002Fsprocket motifs built purely with CSS pseudo-elements — never extra icon files or inline SVGs.\n\n1. **Sticky Nav:** wordmark (display font), anchor links to all sections, theme toggle (per 1.3), compact CTA. Grain surface per spec. On mobile: accessible hamburger menu (Material icon, `aria-expanded`, keyboard-focusable, closes with `Esc`).\n2. **Hero:** mono kicker, Fraunces headline, subcopy, two CTAs (`.btn--primary` + `.btn--ghost`), grainy warm radial gradient backdrop, optional CSS film-frame decoration. CTAs scroll to Pricing \u002F Final CTA.\n3. **Features (3 cards):** grid — 1 column mobile, 3 columns desktop. Each card: Material Symbol icon, title, real copy. Card states per 2.2.\n4. **How It Works (3 steps):** mono numerals `01 \u002F 02 \u002F 03`, connecting rule\u002Fline on desktop (collapses gracefully on mobile), icon + title + copy per step.\n5. **Testimonials (3 cards):** quote styling (serif or `format_quote` icon), circular initials avatar built in CSS, name + muted role, optional Material star icons.\n6. **Pricing (3 tiers):** featured middle tier — primary border, \"Most Popular\" `.badge`, elevated shadow. Feature lists with Material `check` icons. Per-tier CTA (featured = `.btn--primary`).\n7. **FAQ:** 5–6 real questions about the fictional product, per 2.4.\n8. **Final CTA:** centered display headline, email capture form per 2.3. Submit flow: loading state → success state with `aria-live` confirmation message.\n9. **Footer:** secondary link groups (Product, Company, Resources), muted text, visible hover\u002Ffocus states on all links, copyright line, grain surface.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully disabled under `prefers-reduced-motion: reduce`.\n- **Accessibility (a11y):** AA contrast in **both** themes; semantic HTML5 landmarks; a \"Skip to main content\" link; logical DOM\u002Ffocus order; full keyboard operability; correct ARIA roles\u002Flabels on the nav menu, toggle, accordion, and form feedback; `aria-live` regions for all dynamic feedback.\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive\u002FDistinct Actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 5. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `\u003Cscript src=\"script.js\" defer>` entry point. No inline styles anywhere.\n- **Copy:** Write real, on-brand English copy for the fictional analog-film product across every section — no lorem ipsum, no placeholder-only submissions.\n- **Self-Check Before Delivery:** (1) zero `style=` attributes; (2) both themes validated light and dark with the toggle persisting across reloads; (3) grain visible on body, nav, cards, hero, and footer in both themes; (4) all button\u002Finput\u002Fcard states present in CSS; (5) keyboard-only pass of the entire page succeeds; (6) no horizontal scroll from 320px up.\n",1791954984546]