[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-776-MIDNIGHT-DINER-open-all-night":3},"# SYSTEM PROMPT — BUILD TASK: \"MIDNIGHT DINER — OPEN ALL NIGHT\" LANDING PAGE\n\nYou are acting as a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page on the first attempt. This document is the authoritative specification — every rule below is mandatory unless explicitly marked as an exception.\n\n---\n\n## 0. PROJECT BRIEF & THEME DIRECTION\n\n**0.1 Product & Style**\nBuild a single-page marketing site for **MIDNIGHT DINER — open all night**, a retro-noir late-night diner. Visual language: **Neumorphism** (soft-UI), 2020s Digital era. Keywords: midnight, diner, noir, neumorphism, animated, gradient, blur.\n\n**0.2 Art Direction**\n- Aged-cream surfaces with soft dual (extruded) neumorphic shadows in Light mode; deep midnight blue-black surfaces with faint luminous edges in Dark mode.\n- Neon-red (#ff5d5d) used as \"signage\": glowing accent words, primary CTAs, and the featured pricing card.\n- Decorative \"neon haze\": blurred radial-gradient orbs (`filter: blur()`, slow drift keyframes, `aria-hidden`) behind section content; `backdrop-filter: blur()` on the sticky nav and any overlay.\n- Keyframe animations: neon-sign flicker on the hero accent word, glow pulse on CTAs, shimmer for skeletons, orb drift. Every animation must be gated behind `@media (prefers-reduced-motion: no-preference)`.\n- Typography: Google Fonts — **Bebas Neue** for display headings (diner-signage feel, bound to `--font-display`), **Inter** for body copy (bound to `--font-base`).\n- Icons: Google **Material Symbols (Rounded)** exclusively. Raw inline SVGs and local icon files are **forbidden** — including for stars, chevrons, close buttons, and social icons.\n\n**0.3 Copy**\nWrite all user-facing copy in **English**. Tone: warm, wry, film-noir diner (e.g., \"The griddle never sleeps.\"). Author real copy for every section. Lorem ipsum is **prohibited** — the theme and section list are fully specified, so no content is genuinely unspecified.\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 in HTML.\n- All design properties, layouts, neumorphic shadows, gradients, blur effects, glow, keyframes, and state styles must target class or ID selectors.\n- HTML stays clean, semantic, and styling-agnostic: restyling the site must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root`, with the dark set overridden under a `.dark` class on `\u003Chtml>`. Use this authoritative mapping:\n\n*:root (Light — default)*\n- `--primary: #ff5d5d` (neon red — actions, glow, signage)\n- `--secondary: #101826` (midnight slate — footer band, dark inserts)\n- `--bg-primary: #e8e4d8` (aged cream — page base)\n- `--bg-secondary: #fefefe` (elevated near-white — inset panels, menus; never `#ffffff`)\n- `--text-primary: #0d1218` (midnight ink)\n- `--text-secondary: #4a5261` (muted ink)\n- `--text-success: #2e7d32` \u002F `--text-error: #b3261e`\n- `--border-default: rgba(13,18,24,0.14)` \u002F `--border-success: #2e7d32` \u002F `--border-error: #b3261e`\n\n*Neumorphism tokens (Light)*\n- `--neu-light: rgba(255,255,255,0.9)` \u002F `--neu-dark: rgba(13,18,24,0.25)`\n- `--shadow-neu: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light)`\n- `--shadow-neu-inset: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light)`\n- `--glow: 0 0 18px rgba(255,93,93,0.35)` \u002F `--glow-strong: 0 0 30px rgba(255,93,93,0.55)`\n\n*.dark*\n- `--bg-primary: #0d1218` \u002F `--bg-secondary: #101826` \u002F `--secondary: #0a0e14`\n- `--text-primary: #e8e4d8` \u002F `--text-secondary: rgba(232,228,216,0.68)`\n- `--text-success: #7ddb92` \u002F `--text-error: #ff8a8a` (lighter variants required for AA on dark)\n- `--border-default: rgba(232,228,216,0.16)` \u002F `--border-success: #7ddb92` \u002F `--border-error: #ff8a8a`\n- `--neu-light: rgba(255,255,255,0.05)` \u002F `--neu-dark: rgba(0,0,0,0.6)` \u002F `--primary: #ff5d5d` unchanged\n\n*Shared tokens*\n- `--radius-sm: 10px` \u002F `--radius-md: 18px` \u002F `--radius-lg: 28px`\n- `--shadow-sm` \u002F `--shadow-md` (re-define inside `.dark` with deeper blacks so elevation stays visible)\n- `--spacing-gap: 1.5rem` \u002F `--transition-fast: 150ms` \u002F `--transition-normal: 300ms` \u002F `--ease-standard: cubic-bezier(0.4,0,0.2,1)`\n- `--z-dropdown: 100` \u002F `--z-modal: 200` \u002F `--z-toast: 300`\n- `--font-base: 'Inter', sans-serif` \u002F `--font-display: 'Bebas Neue', sans-serif`\n\n**Contrast pairing (enforced for both modes):** every light background token pairs with dark text; every dark background token pairs with light text. Specific rules: text placed on `#ff5d5d` fills must be `#0d1218` (≈6:1, passes AA); white on red is allowed only at large display sizes. Raw `#ff5d5d` is decorative\u002Flarge-display only on cream (it fails contrast as body text on `#e8e4d8`); functional red text on cream uses `#b3261e`.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark Mode must be fully defined via `.dark` class tokens; background and text variables swap with zero HTML restructuring.\n- A visible theme toggle must sit in the nav (Material `dark_mode`\u002F`light_mode` icon) with correct `aria-pressed` and `aria-label` state. Choice persists via `localStorage`.\n- **Exception clause (source-spec conflict):** the source specification marks Light as the sole default; therefore, on first visit with no stored preference, load **Light mode** and ignore `prefers-color-scheme`. Dark mode must still be complete, toggleable, and persisted from the first toggle onward.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- All layout scaffolding uses Flexbox. Every flex container defaults to `align-items: center` (`items-center`); any justified exception must be documented with a CSS comment.\n- Mobile-first: rows collapse to columns below 768px; no horizontal scroll at any width down to 320px; minimum touch target 44×44px everywhere.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use clean custom CSS in `style.css`, organized with Tailwind's cascade-layer convention (`@layer tokens, base, components, utilities;`) and `@apply`-style reusable component classes (`.btn`, `.card`, `.input-group`). If Tailwind CDN is included, use it only for layout utilities (flex, gap, responsive prefixes) — no inline `tailwind.config` script, and no theme colors defined outside the CSS variables.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Include Google Fonts `\u003Clink>` tags for Bebas Neue and Inter; load Material Symbols Rounded via the official Google Fonts stylesheet (configure the FILL axis for filled icons such as stars). Forbid raw inline SVGs and local icon files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component** (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`, `.btn--loading`, `.is-disabled`)\n- **Default:** flex layout (`display:flex; align-items:center; justify-content:center; gap:0.5rem`), min 44×44px. `.btn--ghost` = cream\u002Fmidnight surface + `--shadow-neu` + 1px `--border-default` hairline. `.btn--primary` = `#ff5d5d` fill + `--glow` + ink text per 1.2.\n- **Hover:** `brightness()` shift + intensified glow; `cursor: pointer`.\n- **Focus:** distinct ring — `outline: 2px solid var(--primary)` with offset plus `--glow`; must be clearly visible on both cream and midnight backgrounds.\n- **Active:** `--shadow-neu-inset` (pressed) + `transform: scale(0.97)`.\n- **Loading:** `.btn--loading` — spinner (border animation or rotating `progress_activity` icon), fixed dimensions (no layout shift), pointer-events blocked to prevent double-clicks, `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary states using `--text-success` \u002F `--text-error` with icon feedback.\n- `.btn--danger` must be visually distinct in both themes (Dark mode may use `--primary` red).\n\n**2.2 Card Component** (`.card`, `.card--interactive`, `.card--featured`, `.card--skeleton`, `.card--empty`)\n- **Default:** neumorphic raised surface matching the section background + dual shadow + hairline border (shadows alone must never be the sole affordance). `--bg-secondary` reserved for inset panels and dark bands.\n- **Hover:** `transform: translateY(-2px)` + shadow spread + glow on accent elements.\n- **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton is focused.\n- **Loading:** skeleton shimmer keyframes with stable dimensions (no layout jumps).\n- **Empty State:** Material icon + clear guidance text layout, styled in CSS.\n\n**2.3 Form & Input Requirements** (`.input-group`, `.input`, `.input--valid`, `.input--error`)\n- **Structure:** flex container wrapping a `\u003Clabel>`, an input styled with `--shadow-neu-inset`, and a dedicated `.input-group__error` container (`aria-live=\"polite\"`).\n- **States:** empty, focused (outline ring + glow), filled, valid (success border + `check` icon), invalid (error border, red text via `--text-error`, `error` icon, message), disabled, read-only.\n\n**2.4 Modal \u002F Popup Requirements** (if any dialog is used, e.g., \"Reserve a Booth\")\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions. Centered flex container (`align-items:center`), backdrop with `backdrop-filter: blur()`, Google icon `close` button, keyboard focus trap, `Esc` and overlay-click close, `role=\"dialog\"` + `aria-modal`, focus returned to trigger on close.\n\n**2.5 Additional Components**\n- **Accordion (FAQ):** `\u003Cbutton aria-expanded>` + panel pattern; `expand_more` chevron rotates 180° on open; open panel uses `--shadow-neu-inset`; one-open-at-a-time behavior; fully keyboard operable.\n- **Toast:** bottom-positioned, `--z-toast`, `aria-live`, auto-dismiss, neumorphic surface with glow accent; used for form feedback.\n- **Mobile nav overlay:** hamburger (`menu` icon) toggles a flex-column panel at `--z-dropdown`, animated, `aria-expanded`, with focus management.\n- **Menu ticker (optional hero flourish):** CSS keyframe translateX marquee of menu items; must pause\u002Fstop under `prefers-reduced-motion`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, responsive breakpoints, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; all keyframes gated behind `prefers-reduced-motion: no-preference`.\n- **Accessibility (a11y):** WCAG AA contrast in Light and Dark modes; never rely on color alone to communicate state (pair icons with text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); logical heading hierarchy (one `h1`, then `h2` per section); skip-to-content link; logical DOM\u002Ffocus order; every interaction keyboard-operable (no mouse-only behavior); `aria-live` regions for form errors, loading states, and toasts.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions** (e.g., an \"Unsubscribe from late-night promos\" footer link) must be visually distinct via `--text-error`\u002F`--border-error` in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, `script.js`. Only one script reference: `\u003Cscript defer src=\"script.js\">` — no other inline scripts.\n- **Naming convention:** BEM exclusively (`block__element--modifier`), e.g., `.hero__badge`, `.card--featured`, `.btn--primary`, `.input-group__error`. Never mix conventions.\n- **Content:** authored English copy everywhere (see 0.3). Footer secondary links may use `href=\"#\"` stubs only for pages that genuinely do not exist; anything representable on-page must link to real section anchors (`#features`, `#how-it-works`, `#testimonials`, `#pricing`, `#faq`).\n- **Definition of done:** valid semantic HTML, no console errors, both themes toggle and persist, full keyboard pass, no horizontal scroll at 320px, reduced-motion pass, no inline styles, no inline SVGs.\n\n---\n\n## 5. PAGE STRUCTURE — SECTION-BY-SECTION REQUIREMENTS\n\n**5.1 Header \u002F Nav (sticky):** neumorphic bar with `backdrop-filter: blur()`. Brand wordmark \"MIDNIGHT DINER\" in Bebas Neue with a neon glow on the word \"MIDNIGHT\". Links to all sections, theme toggle, and an \"Order Now\" `.btn--primary`. Collapses to hamburger overlay on mobile.\n\n**5.2 Hero:** min-height ~85vh, flex column, centered. Drifting blurred gradient orbs behind content (`aria-hidden`). Pill badge \"OPEN ALL NIGHT · 24\u002F7\" with `nightlight` icon. `h1` in Bebas Neue, `clamp(3rem, 8vw, 6rem)`, with a neon-flicker keyframe on one accent word. Subcopy plus dual CTAs: \"Grab a Booth\" (`.btn--primary`) and \"Browse the Menu\" (`.btn--ghost`).\n\n**5.3 Features — 3 `.card--interactive`:** icons `local_cafe` (bottomless coffee, always hot), `ramen_dining` (comfort food till sunrise), `nightlight` (noir booths under neon). Authored titles and copy; cards stack in a column on mobile.\n\n**5.4 How It Works — 3 steps:** numbered neumorphic circles joined by a dashed connecting line (pseudo-element) that reorients vertically on mobile. Icons: `directions_walk` → `receipt_long` → `local_dining`, with authored step titles and descriptions.\n\n**5.5 Testimonials — 3 `.card`s:** star ratings via Material `star` icons with `aria-label` (\"Rated 5 out of 5\"); initials-only avatar circles (neumorphic, no external images); night-owl personas (e.g., night-shift nurse, touring bassist, insomniac novelist) with authored quotes.\n\n**5.6 Pricing — 3 tiers:** \"Regular\" (free), \"Night Owl\" (`.card--featured` with glow ring + \"MOST POPULAR\" badge, `scale(1.03)` on desktop only), \"All-Nighter\". Feature lists with Material `check` icons; per-tier `.btn` CTAs; featured card must stand out in both themes.\n\n**5.7 FAQ — accordion:** 5–6 authored questions (hours, walk-ins\u002Freservations, vegetarian options, payment, Wi-Fi\u002Foutlets, late-night parking) following 2.5.\n\n**5.8 Final CTA:** full-width midnight band (`#0d1218` even in Light mode — dark background paired with cream text per 1.2), red neon glow headline, a `.btn--primary`, and a \"Join the Night Owl Club\" `.input-group` email capture with full validation states plus success toast.\n\n**5.9 Footer:** `--secondary` surface (`#101826` light \u002F `#0a0e14` dark) with cream text. Columns of secondary links (Menu anchors, Company: About\u002FCareers, Support: Contact\u002FHelp, Legal: Privacy\u002FTerms), Material social icons, and the copyright line \"© 2025 MIDNIGHT DINER — open all night.\"\n\n---\n\n## 6. BEHAVIORAL JAVASCRIPT SCOPE (`script.js`)\n\nImplement only: theme init\u002Ftoggle\u002Fpersistence (localStorage key `midnight-diner-theme`, per the 1.3 exception), mobile menu, FAQ single-open accordion, anchor smooth scrolling (CSS `scroll-behavior` with reduced-motion fallback), newsletter validation + toast, and any modal behavior per 2.4. No other behavioral logic unless specified above.\n",1791954992651]