[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-814-Android-Holo":3},"# BUILD PROMPT — \"ANDROID HOLO\" LANDING PAGE (Single-Shot, Production-Ready)\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the **first attempt** — production-ready, no follow-up questions, no TODOs, no stubs.\n\n**Deliverable:** A complete landing page themed **Android Holo** (Era: 2011–2014 — pre-Material Android: Honeycomb UI, Ice Cream Sandwich UI, Jelly Bean stock UI, Google Now on Jelly Bean, Holo Light\u002FDark system themes).\n\n**Design Signature (non-negotiable):** Near-black backgrounds, minimal flat chrome, a **single glowing cyan\u002Fholo-blue accent** used for every interactive highlight, thin geometric condensed sans type with uppercase labels, and **glow (never drop shadow) as the substitute for elevation**.\n\n**Sections to build:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Reference specification:** `references\u002F00-flagship-implementation-specs\u002Fandroid-holo.md` — the tokens below are authoritative if the file is unavailable.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* Keep **all** styling in a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* Target all design properties, layout rules, and states exclusively via **class or ID selectors**.\n* HTML must remain clean, semantic, and style-agnostic: re-theming the site requires editing only `style.css`, never the markup. JS may only toggle state classes\u002FARIA attributes — never write inline styles from JS.\n\n**1.2 CSS Variables & Theme Tokens**\nStart `style.css` with this authoritative token block, verbatim:\n\n```css\n\u002F* Android Holo — design tokens *\u002F\n\u002F* 2011–2014 | Pre-Material Android: near-black chrome, single glowing cyan accent *\u002F\n:root {\n  \u002F* color *\u002F\n  --color-bg: #000000;\n  --color-surface: #0c0f10;\n  --color-surface-2: #171b1c;\n  --color-text: #e8f7fa;\n  --color-text-muted: #8a9a9d;\n  --color-primary: #33b5e5;\n  --color-primary-bright: #8fdce8;\n  --color-divider: #2a2f30;\n  --color-danger: #ff4444;\n  \u002F* radius *\u002F\n  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px; --radius-pill: 999px;\n  \u002F* shadow (glow substitutes for elevation) *\u002F\n  --shadow-glow: 0 0 8px rgba(51,181,229,0.55), 0 0 1px rgba(51,181,229,0.9);\n  --shadow-glow-strong: 0 0 16px rgba(51,181,229,0.75), 0 0 2px rgba(143,220,232,0.9);\n  \u002F* blur *\u002F\n  --blur-none: 0px;\n  \u002F* font *\u002F\n  --font-sans: 'Roboto Condensed', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;\n  --font-display: 'Roboto Condensed', 'Droid Sans', sans-serif;\n  --font-mono: 'Droid Sans Mono', ui-monospace, monospace;\n  \u002F* text scale *\u002F\n  --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem;\n  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.75rem; --text-5xl: 3.5rem;\n  \u002F* space *\u002F\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  \u002F* ease *\u002F\n  --ease-standard: linear;\n  \u002F* extra: holo underline + focus glow *\u002F\n  --holo-underline: linear-gradient(90deg, transparent, var(--color-primary), transparent);\n  --bg-image: none;\n}\n```\n\nThen extend `:root` with these **mandatory** semantic tokens (aliases into the Holo palette). All styling must consume tokens — no raw hex values outside `:root`\u002Ftheme scopes:\n\n```css\n:root {\n  --color-success: #99cc00;             \u002F* Holo green *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-primary-bright);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --text-success: var(--color-success);\n  --text-error: var(--color-danger);\n  --border-default: var(--color-divider);\n  --border-error: var(--color-danger);\n  --border-success: var(--color-success);\n  \u002F* layout & motion *\u002F\n  --spacing-gap: var(--space-4);\n  --transition-fast: 0.1s;\n  --transition-normal: 0.2s;\n  \u002F* elevation-by-glow mapping (exception: no drop shadows anywhere) *\u002F\n  --shadow-sm: 0 0 1px rgba(51,181,229,0.35);\n  --shadow-md: var(--shadow-glow);\n  \u002F* stacking *\u002F\n  --z-nav: 90; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n}\n```\n\n* **Contrast pairing:** every dark background token pairs with a light text token and every light background token pairs with a dark text token — enforced in **every** theme, not just the default.\n* **Light-mode background:** never pure white. Holo Light uses a light-gray page background (`#f3f3f3`) with `#fefefe` surfaces where near-white is required.\n* **Elevation exception clause:** Holo expresses elevation through **glow**, never drop shadows. Do not write `box-shadow` rules with y-offsets; all elevation maps to `--shadow-glow` \u002F `--shadow-glow-strong`.\n* **Timing exception clause:** `--ease-standard: linear` is era-authentic and must be kept. All state transitions use `transition: \u003Cproperty> var(--transition-fast | var(--transition-normal)) var(--ease-standard)` with short durations so motion stays crisp.\n\n**1.3 Mandatory Dark & Light Mode Support**\nThe source specification does not declare modes; therefore you must **implement and validate BOTH light and dark modes before publishing**.\n* **Holo Dark is the base\u002Fdefault theme** — the `:root` block above defines it (near-black chrome, glowing cyan).\n* **Holo Light overrides** must be defined both under `@media (prefers-color-scheme: light)` and a `.theme-light` class (or `[data-theme=\"light\"]`) so switching never requires HTML restructuring — only token swaps. Because the flagship theme is dark-first, the media-query\u002Fclass pair applies the **light** palette while dark remains the base:\n\n```css\n\u002F* Holo Light — token overrides *\u002F\n--color-bg: #f3f3f3;\n--color-surface: #fefefe;\n--color-surface-2: #e5e5e5;\n--color-text: #171b1c;\n--color-text-muted: #5f6b6d;    \u002F* darkened for ≥4.5:1 on light surfaces *\u002F\n--color-primary: #0077aa;       \u002F* darkened holo blue — passes 4.5:1 as text, 3:1 as border *\u002F\n--color-primary-bright: #005f82;\u002F* hover\u002Femphasis darkens on light backgrounds *\u002F\n--color-divider: #d1d1d1;       \u002F* authentic Holo Light divider *\u002F\n--color-danger: #cc0000;        \u002F* darkened for text contrast *\u002F\n--color-success: #4d7c0f;\n--shadow-glow: 0 0 8px rgba(0,119,170,0.35), 0 0 1px rgba(0,119,170,0.6);\n--shadow-glow-strong: 0 0 16px rgba(0,119,170,0.55), 0 0 2px rgba(0,119,170,0.8);\n```\n* **Theme switching:** a visible toggle in the nav (Google Material Symbol `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label`. Persist the user's choice via `localStorage`; fall back to `prefers-color-scheme` on first visit (light scheme → Holo Light; dark or no preference → Holo Dark, the signature look).\n* **No inline scripts are permitted**, so first paint is handled by the `prefers-color-scheme` media query; the single deferred `script.js` reconciles the stored preference as early as possible in its execution.\n* **Validation gate:** verify WCAG AA contrast for body text, muted text, and all accents-as-text in **both** themes before declaring the work complete.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structure with **Flexbox** (`display: flex`).\n* Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stacked text blocks inside feature cards may use `flex-start`).\n* Mobile-first: rows collapse to columns on small viewports; **zero horizontal scrolling at 320px**; fluid type via the `--text-*` scale; a centered max-width container (~1120px) for section content.\n\n**1.5 Styling Approach & Class Naming**\n* Use clean, hand-authored custom CSS driven by the tokens above (Tailwind is acceptable only if every utility maps back to these variables and to the reusable component classes).\n* Follow the theme's existing naming convention consistently: blocks (`.btn`, `.card`, `.input`, `.badge`, `.nav`) with `--modifier` variants (`.btn--primary`, `.card--featured`) and `__element` parts where needed (`.card__title`, `.input-group__label`). **Never mix conventions.**\n* Reproduce the reference base component classes exactly — `.nav`, `.btn` (with `:hover`, `:active`, `:focus-visible`, `[disabled]`), `.btn--primary`, `.card`, `.input` (with `::placeholder`, `:focus`), `.badge`, plus the `prefers-reduced-motion` guard — and extend them with the state rules in Section 2.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Roboto Condensed** (weights 300\u002F400\u002F700) from Google Fonts and bind it to `--font-sans`\u002F`--font-display` as the base typeface. For `--font-mono`, load **Roboto Mono** from Google Fonts (Droid Sans Mono is unavailable as a web font; keep it in the stack as a local fallback).\n* Load **Google Material Symbols (Outlined)** for every icon. **Raw inline SVGs and local icon files are forbidden.**\n* Apply uppercase treatment with letter-spacing (0.05em–0.1em) to: nav links, buttons, badges, card titles, section kickers, pricing tier names, and footer column headings. Body copy stays sentence case for readability.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* **Default:** flex layout (`align-items: center; justify-content: center; gap: 0.5rem`), uppercase condensed label, minimum touch target **44×44px**.\n* **Hover:** border-color → `--color-primary`, text → `--color-primary-bright`, `cursor: pointer`; primary variant intensifies to `--shadow-glow-strong`.\n* **Focus:** `:focus-visible` renders the **glow ring** (`box-shadow: var(--shadow-glow)`) as the focus indicator — verify it maintains ≥3:1 contrast against adjacent colors in both themes so the glow is a valid focus ring.\n* **Active\u002FPressed:** `background: rgba(51,181,229,0.12)` plus `transform: scale(0.97)` feedback.\n* **Loading:** state class or `aria-busy=\"true\"` — disables pointer events, prevents double-clicks\u002Fdouble submits, renders a **CSS-only spinner** (rotating cyan arc) or animated Material Symbol, sized to the text line so **button dimensions never change**.\n* **Disabled:** opacity 0.35, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary `.is-success` \u002F `.is-error` states driven by `--text-success` \u002F `--text-error`, always paired with a Material Symbol icon **and** text (never color alone), announced via an `aria-live` region.\n* **Danger:** define `.btn--danger` using `--color-danger` with a red glow — visually distinct in both light and dark themes.\n\n**2.2 Cards**\n* **Default:** `--color-surface` background, 1px `--border-default` hairline, `--radius-md` (2px), generous padding, flexible flex layout.\n* **Hover:** border-color → `--color-primary` with a soft glow; optional subtle `translateY(-2px)`. Never a drop shadow.\n* **Focus-within:** when any child link\u002Fbutton receives focus, the card border turns primary and glows (`.card:focus-within`).\n* **Loading (skeleton):** cyan-tinted shimmer animation over `--color-surface-2` blocks, pre-reserving exact layout space — no jumps.\n* **Empty state:** fallback layout with one large muted Material Symbol plus short guidance text.\n* **Required variants:** `.card--feature` (icon + title + copy), `.card--step` (numbered), `.card--testimonial` (quote + attribution + holo underline accent), `.card--pricing` plus `.card--featured` for the middle tier (primary border, glow, \"MOST POPULAR\" badge).\n\n**2.3 Forms & Inputs**\n* **Structure:** flex-column `.input-group` wrapping an uppercase `.input-group__label`, the `.input` field, and a dedicated `.input-group__error` feedback container (`aria-live=\"polite\"`, wired via `aria-describedby`).\n* Use the Holo underline field: transparent background, bottom hairline `--border-default`; focus switches to a 2px primary bottom border plus glow.\n* **States to style:** empty, focused, filled, valid (success border + check icon), invalid (error border, error icon, red message text), disabled, read-only.\n* The Final CTA email capture uses this component; success shows a confirmation message + icon in `--text-success`, announced via `aria-live`.\n\n**2.4 FAQ Accordion & Overlay Behavior**\n* FAQ items are disclosure widgets: a `\u003Cbutton aria-expanded>` question plus an answer region; the chevron Material Symbol rotates on open; answer height\u002Fopacity animates with `var(--transition-normal) var(--ease-standard)`.\n* Question hover: cyan text and\u002For the `--holo-underline` gradient; focus-visible: glow ring. State is communicated by icon rotation **plus** `aria-expanded` — never color alone.\n* If any modal\u002Foverlay is introduced (optional): center via flex (`align-items: center`), backdrop overlay at `--z-modal`, keyboard focus trapping, close on `Esc` and backdrop click, CSS-transitioned open\u002Fclose.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, max-width breakpoints, no horizontal overflow from 320px up; the sticky nav must not cover anchored section tops (use `scroll-margin-top`).\n* **Smooth, era-crisp motion:** every state change transitions (`--transition-fast`\u002F`--transition-normal` with `--ease-standard`). Respect `prefers-reduced-motion: reduce` — disable transitions, spinner rotation, shimmer, and smooth scrolling; keep instant color\u002Fstate changes.\n* **Accessibility (a11y):** WCAG AA contrast in **both** Holo Dark and Holo Light. Never rely on color alone. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), logical DOM\u002Ffocus order, full keyboard operability (menu, accordion, toggle, forms), correct ARIA roles\u002Flabels on custom widgets, and `aria-live` regions for form errors, success, and loading feedback.\n* **Mandatory visual feedback:** every hover, click, focus, and submission triggers a visible change (glow shift, underline, tint, icon\u002Fstate swap).\n* **Single accent discipline:** cyan is the only interactive highlight color; red is reserved for destructive\u002Ferror; green only for confirmation. No additional accent hues anywhere.\n* **Destructive actions:** any destructive control uses `.btn--danger` and must remain visually distinct in both themes.\n\n## 4. LANDING PAGE COMPOSITION (SECTIONS & CONTENT)\n\nWrite original, coherent **English** marketing copy for a fictional product identity that fits the retro-Android\u002FHolo world — invent one consistent product name and use it across all sections. **No lorem ipsum anywhere.** All user-facing copy is in English.\n\n1. **Sticky Header \u002F Nav** — `.nav`: brand wordmark (uppercase condensed), anchor links, theme toggle (rule 1.3), primary CTA button. Nav links get the `--holo-underline` gradient on hover. On mobile: a Material Symbol `menu` button with `aria-expanded` opening a dropdown panel at `--z-dropdown`, or a clean wrapping column — never horizontal scroll.\n2. **Hero** — full-bleed near-black band: kicker `.badge`, condensed uppercase display headline with the glowing cyan accent on the key phrase (a subtle cyan `text-shadow` glow is permitted here — the one place text may glow), muted subcopy, two CTAs (`.btn--primary` + `.btn`), and a faint cyan radial glow rendered purely in CSS behind the composition.\n3. **Features** — three `.card--feature` cards in a flex row (column on mobile): glowing cyan Material Symbol icon, uppercase title, muted body copy; card states per rule 2.2.\n4. **How It Works** — three `.card--step` steps with oversized numerals `01 \u002F 02 \u002F 03` (mono or condensed, cyan with glow), connected by a thin cyan connector line (horizontal on desktop, hidden or vertical on mobile), short uppercase titles and copy.\n5. **Testimonials** — three `.card--testimonial` cards: `--holo-underline` accent, quote copy, a circular avatar token built from a Material Symbol `person` inside a bordered, glowing circle, attribution name and uppercase role in muted tone.\n6. **Pricing** — three `.card--pricing` tiers; middle tier is `.card--featured` with primary border, glow, and a \"MOST POPULAR\" `.badge`; uppercase tier name, large condensed price, feature list with cyan Material Symbol checks, one CTA per tier (featured gets `.btn--primary`), fine print in muted text.\n7. **FAQ** — five to six accordion items per rule 2.4.\n8. **Final CTA** — full-width band on `--color-surface-2`: uppercase headline, subcopy, inline email capture (`.input-group` + `.btn--primary`, wrapping to a column on mobile), privacy microcopy; full input state support per rule 2.3 including loading, success, and error feedback.\n9. **Footer** — secondary links grouped into three to four columns (e.g., Product, Company, Resources, Legal) plus brand, copyright, and small print; muted text, top divider, link hover = cyan + holo underline; semantic `\u003Cfooter>`.\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `style` attributes; no inline `\u003Cscript>` blocks beyond the single deferred `script.js` reference.\n* **Naming:** one convention throughout — the theme's `block--modifier` \u002F `block__element` pattern; never mix conventions.\n* **Token order in `style.css`:** the Holo Dark `:root` block (verbatim, rule 1.2) → mandatory semantic aliases → Holo Light overrides (media query + class, rule 1.3) → base component classes → extensions and section styles.\n* **JS scope:** vanilla and minimal — theme toggle + `localStorage` persistence, mobile menu, accordion, form state handling, smooth anchor scrolling (respecting reduced motion). No behavioral logic beyond what is specified.\n* **No unrequested placeholders:** all copy is real, thematic English; placeholders only where genuinely unavoidable (and none should be).\n* **First-attempt completeness:** ship a fully working page, then self-verify before delivering — light + dark contrast (AA), keyboard pass, 320px no-overflow, reduced-motion pass, and theme persistence across reload. Fix any failure before submitting the final code.\n",1791954993323]