[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-763-THE-DARKROOM-a-film-development-timer":3},"# SYSTEM PROMPT — CODING AGENT TASK: \"THE DARKROOM\" Film Development Timer Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below in a single first attempt — full code, all sections, no fragments, no TODOs. All user-facing copy must be written in **English**.\n\n**Project Brief:** Design and build a landing page for **THE DARKROOM** — a film development timer app for analog photographers. Visual language: 2020s contemporary, time\u002Fclock aesthetic, safelight amber glow, animated gradients, neumorphism, hover effects, keyframe animations, transforms, box\u002Ftext shadows, generous border radius. Requested sections (in order): sticky Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\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:** All design properties, layout rules, and states must be targeted via class or ID selectors in the dedicated `style.css` file.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and free of presentational wrappers. Changing the site's look must require editing only the CSS file.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nAll visual tokens must be stored in `:root` (light theme) and redefined under the dark theme scope:\n\n* **Required color tokens:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Palette mapping (Light mode — the default\u002Fprimary theme per the spec):**\n  * `--bg-primary: #f7efe4` (warm paper cream — fits the darkroom mood; never pure white), `--bg-secondary: #fefefe`\n  * `--text-primary: #1c0d06`, `--text-secondary: #8a4a2a` (verify ≥ 4.5:1 on cream backgrounds)\n  * `--primary: #ff8a4a` (CTA fill, must pair with dark text `#1c0d06`), `--secondary: #e8a06a`\n* **Palette mapping (Dark mode):** `--bg-primary: #0d0503`, `--bg-secondary: #1c0d06`, `--text-primary: #ffb88a`, `--text-secondary: #e8a06a`; accents `#ff8a4a` \u002F `#e8a06a` retained; text on accent fills remains dark `#1c0503`.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce in both themes. Verify WCAG AA (4.5:1 body, 3:1 large text) in Light **and** Dark mode.\n* **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md` — plus neumorphic shadow tokens (e.g., `--shadow-neu-out`, `--shadow-neu-in`) built from dual box-shadows that must be redefined per theme (soft grey-beige shadows in Light, deep brown-black shadows in Dark).\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` (apply to the sticky header, mobile menu, and any layered element to prevent overlap conflicts).\n\n### 1.3 Mandatory Dark Mode Support\n* **Light mode is the default theme on first paint (per the spec's ✓ Light), but Dark Mode must always be fully defined** — the darkroom concept makes dark mode a natural fit and it may not be skipped.\n* **Implementation:** Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`, so background and text variables switch seamlessly without HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`.\n* **Toggle Control:** A visible toggle button (Material Symbols `light_mode` \u002F `dark_mode`) in the header with correct `aria-pressed` state and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), fully keyboard operable.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (e.g., feature-list columns).\n* **Mobile-Friendly First:** All flex layouts must be responsive out of the box — multi-column rows (features, pricing, footer columns) convert to single columns on small viewports. No horizontal scrolling at any breakpoint; use fluid typography via `clamp()`.\n\n### 1.5 Framework Default\n* Use **clean custom CSS** (no framework needed for this build), organized with reusable component classes (`.btn`, `.card`, `.input-group`, `.section`) that reference the CSS variables above. Any utility-style classes must map back to variables or generic reusable names.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load Google Fonts via `\u003Clink>` with preconnect — **Space Grotesk** (display\u002Fheadings), **Inter** (body), **JetBrains Mono** (timer digits) — bound to `--font-display`, `--font-base`, `--font-mono`.\n* **Icons:** Use the **Google Material Symbols (Rounded)** icon font exclusively. **Inline SVGs, local icon files, and emoji-as-icons are forbidden.**\n* Decorative animated elements (gradient orbs, film-grain glow) must be `aria-hidden=\"true\"`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + variants `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)\nAll states styled via CSS classes only:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.\n* **Hover:** Brightness\u002Fshadow shift with `cursor: pointer` (neumorphic lift on `.btn--secondary`).\n* **Focus:** Distinct `:focus-visible` ring using CSS variables (`outline` + `box-shadow`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)` feedback.\n* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol without distorting button dimensions (apply to the Final CTA submit button).\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n* **`.btn--danger`:** Must be visually distinct in both Light and Dark themes, even though no destructive action appears on this page — define it as part of the button system.\n\n### 2.2 Card Component (`.card` — used for Features, How It Works steps, Testimonials, Pricing)\n* **Default:** Flexible Flexbox layout, `--bg-secondary` fill, subtle `--border-default` and neumorphic elevation via variables.\n* **Hover:** Elevation shift plus `transform: translateY(-2px)` with `--transition-normal`.\n* **Focus-within:** Card borders highlight when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define shimmer keyframe animation styles in the CSS system to prevent layout jumps (define the utility even if no async content exists on this page).\n* **Empty State:** Define a structured fallback layout (Material Symbol + guidance text) as part of the card system.\n\n### 2.3 Form & Input Requirements (Final CTA email capture)\n* **States:** Empty, Focused (outline ring via variables), Filled, Valid (success border + check icon), Invalid (error border, error icon, red text), Disabled, Read-only.\n* **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error feedback container (`\u003Cp>` with `aria-live=\"polite\"`). Use `aria-describedby` and `aria-invalid` on invalid submit. Simulated submission must show Loading → Success inline feedback (check icon + confirmation message), never color-only signals.\n\n### 2.4 Modal \u002F Popup\n* The requested sections do not include a modal — do not add one. **Exception clause:** if any popup is introduced for any reason, it must implement: opening\u002Fopen\u002Floading\u002Fsuccess\u002Ferror\u002Fclosing states animated via CSS transitions, a centered flex overlay (`align-items: center`) with backdrop, Material Symbol close button, keyboard focus trapping, and closing via `Esc` or overlay click, layered at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, standard breakpoints (mobile-first), zero horizontal overflow.\n* **Smooth Animations:** All state changes use `transition: var(--transition-normal)` \u002F `var(--transition-fast)`. The hero features an **animated gradient background** (keyframes blending `#e8a06a`, `#ff8a4a`, `#8a4a2a`), a ticking monospace timer display (e.g., `07:45` counting down with a recipe label like \"HP5+ · Ilford DD-X 1:4\"), and a subtle scroll cue — all decorative animations must be disabled or reduced to opacity-only fades under `@media (prefers-reduced-motion: reduce)`.\n* **Accessibility (a11y):** AA contrast in both themes; never rely on color alone (pair icons + text for every state); semantic HTML5 landmarks; skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability (nav, toggle, FAQ accordion, all buttons); `aria-expanded` on accordion triggers and mobile menu button; `aria-live` regions for form feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change (nav link underline animation, card lift, chevron rotation on FAQ, button transforms).\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both Light and Dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Three files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `script.js` reference; no inline styles.\n* **Naming Convention:** Strict **BEM** (`.card`, `.card__title`, `.card--pricing`) across the entire deliverable — never mix conventions.\n* **Copy:** Write all real, in-theme English copy (feature names, step titles, testimonial quotes, pricing tiers, FAQ answers, footer labels). **Lorem ipsum and filler placeholders are prohibited** — none of the copy was user-supplied, so author quality product copy.\n* **JS Scope:** Lean vanilla `script.js` only — theme toggle + persistence, FAQ accordion, mobile nav toggle, smooth anchor scrolling, hero timer tick, form submit state simulation. No libraries, no inline event handlers (`addEventListener` only).\n\n---\n\n## 5. PAGE SECTIONS & CONTENT REQUIREMENTS\n\n* **Header:** Sticky nav — wordmark \"THE DARKROOM\" with Material `timer` icon, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA, mobile hamburger (`menu`\u002F`close` icons) with animated slide-down menu at `--z-dropdown`.\n* **Hero:** Full-viewport animated gradient; display headline with gradient text effect; subcopy; two CTAs (`.btn--primary` \"Start Developing\", `.btn--ghost` \"See How It Works\"); large neumorphic timer card in `--font-mono` ticking via JS.\n* **Features:** 3 neumorphic cards (Precision Timer Presets, Agitation Reminders, Development Logs) — each with a Material icon, title, copy, hover lift, `:focus-within` highlight.\n* **How It Works:** 3 numbered steps (01\u002F02\u002F03) with icons, connected by a gradient line, responsive to vertical stack on mobile.\n* **Testimonials:** 3 quote cards — star ratings via Material `star` icons with `aria-label` (\"Rated 5 out of 5\"), quote, avatar circle with gradient initials, name + role.\n* **Pricing:** 3 tiers (e.g., Darkroom Lite \u002F Pro \u002F Studio); middle tier highlighted with gradient border and \"Most Popular\" badge; feature lists with Material `check` icons; each tier CTA uses the full button state system from §2.1.\n* **FAQ:** 5–6 accessible accordion items (button + panel, `aria-expanded`\u002F`aria-controls`, animated height, rotating chevron).\n* **Final CTA:** Gradient panel with headline, email capture form per §2.3 (loading → success inline feedback), and privacy microcopy.\n* **Footer:** Multi-column secondary links (Product, Company, Support, Legal), logo, social icons via Material Symbols, copyright, back-to-top link; columns collapse to stacked flex column on mobile.\n\n**Output the complete, final code for all three files now — in one response, first attempt.**\n",1791954992478]