[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-431-Dark-Mode-OLED":3},"# Landing Page Build Prompt — \"Dark Mode (OLED)\" Theme\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Follow every rule below exactly. Do not ask clarifying questions.\n\n**Theme:** Dark Mode (OLED) — Dark, High-Contrast, Eye-Friendly, Power-Efficient. 2020s Modern. Dark mode only (no light mode toggle — see exception clause in 1.3).\n\n**Sections Required (in order):** 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- Keep all styling strictly inside `style.css`. **No `style=\"...\"` attributes anywhere in the HTML.**\n- Target everything via class or ID selectors only.\n- HTML must remain semantic and agnostic of visual styling.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root`:\n- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **OLED palette mapping:** `--bg-primary: #000000`, `--bg-secondary: #121212`, midnight blue `#0A0E27` for section alternation\u002Fdepth. Text: `--text-primary: #FFFFFF`, `--text-secondary: #E0E0E0`. Vibrant accents: Neon Green `#39FF14`, Electric Blue `#0080FF`, Gold `#FFD700`, Plasma Purple `#BF00FF` — assign one accent per section type (e.g., green for success\u002FCTA, blue for links, gold for pricing highlight, purple for testimonials) so the page feels cohesive, not rainbow-noise.\n- **Contrast pairing:** Dark backgrounds always pair with light text tokens. Verify WCAG AA contrast for all text.\n- **Radius\u002FShadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n- **Spacing\u002FTransitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n- Set `color-scheme: dark` on `:root`.\n\n### 1.3 Dark Mode — Exception Clause\nThis project is **dark-only by explicit user request**. Do NOT build a light theme, a `.dark` class, or a theme toggle. However, still define all colors via CSS variables (never hardcode hex values in component rules) so a theme could be added later. Skip the `localStorage` theme-persistence requirement — it does not apply.\n\n### 1.4 Flexbox Layout & Mobile-First\n- Build all layouts with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n- Mobile-first: card grids (Features, Pricing, Testimonials) stack in a single column on small viewports and expand to 3-column rows via `flex-wrap` and media queries. No horizontal scrolling at any viewport width.\n\n### 1.5 Framework Default\nUse clean custom CSS in `style.css` organized with logical comment sections (tokens, base, layout, components, sections, responsive). All component styles must use reusable class names (`.btn`, `.card`, `.section`, `.container`). Do not use Tailwind unless it maps utilities back to the CSS variables above.\n\n### 1.6 Typography & Icons\n- **Fonts:** Google Fonts — use **Inter** (headings and body) via `\u003Clink>` tag; bind to `--font-base`.\n- **Icons:** Google Material Symbols only, loaded via the official `\u003Clink>`. **No inline SVGs, no local icon files.**\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n### 2.1 Buttons\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum 44x44px touch target. Primary CTA uses the neon green accent with black text (high contrast on OLED).\n- **Hover:** Subtle brightness\u002Fglow shift (`text-shadow: 0 0 10px` accent color used sparingly) with `cursor: pointer`.\n- **Focus:** Distinct visible focus ring (2px accent outline with offset) — mandatory for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** Disables interaction, shows a CSS spinner or animated Google Icon without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** Feedback states using `--text-success` \u002F `--text-error`.\n- **Danger variant:** `.btn-danger` must be visually distinct (red border\u002Ftext on dark).\n\n### 2.2 Cards (Features, Pricing, Testimonials)\n- **Default:** Flexbox layout, `--bg-secondary: #121212` background, subtle `--border-default` border, `--radius-lg`, `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` with shadow\u002Fglow shift.\n- **Focus-within:** Border highlights when a child link\u002Fbutton receives focus.\n- **Skeleton:** Define shimmer animation CSS (even if unused on a static page, include the class).\n- **Empty state:** Define a fallback layout class with a Google Icon and guidance text.\n- **Pricing highlight:** The middle tier gets a distinct treatment — gold accent border, \"Most Popular\" badge, slightly elevated shadow.\n\n### 2.3 Forms & Inputs (FAQ search or Final CTA email capture, if included)\n- **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, error text, error icon), Disabled, Read-only.\n- **Structure:** Flex container wrapping label, input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n### 2.4 Modals \u002F FAQ Accordions\n- FAQ items: use `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom accordion with keyboard operability, animated open\u002Fclose via CSS transitions, visible focus on the toggle, and a rotating chevron Google Icon.\n- If any modal exists: centered flex container, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click closing, animated opening\u002Fclosing states.\n\n---\n\n## 3. UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** Fluid sizing, no horizontal overflow, breakpoints at ~480px, ~768px, ~1024px.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes. Respect `prefers-reduced-motion: reduce` by disabling transforms and glow animations.\n- **Accessibility:** WCAG AA contrast in all text. Never rely on color alone to communicate state. Semantic HTML5 (`header`, `main`, `section`, `nav`, `footer`, `h1`–`h3` hierarchy), ARIA labels on custom widgets, logical focus order, full keyboard operability, `aria-live` regions for dynamic feedback.\n- **Visual feedback:** Every interactive element (buttons, links, FAQ toggles, pricing buttons) shows a visible state change on hover\u002Ffocus\u002Factive.\n- **Glow discipline:** `text-shadow: 0 0 10px \u003Caccent>` used sparingly — hero headline accent word, primary CTA hover, and pricing badge only. Body text stays glow-free for eye comfort and OLED power efficiency.\n- **OLED optimization:** True black `#000000` for the main background (maximizes power savings on OLED panels), `#121212` for elevated surfaces, `#0A0E27` for section depth alternation. Avoid large low-contrast grey-on-grey areas.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — fully separated. No inline `\u003Cscript>` beyond one deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference. No inline styles.\n- **Naming:** BEM convention consistently (`.card`, `.card__title`, `.card--featured`, `.pricing__tier`, `.faq__item`). Never mix conventions.\n- **Copy:** Write all user-facing copy in **English**. No lorem ipsum — write real, theme-appropriate marketing copy for a dark-mode\u002FOLED-optimized product (e.g., an app or service whose brand identity is \"built for the night\"). Each section needs a real headline and supporting copy.\n- **Content requirements:**\n  - **Hero:** Headline with one glow-accented word, subheadline, primary CTA + secondary CTA.\n  - **Features:** 3 cards, each with a Material Symbol icon, title, and description.\n  - **How It Works:** 3 numbered steps with connecting visual flow.\n  - **Testimonials:** 3 quotes with names\u002Froles.\n  - **Pricing:** 3 tiers (Free, Pro\u002Ffeatured, Team) with feature lists and buttons.\n  - **FAQ:** 5–6 accordion items.\n  - **Final CTA:** Full-width dark section with strong headline and button.\n  - **Footer:** Brand, secondary link columns, social links (Material Symbol icons), copyright.\n- **JS scope:** Only minimal, progressive-enhancement JS (e.g., FAQ accordion behavior, smooth scroll, current-year in footer). No frameworks, no build tools.\n",1791954986842]