Neon Cyber demo
Neon Cyber

A futuristic dark-themed aesthetic featuring glowing neon accents, cyber-inspired visuals, and a confident high-tech look suited for gaming, crypto, and tech products.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 11.3 KB · 1523 words
**ROLE & OBJECTIVE**

You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality **"Neon Cyber"** landing page on the first attempt. Theme: futuristic, techy, confident, neon — Era 2024–2026 Cyber Future. Required sections: Sticky Navigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. Write all user-facing copy in **English** with a confident, tech-forward tone: invent one cohesive fictional tech product identity and keep the brand name, headlines, feature copy, testimonials, pricing tiers, and FAQ answers consistent with it. No lorem ipsum.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is **forbidden anywhere in the HTML** — including particle positioning, which must be varied via `nth-child` selectors or modifier classes in CSS.
* All design properties, layout rules, and states are targeted via class/ID selectors only. HTML stays semantic and style-agnostic so a reskin requires editing `style.css` only.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` (with `color-scheme: dark`):
* **Colors:** `--primary: #00ffcc` (Cyan Accent), `--secondary: #ff00aa` (Magenta), `--bg-primary: #0a0f1c` (Deep Navy), `--bg-secondary: #0d1a3a` (Dark Blue), `--text-primary: #ffffff`, `--text-secondary: #9aa7c7` (muted cool slate, ≥4.5:1 on both backgrounds), `--text-success: #00ffcc`, `--text-error: #ff4d6d`, `--border-default: rgba(0,255,204,0.15)`, `--border-success: #00ffcc`, `--border-error: #ff4d6d`. Extended accents: `--accent-purple: #8b00ff`, `--accent-blue: #0066ff`.
* **Contrast pairing:** dark surfaces pair with light text only. The only light fills permitted (e.g., the cyan primary button) must pair with `--bg-primary` text (`#0a0f1c` on `#00ffcc`). Magenta (`#ff00aa`, ≈5.3:1 on deep navy) is reserved for accents, badges, and large display text — never small body copy.
* **Radius/Shadows:** `--radius-sm: 6px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm`, `--shadow-md` (neon-tinted).
* **Spacing/Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 200ms`, `--transition-normal: 200ms` (spec-mandated), `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation:** `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`. The sticky header and mobile nav must use `--z-dropdown`.
* **Fonts:** `--font-display: 'Clash Display'`, `--font-base: 'Satoshi'`.

**1.3 Mandatory Dark Mode — Dark-Only Exception**
Dark mode is mandatory and natively satisfied: this theme ships **dark-only** (Light: ✗ No / Dark: ✓ Full). Define the full dark palette as the default and only theme in `:root` with `color-scheme: dark`. **Exception:** per the explicit theme specification, no light-mode variant, no theme toggle, and no `localStorage` persistence logic are required for this build.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (e.g., stretched card columns).
* Mobile-first: multi-column rows (features, steps, pricing, footer columns) collapse to a single column below ~768px via `flex-wrap`/`flex-basis`. No horizontal scrolling at any viewport; apply `overflow: hidden` to particle/glow containers.

**1.5 Framework Default — Tailwind CSS**
Use Tailwind CSS (Play CDN acceptable) for layout utilities only (flex, gap, padding, responsive variants). Every visual decision lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.neon-text`, `.neon-box`, `.grid-bg`, `.particle`) bound to CSS variables — utilities must never hardcode hex values.

**1.6 Typography & Icons**
* **Text:** Clash Display (headings) and Satoshi (body) are explicitly mandated by the theme spec — load both via the Fontshare CDN as the **sole permitted exception** to the Google Fonts rule, with generic sans-serif fallbacks. Any additional or fallback text face must come from Google Fonts.
* **Icons:** Google Material Symbols (Rounded) exclusively, loaded via the Google Fonts CDN with ligature markup. Raw inline SVGs, emoji icons, and local icon files are **forbidden**.

**1.7 Canonical Neon Effect Recipes (implement exactly, colors bound to variables)**
* `.neon-text { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary); }` plus a `.neon-text--magenta` variant using `var(--secondary)`.
* `.neon-box { box-shadow: 0 0 15px rgba(0,255,204,0.3), inset 0 0 15px rgba(0,255,204,0.1); }`
* `.grid-bg { background-image: linear-gradient(rgba(0,255,204,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,204,0.05) 1px, transparent 1px); background-size: 40px 40px; }`
* `.particle { position: absolute; width: 2px; height: 2px; background: var(--primary); border-radius: 50%; animation: float 6s infinite; }` — particles are **CSS-only**; no canvas, no JS particle libraries.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** — all states via CSS classes; flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`); minimum 44×44px touch target:
* `.btn--primary`: cyan fill, deep-navy text, `--glow-cyan-soft`; hover brightens the glow; `:focus-visible` shows a distinct 2px offset outline ring (magenta or white); `:active` applies `transform: scale(0.97)`.
* `.btn--ghost`: transparent, 1px cyan border, cyan text; hover fills with neon glow.
* `.btn--danger`: `#ff4d6d` treatment, visually distinct from brand magenta.
* `.btn--loading`: CSS border-ring spinner in cyan that does not change button dimensions; disables pointer events to prevent double-clicks.
* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* Success/Error: temporary feedback classes driven by `--text-success` / `--text-error`.

