[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-747-ORCHARD-a-seasons-toy":3},"# CODING PROMPT — Build Landing Page: \"ORCHARD — a Seasons Toy\" (Glassmorphism)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below on the first attempt. Do not ask clarifying questions; do not output partial code.\n\n**Project Brief:** Create a single-page marketing site for **ORCHARD — a seasons toy**, a tactile toy\u002Fobject line that transforms across the four orchard seasons. The visual language is **2020s digital glassmorphism**: frosted, translucent glass panels floating over layered warm gradients. Required sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links** — plus a sticky glass header with navigation.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in a dedicated `style.css` file. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n* All design properties, layout rules, and interaction states must be targeted via **class or ID selectors only**.\n* HTML must remain semantic and structure-agnostic: changing the theme must never require editing markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (and a `.dark` theme block). Light mode (primary presentation) must use at minimum:\n* **Colors:** `--primary: #5a4a32` (deep bark brown); `--secondary: #a08c6a` (weathered wood — **decorative only: borders, dividers, large display accents; never body text**, its contrast against light backgrounds is too low); `--accent: #b0552f` (harvest persimmon); `--bg-primary: #faf6ec` (warm cream — not pure white); `--bg-secondary: #e9e3d3`; `--text-primary: #5a4a32`; `--text-secondary: #6a5a40`; `--text-success: #4a7c59`; `--text-error: #b03a2f`; `--border-default: rgba(90,74,50,0.22)`; `--border-error`, `--border-success`.\n* **Contrast Pairing (mandatory):** every light background token pairs with dark text, every dark background token pairs with light text — enforced in both themes. Where a near-white surface is genuinely needed, use `#fefefe`, never `#ffffff`.\n* **Glass tokens:** `--glass-bg: rgba(250,246,236,0.55)`; `--glass-border: rgba(255,255,255,0.4)`; `--glass-blur: blur(18px) saturate(160%)`; `--glass-shadow` (soft, diffuse, large blur radius).\n* **Shape, spacing, motion:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 28px` (glass panels get the large, organic radii of 2020s glassmorphism); `--shadow-sm`, `--shadow-md`; `--spacing-gap: clamp(1rem, 3vw, 2rem)`; `--transition-fast: 150ms`, `--transition-normal: 280ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation:** `--z-header`, `--z-dropdown` (mobile nav panel), `--z-toast` — layered components must never conflict.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode **must be fully implemented** even though the source spec marks Light as primary. **Exception clause:** Light mode is the default initial state and the showcase presentation; Dark mode ships as a complete, equally polished secondary theme behind the toggle.\n* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class (e.g., `--bg-primary: #16130e`, `--bg-secondary: #1f1a12`, `--glass-bg: rgba(31,26,18,0.55)`, `--glass-border: rgba(250,246,236,0.12)`, `--text-primary: #f3ead8`, `--text-secondary: #cbbfa4`; brighten `--accent` for contrast on dark, e.g., `#d06a3f`; adjust `--text-error`\u002F`--text-success` for dark backgrounds).\n* **Theme switching:** background and text variables must flip seamlessly with zero HTML restructuring. Persist the choice in `localStorage` (key: `orchard-theme`), falling back to `prefers-color-scheme` on first visit.\n* **Toggle control:** a visible header button with correct `aria-pressed` and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), swapping Material Symbols `light_mode` \u002F `dark_mode` icons.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox.\n* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n* Mobile-first responsiveness: multi-column rows (Features, How It Works, Pricing, Testimonials, Footer link groups) collapse to single columns at small viewports. **Horizontal scrolling is forbidden at any width** — use `flex-wrap`, `min-width: 0`, and fluid `clamp()` typography\u002Fsizing.\n\n**1.5 Framework Default & Naming Convention**\n* Use Tailwind CSS **or** clean custom CSS with `@layer`\u002F`@apply`; given the heavy bespoke glass effects, custom CSS with reusable classes is recommended. Every utility must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.glass`, `.input-group`).\n* Enforce **BEM** naming exclusively across HTML\u002FCSS\u002FJS hooks (`.hero`, `.hero__title`, `.card`, `.card--featured`, `.pricing__tier`, `.faq__item`, `.faq__trigger`). Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Text: Google Fonts — **Fraunces** (display headlines, warm and orchard-like) and **Inter** (body). Bind them to `--font-display` and `--font-base`.\n* Icons: **Google Material Symbols Rounded** (the soft variant suits the toy aesthetic). **Raw inline SVGs and local icon files are forbidden.** Decorative icons get `aria-hidden=\"true\"`; meaningful icons get accessible labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--accent`, `.btn--ghost`, `.btn--danger` if used)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.\n* **Hover:** brightness\u002Flift shift, `cursor: pointer`.\n* **Focus:** distinct focus ring built from CSS variables — visible against glass in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, renders an animated Material Symbol spinner **without changing button dimensions** (applies 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` (used by the Final CTA form).\n\n**2.2 Glass Cards (`.card`)**\n* **Default:** flex layout, `background: var(--glass-bg)`, `backdrop-filter: var(--glass-blur)`, 1px `--glass-border`, `--radius-lg`, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` plus a shadow\u002Fborder-intensity shift.\n* **Focus-within:** card border brightens when a child link\u002Fbutton is focused.\n* **Loading (Skeleton):** define a shimmer keyframe class for glass cards that may load asynchronously.\n* **Empty State:** not applicable to this static page, but the pattern must not be invented for elements that don't need it.\n\n**2.3 Form & Input — Final CTA email capture**\n* States required: **Empty, Focused (outline ring), Filled, Valid (success border + Material check icon), Invalid (error border, `--text-error` message, error icon), Disabled**.\n* Structure: flex container wrapping a visually bound `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a **dedicated error feedback element with `aria-live=\"polite\"`**. Validation in `script.js` must announce success\u002Ferror via that region — never color alone.\n\n**2.4 Accordion (FAQ) & Overlay Rules**\n* FAQ items use the button + region pattern: each trigger is a real `\u003Cbutton>` with `aria-expanded`, `aria-controls`, keyboard operable. Animate open\u002Fclose via CSS (grid-rows or max-height transition) — never mouse-only interaction. Only one item open at a time.\n* If any overlay is introduced (e.g., the mobile nav panel), it must follow modal rules: animated open\u002Fclose via CSS transitions, backdrop, visible focus state, closable via `Esc`, focus management, correct `z-index` token.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow, container capped ~1200px with generous padding.\n* **Smooth animations:** every state change transitions with `var(--transition-normal)` \u002F `--ease-standard`; **never animate `backdrop-filter`** (animate `transform`\u002F`opacity` instead); all motion respects `prefers-reduced-motion`.\n* **Accessibility (a11y):** ≥4.5:1 text contrast on glass surfaces in **both** themes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); logical DOM\u002Ffocus order; full keyboard operability; star ratings in Testimonials carry text alternatives (\"Rated 5 out of 5\"); decorative gradient orbs are `aria-hidden`.\n* **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.\n* **Destructive actions:** none expected; if a destructive style is ever needed, `.btn-danger` must be distinct in both themes.\n* **Backdrop-filter fallback:** wrap glass effects in `@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))` and raise background alpha so text stays legible without blur.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. The only `\u003Cscript>` tag in HTML is a single deferred reference to `script.js`. No inline CSS, no inline JS.\n* **JS scope:** theme toggle with persistence, FAQ accordion, smooth-scroll for anchor links (with `scroll-margin-top` for the sticky header), optional IntersectionObserver scroll-reveal (class toggle only; respects reduced motion), Final CTA email validation with `aria-live` feedback. Nothing else.\n* **Copy:** write real, plausible English marketing copy in orchard\u002Fharvest vocabulary (seasons, harvest, grafting, sap, fruit). **No lorem ipsum anywhere.** Placeholder `href=\"#\"` is permitted only for footer links with no real destination; all visible text must be meaningful English.\n\n---\n\n## 5. PAGE ARCHITECTURE (build in this order)\n\n1. **Sticky glass header:** \"ORCHARD\" wordmark, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, \"Pre-order\" accent button; on mobile the links collapse into a flex-column panel.\n2. **Hero:** layered seasonal gradient background (blend the palette browns\u002Fcreams with `--accent` terracotta) with floating translucent orbs (`aria-hidden`); glass panel containing display headline, subheadline, two CTAs (`.btn--accent` \"Reserve yours\", `.btn--ghost` \"See it in season\"), and a decorative four-season indicator.\n3. **Features:** 3 glass cards, each with a Material Symbol (e.g., `spa`, `swap_horiz`, `toys`), title, and description of the toy's seasonal transformation.\n4. **How It Works:** 3 numbered steps; glass number discs; row → column on mobile; connecting line via pseudo-element only.\n5. **Testimonials:** 3 glass quote cards with star ratings (Material `star` icons + accessible labels), quote, name, and role.\n6. **Pricing:** 3 tiers — \"Sapling\" (one season), \"Bough\" (two seasons, highlighted with accent border, \"Most loved\" badge, subtle scale\u002Felevation), \"Orchard Keeper\" (all four seasons). Each has price, feature list with Material check icons, and a full-state CTA button.\n7. **FAQ:** 5–6 accordion items in glass panels, per Section 2.4.\n8. **Final CTA:** large glass panel over gradient; email capture per Section 2.3 with loading\u002Fsuccess\u002Ferror button states.\n9. **Footer:** flex-wrap columns — brand blurb, secondary link groups (Product \u002F Company \u002F Support), Material Symbol social icon buttons with `aria-label`s, copyright line.\n\n---\n\n## 6. GLASSMORPHISM IMPLEMENTATION RECIPE\n\n* Base surface: `background: var(--glass-bg)` + `backdrop-filter: var(--glass-blur)` + 1px `var(--glass-border)` + inset top highlight (`box-shadow: inset 0 1px 0 rgba(255,255,255,0.3)`) + soft outer `--shadow-md`.\n* Page background: 2–3 stacked radial\u002Flinear gradients in palette hues with slow, subtle orb drift animations (transform-only, reduced-motion safe).\n* Keep blur radius ≤ 20px; limit frosted layers per viewport for performance.\n\n**Output the complete, runnable three-file deliverable now.**\n",1791954992091]