[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-690-Dimensional-Layering":3},"# System Prompt: Landing Page — \"Dimensional Layering\" Theme\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in a single attempt, first try, with no follow-up questions.\n\n**Build Target:** A single-page marketing site for one coherent fictional SaaS product (suggested: a spatial presentation\u002Fstorytelling platform — pick one product concept and keep all copy consistent with it). Write realistic English marketing copy for every section. Lorem ipsum is forbidden.\n\n**Required Sections (in order):** Header\u002FNavigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Design Language — Dimensional Layering (2020s Modern):** Convey depth everywhere via z-index stacking (4 content layers), overlapping cards, a 4-level elevation shadow scale, floating elements, scroll parallax, backdrop blur, and clear spatial hierarchy. Both Light and Dark themes are first-class.\n\n---\n\n## 1. STRICT ARCHITECTURE RULES\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks in HTML, and any inline script beyond the single deferred entry-point reference.\n* Target all layout, design, and state rules via class\u002FID selectors only.\n* HTML must remain clean, semantic, and style-agnostic — retheming the entire page must be possible by editing CSS only, never the markup.\n\n### 1.2 Design Tokens (CSS Variables)\nDefine all tokens in `:root`. Duplicate the dark-mode token block under **both** `@media (prefers-color-scheme: dark)` and `:root.dark` so the no-JS default and the class-based override both work. Recommended starting values (verify 4.5:1 contrast before shipping):\n\n```css\n:root {\n  color-scheme: light;\n  --font-base: 'Inter', system-ui, sans-serif;\n  --font-display: 'Space Grotesk', 'Inter', sans-serif;\n\n  --bg-primary: #fefefe;      \u002F* Exception clause: the source palette's #FFFFFF is\n                                 deliberately implemented as #fefefe per the\n                                 zero-pure-white rule; #F5F5F5\u002F#E0E0E0 map to\n                                 --bg-secondary \u002F --border-default. *\u002F\n  --bg-secondary: #F5F5F5;\n  --bg-elevated: #fefefe;\n  --text-primary: #14161F;\n  --text-secondary: #555B6E;\n  --text-success: #15803D;\n  --text-error: #B3261E;\n  --border-default: #E0E0E0;\n  --border-success: #15803D;\n  --border-error: #B3261E;\n  --primary: #4F46E5;\n  --primary-hover: #4338CA;\n  --primary-contrast: #F7F7FF;   \u002F* text paired ON primary surfaces *\u002F\n  --secondary: #7C3AED;          \u002F* accent for top-layer highlights\u002Fglows *\u002F\n\n  \u002F* 4-level elevation scale (dimensional layering core) *\u002F\n  --shadow-sm: 0 1px 2px rgba(20,22,31,.06), 0 1px 3px rgba(20,22,31,.08);\n  --shadow-md: 0 2px 4px rgba(20,22,31,.06), 0 6px 12px rgba(20,22,31,.08);\n  --shadow-lg: 0 6px 12px rgba(20,22,31,.07), 0 16px 32px rgba(20,22,31,.10);\n  --shadow-xl: 0 12px 24px rgba(20,22,31,.10), 0 32px 64px rgba(20,22,31,.16);\n\n  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;\n  --spacing-gap: clamp(1rem, 3vw, 1.5rem);\n  --section-padding: clamp(4rem, 10vw, 7rem);\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);\n\n  \u002F* Dimensional stacking: 4 content layers, components always above content *\u002F\n  --z-layer-1: 1; --z-layer-2: 2; --z-layer-3: 3; --z-layer-4: 4;\n  --z-header: 40;\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n\n  --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--primary);\n}\n```\n\n**Dark token guidance:** `--bg-primary: #0B0D13`, `--bg-secondary: #141826`, `--bg-elevated: #1A1F30` (elevated surfaces get *lighter* per level so elevation reads without shadows), `--text-primary: #F1F3F9`, `--text-secondary: #9AA1B5`, `--text-success: #4ADE80`, `--text-error: #F87171`, `--border-default: #262B3D`, `--primary: #9BA5FF` paired with `--primary-contrast: #0E1030` (dark text on light button — pairing is mandatory, never light-on-light), `--secondary: #C4B5FD`. Dark shadows must be black-based and deeper, with a subtle `inset 0 1px 0 rgba(255,255,255,.05)` top highlight so elevation remains perceptible.\n\n**Enforced token rules:**\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — in both themes, including text placed on glass\u002Felevated surfaces.\n* Every `z-index` value must come from a `--z-*` variable; never hardcode raw z-index in component rules.\n\n### 1.3 Mandatory Dark Mode\n* Dark tokens defined under both `@media (prefers-color-scheme: dark)` and `:root.dark` (toggle class lives on `\u003Chtml>`).\n* **Persistence:** store the user's explicit choice in `localStorage` (\"theme\"); on first visit fall back to `prefers-color-scheme`. Set `color-scheme` per theme so native scrollbars\u002Fcontrols match. Give `\u003Chtml>` a per-scheme `background-color` to minimize any theme flash.\n* **Visible toggle:** icon-only Material Symbols button in the header, minimum 44×44px, with dynamically updated `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\") and `aria-pressed` reflecting state. The icon swaps sun\u002Fmoon with a smooth CSS transition.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox.\n* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (allowed exceptions: equal-height card grids use `stretch`; footer\u002Fnav link columns use `flex-start`).\n* Mobile-first `min-width` breakpoints (~480\u002F768\u002F1024px). Rows convert to columns on small viewports. **Zero horizontal overflow at 320px** — all overlapping offsets and parallax transforms must collapse or be contained on small screens.\n\n### 1.5 Styling Approach & Naming Convention\n* Pure hand-written CSS organized into native cascade layers: `@layer reset, tokens, base, layout, components, utilities`. No CSS frameworks, no build step, no CDN CSS.\n* **BEM naming only** (`.card`, `.card--featured`, `.card__title`, `.hero__layer`, `.faq__trigger`, `.input-group__error`). Never mix conventions; never invent parallel naming styles.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* Google Fonts via `\u003Clink>` with `preconnect`: **Space Grotesk** (display\u002Fheadings, bound to `--font-display`) + **Inter** (body, bound to `--font-base`).\n* Icons: **Google Material Symbols (Rounded)** via the official stylesheet. Decorative icons get `aria-hidden=\"true\"`; icon-only interactive controls require `aria-label`.\n* **Forbidden:** raw inline SVGs, emoji-as-icons, icon fonts, local icon files.\n\n---\n\n## 2. COMPONENT & SECTION SPECIFICATIONS\n\n### 2.1 Buttons — Full State Matrix (applies to every button on the page)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-md`, `--font-base` weight 600.\n* **Variants:** `.btn--primary` (filled `--primary` \u002F `--primary-contrast` pair), `.btn--outline`, `.btn--ghost`. Also define reusable design-system `.btn--danger`, `.btn--success`, `.btn--error` (danger must be visually distinct in **both** themes; no destructive action appears on this page, but the class must exist).\n* **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring via `--focus-ring` (box-shadow based).\n* **Active\u002Fpressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** `pointer-events: none`, prevents double-clicks, renders a CSS spinner (border animation) or animated Material icon in a fixed-size slot — button dimensions must not change.\n* **Disabled (`[disabled]`):** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA submit flow). All transitions use `--transition-fast`.\n\n### 2.2 Cards — Dimensional Elevation System\n* **Default:** flex column layout, elevated surface token background, `--border-default` border, `--radius-lg`.\n* **Elevation utilities:** `.elev-1`–`.elev-4` map to the shadow scale and `--z-layer-*` tokens; interactive cards **hover** with `translateY(-2px)` plus a one-level shadow bump; optional `translateZ()` lift **only** inside `perspective` parents.\n* **Focus-within:** border shifts to `--primary` when any child link\u002Fbutton is focused.\n* **Skeleton:** define `.skeleton` shimmer keyframes (CSS-only) in the components layer.\n* **Empty state:** define a reusable fallback layout (Material icon + guidance text) in the design system.\n* **Overlap pattern:** cards overlap via negative margins + z-index stagger; all offsets are removed below 768px.\n\n### 2.3 Forms (Final CTA email capture)\n* **Structure:** `.input-group` flex column wrapping an explicit `\u003Clabel>`, `\u003Cinput type=\"email\" required>`, and a dedicated `.input-group__error` container (empty until invalid).\n* **Input states:** empty, focused (ring), filled, `.is-valid` (success border + check icon), `.is-invalid` (error border, red text message, error icon — message rendered inside an `aria-live=\"polite\"` region), disabled, read-only.\n* **Submit flow:** on submit, validate in JS, show button `.is-loading` (~800ms simulated async), then transition to a success state (\"You're on the list\" + check icon) or error feedback — with no dimension shift and no double-submission.\n\n### 2.4 Header & Navigation\n* Sticky `\u003Cheader>` with `\u003Cnav aria-label=\"Primary\">`: logo (Material icon + wordmark), anchor links (Features, How It Works, Pricing, FAQ), theme toggle, header CTA button.\n* Glass header: `backdrop-filter: blur()` with a solid-color `@supports` fallback; add `.header--scrolled` shadow (`--shadow-sm`) via JS scroll listener.\n* Mobile: hamburger (Material icon) disclosure menu with `aria-expanded`\u002F`aria-controls`, elevated at `--z-dropdown`, closes on Esc and on link click, focus returns to the trigger.\n* Anchor scrolling via CSS `scroll-behavior: smooth` (auto under reduced motion) + `scroll-margin-top` on sections. Include a visually-hidden-until-focused skip link.\n\n### 2.5 Hero — Parallax Depth Stage\n* `.hero__stage` with `perspective: 1000px`–`1200px`, `position: relative`.\n* **3+ decorative background layers** (gradient planes, floating orbs, subtle grid) — absolutely positioned, `aria-hidden=\"true\"`, stacked at `--z-layer-1\u002F2`, each tagged `data-parallax` + `data-speed`.\n* **Foreground card** at `--z-layer-4` with `--shadow-xl`: `\u003Ch1>`, subcopy, `.btn--primary` (scrolls to Pricing) + `.btn--outline` (scrolls to How It Works), and trust microcopy.\n* **Floating stat chips** overlap the hero card's edges (negative offsets \u002F absolute positioning) and lift on hover via `translateZ()` inside the perspective stage.\n* **Parallax:** `script.js` rAF loop applies `translate3d` proportional to scroll; **disabled** under `prefers-reduced-motion` and absent JS (layers render statically). Transform-only — never animate layout properties; nothing may overflow the viewport.\n\n### 2.6 Features (3 cards)\n* Staggered overlapping deck: the three cards offset vertically and z-staggered with elevations `md`\u002F`lg`\u002F`xl`, collapsing to a clean column below 768px.\n* Each card: elevated icon chip (Material icon), `\u003Ch3>`, copy, and a \"Learn more\" link with arrow icon — the link's focus triggers the card's `:focus-within` highlight.\n\n### 2.7 How It Works (3 steps)\n* Three step cards whose **elevation progresses** `sm → md → lg` to convey advancement; numbered badges are floating chips overlapping each card's top edge (above the card's z layer).\n* Optional decorative depth connector between steps (aria-hidden, hidden on mobile).\n\n### 2.8 Testimonials (3 cards)\n* Staggered vertical offsets; the **featured middle card** uses a glass style: translucent surface + `backdrop-filter: blur()` with an `@supports` opaque fallback.\n* **Monogram avatar chips** (CSS circles with initials, brand gradient) overlap each card's top edge. Use no external images anywhere.\n* Decorative quote icon (`aria-hidden`), name + role in `--text-secondary`.\n\n### 2.9 Pricing (3 tiers)\n* **Featured middle tier:** `--z-layer-3`, `--shadow-xl`, slight overlap\u002Fscale, floating \"Most popular\" badge overlapping the card border.\n* Feature lists with Material check icons; excluded items shown with a close icon **plus** muted text (never color-only). Do **not** add a billing toggle — it was not requested.\n* Buttons: featured `.btn--primary`, others `.btn--outline` — full state matrix from 2.1, including `.is-loading` → success feedback on click.\n\n### 2.10 FAQ\n* Accordion of `.card` items at `.elev-1`. Each: `\u003Ch3>` wrapping a `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"...\">` with question text + Material `expand_more` icon (rotates 180° on open), and a `.faq__panel` region.\n* Open\u002Fclose animated in CSS only (e.g., `grid-template-rows: 0fr → 1fr`) — no JS height math. Fully keyboard operable; visible focus rings; `aria-expanded` kept in sync by JS.\n\n### 2.11 Final CTA\n* Full-width elevated glass panel: decorative accent shape behind it at `--z-layer-1` (aria-hidden), panel at `--z-layer-3` with `--shadow-xl`, `backdrop-filter: blur()` + `@supports` fallback, slightly overlapping section boundaries for depth (responsive-safe).\n* `\u003Ch2>`, copy, the email capture form from 2.3, and privacy microcopy. Form feedback announced via `aria-live`.\n\n### 2.12 Footer\n* Layered top edge: footer surface slides under the previous section (z-index\u002Fmargin overlap) for depth.\n* Columns: brand blurb + 2–3 secondary link groups (Product, Company, Support\u002FLegal) with real `href`s (section anchors or `#`).\n* Social icon links (Material Symbols) each with a distinct `aria-label`, hover elevation feedback.\n* Bottom bar with copyright (year via JS or static). Contrast must hold in dark mode.\n\n---\n\n## 3. UX, MOTION & ACCESSIBILITY RULES\n\n### 3.1 Responsive by Default\nFluid `clamp()` typography and spacing; breakpoints 480\u002F768\u002F1024; no horizontal overflow anywhere, including during parallax transforms.\n\n### 3.2 Motion & Micro-Interactions\n* All state changes transition via `--transition-fast`\u002F`--transition-normal` and `--ease-standard`.\n* Entrance reveals via IntersectionObserver adding `.is-visible` (opacity\u002Ftranslate only).\n* **Under `prefers-reduced-motion`:** parallax, reveal animations, `translateZ` lifts, shimmer, and smooth scroll are all disabled; every element must remain fully visible and usable.\n\n### 3.3 Accessibility (a11y)\n* Semantic landmarks: `header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`. Exactly one `\u003Ch1>` (Hero); logical heading hierarchy; logical DOM\u002Ffocus order.\n* 4.5:1 text contrast in **both** themes, including text on elevated and glass surfaces. Never communicate state by color alone — pair color with icons, borders, or text.\n* Full keyboard operability; `:focus-visible` rings everywhere; no pointer-only interactions; `aria-live` regions for all dynamic feedback (form errors, submit success\u002Ffailure); decorative layers `aria-hidden`; every icon-only control labeled.\n\n### 3.4 Mandatory Visual Feedback\nEvery click, hover, focus, and submission must trigger a visible state change. `.btn--danger` must be defined and visually distinct in both themes even though this page contains no destructive action.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n* **Files:** exactly `index.html`, `style.css`, `script.js`. The HTML may contain only **one** script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` (plus Google Fonts\u002FMaterial Symbols links in `\u003Chead>`).\n* **script.js scope (vanilla, no libraries):** theme toggle + `localStorage` persistence, header scroll state, mobile menu, rAF parallax, FAQ accordion, form validation\u002Ffeedback, reveal observer. Nothing more.\n* **Naming:** BEM everywhere, one convention, never mixed.\n* **Copy:** realistic English marketing copy for the fictional product in every section — no lorem ipsum; no unrequested placeholder content.\n* **Assets:** fully self-contained — no images, no external assets beyond Google Fonts and Material Symbols.\n* **Pre-delivery self-check:** toggle both themes; test at 320px for overflow; complete the entire journey keyboard-only; verify behavior with reduced motion enabled; confirm zero inline styles and zero hardcoded z-index values.\n",1791954991192]