**2.2 Card Component Requirements** (`.card` — features, testimonials, pricing):
* Default: `--bg-secondary` surface, 1px `--border-default`, `--radius-lg`, subtle inner glow.
* Hover: `transform: translateY(-2px)` plus intensified neon border/glow.
* `:focus-within`: border highlights when a child link/button receives focus.
* Define `.card--skeleton` (shimmer animation, stable dimensions) and `.card--empty` (Material icon + guidance text) so the states exist even if unused.

**2.3 Form & Input Requirements** (Final CTA email capture):
* `.input-group` flex container wrapping a `<label>`, `<input type="email">`, and a dedicated error `<p>` wired to `aria-live="polite"`.
* States: empty, focused (cyan ring glow), filled, valid (cyan border + check icon), invalid (`--border-error`, red text, error icon), disabled, read-only.

**2.4 FAQ Accordion Requirements:**
* `<details>/<summary>` or button + region with `aria-expanded`/`aria-controls`; fully keyboard operable; smooth 200ms expand animation; rotating chevron Material icon; neon `:focus-visible` ring; state never communicated by color alone.

**2.5 Modal / Popup Requirements (apply only if a dialog is implemented):**
* Opening/Open/Closing states animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material icon close button; keyboard focus trapping; closes via `Esc` or overlay click; layered at `--z-modal`.

**2.6 Section-by-Section Build Specification:**
* **Sticky Nav:** deep-navy translucent bar with backdrop blur, logo in Clash Display (glow on hover), anchor links, `.btn--primary` CTA, accessible hamburger (Material `menu`) disclosure for mobile at `--z-dropdown`.
* **Hero:** `min-height: ~90vh`; layered CSS backgrounds — `.grid-bg` + 12–18 `.particle` dots (2px, cyan/magenta mix, varied position/delay/duration via `nth-child` only) + radial cyan/magenta glow orbs via pseudo-elements. H1 in Clash Display with `.neon-text` glow on the key word and a magenta-glow accent word; subhead in `--text-secondary`; dual CTAs (`.btn--primary` + `.btn--ghost`).
* **Features:** section header (cyan uppercase eyebrow, H2, subtitle) + 3 `.card` items (flex row → column on mobile), each with a Material icon in a neon-ringed circle (alternating cyan/magenta), H3, copy, and a "Learn more" link. Hover per 2.2.
* **How It Works:** 3 steps with oversized neon-glow numerals (01/02/03, Clash Display), connected by a cyan→magenta gradient line (horizontal on desktop, vertical on mobile), each with icon, title, description.
* **Testimonials:** 3 `.card` quotes with Material `format_quote` icon, star ratings (Material `star`, cyan), avatar as initials in a circle with a cyan→magenta gradient ring, name plus role in `--text-secondary`.
* **Pricing:** 3 `.card--pricing` tiers; middle tier `.card--featured`: elevated, stronger magenta glow, "Most Popular" badge (magenta pill with glow). Each tier: name, large Clash Display price, feature list with cyan Material `check` icons, CTA (featured: `.btn--primary`; others: `.btn--ghost`).
* **FAQ:** centered `max-width: ~48rem`, 5–6 items per 2.4.
* **Final CTA:** full-width band with `.grid-bg` + radial glow, H2 with `.neon-text`, supporting copy, `.input-group` email capture + `.btn--primary` wired in `script.js`: submit → loading spinner (~1s) → success state + `aria-live` announcement; invalid email → error state per 2.3.
* **Footer:** flex columns (brand + tagline; 2–3 secondary link groups; icon links with `aria-label`s), cyan→magenta gradient top hairline, bottom bar with copyright + Privacy/Terms links.

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.
* **Smooth animations:** every state transition uses 200ms with `--ease-standard`. Ambient loops only — `@keyframes float` (particle drift + opacity), `pulse` (neon glow intensity), `shimmer` (skeleton). Under `prefers-reduced-motion: reduce`, disable float/pulse/shimmer and minimize transitions.
* **Accessibility (a11y):** WCAG AA contrast throughout (cyan ≈14.7:1, white ≈18:1, magenta ≈5.3:1 — magenta for accents/large text only); never rely on color alone (glow + icon + text); semantic HTML5 landmarks (`header`/`nav`/`main`/`section`/`footer`); logical `h1→h3` hierarchy; skip-to-content link; full keyboard operability; visible `:focus-visible` rings on every interactive element; correct ARIA on the accordion and mobile nav; `aria-live` regions for all dynamic form feedback.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** `.btn--danger` must be visually distinct from brand magenta in this dark theme.

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and runnable. The HTML contains zero inline styles and exactly one deferred entry point (`<script src="script.js" defer>`); no other inline `<script>` blocks. `script.js` handles only: mobile nav disclosure, FAQ accordion enhancement (if not native `<details>`), and the CTA form's loading/success/error simulation — all via `addEventListener`, no inline handlers, no JS for particles.
* **Naming convention:** BEM for all custom classes (`.hero__title`, `.card--featured`, `.btn--primary`); Tailwind utilities permitted only for layout primitives; never mix in ad-hoc one-off class names.
* **Copy:** original English copy in a confident, techy voice with one consistent fictional product identity; no lorem ipsum and no unrequested placeholder content.