[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-107-Hacker-Aesthetic-CRTCLI":3},"# SYSTEM PROMPT — CODING AI: \"HACKER AESTHETIC CRT\u002FCLI\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page on the first attempt — no stubs, no TODOs.\n\n**Mission:** Build a single-page landing page in the **Hacker Aesthetic CRT\u002FCLI** theme (Output Category: Dark Tech & Cyber). Visual direction: hacker-style landing page, terminal UI, CRT monitor effect, green text on black, ASCII art, command-line interface, retro coding. Required sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.**\n\n**Style fingerprint:** Technical, nostalgic, cryptic; retro-tech era. Visual effects: ASCII art, pixel-art-flavored iconography, binary rain data streams, CRT phosphor glow, scanlines, digital noise. Signature motifs that must recur throughout: `border-left: 5px solid var(--primary)` on panels\u002Fquotes\u002Fsteps, and `text-shadow: 2px 2px 4px var(--glow)` on headings and prompts.\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:** Every design property, layout rule, and state lives in `style.css`, targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML remains clean, semantic, and styling-agnostic — retheming the site must require CSS edits only, never markup changes.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root`:\n\n| Token | Value | Role |\n|---|---|---|\n| `--bg-primary` | `#050505` | Page background |\n| `--bg-secondary` | `#111111` | Terminal panels, cards, modal, header |\n| `--primary` | `#2CFF56` | Phosphor green — brand, buttons, borders, glow |\n| `--secondary` | `#FFB200` | Amber accent — highlights, featured tier, focus rings |\n| `--text-primary` | `#2CFF56` | Primary text |\n| `--text-secondary` | `rgba(44,255,86,0.72)` | Dimmed phosphor text (verify ≥ 4.5:1) |\n| `--text-success` | `#2CFF56` | Success feedback |\n| `--text-error` | `#FF3333` | Error feedback |\n| `--text-cursor` | `#FFFFFF` | Blinking block cursor, highlights only — never a background |\n| `--border-default` | `rgba(44,255,86,0.35)` | Panel\u002Finput borders |\n| `--border-error` | `#FF3333` | Invalid-state borders |\n| `--border-success` | `#2CFF56` | Valid-state borders |\n| `--glow` \u002F `--glow-soft` | `#00FF00` \u002F `rgba(0,255,0,0.35)` | Phosphor text-shadow |\n| `--font-base` | `'VT323', monospace` | Primary typeface |\n| `--font-alt` | `'Share Tech Mono', monospace` | Optional dense body copy |\n| `--radius-sm \u002F --radius-md \u002F --radius-lg` | `2px \u002F 4px \u002F 6px` | Deliberately sharp, terminal-like |\n| `--shadow-sm \u002F --shadow-md` | green-tinted glow box-shadows | Elevation on black (grey drop shadows are invisible) |\n| `--spacing-gap` | `1.5rem` | Standard flex\u002Fgrid gap |\n| `--transition-fast \u002F --transition-normal` | `120ms \u002F 250ms` | State transitions |\n| `--ease-standard` | `cubic-bezier(0.4,0,0.2,1)` | `steps()` permitted for decorative animations only |\n| `--z-crt \u002F --z-dropdown \u002F --z-modal \u002F --z-toast` | `900 \u002F 1000 \u002F 2000 \u002F 3000` | Layering; CRT overlay sits above content, below interactive layers |\n\n* **Contrast Pairing:** Every background token pairs with an opposite-luminance text token — all backgrounds here are dark and must pair with light\u002Fgreen text; the primary button inverts the pairing (green `#2CFF56` background + dark `#050505` text). Never use `#FFFFFF` as a background; if any near-white surface were ever needed, use `#fefefe`, never `#ffffff`. Verify all text meets WCAG AA (≥ 4.5:1) against both `#050505` and `#111111`.\n\n### 1.3 Mandatory Dark Mode (Dark-Only Theme)\n* **Implementation:** The dark palette above is the `:root` default; mirror the same tokens under a `.dark` class and `@media (prefers-color-scheme: dark)` so the architecture is theme-switch ready without any HTML restructuring.\n* **Persistence & Toggle:** User preference persists via `localStorage`, first visit falls back to media queries, and a visible toggle with correct `aria-pressed`\u002F`aria-label` state is required.\n* **Exception (dark-only theme):** The style specification mandates dark-only (Light ✗ \u002F Dark ✓ Full) — do NOT build a light palette; the required visible toggle is fulfilled by an **FX toggle** (CRT effects ON\u002FOFF), persisted in `localStorage` with `aria-pressed`\u002F`aria-label`, falling back to `prefers-reduced-motion` on first visit.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox (Tailwind flex utilities).\n* **Default Alignment:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified.\n* **Mobile-Friendly First:** Rows collapse to columns at breakpoints; fluid sizing throughout; **zero horizontal scrolling at any viewport ≥ 320px** — size ASCII art with viewport-relative font sizes so `\u003Cpre>` blocks never overflow.\n\n### 1.5 Framework: Tailwind CSS + Custom Theme Layer\n* Load Tailwind CSS (Play CDN) for layout, spacing, and responsive utilities only.\n* All colors, effects, and component states live in `style.css` as custom classes bound to `var(--...)` — never hardcode hex values in utilities or markup.\n* **Naming:** BEM for every custom component; Tailwind restricted to its fixed utility set for layout. Never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Google Fonts `\u003Clink>` for **VT323** (`--font-base`) and optionally **Share Tech Mono** (`--font-alt`) for dense body copy. VT323 renders small — keep base font-size ≥ 18–20px.\n* **Icons:** Google Material Symbols only (Sharp style for pixel-art flavor). Raw inline SVGs and local icon files are explicitly forbidden.\n* **ASCII Art:** Permitted and required as `\u003Cpre>` text content (it is typography, not iconography) — each ASCII block gets an `sr-only` accessible description and must scale without overflow. Pixel-art flavor is conveyed through ASCII art, blocky borders, stepped animations, and Sharp Material Symbols.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons — `.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`\n* **Default:** `display:flex; align-items:center; justify-content:center; gap:0.5rem;` minimum touch target 44×44px; terminal styling (bracketed labels via `::before\u002F::after` allowed).\n* **Hover:** brightness\u002Fglow shift with `cursor: pointer`.\n* **Focus:** distinct visible ring — `outline: 2px solid var(--secondary); outline-offset: 2px` (amber reads clearly on black).\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** blocks interaction and double-clicks, renders a CSS spinner (green ring) or animated Material Symbol without changing button dimensions, sets `aria-busy=\"true\"` via JS.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback classes driven by `--text-success`\u002F`--text-error`, always paired with an icon + text — never color alone.\n* Variants: primary = green background + dark text; ghost = transparent with green border\u002Ftext; danger = `#FF3333`, visually distinct in the dark theme.\n\n### 2.2 Cards — `.card`, `.card--terminal`, `.card--featured`\n* **Default:** flexible Flexbox layout, `var(--bg-secondary)` panel, 1px `var(--border-default)`, optional terminal title bar (`~\u002Fpath`), radius\u002Fshadow tokens.\n* **Hover:** `transform: translateY(-2px)` plus intensified glow shadow.\n* **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.skeleton` shimmer keyframes defined in CSS with reserved dimensions (no layout jumps); may be used for a brief boot sequence (≤ 600ms; instant content under reduced motion).\n* **Empty State:** `.card--empty` pattern — centered Material Symbol + short guidance text.\n\n### 2.3 Forms & Inputs — `.input-group`, `.input`, `.input--valid`, `.input--error`\n* **Structure:** flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error feedback element (`aria-live=\"polite\"`, wired via `aria-describedby`).\n* **States:** empty; focused (amber ring); filled; valid (success border + check icon); invalid (error border + icon + message); disabled; read-only.\n* Terminal styling: monospace, prompt prefix via CSS, caret color `var(--text-cursor)`.\n\n### 2.4 Modal — `.modal` (\"Request Access\" dialog opened by Hero and Pricing CTAs)\n* **States:** opening (CRT power-on: expand from a horizontal line; reduced-motion = simple fade), open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n* **UX:** centered flex container (`align-items: center`), backdrop `rgba(5,5,5,0.85)`, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, focus returns to the trigger. Layered at `var(--z-modal)`.\n\n### 2.5 FAQ Accordion\n* Each question is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`; panel has `role=\"region\"`; smooth height transition; Material Symbol chevron rotates on toggle; open\u002Fclosed state is never communicated by color alone. (Native `\u003Cdetails>\u002F\u003Csummary>` is acceptable if ARIA-equivalent.)\n\n## 3. CORE UX, MICRO-INTERACTION & THEME-EFFECT RULES\n\n### 3.1 Global UX\n* **Responsive by default:** fluid type and spacing, standard breakpoints, no horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables rain, flicker, shimmer, and typewriter effects (content renders in final state).\n* **Accessibility:** AA contrast for all text in the dark theme; semantic HTML5 elements; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading states, and dynamic feedback; visible focus everywhere.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** `.btn-danger` visually distinct in the dark theme.\n* **Toasts:** any dynamic notification uses a toast layered at `var(--z-toast)` with an `aria-live` region.\n\n### 3.2 CRT\u002FCLI Effects (CSS-first; all gated by the FX toggle + reduced motion)\n* **Scanlines:** fixed `body::after` overlay via `repeating-linear-gradient`, `pointer-events: none`, `var(--z-crt)`.\n* **Phosphor glow:** `text-shadow: 2px 2px 4px var(--glow)` on headings, prompts, and accents only — never on body paragraphs (use `--glow-soft` where subtlety is needed).\n* **CRT flicker:** subtle opacity keyframes on the overlay.\n* **Digital noise:** CSS-only animated gradient static — no external assets.\n* **Binary rain:** one `\u003Ccanvas aria-hidden=\"true\">` fixed behind the hero (`position: fixed; inset: 0` to avoid overflow), animated from `script.js` with 0\u002F1 glyphs in `var(--primary)` at low opacity; DPR-aware; pauses on `visibilitychange`; renders nothing (or a static dim grid) when FX is off or reduced motion is active.\n* **Typewriter headline:** the full `\u003Ch1>` text must remain in the accessibility tree (animate a visual layer, or use an `aria-hidden` animated span + `sr-only` full text); reduced motion shows the final text instantly.\n* **Blinking cursor:** CSS `steps()` animation using `var(--text-cursor)`.\n* **Terminal motifs:** `::selection` green-on-black inversion, themed scrollbar, `border-left: 5px solid var(--primary)` on steps\u002Fquotes\u002Fpanels.\n\n## 4. PAGE SECTIONS & CONTENT REQUIREMENTS\nAll user-facing copy in **English**, written in a CLI\u002Fhacker voice (`$ command`, \"ACCESS GRANTED\", \"Initialize\"). No lorem ipsum — write real themed copy; invent one consistent product\u002Fbrand name and reuse it throughout.\n\n### 4.0 Page Chrome\n* Skip-to-content link; slim sticky header (flex, `align-items: center`): ASCII\u002Ftext logo, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), and the FX toggle; condenses gracefully on mobile.\n\n### 4.1 Hero\n* Full-viewport terminal scene: ASCII-art brand banner (`\u003Cpre>` + `sr-only` description), typewriter command headline, subheadline, primary CTA (opens the Request Access modal) + ghost secondary CTA (anchors to Features), boot-log status lines, blinking block cursor, binary rain canvas behind, scanline overlay above.\n\n### 4.2 Features — 3 Cards\n* Terminal-window cards: title-bar path, Material Symbol icon, title, description; equal heights via flex; hover\u002Ffocus-within per 2.2; stack to a single column on mobile.\n\n### 4.3 How It Works — 3 Steps\n* Command-styled steps (`$ step-01 …`), numbered, `border-left` motif, CSS connector line or ASCII arrows between steps; vertical stack on mobile.\n\n### 4.4 Testimonials\n* 3 quotes styled as IRC\u002Fterminal chat logs; semantic `\u003Cfigure>\u002F\u003Cblockquote>\u002F\u003Cfigcaption>`; author handle + role; Material Symbol avatar in a pixel-style frame; grid → column on mobile.\n\n### 4.5 Pricing — 3 Tiers\n* Terminal panels; middle tier `.card--featured` with `var(--secondary)` amber accents + \"RECOMMENDED\" badge; price + billing period; feature lists with Material Symbol checks (never color-only); each CTA opens the Request Access modal; stack on mobile.\n\n### 4.6 FAQ\n* 5–6 accordion items per 2.5, questions styled as shell prompts.\n\n### 4.7 Final CTA\n* Large prompt panel: headline, email capture form per 2.3 with inline validation (valid\u002Finvalid feedback + `aria-live`), submit button exercising loading → success (\"ACCESS GRANTED\") \u002F error states.\n\n### 4.8 Footer\n* Secondary links (Docs, Source\u002FGitHub, Community\u002FX, Privacy, Terms, Status) styled as a directory\u002F`man`-page listing; Material Symbol social icons with `aria-label`s; copyright line; small status line (version\u002Fuptime flavor). All links keyboard focusable with visible focus.\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n* **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` code blocks — only external references in the head\u002Fbody: Google Fonts, Material Symbols, Tailwind CDN, and a single `\u003Cscript src=\"script.js\" defer>`.\n* **Naming Convention:** BEM consistently (`.block__element--modifier`); Tailwind only for layout utilities; never mix conventions.\n* **JS Scope (`script.js` only):** FX persistence (`localStorage`), binary rain canvas, typewriter, accordion, modal (open\u002Fclose\u002Ffocus trap), form validation feedback, smooth anchor scrolling — all unobtrusive, keyboard-safe, and reduced-motion aware.\n* **No Unrequested Placeholders:** real themed English copy everywhere; placeholders only where content was genuinely unspecified (e.g., the invented brand name).\n* **First-Attempt Completeness:** the page must render fully functional — all sections, states, and effects working with no stubs.\n",1791954981684]