[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-331-Grandmillennial":3},"# CODING AGENT PROMPT — Build the \"Grandmillennial\" Landing Page (Single Attempt)\n\n**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready landing page code immediately, in a single attempt. Do not ask clarifying questions — where a decision is open, choose the option that best serves the theme defined below.\n\n---\n\n## 0. PROJECT BRIEF & ART DIRECTION\n\n**0.1 Theme: Grandmillennial** (\"granny chic\" \u002F grandmacore, 2019–present). Keywords: chintz florals, ruffles, needlepoint, scalloped edges, toile, warm traditional, ornate but cozy, nostalgic maximal comfort. Mental reference: grandmillennial interiors as featured in House Beautiful.\n\n**0.2 Signature visual moves (mandatory, CSS-only — no image files):**\n* **Scalloped bottom edges** (piecrust\u002Fdoily trim) on the nav and every card, implemented with the `--scallop-edge` radial-gradient token on an `::after` pseudo-element.\n* **Ditsy chintz dot pattern** printed at low opacity on card\u002Fpanel surfaces via the `--ditsy-pattern` token; must be theme-aware (see §1.3).\n* **Needlepoint \"stitch\" details:** 2px dashed borders or repeating-gradient stitch lines used as dividers and as the connector line between the three \"How It Works\" steps.\n* **Ruffled section dividers:** layered, offset scallop gradients between major sections.\n* **Ornate-but-cozy typography:** Playfair Display for display headings, Libre Franklin for body text.\n* Warm maximal comfort: layered borders, gold accents, pattern-on-pattern — balanced with generous whitespace and strict readability. Elevation via the shadow tokens is part of the look.\n\n**0.3 Brand & copy:** Invent one coherent fictional brand suited to the aesthetic (e.g., heirloom tea blends, hand-embroidery kits, or vintage-inspired home goods). **All user-facing copy must be written in English** — warm, nostalgic, personal voice (\"grandma's parlor, minus the dust\"). Write real copy for every heading, paragraph, button, testimonial, price tier, and FAQ answer. No lorem ipsum.\n\n**0.4 Required sections, in this order:**\n1. Sticky header\u002Fnav — brand wordmark, anchor links, theme toggle, CTA button\n2. Hero — eyebrow badge, display headline, subcopy, two CTAs, CSS-only decorative chintz\u002Ftoile-style vignette (layered gradients, no images)\n3. Features — exactly 3 cards\n4. How It Works — exactly 3 steps\n5. Testimonials — 3 quote cards\n6. Pricing — exactly 3 tiers, middle tier highlighted\n7. FAQ — 4–6 accordion items\n8. Final CTA — newsletter signup form\n9. Footer — secondary link groups + copyright\n\n**0.5 Reference note:** The source specification does not declare color modes; you must define and validate **both light and dark themes before delivering** (see §1.3 and §4.4). Include this comment at the top of `style.css`: `\u002F* Reference specification: references\u002F00-flagship-implementation-specs\u002Fgrandmillennial.md *\u002F`\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **Explicitly forbidden:** the `style=\"...\"` attribute anywhere in the HTML.\n* All design properties, layout rules, and states are targeted via class or ID selectors.\n* HTML stays semantic and style-agnostic: changing the look must never require touching the markup.\n\n**1.2 CSS Variables & Theme Tokens** — declare in `:root` (light = default):\n\n```css\n:root {\n  \u002F* mandatory color tokens *\u002F\n  --primary: #b3435a;        \u002F* rose chintz red *\u002F\n  --secondary: #4f7a5c;      \u002F* sage green *\u002F\n  --bg-primary: #faf3e8;     \u002F* warm cream page background *\u002F\n  --bg-secondary: #fffaf1;   \u002F* card\u002Fsurface background *\u002F\n  --bg-tertiary: #f5e6d3;   \u002F* strong surface \u002F CTA band *\u002F\n  --text-primary: #3f2e22;  \u002F* espresso brown *\u002F\n  --text-secondary: #6f5a45;\u002F* muted taupe *\u002F\n  --text-success: #4f7a5c;\n  --text-error: #a83232;     \u002F* brick red, distinct from --primary *\u002F\n  --border-default: #d8b892;\u002F* antique gold-tan *\u002F\n  --border-error: #a83232;\n  --border-success: #4f7a5c;\n  --on-primary: #fffaf1;     \u002F* text on primary fills *\u002F\n  --gold: #c8933f;           \u002F* extra theme token *\u002F\n  \u002F* radius \u002F shadow *\u002F\n  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 6px rgba(63,46,34,.12);\n  --shadow-md: 0 8px 18px rgba(63,46,34,.16);\n  --shadow-lg: 0 16px 34px rgba(63,46,34,.2);\n  \u002F* spacing \u002F motion \u002F stacking *\u002F\n  --spacing-gap: 24px;\n  --transition-fast: 150ms; --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* fonts *\u002F\n  --font-base: 'Libre Franklin', sans-serif;\n  --font-display: 'Playfair Display', serif;\n  \u002F* signature patterns — must re-resolve per theme *\u002F\n  --scallop-edge: radial-gradient(circle at 10px 0, transparent 9px, var(--bg-secondary) 9.5px) 0 0\u002F20px 12px repeat-x;\n  --ditsy-pattern: radial-gradient(var(--ditsy-dot-1) 1.4px, transparent 1.6px) 0 0\u002F18px 18px,\n                   radial-gradient(var(--ditsy-dot-2) 1px, transparent 1.2px) 9px 9px\u002F18px 18px;\n  --ditsy-dot-1: rgba(179,67,90,.18);\n  --ditsy-dot-2: rgba(79,122,92,.16);\n}\n```\n\n* Also define the reference type scale (`--text-xs` … `--text-5xl`) and space scale (`--space-1` … `--space-24`) and use them for all sizing.\n* **Contrast pairing:** every light background token pairs with a dark text token, and every dark background token pairs with a light text token — enforced in both themes.\n* **Never pure white:** the cream tokens above are the light backgrounds; if a near-white is ever required, use `#fefefe`, never `#ffffff`.\n* No hardcoded hex\u002Fpx duplicates of token values inside component rules — consume tokens via `var(...)`.\n\n**1.3 Mandatory Dark Mode**\n* Provide dark tokens under a `.dark` class **and** an `@media (prefers-color-scheme: dark)` fallback for first visits. Suggested palette (verify AA contrast; adjust if a pair fails):\n\n```css\n.dark {\n  --primary: #d4627a; --secondary: #93b39c;\n  --bg-primary: #2a211a; --bg-secondary: #342a20; --bg-tertiary: #403426;\n  --text-primary: #f2e6d5; --text-secondary: #cdb69c;\n  --text-success: #93b39c; --text-error: #e89191;\n  --border-default: #7d664e; --border-error: #e89191; --border-success: #93b39c;\n  --on-primary: #2a211a; --gold: #d9a959;\n  --ditsy-dot-1: rgba(212,98,122,.22); --ditsy-dot-2: rgba(147,179,156,.18);\n}\n```\n\n* Background\u002Ftext variables must switch seamlessly with **no HTML restructuring**. Buttons filled with `--primary` use `--on-primary` text and must hit 4.5:1 in both themes.\n* The scallop edge and ditsy pattern must re-resolve from variables so they render correctly in dark mode — never bake light hex values into pattern gradients. Set `color-scheme` correctly per theme.\n* **Persistence & toggle:** visible toggle in the nav (Material Symbols `light_mode` \u002F `dark_mode`), correct `aria-pressed` and a descriptive `aria-label` that updates with state; persist choice in `localStorage`, fall back to `prefers-color-scheme` on first visit; apply in `script.js` on load; switching themes must not shift layout.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., `align-items: stretch` for equal-height pricing cards).\n* Mobile-first: base styles target small screens; scale up with `min-width` media queries (e.g., 768px, 1024px). Multi-column rows (features, steps, testimonials, pricing) collapse to one column on small screens.\n* No horizontal scrolling at any viewport from 320px up; use fluid type via `clamp()` where helpful.\n\n**1.5 Styling Approach: Clean Custom CSS**\n* Use hand-written custom CSS (no Tailwind build, no frameworks) — the reference specification supplies a custom component class system, which counts as the requested approach. All styles map to reusable semantic classes (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`) driven exclusively by the §1.2 tokens. Do not invent one-off utility classes; do not mix naming conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via Google Fonts `\u003Clink>` tags (with `preconnect`): **Playfair Display** (400\u002F700 + italic) bound to `--font-display`, and **Libre Franklin** (300–700) bound to `--font-base`.\n* Icons: **Google Material Symbols Rounded** via `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji used as icons.\n* Suggested icons: `local_florist`, `favorite`, `chair`, `emoji_food_beverage`, `content_cut`, `check`, `star`, `arrow_forward`, `menu`, `close`, `expand_more`, `light_mode`, `dark_mode`, `progress_activity`, `error`, `person`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn`; variants `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)**\n* **Default:** `display:flex; align-items:center; justify-content:center; gap:.5rem;` minimum 44×44px touch target, pill radius, 2px border, transitions on transform\u002Fbox-shadow using the motion tokens.\n* **Hover:** lift `translateY(-1px)` + `--shadow-md`, `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring (`outline: 2px solid var(--secondary); outline-offset: 2px`) for keyboard navigation.\n* **Active\u002Fpressed:** `transform: scale(0.97)` click feedback.\n* **Loading (`.btn--loading`):** `aria-busy=\"true\"`, interactions disabled to prevent double-clicks, CSS-animated spinner (rotating `progress_activity` symbol or border spinner) that does not distort button dimensions.\n* **Disabled:** `opacity: .5`, greyscale filter, `cursor: not-allowed`, hover\u002Factive transforms removed.\n* **Success\u002FError (`.btn--success`, `.btn--error`):** temporary feedback states driven by `--text-success` \u002F `--text-error` (used by the newsletter submit flow).\n* `.btn--primary`: fill `--primary`, text `--on-primary`. `.btn--danger` must be visually distinct in **both** themes. All states are class-driven — never mutate styles via JS.\n\n**2.2 Card (`.card`)**\n* **Default:** `background: var(--ditsy-pattern), var(--bg-secondary);` 2px `--border-default` border, `--radius-lg`, `--shadow-md`, generous padding, and the signature scalloped bottom edge via `::after` with `--scallop-edge` (per the reference spec).\n* **Hover (interactive cards only):** `translateY(-2px)` + `--shadow-lg`.\n* **Focus-within:** border shifts to `--primary` or `--gold` when a child link\u002Fbutton receives focus.\n* **Skeleton (`.card--skeleton`):** CSS shimmer animation reserving final dimensions to prevent layout jumps (define it even if unused on first paint).\n* **Empty state (`.card--empty`):** fallback layout with a Material Symbol and clear guidance text.\n* **Badge (`.badge`):** gold pill (`--gold` background, dark text, `--radius-pill`, bold small text) used for the hero eyebrow and the \"Most Popular\" pricing tag.\n* Used for Features (3), Testimonials (3), Pricing (3). The featured pricing tier gets `.card--featured`: gold badge, stronger shadow, distinct treatment visible in both themes.\n\n**2.3 Form & Input (`.input-group`)**\n* **Structure:** flex-column wrapper containing a `\u003Clabel for>`, the `\u003Cinput class=\"input\">`, and a dedicated feedback element (`\u003Cp class=\"input-group__error\" role=\"alert\">` inside an `aria-live=\"polite\"` region).\n* **States, all via classes:** empty; focused (`border-color: var(--primary)` + 3px primary ring at ~20% alpha — re-derived from tokens so it works in dark mode); filled; valid (`.input--valid`: `--border-success` + `check` icon); invalid (`.input--invalid`: `--border-error`, message in `--text-error`, `error` icon); disabled; read-only.\n* **Newsletter form (Final CTA):** validate email format in `script.js`; on submit the button enters loading → success (check icon + \"You're on the list\" announced via `aria-live`) or error (inline message; never a browser `alert()`); the page never reloads.\n\n**2.4 Overlays (conditional)**\n* This landing page requires **no modal** — the FAQ uses accordions (§2.5). If you introduce any overlay (e.g., a mobile menu drawer), it must: sit in a flex container using `align-items: center` (or docked with justified exception), dim the page with a backdrop, close via `Esc` and overlay click, trap keyboard focus, offer a Material Symbols `close` button, and animate open\u002Fclose via CSS transitions on transform\u002Fopacity only.\n* Respect stacking: dropdown panels use `--z-dropdown`, overlays `--z-modal`, transient toasts `--z-toast`.\n\n**2.5 Accordion (FAQ)**\n* Each item: `\u003Cbutton class=\"faq-item__trigger\" aria-expanded=\"false\" aria-controls=\"...\">` holding the question and an `expand_more` icon that rotates 180° when open; panel with `role=\"region\"` and `aria-labelledby`, expanding via a smooth CSS height transition (grid-rows or max-height technique).\n* `aria-expanded` always reflects reality; fully keyboard operable; visible focus ring on triggers.\n\n**2.6 Navigation**\n* Sticky nav: `--bg-secondary` background, 3px `--border-default` bottom border, scallop edge hanging below via `::after` (per reference spec), brand wordmark in `--font-display`.\n* Desktop: anchor links (Features, How It Works, Testimonials, Pricing, FAQ) + theme toggle + primary CTA scrolling to `#pricing`.\n* Mobile (\u003C768px): links collapse behind a `menu` icon button (`aria-expanded`, `aria-controls`); the panel expands below the nav at `--z-dropdown`, is keyboard reachable, closable with `Esc`, and all targets remain ≥44×44px.\n* Anchor scrolling: `scroll-behavior: smooth` (disabled under reduced motion) plus `scroll-margin-top` on sections so the sticky nav never covers headings.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, zero overflow, verify 320px → 1440px.\n* **Smooth animations:** every state change transitions with `var(--transition-normal)` \u002F `var(--transition-fast)`; under `prefers-reduced-motion: reduce`, remove transforms, lifts, shimmer, and smooth scroll — keep instant state changes only.\n* **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone (invalid inputs pair color with icon + message; testimonial star ratings include a visually hidden \"Rated 5 out of 5\" text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); exactly one `h1`; logical DOM\u002Ffocus order; full keyboard operability with no mouse-only interactions; `aria-live` regions for dynamic form feedback; decorative icons `aria-hidden=\"true\"`; include a \"Skip to content\" link.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive actions:** any destructive control uses `.btn--danger`, visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n**4.1 Files:** separate `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline `\u003Cstyle>` or `\u003Cscript>` blocks.\n\n**4.2 Naming convention:** BEM (`block__element--modifier`) everywhere, consistent with the reference classes (`.btn--primary`, `.card`, `.nav`). Never mix conventions. Base element resets (`body`, box-sizing) are the only bare-selector styles allowed.\n\n**4.3 Content:** real, on-theme English copy for every string (§0.3). Placeholder `href=\"#\"` is permitted only for footer\u002Flegal links with no real destination. No lorem ipsum.\n\n**4.4 Pre-publication validation (required — the source spec demands light + dark verification):** before delivering, self-check and fix: (a) both themes pass AA contrast for all text and icon pairs; (b) scallop edges and ditsy patterns render correctly in dark mode; (c) keyboard-only pass over nav, theme toggle, accordions, and the newsletter form; (d) reduced-motion pass; (e) no horizontal scroll at 320px; (f) theme choice persists across reload. Deliver the final code only after all checks pass.\n",1791954985153]