[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-305-Frosted-Glass":3},"# Frosted Glass Landing Page — Build Specification\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt, following this specification exactly. All user-facing copy must be written in **English**.\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. **Forbidden:** the `style=\"...\"` attribute anywhere in HTML.\n- All design properties, layout rules, and states are targeted via class or ID selectors only.\n- HTML stays clean, semantic, and style-agnostic — changing the look requires editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root`, using the Frosted Glass palette:\n- **Colors:** `--color-bg: #7c8a99`, `--color-bg-photo-a: #93a2b0`, `--color-bg-photo-b: #5c6b7a`, `--color-surface: rgba(255,255,255,0.55)`, `--color-surface-strong: rgba(255,255,255,0.72)`, `--color-border: rgba(255,255,255,0.4)`, `--color-text: #16202b`, `--color-text-muted: #3d4a58`, `--color-primary: #1f6feb`, `--color-accent: #1a1f26`.\n- **Background:** `--bg-image: linear-gradient(160deg, var(--color-bg-photo-a) 0%, var(--color-bg-photo-b) 100%)` applied to `body` with `background-attachment: fixed`. This is a plain photo-toned diagonal gradient — **not** a vivid glassmorphism gradient.\n- **Radius:** `--radius-sm: 8px`, `--radius-md: 14px`, `--radius-lg: 20px`, `--radius-pill: 999px`.\n- **Shadows:** `--shadow-sm: 0 2px 8px rgba(10,16,24,0.18)`, `--shadow-md: 0 6px 20px rgba(10,16,24,0.22)`, `--shadow-lg: 0 14px 36px rgba(10,16,24,0.26)`.\n- **Blur:** `--blur-backdrop: 12px` — moderate, uniform, legibility-only. No refraction, no edge lighting, no gradient fills inside panels.\n- **Spacing:** `--space-1` through `--space-24` (4\u002F8\u002F12\u002F16\u002F24\u002F32\u002F48\u002F64\u002F96px).\n- **Type scale:** `--text-xs` through `--text-5xl` as defined in the reference tokens.\n- **Motion:** `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`, `--transition-fast: .18s`, `--transition-normal: .28s`.\n- **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- **Contrast pairing:** every light surface token pairs with `--color-text` \u002F `--color-text-muted`; dark surfaces (`.badge`, dark scrim) pair with `#ffffff` text. Enforce in both light and dark themes.\n\n**1.3 Mandatory Dark Mode**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`: dark photo-toned gradient backdrop (deep slate, e.g. `#232c36` → `#141a21`), dark scrim surfaces `rgba(20,26,33,0.6)` \u002F `rgba(20,26,33,0.78)`, light text `#e8edf3` \u002F muted `#aeb9c6`, border `rgba(255,255,255,0.14)`. Keep `--color-primary: #1f6feb` (pair with `#ffffff` text).\n- Theme toggle button in the nav with a Google Material Symbol icon (`light_mode` \u002F `dark_mode`), correct `aria-pressed` and `aria-label` (\"Toggle dark mode\").\n- Persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Switching themes must not require any HTML restructuring.\n- Validate legibility in **both** light and dark before finishing — the source spec does not declare modes, so both must be verified.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.\n- Mobile-first: nav collapses, card grids and pricing tiers stack into a single column on small viewports, rows convert to columns. No horizontal scrolling at any width from 320px up.\n\n**1.5 Framework**\n- Use Tailwind CSS via CDN **or** clean custom CSS — either way, all component styling must be driven by the generic class names defined below (`.btn`, `.card`, `.input`, `.badge`, `.nav`). Do not mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Google Fonts** via `\u003Clink>`: **Inter** for body text and **Sora** (or **Poppins**) for display headings. Bind to `--font-base` \u002F `--font-display`. Do not use SF Pro system font stacks as the primary font.\n- Icons: **Google Material Symbols** only. Forbidden: raw inline SVGs, local icon files, emoji icons.\n\n## 2. FROSTED GLASS MATERIAL RULES (Signature Move)\n\nEvery raised surface is a **flat semi-opaque scrim + `backdrop-filter: blur(var(--blur-backdrop))`** — one uniform \"frosted pane\" material repeated identically on nav, cards, buttons, and inputs:\n- `background: var(--color-surface)` (or `--surface-strong` for inputs), `border: 1px solid var(--color-border)`, `backdrop-filter: blur(12px)` with `-webkit-` fallback.\n- **No** tinted gradients inside panels, **no** edge highlight lines, **no** refraction effects. Blur exists purely for content legibility.\n- Include fallbacks: `@supports not (backdrop-filter: blur(1px))` → solid `#eef2f6` (dark: `#232c36`); `@media (prefers-reduced-transparency: reduce)` → same solid fallbacks with `backdrop-filter: none`.\n- Respect `@media (prefers-reduced-motion: reduce)` — disable transitions\u002Fanimations.\n\n## 3. SECTIONS TO BUILD\n\nBuild all copy in English, with realistic product copy (no lorem ipsum):\n\n1. **Sticky Frosted Nav** — logo (Material Symbol + wordmark), nav links, theme toggle, primary CTA `.btn--primary`. Frosted scrim over scrolling content.\n2. **Hero** — headline, subheadline, two CTAs (primary + ghost), a frosted glass panel showcasing the product (use a styled mock UI panel, not an image), trust badges row.\n3. **Features** — 3 frosted `.card`s, each with a Material Symbol icon, title, description. Hover: `transform: translateY(-2px)` + shadow shift.\n4. **How It Works** — 3 numbered steps in a vertical-then-horizontal flex layout with connecting visual rhythm; each step in a frosted card.\n5. **Testimonials** — 2–3 frosted cards with quote, avatar placeholder (initials in a `.badge` circle), name, role, star rating via Material Symbols (`star`).\n6. **Pricing** — 3 tiers (Free \u002F Pro highlighted \u002F Enterprise). Highlighted tier uses `--color-primary` accent border and a `.badge` \"Most Popular\". Each tier: feature list with `check` icons, CTA button.\n7. **FAQ** — native `\u003Cdetails>`\u002F`\u003Csummary>` elements styled as frosted accordion rows, with `expand_more` Material Symbol rotating on `[open]`, focus-visible rings on summaries.\n8. **Final CTA** — full-width frosted panel with headline, email capture form (`.input` + `.btn--primary`), inline success\u002Ferror feedback via `aria-live=\"polite\"`.\n9. **Footer** — secondary link columns (Product, Company, Resources), social icon links (Material Symbols), copyright line, muted text.\n\n## 4. COMPONENT STATE SPECIFICATIONS\n\n**4.1 Buttons (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, `--radius-pill`, frosted scrim, `--shadow-sm`, `cursor: pointer`.\n- Hover: background → `--color-surface-strong`, `--shadow-md`.\n- Focus-visible: `outline: 2px solid var(--color-primary); outline-offset: 2px`.\n- Active: `transform: scale(0.97)`.\n- Loading: class `.is-loading` — disables pointer events, swaps label for a CSS spinner (border-based) without changing button dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: `.is-success` \u002F `.is-error` temporary feedback states using `--text-success: #1a7f37` \u002F `--text-error: #d1242f` (dark-mode-safe variants defined).\n\n**4.2 Cards (`.card`)**\n- Default: frosted pane, `--radius-lg`, `--shadow-md`, `--space-6` padding.\n- Hover (interactive cards): `translateY(-2px)` + `--shadow-lg`.\n- `:focus-within`: border highlights `--color-primary`.\n- Skeleton: `.card--skeleton` shimmer animation (gradient sweep) for any async content.\n\n**4.3 Inputs (`.input`)**\n- States: empty, focused (primary border + `0 0 0 3px rgba(31,111,235,0.28)` ring), filled, valid (success border + `check_circle` icon), invalid (error border, red helper text, `error` icon), disabled, read-only.\n- Structure: flex column wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated `.input-error` container with `aria-live=\"polite\"`.\n\n**4.4 Modal (used for \"Try demo\" or plan comparison if triggered)**\n- States: opening (fade+scale), open, loading, closing — all CSS transitions.\n- Centered flex overlay with dark scrim `rgba(10,16,24,0.5)` + blur, frosted panel, Material Symbol close button, focus trap, closes on `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n## 5. CORE UX & ACCESSIBILITY\n\n- **Responsive by default:** fluid type via `clamp()`, no horizontal overflow, breakpoints at ~640px and ~1024px.\n- **Smooth animations:** `transition: background var(--transition-fast) var(--ease-standard), box-shadow …` on all interactive elements; respect `prefers-reduced-motion`.\n- **A11y:** WCAG-AA contrast in both themes; never rely on color alone (pair icons\u002Ftext with states); semantic HTML5 (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `\u003Cnav>`); logical focus order; full keyboard operability; skip-to-content link.\n- **Visual feedback:** every click\u002Fhover\u002Fsubmit triggers a visible state change.\n- **Destructive\u002Fdistinct actions:** `.btn--danger` visually distinct in both themes.\n\n## 6. DELIVERABLE\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate files. Only a single deferred `\u003Cscript src=\"script.js\" defer>` reference in HTML; no other inline scripts.\n- **Naming:** one consistent convention (BEM-style modifiers as shown: `.btn--primary`, `.card--skeleton`) across the entire deliverable.\n- **JS scope:** theme toggle + persistence, mobile nav toggle, FAQ accordion polish, form validation with `aria-live` feedback, modal open\u002Fclose with focus trap, smooth scroll for anchor links. No frameworks.\n- **No placeholders:** write real English copy for all sections; placeholders only where content is genuinely unspecified.\n- Include a comment header in `style.css` crediting the Frosted Glass reference spec (`references\u002F00-flagship-implementation-specs\u002Ffrosted-glass.md`).\n",1791954984632]