Cyberdeck // Night City demo
Cyberdeck // Night City

A cyberpunk-inspired dark interface with neon accents, terminal-style elements, and animated glitch effects evoking a futuristic night city.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 11.5 KB · 1550 words
# BUILD SPECIFICATION — LANDING PAGE: "CYBERDECK // NIGHT CITY"

**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build a complete, production-quality landing page on the first attempt. No follow-up questions — deliver the full implementation.

**Project Definition:**
- **Style Name:** CYBERDECK // NIGHT CITY
- **Type:** Cyberpunk — 2020s Contemporary
- **Keywords:** cyberdeck, terminal, cyberpunk, animated, gradient
- **Default Mode:** Light (per style spec) — **however, full Dark Mode support remains mandatory** (see Rule 1.3).
- **Palette:** `#050607` (near-black), `#33ff66` (neon green), `#1d3a24` (dark green), `#2b8f4b`, `#1d5c33`, `#aaffcc` (light mint)
- **Effects:** Glow, Neumorphism, Gradients, Hover Effects
- **Required CSS Techniques:** Flexbox, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius

**Required Sections (in DOM order):** Sticky Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing the CSS file.

### 1.2 CSS Variables & Theme Tokens
Store all visual tokens in `:root` (light default) and override in `.dark` / `@media (prefers-color-scheme: dark)`:

- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Light Mode (default):** Do NOT use pure white. Set `--bg-primary` to a pale cyberpunk mint (e.g., `#e9f7ee`), `--bg-secondary` to `#fefefe` for card surfaces, `--text-primary: #050607`, `--text-secondary: #1d3a24`. Reserve `#33ff66` for glows, borders, gradients, and large decorative elements — for body-size text and links on light backgrounds, use `#1d5c33` or `#2b8f4b` to maintain ≥ 4.5:1 contrast.
- **Dark Mode:** `--bg-primary: #050607`, `--bg-secondary: #0d1a12` (or a `#1d3a24`-derived surface), `--text-primary: #fefefe`, `--text-secondary: #aaffcc`, neon `#33ff66` accents with glow.
- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in both themes.
- **Error/Success:** `--text-error` / `--border-error` must be a cyberpunk red (e.g., `#ff3b5c`) adjusted for ≥ 4.5:1 contrast on both themes; `--text-success` / `--border-success` based on `#2b8f4b` (light) / `#33ff66` (dark).
- **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, plus cyberpunk tokens `--glow-sm` and `--glow-md` (box-shadows built from `rgba(51,255,102,…)`).
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- **Elevation/Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts (nav, modal, any toast).
- **Typography Tokens:** `--font-display` (terminal-style font) and `--font-base` (body font).

### 1.3 Mandatory Dark Mode Support
- **Implementation:** Define dark mode tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.
- **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring.
- **Persistence:** Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header using Google Icons (`light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` state.
- **Note:** Light is the default presentation per the style spec; Dark Mode support is still fully required.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structures with **Flexbox** (`display: flex` / Tailwind flex utilities).
- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- **Mobile-Friendly First:** All flex layouts must be responsive out of the box — rows convert to columns on smaller viewports. No horizontal scrolling at any breakpoint.

### 1.5 Framework Default & Tailwind CSS Integration
- Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`). All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.nav`, `.pricing-card`, `.faq-item`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Load via Google Fonts `<link>`: **"Share Tech Mono"** (or "JetBrains Mono") bound to `--font-display` for headings, terminal elements, and code-style copy; **"Inter"** (or "Space Grotesk") bound to `--font-base` for body text.
- **Icons:** Use Google Material Symbols exclusively (e.g., `terminal`, `bolt`, `shield`, `memory`, `rocket_launch`, `check_circle`, `close`, `expand_more`). Raw inline SVGs and local icon files are forbidden.
- **No external images:** Avatars must be CSS-styled initial monograms; all decoration comes from gradients, glows, and Material Symbols.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements
Style all states via CSS classes:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (neon green gradient + `--glow-md`), `.btn--ghost` (terminal-style outlined, monospace label), `.btn--danger` (visually distinct in both themes).
- **Hover:** Brightness/glow intensification with `cursor: pointer`.
- **Focus:** Distinct focus ring using CSS variables (`outline` / `box-shadow`) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading:** Disables interactions, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error`.

### 2.2 Card Component Requirements
Apply to Features cards, Testimonial cards, and Pricing tiers:
- **Default:** Flexible Flexbox layout, `--bg-secondary` surface, subtle `--border-default` border, elevation via `--shadow-sm`.
- **Neumorphism:** In light mode, use soft dual box-shadows (dark `#050607`-tinted + light `#aaffcc`-tinted) on the pale mint background; in dark mode, adapt to dark neumorphism with subtle shadows and a faint neon inner glow. Never sacrifice text contrast for the effect.
- **Hover:** `transform: translateY(-2px)` plus glow/shadow shift.
- **Focus-within:** Card borders highlight when a child link/button receives focus.
- **Loading (Skeleton):** Shimmer animation defined purely in CSS to prevent layout jumps.
- **Empty State:** Structured fallback with a Google Icon and clear guidance text.
- **Pricing specifics:** 3 tiers with cyberpunk-appropriate names; the middle tier is visually elevated (glow border, `--glow-md`, "Most Popular" badge) and its CTA uses `.btn--primary`.

### 2.3 Form & Input Requirements
Include a newsletter/email capture in the Final CTA (and/or Footer):
- **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, red text, error icon), Disabled, Read-only.
- **Structure:** Flex container wrapping a label, input field, and a dedicated error feedback container announced via `aria-live="polite"`.

