[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-775-GLASSHOUSE-the-hot-shop":3},"# CODING AGENT BUILD PROMPT — \"GLASSHOUSE — the hot shop\" (Glassmorphism Landing Page)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below **on the first attempt**. Every rule in this document is mandatory and non-negotiable.\n\n---\n\n## 0. Project Overview & Creative Direction\n\n**0.1 — What you are building:** A single-page marketing landing page for **GLASSHOUSE — the hot shop** — a glassblowing studio (the \"hot shop\" is the workshop where glass is blown at ~1,100°C \u002F 2,000°F). Sections required: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**0.2 — Style:** **Glassmorphism**, 2020s Digital era. Keywords: glasshouse, blower, animated, glass, translucent, gradient, blur. The glassmorphism is thematically literal — frosted, translucent UI surfaces evoke studio glass, and molten-glass orange (`#ff9d42`) glows like the furnace. Neumorphic soft-shadow touches on controls (inputs, toggle) over the warm canvas.\n\n**0.3 — Required techniques:** Flexbox, `backdrop-filter` (with `-webkit-` prefix), CSS Filters (blurred glow orbs), Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Border Radius.\n\n**0.4 — Color palette:** Primary: `#0a0705`, `#e8dcc8`, `#ff9d42`. Secondary: `#a08c6e`, `#241a12`, `#e86a2e`. Full token mapping in §1.2.\n\n**0.5 — Mandatory-rule note:** The source theme marks Light as the primary mode; Dark Mode remains **mandatory** (§1.3). Light is the default showcase mode; Dark must be an equally polished, first-class theme.\n\n**0.6 — Copy:** Write **all user-facing copy in English**, publication-ready, on-theme (use real glassblowing vocabulary tastefully: furnace, gather, blowpipe, marver, anneal, kiln). **Lorem ipsum is prohibited.**\n\n---\n\n## 1. Strict Architecture Rules\n\n**1.1 — CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n* Target everything via class selectors (BEM, §1.5). No element-only styling beyond a minimal reset.\n* HTML stays clean, semantic, and presentation-agnostic — changing the look must never require markup edits.\n\n**1.2 — CSS Variables & Theme Tokens**\nDefine every token below. All colors, radii, shadows, motion, and glass properties must be consumed via `var(--...)`:\n\n```css\n:root {\n  \u002F* Brand (shared across themes) *\u002F\n  --primary: #ff9d42;          \u002F* molten glass *\u002F\n  --secondary: #a08c6e;        \u002F* warm taupe *\u002F\n  --accent-ember: #e86a2e;     \u002F* furnace ember *\u002F\n\n  \u002F* Light mode (default) *\u002F\n  --bg-primary: #e8dcc8;       \u002F* warm cream base — never #ffffff *\u002F\n  --bg-secondary: #d6c5a8;     \u002F* deeper cream *\u002F\n  --text-primary: #241a12;     \u002F* dark coffee on light bg *\u002F\n  --text-secondary: #6b5942;   \u002F* AA-safe darkened taupe *\u002F\n  --border-default: rgba(36, 26, 18, 0.16);\n  --glass-bg: rgba(254, 254, 254, 0.32);   \u002F* use 254,254,254 — never 255,255,255 *\u002F\n  --glass-border: rgba(254, 254, 254, 0.55);\n  --glass-highlight: rgba(254, 254, 254, 0.65);\n\n  \u002F* Feedback *\u002F\n  --text-success: #1f7a53;\n  --text-error: #b3261e;\n  --border-success: var(--text-success);\n  --border-error: var(--text-error);\n  --focus-ring: #241a12;\n\n  \u002F* Glass & glow *\u002F\n  --blur-strength: 18px;\n  --glow-primary: 0 0 34px rgba(255, 157, 66, 0.45);\n\n  \u002F* Shape, depth, motion, stacking, type *\u002F\n  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 26px;\n  --shadow-sm: 0 2px 10px rgba(36, 26, 18, 0.10);\n  --shadow-md: 0 14px 38px rgba(36, 26, 18, 0.16);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 320ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  --font-display: 'Sora', sans-serif;\n  --font-base: 'Inter', sans-serif;\n}\n```\n\n* **Dark tokens (identical values in two places):** once under `.dark { ... }` and once under `@media (prefers-color-scheme: dark) { :root:not(.light) { ... } }` as a no-JS fallback: `--bg-primary: #0a0705; --bg-secondary: #241a12; --text-primary: #e8dcc8; --text-secondary: #c2ae8e; --border-default: rgba(232,220,200,0.16); --text-success: #7fe0b4; --text-error: #ff8a7a; --focus-ring: #e8dcc8; --glass-bg: rgba(36, 26, 18, 0.46); --glass-border: rgba(232, 220, 200, 0.18); --glass-highlight: rgba(232, 220, 200, 0.10);` plus deeper dark shadows.\n* **Contrast pairing (hard rule):** light surfaces pair with `--text-primary: #241a12`; dark surfaces pair with `--text-primary: #e8dcc8`. Enforce in both themes. Verify every text\u002Fbackground pair meets WCAG AA (≥4.5:1; ≥3:1 for large text); if a derived value fails, adjust the value — never the token name.\n* **Light-mode background:** never pure white. Where a near-white is needed, use `#fefefe` \u002F `rgba(254, 254, 254, x)`.\n\n**1.3 — Mandatory Dark Mode**\n* Implement switching by toggling `.dark` \u002F `.light` classes on `\u003Chtml>` — theme switching must require **zero HTML restructuring**.\n* `script.js` must always set one of the two classes: read `localStorage` key `\"glasshouse-theme\"`; on first visit fall back to `window.matchMedia('(prefers-color-scheme: dark)')`; if no OS preference is detectable, default to **Light** (the primary mode).\n* Header must include a visible theme toggle button using a Material Symbols icon (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` state and dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n\n**1.4 — Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with **Flexbox only** (`display: flex; flex-wrap: wrap`). Do not use CSS Grid.\n* **Every flex container must default to `align-items: center`.** The only sanctioned deviations: `stretch` for equal-height card rows and `flex-start` for icon + multi-line text stacks — each deviation must carry a one-line CSS comment justifying it.\n* Mobile-first: card rows collapse from 3-across to 1-column on small viewports; prevent horizontal scrolling by design (fluid `clamp()` type, `min-width: 0` on flex children, max-width container) — never by hiding overflow.\n\n**1.5 — Styling Approach & Naming Convention**\n* Hand-written custom CSS in `style.css`, organized with native `@layer` in this order: tokens → base\u002Freset → layout → components → utilities.\n* **BEM naming only** (`.hero__title`, `.price-card--featured`, `.nav__toggle`). Never mix conventions, never invent utility soup.\n\n**1.6 — Google Fonts & Icons (Mandatory)**\n* Text: Google Fonts — **Sora** (headings, `--font-display`) and **Inter** (body, `--font-base`) via `\u003Clink>` tags.\n* Icons: **Google Material Symbols (Rounded)** via `\u003Clink>` + a shared `.icon` class using `font-variation-settings: 'FILL' 1, 'wght' 500`.\n* **Inline SVGs, local icon files, and emoji icons are forbidden.**\n\n---\n\n## 2. Component Design Specifications\n\n**2.1 — Buttons (`.btn`, `.btn--primary`, `.btn--glass`, `.btn--ghost`, `.btn--danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. `.btn--primary` uses a molten gradient (`linear-gradient(135deg, #ff9d42, #e86a2e)`) with `#241a12` bold text and `--glow-primary`; `.btn--glass` and `.btn--ghost` use glass\u002Foutline treatments with `--text-primary`.\n* **Hover:** brightness\u002Fglow shift with `cursor: pointer`; transitions via `var(--transition-fast)`.\n* **Focus:** `:focus-visible` ring — `outline: 2px solid var(--focus-ring); outline-offset: 3px;` (visible in both themes).\n* **Active:** `transform: scale(0.97)` pressed feedback.\n* **Loading:** `.is-loading` sets `aria-busy=\"true\"` (via JS), disables interaction to prevent double-clicks, and renders a CSS border-spinner (`.btn__spinner`, keyframe spin) sized so **button dimensions never change**.\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed; pointer-events: none.`\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` feedback styles driven by `--text-success` \u002F `--text-error`.\n* Define `.btn--danger` (distinct red family, visible in both themes) in CSS even if unused on this page.\n\n**2.2 — Glass Cards (`.card` family)**\n* **Default:** glass surface recipe — `background: var(--glass-bg); backdrop-filter: blur(var(--blur-strength)); -webkit-backdrop-filter: blur(var(--blur-strength)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);` Flex column layout, `gap: var(--spacing-gap)` scaled down inside cards.\n* **Hover (interactive cards):** `transform: translateY(-2px)` + glow\u002Fshadow shift.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** define `.card--skeleton` with a `@keyframes shimmer` overlay; no layout jumps.\n* **Empty state:** a reusable `.empty-state` pattern (glass panel + Material icon + guidance text).\n* Glass surfaces holding body text must use enough background alpha (≥ 0.32 light \u002F ≥ 0.46 dark) so text contrast remains AA after blur compositing. Provide an `@supports not (backdrop-filter: blur(1px))` fallback that raises background opacity.\n\n**2.3 — Forms & Inputs (`.input-group`)**\n* Structure: flex column wrapper containing `\u003Clabel>`, the input, and a dedicated `.input-group__error` container with `aria-live=\"polite\"`.\n* **States:** empty, focused (`--focus-ring` outline + `--primary` glow), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error icon, red message text — never color alone, always icon + text), disabled, read-only.\n* Inputs are neumorphic-glass: soft inset shadows on the cream canvas, translucent backgrounds, `--radius-md`.\n\n**2.4 — Modal (`.modal`)**\n* Triggered by every \"Book the Hot Shop\" \u002F pricing CTA. Structure: `.modal-overlay` (fixed, centered flex, `align-items: center`, dim + blurred backdrop) → `.modal` glass panel at `--z-modal`, `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n* **States:** opening (fade + scale-in via `var(--transition-normal)`), open, loading, success, error, closing — all CSS-animated.\n* **Contents:** short booking form (Full name — required; Email — `type=\"email\"`, required, validated) with a primary submit button that simulates ~1.2s loading, then swaps to a success panel (`check_circle` icon, confirmation copy, \"Done\" close button), announced via `aria-live`.\n* **Behavior:** close via Esc, overlay click, and a Material `close` icon button; trap Tab focus inside while open; restore focus to the trigger on close; lock body scroll while open.\n\n---\n\n## 3. Core UX & Micro-Interaction Rules\n\n* **Responsive by default:** fluid `clamp()` typography, anchor targets with `scroll-margin-top`, smooth `scroll-behavior`, zero horizontal overflow at 320px.\n* **Animations:** every state change transitions via `var(--transition-fast\u002Fnormal)` + `var(--ease-standard)`. Ambient decoration: 2–3 `.glow-orb` elements (radial gradients in `#ff9d42` \u002F `#e86a2e` \u002F `#a08c6e`, `filter: blur(80px)`, keyframed float, `aria-hidden=\"true\"`, `pointer-events: none`, transform-only motion).\n* **Reduced motion:** global `@media (prefers-reduced-motion: reduce)` block that zeroes animation\u002Ftransition durations and disables float\u002Fshimmer\u002Fspin.\n* **Accessibility:** WCAG AA contrast in both modes (including text over glass); never rely on color alone; semantic HTML5 landmarks (`header`, `nav[aria-label]`, `main`, `section[aria-labelledby]` + `h2`, `footer`); a skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability for nav, toggle, accordion, modal, and forms; `aria-live` regions for all form errors, loading, and success feedback.\n* **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n* **Performance:** restrict `backdrop-filter` to the header, cards, and modal (not every node).\n\n---\n\n## 4. Deliverables & Output Format\n\n* **Files:** `index.html`, `style.css`, `script.js` — complete, final code in one response. `index.html` contains exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` and **no inline script blocks**. Include `lang=\"en\"`, viewport meta, title, and meta description.\n* **JS scope (only):** theme toggle + persistence, mobile nav, header scroll shadow, modal lifecycle + focus trap, form validation + simulated submits. No lorem ipsum — all copy is final English; the **only** permitted placeholders are `href=\"#\"` targets for footer secondary links (labels must still be real).\n* **Acceptance checklist:** all 8 sections render; dark mode toggles + persists; modal full lifecycle works; forms show valid\u002Finvalid\u002Floading\u002Fsuccess states; keyboard-only navigation completes every flow; zero inline styles; no horizontal scroll at 320px; AA contrast in both modes; reduced motion respected; fonts\u002Ficons exclusively from Google.\n\n---\n\n## 5. Page Section Blueprint\n\n**5.1 — Header (`.site-header`):** sticky glass bar (blur + `--glass-border` bottom edge). Brand wordmark \"GLASSHOUSE\" with a decorative `local_fire_department` icon; anchor links (Features, Process, Reviews, Pricing, FAQ); theme toggle (§1.3); primary CTA \"Book a Class\" (opens modal). Mobile: hamburger (`menu`\u002F`close` icons) toggling a glass dropdown menu at `--z-dropdown` with `aria-expanded`, closing on link click and Esc.\n\n**5.2 — Hero (`.hero`):** near-full viewport, flex column, centered. Glass eyebrow pill, `h1` in Sora at `clamp(2.5rem, 6vw, 4.5rem)` (e.g., \"Where fire becomes form.\"), supporting subcopy, CTA row (primary \"Book the Hot Shop\" → modal; ghost \"Browse classes\" → `#pricing`). Visual: a frosted CSS-only \"class card\" mockup (class name, time, furnace icon, \"Spots left\" tag — no images) floating over glow orbs.\n\n**5.3 — Features (`.features`):** eyebrow + `h2` + lede; 3 glass cards with Material icons — `local_fire_department` (furnace-hot learning), `groups` (six seats per bench), `diamond` (you keep what you blow) — each with final English copy.\n\n**5.4 — How It Works (`.steps`):** 3 numbered glass step cards (\"01 Gather\", \"02 Shape & blow\", \"03 Anneal & take home\") connected by a `--primary`→`--accent-ember` gradient rule (pseudo-element; hidden or vertical on mobile).\n\n**5.5 — Testimonials (`.testimonials`):** 3 glass quote cards — `format_quote` icon, blockquote, a 5-star row (`star` icons with `aria-label=\"Rated 5 out of 5 stars\"`), and a footer with glass initials-avatar, name, and role.\n\n**5.6 — Pricing (`.pricing`):** 3 glass `.price-card` tiers with glassblowing-flavored names and realistic prices; middle tier `.price-card--featured` with \"Most Popular\" pill, stronger glow, and elevated transform; feature lists with `check_circle` icons; CTAs (ghost \u002F primary \u002F glass) all open the booking modal.\n\n**5.7 — FAQ (`.faq`):** 4–6 native `\u003Cdetails class=\"faq__item\">` \u002F `\u003Csummary class=\"faq__summary\">` pairs (experience needed, what to wear, age limits, annealing\u002Ftake-home timing, gift cards), glass-styled, with a `chevron` icon rotating on `[open]` and a CSS open animation; fully keyboard operable by default.\n\n**5.8 — Final CTA (`.cta-final`):** full-bleed glass panel over a molten gradient band; `h2` + copy + newsletter `.input-group` (email input + primary \"Claim your seat\" button) demonstrating every §2.3 state with `aria-live` feedback.\n\n**5.9 — Footer (`.site-footer`):** brand + one-line blurb; three secondary link lists (Explore \u002F Studio \u002F Company — real labels, `href=\"#\"` permitted here only); a social row of Material Symbols icon links with `aria-label`s (no fake brand logos); divider; copyright + small print.\n",1791954992647]