[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-408-Neon-Sign-Tube":3},"# CODING AGENT PROMPT — BUILD THE \"NEON SIGN \u002F TUBE\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The source specification is written in English below; all user-facing copy must be written in **English**.\n\n---\n\n## 0. PROJECT BRIEF & THEME DIRECTION\n\n**0.1 Theme Identity — \"Neon Sign \u002F Tube\"**\nTranslate heritage neon-tube signage to the web: glowing tube strokes on a dark ground, saturated pink\u002Fcyan\u002Forange light bloom, subtle flicker and reflection, nightlife\u002Fretro\u002Fvivid mood. Bar and nightlife branding with synthwave crossover energy. The signature moves are (a) a layered `text-shadow` bloom (`--tube-text-glow`) on display headlines, and (b) a bright tube-stroke border plus `box-shadow` bloom (`--tube-stroke`) applied to the nav, primary buttons, and card borders.\n\n**0.2 Brand & Copy**\nInvent one coherent fictional brand for a **custom neon sign studio** (e.g., a studio that designs, hand-bends, and ships custom neon signs for bars, venues, and homes). Write **real, complete English copy** for every section — headlines, subcopy, feature descriptions, testimonials, pricing, FAQ answers, footer text. **Lorem ipsum is forbidden.** Tone: confident, vivid, nightlife-flavored, never corporate.\n\n**0.3 Required Sections (in this order)**\n1. **Sticky Nav** — pill-shaped tube-stroke container (per theme spec), brand wordmark in the display font with tube glow, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, CTA button. On mobile: a Material `menu` icon button (proper `aria-expanded`\u002F`aria-controls`) opening a dropdown panel at `--z-dropdown`.\n2. **Hero** — badge chip, display headline in the display font with `--tube-text-glow` and a **flicker animation on exactly one accent word**, subcopy, two CTAs (primary scrolls to Pricing, secondary scrolls to How It Works), CSS-only decorative neon tube element (e.g., a glowing rounded tube ring or underline), radial-gradient light blooms (pink\u002Fcyan\u002Forange, low opacity), and a subtle reflection gradient beneath the headline.\n3. **Features** — exactly 3 cards, each with a Material icon inside a tube-stroke ring, a title, and 2–3 sentences of copy.\n4. **How It Works** — exactly 3 steps with numbered tube-circle badges (01\u002F02\u002F03) connected by a glowing gradient tube line; each step has a title and copy.\n5. **Testimonials** — 3 quote cards with 5-star ratings (Material `star` icons + accessible label), quote, name, role, and avatar rendered as **initials inside a neon-ringed circle** (no external images).\n6. **Pricing** — 3 tiers with concrete prices, feature lists with Material `check` icons, the middle tier highlighted with an orange \"Most Popular\" badge (`.badge`), and a CTA per tier. Clicking a CTA triggers the button loading state (~1.2s) then a confirmation toast.\n7. **FAQ** — 5 real questions (e.g., production time, indoor\u002Foutdoor use, power draw, custom logos, warranty) as native `\u003Cdetails>`\u002F`\u003Csummary>` accordions with a rotating Material `expand_more` chevron. No modal.\n8. **Final CTA** — email capture form (label + input + button) with full validation states and toast feedback.\n9. **Footer** — brand blurb, 3 columns of secondary links (link to in-page anchors where a target exists; otherwise `href=\"#\"` with descriptive accessible names), social links as Material icons, copyright line.\n\n**0.4 Mode Validation Requirement**\nThe source specification declares no color modes and explicitly requires: **validate the design in both light and dark mode before delivering.** Dark is this theme's canonical expression; light is a fully tuned \"dayglow\" variant. Both are mandatory (see 1.3).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\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 every design property, layout rule, and state via class or ID selectors only.\n* HTML must remain clean, semantic, and styling-agnostic: changing the site's look must require editing only `style.css`, never the markup.\n\n### 1.2 **CSS Variables & Theme Tokens**\nStore all tokens in `:root`, then override per mode. Use these **mandatory canonical names**, mapped to the theme palette (dark = canonical values):\n\n* **Colors:** `--bg-primary: #0a0710` (dark ground), `--bg-secondary: #150e22` (surface), `--primary: #ff2ee0` (neon pink), `--secondary: #24f0ff` (cyan), `--text-primary: #fbeaff`, `--text-secondary: #c6a9d6`, `--border-default: rgba(255, 79, 216, 0.35)`, `--text-success: #24f0ff`, `--text-error: #ff3355`, `--border-success: rgba(36, 240, 255, 0.5)`, `--border-error: rgba(255, 51, 85, 0.5)`.\n* **Supplementary theme tokens (allowed in addition):** `--bg-surface-strong: #1f1530`, `--glass-tube: #2a1e3d`, `--accent-orange: #ff9d2e`, `--radius-pill: 999px`, `--font-display: 'Pacifico', cursive`, `--tube-text-glow: 0 0 4px #fff, 0 0 12px var(--primary), 0 0 28px var(--primary), 0 0 48px rgba(255,46,224,0.5)`, `--tube-stroke: 2px solid var(--primary)`.\n* **Error vs. primary:** `--text-error` must remain clearly distinguishable from the pink `--primary` in **both** modes.\n* **Radius & shadows:** `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 24px`; glow-bloom elevation per theme: `--shadow-sm: 0 0 6px rgba(255,46,224,0.55), 0 0 2px rgba(255,46,224,0.9)`, `--shadow-md: 0 0 18px rgba(255,46,224,0.55), 0 0 40px rgba(255,46,224,0.30)`, plus `--shadow-lg: 0 0 32px rgba(36,240,255,0.45), 0 0 70px rgba(255,46,224,0.30)`. Redefine reduced-alpha shadow variants for light mode.\n* **Spacing & transitions:** `--spacing-gap: 16px` plus the `--space-1…--space-24` scale (4\u002F8\u002F12\u002F16\u002F24\u002F32\u002F48\u002F64\u002F96px); `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`.\n* **Elevation\u002Fstacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n* **Typography tokens:** `--font-base: 'Poppins', system-ui, sans-serif`; text scale `--text-xs` through `--text-5xl` per the theme spec.\n* **Contrast pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in **every** theme, not just the default.\n* **Light mode ground:** never pure white. Use a pale lavender \"dayglow\" ground (suggested `--bg-primary: #f2ecfa`, `--bg-secondary: #fefefe`, `--bg-surface-strong: #f8f3ff`, `--glass-tube: #ece2f9`, `--text-primary: #241636`, `--text-secondary: #5d4b78`). Where a near-white is needed, use `#fefefe`, never `#ffffff`. In light mode, deepen neon hues used as text\u002Fborder ink (suggested `--primary: #c90ea8`, `--secondary: #0890b0`, `--text-error: #c81e3c`, `--text-success: #067a92`) while keeping the vivid `#ff2ee0`\u002F`#24f0ff` only inside glow shadow layers. Verify WCAG AA for all pairings before delivering.\n\n### 1.3 **Mandatory Dark Mode Support**\n* Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; define light tokens under the light media query and a `.light` class. Switching modes must require **zero HTML restructuring**.\n* **Persistence:** store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. The media-query-driven defaults prevent a flash of the wrong theme before the deferred script runs.\n* **Toggle control:** a visible button in the nav with Material `dark_mode`\u002F`light_mode` icons, correct `aria-pressed` state, and a descriptive `aria-label` (e.g., \"Toggle dark mode\"). The focus ring color must also flip per mode (white ring on dark, dark ring on light).\n\n### 1.4 **Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox (Tailwind flex utilities or `display: flex`).\n* **Every flex container defaults to `align-items: center`** (`items-center`) unless an exception is explicitly justified in a CSS comment.\n* Mobile-first: rows convert to columns on small viewports; **horizontal scrolling is forbidden at every breakpoint**; all interactive targets are at least 44×44px.\n\n### 1.5 **Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS via the Play CDN `\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>` for **layout, spacing, and responsive utilities only** (flex, grid, gap, padding, breakpoints).\n* **All colors, fonts, radii, shadows, and effects must come from BEM component classes in `style.css` bound to CSS variables** — never from Tailwind color utilities. Do not add a `tailwind.config` inline script block.\n\n### 1.6 **Typography & Icons (Google Fonts Mandatory)**\n* Load **Poppins** (weights 400\u002F500\u002F600\u002F700) as `--font-base` and **Pacifico** (400) as `--font-display` via Google Fonts `\u003Clink>` tags. **Exception clause:** the source stack lists `Futura` and `Brush Script MT`, which are not Google Fonts — drop them; Poppins and Pacifico (already in the source stack) take their place.\n* Use **Google Material Symbols (Rounded)** for every icon (menu, close, dark_mode, light_mode, star, check, expand_more, error, check_circle, mail, arrow_forward, feature icons, person). **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 **Button Component**\nBase `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, pill radius, tube-stroke border with glow `box-shadow`, min 44×44px, `transition` on shadow\u002Ftransform. Style **all** states via CSS classes:\n* **Hover:** brightness\u002Fshadow shift plus `translateY(-1px)`, `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring using a mode-aware focus token.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** disables interaction and prevents double-clicks; renders a CSS spinner or rotating Material `progress_activity` icon; **button dimensions must not change**.\n* **Disabled (`[disabled]`):** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no transform, no glow.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styles driven by `--text-success`\u002F`--text-error` and matching border tokens.\n* **Variants:** `.btn--primary` (pink tube stroke + pink glow), `.btn--secondary` (cyan tube stroke per theme spec base `.btn`). This page contains **no destructive actions — do not invent any**; if one were ever added, `.btn-danger` must be visually distinct in both themes.\n\n### 2.2 **Card Component**\n* **Default:** Flexbox layout, `--glass-tube` background, `1px solid var(--border-default)`, `--radius-lg`, glow `--shadow-sm`, generous padding.\n* **Hover:** `transform: translateY(-2px)` and elevation\u002Fglow shift to `--shadow-md`.\n* **Focus-within:** highlight the card border when any child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define `.card--skeleton` shimmer animation in CSS that preserves layout dimensions.\n* **Empty State:** define `.card--empty` with a Material icon and clear guidance text for reuse.\n\n### 2.3 **Form & Input Requirements**\n* **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the `.input` field, and a dedicated error feedback container (`.input-error`: Material `error` icon + message text, `aria-live=\"polite\"`, wired via `aria-describedby`; input gets `aria-invalid=\"true\"` when invalid).\n* **States — all styled:** empty, focused (cyan ring via `box-shadow`), filled, valid (`.is-valid`: cyan border + `check_circle` icon), invalid (`.is-invalid`: error border, error icon, red message text), disabled, read-only.\n* **Behavior:** the Final CTA form validates email in real time with English messages, shows inline error\u002Fsuccess, and confirms success with a toast.\n\n### 2.4 **Modal \u002F Popup Requirements**\nThis brief requires **no modal** (FAQ = native accordions; feedback = inline + toast). If you add any dialog anyway, it must have: CSS-animated opening\u002Fopen\u002Fclosing states plus loading\u002Fsuccess\u002Ferror states, a centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, and closing via `Esc` or overlay click, layered at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` by disabling the flicker animation, glow pulses, transforms, and smooth scrolling.\n* **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; **never rely on color alone** (pair every error\u002Fsuccess with an icon and text); semantic HTML5 elements; correct ARIA roles\u002Flabels on the theme toggle, mobile menu, and toast (`role=\"status\"` \u002F `aria-live`); logical DOM\u002Ffocus order; full keyboard operability.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (button loading on pricing CTAs, toast confirmations, accordion expansion, hover glows).\n* **Theme-specific motion:** a subtle neon flicker keyframe on one hero word (brief opacity\u002Fglow dips, long steady loop), a glow pulse on tube elements on hover, and radial light-bloom gradients — all CSS-only, all disabled under reduced motion.\n* **Anchors:** smooth scroll (wrapped in `prefers-reduced-motion: no-preference`) with `scroll-margin-top` so the sticky nav never covers section headings.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond the single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`); external CDN references (Tailwind, Google Fonts, Material Symbols) in `\u003Chead>` are permitted.\n* **Naming convention:** BEM only (`block__element--modifier`, e.g., `.btn--primary`, `.pricing-card__feature`) for all component classes, plus Tailwind layout utilities. **Never mix conventions.**\n* **script.js scope:** theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback; mobile menu open\u002Fclose (Esc + link click, focus management); FAQ enhancement only (native `\u003Cdetails>` must work without JS); email validation with inline feedback; toast component at `--z-toast`; pricing CTA loading demo; smooth anchor scrolling. No other libraries.\n* **Copy:** all user-facing copy in English, real and on-brand — no lorem ipsum, no placeholder text where content is specified in Section 0.3.\n* **Final validation:** before delivering, verify both light and dark modes render correctly, all contrast pairings pass AA, no horizontal scroll exists at any width, and every interactive element is keyboard operable.\n",1791954986243]