[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-831-Batik":3},"# BUILD PROMPT — BATIK-THEMED LANDING PAGE (FULL SPECIFICATION FOR CODING AI)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready landing page in a single first attempt**. Follow every rule in this document exactly — no rule may be omitted, relaxed, or deferred. Output the full final code for all three files with no truncation, no \"rest of the code\" placeholders, and no follow-up questions.\n\n**Project:** A single-page landing page for a fictional artisan batik textile house — hand-drawn *tulis* batik, natural indigo dyeing, and heritage Javanese patterns. Write all user-facing copy in polished **English** with an artisan\u002Fheritage voice. No lorem ipsum.\n\n**Sections required (in order):** Sticky Nav + Theme Toggle → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **All styling must live in `style.css`.** The `style=\"...\"` attribute is **forbidden anywhere in the HTML**.\n- Target every element via **class or ID selectors only**. No tag selectors beyond base resets (`body`, headings, `*` box-sizing).\n- Keep the HTML **semantic and style-agnostic** (landmarks, headings, lists, buttons) so the entire theme could be swapped by editing CSS alone.\n\n### 1.2 Design Tokens (CSS Variables) — Canonical Token Block\nUse **exactly this consolidated `:root` block** (mandatory token names + Batik theme tokens). Do not rename tokens:\n\n```css\n:root {\n  \u002F* color — light mode \"cloth day\" *\u002F\n  --bg-primary: #f3e6cd;        \u002F* natural cloth ground *\u002F\n  --bg-secondary: #faf1de;      \u002F* surface *\u002F\n  --bg-raised: #e7d3ab;         \u002F* surface-2 *\u002F\n  --text-primary: #2b1c12;\n  --text-secondary: #6b5335;    \u002F* muted brown *\u002F\n  --primary: #2c4a6e;           \u002F* indigo dye *\u002F\n  --secondary: #b5501f;         \u002F* rust accent *\u002F\n  --accent-ochre: #c68a2e;      \u002F* decorative ochre — ornament only, never body text *\u002F\n  --indigo-deep: #1c3350;\n  --on-primary: #faf1de;        \u002F* text color paired ON --primary backgrounds *\u002F\n  --on-secondary: #faf1de;      \u002F* text color paired ON --secondary backgrounds *\u002F\n  --text-success: #3f6b34;\n  --text-error: #a93226;\n  --border-default: #e7d3ab;\n  --border-success: #3f6b34;\n  --border-error: #a93226;\n\n  \u002F* radius *\u002F\n  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 26px; --radius-pill: 999px;\n\n  \u002F* shadow (cloth elevation) *\u002F\n  --shadow-sm: 0 4px 12px rgba(43,28,18,0.14);\n  --shadow-md: 0 10px 26px rgba(43,28,18,0.18);\n\n  \u002F* spacing & motion *\u002F\n  --spacing-gap: 24px;\n  --transition-fast: 0.15s;\n  --transition-normal: 0.25s;\n  --ease-standard: cubic-bezier(0.33, 0.0, 0.2, 1);\n\n  \u002F* elevation *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n\n  \u002F* typography — Google Fonts *\u002F\n  --font-base: 'Cormorant Garamond', system-ui, serif;\n  --font-display: 'Marcellus', 'Cormorant Garamond', serif;\n\n  \u002F* Batik texture tokens *\u002F\n  --crackle-veins: repeating-conic-gradient(from 20deg at 30% 40%,\n      rgba(43,28,18,0.05) 0deg 4deg, transparent 4deg 26deg);\n  --motif-border: repeating-linear-gradient(90deg,\n      #2c4a6e 0 6px, #c68a2e 6px 8px, transparent 8px 22px);\n  --kawung-dots: repeating-radial-gradient(circle at 12px 12px,\n      rgba(44,74,110,0.18) 0 3px, transparent 3px 24px);\n}\n```\n\n- **Contrast pairing rule (both themes):** every light background token must pair with a dark text token and every dark background token with a light text token. `--on-primary` \u002F `--on-secondary` must flip with the theme (see 1.3).\n- **Ochre (`#c68a2e`) fails body-text contrast on the cream ground** — use it only for borders, ornaments, badges, and decorative motifs, never for paragraphs.\n\n### 1.3 Mandatory Dark Mode\nThe source specification **does not declare light\u002Fdark modes and requires validation in both before publishing** — therefore you must author the dark palette yourself:\n\n- Implement dark mode via a `.dark` class on `\u003Chtml>` **and** an `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` fallback so first-visit users get their OS preference.\n- Define this dark token set (\"night cloth\"), then validate every pairing ≥ 4.5:1 for body text and ≥ 3:1 for large text\u002FUI edges:\n\n```css\n.dark {\n  --bg-primary: #131b29;   --bg-secondary: #1b2a41;   --bg-raised: #243655;\n  --text-primary: #f3e6cd; --text-secondary: #c9ab7e;\n  --primary: #8fb0d9;      \u002F* lightened indigo — dark text must sit on it *\u002F\n  --secondary: #d96b33;    --accent-ochre: #d99a3c;   --indigo-deep: #0d1522;\n  --on-primary: #131b29;    --on-secondary: #131b29;   \u002F* pairing flips! *\u002F\n  --text-success: #9ac48a; --text-error: #e8836b;\n  --border-default: #3a5170; --border-success: #9ac48a; --border-error: #e8836b;\n  --shadow-sm: 0 4px 12px rgba(0,0,0,0.45); --shadow-md: 0 10px 26px rgba(0,0,0,0.55);\n  --crackle-veins: repeating-conic-gradient(from 20deg at 30% 40%,\n      rgba(243,230,205,0.05) 0deg 4deg, transparent 4deg 26deg);\n}\n```\n\n- **Theme switching must be token-only** — no HTML restructuring, no duplicated stylesheets.\n- **Persistence:** in `script.js`, read `localStorage('theme')` on load; if absent, fall back to `prefers-color-scheme`; apply `.dark` or `.light` class accordingly and save on toggle.\n- **Visible toggle control** in the nav: a 44×44px icon button containing both Material Symbols (`dark_mode`, `light_mode`) shown\u002Fhidden via CSS based on the html class, with dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\") and `aria-pressed` reflecting the current dark state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build **all layout structures with Flexbox** (`display: flex`). Do not use CSS Grid.\n- **Every flex container defaults to `align-items: center`** unless a section explicitly needs stretch (document the exception in a CSS comment if used).\n- **Mobile-first:** all multi-column rows (features, steps, testimonials, pricing, footer columns, hero) are `flex-wrap: wrap` with `flex: 1 1 280px` children so they collapse to a single column on small viewports. **No horizontal scrolling at 320px width.**\n- Nav collapses to an accessible hamburger below 768px (button with `aria-expanded` + `aria-controls`, flex-column panel, Esc closes it, focus returns to the button).\n\n### 1.5 Styling Approach\nUse **clean custom vanilla CSS** matching the provided base component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) as the foundation — extend them per Section 3 below. Do **not** introduce Tailwind or any other framework. All styles must consume the tokens from 1.2; no hard-coded colors outside `:root`\u002F`.dark`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load **Google Fonts** via `\u003Clink>` with `preconnect`: **Cormorant Garamond** (400, 500, 600 + italics) bound to `--font-base`, and **Marcellus** (400) bound to `--font-display` for all headings.\n- Load **Google Material Symbols (Rounded)** via `\u003Clink>` and use `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>` for every icon (nav toggle, feature glyphs, check marks, stars, chevrons, quote marks, social icons).\n- **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. PAGE STRUCTURE & SECTION REQUIREMENTS\n\nAll sections live inside `\u003Cmain>` (except nav\u002Ffooter), each as `\u003Csection id=\"…\" aria-labelledby=\"…\">` with an `\u003Ch2>`. Include a visually-hidden skip link to `#main`. Apply `scroll-margin-top` for the sticky nav and smooth `scroll-behavior` (disabled under reduced motion).\n\n- **2.1 Nav (sticky):** Marcellus wordmark \"Tulis House\" linking to top; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (1.3); primary CTA \"View Cloth\" → `#pricing`. Bottom edge uses `--motif-border` as a 3px signature stripe.\n- **2.2 Hero:** eyebrow `.badge` (\"Hand-drawn in wax · Dyed in indigo\"), `--font-display` `\u003Ch1>`, lede paragraph, two CTAs (`.btn--primary` \"Explore the Collection\" + `.btn` ghost \"Book a Workshop\" → `#how-it-works`). Right side: a decorative panel built purely from CSS (`--kawung-dots`, `--crackle-veins`, ochre\u002Findigo gradients, `--motif-border` frame) — **no external images anywhere on the page**.\n- **2.3 Features (3 cards):** `\u003Ch2>` + three `.card`s, each with a circular ochre-ringed Material Symbol (`gesture`, `water_drop`, `workspace_premium`), `\u003Ch3>`, copy on hand-drawn craft, natural dye, and court heritage patterns.\n- **2.4 How It Works (3 steps):** three flex steps with large `--radius-pill` number badges (01\u002F02\u002F03), symbols, `\u003Ch3>`s (\"Draw the Wax\", \"Crackle & Dye\", \"Boil & Reveal\"), connected on wide screens by a `--motif-border` divider line.\n- **2.5 Testimonials (3 cards):** each with `format_quote` symbol, real-sounding English quote, 5 `star` symbols, and an initials avatar (flex circle, indigo ground, `--on-primary` text), name + role.\n- **2.6 Pricing (3 tiers):** `.card`s for \"Kawung — Single Cloth · $68\", featured \"Parang — Atelier Bundle · $145\" (scaled up, accent top border, `.badge` \"Most Popular\"), \"Tulis Commission — from $320\". Each has a feature list (`check` symbols) and a CTA (featured uses `.btn--primary`; others `.btn`).\n- **2.7 FAQ:** 5 native `\u003Cdetails>\u002F\u003Csummary>` items with authored English Q&A. Custom styling: summary is a flex row (question + `chevron_right` symbol rotating 90deg on `[open]`), visible `:focus-visible` ring, no default marker, generous hit area.\n- **2.8 Final CTA:** full-width indigo panel (indigo-deep ground, `--crackle-veins` overlay, `--motif-border` top and bottom stripes), `\u003Ch2>` + copy + **newsletter form** (see 3.3) with a live status region.\n- **2.9 Footer:** `--motif-border` divider on top; flex columns (brand blurb, \"Shop\" links, \"Studio\" links, \"Follow\" Material Symbol social links); bottom bar with © line and secondary legal links (Privacy, Terms, Shipping). All links are valid in-page anchors or `href=\"#\"` with `aria-label`s describing the target.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n### 3.1 Buttons — Full State Matrix\nExtend the provided `.btn` base (flex; `align-items: center; justify-content: center; gap: 0.5rem`; min 44×44px) with CSS classes for **every state**: **default**, **hover** (shadow `--shadow-sm` + `translateY(-1px)`, `cursor: pointer`), **focus-visible** (`outline: 2px solid var(--primary); outline-offset: 3px`), **active** (`transform: scale(0.97)`), **loading** (`.is-loading`: `pointer-events: none`, animated CSS spinner or rotating Material Symbol, fixed dimensions — no layout shift), **disabled** (`opacity: 0.5`, greyscale, `cursor: not-allowed`), and **success\u002Ferror feedback** (`.btn--success` \u002F `.btn--error` using `--text-success` \u002F `--text-error` tokens, visible in both themes). `.btn--primary` must use `--on-primary` for its text so contrast flips correctly in dark mode. Destructive variants (`.btn--danger`), if used, must be visually distinct in both themes.\n\n### 3.2 Cards — Full State Matrix\n- **Default:** flexbox, `--bg-secondary` ground, `--crackle-veins` texture, 4px accent top border, `--shadow-md`, `--radius-lg`.\n- **Hover:** `translateY(-2px)` + shadow shift. **Focus-within:** border highlights `--primary` when a child link\u002Fbutton is focused.\n- **Loading:** define `.card--skeleton` shimmer animation styles in CSS (part of the component system). **Empty state:** define `.card--empty` (Material Symbol + guidance text pattern). Skeletons must reserve real dimensions to prevent layout jumps.\n\n### 3.3 Forms & Inputs (Newsletter)\nStructure: flex column wrapping `\u003Clabel for>`, `\u003Cinput class=\"input\" type=\"email\" required>`, and a dedicated `.form-status` container with `aria-live=\"polite\"`. Style all states in CSS: **empty, focus** (indigo border ring, no default outline), **filled, valid** (success border + `check` icon), **invalid** (error border, `--text-error` message, `error` icon), **disabled**, **read-only**. In `script.js`: prevent default, validate email, show inline error or success message in the live region, and briefly drive the submit button through its **loading → success** states.\n\n### 3.4 Modals\n**No modal is in scope for this build — do not add one.** (For the record, any future modal must implement: animated open\u002Fclose, backdrop overlay, centered flex, icon close button, `Esc` + overlay-click dismissal, focus trapping, and `--z-modal` stacking.)\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`, wrap-based collapse, zero horizontal overflow at 320px.\n- **Motion:** every state change transitions with `var(--transition-normal) var(--ease-standard)`; wrap all animation\u002Ftransition in `@media (prefers-reduced-motion: reduce)` overrides that disable transforms, shimmer, and smooth scroll.\n- **Accessibility:** WCAG-AA contrast in **both light and dark**; semantic HTML5 landmarks and heading order (one `\u003Ch1>`, sequential `\u003Ch2>\u002F\u003Ch3>`); ARIA only where semantics fall short (toggle, hamburger, live regions); logical DOM\u002Ffocus order; full keyboard operability — every interactive element reachable and usable by keyboard; never rely on color alone to communicate state (pair errors with icons + text, stars with `aria-label`).\n- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n- **Never rely on color alone; never leave a state unstyled.**\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — complete, final, in one response. Only a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference in the HTML; **no inline `\u003Cscript>` blocks**.\n- **Naming:** BEM (`.card__title`, `.btn--primary`) consistently across all three files — never mix conventions. CSS organized with section comments mirroring the token blocks above.\n- **JS scope (from-scratch build):** theme toggle + persistence, mobile nav, newsletter validation\u002Ffeedback. No other behavioral scripts.\n- **Copy:** authored, thematic English for every heading, paragraph, button, FAQ answer, and alt\u002Faria label. No lorem ipsum anywhere.\n- **Definition of Done (self-check before responding):** zero inline styles; zero inline SVGs; dark mode toggles and persists correctly with flipped contrast pairings; all button\u002Fcard\u002Finput states defined in CSS; keyboard-only pass through nav → links → FAQ → form succeeds; no horizontal scroll at 320px; reduced-motion respected; both themes pass ≥ 4.5:1 body-text contrast.\n",1791954994026]