### 2.4 Modal / Popup Requirements
Implement an accessible modal (e.g., "Watch Demo" or plan details triggered from Hero/Pricing CTAs):
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
- **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Google Icon (`close`) button, keyboard focus trapping, close via `Esc` and overlay clicks, correct ARIA roles (`dialog`, `aria-modal`, `aria-labelledby`).

### 2.5 Section Blueprint
- **Header:** Logo (Material Symbol `terminal` + wordmark in `--font-display`), anchor nav links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, CTA button. Collapses to a hamburger menu on mobile with `aria-expanded` and animated open/close.
- **Hero:** Eyebrow badge ("SYSTEM ONLINE" style), H1 with glitch-on-hover text-shadow effect, subheadline, primary + ghost CTAs, and a terminal window mockup (mac-style dots, monospace) with a CSS/JS typing animation cycling cyberdeck boot lines. Background: animated neon gradient (keyframed gradient position) + subtle scanline overlay pseudo-element.
- **Features:** 3 cards with Material Symbol icons (speed, security, power), title, description.
- **How It Works:** 3 numbered steps (01/02/03) with icons, visually connected, stacked vertically on mobile.
- **Testimonials:** 3 cards with quote, CSS monogram avatar, name + role/handle.
- **FAQ:** Accessible accordion — 5–6 items, each a `<button>` with `aria-expanded`, chevron icon rotation, height/opacity transition for expand/collapse, full keyboard operability.
- **Final CTA:** Full-width band with gradient + glow, headline, primary CTA, email input group (per 2.3).
- **Footer:** Brand block, secondary link columns (Product, Company, Resources, Legal), social icons (Material Symbols), copyright line.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes. All keyframe animations (typing, scanlines, gradient drift, glitch, pulsing glow) must be disabled or reduced under `prefers-reduced-motion` — typing effects must render the full text instantly instead.
- **Accessibility (a11y):** Sufficient contrast in both Light and Dark modes. Never rely solely on color to communicate state (pair color with icons/text). Semantic HTML5 elements, correct ARIA roles/labels on custom widgets (nav, accordion, modal, toggle), logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading states).
- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
- **Animation Restraint:** Animated gradients and glows must remain subtle enough to preserve text readability; glitch effects trigger on hover/focus only, never continuously.
- **Destructive Actions:** `.btn--danger` and any delete-style action must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference. No inline CSS.
- **Naming Convention:** BEM (`block__element--modifier`) consistently across HTML, CSS, and JS hooks — never mix conventions.
- **JavaScript Scope:** Theme toggle + `localStorage` persistence, mobile nav, FAQ accordion, modal open/close + focus trap, IntersectionObserver scroll-reveal (adding CSS classes only), form validation states, typing animation. All ARIA states kept in sync.
- **Copy:** Write all user-facing copy in **English** — real, on-theme product copy for a fictional cyberdeck/terminal product. Lorem-ipsum-only submissions are prohibited; placeholders are allowed only where content was genuinely unspecified.
- **Self-Contained:** No external images, no inline SVGs, no local icon/font files — Google Fonts and Google Material Symbols only.