[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-414-Shabby-Chic":3},"# CODING-AI BUILD PROMPT — \"Shabby Chic\" Landing Page (Single-Attempt, Production-Ready)\n\n**Your Role:** Senior Frontend Engineer & Expert UI Designer. Deliver the complete, finished landing page code on the first attempt — no TODOs, no stubs, no placeholder-only sections.\n\n## 0. THEME DIRECTION & CONTENT BRIEF\n\n- **Theme:** Shabby Chic — pastel, faded, vintage, romantic. Era: 1980s–90s English Cottage Revival. Mood: cozy, nostalgic, cottage-like, gently distressed, never harsh or saturated.\n- **Brand & Copy:** Invent one coherent fictional brand (suggested: a hand-restored vintage homeware \u002F cottage-lifestyle brand, e.g., \"The Faded Rose\"). Write ALL user-facing copy in English in a warm, nostalgic tone. No lorem ipsum anywhere.\n- **Sections (in this order):** slim header chrome (wordmark, anchor links, theme toggle, CTA), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden in HTML.\n- All design properties, layout rules, and states are applied via class\u002FID selectors only.\n- HTML stays semantic and style-agnostic: re-theming the page must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root` (light) and override in `.dark`:\n\n- **Colors (light):** `--primary: #E8C4C4` (Faded Rose), `--secondary: #C5D5C5` (Soft Sage), `--accent-blue: #A4B8C4` (Dusty Blue), `--accent-lavender: #D8D0E0`, `--accent-blush: #F5D5D5`, `--wood: #B8A898`, `--bg-primary: #FAF0E6` (Antique White), `--bg-secondary: #F0E6D6` (Warm Linen), `--bg-card: #FEFDFB` (warm near-white — never `#ffffff`; where a neutral white is unavoidable use `#fefefe`).\n- **Text:** `--text-primary: #6A5A5A`, `--text-secondary: #7A6A62`, `--text-on-primary: #4E3B3B` (deep cocoa for text on pastel fills), `--text-success: #526F52`, `--text-error: #9C4F4F`.\n- **Borders:** `--border-default: rgba(200,180,180,0.4)` (decorative frames), `--border-strong: rgba(184,168,152,0.7)` (interactive controls), `--border-error: rgba(156,79,79,0.6)`, `--border-success: rgba(82,111,82,0.6)`.\n- **Shape\u002FElevation:** `--radius-sm: 4px`, `--radius-md: 6px`, `--radius-lg: 12px`, `--shadow-sm: 0 2px 10px rgba(0,0,0,0.05)`, `--shadow-md: 0 6px 18px rgba(0,0,0,0.08)`.\n- **Motion\u002FSpacing:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- **Fonts:** `--font-base: 'Lora', Georgia, serif` (weights 300–400, plus italics); optionally `--font-display: 'Cormorant Garamond', 'Lora', serif` (300\u002F400) for hero and section headings only.\n- **Contrast Pairing (mandatory):** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — in BOTH themes. Verify every text\u002Fbackground pair meets WCAG AA (4.5:1 normal, 3:1 large) before finalizing; darken text tokens (never lighten backgrounds) if a pair fails.\n\n**1.3 Mandatory Dark Mode**\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #2B2422`, `--bg-secondary: #352D29`, `--bg-card: #3B322D`, `--text-primary: #F0E6D6`, `--text-secondary: #C6B7A6`, `--primary: #D9ACAC`, `--secondary: #A3BFA3`, `--accent-blue: #93AAB8`, `--text-on-primary: #2E211E`, `--text-success: #A8C4A8`, `--text-error: #E0A8A8`, `--border-default: rgba(232,196,196,0.22)`, `--border-strong: rgba(232,196,196,0.45)`, deeper shadows.\n- Theme switching must work purely via CSS variables — no HTML restructuring. Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle (header and\u002For footer) using a Google Material Symbol (`dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label` states.\n- **Exception clause:** The source style spec marks Dark Mode as \"Not Recommended\" for this theme. Dark Mode remains mandatory: implement it as a muted, warm \"candlelit cottage\" adaptation — never pure `#000`\u002F`#fff`, never high saturation — and treat Light Mode as the canonical presentation.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout container with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: rows convert to stacked columns on small viewports (`flex-direction: column`), card rows use `flex-wrap: wrap` with `flex: 1 1 260px` items. No horizontal scrolling at any width. Minimum touch target: 44×44px.\n\n**1.5 Framework & Naming**\n- Use clean custom CSS in a single `style.css` (optionally organized with `@layer`). **BEM is the single naming convention** (`block__element--modifier`) plus generic component classes (`.btn`, `.card`, `.input-group`). Do not mix in utility-framework classes.\n\n**1.6 Typography & Icons (Google Only)**\n- Load fonts via Google Fonts `\u003Clink>`: Lora (300, 400, 500 + italics); Cormorant Garamond (300, 400) if used for display. Bind to `--font-base`\u002F`--font-display`. Headings use thin weights (300–400) with generous letter-spacing for elegance.\n- ALL icons are Google Material Symbols (Outlined, weight 300). Raw inline SVGs, emoji-as-icons, and local icon files are forbidden.\n\n**1.7 Signature Shabby Chic Effects (CSS-only)**\n- **Faded washes:** decorative overlay layers at `opacity: 0.7`; decorative elements at `opacity: 0.9`; imagery gets `filter: saturate(0.8)`.\n- **Distressed texture:** CSS-only layered `repeating-linear-gradient` + low-alpha `radial-gradient` speckle clusters on section backgrounds. No external texture files.\n- **Floral overlays:** CSS `radial-gradient` petal\u002Fcluster patterns at low opacity behind hero and Final CTA content; layers are `position: absolute`, `pointer-events: none`, `aria-hidden=\"true\"`.\n- **Vintage vignette:** inset box-shadows (e.g., `inset 0 0 80px rgba(106,90,90,0.15)`) and delicate double-line frames (`border` + `outline` with offset) on hero, pricing highlight, and Final CTA.\n- **Background images:** if imagery is used (picsum seeds permitted), apply `filter: blur(3px) saturate(0.8)` with `transform: scale(1.05)` inside `overflow: hidden` wrappers to prevent edge bleed, plus a pastel wash overlay at 0.7 opacity.\n- Thin `1px` borders and `6px` rounded corners throughout.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (`.btn` + variants)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px, Lora 400, `--radius-md`, 1px border. Variants: `.btn--primary` (Faded Rose fill, `--text-on-primary` text), `.btn--secondary` (Warm Linen fill, rose border), `.btn--ghost`, `.btn--danger` (muted dusty red — visually distinct in BOTH themes).\n- **Hover:** gentle `brightness(1.05)` + `--shadow-sm`, `cursor: pointer`. **Focus:** distinct 2px ring (`--accent-blue`\u002Frose) with 2px offset, visible in both themes. **Active:** `transform: scale(0.97)`.\n- **Loading (`.btn--loading`, `aria-busy=\"true\"`):** disables interaction, prevents double-clicks, shows a CSS spinner or animated Material Symbol without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success\u002FError:** temporary state classes driven by `--text-success`\u002F`--text-error`, always paired with a Material Symbol icon and text — never color alone.\n\n**2.2 Cards (`.card`)**\n- **Default:** flex column, `--bg-card`, 1px `--border-default`, `--radius-md`, `--shadow-sm`, generous padding.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` via `--transition-normal`. **Focus-within:** border shifts to Faded Rose when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** shimmer animation CSS defined (disabled under reduced motion). **Empty (`.card--empty`):** Material Symbol + short guidance text layout defined.\n\n**2.3 Forms & Inputs (`.input-group`)**\n- Flex column wrapping: `\u003Clabel>`, input, and a dedicated error-feedback container with reserved min-height (no layout jump).\n- **States via classes:** empty, focused (soft ring), filled, valid (success border + check icon), invalid (error border + `--text-error` message + error icon), disabled, read-only.\n- Newsletter form (Final CTA): client-side email validation, `aria-live=\"polite\"` feedback region, submit runs the button's loading state, then a success state + toast. Never color-only error signaling.\n\n**2.4 Modal & Toasts**\n- If any modal\u002Fpopup is used (e.g., a confirmation dialog), it must be: centered flex overlay, backdrop, `--z-modal`, Google Icon close button, focus trap, `Esc` and overlay-click close, CSS-animated open\u002Fclose states.\n- Toasts: `aria-live` region, `--z-toast`, auto-dismiss, icon + text, styled for both themes.\n\n**2.5 Page Section Build Specifications**\n- **Header chrome:** slim sticky bar — serif wordmark, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, small CTA. Mobile: links collapse behind a Material Symbol `menu` button opening a `--z-dropdown` panel (keyboard operable, `aria-expanded`, closes on `Esc`\u002Flink click). Include a skip-to-content link.\n- **Hero:** stacked on mobile, two-column flex on desktop. Display-serif headline (weight 300), subcopy, primary + secondary CTA, small trust hint. Background: layered floral CSS overlay + vignette + optional blurred image per 1.7.\n- **Features:** 3 `.card`s in a wrapping flex row — pastel circular icon badge (Material Symbol), title, copy. Full card states per 2.2.\n- **How It Works:** 3 steps with serif numerals (01\u002F02\u002F03) in pastel badges, connected by a thin dashed CSS line (horizontal desktop, vertical mobile), flex layout, `align-items: center` default.\n- **Testimonials:** 3 cards — `format_quote` Material Symbol, italic Lora quote, attribution (CSS pastel initial-avatar or picsum portrait with `saturate(0.8)`), star rating via Material Symbols.\n- **Pricing:** 3 tiers in a wrapping flex row; middle tier highlighted (\"Most Loved\" rose badge, `--border-strong` rose frame, vignette, slight elevation). Each: tier name, serif price, feature list with check Material Symbols, full-state CTA per 2.1.\n- **FAQ:** accessible accordion — `\u003Ch3>\u003Cbutton aria-expanded aria-controls>` + panel; CSS-animated expansion (e.g., `grid-template-rows: 0fr→1fr`); 5–6 in-theme Q&As; keyboard operable.\n- **Final CTA:** full-bleed band with floral overlay + vignette, headline, short copy, email capture form per 2.3 (input + button inline on desktop, stacked on mobile), privacy microcopy.\n- **Footer:** brand blurb, secondary link columns (e.g., Shop \u002F Company \u002F Support), social icons (Material Symbols), legal\u002Fcopyright line. All decorative layers `aria-hidden`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type\u002Fspacing, breakpoints ~640\u002F768\u002F1024px, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully disabled\u002Freplaced under `prefers-reduced-motion`. Optional IntersectionObserver reveal-on-scroll (reduced-motion aware).\n- **Accessibility:** WCAG AA contrast in light AND dark; semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); logical focus order; full keyboard operability (no mouse-only interactions); `aria-live` for form feedback, toasts, and loading; never color-only state.\n- **Mandatory feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive\u002Fdistinct actions:** `.btn--danger` reads clearly in both themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. HTML contains exactly one `\u003Cscript src=\"script.js\" defer>` reference — no inline script blocks.\n- **script.js scope:** theme toggle + `localStorage` persistence, mobile menu, FAQ accordion, smooth anchor scrolling, newsletter validation + simulated submit (loading → success\u002Ferror + toast). Nothing beyond this.\n- **Naming:** BEM only, consistently, across the entire deliverable.\n- **Copy:** complete, in-theme English everywhere; placeholders only where content was genuinely unspecified (e.g., picsum image seeds).\n- **Output the full, finished code on the first attempt.**\n",1791954986540]