[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-664-Editorial-Tri-Tone":3},"# CODING AGENT PROMPT — \"Editorial Tri-Tone\" Landing Page\n\n## 0. PROJECT BRIEF & THEME DEFINITION\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single pass. Do not ask clarifying questions and do not output partial code.\n\n**Theme:** \"Editorial Tri-Tone\" — a 2010s fashion-magazine editorial system built from exactly three colors: Dusty Pink `#F2B6C6`, Mustard Cream `#F2D86A`, Deep Burgundy `#7A1F35`. High-contrast color collision: pink\u002Fcream fields always carry burgundy text; burgundy fields always carry pink\u002Fcream text. Moody, full-bleed, typographic.\n\n**Important distinction:** \"Alternating light\u002Fdark sections\" refers to the tri-tone full-bleed color-block rhythm — it does NOT replace dark mode, which is mandatory (see 1.3).\n\n**Sections — exactly eight, in this order, no more, no less:**\n1. **Hero** — full-bleed pink `#F2B6C6`\n2. **Features (3 cards)** — full-bleed cream `#F2D86A`\n3. **How It Works (3 steps)** — full-bleed burgundy `#7A1F35`\n4. **Testimonials** — full-bleed pink `#F2B6C6`\n5. **Pricing (3 tiers)** — full-bleed cream `#F2D86A`\n6. **FAQ** — full-bleed burgundy `#7A1F35`\n7. **Final CTA** — full-bleed pink `#F2B6C6`\n8. **Footer (secondary links)** — deep burgundy shade `#4A0F20`\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 everywhere in the HTML.\n- **Class\u002FID Selectors Only:** All layout, design properties, and states target classes\u002FIDs defined in `style.css`.\n- **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — a full visual re-theme must be possible by editing `style.css` alone.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all tokens in `:root` (theme overrides in `.dark`):\n\n- **Brand tokens:** `--pink: #F2B6C6`, `--cream: #F2D86A`, `--burgundy: #7A1F35`, `--burgundy-deep: #4A0F20` (shade for footer\u002Fdark accents).\n- **Semantic tokens (default tri-tone mode):** `--primary: #7A1F35`, `--secondary: #F2D86A`, `--bg-primary: #F2B6C6`, `--bg-secondary: #F2D86A`, `--text-primary: #7A1F35`, `--text-secondary: rgba(122,31,53,0.75)`, `--text-success`, `--text-error`, `--border-default: #7A1F35`, `--border-error`, `--border-success`, plus `--border-width: 2px` (thick editorial borders are part of the style).\n- **Contrast Pairing (mandatory, both themes):** every light field (pink\u002Fcream) pairs with burgundy text; every dark field (burgundy\u002Fdeep burgundy\u002Fdark-mode background) pairs with pink or cream text. Verified pairs: burgundy-on-pink ≈ 5.9:1, burgundy-on-cream ≈ 7.1:1 — keep all body text ≥ 4.5:1.\n- **Functional color exception:** success\u002Ferror tokens are the ONLY colors allowed outside the tri-tone. Use muted, editorial green\u002Fred (e.g., `#2F6B4F` \u002F `#B3261E` on light fields; brightened variants on burgundy\u002Fdark fields) and verify ≥ 4.5:1 against each background they appear on.\n- **Never pure white:** light backgrounds are the pink\u002Fcream brand fields; if a near-white is ever unavoidable, use `#fefefe`, never `#ffffff`.\n- **Shape & depth:** `--radius-sm: 0px`, `--radius-md: 2px`, `--radius-lg: 4px` (sharp editorial corners), `--shadow-sm`, `--shadow-md` (subtle lift shadows tinted `rgba(74,15,32,…)`, never pure black).\n- **Spacing & transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 200ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Elevation:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.\n- **Type tokens:** `--font-display: 'Bricolage Grotesque'`, `--font-serif: 'Instrument Serif'`, `--font-base: 'Bricolage Grotesque'`.\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Define a complete dark token set (e.g., `--bg-primary: #2A0B14`, `--bg-secondary: #3A1220`, `--text-primary: #F2B6C6`, `--text-secondary: rgba(242,182,198,0.75)`, inverted borders, brightened success\u002Ferror) under both a `.dark` class selector and `@media (prefers-color-scheme: dark)`.\n- **Partial dark mode exception clause:** the source spec marks dark mode \"Partial\" — a complete dark token set and functional toggle remain mandatory; \"partial\" only permits the signature tri-tone full-bleed section fields to persist (optionally darkened) while all cards, forms, buttons, footer, and text tokens fully invert.\n- **Persistence:** Store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Include a fixed, always-visible theme toggle (top-right viewport corner) with correct `aria-pressed` and `aria-label` states, swapping Material Symbols icons (`dark_mode`\u002F`light_mode`).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **Mobile-First:** All multi-column layouts (features grid, steps, pricing tiers, testimonial rows) stack to a single column on small viewports and expand at ≥ 900px. Zero horizontal scrolling at any width from 320px up. Use `clamp()` for fluid type.\n\n### 1.5 CSS Framework\n- Use clean custom CSS in `style.css` (optionally organized via Tailwind's `@layer`\u002F`@apply`). All utilities must map back to the CSS variables and to generic reusable classes: `.btn`, `.card`, `.input-group`, `.section`, `.container`.\n\n### 1.6 Typography & Icons (Google Fonts Only)\n- **Text:** Load Google Fonts via `\u003Clink>`: Bricolage Grotesque (weights 400\u002F500\u002F700\u002F800) and Instrument Serif (400 + italic). Display headlines use Bricolage Grotesque 800; subheads, pull-quotes, and testimonial quotes use Instrument Serif (italic for quotes). Eyebrow kickers are uppercase, letter-spaced Bricolage Grotesque.\n- **Icons:** Google Material Symbols (Outlined) only. Raw inline SVGs, icon fonts, and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, variants `.btn--primary`, `.btn--ghost`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px solid `--border-default`; Bricolage Grotesque 700; sharp corners. On light fields: burgundy fill + pink text. On burgundy fields: cream fill + burgundy text.\n- **Hover:** `translateY(-2px)` lift plus subtle `--shadow-md` shift or brightness change; `cursor: pointer`; 200–250ms transition.\n- **Focus:** Distinct visible focus ring (2px outline using `--cream`\u002F`--pink`, offset 3px) via `:focus-visible`.\n- **Active:** `transform: scale(0.97)`.\n- **Loading:** Class `.is-loading` — disables pointer events, prevents double submission, swaps label for a CSS-only spinner (border spinner in `currentColor`) without changing button dimensions; sets `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` temporary classes using `--text-success`\u002F`--text-error`, always accompanied by a Material Symbol icon and an `aria-live` text message — never color alone.\n\n### 2.2 Card Component (`.card`, variants `.card--featured`, `.card--empty`)\n- **Default:** Flexbox column, `align-items: center`, generous padding, `--bg-secondary` or field-matched background, 2px solid `--border-default`, `--radius-md`.\n- **Hover:** `translateY(-2px)` with subtle shadow lift.\n- **Focus-within:** Border thickens or shifts color when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define a shimmer animation utility class in CSS (even if unused on first paint) so future async content causes no layout jump.\n- **Empty State:** Define a fallback pattern — Material Symbol icon, short guidance text — for use if dynamic content is ever absent.\n\n### 2.3 Form & Input Requirements (Final CTA email capture)\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error feedback `\u003Cdiv aria-live=\"polite\">`.\n- **States:** Empty, focused (outline ring), filled, valid (success border + Material `check` icon), invalid (error border + `error` icon + message text — never color alone), disabled, read-only. All defined as CSS classes.\n\n### 2.4 Modal \u002F Popup (conditional)\n- The eight listed sections do not require a modal, and you must not invent new sections. However, if any overlay is introduced anywhere, it must satisfy: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS transitions; centered flex overlay (`align-items: center`) with backdrop; Material Symbol close button; keyboard focus trapping; close via `Esc` and overlay click.\n\n### 2.5 Landing Page Section Specifications\n- **Hero:** Full-bleed pink field. Eyebrow kicker, giant Bricolage Grotesque 800 H1 sized with `clamp()` (roughly 3rem → 8rem), Instrument Serif subhead, dual CTAs (primary + ghost). Decorative interest comes from type scale, color blocks, and thick borders only — no external images.\n- **Features (3 cards):** Three `.card` items, each with a 48px Material Symbol icon, Bricolage 700 title, short editorial copy; 1 column mobile → 3 columns ≥ 900px.\n- **How It Works (3 steps):** Oversized numerals `01 \u002F 02 \u002F 03` in Bricolage Grotesque 800 alternating pink\u002Fcream, step titles, and copy; burgundy field with pink\u002Fcream text throughout.\n- **Testimonials:** 3 editorial pull-quotes in Instrument Serif italic with a Material `format_quote` icon, name + role attribution; responsive row → stacked column.\n- **Pricing (3 tiers):** Three `.card` tiers; the middle tier uses `.card--featured` as a full-bleed burgundy card with cream text and a \"Most Popular\" badge. Prices in Bricolage 800; feature lists use Material `check` icons; one `.btn` per tier with correct field-based color pairing.\n- **FAQ:** Accordion of at least 4 items. Each question is a `\u003Cbutton aria-expanded>` controlling a region (`aria-controls`); Material `expand_more` chevron rotates 180° on open; answers animate via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) over `--transition-normal`; fully keyboard operable.\n- **Final CTA:** Giant Bricolage 800 statement on pink, plus the email capture form from 2.3 with a submit button demonstrating loading → success flow and `aria-live` feedback.\n- **Footer:** Deep burgundy `#4A0F20` field with pink text; brand mark, secondary link columns (About, Contact, Privacy Policy, Terms, and social labels Instagram\u002FPinterest\u002FTikTok with Material icons), copyright line, and a back-to-top link. All footer links have visible hover states (e.g., animated underline).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid `clamp()` sizing, responsive breakpoints, no horizontal overflow from 320px up.\n- **Smooth Animations:** All state changes transition over `--transition-fast`\u002F`--transition-normal` (200–250ms). Under `prefers-reduced-motion: reduce`, disable transforms, spinner motion, and accordion height animation (instant state changes only).\n- **Accessibility (a11y):** Maintain ≥ 4.5:1 text contrast in tri-tone AND dark modes. Never communicate state by color alone. Use semantic HTML5 landmarks (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection aria-labelledby>`, `\u003Cfooter>`), a skip-to-content link, logical DOM\u002Ffocus order, full keyboard operability for every interactive element (toggle, FAQ, form, links), visible `:focus-visible` rings everywhere, and `aria-live` regions for dynamic feedback (form success\u002Ferrors).\n- **Mandatory Visual Feedback:** Every click, hover, and submission produces a visible state change.\n- **Destructive Actions:** Any destructive\u002Freset control, if present, uses `.btn-danger` and must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. Only one `\u003Cscript>` tag allowed: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. Google Fonts and Material Symbols load via `\u003Clink>` in `\u003Chead>`. Include `\u003Cmeta name=\"viewport\">`, `lang=\"en\"`, and a descriptive `\u003Ctitle>`.\n- **Naming Convention:** BEM exclusively — e.g., `.hero__title`, `.features__grid`, `.card--featured`, `.faq__item`, `.pricing__price`, `.footer__link`. Never mix conventions.\n- **JavaScript Scope:** `script.js` handles only: theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback, FAQ accordion behavior, and the Final CTA form simulation (loading → success with `aria-live` announcement). No other JS.\n- **Copy:** Author original, purposeful English copy in a fashion-editorial voice for a fictional brand. No lorem ipsum. Placeholders are permitted only for genuinely unknowable details (e.g., footer legal links may target `#`).\n- **Assets:** No external image files or CDN images — build all visuals from typography, color blocks, thick borders, and Material Symbols.\n",1791954990619]