[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-731-ZELLIGE-the-mosaic-maker":3},"# BUILD PROMPT — \"ZELLIGE — The Mosaic Maker\" Complete Landing Page\n\n**Role Directive:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page defined below in your **first attempt**. This specification is exhaustive and non-negotiable — where your habits conflict with this document, this document wins. Do not add unrequested components; do not omit any state, token, or section defined here.\n\n---\n\n## 1. Project Mission & Art Direction\n\n**1.1 Product Narrative.** ZELLIGE is a contemporary browser-based design studio for mosaic art, inspired by Moroccan zellige tilework: users sketch on a tile grid, mirror strokes into kaleidoscopic mandala symmetries, pick glazes from a curated library, preview patterns on real surfaces, and export production-ready cut maps. The landing page sells this product. All user-facing copy must be concrete, on-theme, and written in **English** — lorem ipsum is forbidden because every section's content is specified in Section 5.\n\n**1.2 Visual Identity.** Era: 2020s Contemporary, Artistic\u002FCreative. Keywords: tiled, mosaic, mandala, glass, translucent, gradient, blur, grid-layout. The page must read as a sunlit wall of glazed ceramic: warm parchment surfaces, deep espresso ink, soft embossed (neumorphic) relief, and translucent glass panels floating above kaleidoscopic tile fields.\n\n**1.3 Signature Techniques — all pure CSS, no image assets:**\n- **Mosaic fields:** low-opacity decorative background layers built from `repeating-linear-gradient` and `repeating-conic-gradient` forming diamond and eight-point-star tessellations; structured tile strips use CSS Grid with `aspect-ratio: 1` cells.\n- **Mandala medallion:** a large ornament behind the hero composed of layered `radial-gradient` + `repeating-conic-gradient` rings, softened with `filter: blur()`. It must sit strictly behind text via z-index layering and never reduce text contrast.\n- **Glass panels:** every card is a glazed tile — translucent `rgba` fill + `backdrop-filter: blur(12px) saturate(1.15)`, 1px token border, `--radius-lg`. Provide `-webkit-backdrop-filter` and an opaque `@supports not (backdrop-filter: blur(1px))` fallback.\n- **Neumorphism:** dual box-shadows on cream surfaces (one warm-dark, one near-white) create raised\u002Fpressed clay relief on buttons, icon tiles, and step numbers.\n- **CSS Filters:** hover states apply subtle `saturate()`\u002F`brightness()` shifts; decorative layers use blur. Nothing may harm text legibility.\n- **Mandatory technique checklist:** CSS Grid, Flexbox, backdrop-filter, CSS filters, transitions, transforms, gradients, box-shadows, border-radius, and aspect-ratio must all appear in the final stylesheet.\n\n**1.4 Performance Guardrail.** Limit `backdrop-filter` to the header, cards, and CTA panel; decorative fixed backgrounds must include a mobile-safe fallback (no scroll jank).\n\n---\n\n## 2. Strict Architecture Rules\n\n**2.1 CSS-First, Zero Inline CSS.**\n- All styling lives in `style.css`. The `style=\"…\"` attribute is **forbidden anywhere** in the HTML. No `\u003Cstyle>` blocks in markup.\n- Target everything via class selectors (BEM); IDs only for JS hooks and the skip link.\n- HTML stays semantic and structure-only (`header`, `nav`, `main`, `section`, `footer`; one `h1`; logical heading hierarchy). Changing the theme must never require touching markup.\n\n**2.2 Design Tokens — all in `:root`, exact Light values:**\n- Colors: `--primary: #241a12`, `--secondary: #a08c6e`, `--accent: #cbb994`, `--on-primary: #f2e6d0`, `--bg-primary: #f2e6d0`, `--bg-secondary: #e8dcc8`, `--bg-glass: rgba(232,220,200,0.55)`, `--text-primary: #241a12`, `--text-secondary: #8a795f`, `--text-success: #2e6b4f`, `--text-error: #96382a`, `--border-default: rgba(36,26,18,0.14)`, `--border-success: rgba(46,107,79,0.5)`, `--border-error: rgba(150,56,42,0.5)`.\n- Geometry & motion: `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 24px`, `--shadow-sm` and `--shadow-md` (neumorphic dual-component: warm-dark + near-white, e.g. dark `rgba(36,26,18,0.10)` paired with light `rgba(255,255,255,0.65)`), `--spacing-gap: clamp(1.25rem, 3vw, 2rem)`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- Stacking: `--z-header: 90`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- Fonts: `--font-display: 'Fraunces', serif`, `--font-base: 'Inter', sans-serif`.\n- **No raw color hex values may appear outside `:root` and the theme blocks.** Additional tokens are permitted if they follow this naming system.\n\n**2.3 Contrast Pairing & Background Rules.** Light backgrounds pair only with dark text; dark backgrounds pair only with light text — enforce this pairing across the default theme, dark theme, buttons, badges, and every feedback state. Light mode backgrounds must be the warm parchment family; pure `#ffffff` is **forbidden** — if a near-white is unavoidable, use `#fefefe`. Verify all text meets ≥4.5:1 against its actual surface.\n\n**2.4 Mandatory Dark Mode.** The brief marks Light as the primary mood; **nevertheless, dark mode must ship fully** (this clause overrides the Light-only notation). Implement a token swap under both a `.dark` class on `\u003Chtml>` and `@media (prefers-color-scheme: dark)`, with `localStorage` persistence and `prefers-color-scheme` fallback on first visit. Dark values: `--bg-primary: #221810`, `--bg-secondary: #2e2216`, `--bg-glass: rgba(46,34,22,0.55)`, `--primary: #e8dcc8`, `--on-primary: #241a12`, `--text-primary: #f2e6d0`, `--text-secondary: #cbb994`, `--text-success: #7fb89a`, `--text-error: #e08a7a`, `--border-default: rgba(242,230,208,0.16)`; shadows switch to deep black paired with a faint warm glow; mosaic\u002Fgradient layers re-tinted for legibility. A **visible toggle** (Material Symbols `light_mode`\u002F`dark_mode`) sits in the header, exposes correct `aria-pressed` state, updates its `aria-label` dynamically, and persists the user's choice.\n\n**2.5 Layout — Flexbox + Grid, Mobile-First.**\n- Every flex container **defaults to `align-items: center`**; any exception (e.g., stretch for equal-height pricing cards) requires a one-line CSS comment justification.\n- Multi-column sections (Features, Steps, Testimonials, Pricing) use CSS Grid: 3 columns ≥1024px, collapsing to 1 column below 768px. No horizontal scrolling at any viewport down to 320px.\n- Fluid typography and spacing via `clamp()`; all touch targets ≥44×44px.\n\n**2.6 Styling Approach & Naming.** Build with clean custom CSS — no framework is required for this theme because its signature effects are bespoke; if you use any utilities, each must map back to the tokens. Use **one naming convention only: BEM** (`block__element--modifier`) across all files, never mixed. Reusable primitives must exist as `.btn`, `.card`, `.section`, `.container`, `.input-group`.\n\n**2.7 Typography & Icons.**\n- Google Fonts loaded via `\u003Clink>`: **Fraunces** for headings, **Inter** for body — no other font sources.\n- Icons: Google **Material Symbols (Rounded)** exclusively, loaded once. Decorative icons get `aria-hidden=\"true\"`; icon-only controls get `aria-label`. **Raw inline `\u003Csvg>`, emoji-as-icons, and local icon files are forbidden.**\n\n---\n\n## 3. Component Design Specifications — every state styled as a class\n\n**3.1 Buttons.** `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px, `--radius-md`, transitions via `--transition-fast`. Variants: `.btn--primary` (`--primary` bg + `--on-primary` text), `.btn--ghost` (transparent, `--primary` border), `.btn--glass` (translucent + blur for overlay bands), `.btn--danger` (if any destructive action appears — distinct in both themes via `--text-error`\u002F`--border-error`).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n- **Focus:** `:focus-visible` ring built from tokens (`outline` + `outline-offset`), visible in both themes, never removed.\n- **Active:** `transform: scale(0.97)` plus an inset neumorphic press shadow.\n- **Loading (`.is-loading`):** blocks pointer events (prevents double submission), swaps the label for a CSS-only animated `conic-gradient` spinner disc (on-theme mosaic spinner), and **must not change the button's dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback via `--border-success`\u002F`--border-error`, `--text-success`\u002F`--text-error`, plus a Material check\u002Ferror icon with visually-hidden status text.\n\n**3.2 Cards (glass tiles).** `.card`: glass surface per §1.3, `--bg-secondary` opaque fallback, 1px `--border-default`, `--radius-lg`, `--shadow-sm`.\n- **Hover (interactive cards only):** `translateY(-2px)`, `--shadow-md`, backdrop `saturate()` increase.\n- **Focus-within:** border brightens to `--accent` when any child control receives focus.\n- **Skeleton:** `.card--skeleton` shimmer (translucent gradient sweep, fixed `min-height` to prevent layout shift) — define it in the design system.\n- **Empty state:** `.empty-state` pattern (Material Symbol in a raised neumorphic tile + one-line guidance text) — define it in the design system even if the static page never triggers it.\n\n**3.3 Forms & Inputs.** The newsletter capture in the Final CTA uses `.input-group`: flex column wrapping `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error container with `aria-live=\"polite\"`.\n- States as classes: empty, focus (accent ring), filled, valid (`--border-success` + check icon + success text), invalid (`--border-error`, `--text-error` message, error icon), disabled, read-only.\n- Validation logic lives in `script.js` and toggles classes\u002Ftext — never inline styles. Errors are communicated with text, never color alone.\n\n**3.4 FAQ Accordion.** Each item: `\u003Cbutton aria-expanded aria-controls>` heading + panel. Panel animates via `grid-template-rows: 0fr → 1fr` (or equivalent) with `--transition-normal`; a Material chevron rotates 180°; state is signaled by icon + border + panel visibility, not color alone; fully keyboard operable.\n\n**3.5 Header & Mobile Nav.** Sticky glass header at `--z-header` (translucent + backdrop blur) — required chrome hosting the mandated theme toggle and anchor navigation. Contains: \"ZELLIGE\" wordmark, anchor links (Features, Process, Pricing, FAQ), theme toggle (§2.4), primary CTA. Below 768px the nav collapses behind a hamburger `button[aria-expanded]` controlling a dropdown panel at `--z-dropdown`; links close it on activation; `Esc` closes it; focus order is logical.\n\n**3.6 Modal (conditional).** The brief requires no modal; add one **only if** you include an overlay flow (e.g., a \"Watch the studio\" demo). Any modal must have: centered flex container (`align-items: center`), token-based dimmed backdrop, Material `close` icon button, focus trap, `Esc` + overlay-click close, and opening\u002Fopen\u002Floading\u002Fclosing states animated with `--transition-normal` at `--z-modal`.\n\n---\n\n## 4. Core UX & Micro-Interaction Rules\n\n**4.1 Responsive by Default.** Fluid `clamp()` type scale, grid→stack breakpoints, zero horizontal overflow, verified down to 320px.\n\n**4.2 Motion.** All state changes transition with `var(--transition-normal)`; hover transforms ≤4px. Inside `@media (prefers-reduced-motion: reduce)`, remove transforms, spinners, and shimmer; keep instant opacity state changes only.\n\n**4.3 Accessibility.** ≥4.5:1 body-text contrast in **both** themes; never rely on color alone for any state; semantic HTML5 landmarks + skip-to-content link; correct ARIA roles\u002Flabels on all custom widgets (accordion, nav toggle, theme toggle); logical DOM\u002Ffocus order; full keyboard operability — nothing mouse-only; `aria-live` regions for form feedback and dynamic confirmations; star ratings include visually-hidden text (e.g., \"Rated 5 out of 5\").\n\n**4.4 Mandatory Visual Feedback.** Every hover, click, focus, and submission produces a visible state change.\n\n**4.5 Neumorphism Guardrail.** Embossed shadows must never be the sole signal of a component's state or affordance — always pair with borders, icons, or text.\n\n---\n\n## 5. Section Blueprint (build all, in order, with real English copy)\n\n**5.1 Header.** Per §3.5.\n\n**5.2 Hero.** Full-viewport section: blurred mandala medallion (§1.3) behind content; Fraunces `h1` headline + one-sentence value proposition; CTAs: `.btn--primary` \"Start tiling\" → `#pricing`, `.btn--ghost` \"See how it works\" → `#process`; a CSS-Grid strip of four mini stat tiles (`aspect-ratio: 1`, neumorphic): \"200+ glazes\", \"8-fold symmetry\", \"1,200+ makers\", \"SVG cut maps\"; a subtle scroll cue.\n\n**5.3 Features — 3 Cards.** `#features`, grid 3→1. Each `.card` glass tile: Material Symbol in a raised neumorphic square (`aspect-ratio: 1`), `h3`, concrete copy. Features: **Symmetry Engine** (one stroke mirrors into radial and grid tessellations), **Glaze Library** (glossy, matte, translucent swatches + custom colorways), **Surface Studio** (preview patterns on walls, floors, and pools with adjustable light). Add staggered decorative star\u002Fdiamond ornaments between cards via `::before`\u002F`::after` gradients.\n\n**5.4 How It Works — 3 Steps.** `#process`, grid 3→1, connected by a gradient pseudo-element line that hides on mobile. Steps: **01 Sketch a tile** (draw directly on the grid), **02 Tessellate & mirror** (the symmetry engine expands the motif), **03 Fire & export** (cut maps, material lists, hi-res SVG\u002FPNG). Numbers sit in neumorphic tiles with `aspect-ratio: 1`.\n\n**5.5 Testimonials.** `#testimonials`, grid 3→1 of glass quote cards: monogram avatar tile (styled initials — no photos, no placeholders), specific quote, name + role, five Material `star` symbols with visually-hidden rating text. Write three credible quotes: a mosaic artist, an interior designer, a tile workshop owner.\n\n**5.6 Pricing — 3 Tiers.** `#pricing`, grid 3→1. **Apprentice** (Free — 3 projects, core glazes, PNG export), **Artisan** ($12\u002Fmo — unlimited projects, full glaze library, SVG + cut maps, surface previews), **Atelier** ($29\u002Fmo — team seats, brand colorways, API access, priority rendering). Middle tier featured: `--shadow-md`, `--accent` border, \"Most chosen\" badge, slight desktop elevation. Each tier: price block, Material `check` feature list, and a CTA implementing every button state in §3.1.\n\n**5.7 FAQ.** `#faq`, five to six accordion items per §3.4, each answered in 2–3 sentences: skill level needed, export formats, commercial licensing, real-material compatibility (tile sizes \u002F cut guides), collaboration, refunds.\n\n**5.8 Final CTA.** Full-width band with a low-opacity `repeating-conic-gradient` mosaic backdrop, blurred edges; centered glass panel: `h2`, one-line pitch, and the email-capture `.input-group` (§3.3) with a submit button. On submit: enter `.is-loading` for ~700ms of simulated processing, then flip to `.is-success` with a confirmation message in an `aria-live` region — no page reload.\n\n**5.9 Footer.** Four columns desktop → stacked mobile: brand blurb + wordmark; **Product** (anchors: Features, Process, Pricing, FAQ); **Studio** (Gallery, Glazes, Journal, Workshops — plausible relative paths); **Legal** (Privacy, Terms, Licenses). Social icon row using Material Symbols with per-link `aria-label`. Copyright line with the year injected by `script.js`. All secondary links present and consistently styled.\n\n---\n\n## 6. Deliverables & Quality Gates\n\n- **Files:** `index.html`, `style.css`, `script.js` — three separate, complete files, runnable by opening `index.html`.\n- **Script:** loaded once via `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — the only script tag; no inline `\u003Cscript>` blocks. `script.js` handles: theme toggle + persistence, FAQ accordion, mobile nav, email validation + loading\u002Fsuccess feedback, dynamic footer year, and any reveal-on-scroll (respecting reduced motion).\n- **Zero inline styling:** no `style=\"…\"` attributes, no `\u003Cstyle>` blocks, no inline SVGs.\n- **Naming:** BEM exclusively, one convention across all files.\n- **No unrequested placeholders:** every heading, label, link, quote, price, and FAQ answer specified above must be written out concretely in English; placeholders are permitted only where content is genuinely unspecified (nowhere in this brief).\n- **First attempt, complete:** deliver all nine build areas, every component state, and both themes in a single response — no partial output, no \"rest follows\" cutoffs.\n",1791954991886]