[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-777-FOLD-one-thousand-cranes":3},"# System Prompt — Build the \"FOLD — One Thousand Cranes\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready landing page code in a single response, on the first attempt. No stubs, no TODOs, no follow-up questions.\n\n**Project Brief:**\n- **Theme:** \"FOLD — One Thousand Cranes\" — an artistic\u002Fcreative landing page inspired by origami, the ritual of folding, and the senbazuru legend (one thousand folded cranes, one granted wish).\n- **Style:** 2020s Contemporary; keywords: origami, folding, steps, artistic, creative, animated, gradient.\n- **Sections to build:** Sticky Header\u002FNav (including theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Palette:** Primary `#d8cbb0`, `#4a3a28`, `#5a4a32`; Secondary `#9a8760`, `#7a6a4a`, `#c9552e` (rust accent).\n- **Effects:** Gradients, 3D\u002FParallax, Hover Effects, Noise\u002FGrain.\n- **Required CSS techniques:** Flexbox, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Border Radius, Aspect Ratio.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- All styling lives exclusively in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target every element via class or ID selectors only.\n- Keep HTML semantic and presentation-agnostic: changing the theme must never require markup edits.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root` and override them per theme. Mandatory token names: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`. You may extend with `--font-base`, `--font-display`, `--primary-strong`, `--text-on-primary`, and gradient tokens.\n\n**Suggested starting values (verify every pair for WCAG AA — 4.5:1 body text, 3:1 large text\u002FUI — and adjust shades while preserving hue):**\n- **Light theme (default):** `--bg-primary: #f6efdd` (warm paper — never `#ffffff`; use `#fefefe` only where a near-white surface is unavoidable), `--bg-secondary: #d8cbb0`, `--text-primary: #4a3a28`, `--text-secondary: #7a6a4a`, `--primary: #c9552e` (rust), `--secondary: #9a8760`, `--border-default: #c4b598`, `--text-success: #2f6b45`, `--text-error: #b3261e`.\n- **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark text, dark backgrounds pair with light text.\n- **Rust accent rule:** `#c9552e` against white is ~4.3:1 — passable only for large\u002Fbold text and UI. Define `--primary-strong` (a darkened rust, e.g., `#a83e1c`) and use it whenever small text sits on rust or rust appears as small text.\n- **Error\u002Faccent separation:** the brand accent is rust-orange, so error states must never use `#c9552e`. Use a clearly distinct red (`--text-error`) plus a Material Symbol error icon — never color alone.\n- **Dark theme (see 1.3):** `--bg-primary: #221a10`, `--bg-secondary: #2e2415`, `--text-primary: #f1e9d6`, `--text-secondary: #c9bfa8`, `--primary: #e0693f` (brightened rust for dark-mode contrast), with success\u002Ferror tokens re-tuned for AA on dark surfaces.\n\n### 1.3 Mandatory Dark Mode Support\n- Dark Mode must always be defined. Provide dark tokens via both a `.dark` class on `\u003Chtml>` and `@media (prefers-color-scheme: dark)` (scoped so explicit user choice wins).\n- **Persistence:** read the user's choice from `localStorage`, fall back to `prefers-color-scheme` on first visit, and set `color-scheme` accordingly. Include a visible toggle button in the header with sun\u002Fmoon Material Symbols, correct `aria-pressed` state, and a descriptive `aria-label` that updates with state.\n- **Exception clause:** the source style spec prioritizes Light mode (✓ Light \u002F ○ Dark); therefore Light is the default presentation — but full Dark Mode support remains mandatory, not optional.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build every layout structure with Flexbox.\n- **Every flex container defaults to `align-items: center`** unless a documented exception exists (e.g., feature lists with top-aligned icons must state why).\n- Mobile-first: all rows (feature cards, pricing tiers, nav, footer columns) collapse to single columns on small viewports. **No horizontal scrolling at any breakpoint** — clip decorative absolutely-positioned elements inside `overflow: hidden` wrappers.\n\n### 1.5 Framework & Naming Convention\n- Use clean, framework-free custom CSS (no Tailwind, no libraries) organized in clearly commented layers: tokens, base, layout, components, sections, utilities.\n- **BEM naming throughout** (`.hero`, `hero__title`, `card`, `card--featured`, `btn`, `btn--primary`, `accordion__panel`). One convention only — never mix BEM with ad-hoc utility names.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Fonts:** Google Fonts only — use **Fraunces** (display serif, `--font-display`) for headlines and **Inter** (`--font-base`) for body\u002FUI text. Include via `\u003Clink>` with `preconnect`.\n- **Icons:** Google Material Symbols (Rounded variant) via the Google Fonts link. **Raw inline SVGs, local icon files, and emoji icons are forbidden.**\n- **Exception clause:** a CSS data-URI `feTurbulence` noise texture used as a `background-image` in `style.css` (for the grain overlay, see §3) is a permitted CSS technique and does not violate the inline-SVG icon ban.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component\nStyle all states via BEM modifier classes; default layout `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target.\n- **Default:** solid rust (`--primary` \u002F `--primary-strong` for small labels) and secondary variants (`bg-secondary` with dark text, and outline variants using `--border-default`). Generous `--radius-md`.\n- **Hover:** brightness\u002Felevation shift plus an \"origami fold\" micro-interaction — a subtle `transform: perspective()` tilt or corner-fold accent. `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring via `box-shadow` using `--primary`, visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables interaction (prevents double-clicks), renders an animated Material Symbol spinner or CSS spinner **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, desaturated, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used on the Final CTA form submit, if present).\n- No destructive actions exist in this build; if any are added, `.btn--danger` must be visually distinct in both themes.\n\n### 2.2 Card Component\nUsed for Features, Testimonials, and Pricing. Default: flexbox layout, `--bg-secondary` (light) \u002F elevated dark surface, `--border-default` border, `--radius-lg`, `--shadow-sm`.\n- **Hover:** elevation shift plus `transform: translateY(-2px)` with `--transition-normal`.\n- **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define shimmer keyframe styles for cards so future async content causes no layout jump.\n- **Empty state:** define a structured fallback style (Material Symbol + guidance text).\n- **Pricing variant:** `.card--featured` for the middle tier — stronger border\u002Felevation, a \"Most popular\" badge, and a scale\u002Femphasis treatment; must read as featured in both themes.\n- **Testimonial variant:** `.avatar` circles via `aspect-ratio: 1`, gradient backgrounds, and initials in a contrasting token; a `format_quote` Material Symbol; any star rating must include a text\u002F`aria-label` equivalent (\"Rated 5 out of 5\") — never color alone.\n\n### 2.3 Form & Input Requirements\nIf you include an email capture in the Final CTA (recommended), build it as a flex input group: label, input, dedicated error message container.\n- **States:** empty, focused (outline ring via `--primary`), filled, valid (success border + `check_circle` icon), invalid (error border, `--text-error` text, `error` icon), disabled, read-only.\n- Validate in JS with an `aria-live=\"polite\"` status region; success renders a confirmation message using `--text-success`. No color-only communication.\n\n### 2.4 FAQ Accordion\n- Build as `\u003Cbutton>` headings with `aria-expanded` + `aria-controls`, paired with region panels; toggle open\u002Fclose with a CSS `grid-template-rows: 0fr → 1fr` animation (transition `--transition-normal`) and a rotating `expand_more` chevron.\n- Fully keyboard operable, visible focus rings, multiple panels may be open. Provide 6 on-brand questions (paper choices, folding time, the thousand-crane tradition, gifting, group folds, shipping\u002Ffulfillment).\n\n### 2.5 Modal \u002F Popup\nNo modal exists in the requested section list. If you introduce any overlay, it must include: centered flex container, backdrop, Material Symbol close button, focus trap, `Esc`\u002Foverlay-click closing, animated open\u002Fclose states, and correct `--z-modal` stacking.\n\n### 2.6 Section-Specific Requirements & Content Direction\nWrite all user-facing copy in **English**, on-brand (warm, artisanal, ritual-of-folding voice). No lorem ipsum.\n- **Header:** sticky, translucent with `backdrop-filter: blur()`, bottom border, wordmark \"FOLD\", anchor links, theme toggle. On small screens, implement an accessible disclosure menu button (`aria-expanded`, `aria-controls`, `Esc` closes and returns focus, click-outside closes) — no mouse-only interactions.\n- **Hero:** single `h1` (e.g., \"One thousand folds. One wish.\"), tagline, dual CTA buttons (primary + secondary). Include a CSS-only origami crane showpiece built from `clip-path: polygon()` triangles with gradient fills, animated on load by a keyframe \"fold-in\" (`rotateX`\u002F`scaleY` from flat), plus 2–3 smaller decorative floating cranes on parallax layers (all `aria-hidden=\"true\"`, `pointer-events: none`). Warm paper gradient background.\n- **Features (3 cards):** one Material Symbol per card (e.g., `auto_awesome`, `gesture`, `diversity_3`), title + body, hover lift, staggered reveal.\n- **How It Works (3 steps):** numbered medallions (square, `aspect-ratio: 1`, `--radius-md`), thematically named (e.g., \"Choose your paper\" → \"Fold along the creases\" → \"String your wish\"), connected by dashed fold lines, staggered keyframe entrance.\n- **Testimonials:** 3 cards with gradient-initial avatars, quotes, names, and roles.\n- **Pricing (3 tiers):** thematically named (e.g., \"Single Fold\", \"Flock of One Hundred\", \"Thousand Cranes\"), middle tier featured per §2.2, feature lists with `check_circle` icons, per-tier CTA buttons.\n- **FAQ:** per §2.4.\n- **Final CTA:** full-width gradient panel (cream → rust), headline, primary button, optional email input per §2.3.\n- **Footer:** brand blurb, secondary link columns (About, How It Works, Pricing, FAQ, Privacy, Terms, Contact), social links as labeled Material Symbol links, copyright line. All links keyboard-focusable with visible focus.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, standard breakpoints, `scroll-margin-top` on sections to offset the sticky header; `overflow-x` guarded.\n- **Smooth animations:** apply `transition: var(--transition-normal)` to all state changes.\n- **Reduced motion:** under `prefers-reduced-motion`, disable parallax, floating, fold-in, and scroll animations; keep simple opacity changes; enable `scroll-behavior: smooth` only within `prefers-reduced-motion: no-preference`.\n- **Gradients:** warm paper gradients (`#d8cbb0` → `#9a8760` → hints of `#c9552e`) for hero and Final CTA backgrounds; if any gradient text is used on headlines, it must still meet AA contrast — otherwise keep display text solid `--text-primary`.\n- **3D\u002FParallax:** `perspective` on the hero with layered `translateZ`\u002F`translate3d` parallax driven by scroll (and optional pointer tilt) via a single `requestAnimationFrame` loop that writes `transform` only; passive listeners; fully disabled under reduced motion.\n- **Noise\u002FGrain:** a fixed, full-viewport grain overlay implemented in CSS (data-URI turbulence texture at low opacity), `pointer-events: none`, tuned so it never degrades text contrast in either theme.\n- **Scroll reveals:** IntersectionObserver adds `.is-visible` for staggered fade-up entrances; **initial hidden states must be scoped under an `html.js` class added by the deferred script** so content is fully visible without JavaScript.\n- **Accessibility (a11y):** skip link; semantic landmarks (`header`, `nav`, `main`, `footer`, `section` with `aria-labelledby`); logical heading order (one `h1`, `h2` per section); full keyboard operability; visible `:focus-visible` rings in both themes; `aria-live` regions for form feedback and dynamic states; AA contrast in both modes; never color-only state communication.\n- **Mandatory visual feedback:** every click, hover, link, toggle, and submission produces a visible state change.\n- **CSS Filters:** use tastefully — `backdrop-filter` on the header, soft `filter: blur()` on decorative depth layers.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cstyle>` blocks; the only `\u003Cscript>` is a single deferred `script.js` reference. No external JavaScript libraries; the only external resources are Google Fonts links.\n- **JS scope (vanilla, progressive enhancement only):** theme toggle + persistence (§1.3), header menu disclosure, FAQ accordion, scroll reveals, parallax loop, optional email validation. The page must remain readable and navigable if JavaScript fails.\n- **Naming:** BEM consistently across all files — never mixed conventions.\n- **Copy:** complete, real, on-brand English copy for every section; placeholders only where content was genuinely unspecified (invent tasteful testimonial names\u002Fquotes and copy in the brand voice).\n- **No raster images:** all visuals are CSS-drawn (gradients, clip-path cranes, grain) — self-contained output.\n- **Completeness:** deliver the full landing page for all nine sections on the first attempt, functioning in Light and Dark modes across mobile\u002Ftablet\u002Fdesktop, with nothing left as an exercise for the reader.\n",1791954992656]