[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-165-FUSE-shell-designer":3},"# BUILD PROMPT — \"FUSE — Shell Designer\" Glassmorphism Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-grade landing page on the first attempt.\n\n**Objective:** Create a single-page marketing site for **FUSE**, a browser-based design studio for shell\u002Fterminal prompts. The visual language is **Glassmorphism (2020s Digital)**: translucent frosted-glass panels floating over soft gradient aurora backgrounds with subtle \"firework\" spark accents. Keywords: firework, shell, studio, glass, translucent, gradient, blur. **Light mode is the designed default theme** (per style spec ✓ Light \u002F ○ Dark); Dark Mode remains **mandatory** and fully implemented per Rule 1.3.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic. Changing the site's entire look must only require editing `style.css`.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nStore **all** visual tokens in `:root` and override them in the dark theme. Use exactly this token sheet:\n\n| Token | Light (default) | Dark |\n|---|---|---|\n| `--primary` | `#0a1020` | `#d8e2f0` |\n| `--primary-contrast` (text on primary) | `#e8eef8` | `#060a14` |\n| `--secondary` | `#6a82a8` | `#6a82a8` |\n| `--bg-primary` | `#e8eef8` | `#060a14` |\n| `--bg-secondary` | `#d8e2f0` | `#0c1424` |\n| `--bg-elevated` | `#fefefe` | `#0a1020` |\n| `--text-primary` | `#060a14` | `#e8eef8` |\n| `--text-secondary` | `#4d6180` | `#a9bdd8` |\n| `--text-success` | `#1a7f4b` | `#6fd39a` |\n| `--text-error` | `#b3261e` | `#ff8f8a` |\n| `--border-default` | `rgba(106,130,168,.35)` | `rgba(216,226,240,.16)` |\n| `--border-error` \u002F `--border-success` | `#b3261e` \u002F `#1a7f4b` | `#ff8f8a` \u002F `#6fd39a` |\n| `--glass-bg` | `rgba(255,255,255,.45)` | `rgba(255,255,255,.06)` |\n| `--glass-bg-strong` | `rgba(255,255,255,.62)` | `rgba(255,255,255,.10)` |\n| `--glass-border` | `rgba(255,255,255,.65)` | `rgba(255,255,255,.14)` |\n| `--gradient-accent` | `linear-gradient(135deg,#6a82a8,#0a1020)` | `linear-gradient(135deg,#a9bdd8,#6a82a8)` |\n| `--font-base` \u002F `--font-display` \u002F `--font-mono` | Inter \u002F Space Grotesk \u002F JetBrains Mono | same |\n| `--radius-sm \u002F -md \u002F -lg \u002F -xl` | `8px \u002F 16px \u002F 24px \u002F 32px` | same |\n| `--shadow-sm \u002F -md \u002F -glass` | soft ambient shadows tuned per theme | same |\n| `--spacing-gap` | `1.5rem` (section rhythm: 96–128px desktop, 64px mobile) | same |\n| `--transition-fast \u002F -normal` | `150ms \u002F 300ms` | same |\n| `--ease-standard` | `cubic-bezier(.4,0,.2,1)` | same |\n| `--z-dropdown \u002F -nav \u002F -modal \u002F -toast` | `100 \u002F 200 \u002F 1000 \u002F 1100` | same |\n\n* **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa — enforce in **both** themes. `#6a82a8` is reserved for icons, large display text, and decorative accents only; body copy uses `--text-secondary` (AA-compliant derivative) as defined above.\n* **Light Mode Background:** Never use `#ffffff` as a page background. Base is `#e8eef8`; where near-white is needed, use `#fefefe`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (class takes precedence).\n* **Theme Switching:** All surfaces, glass panels, text, and borders must flip seamlessly via variables only — no HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`; on first visit with no stored choice, fall back to `prefers-color-scheme`. Provide a visible toggle in the header using Google Material Symbols (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\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 explicitly justified exception is documented in a CSS comment.\n* **Mobile-first:** All rows convert to columns on small viewports (`flex-direction: column` under ~768px). Use `flex-wrap: wrap`, `min-width: 0` on children, and `overflow-x: hidden` on body — horizontal scrolling is a defect.\n* Card rows (Features, Testimonials, Pricing) use `display: flex; flex-wrap: wrap` with `flex: 1 1 300px` children — not CSS grid.\n\n### 1.5 Framework Default\nThe style spec lists raw CSS techniques (Flexbox, Backdrop Filter, CSS Filters, Transitions, Transforms, Gradients, Box Shadows, Border Radius) and requests no framework: therefore use **clean, hand-written custom CSS** in `style.css` with a commented table of contents. All classes must be semantic and reusable (`.btn`, `.glass-card`, `.input-group`), bound to the CSS variables above. No build step, no frameworks, no utility-class soup.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Space Grotesk** (display\u002Fheadings), **Inter** (body, bound to `--font-base`), and **JetBrains Mono** (all shell\u002Fcode snippets, bound to `--font-mono`) via Google Fonts `\u003Clink>` with `preconnect`.\n* **Icons:** Use **Google Material Symbols (Rounded)** via the official stylesheet. **Raw inline SVGs and local icon files are forbidden.** Footer social links must be text links (e.g., \"GitHub\", \"X\", \"Discord\") — do not use brand SVGs.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + modifiers `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: .5rem;` minimum touch target 44×44px. Primary uses `--primary` bg + `--primary-contrast` text with a subtle glass sheen; secondary uses `--glass-bg` + `--glass-border`.\n* **Hover:** Brightness\u002Felevation shift + `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring built from `--secondary` (outline + offset) for keyboard navigation.\n* **Active:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** Disables interaction, prevents double-clicks, renders a rotating Material Symbol spinner (`progress`) without changing button dimensions; set `aria-busy=\"true\"`.\n* **Disabled:** `opacity: .5; filter: grayscale(1); cursor: not-allowed;`.\n* **Success\u002FError (`.is-success`, `.is-error`):** Temporary feedback driven by `--text-success` \u002F `--text-error`, announced via `aria-live`.\n\n### 2.2 Card Component (`.glass-card`)\n* **Default:** Flexbox layout, `background: var(--glass-bg)`, `backdrop-filter: blur(18px) saturate(160%)`, `border: 1px solid var(--glass-border)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-glass)`. Provide an `@supports not (backdrop-filter: blur(1px))` fallback raising surface opacity to ~0.9.\n* **Hover:** `transform: translateY(-2px)` + shadow elevation shift.\n* **Focus-within:** Border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define a `.skeleton` shimmer utility (gradient sweep keyframes) in CSS, used for the email form's pending state and available for dynamic content.\n* **Empty State:** Define a structured fallback pattern (Material Symbol + guidance text) in CSS for reuse.\n\n### 2.3 Form & Input (`.input-group`)\n* **States:** Empty, Focused (outline ring), Filled, Valid (`.is-valid`: success border + `check_circle` icon), Invalid (`.is-invalid`: error border, `--text-error` message, `error` icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n### 2.4 Modal \u002F Popup (`.modal`)\n* **States:** Opening, Open, Closing — all animated with CSS transitions (fade backdrop + scale\u002Ftranslate panel).\n* **UX Features:** Centered flex overlay (`align-items: center`), blurred backdrop, Material Symbol `close` button, keyboard focus trap, focus return on close, close via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n* **Responsive by Default:** Fluid sizing, no horizontal overflow at any viewport from 320px up.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable orb drift, spark twinkle, typing animation, and scroll reveals).\n* **Accessibility (a11y):** AA contrast in both themes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `main`, `footer`, `section` with `aria-labelledby`); one `\u003Ch1>`; logical focus order; full keyboard operability; skip-to-content link; `aria-live` regions for form errors, loading, and success feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (used only if a destructive action genuinely appears).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n* **File Structure:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks — a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` before `\u003C\u002Fbody>`.\n* **Naming Convention:** BEM throughout (`.nav__link`, `.btn--primary`, `.pricing-card--featured`, `.faq__item`). Never mix conventions.\n* **No Unrequested Placeholders:** Write real, polished English copy for every section — lorem ipsum is forbidden. In-page nav links must anchor to real section IDs; outbound\u002Ffooter links may use `href=\"#\"`.\n\n---\n\n## 5. DESIGN BRIEF — \"FUSE — SHELL DESIGNER\" (Glassmorphism, 2020s Digital)\n\n* **5.1 Concept:** FUSE is a studio where developers design their shell prompt — segments, colors, gradients, glyphs — in a live preview, then export a ready-to-run config. The page must feel like a design studio: precise, translucent, quietly celebratory.\n* **5.2 Color System:** Deep navies (`#060a14`, `#0a1020`, `#0c1424`) anchor text and primary actions; frosty blues (`#d8e2f0`, `#e8eef8`) form the light canvas; steel blue `#6a82a8` is the connective accent for icons, gradients, and large display text.\n* **5.3 Glass Surface System:** Two tiers — `--glass-bg` (cards, nav) and `--glass-bg-strong` (terminal mockup, modal, featured pricing) — each with `backdrop-filter: blur(18px) saturate(160%)`, a 1px light inner border, and a soft top-edge highlight. Limit stacked blur layers for performance.\n* **5.4 Background System:** Fixed full-page gradient (`--bg-primary` → `--bg-secondary`) with 3–4 large blurred radial-gradient **aurora orbs** in `#6a82a8`\u002Fnavy, slowly drifting (CSS keyframes). Add a restrained **firework motif**: small radial-gradient spark bursts (pure CSS, `aria-hidden=\"true\"`, decorative only) with a gentle twinkle, concentrated in the Hero and Final CTA.\n* **5.5 CSS Filters:** Apply `filter: saturate()\u002Fbrightness()` shifts on orb hover regions and card hover states; use `filter` never where contrast is required.\n\n---\n\n## 6. SECTION-BY-SECTION SPECIFICATION\n\n**6.1 Header (sticky glass nav):** Fixed nav with `backdrop-filter` blur, wordmark \"FUSE\" (Space Grotesk) with a `flare` Material Symbol, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, and a compact \"Get started\" `.btn--primary`. Mobile: hamburger (`menu`\u002F`close` icons) toggling a glass dropdown panel with `aria-expanded`.\n\n**6.2 Hero:** Two-column flex (stacks on mobile). Left: eyebrow chip (\"Shell design studio\"), `\u003Ch1>` with one gradient-text word, subheadline, CTA row — primary \"Start designing free\" and secondary \"Watch the demo\" (opens the demo modal, §2.4) — plus a compact 3-stat strip (e.g., shells themed, themes shared, rating). Right: a `.glass-card--strong` **terminal mockup** — window chrome dots (`aria-hidden`), JetBrains Mono content showing a styled prompt (user@host, path, git branch in accent colors), and a small floating glass chip with theme swatches. Aurora orbs + firework sparks behind.\n\n**6.3 Features (3 cards):** Flex-wrapped row of `.glass-card`s, each with a Material Symbol in a glass tile, title, description, and \"Learn more\" arrow link: **Live prompt studio** (`tune`), **Gradient engine** (`gradient`), **One-click export** (`rocket_launch` — zsh, bash, fish, PowerShell, starship configs).\n\n**6.4 How It Works (3 steps):** Horizontal stepper (vertical on mobile) with mono-font numerals 01–03, a connecting gradient line, and glass step cards: *Pick a base theme → Design in the studio → Export & install with one command*.\n\n**6.5 Testimonials:** 3 glass quote cards; avatar = gradient circle with initials (no external images); name, role, quote; a `star` icon row with an `aria-label` rating.\n\n**6.6 Pricing (3 tiers):** Flex row of glass cards — **Spark** (Free), **Fuse Pro** (featured: \"Most popular\" badge, `--gradient-accent` border, elevated shadow, `.btn--primary`), **Atelier Studio** (teams). Each: tier name, price, blurb, check-icon feature list, CTA. Footnote line beneath.\n\n**6.7 FAQ:** 5–6 button-based accordion items (`aria-expanded`, `aria-controls`, animated height via `max-height` transition, keyboard operable): shell compatibility, installation, theme licensing, PowerShell support, free plan limits, cancellation.\n\n**6.8 Final CTA:** Full-width glass panel over intensified aurora + sparks. Headline, subcopy, and an **email capture form** (`.input-group` inline with button): validate format on submit, show `.is-invalid` with `aria-live` error, then `.is-loading` (button spinner, `.skeleton` on the panel) → `.is-success` confirmation message. Small print beneath.\n\n**6.9 Footer:** Brand block (logo, one-liner) + three secondary link columns (Product, Resources, Company) + bottom bar with copyright, Privacy\u002FTerms\u002FStatus links, and text social links (GitHub, X, Discord).\n\n---\n\n## 7. JAVABSCRIPT REQUIREMENTS (`script.js` only)\nImplement exactly: (1) theme toggle with `localStorage` + `prefers-color-scheme` fallback; (2) mobile nav toggle; (3) FAQ accordion; (4) demo modal open\u002Fclose with focus trap, `Esc`, overlay click, focus return; (5) email form validation + simulated submit (loading → success) with `aria-live`; (6) optional IntersectionObserver scroll-reveal adding `.is-visible`, disabled under `prefers-reduced-motion`. No other JS.\n\n## 8. COPY DIRECTION\nAll user-facing copy in **English**. Tone: confident, technical, studio-grade — short sentences, no exclamation-mark overload, no marketing fluff. Suggested headline direction (adapt freely): *\"Design a shell that sparks.\"* with subcopy explaining the live-preview studio and one-click export. Write realistic feature descriptions, testimonial quotes, pricing features, and FAQ answers — every string must read like a real product.\n",1791954982663]