GLOWWORKS — Neon Sign Workshop demo
GLOWWORKS — Neon Sign Workshop

A dark cyberpunk aesthetic evoking a nighttime neon workshop, with glowing electric signage, vibrant color glows, and atmospheric blur and filter effects.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 16.6 KB · 2278 words
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.

## PROJECT BRIEF — "GLOWWORKS" NEON SIGN WORKSHOP

**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.

**0.2 Required sections (in this order):**
1. Sticky header (logo, nav links, theme toggle, CTA button)
2. Hero
3. Features — exactly 3 cards
4. How It Works — exactly 3 steps
5. Testimonials — 3 cards
6. Pricing — exactly 3 tiers (middle tier featured)
7. FAQ — accessible accordion, 4–6 items
8. Final CTA (email capture form)
9. Footer with secondary link columns

**0.3 Mandatory visual effects:** glass/translucent surfaces (`backdrop-filter`), neon glow (layered `text-shadow` / `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.

**0.4 Theme-mode exception clause:** The style spec marks **Light as the default mode (✓ Light / ○ 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.

**0.5 Zero image assets:** All visuals are pure CSS (gradients, shadows, border-radius, icon font). No raster images, no external image URLs.

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks, presentation attributes in HTML.
- Style exclusively via class/ID selectors. HTML stays semantic and style-agnostic — re-theming the site must require CSS edits only.
- JS may toggle state classes (`.is-open`, `.is-loading`, `.is-valid`) and ARIA attributes, but must never inject inline styles.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` (Light = default). Required tokens:

| Token | Light (default) | Dark |
|---|---|---|
| `--primary` / `--secondary` | `#0a7fa8` / `#5b46c9` (darkened accents) | `#22d9ff` / `#8f6bff` |
| `--bg-primary` | `#e8e8f0` (soft off-white — never `#ffffff`) | `#0c0c11` |
| `--bg-secondary` | `#fefefe` | `#16151c` |
| `--text-primary` | `#0c0c11` | `#e8e8f0` |
| `--text-secondary` | `#3a3a44` | `#b8b8c7` |
| `--border-default` | `#c9c9d6` | `#2a2a33` (strong: `#3a3a44`) |

- **Contrast pairing is mandatory in both themes:** light background ↔ dark text, dark background ↔ light text. No exceptions.
- **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`/`text-shadow`.
- **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**.
- **Accent-on-light rule:** raw neon hues may never be text on light surfaces; use the darkened `--primary`/`--secondary` values instead, with ≥ 4.5:1 contrast.
- Status: `--text-success`, `--text-error`, `--border-success`, `--border-error` (tuned per theme, ≥ 4.5:1 in both modes).
- Shape/depth/motion: `--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)`.
- 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.

**1.3 Mandatory Dark Mode Support**
- 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.
- Visible toggle button in the header (Material Symbol `dark_mode` / `light_mode`) with correct `aria-pressed`, dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"), and an `aria-live="polite"` announcement of the change.
- 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 `<meta name="color-scheme" content="light dark">`.

**1.4 Flexbox Layout & Mobile-First Alignment**
- 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).
- 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.

**1.5 Framework & Naming Convention**
- Use Tailwind CSS **as a build layer only**: utilities via `@layer`/`@apply` inside `style.css`, always mapping back to the tokens above. **Never write raw utility classes into the HTML.**
- 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.

**1.6 Typography & Icons (Google Only)**
- Google Fonts via `<link>` with `preconnect`: `Unbounded` (display: logo, H1/H2, neon sign text), `Inter` (body/UI), `JetBrains Mono` (eyebrow labels, step numerals, prices, badges). Bind to `--font-display`, `--font-base`, `--font-mono`.
- 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.**

## 2. COMPONENT & SECTION DESIGN SPECIFICATIONS

**2.1 Button Component**
- `.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)`.
- 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`).
- **States, all class/attribute-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/Error** — temporary `.is-success` / `.is-error` styles driven by `--text-success` / `--text-error`, paired with an icon and text (never color alone).

