[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-240-Retro-Digital-Anos-90":3},"# BUILD SPECIFICATION & SYSTEM PROMPT — \"RETRO DIGITAL 90s\" LANDING PAGE\n\n**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page for a fictional 90s-style digital marketing agency on the **first attempt**. No stubs, no placeholders, no \"to be implemented\" comments.\n\n**Project:** Single-page marketing site, theme **\"Retro Digital 90s\"** (Nostalgic, Playful, Digital — Early 1990s Internet era). Suggested agency identity: **\"DIAL-UP DIGITAL™ — We make brands go viral on the Information Superhighway.\"** All user-facing copy must be written in **English**, with authentic 90s internet slang (\"hits,\" \"surf the web,\" \"guestbook,\" \"AS seen on the Info Superhighway!\").\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 live in `style.css`, targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling. Reskinning the site must require editing only the CSS file.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore all visual tokens in `:root` and override them in the dark theme block:\n\n* **Colors (Light mode — \"Windows 95 Desktop\" mood):** `--primary: #008080` (Teal), `--secondary: #800080` (Purple), `--accent-yellow: #FFFF00`, `--accent-lime: #32CD32`, `--accent-pink: #FF00CC`, `--accent-orange: #FFA500`, `--bg-primary: #C0C0C0` (Light Gray — classic OS chrome, never pure white), `--bg-secondary: #fefefe` (window content surface), `--bg-inset: #DFDFDF` (recessed fields), `--text-primary: #000000`, `--text-secondary: #404040`, `--border-default: #808080`.\n* **Derived Text Tokens:** Where a palette hue fails WCAG contrast as text on a given background, derive a darkened variant for the text token and reserve the pure hue for borders, badges, and decorative accents. Specifically: `--text-success: #0B6B0B` (light mode) \u002F `#32CD32` (dark mode); `--text-error: #B3008A` (light mode) \u002F `#FF00CC` (dark mode); teal\u002Fpurple used as *text* on light backgrounds must be darkened (e.g., `#005F5F` \u002F `#5C005C`) — pure `#008080`\u002F`#800080` are allowed only for large display text, borders, and backgrounds paired with light text.\n* **Contrast Pairing:** Every light background token (`#C0C0C0`, `#fefefe`, `#FFFF00`) must pair with black\u002Fdark text; every dark background token (teal, purple, dark-mode surfaces) must pair with light text (`#FFFFFF`, `#FFFF00`, or `#E8E8E8`). Enforce this pairing in **both** themes.\n* **Bevel Tokens:** `--bevel-light: #FFFFFF`, `--bevel-dark: #808080` (light mode); `--bevel-light: #4A4A5A`, `--bevel-dark: #000000` (dark mode). All 3D borders use these.\n* **Radius & Shadows:** Define `--radius-sm`, `--radius-md`, `--radius-lg` — **exception clause:** resolve all three to `0px`, because the pixel aesthetic forbids rounded corners; bevel borders replace rounded corners as the shape language. Shadows must be **hard-offset, zero-blur** pixel shadows: `--shadow-sm: 3px 3px 0 var(--shadow-color)`, `--shadow-md: 5px 5px 0 var(--shadow-color)` (`--shadow-color: #000000` light \u002F `#000000` dark).\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 250ms`, `--ease-standard: ease-in-out`, plus `--ease-pixel: steps(4, end)` for retro stepped animations.\n* **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Define a full dark token set (\"Midnight BBS\" mood: `--bg-primary: #0A0A14`, `--bg-secondary: #1A1A2E`, `--text-primary: #E8E8E8`, `--text-secondary: #A0A0B0`, lightened teal `#40E0E0` and purple `#B366B3` for accents) under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.\n* **Theme Switching:** Backgrounds, text, bevels, and shadows must flip seamlessly via variables only — no HTML restructuring.\n* **Persistence:** Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header styled as a retro OS button, with correct `aria-pressed` and `aria-label` state.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (documented in a CSS comment).\n* **Mobile-Friendly First:** All rows of windows\u002Fcards\u002Fsteps must collapse to single columns on small viewports. No horizontal scrolling at any breakpoint. Fluid sizing throughout.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (or clean custom CSS driven by `@layer` \u002F `@apply`) unless another framework is requested. All utilities must map back to the CSS variables or generic reusable classes (`.btn`, `.window`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load Google Fonts via `\u003Clink>`: **\"Press Start 2P\"** for display\u002Fheadings\u002Fbuttons (bind to `--font-display`) and **\"VT323\"** for body copy (bind to `--font-base`, minimum body size `1.125rem` for legibility). **Exception clause:** the source spec names \"Pixelade,\" which is not available on Google Fonts — substitute Press Start 2P + VT323 as the closest pixel-type equivalents.\n* **Headings:** Apply `text-shadow: 1px 1px #808080` in light mode (classic bevel-embossed text); in dark mode, swap to a subtle neon glow (`text-shadow: 0 0 8px` accent color).\n* **Icons:** Use Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. THEME DESIGN SYSTEM — \"RETRO DIGITAL 90s\"\n\n**2.1 Mood & Art Direction**\nNostalgic, playful, quirky, authentic early-internet fun. The page should feel like a 1996 desktop: floating OS windows, chunky 3D buttons, pixel type, neon accents on gray chrome. Every section is framed as part of a retro operating system \u002F GeoCities-era website.\n\n**2.2 Signature Visual Effects (all CSS-only — no external images)**\n* **Old OS UI elements:** Draggable-look `.window` components with gradient title bars (teal→purple gradient in light mode; adapted neon gradient in dark), title text, and window control buttons (Material icons `remove`, `crop_square`, `close`).\n* **3D buttons:** `border: 2px outset var(--bevel-light)` at rest; `border-style: inset` on `:active` for the classic pressed-button effect.\n* **Pixelated\u002Fweb-safe typography:** Press Start 2P + VT323 per §1.6.\n* **Geometric pattern & noise backgrounds:** Build with pure CSS — `repeating-conic-gradient` checkerboards, `repeating-linear-gradient` scanlines, `radial-gradient` dot grids\u002Fstarfields. Apply via the `.pixel-pattern-bg` class.\n* **Bevel borders everywhere:** The `.bevel-border` class (2px outset, bevel tokens) is the default surface treatment.\n* **Dial-up click sounds:** Synthesize retro beeps\u002Fmodem chirps with the **Web Audio API** (square-wave oscillators) — **exception clause:** no local or external audio files are permitted. Sounds fire only on direct user clicks, are controlled by a visible header mute toggle (Material `volume_up`\u002F`volume_off`, `aria-pressed`, persisted in `localStorage`), never autoplay on page load, and default OFF when the user prefers `prefers-reduced-motion`.\n* **Scanline\u002Fpixelation transitions:** Section reveals on scroll (IntersectionObserver adds a class) animate with a scanline sweep pseudo-element and `var(--ease-pixel)` stepped opacity flicker. Optionally add a subtle CRT scanline overlay on the hero only.\n\n**2.3 Required Utility Classes (must exist in `style.css`)**\n`.old-ui-element`, `.pixel-pattern-bg`, `.bevel-border`, plus a `.scanlines` overlay class. These are the only permitted non-BEM utilities (see §6).\n\n---\n\n## 3. PAGE CONTENT & SECTION SPECIFICATION\n\n**3.1 Global Chrome**\nSticky header styled as an OS taskbar: agency wordmark (Press Start 2P), nav links to all sections, theme toggle, and sound toggle. Include a keyboard-accessible skip link.\n\n**3.2 Hero**\nA large `.window` with browser-chrome title bar (\"http:\u002F\u002Fwww.dialupdigital.com\"). Contains: blinking \"NEW!\" starburst badge (animation disabled under reduced motion), pixel headline (e.g., \"We Make Websites That Get HITS.\"), subheadline, two CTAs (\"Sign Our Guestbook\" primary \u002F \"View Pricing\" secondary), and a fake visitor counter (\"You are visitor #001,337\"). Below the window: a marquee strip with scrolling taglines (pauses on hover; static text under reduced motion).\n\n**3.3 Features — 3 Cards**\nThree `.window` cards, each with a Material icon, playful title, and 2–3 sentence description: (1) \"Search Engine Domination\" (SEO) — icon `travel_explore`; (2) \"Banner Ads That Actually Get Clicked\" — icon `ads_click`; (3) \"Killer WWW Design\" — icon `language`.\n\n**3.4 How It Works — 3 Steps**\nStyled as a retro software install wizard: three numbered steps (\"Insert Disk 1: Discovery Call,\" \"Installing... Your Strategy,\" \"Reboot: Launch & Watch the Hits Roll In\") connected by a segmented block progress bar (classic installer aesthetic).\n\n**3.5 Testimonials**\nThree quotes styled as guestbook entries \u002F retro chat windows, each with a fictional name, company, and 5-star rating rendered as Material `star` icons.\n\n**3.6 Pricing — 3 Tiers**\nThree software-box-styled cards: \"FLOPPY DISK EDITION\" ($499\u002Fmo), \"CD-ROM PRO\" ($999\u002Fmo — highlighted \"BEST VALUE\" with neon yellow treatment), \"GOLD EDITION\" ($1,999\u002Fmo). Each lists features with Material `check` icons and a \"Buy Now!\" button that opens the order-confirmation modal (§4.4).\n\n**3.7 FAQ**\n5–6 questions in a keyboard-accessible accordion (§4.5), e.g., \"Do you really use dial-up?\", \"Will my site work in Netscape?\", \"What is a 'hit' and why do I need 9000 of them?\"\n\n**3.8 Final CTA**\nA full-width window: \"Don't get left behind on the Information Superhighway!\" with an email `.input-group` and \"Get My Free Quote\" button. On submit: button enters loading state, a fake segmented download progress bar animates, then a success state + toast confirm subscription (aria-live feedback).\n\n**3.9 Footer**\nSecondary links (About, Services, Guestbook, Webrings, Contact, Privacy), a joke line (\"Best viewed at 800×600 in Netscape Navigator 3.0\"), a visitor counter, and \"© 1996–2025 Dial-Up Digital. Made with a Material `favorite` icon and a 56k modem.\"\n\n---\n\n## 4. COMPONENT DESIGN SPECIFICATIONS\n\n**4.1 Button Component**\nAll states via CSS classes; base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, Press Start 2P at a readable size.\n* **Default:** 3D bevel (`2px outset`), variants `.btn--primary` (teal bg \u002F light text), `.btn--secondary` (purple bg \u002F light text), `.btn--accent` (neon yellow bg \u002F black text), `.btn--danger` (shocking pink treatment, visually distinct in both themes).\n* **Hover:** brightness shift + hard shadow growth, `cursor: pointer`.\n* **Focus:** classic dotted OS focus ring (`outline: 2px dotted`) using a variable-driven color visible in both themes.\n* **Active\u002FPressed:** `border-style: inset` + `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, shows a rotating Material `hourglass_empty` icon without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback classes driven by `--text-success` \u002F `--text-error`, always paired with an icon or text (never color alone).\n\n**4.2 Card \u002F Window Component**\n* **Default:** Flexbox `.window` with `.bevel-border`, `--bg-secondary` surface, gradient title bar, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` and shadow growth to `--shadow-md`.\n* **Focus-within:** Title bar or border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** Structured fallback with a Material icon and guidance text.\n* Decorative window control icons must be `aria-hidden=\"true\"` and removed from tab order unless wired to real behavior.\n\n**4.3 Form & Input Requirements**\n* **States:** Empty, focused (dotted ring), filled, valid (lime border + `check` icon), invalid (pink border, error text, `error` icon), disabled, read-only. Inputs use inset bevel borders and `--font-base`.\n* **Structure:** Flex container wrapping label, input, and a dedicated error feedback container wired to `aria-live=\"polite\"`.\n\n**4.4 Modal \u002F Popup Requirements** (pricing \"Buy Now!\" confirmation)\n* **States:** Opening (scanline\u002Fpixelation entrance), open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n* **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, `role=\"dialog\"` + `aria-modal`, close via `Esc` and overlay click.\n\n**4.5 FAQ Accordion**\nEach item: trigger `\u003Cbutton>` with `aria-expanded` and `aria-controls`, rotating Material `expand_more` chevron, panel with inset bevel; fully keyboard operable; smooth height\u002Fopacity transition respecting reduced motion.\n\n**4.6 Toast**\nRetro-window-styled notification region with `aria-live`, auto-dismiss, stacked above everything via `--z-toast`.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, mobile breakpoints, zero horizontal overflow; window grids collapse to one column.\n* **Smooth Animations:** `transition: var(--transition-normal)` on state changes; stepped `var(--ease-pixel)` for retro reveals; **all** blinking, marquees, scanlines, sounds, and transform animations disabled under `prefers-reduced-motion`.\n* **Accessibility (a11y):** WCAG-sufficient contrast in both Light and Dark modes (apply the derivation rule in §1.2). Never rely on color alone — pair every success\u002Ferror state with an icon and text. Semantic HTML5 elements, correct ARIA roles\u002Flabels on custom widgets, logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for form errors, toasts, and loading states.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change (bevel press, sound, toast, or progress bar).\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 6. 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 external assets beyond Google Fonts and Google Material Symbols.\n* **Naming Convention:** BEM (`block__element--modifier`) for all components (`.window__title-bar`, `.btn--primary`, `.pricing-card__features`), with exactly four permitted legacy utility classes: `.old-ui-element`, `.pixel-pattern-bg`, `.bevel-border`, `.scanlines`. Never mix other conventions.\n* **No Unrequested Placeholders:** Write real, on-theme English marketing copy for every section — lorem ipsum is forbidden. All copy, labels, class names, variables, and file names in English\u002FASCII.\n* **First-Attempt Complete:** Ship the full working page — theme toggle, sound toggle, accordion, modal, form validation, toasts, and all animations functional — in this single response.\n",1791954983691]