[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-170-WOVEN-the-loom-studio":3},"# CODING AGENT PROMPT — \"WOVEN — The Lom Studio\" Glassmorphism Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality, single-page landing page for **WOVEN — the loom studio**, an artisanal weaving studio brand, on the first attempt. The visual language is **Glassmorphism (Glass & Soft UI)**: translucent frosted panels floating over layered warm gradients, backdrop blur, soft neumorphic shadows, and gentle hover motion — evoking threads of light passing through handwoven cloth. Era: 2020s Digital. Light mode is the primary presentation.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live exclusively in a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* All design properties, layout rules, and states must be targeted via class or ID selectors only.\n* HTML must remain clean, semantic (header, nav, main, section, article, footer), and agnostic of visual styling — reskinning the page must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (and theme overrides) using CSS variables:\n\n* **Color tokens (WOVEN palette):** `--primary: #1f1610` (deep espresso), `--secondary: #d49a4a` (ochre thread), `--bg-primary: #f2e6d0` (warm cream — never pure white; use `#fefefe` only if a near-white is unavoidable), `--bg-secondary: #e8dcc8`, `--text-primary: #1f1610`, `--text-secondary: #a08c6e`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`. Choose success\u002Ferror hues that harmonize with the warm palette while passing contrast.\n* **Glassmorphism tokens:** `--glass-bg`, `--glass-bg-strong`, `--glass-border`, `--glass-blur`, `--glass-saturate` — consumed by `backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))` and semi-transparent `rgba()` backgrounds.\n* **Neumorphism tokens:** `--shadow-raised` and `--shadow-pressed` (dual light\u002Fdark shadows derived from the cream base) for soft raised\u002Finset surfaces.\n* **Shape & depth:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 24px`, `--shadow-sm`, `--shadow-md`, plus an accent `--shadow-glow` for highlighted elements.\n* **Spacing & motion:** `--spacing-gap`, `--spacing-section` (fluid, e.g., `clamp()`), `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation:** `--z-dropdown` (sticky header), `--z-modal`, `--z-toast` — layered components must never conflict.\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa, enforced in **every** theme, not just the default.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode **must always be defined**, provided both via `@media (prefers-color-scheme: dark)` and a `.dark` class selector.\n* **Exception clause:** the source style marks Light as the primary theme — light mode is the default presentation, but dark mode remains mandatory and must be implemented as a warm, low-luminance variant of the same palette (`--bg-primary: #2c1f14`, `--bg-secondary: #1f1610`, `--text-primary: #f2e6d0`, with `--text-secondary` lightened as needed to pass contrast). Glass tokens must flip to dark translucent surfaces (`rgba(31,22,16,…)` backgrounds, light hairline borders), and the ambient gradient blobs must deepen accordingly.\n* Theme switching must require zero HTML restructuring. Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit, with a visible toggle control carrying correct `aria-pressed` \u002F `aria-label` state and a Material Symbol icon.\n\n**1.4 Layout: CSS Grid + Flexbox, Mobile-First**\n* Use **CSS Grid** for macro layouts (hero split, feature\u002Fpricing\u002Ftestimonial card rows via `repeat(auto-fit, minmax(…))`, footer link columns) and **Flexbox** for all component-internal layouts.\n* Every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n* Build mobile-first: multi-column grids and rows collapse to single columns on small viewports; no horizontal scrolling at any width; fluid `clamp()`-based typography.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives) unless another framework is requested. Layout utilities are permitted, but all glass\u002Fneumorphic effects and all colors must live in reusable component classes (`.btn`, `.glass-card`, `.input-group`) mapped back to the CSS variables above. Never hardcode hex values inside component rules.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Fraunces** (display serif — headings, wordmark) and **Inter** (body) from Google Fonts via `\u003Clink>` or `@import`, bound to `--font-display` and `--font-base`.\n* Use **Google Material Symbols (Rounded style)** for every icon. Raw inline SVGs, local icon files, and emoji-as-icons are explicitly forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nStyle all states via CSS classes (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`):\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary uses `--secondary` background with `--primary` text; ghost uses glass surface.\n* **Hover:** brightness\u002Fshadow lift with `cursor: pointer`.\n* **Focus:** distinct visible ring built from CSS variables (`outline` \u002F `box-shadow`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)` feedback.\n* **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol without changing button dimensions; set `aria-busy`.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`, never color-only (pair with icon\u002Ftext).\n* `.btn--danger` must be visually distinct in both light and dark themes.\n\n**2.2 Glass Card Component**\nThe `.glass-card` is the workhorse of this design (features, testimonials, pricing, FAQ, CTA panel):\n* **Default:** `backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))`, `background: var(--glass-bg)`, 1px `--glass-border`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-md)`. Provide an `@supports not (backdrop-filter…)` fallback with a more opaque background.\n* **Hover (if interactive):** `transform: translateY(-2px)` plus shadow\u002Fborder brightening.\n* **Focus-within:** accent border highlight when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** CSS shimmer animation that preserves layout dimensions.\n* **Empty State:** fallback layout with a Material Symbol and clear guidance text.\n\n**2.3 Form & Input Requirements**\nUsed for the email capture (final CTA and\u002For footer newsletter):\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border + check icon), Invalid (error border, `--text-error` message, error icon), Disabled, Read-only.\n* **Structure:** flex `.input-group` wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container wired with `aria-describedby` and an `aria-live=\"polite\"` region.\n\n**2.4 FAQ Accordion & Modal\u002FOverlay**\n* **FAQ accordion:** built from `\u003Cbutton>` triggers with `aria-expanded` \u002F `aria-controls` and panels with `role=\"region\"`; smooth expand\u002Fcollapse via CSS (grid-rows or max-height technique); rotating chevron Material Symbol; fully keyboard operable.\n* **If any modal\u002Fpopup is used:** centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, `Esc` and overlay-click closing, CSS-animated opening\u002Fopen\u002Fclosing states, and loading\u002Fsuccess\u002Ferror states — layered at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, responsive breakpoints, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` by disabling transforms, shimmer, and parallax while keeping essential opacity feedback.\n* **Accessibility:** ≥ 4.5:1 text contrast in both themes — glass panels behind text must be opaque enough to guarantee this; never rely on color alone to communicate state; semantic HTML5, correct ARIA roles\u002Flabels, logical DOM\u002Ffocus order, full keyboard operability, a skip link, and `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Glassmorphism integrity:** the ambient background must always show layered warm gradients (radial blobs in `#d49a4a`, `#a08c6e`, `#f2e6d0`) so blur has something to refract; decorative elements (woven crosshatch textures, thread lines) must be CSS-generated via gradients\u002Fpseudo-elements — no external image dependencies. Use `aspect-ratio` where decorative panels or avatars need stable proportions.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n* **Naming:** one consistent **BEM** convention (`block__element--modifier`) across the entire deliverable — never mix conventions.\n* **Copy:** write real, polished English copy for the WOVEN brand (warm, tactile, artisanal, confident). No lorem ipsum — placeholders are permitted only where content is genuinely unspecified.\n* **Completeness:** deliver the full page in one attempt — no TODOs, no truncated sections.\n\n---\n\n## 5. PAGE SECTION BLUEPRINT — WOVEN, the loom studio\n\n**5.0 Sticky Glass Header**\nWordmark \"WOVEN\" in Fraunces, nav links (Features, Process, Testimonials, Pricing, FAQ), theme toggle, and a primary \"Book a Workshop\" button. Frosted glass bar at `--z-dropdown`. On mobile, collapse links behind a Material Symbol hamburger opening a glass slide-down panel.\n\n**5.1 Hero**\nFull-viewport section over the layered gradient backdrop with a subtle woven crosshatch overlay. Eyebrow label (\"The Loom Studio\"), large Fraunces headline (e.g., \"Threads of light, woven by hand.\"), supporting subcopy, dual CTAs (primary + ghost), and a scroll cue. Optional decorative loom\u002Fthread motif built purely from CSS gradients and borders.\n\n**5.2 Features — 3 Glass Cards**\nGrid row of `.glass-card`s: \"Handwoven Goods,\" \"Workshops & Classes,\" \"Bespoke Commissions.\" Each card: Material Symbol icon inside a neumorphic circle, title, description, hover lift.\n\n**5.3 How It Works — 3 Steps**\nNumbered steps (\"01 Choose Your Thread,\" \"02 Warp the Loom,\" \"03 Weave & Finish\") with numbered badges connected by a dashed thread line on desktop, stacking vertically on mobile.\n\n**5.4 Testimonials**\nGrid of glass quote cards: quotation, star rating via Material Symbols, student\u002Fclient name and role. Avatar circles may use CSS gradient initials with `aspect-ratio: 1`.\n\n**5.5 Pricing — 3 Tiers**\n\"Thread\" (single workshop), \"Weave\" (monthly membership — highlighted with a \"Most Popular\" badge, accent border\u002Fglow, and subtle scale), \"Loom\" (studio access \u002F full commission). Each card: price, feature list with check icons, CTA button. The highlighted tier must remain distinct in dark mode.\n\n**5.6 FAQ**\nAccessible accordion (per 2.4) with 5–6 real questions: skill level, materials included, shipping, returns, gift options, class sizes.\n\n**5.7 Final CTA**\nLarge glass panel over an intensified gradient: headline, subcopy, email capture form with full input states (per 2.3), primary button with loading → success feedback announced via `aria-live`.\n\n**5.8 Footer**\nBrand block with tagline, secondary link columns (Studio: About, Journal, Contact · Support: Shipping, Returns, Care Guide · Legal: Privacy, Terms), social icons (Material Symbols with `aria-label`), and copyright. Grid columns collapse to a single stack on mobile.\n",1791954982684]