**2.2 Card Component (glass)**
- `.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.
- **States:** **Hover** — `transform: translateY(-2px)` + glow shadow shift. **Focus-within** — border shifts to neon accent + glow when a child link/button 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.
- Pricing adds `.card--featured`: gradient border (double-background `padding-box`/`border-box` technique or pseudo-element), stronger ambient glow, "Most Popular" badge in mono font on a neon chip.

**2.3 Form & Input (Final CTA email capture)**
- Structure: `.input-group` — a flex column wrapping a `<label>`, the `<input 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.
- **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.
- 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.

**2.4 FAQ Accordion (custom widget)**
- 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.
- Open/close 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.

**2.5 Section Requirements**
- **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).
- **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/7" 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/magenta/violet radial gradients, `filter: blur(90px)`, slow `drift` keyframes; lower opacity in light mode).
- **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 / hand-bent glass tubes / durability & warranty), and a "Learn more" link exercising `:focus-within`.
- **How It Works (3 steps):** flex row → column; each step: oversized mono numeral ("01 / 02 / 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.
- **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/focus states apply.
- **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`.
- **FAQ:** 4–6 realistic Q&As (lead time, indoor/outdoor use, energy consumption, repairs, shipping/installation) built per 2.4.
- **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.
- **Footer:** brand block (logo + one-line tagline), 2–3 secondary link columns (Workshop / Support / Company — e.g., Custom Signs, Repairs & Restorations, Contact, FAQ, Careers), contact line with `mail` / `call` / `location_on` icons, social links as labeled text with `arrow_outward` icons, copyright line. Footer text must adapt properly to both themes.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography, wrap-based breakpoints, zero horizontal overflow from 320px to 1440px.
- **Motion:** every state change transitions with `var(--transition-fast)` / `var(--transition-normal)` + `var(--ease-standard)`. Required keyframes: `neon-flicker`, `drift` (orbs), `glow-pulse` (ambient breathing on the hero sign/CTA), `shimmer`, `spin`. **`prefers-reduced-motion: reduce` disables all flicker, drift, shimmer, and floating effects and all transform-based hovers** (fall back to color/shadow-only feedback) and sets `scroll-behavior: auto`.
- **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/invalid/loading/success.
- **Mandatory visual feedback:** every hover, click, and submission produces a visible change. No dead interactive elements.
- **Glass/glow 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.
- **Destructive actions:** none are expected; if any are introduced, `.btn-danger` must be visually distinct in both light and dark themes.

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — separate and complete, linked via a single `<script src="script.js" defer></script>`. No other script blocks, no `<style>` blocks, no `style=` attributes anywhere.
- **Document head:** `lang="en"`, viewport meta, title ("GLOWWORKS — Custom Neon Signs"), meta description, `<meta name="color-scheme" content="light dark">`, `preconnect` + Google Fonts links, Material Symbols stylesheet.
- **Naming:** BEM only, per 1.5. One convention, zero mixing. Organize `style.css` as: tokens → base/reset → components → sections.
- **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.
- **Definition of Done — verify before submitting:**
  1. Light default + fully tokened Dark mode; toggle works, persists via `localStorage`, respects OS preference; `aria-pressed`/`aria-label` correct.
  2. All button states present (hover, focus-visible, active, loading, disabled, success, error) without dimensional distortion.
  3. Card states defined (hover, focus-within, skeleton, empty).
  4. Input states + `aria-live` validation/success flow working.
  5. FAQ accordion ARIA-correct and keyboard operable.
  6. Zero inline CSS, zero inline SVG, zero raw utility classes in HTML.
  7. Reduced-motion fully respected.
  8. Keyboard-only walkthrough succeeds; no color-only state signals; contrast passes in both themes.
  9. 320px–1440px responsive with no horizontal scroll.
  10. Clean console; valid, semantic HTML5.

Generate the final, complete code for all three files immediately — first attempt, fully functional, no stubs.