[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-744-GLOWWORKS-neon-sign-workshop":3},"Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — production-ready, fully functional, no follow-up questions. Where a detail is unspecified, make a senior-level decision consistent with this specification.\n\n## PROJECT BRIEF — \"GLOWWORKS\" NEON SIGN WORKSHOP\n\n**0.1 Product & Mood:** \"GLOWWORKS\" is a custom neon sign workshop. The aesthetic is **Cyberpunk, 2020s Contemporary**: glowing signage, translucent glass panels, blurred gradient light, precise industrial detail. The page must feel like neon tubes bending in a dark workshop — even in light mode.\n\n**0.2 Required sections (in this order):**\n1. Sticky header (logo, nav links, theme toggle, CTA button)\n2. Hero\n3. Features — exactly 3 cards\n4. How It Works — exactly 3 steps\n5. Testimonials — 3 cards\n6. Pricing — exactly 3 tiers (middle tier featured)\n7. FAQ — accessible accordion, 4–6 items\n8. Final CTA (email capture form)\n9. Footer with secondary link columns\n\n**0.3 Mandatory visual effects:** glass\u002Ftranslucent surfaces (`backdrop-filter`), neon glow (layered `text-shadow` \u002F `box-shadow`), gradients (background orbs, gradient headline keyword, gradient border on featured pricing card), blur (decorative orbs), keyframe animations (neon flicker, ambient drift, shimmer, spinner), hover effects on every interactive element.\n\n**0.4 Theme-mode exception clause:** The style spec marks **Light as the default mode (✓ Light \u002F ○ Dark)**. Honor Light as the default presentation. However, **Dark Mode support remains mandatory** per Section 1.3 below — Dark must be fully tokened, toggleable, and persisted. This rule overrides the spec's unchecked Dark marker.\n\n**0.5 Zero image assets:** All visuals are pure CSS (gradients, shadows, border-radius, icon font). No raster images, no external image URLs.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks, presentation attributes in HTML.\n- Style exclusively via class\u002FID selectors. HTML stays semantic and style-agnostic — re-theming the site must require CSS edits only.\n- JS may toggle state classes (`.is-open`, `.is-loading`, `.is-valid`) and ARIA attributes, but must never inject inline styles.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (Light = default). Required tokens:\n\n| Token | Light (default) | Dark |\n|---|---|---|\n| `--primary` \u002F `--secondary` | `#0a7fa8` \u002F `#5b46c9` (darkened accents) | `#22d9ff` \u002F `#8f6bff` |\n| `--bg-primary` | `#e8e8f0` (soft off-white — never `#ffffff`) | `#0c0c11` |\n| `--bg-secondary` | `#fefefe` | `#16151c` |\n| `--text-primary` | `#0c0c11` | `#e8e8f0` |\n| `--text-secondary` | `#3a3a44` | `#b8b8c7` |\n| `--border-default` | `#c9c9d6` | `#2a2a33` (strong: `#3a3a44`) |\n\n- **Contrast pairing is mandatory in both themes:** light background ↔ dark text, dark background ↔ light text. No exceptions.\n- **Neon accent tokens (constant across themes):** `--neon-cyan: #22d9ff`, `--neon-magenta: #ff3df5`, `--neon-violet: #8f6bff`, plus translucent glow variants (`--glow-cyan`, `--glow-magenta`, `--glow-violet`) for `box-shadow`\u002F`text-shadow`.\n- **Neon canvas rule:** glow only reads on dark substrate. Define persistent canvas tokens `--canvas-bg: #0c0c11`, `--canvas-bg-2: #16151c`, `--canvas-text: #e8e8f0`, used by the hero sign panel, icon badges, and featured pricing card **in both themes**.\n- **Accent-on-light rule:** raw neon hues may never be text on light surfaces; use the darkened `--primary`\u002F`--secondary` values instead, with ≥ 4.5:1 contrast.\n- Status: `--text-success`, `--text-error`, `--border-success`, `--border-error` (tuned per theme, ≥ 4.5:1 in both modes).\n- Shape\u002Fdepth\u002Fmotion: `--radius-sm: 8px`, `--radius-md: 14px`, `--radius-lg: 24px`; `--shadow-sm`, `--shadow-md` (redefined per theme); `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`.\n- Stacking: `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--z-header: 900`. The sticky header and mobile nav must never conflict with layered components.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens under a `.dark` class **and** under `@media (prefers-color-scheme: dark)` scoped as `:root:not(.light):not(.dark)` so the media query applies only when no explicit user class exists. Switching themes changes variables only — never HTML structure.\n- Visible toggle button in the header (Material Symbol `dark_mode` \u002F `light_mode`) with correct `aria-pressed`, dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), and an `aria-live=\"polite\"` announcement of the change.\n- Persistence: store the choice in `localStorage` (key `glowworks-theme`); fall back to `prefers-color-scheme` on first visit. Theme-initialization code must be the very first thing in `script.js` (which is the single deferred entry point) to minimize flash-of-wrong-theme. Include `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layouts with Flexbox. **Every flex container defaults to `align-items: center`** unless a documented exception exists (e.g., stacked text columns may use `flex-start` — justify each exception with a CSS comment).\n- Mobile-first: single column at base; multi-column feel via `flex-wrap` at ≥ 48em. No horizontal scrolling from 320px to 1440px. Fluid typography via `clamp()`; section padding `clamp(4rem, 8vw, 7rem)`; content max-width ≈ 72rem.\n\n**1.5 Framework & Naming Convention**\n- Use Tailwind CSS **as a build layer only**: utilities via `@layer`\u002F`@apply` inside `style.css`, always mapping back to the tokens above. **Never write raw utility classes into the HTML.**\n- Markup uses one convention only: **BEM** — e.g., `.btn`, `.btn--primary`, `.card`, `.card--featured`, `.hero__title`, `.faq__trigger`, `.input-group`, `.nav__toggle`. State classes: `.is-loading`, `.is-open`, `.is-valid`, `.is-invalid`. Never mix conventions.\n\n**1.6 Typography & Icons (Google Only)**\n- Google Fonts via `\u003Clink>` with `preconnect`: `Unbounded` (display: logo, H1\u002FH2, neon sign text), `Inter` (body\u002FUI), `JetBrains Mono` (eyebrow labels, step numerals, prices, badges). Bind to `--font-display`, `--font-base`, `--font-mono`.\n- Icons: Google **Material Symbols Rounded** via the official stylesheet, including the required base CSS class with `font-variation-settings`. **Inline SVGs and local icon files are strictly forbidden.**\n\n## 2. COMPONENT & SECTION DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n- `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; border-radius `--radius-md`; transition `var(--transition-fast)`.\n- Variants: `.btn--primary` (dark canvas bg, neon border + glow), `.btn--ghost` (glass: translucent bg, 1px border, `backdrop-filter`), `.btn--icon` (44×44 square, icon-only, requires `aria-label`).\n- **States, all class\u002Fattribute-driven:** **Hover** — brightness lift + intensified glow, `cursor: pointer`. **Focus-visible** — distinct ring built from CSS variables (`outline` + offset `box-shadow` using `--neon-cyan`). **Active** — `transform: scale(0.97)`. **Loading** — `.is-loading` with `aria-busy=\"true\"`: interactions disabled, JS double-click guard, spinning Material `progress` icon; button dimensions must not change (reserve space via fixed min-width). **Disabled** — `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`. **Success\u002FError** — temporary `.is-success` \u002F `.is-error` styles driven by `--text-success` \u002F `--text-error`, paired with an icon and text (never color alone).\n\n**2.2 Card Component (glass)**\n- `.card`: translucent surface via `color-mix(in srgb, var(--bg-secondary) 78%, transparent)`, `backdrop-filter: blur(14px) saturate(140%)`, 1px `--border-default`, `--radius-lg`, `--shadow-sm`. Provide an `@supports not (backdrop-filter…)` fallback to an opaque surface.\n- **States:** **Hover** — `transform: translateY(-2px)` + glow shadow shift. **Focus-within** — border shifts to neon accent + glow when a child link\u002Fbutton is focused. **Skeleton** — `.card--skeleton` with a `shimmer` keyframe gradient, geometry-stable. **Empty state** — `.card--empty` pattern (Material icon + one-line guidance) available for any dynamic slot.\n- Pricing adds `.card--featured`: gradient border (double-background `padding-box`\u002F`border-box` technique or pseudo-element), stronger ambient glow, \"Most Popular\" badge in mono font on a neon chip.\n\n**2.3 Form & Input (Final CTA email capture)**\n- Structure: `.input-group` — a flex column wrapping a `\u003Clabel>`, the `\u003Cinput type=\"email\">`, and a dedicated `.input-group__error` container wired to `aria-live=\"polite\"`; the input receives `aria-invalid=\"true\"` and `aria-describedby` pointing at the error container when invalid.\n- **States:** empty; focused (outline ring + accent border); filled; valid (`.is-valid`: `--border-success`, trailing `check_circle` icon); invalid (`.is-invalid`: `--border-error`, error icon, error message text); disabled; read-only.\n- Behavior in `script.js`: validate on blur and on submit with an email regex; on submit the button enters `.is-loading` (simulated ~1s) then `.is-success`, and an inline confirmation message renders into an `aria-live` region. All feedback includes visible text, not color alone.\n\n**2.4 FAQ Accordion (custom widget)**\n- Markup per item: `h3.faq__heading > button.faq__trigger` with `aria-expanded` + `aria-controls`; panel has `role=\"region\"`, `aria-labelledby`, and a matching `id`; trailing `expand_more` Material icon rotating 180° when expanded.\n- Open\u002Fclose animated via CSS only (the `grid-template-rows: 0fr → 1fr` technique with `overflow: hidden`); JS toggles only `aria-expanded`. First item open by default; items toggle independently. Instant transitions under reduced motion.\n\n**2.5 Section Requirements**\n- **Header (sticky):** glass bar (`backdrop-filter`, translucent token bg, bottom border); flex `align-items: center`, `justify-content: space-between`; GLOWWORKS wordmark in `--font-display` with restrained neon glow; nav anchors (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scrolling (disabled under reduced motion) and `scroll-margin-top` on targets; header CTA \"Get a Quote\" anchors to the Final CTA. Below 48em, a `.nav__toggle` button (menu icon, `aria-expanded`, `aria-controls`) reveals a glass dropdown panel positioned with `--z-dropdown` — Esc closes it and returns focus, click-outside closes it. Every link has ≥ 44px touch target and a hover glow-underline (pseudo-element).\n- **Hero:** ~90svh; centered flex column; mono-font eyebrow (e.g., \"CUSTOM NEON · BENT BY HAND\"); H1 in `--font-display` with ONE keyword rendered as gradient text (`background-clip: text`) carrying a subtle irregular `neon-flicker` animation (e.g., \"We bend glass and light into signs that never sleep.\" — refine copy as you see fit); supporting subcopy; two CTAs — `.btn--primary` \"Start Your Sign\" and `.btn--ghost` \"See How It Works\" (anchor to How It Works). Include a **pure-CSS neon sign visual**: a dark canvas panel (`--canvas-bg`, `--radius-lg`, 1px `#2a2a33` border) containing \"OPEN 24\u002F7\" or the wordmark in Unbounded with layered `text-shadow` glow, one flickering element, and a rounded \"tube\" accent (border + glow `box-shadow`), gently floating. Behind the content, 2–3 `aria-hidden=\"true\"` gradient orbs (cyan\u002Fmagenta\u002Fviolet radial gradients, `filter: blur(90px)`, slow `drift` keyframes; lower opacity in light mode).\n- **Features (3 cards):** section header (mono eyebrow, H2, intro line) + flex row → column on mobile. Each `.card`: neon-ringed icon badge on dark canvas (`bolt`, `design_services`, `handyman` or similar), H3, one realistic benefit paragraph (design consultation \u002F hand-bent glass tubes \u002F durability & warranty), and a \"Learn more\" link exercising `:focus-within`.\n- **How It Works (3 steps):** flex row → column; each step: oversized mono numeral (\"01 \u002F 02 \u002F 03\"), Material icon, H3, copy (send your idea → we bend & build → install & glow); a gradient connector line between steps on desktop only; step badge glows on hover.\n- **Testimonials (3 cards):** glass cards with `format_quote` icon, a 5-star row (`star` icons, FILL variation, plus `aria-label` \"Rated 5 out of 5\"), a believable quote, and name + role (e.g., cocktail bar owner, café founder, recording studio manager). `.card` hover\u002Ffocus states apply.\n- **Pricing (3 tiers):** e.g., \"Mini Neon — from $290\", \"Signature Custom — from $890\" (featured), \"Facade & Commercial — custom quote\". Each card: tier name in mono, price, feature list with `check_circle` icons, per-tier CTA (`.btn--primary` on featured, `.btn--ghost` elsewhere). Featured card uses `.card--featured`.\n- **FAQ:** 4–6 realistic Q&As (lead time, indoor\u002Foutdoor use, energy consumption, repairs, shipping\u002Finstallation) built per 2.4.\n- **Final CTA:** full-width glass panel over a gradient-orb backdrop; H2 + short copy; the email capture form per 2.3 with a `.btn--primary` submit.\n- **Footer:** brand block (logo + one-line tagline), 2–3 secondary link columns (Workshop \u002F Support \u002F Company — e.g., Custom Signs, Repairs & Restorations, Contact, FAQ, Careers), contact line with `mail` \u002F `call` \u002F `location_on` icons, social links as labeled text with `arrow_outward` icons, copyright line. Footer text must adapt properly to both themes.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, wrap-based breakpoints, zero horizontal overflow from 320px to 1440px.\n- **Motion:** every state change transitions with `var(--transition-fast)` \u002F `var(--transition-normal)` + `var(--ease-standard)`. Required keyframes: `neon-flicker`, `drift` (orbs), `glow-pulse` (ambient breathing on the hero sign\u002FCTA), `shimmer`, `spin`. **`prefers-reduced-motion: reduce` disables all flicker, drift, shimmer, and floating effects and all transform-based hovers** (fall back to color\u002Fshadow-only feedback) and sets `scroll-behavior: auto`.\n- **Accessibility:** semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); exactly one `h1` and a logical heading order; visible `:focus-visible` styles on every interactive element; a \"Skip to content\" link as the first tabbable element; full keyboard operability (nav toggle, accordion, form, theme toggle); `aria-live` regions for form feedback and theme changes; state is **never** communicated by color alone — pair icons and text for valid\u002Finvalid\u002Floading\u002Fsuccess.\n- **Mandatory visual feedback:** every hover, click, and submission produces a visible change. No dead interactive elements.\n- **Glass\u002Fglow performance:** limit `backdrop-filter` to header, mobile nav, cards, and CTA panel; `@supports` fallback required. Glow must never reduce text contrast below 4.5:1 (3:1 for large display text and meaningful borders) in either theme.\n- **Destructive actions:** none are expected; if any are introduced, `.btn-danger` must be visually distinct in both light and dark themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate and complete, linked via a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No other script blocks, no `\u003Cstyle>` blocks, no `style=` attributes anywhere.\n- **Document head:** `lang=\"en\"`, viewport meta, title (\"GLOWWORKS — Custom Neon Signs\"), meta description, `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`, `preconnect` + Google Fonts links, Material Symbols stylesheet.\n- **Naming:** BEM only, per 1.5. One convention, zero mixing. Organize `style.css` as: tokens → base\u002Freset → components → sections.\n- **Copy:** all user-facing copy in **English**, realistic and specific to a neon sign workshop. Since no copy was supplied, you own it — write believable marketing copy, testimonial names, quotes, and FAQ answers. **No lorem ipsum anywhere.** No unrequested placeholders; anchors point at real sections.\n- **Definition of Done — verify before submitting:**\n  1. Light default + fully tokened Dark mode; toggle works, persists via `localStorage`, respects OS preference; `aria-pressed`\u002F`aria-label` correct.\n  2. All button states present (hover, focus-visible, active, loading, disabled, success, error) without dimensional distortion.\n  3. Card states defined (hover, focus-within, skeleton, empty).\n  4. Input states + `aria-live` validation\u002Fsuccess flow working.\n  5. FAQ accordion ARIA-correct and keyboard operable.\n  6. Zero inline CSS, zero inline SVG, zero raw utility classes in HTML.\n  7. Reduced-motion fully respected.\n  8. Keyboard-only walkthrough succeeds; no color-only state signals; contrast passes in both themes.\n  9. 320px–1440px responsive with no horizontal scroll.\n  10. Clean console; valid, semantic HTML5.\n\nGenerate the final, complete code for all three files immediately — first attempt, fully functional, no stubs.\n",1791954992077]