[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-229-Cyanotype":3},"# CODING AGENT BRIEF — Build a Complete \"Cyanotype\" Landing Page (Art & Illustration)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page **in a single pass** for an original botanical cyanotype art & illustration studio (invent a fitting studio name — e.g., in the spirit of \"Prussian & Fern\" or \"The Sunprint Annex\"; do not copy real brands).\n\n**Theme:** *Cyanotype* — Prussian-blue monochrome photographic prints, white silhouettes on deep blue, botanical\u002Fphotogram subjects, antique handmade quality (era: 1842–present; reference: Anna Atkins botanical cyanotypes). Signature move: deep Prussian-blue monochrome with a soft photogram vignette bleed, repeated on `body`, cards, and nav for a print-emulsion feel.\n\n**Required sections:** Sticky Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Copy mandate:** Write ALL user-facing copy in **English** — original, theme-appropriate, real copy (an atelier selling hand-coated, sun-exposed botanical prints and editions). No lorem ipsum. Placeholders are permitted only where content is genuinely unspecified.\n\n---\n\n## 1. ARCHITECTURE & STRICT RULES\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **No inline scripts or handlers:** No `\u003Cscript>` blocks in the HTML beyond one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no `onclick`\u002F`on*` attributes. All behavior via `addEventListener` in `script.js`.\n* **Class\u002FID selectors only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n* **Clean, semantic, style-agnostic HTML:** Changing the site's look must require editing only the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens (Canonical Foundation)\nStore all visual tokens in `:root` and the light-theme class. Use **exactly this refactored foundation** (the source spec's tokens renamed to canonical names; values preserved):\n\n```css\n\u002F* ============================================================\n   Cyanotype — design tokens (canonical naming)\n   Era: 1842–present | Sir John Herschel's photographic process\n   Reference specification: references\u002F00-flagship-implementation-specs\u002Fcyanotype.md\n   ============================================================ *\u002F\n:root {\n  \u002F* color — DARK theme (native Cyanotype, default) *\u002F\n  --bg-primary: #0d2c61;\n  --bg-secondary: #123a7a;\n  --surface-strong: #17458f;\n  --border-default: #6f92d1;\n  --text-primary: #eaf1ff;\n  --text-secondary: #b6c9ec;\n  --primary: #ffffff;\n  --secondary: #a9c4f5;\n  --bleed: rgba(255, 255, 255, 0.10);\n  --text-success: #9fe8c6;\n  --text-error: #ffb3a7;\n  --border-success: rgba(159, 232, 198, 0.55);\n  --border-error: rgba(255, 179, 167, 0.55);\n  \u002F* radius *\u002F\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;\n  \u002F* shadow *\u002F\n  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);\n  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.34);\n  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.38);\n  \u002F* font *\u002F\n  --font-base: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;\n  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;\n  --font-mono: 'Courier Prime', ui-monospace, monospace;\n  \u002F* text scale *\u002F\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;\n  --text-4xl: 3rem; --text-5xl: 4rem;\n  \u002F* space *\u002F\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  --spacing-gap: 16px;\n  \u002F* motion *\u002F\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* stacking *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* signature: photogram silhouette vignette + emulsion grain edge *\u002F\n  --emulsion-vignette: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,0.28) 100%);\n  --botanical-border: 1px solid rgba(255,255,255,0.35);\n}\n\n\u002F* Base components — extend, do not dilute *\u002F\nbody { margin: 0; color: var(--text-primary); font-family: var(--font-base);\n  background: var(--bg-primary); background-image: var(--emulsion-vignette); }\n.nav { display: flex; gap: var(--space-4); align-items: center;\n  padding: var(--space-3) var(--space-6); background: var(--bg-secondary);\n  border-bottom: var(--botanical-border); }\n.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem;\n  font: 500 var(--text-base)\u002F1 var(--font-base); letter-spacing: .03em;\n  color: var(--text-primary); padding: var(--space-3) var(--space-6);\n  border-radius: var(--radius-sm); background: var(--bleed);\n  border: var(--botanical-border); box-shadow: var(--shadow-sm); cursor: pointer;\n  transition: transform var(--transition-fast) var(--ease-standard),\n              box-shadow var(--transition-fast) var(--ease-standard); }\n.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.06); }\n.btn:active { transform: scale(0.97); }\n.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }\n.btn[disabled] { opacity: .45; filter: grayscale(0.6); cursor: not-allowed; }\n.btn--primary { background: var(--primary); color: var(--bg-primary); border-color: var(--primary); }\n.card { background: var(--bg-secondary); background-image: var(--emulsion-vignette);\n  border: var(--botanical-border); border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md); padding: var(--space-6); }\n.input { width: 100%; box-sizing: border-box; color: var(--text-primary);\n  font: var(--text-base) var(--font-base); padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-sm); background: var(--bleed); border: var(--botanical-border); }\n.input::placeholder { color: var(--text-secondary); }\n.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,255,255,0.20); }\n.badge { display: inline-flex; align-items: center; gap: .4em; font-size: var(--text-xs);\n  padding: .3em .8em; border-radius: var(--radius-pill); background: var(--bleed);\n  color: var(--text-primary); border: var(--botanical-border); }\n```\n\n**Token rules:**\n* **Contrast pairing:** Every light background token must pair with a dark text token and vice versa — enforced in **both** themes, not just the default.\n* **Light-mode background:** Never pure white. Where a near-white is genuinely needed, use `#fefefe`, never `#ffffff` as a page background.\n* You may fine-tune the suggested success\u002Ferror values **only** if required to pass WCAG AA; never leave the Prussian-blue hue family or break the light\u002Fdark pairing.\n\n### 1.3 Mandatory Dual-Theme Support (Dark + Light)\nThe source specification does not declare modes — therefore you must **define and validate both before publishing.**\n* **Dark theme (default):** The native Cyanotype palette above (deep Prussian blue + light text).\n* **Light theme (\"Faded Print\"):** Invert within the same hue family — pale blueprint-paper backgrounds with deep Prussian-blue silhouettes and text. Define under `[data-theme=\"light\"]` on `\u003Chtml>`:\n  * `--bg-primary: #eaf1ff; --bg-secondary: #d9e4f7; --surface-strong: #c9d8f0;`\n  * `--text-primary: #0d2c61; --text-secondary: #3d5a8a; --primary: #17458f; --secondary: #123a7a;`\n  * `--border-default: #6f92d1; --bleed: rgba(13,44,97,0.08);`\n  * `--text-success: #0f7a5c; --text-error: #b3261e; --border-success: rgba(15,122,92,0.55); --border-error: rgba(179,38,30,0.55);`\n  * `--emulsion-vignette: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(13,44,97,0.14) 100%);`\n  * `--botanical-border: 1px solid rgba(13,44,97,0.35);` and lighter `--shadow-*` variants.\n* **Switching logic:** On load, apply `localStorage` value (key: `cyanotype-theme`); if absent, fall back to `prefers-color-scheme`; if that is unavailable, default to dark. Theme changes must require **zero HTML restructuring** — only variable swaps.\n* **Toggle control:** A visible button in the nav with a Google Material Symbols icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and a dynamically updated `aria-label` (\"Switch to light theme\" \u002F \"Switch to dark theme\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (`display: flex`).\n* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n* **Mobile-first:** All rows convert to columns on small viewports via `flex-wrap` \u002F `flex-direction` changes. No horizontal scrolling at any width down to 320px. All interactive targets ≥ 44×44px.\n\n### 1.5 Styling Approach — Clean Custom CSS *(explicit exception to the Tailwind default)*\nThis project ships a custom CSS foundation (Section 1.2); therefore use **clean custom CSS only** — no frameworks, no utility-class soup. All styles must map to CSS variables and generic reusable class names (`.btn`, `.card`, `.input`, `.badge`, `.nav`).\n\n### 1.6 Typography & Icons — Google Only\n* **Text fonts (Google Fonts, via `\u003Clink>`):** `Cormorant Garamond` (body + display), `Playfair Display` (display fallback), `Courier Prime` (mono — use for specimen captions, step numbers, prices, footer small print, like handwritten annotations on antique plates). Bind to `--font-base`, `--font-display`, `--font-mono`.\n* **Icons:** Google **Material Symbols (Filled)** only — rendered as white silhouettes on deep blue (dark) \u002F Prussian silhouettes on paper (light) to evoke photograms. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji icons. Suggested set: `local_florist`, `grass`, `eco`, `spa`, `filter_vintage`, `water_drop`, `wb_sunny`, `check`, `check_circle`, `cancel`, `error`, `close`, `menu`, `dark_mode`, `light_mode`, `arrow_forward`, `star`, `mail`.\n* **Antique grain:** Achieve paper\u002Femulsion texture with CSS only (layered gradients, blend modes). No image files, no data-URI SVGs.\n\n---\n\n## 2. COMPONENT & SECTION SPECIFICATIONS\n\n### 2.1 Buttons — All States via CSS Classes\n* **Default:** Flex, centered, `gap: 0.5rem`, min 44×44px (per foundation).\n* **Hover:** Lift + `--shadow-md` + brightness shift; `cursor: pointer`.\n* **Focus:** Visible `:focus-visible` ring using `--primary` (keyboard navigation).\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.btn--loading` + `aria-busy=\"true\"`):** Disables interaction and prevents double-clicks; renders a CSS spinner ring (border-based) that does **not** change button dimensions.\n* **Disabled:** `opacity ≤ 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback classes driven by `--text-success` \u002F `--text-error` (used by the newsletter form).\n* **Variants:** `.btn--primary` (the foundation's inverted pairing works in both themes automatically), `.btn--secondary`, `.btn--danger` (visually distinct in **both** themes, for any destructive action).\n\n### 2.2 Cards\n* **Default:** Foundation `.card` — `--bg-secondary` + emulsion vignette + botanical border + `--shadow-md`.\n* **Hover (interactive cards only):** `transform: translateY(-2px)` + `--shadow-lg`.\n* **Focus-within:** Border highlights (`border-color: var(--primary)`) when a child link\u002Fbutton receives focus.\n* **Loading (`.card--skeleton`):** Shimmer animation keyframes in CSS, dimension-stable to prevent layout jumps.\n* **Empty (`.card--empty`):** Structured fallback layout — Material icon + clear guidance text.\n* **Featured (`.card--featured`):** `--surface-strong` background, badge, elevated shadow (used by the middle pricing tier).\n\n### 2.3 Forms & Inputs (Newsletter Signup in Final CTA)\n* **Structure:** `.input-group` flex container wrapping `\u003Clabel>`, `\u003Cinput class=\"input\" type=\"email\">`, and a dedicated error-feedback container (`aria-live=\"polite\"`, wired via `aria-describedby`).\n* **States:** Empty, Focused (foundation ring), Filled, Valid (`--border-success` + `check_circle` icon + message), Invalid (`--border-error` + error icon + error text + `aria-invalid=\"true\"`), Disabled, Read-only.\n* **Behavior:** Validate on submit and blur; never rely on color alone (always icon + text). Simulated async submit: button enters loading state (~900ms) → success confirmation in an `aria-live` region; double-submission prevented.\n\n### 2.4 Modal — \"Reserve Your Edition\" (triggered by Pricing CTAs)\n* **States:** Opening (fade + scale CSS transition), Open, Loading (skeleton\u002Fspinner in content area), Success (`check_circle` + confirmation), Closing — all animated via CSS transitions.\n* **UX:** Centered flex container (`align-items: center`), backdrop overlay, Material icon close button, `role=\"dialog\"` + `aria-modal=\"true\"` + `aria-labelledby`, keyboard **focus trap**, focus returned to trigger on close, close via `Esc` or backdrop click, body scroll locked, stacked at `--z-modal`.\n\n### 2.5 Page Sections\n* **Nav (sticky):** Brand wordmark, anchor links (Features, Process, Editions, FAQ), theme toggle (1.3), CTA button scrolling to Final CTA. Mobile: hamburger (`menu` icon, `aria-expanded`, column panel at `--z-dropdown`, closes on `Esc`\u002Flink click).\n* **Hero:** `h1` display headline (e.g., in the spirit of \"Sunlight, pressed into Prussian blue.\"), subcopy, `.badge`, two CTAs (`.btn--primary` → `#pricing`, `.btn` → `#process`), and a **photogram composition**: a flex cluster of large white botanical Material Symbols at varying sizes\u002Fopacities over the vignette, plus a `--font-mono` specimen caption (e.g., \"Plate I — Papaver rhoeas, 1842\").\n* **Features (3 cards):** e.g., Hand-Coated Emulsion (`water_drop`), Exposed by Sunlight (`wb_sunny`), Archival Botanical Plates (`local_florist`) — icon, `h3`, copy each.\n* **How It Works (3 steps):** Coat → Expose → Rinse & Reveal; mono \"Step 01\u002F02\u002F03\" captions, connecting rule\u002Fborder line, flex row → column on mobile.\n* **Testimonials (3 cards):** Quotes from a curator, a collector, an illustrator; name + role in `--font-mono`; optional `star` icons.\n* **Pricing (3 tiers):** e.g., Single Plate \u002F Herbarium Set (featured, `.card--featured` + badge) \u002F Master Edition; mono prices, `check`-icon feature lists, each CTA opens the Reserve modal (2.4).\n* **FAQ:** Accessible accordion, 5–6 items (process, care, framing, shipping, commissions); `\u003Cbutton>` + panel pattern with `aria-expanded`\u002F`aria-controls`, keyboard operable, animated open\u002Fclose (CSS grid-rows or max-height technique), reduced-motion respected.\n* **Final CTA:** Display headline + newsletter form (2.3) + `.btn--primary`.\n* **Footer:** Secondary links that **must resolve to real in-page anchors** (`#features`, `#process`, `#pricing`, `#faq`, `#contact`) — no dead `#` links; social presence as text links or generic Material icons with `aria-label`s; mono copyright line.\n\n---\n\n## 3. UX, ACCESSIBILITY & MICRO-INTERACTION RULES\n* **Responsive by default:** Fluid sizing; breakpoints ~640\u002F768\u002F1024px; zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **`prefers-reduced-motion` disables transforms, animations, and smooth scrolling.**\n* **Accessibility:** Skip-to-content link; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); one `h1` with logical heading order; WCAG AA contrast in **both** themes; never color-only state communication; full keyboard operability for menu, accordion, modal, toggle; `aria-live` regions for all dynamic feedback (form errors, submit status, modal status).\n* **Mandatory visual feedback:** Every click, hover, and submission triggers a visible state change.\n* **Anchor navigation:** Smooth-scroll to sections (reduced-motion aware); optional IntersectionObserver fade-up reveals as progressive enhancement only.\n\n---\n\n## 4. DELIVERABLES & OUTPUT REQUIREMENTS\n* **Files:** Separate `index.html`, `style.css`, `script.js`. One deferred `\u003Cscript>` entry point; zero inline styles, scripts, or handlers.\n* **Naming:** BEM only, consistently (`.card--featured`, `.nav__link`, `.input-group__error`) — never mix conventions.\n* **Meta:** `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>`, meta description.\n* **Copy:** Real English copy throughout; placeholders only where content is genuinely unspecified.\n* **Pre-delivery QA (mandatory):** Toggle and visually validate **both light and dark themes** (the source spec declares neither — you must verify both before publishing); complete a keyboard-only pass; check 320px width; spot-check contrast on text, borders, success\u002Ferror states, and `.btn--primary` in both themes.\n* **Output:** Deliver the complete, functional code in one response.\n",1791954983634]