[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-742-SUSPENSION-a-study-of-beautiful-waiting":3},"# BUILD SPECIFICATION — \"SUSPENSION\" INTERACTIVE LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt — all HTML, CSS, and JS — in a single response. Do not output partial scaffolds or TODOs.\n\n**Project Brief:**\n- **Theme:** *SUSPENSION — a study of beautiful waiting.* A 2020s Contemporary, interactive\u002Fanimated landing page that celebrates loading states, spinners, and the beauty of anticipation. Keywords: fluid, spinner, loader, interactive, animated, gradient.\n- **Fictional Product Narrative:** \"Suspension\" is a motion-design toolkit that turns loaders, queues, and delays into calm, choreographed experiences. All copy must be real, on-theme English — no lorem ipsum.\n- **Visual Effects (Mandatory):** Gradients and hover effects, delivered through Flexbox, keyframe animations, transitions, transforms, gradients, and border radius.\n- **Page Sections (Mandatory, in order):** Sticky Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **No external images of any kind.** Every visual is built from CSS gradients, typography, and Google Material Symbols.\n\n**Palette → Token Mapping (authoritative):**\n- Accent: `#ff7a3d` (orange) and `#ffb43d` (amber). Signature gradient: `linear-gradient(135deg, #ff7a3d, #ffb43d)`.\n- Inks: `#17181c` and `#101116` (dark surfaces\u002Ftext).\n- Greys: `#c9cbd4` (light), `#6a6d78` (mid).\n- **Contrast law:** Orange\u002Famber\u002Fgradient surfaces must **always** carry dark ink text (`#17181c`) — white on orange fails contrast (~2.6:1) and is forbidden. Dark surfaces (`#101116`\u002F`#17181c`) must always carry light text (`#fefefe`\u002F`#c9cbd4`).\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 anywhere in the HTML.**\n- Target every rule via class or ID selectors only. HTML stays semantic and style-agnostic: `header`, `nav`, `main`, `section`, `article`, `footer`, `address`.\n- Changing the theme must require editing CSS only — never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (light, canonical) and override under `.dark`:\n- **Colors:** `--primary: #ff7a3d`, `--secondary: #ffb43d`, `--bg-primary: #fefefe` (never `#ffffff`; layer a subtle warm radial-gradient tint on the body), `--bg-secondary: #f4f5f8` (a tint of `#c9cbd4`), `--text-primary: #17181c`, `--text-secondary: #6a6d78`, `--border-default: #d8dae0`, plus `--text-success: #0f8a5f`, `--text-error: #d64545`, `--border-success`, `--border-error`, `--ink-on-accent: #17181c`, `--gradient-accent: linear-gradient(135deg, #ff7a3d, #ffb43d)`.\n- **Dark overrides:** `--bg-primary: #101116`, `--bg-secondary: #17181c`, `--text-primary: #fefefe`, `--text-secondary: #9a9dab` (lightened from `#6a6d78` — the raw grey fails 4.5:1 on `#101116`), `--border-default: #2b2d36`, `--text-success: #34d399`, `--text-error: #ff6b6b`.\n- **Radius & Shadow:** `--radius-sm: 10px`, `--radius-md: 16px`, `--radius-lg: 28px`, `--shadow-sm`, `--shadow-md`, plus `--glow-accent: 0 8px 32px rgba(255,122,61,.35)`.\n- **Spacing, Motion, Layers:** `--spacing-gap: 1.5rem`, `--spacing-section: clamp(4rem, 10vw, 7rem)`, `--transition-fast: 150ms`, `--transition-normal: 320ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`, `--z-header: 900`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`.\n\n**1.3 Mandatory Dark Mode Support**\n- Provide dark tokens via **both** `.dark` class and `@media (prefers-color-scheme: dark)`; the class must win when applied.\n- **JS:** read `localStorage` key `suspension-theme`; on first visit fall back to `prefers-color-scheme`; persist explicit toggles. Header contains a visible toggle button with `aria-pressed` reflecting state and a descriptive `aria-label`; icons crossfade between `light_mode` \u002F `dark_mode` Material Symbols.\n- All text\u002Fbackground pairs must meet WCAG AA in **both** themes.\n- **Exception clause (per source style spec):** Light mode is the canonical brand presentation — design it as the hero look first — but the dark theme is a mandatory, fully-realized counterpart, not an afterthought.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless a written exception is justified in a CSS comment (e.g., step timelines or stacked text blocks use `flex-start`).\n- Mobile-first: single column by default; promote to multi-column at `min-width: 768px` and `1024px` (max container `1128px`). Zero horizontal overflow at any width — apply `min-width: 0` to flex children and `box-sizing: border-box` globally.\n\n**1.5 CSS Architecture**\n- Use clean, framework-free custom CSS organized in native `@layer` order: `@layer tokens, base, layout, components, animations, utilities;`.\n- Reusable generic classes required: `.btn`, `.card`, `.input-group`, `.container`, `.section`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Google Fonts via `\u003Clink>`: **Sora** (headings, weights 600–800, bound to `--font-display`) and **Inter** (body, 400–600, bound to `--font-base`).\n- Icons: **Google Material Symbols (Rounded)** via `\u003Clink>`, used as `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>`. **Raw inline SVGs and local icon files are forbidden.** Avatars are gradient monogram circles (initials in `--ink-on-accent`), never photos.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: .5rem;` min touch target 44×44px. `.btn--primary` uses `--gradient-accent` background with `--ink-on-accent` text; `.btn--secondary` is a bordered ghost; `.btn--danger` (define even if unused) is visually distinct in both themes.\n- **Hover:** `filter: brightness(1.05)` + `translateY(-1px)` + shadow shift; `cursor: pointer`.\n- **Focus:** visible `:focus-visible` ring via `outline` + `outline-offset` using `--primary`; never remove outlines.\n- **Active:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` — `aria-busy=\"true\"`, pointer-events disabled, spinner via a Material Symbol `progress_activity` with a `spin` keyframe; button dimensions must not change.\n- **Disabled:** `opacity: .5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` swap icon + label briefly, colored by `--text-success` \u002F `--text-error` — never color alone; always pair with an icon or text change.\n\n**2.2 Cards (`.card`)**\n- **Default:** flex column, `--bg-secondary`, `--radius-md`, `--border-default`, subtle shadow.\n- **Hover:** `translateY(-2px)` + `--shadow-md` elevation shift (the \"suspension lift\").\n- **Focus-within:** border highlights `--primary` when a child link\u002Fbutton is focused.\n- **Loading (Skeleton):** `.card--skeleton` shimmer — translucent gradient band (200% width) swept by a `shimmer` keyframe on `background-position`; no layout shift.\n- **Empty State:** `.card--empty` pattern with a Material icon and guidance text, defined in CSS.\n\n**2.3 Form & Input (`.input-group`)**\n- Structure: flex column wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error `\u003Cp>` with `aria-live=\"polite\"` + `aria-describedby` wiring.\n- **States:** empty; `:focus` ring (`box-shadow` with `--primary`); filled; `.is-valid` (success border + `check` icon); `.is-invalid` (error border, `--text-error` message, `error` icon); `:disabled`; `readonly` — each styled via CSS only.\n- JS validation with `novalidate`; on submit the button enters loading (~1.2s simulated), then success; feedback announced via `aria-live`.\n\n**2.4 Modal — \"Watch the Study\" Demo**\n- Hero secondary CTA opens a demo modal that literally performs the theme: progress bar fill (~2s) → skeleton shimmer rows → content card reveal (success state).\n- **States:** opening (scale .96→1 + fade), open, loading, success, closing — all via CSS transitions.\n- **Requirements:** centered flex overlay (`align-items: center`), blurred backdrop at `--z-modal`, `role=\"dialog\"` + `aria-modal=\"true\"` + labelled by title, Material Symbol `close` button, Esc and backdrop-click close, keyboard focus trap, focus returned to the opener, and an internal `aria-live` status describing the choreography stage.\n\n---\n\n## 3. PAGE SECTION REQUIREMENTS\n\n**3.1 Sticky Header** — Wordmark \"Suspension\", anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with animated gradient-underline hover, theme toggle, compact `.btn--primary`. `backdrop-filter: blur` panel; JS adds `.is-scrolled` shadow. Mobile: collapses behind a `menu` icon button (`aria-expanded`), column layout, closes on Esc\u002Flink click.\n\n**3.2 Hero** — Eyebrow \"A study of beautiful waiting\"; H1 \"Make every moment of waiting worth watching.\" (gradient `background-clip: text` on one phrase); subcopy; CTAs \"Start for free\" → `#pricing`, \"Watch the study\" → modal. Centerpiece: a conic-gradient ring (`conic-gradient` masked to a ring) rotating via `spin`, a breathing radial-gradient orb behind it (`breathe`), and 3 floating icon chips (`progress_activity`, `hourglass_top`, `schedules`) with staggered `float` animations. Hovering the centerpiece speeds the spin and scales 1.02. Soft blurred gradient blobs drift behind (`drift`). Animated scroll cue (`expand_more`).\n\n**3.3 Features — 3 Cards** — \"Choreographed Loaders\" (`progress_activity`), \"Breathing Skeletons\" (`blur_on`), \"Wait-State Choreography\" (`animation`). Icon badges on tinted gradient chips scale\u002Frotate on card hover; cards lift with `--shadow-md`. At least one card contains a **live CSS-only skeleton shimmer demo**.\n\n**3.4 How It Works — 3 Steps** — `01 Suspend` (`hourglass_top`), `02 Animate` (`animation`), `03 Release` (`rocket_launch`), each with numbered gradient circles and real copy. Horizontal 3-column with a connecting gradient line on desktop (animated `scaleX` on reveal); vertical left-rail timeline on mobile. This container may use `align-items: flex-start` — justify in a comment.\n\n**3.5 Testimonials — 3 Cards** — `format_quote` icon, 5 `star` icons, real fictional quotes with name\u002Frole, gradient monogram avatars. Hover lift + gradient border glow.\n\n**3.6 Pricing — 3 Tiers + Toggle** — Tiers: **Drift** (Free), **Hover** ($12\u002Fmo, featured — gradient border, \"Most popular\" badge, `--glow-accent`, `.btn--primary`), **Levitate** ($29\u002Fmo). Monthly\u002FYearly segmented toggle: moving gradient thumb, `aria-pressed` on both options, yearly prices $10\u002F$24 with \"billed annually\" note, price change cross-fades and is announced via `aria-live=\"polite\"`. Feature lists use `check` icons.\n\n**3.7 FAQ — Accordion** — 5 real questions (performance impact, custom brand colors, accessibility of motion presets, free tier, framework support). Each item: `\u003Cbutton aria-expanded>` + `aria-controls`, panel `role=\"region\"` + `aria-labelledby`, `expand_more` chevron rotating 180°, open\u002Fclose animated via the `grid-template-rows: 0fr→1fr` technique. Single-open behavior; Esc closes the focused item; fully keyboard operable.\n\n**3.8 Final CTA** — Dark contrast band (`#101116` in light mode; elevated `#17181c` in dark mode) with drifting gradient glow, light text per contrast law. Headline \"Give your users something beautiful to wait for.\" Email capture per Spec 2.3 with placeholder \"you@studio.com\", button \"Get early access\", success state \"You're on the list — beautifully done.\"\n\n**3.9 Footer** — Brand + one-line tagline, three secondary link columns (Product, Resources, Company) using real labels with `#` hrefs, bottom bar with \"© 2025 Suspension. All waits reserved.\" Text or generic Material icons for links (`mail`, `public`) — no brand SVGs.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, no horizontal scrolling at any viewport.\n- **Required named keyframes:** `spin`, `float`, `drift`, `breathe`, `shimmer`, `gradient-pan`, `rise`, plus a `draw` reveal for the steps connector. All state changes use `transition: var(--transition-normal) var(--ease-standard)`.\n- **Scroll reveals:** elements with `.reveal` get `opacity: 0; translateY(24px)` and gain `.is-visible` via `IntersectionObserver` (unobserve after firing) — the \"release from suspension\" motif.\n- **Reduced motion:** under `prefers-reduced-motion: reduce`, disable transforms\u002Ftransitions\u002Fdecorative loops; reveals render visible instantly; loading indicators remain perceivable (paired with text status).\n- **Accessibility:** skip link; logical heading hierarchy (one `h1`, `h2` per section, `h3` in cards); landmarks with `aria-labelledby`; full keyboard operability — no mouse-only interactions; `aria-live` for form errors, billing changes, and modal status; state is never communicated by color alone; AA contrast verified in both themes.\n- **Mandatory visual feedback:** every link, button, toggle, and card responds visibly to hover\u002Ffocus\u002Factive.\n- Generate the complete `index.html`, `style.css`, and `script.js` **now**, on the first attempt, using BEM naming only (e.g., `.hero__title`, `.pricing__card--featured`, `.faq__trigger`), with a single deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` and no inline script or style blocks.\n",1791954992066]