[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-318-Googie":3},"# CODING AI SYSTEM PROMPT — \"GOOGIE\" RETRO-FUTURISM LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Theme: **Googie** — 1945–1969 Southern California populuxe \u002F doo-wop roadside architecture, space-age optimism. Output category: **Retro & Pop**.\n\n---\n\n## 1. PROJECT BRIEF & CONTENT DIRECTION\n\n* **Product:** Invent one coherent fictional product named **\"Starlite\"** (a retro-futuristic SaaS platform, e.g., an all-in-one launch\u002Fbooking tool). Keep the name, tone, and claims consistent across every section.\n* **Copy:** Write ALL user-facing copy in **English**, in the voice of 1950s roadside-sign advertising — short, punchy, exuberant, space-age optimistic (e.g., hero H1: \"The Future, Delivered Fresh Daily\"). **No lorem ipsum anywhere.** You author the real copy.\n* **Sections (in this exact order):** Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n* **Deliverable:** A static landing page in exactly three files: `index.html`, `style.css`, `script.js`.\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.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 is applied via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — restyling the page must only require editing `style.css`.\n\n**2.2 Design Tokens — Googie Base + Mandatory Additions**\nAdopt the provided Googie `:root` token block verbatim (colors, boomerang radii, hard offset shadows, `--starburst` conic-gradient, space scale, `--ease-standard`), with these **mandatory adjustments**:\n* **Surface token:** Replace the provided `--color-surface: #ffffff` with `#fefefe`. Never use pure `#ffffff` anywhere.\n* **Semantic aliases (required):** Add `--primary: var(--color-primary)`, `--secondary: var(--color-accent)`, `--bg-primary: var(--color-bg)`, `--bg-secondary: var(--color-surface)`, `--text-primary: var(--color-text)`, `--text-secondary: var(--color-text-muted)`, `--border-default: var(--color-border)`.\n* **Feedback tokens (required):** `--text-success: #0e7c76`, `--text-error: #c0392b`, `--border-success: #1fb6b0`, `--border-error: #c0392b` (light mode).\n* **Motion & spacing tokens (required):** `--spacing-gap: var(--space-4)`, `--transition-fast: 120ms var(--ease-standard)`, `--transition-normal: 240ms var(--ease-standard)`.\n* **Stacking tokens (required):** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.\n* **Shadow inheritance:** Keep `--shadow-sm\u002Fmd\u002Flg` referencing `var(--color-border)` so dark mode remaps them automatically.\n* **Contrast pairing:** Every light background token pairs with dark text tokens and every dark background token pairs with light text tokens — enforced in both themes, no exceptions.\n\n**2.3 Mandatory Dark Mode (Source Spec Exception Clause)**\nThe source spec did not declare color modes (translated note: *\"Source does not declare modes; validate in light and dark before publishing\"*). Therefore dark mode is **mandatory** and must be fully designed, not improvised:\n* **Token remapping** — define these overrides in dark scope:\n\n```css\n\u002F* Dark mode — \"neon sign at night\" *\u002F\n--color-bg: #0f1523;        --color-surface: #1a2236;\n--color-surface-strong: #243052; --color-border: #f5ede0;\n--color-text: #f5ede0;      --color-text-muted: #a8b2cf;\n--color-primary: #ff8a5c;    --color-accent: #35d9d2;\n--color-gold: #f7c948;\n--text-success: #3ddac9;    --text-error: #ff8a80;\n--border-success: #35d9d2;  --border-error: #ff8a80;\n```\n* **Implementation:** Declare the dark tokens twice — once under `@media (prefers-color-scheme: dark)` and once under `:root.dark` — so no-JS\u002Ffirst-visit users get the correct scheme and the explicit toggle always wins.\n* **Persistence:** `script.js` reads `localStorage` key `googie-theme`; on first visit it falls back to `prefers-color-scheme`, then applies `.dark`\u002Flight class to `\u003Chtml>`.\n* **Toggle control:** A visible button in the nav using Material Symbols `dark_mode` \u002F `light_mode`, with correct `aria-pressed` state and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n* **Neon treatment:** In dark mode only, primary CTAs, the featured pricing card, and the marquee band gain a soft neon glow via `box-shadow: 0 0 12px var(--color-primary)` (or gold\u002Faccent equivalents) — the classic Googie sign-at-night effect.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n* Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n* All rows convert to columns below ~768px; steps, pricing tiers, feature cards, and footer columns stack vertically on mobile.\n* No horizontal scrolling at any viewport width down to 320px. Use `clamp()` for fluid typography.\n\n**2.5 CSS Architecture & Naming**\n* Clean custom CSS organized in `@layer` order: reset → tokens → base → components → sections → utilities. The provided base classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) are the canonical component set — extend them, never restyle ad hoc.\n* **BEM naming only** (matching the spec's `.btn--primary` convention): `.card__title`, `.faq__trigger`, `.step__badge`, `.footer__link`, etc. Never mix conventions.\n\n**2.6 Google Fonts & Material Symbols (Mandatory — Exception Clause)**\n* The spec's font stack (Century Gothic, Broadway, Cooper Black, Futura) is not available on Google Fonts; the Google Fonts rule stands — substitute equivalents and keep the originals as fallbacks: `--font-display: 'Righteous', 'Alfa Slab One', 'Broadway', 'Cooper Black', sans-serif` and `--font-sans: 'Jost', 'Poppins', 'Century Gothic', 'Futura', sans-serif`. Load via `\u003Clink>` with `preconnect` and `display=swap`.\n* **Icons:** Google Material Symbols (Rounded) via `\u003Clink>` only. **Inline SVGs and local icon files are forbidden.** All decorative motifs (starbursts, atoms, roofs, amoebas) are built with pure CSS + Material Symbols.\n\n---\n\n## 3. GOOGIE VISUAL LANGUAGE — SIGNATURE MOVES\n\nApply these moves repeatedly so the page reads as atomic-age roadside signage:\n* **Boomerang radius:** The asymmetric corners (`--radius-md: 4px 24px 4px 24px`, `--radius-lg: 8px 48px 8px 48px`) on cards, buttons, badges, and the CTA panel.\n* **Hard offset poster shadows:** `--shadow-sm\u002Fmd\u002Flg` on every elevated element; hover lifts via `translate(-2px, -2px)` + larger shadow.\n* **Starburst badge:** Circular element with `background: var(--starburst)`, a solid inner disc (pseudo-element, `--color-surface`) carrying a Material icon or number, centered. Optional slow 60s rotation — disabled under `prefers-reduced-motion`.\n* **Upswept roof:** The hero's bottom edge uses `clip-path: polygon(...)` to create a rising diagonal roofline; echo it as angled section dividers.\n* **Atom orbits:** Concentric CSS circle borders, rotated and layered around the hero medallion icon.\n* **Amoeba shapes:** Uneven blob radii (e.g., `58% 42% 55% 45% \u002F 52% 58% 42% 48%`) for testimonial avatars.\n* **Route connector:** A 3px dashed line (`--color-border`) linking the How-It-Works steps — horizontal on desktop, vertical on mobile.\n* **Marquee band:** A thin, `aria-hidden` scrolling slogan strip between Hero and Features; static under reduced motion; neon glow in dark mode.\n\n---\n\n## 4. SECTION-BY-SECTION BUILD SPECIFICATION\n\n* **Hero:** Centered flex column. Eyebrow `.badge` (\"Atomic-Age Software\") with `star` icon; giant `h1` in `--font-display` (uppercase, `clamp(2.75rem, 6vw, 5rem)`); subcopy in `--text-secondary`; two CTAs — `.btn--primary` \"Start Your Orbit\" (`rocket_launch` icon) and `.btn` \"Take the Tour\" (`arrow_forward`). A large rotating starburst medallion with an `atom` icon; floating gold `star` icons (`aria-hidden`); upswept-roof clip on the section's bottom edge.\n* **Features (3 cards):** Section header (eyebrow + `h2` + subcopy), then 3 `.card` elements in a wrapping flex row. Each card: starburst icon badge (`bolt`, `satellite_alt`, `verified`), `h3` title, copy, \"Learn more\" link. Cards lift on hover and highlight on `:focus-within`.\n* **How It Works (3 steps):** 3 steps joined by the dashed route connector. Each step: numbered starburst badge (1\u002F2\u002F3), `h3`, copy. Vertical stack on mobile with the connector rotating 90°.\n* **Testimonials (3 cards):** Diner-sign styled cards with `format_quote` gold icon, five gold `star` rating icons, amoeba-shaped avatar with initials, quote, name, role. Middle card highlighted with `--shadow-lg` and a \"Crowd Favorite\" badge.\n* **Pricing (3 tiers):** 3 `.card--pricing` tiers; the middle `.card--featured` gets `--shadow-lg`, an accent\u002Fgold border, and an overlapping starburst \"MOST POPULAR\" badge. Price in `--font-display`; feature lists with `check_circle` accent icons; middle CTA is `.btn--primary`, others default `.btn`.\n* **FAQ:** 5–6 Q&A items as an accessible accordion (spec in 5.4). Narrow max-width (~720px), centered.\n* **Final CTA:** Full-width `.card--cta` panel with `--radius-lg`, `--color-surface-strong` background, starburst decorations, `h2`, copy, and an email signup form (spec in 5.3). Simulated submit: loading → success state + toast.\n* **Footer:** 4px solid top border. Flex-wrap layout: brand block (logo text + tagline) plus three secondary link columns (Product, Company, Support). Bottom row: auto-updating copyright year and a \"Back to top\" link. Optional contact icons (`mail`, `call`, `location_on`). All links keyboard-focusable.\n\n---\n\n## 5. COMPONENT DESIGN SPECIFICATIONS\n\n**5.1 Buttons — every state via CSS classes**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.\n* **Hover:** `translate(-2px,-2px)` + `--shadow-md`, `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring using `--color-accent` outline with offset.\n* **Active\u002FPressed:** `transform: translate(0,0) scale(0.97)` with `--shadow-sm`.\n* **Loading (`.btn--loading`):** Blocks pointer events, prevents double-clicks, renders a CSS border-spinner that does not change button dimensions; JS sets `aria-busy=\"true\"`.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError (`.btn--success`, `.btn--error`):** Temporary feedback styles driven by `--text-success` \u002F `--text-error` tokens.\n* **Contrast exception clause:** Override the spec's `.btn--primary` text color `#fff8ef` with fixed dark ink `#1f2a44` in **both** themes to meet WCAG AA on the orange background.\n* **Destructive (`.btn--danger`):** Define it in the design system using `--text-error`\u002F`--border-error`; it must be visually distinct in both light and dark themes.\n\n**5.2 Cards**\n* **Default:** Flexbox layout, 2px `--border-default` border, boomerang radius, `--shadow-md`, `--bg-secondary` surface.\n* **Hover:** `translateY(-2px)` + shadow shift.\n* **Focus-within:** Border highlights `--color-accent` when a child link\u002Fbutton is focused.\n* **Loading (`.card--skeleton`):** Shimmer keyframe animation defined in CSS; must not cause layout jumps.\n* **Empty (`.state-empty`):** Structured fallback layout with a Material icon and guidance text — define it in the stylesheet as part of the system.\n\n**5.3 Forms & Inputs**\n* **States:** Empty, focused (accent border + `--shadow-sm` ring), filled, valid (`.input--valid`: success border + `check_circle` icon), invalid (`.input--invalid`: error border + `error` icon + message), disabled, read-only.\n* **Structure:** `.field` flex container (column, `var(--spacing-gap)` gap) wrapping a `\u003Clabel>`, the `.input`, and a `.field__error` container with reserved min-height (no layout jump) wired to `aria-live=\"polite\"`.\n* **Behavior:** Validate email on blur\u002Fsubmit; never rely on color alone — every invalid state shows an icon and text message.\n\n**5.4 FAQ Accordion & Toast**\n* **Accordion:** Each item is a `button.faq__trigger` with `aria-expanded` + `aria-controls`, controlling a `.faq__panel[role=\"region\"]`. Animate open\u002Fclose via CSS `grid-template-rows: 0fr → 1fr` transition; `expand_more` icon rotates 180°. Fully keyboard operable.\n* **Toast:** Fixed bottom-center, `z-index: var(--z-toast)`, `role=\"status\"` with `aria-live=\"polite\"`, success\u002Ferror variants, slide-in\u002Fout transitions, 4s auto-dismiss.\n* **No modals:** The FAQ is an accordion; do not introduce modals. If one is ever genuinely required, it must have animated open\u002Fclose states, a backdrop, a Material icon close button, focus trapping, and Esc\u002Foverlay-click dismissal.\n\n---\n\n## 6. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** Fluid sizing, stacking breakpoints, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **all** animations (starburst rotation, marquee, shimmer, float, spinner) stop under `prefers-reduced-motion: reduce`.\n* **Accessibility:** AA contrast in both light and dark modes; never color-only state communication; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a skip-to-content link as the first focusable element; logical heading order (one `h1`, `h2` per section, `h3` for cards); full keyboard operability; `aria-live` regions for form errors, loading, and toasts.\n* **Mandatory visual feedback:** Every click, hover, and submission triggers a visible state change.\n* **Theme toggle, nav anchors, accordion, form, and toast** are the only JavaScript behaviors. Smooth-scroll anchor navigation respects reduced motion. No JS libraries.\n\n---\n\n## 7. DELIVERABLES, FILE STRUCTURE & QA CHECKLIST\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate, clean files. Only one `\u003Cscript src=\"script.js\" defer>` reference; no inline script blocks.\n* **Naming:** BEM everywhere, no mixed conventions.\n* **Copy:** Real, themed English copy throughout — placeholders are prohibited because you are authoring the content.\n* **Final QA (mandatory before submitting):** validate both light and dark modes visually and for contrast; keyboard-only pass; 44px touch targets; no horizontal scroll at 320px; reduced-motion pass; zero inline styles; zero inline SVGs; Google Fonts + Material Symbols loading correctly; theme choice persists across reloads.\n",1791954984696]