[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-510-Teletext":3},"# BUILD PROMPT — \"TELETEXT\" THEMED LANDING PAGE (FOR THE CODING AI)\n\n**Role & Mission:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single attempt. Theme: **Teletext** — 1970s–90s broadcast teletext\u002Fvideotex (BBC Ceefax, ITV Oracle, French Minitel, teletext subtitle overlays). Required sections: 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## 0. THEME DIRECTION — NON-NEGOTIABLE AESTHETIC\n\n- **Signature look:** Strict 7-color palette only — black `#000000`, red `#ff0000`, green `#00ff00`, yellow `#ffff00`, blue `#0000ff`, magenta `#ff00ff`, cyan `#00ffff`, white `#ffffff` — on a black broadcast screen. No smooth gradients, no border-radius anywhere, no soft\u002Frealistic shadows, no blurring filters or opacity fades (keep edges crisp and un-anti-aliased).\n- **Graphics idiom:** Extremely low-res blocky mosaic \"character graphics\" built exclusively from Unicode block characters (`█ ▓ ▒ ░ ▄ ▀ ■`) — never raster images, never SVG.\n- **Navigation motif:** Every section carries a teletext page number (P100 Hero, P200 Features, P300 How It Works, P400 Testimonials, P500 Pricing, P600 FAQ, P700 Final CTA, P900 Footer), rendered like authentic teletext header bars; nav and footer links are labeled with page numbers (e.g., `P200\u003C`).\n- **Motion idiom:** State changes snap instantly (`steps(1, end)`), like broadcast hardware. Blinking block cursors and flashing text are the only animation vocabulary — always gated behind `prefers-reduced-motion`, never applied to essential content.\n- **Reference spec:** `references\u002F00-flagship-implementation-specs\u002Fteletext.md` — the supplied token block and base classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) are the foundation; adapt them to the mandatory canonical token names below. Do not maintain a parallel `--color-*` token system.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden.\n- Target every rule via class\u002FID selectors. HTML must remain semantic and style-agnostic — retheming the site must require CSS edits only.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store all tokens in `:root` (theme classes override). Canonical mandatory names, mapped to the Teletext palette:\n  - **Colors:** `--bg-primary: #000000; --bg-secondary: #1a1a1a; --text-primary: #ffffff; --text-secondary: #00ff00; --primary: #00ff00; --secondary: #0000ff;` plus extended palette tokens `--tt-red: #ff0000; --tt-yellow: #ffff00; --tt-blue: #0000ff; --tt-magenta: #ff00ff; --tt-cyan: #00ffff; --tt-white: #ffffff; --tt-black: #000000;` and feedback tokens `--text-success: #00ff00; --text-error: #ff0000; --border-default: #00ffff; --border-error: #ff0000; --border-success: #00ff00;`\n  - **Palette discipline:** Only the 7 palette colors may be used for fills, text, and borders. Exception clause: neutral grays are permitted only for disabled\u002Fplaceholder surfaces, and the light-mode background must be `#fefefe` (never `#ffffff` as a background). Replace the reference's off-palette hover `#ff4444` with an in-palette snap (red → magenta).\n  - **Contrast pairing (enforced in every theme):** yellow\u002Fgreen\u002Fcyan\u002Fmagenta\u002Fwhite backgrounds always pair with black text; black backgrounds pair with white or bright palette text; red\u002Fblue backgrounds pair with white text. In light mode, green\u002Fyellow\u002Fcyan must never be running text on `#fefefe` (contrast failure) — render them as colored chips or borders carrying black text instead.\n  - **Radius:** `--radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;` — hard corners are theme law.\n  - **Shadows:** `--shadow-sm: 4px 4px 0 var(--tt-cyan); --shadow-md: 8px 8px 0 var(--tt-blue);` — hard-edged offset block shadows only. Exception clause: the theme's \"shadow\u002Fblur\" effect is expressed exclusively through these block shadows plus one optional CRT phosphor glow token `--glow: 0 0 10px rgba(0,255,0,0.35)`, usable at most on the hero headline.\n  - **Spacing & transitions:** `--spacing-gap: 24px; --transition-fast: 0s steps(1, end); --transition-normal: 0s steps(1, end); --ease-standard: steps(1, end);` Exception clause: instant snap transitions deliberately replace smooth easing to preserve authentic teletext hardware behavior; `prefers-reduced-motion` must still disable all blink, spinner, and transform effects.\n  - **Elevation:** `--z-dropdown: 10; --z-modal: 100; --z-toast: 1000;` — apply to sticky nav and toasts to prevent stacking conflicts.\n  - **Texture:** `--mosaic-block: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 4px);` for scanline overlays. Exception clause: this hard-stop repeating gradient is the only gradient permitted; smooth color gradients remain forbidden.\n  - **Type scale:** keep the supplied rem scale (`--text-xs` through `--text-5xl`).\n\n**1.3 Mandatory Dark Mode Support**\n- **Dark is the default** (authentic teletext: black screen, bright palette). Also implement a light \"paper teletext\" theme: `--bg-primary: #fefefe; --bg-secondary: #eeeeee; --text-primary: #000000; --text-secondary: #0000ff;` with the 7 palette colors unchanged as accents\u002Fchips.\n- Implement via `@media (prefers-color-scheme)` plus `.theme-dark` \u002F `.theme-light` class overrides on `\u003Chtml>`; switching must swap variables only — zero HTML restructuring.\n- Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Ship a visible toggle in the nav (Google Material Symbols `dark_mode` \u002F `light_mode`) with correct `aria-pressed` and `aria-label` states (\"Switch to light teletext mode\" \u002F \"Switch to dark teletext mode\").\n- The source spec declares no modes — therefore validate BOTH light and dark rendering before delivery.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox; every flex container defaults to `align-items: center` unless an exception is explicitly justified.\n- Mobile-first: all multi-column rows (features, steps, pricing, footer columns) collapse to a single column on small viewports; prevent horizontal scrolling at every width; minimum touch target 44×44px.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (CDN or build) with a theme extension mapping utilities to the tokens above; component classes (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`) must be defined as reusable classes via `@layer`\u002F`@apply` (or equivalent custom CSS), never as one-off utility strings.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts in `\u003Chead>`: **VT323** bound to `--font-base`, `--font-display`, and `--font-mono`, with `'Courier New', monospace` fallbacks. Exception clause: the reference names 'Bedstead', which is not available on Google Fonts — do not use it; VT323 is the sanctioned blocky-terminal substitute.\n- Functional icons: Google Material Symbols. Exception clause for theme authenticity: decorative graphics must be Unicode block\u002Fmosaic characters (`█ ▓ ▒ ░ ▄ ▀ ■`), which are font glyphs, not SVGs. Raw inline SVGs and local icon files remain forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons** (`.btn`, `.btn--primary`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase monospace, min 44×44px. `.btn` = yellow bg + black text; `.btn--primary` = red bg + white text; `.btn--danger` = magenta bg + black text + 4px red border (visually distinct in both themes).\n- **Hover:** instant in-palette snap (`.btn` yellow → white; `.btn--primary` red → magenta) with `cursor: pointer`.\n- **Focus:** `:focus-visible` → 4px magenta outline, 2px offset, clearly visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` (snaps due to steps easing).\n- **Loading:** `aria-busy=\"true\"`, pointer events blocked (no double-clicks), label swapped for a blinking `█` block spinner; button dimensions must not change.\n- **Disabled:** `opacity: 0.4`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary snap to green bg + black text with a check Material Symbol, or red bg + white text with an error Symbol; announced via `aria-live`.\n\n**2.2 Cards** (`.card`)\n- **Default:** flex column, `--bg-primary` background, 4px solid cyan border, zero radius, `--space-4` padding.\n- **Hover:** hard block shadow `--shadow-sm` appears and\u002For `translateY(-2px)` snap.\n- **Focus-within:** border snaps to yellow when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** blinking mosaic blocks (`▓▒░`) animation defined purely in CSS — no layout shift.\n- **Empty state:** block-character glyph plus short guidance text.\n\n**2.3 Forms & Inputs** (`.input-group`)\n- **Structure:** flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error\u002Ffeedback container with `aria-live=\"polite\"`.\n- **States via classes:** empty; focused (4px yellow outline); filled; valid (green border + check Material Symbol); invalid (red border, red message text, error icon — never color alone); disabled; read-only.\n- **Surfaces:** dark theme input = white bg + black text, placeholder `#555555`; light theme input = black bg + green text (terminal idiom).\n\n**2.4 FAQ Accordion**\n- Native `\u003Cdetails>` \u002F `\u003Csummary>` (keyboard operable by default — no mouse-only patterns). Summary row: page number (P601…), question text, and a `▶` block arrow that snaps to `▼` plus yellow when open. Visible `:focus-visible` outline on summaries.\n\n**2.5 Feedback Toast**\n- All dynamic feedback (form success\u002Ferror, theme change) renders in a fixed `aria-live=\"polite\"` toast (top-right, `--z-toast`), styled as a teletext status bar: black bg, 4px cyan border, Material Symbol + text (never color alone), auto-dismiss, reduced-motion safe.\n\n---\n\n## 3. SECTION-BY-SECTION BUILD SPEC\n\nGlobal: invent one coherent fictional product (e.g., a retro \"VIEWDATA\" team-broadcast\u002Fstatus service) and write real English copy for it — lorem ipsum is forbidden. Each section opens with a teletext header bar (page number left, title, colored per section from the palette). Build exactly the sections listed — do not introduce unrequested components (no modals, carousels, or chat widgets).\n\n**3.1 Header\u002FNav:** blue bar, white text, 4px cyan bottom border, sticky (`--z-dropdown`). Brand = mosaic block logo (`█▓▒`) + name. Links labeled with page numbers (`P200\u003C` …). Theme toggle per 1.3. Mobile: links wrap or stack — never horizontal scroll. Include a skip-to-content link.\n\n**3.2 Hero (P100):** background `--bg-primary`; oversized VT323 headline (white, one word in yellow) followed by a blinking `█` cursor; green subheadline (`--text-secondary`); two CTAs (`.btn--primary` → Pricing, `.btn` → How It Works); decorative mosaic illustration built from block characters in palette colors; teletext status strip (brand · P100 · optional live clock via JS); optional `--glow` on the headline only.\n\n**3.3 Features (P200):** yellow header bar with black text; 3 `.card`s (flex row → column): Material Symbol icon inside a colored chip (red\u002Fyellow\u002Fgreen with black icon), title, two-line description, page-number tag (P201–P203). Hover\u002Ffocus-within per 2.2.\n\n**3.4 How It Works (P300):** 3 steps (flex row → column): oversized numerals `01\u002F02\u002F03` in colored blocks (red, yellow, green + black text), step title, short copy; block-character arrows (`▶▶`) between steps, removed\u002Fstacked on mobile.\n\n**3.5 Testimonials (P400):** 3 `.card`s with alternating border colors (magenta\u002Fcyan\u002Fgreen); quote in `--text-primary`, attribution in cyan; rating rendered as yellow `■■■■■` blocks plus the text \"5\u002F5\" (never color alone).\n\n**3.6 Pricing (P500):** 3 tiers (flex row → column); middle tier highlighted with a 4px yellow border + magenta \"MOST POPULAR\" `.badge` (black text); price in large VT323; feature list with green `■` bullets; one `.btn` per tier demonstrating the full state machine on click (loading blink → success snap + toast; double-clicks blocked).\n\n**3.7 FAQ (P600):** 5–6 `\u003Cdetails>` items per 2.4, with real questions and answers about the fictional product.\n\n**3.8 Final CTA (P700):** full-width green block with black text (holds contrast in both themes); big headline; newsletter `.input-group` (label, email input, error container) with client-side validation — invalid → red border + inline message; valid submit → button loading state → success snap + toast; privacy microcopy beneath.\n\n**3.9 Footer (P900):** black bg, 4px cyan top border; flex-wrap columns: brand + mosaic logo + one-line tagline; secondary link groups (Product \u002F Company \u002F Legal — real labels); a page-number navigation row (`P100 P200 P300 …` as links); copyright line in green. All links: magenta `:focus-visible` outline.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any viewport width.\n- **Motion:** every state change snaps via the steps tokens; all blink\u002Fspinner\u002Ftransform effects are disabled under `prefers-reduced-motion`.\n- **Accessibility:** semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1` with logical heading order, ARIA roles\u002Flabels on custom widgets, full keyboard operability, visible focus everywhere, WCAG AA contrast in both themes, `aria-live` for all dynamic feedback, and never communicating state by color alone.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive\u002Fdistinct actions:** `.btn--danger` must remain visually distinct in both light and dark themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`; a single `\u003Cscript src=\"script.js\" defer>` reference; no inline `\u003Cscript>` blocks; no inline styles.\n- **Naming:** one consistent convention everywhere (BEM: `.btn--primary`, `.card__title`); never mix conventions.\n- **JS scope:** theme toggle + persistence, newsletter validation\u002Ffeedback, pricing button loading demo, FAQ ARIA sync (if enhancing native `\u003Cdetails>`), optional hero clock — nothing beyond the specified interactions.\n- **Copy:** all user-facing copy in English. Exception clause: the source spec's Portuguese notes (\"the source does not declare modes; validate in light and dark before publishing\") are translated and enforced as English requirements.\n- **Validation gate:** verify both themes, every component state, and full keyboard navigation before delivering. Deliver the complete landing page in one attempt.\n",1791954988322]