[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-696-CYBERDECK-NIGHT-CITY":3},"# BUILD SPECIFICATION — LANDING PAGE: \"CYBERDECK \u002F\u002F NIGHT CITY\"\n\n**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.\n\n**Project Definition:**\n- **Style Name:** CYBERDECK \u002F\u002F NIGHT CITY\n- **Type:** Cyberpunk — 2020s Contemporary\n- **Keywords:** cyberdeck, terminal, cyberpunk, animated, gradient\n- **Default Mode:** Light (per style spec) — **however, full Dark Mode support remains mandatory** (see Rule 1.3).\n- **Palette:** `#050607` (near-black), `#33ff66` (neon green), `#1d3a24` (dark green), `#2b8f4b`, `#1d5c33`, `#aaffcc` (light mint)\n- **Effects:** Glow, Neumorphism, Gradients, Hover Effects\n- **Required CSS Techniques:** Flexbox, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius\n\n**Required Sections (in DOM order):** Sticky Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root` (light default) and override in `.dark` \u002F `@media (prefers-color-scheme: dark)`:\n\n- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **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.\n- **Dark Mode:** `--bg-primary: #050607`, `--bg-secondary: #0d1a12` (or a `#1d3a24`-derived surface), `--text-primary: #fefefe`, `--text-secondary: #aaffcc`, neon `#33ff66` accents with glow.\n- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in both themes.\n- **Error\u002FSuccess:** `--text-error` \u002F `--border-error` must be a cyberpunk red (e.g., `#ff3b5c`) adjusted for ≥ 4.5:1 contrast on both themes; `--text-success` \u002F `--border-success` based on `#2b8f4b` (light) \u002F `#33ff66` (dark).\n- **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,…)`).\n- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n- **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts (nav, modal, any toast).\n- **Typography Tokens:** `--font-display` (terminal-style font) and `--font-base` (body font).\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Define dark mode tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.\n- **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring.\n- **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` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` state.\n- **Note:** Light is the default presentation per the style spec; Dark Mode support is still fully required.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **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.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use Tailwind CSS (or clean custom CSS driven by `@layer` \u002F `@apply`). All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.nav`, `.pricing-card`, `.faq-item`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load via Google Fonts `\u003Clink>`: **\"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.\n- **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.\n- **No external images:** Avatars must be CSS-styled initial monograms; all decoration comes from gradients, glows, and Material Symbols.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes:\n- **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).\n- **Hover:** Brightness\u002Fglow intensification with `cursor: pointer`.\n- **Focus:** Distinct focus ring using CSS variables (`outline` \u002F `box-shadow`) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading:** Disables interactions, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n### 2.2 Card Component Requirements\nApply to Features cards, Testimonial cards, and Pricing tiers:\n- **Default:** Flexible Flexbox layout, `--bg-secondary` surface, subtle `--border-default` border, elevation via `--shadow-sm`.\n- **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.\n- **Hover:** `transform: translateY(-2px)` plus glow\u002Fshadow shift.\n- **Focus-within:** Card borders highlight when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Shimmer animation defined purely in CSS to prevent layout jumps.\n- **Empty State:** Structured fallback with a Google Icon and clear guidance text.\n- **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`.\n\n### 2.3 Form & Input Requirements\nInclude a newsletter\u002Femail capture in the Final CTA (and\u002For Footer):\n- **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, red text, error icon), Disabled, Read-only.\n- **Structure:** Flex container wrapping a label, input field, and a dedicated error feedback container announced via `aria-live=\"polite\"`.\n\n### 2.4 Modal \u002F Popup Requirements\nImplement an accessible modal (e.g., \"Watch Demo\" or plan details triggered from Hero\u002FPricing CTAs):\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **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`).\n\n### 2.5 Section Blueprint\n- **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\u002Fclose.\n- **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\u002FJS typing animation cycling cyberdeck boot lines. Background: animated neon gradient (keyframed gradient position) + subtle scanline overlay pseudo-element.\n- **Features:** 3 cards with Material Symbol icons (speed, security, power), title, description.\n- **How It Works:** 3 numbered steps (01\u002F02\u002F03) with icons, visually connected, stacked vertically on mobile.\n- **Testimonials:** 3 cards with quote, CSS monogram avatar, name + role\u002Fhandle.\n- **FAQ:** Accessible accordion — 5–6 items, each a `\u003Cbutton>` with `aria-expanded`, chevron icon rotation, height\u002Fopacity transition for expand\u002Fcollapse, full keyboard operability.\n- **Final CTA:** Full-width band with gradient + glow, headline, primary CTA, email input group (per 2.3).\n- **Footer:** Brand block, secondary link columns (Product, Company, Resources, Legal), social icons (Material Symbols), copyright line.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow.\n- **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.\n- **Accessibility (a11y):** Sufficient contrast in both Light and Dark modes. Never rely solely on color to communicate state (pair color with icons\u002Ftext). Semantic HTML5 elements, correct ARIA roles\u002Flabels on custom widgets (nav, accordion, modal, toggle), logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading states).\n- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n- **Animation Restraint:** Animated gradients and glows must remain subtle enough to preserve text readability; glitch effects trigger on hover\u002Ffocus only, never continuously.\n- **Destructive Actions:** `.btn--danger` and any delete-style action must be visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline CSS.\n- **Naming Convention:** BEM (`block__element--modifier`) consistently across HTML, CSS, and JS hooks — never mix conventions.\n- **JavaScript Scope:** Theme toggle + `localStorage` persistence, mobile nav, FAQ accordion, modal open\u002Fclose + focus trap, IntersectionObserver scroll-reveal (adding CSS classes only), form validation states, typing animation. All ARIA states kept in sync.\n- **Copy:** Write all user-facing copy in **English** — real, on-theme product copy for a fictional cyberdeck\u002Fterminal product. Lorem-ipsum-only submissions are prohibited; placeholders are allowed only where content was genuinely unspecified.\n- **Self-Contained:** No external images, no inline SVGs, no local icon\u002Ffont files — Google Fonts and Google Material Symbols only.\n",1791954991272]