[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-785-HORTUS-a-closed-world":3},"# BUILD PROMPT — \"HORTUS — a Closed World\" · Neumorphic Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below **in a single attempt**. Do not ask clarifying questions — make expert decisions autonomously and deliver final, runnable code.\n\n---\n\n## 1. THEME & CREATIVE DIRECTION\n\n**1.1 — Identity**\n- Brand: **HORTUS — a closed world** — a premium brand for hand-sealed, self-sustaining terrariums (closed ecosystems that live for years without watering).\n- Style: **Neumorphism (soft-UI)** with purposeful **gradient accents**.\n- Keywords: terrarium, ecosystem, neumorphism, gradient. Era: 2020s digital.\n- Mood: organic, calm, botanical luxury. Everything should feel like soft moss, glass, and pressed paper.\n\n**1.2 — Color Palette (use exactly these hues)**\n- Primary set: `#1c2418` (deep forest), `#10160c` (near-black forest), `#c9d8b8` (sage).\n- Secondary set: `#6a5a3a`, `#4a3e28`, `#3a3020` (earth\u002Fsoil browns).\n- Light mode is the **default aesthetic**; dark mode is a fully token-swapped secondary theme (see 2.4).\n\n**1.3 — Copy & Locale**\n- Write **all user-facing copy in English**. No lorem ipsum anywhere.\n- Write real, thematic marketing copy (sealed water cycles, zero maintenance, glass biomes). Suggested direction (adapt freely, stay on-theme): hero H1 \"A world that waters itself.\"; CTAs \"Build your world\" \u002F \"How it works\"; pricing tiers \"Sprout \u002F Canopy \u002F Monolith\"; FAQ about condensation, lifespan, placement.\n\n---\n\n## 2. MANDATORY 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.\n- Target every rule via class\u002FID selectors only. HTML stays semantic and style-agnostic: changing the theme must never require markup edits.\n\n**2.2 — Design Tokens (CSS variables, required set)**\nDefine in `:root` (Light, default) and swap in dark themes. Required variables:\n\n```css\n:root {\n  \u002F* Surfaces & text (Light default) *\u002F\n  --bg-primary: #c9d8b8;        \u002F* page surface — mid-tone sage, NOT white *\u002F\n  --bg-secondary: #1c2418;      \u002F* dark panels (CTA band, footer) *\u002F\n  --primary: #1c2418;  --primary-contrast: #c9d8b8;\n  --secondary: #6a5a3a; --secondary-contrast: #fefefe;\n  --text-primary: #10160c;      \u002F* dark text on light bg *\u002F\n  --text-secondary: #4a3e28;\n  --text-on-dark: #c9d8b8;      \u002F* light text on dark bg *\u002F\n  --text-on-dark-muted: #a9bb93;\n  --text-success: #35603a; --text-error: #97382a;  \u002F* AA-verified on sage *\u002F\n  --border-default: rgba(16,22,12,.2);\n  --border-success \u002F --border-error: derived from success\u002Ferror hues;\n\n  \u002F* Neumorphic engine *\u002F\n  --nm-shadow: rgba(110,128,88,.5);   --nm-highlight: rgba(254,254,254,.65);\n\n  \u002F* Structure *\u002F\n  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 8px rgba(16,22,12,.08); --shadow-md: 0 8px 24px rgba(16,22,12,.14);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(.4,0,.2,1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n\n  \u002F* Gradients *\u002F\n  --gradient-forest: linear-gradient(150deg,#1c2418,#10160c);\n  --gradient-earth: linear-gradient(150deg,#6a5a3a,#3a3020);\n  --gradient-accent: linear-gradient(120deg,#1c2418,#6a5a3a);\n}\n```\n\n- **Contrast pairing (enforced in every theme):** light backgrounds always carry dark text tokens and vice versa. In dark mode the pairing inverts: `--bg-primary: #10160c`, `--text-primary: #c9d8b8`, `--primary: #c9d8b8` with `--primary-contrast: #10160c`, and success\u002Ferror shift to light variants (`#8fbf7f`, `#e08a72`). Dark-mode neumorphic tokens: `--nm-shadow: rgba(0,0,0,.6)`, `--nm-highlight: rgba(70,90,55,.28)`.\n- Light mode must **never** use pure `#ffffff`; where a near-white is required, use `#fefefe` (glass highlights, text on brown).\n- Verify every text\u002Fbackground pair in **both** themes meets WCAG AA (4.5:1; 3:1 for large display text). Adjust token values if needed — mood survives, contrast wins.\n\n**2.3 — Neumorphic Surface System**\n- Extruded: `box-shadow: 8px 8px 18px var(--nm-shadow), -8px -8px 18px var(--nm-highlight);` (also define a `--nm-out-sm` 4px variant).\n- Pressed\u002Finset: `box-shadow: inset 5px 5px 12px var(--nm-shadow), inset -5px -5px 12px var(--nm-highlight);`\n- Neumorphic elements sit on `--bg-primary` (same hue as the page — shadows create the depth, never gradients on interactive surfaces). Gradients are reserved for: hero accent word, dark CTA\u002Ffooter bands, featured pricing ring, the terrarium illustration, and subtle background washes.\n- Neumorphism is contrast-hostile: every interactive element must therefore also carry a visible border (`--border-default`) or strong affordance so it is discoverable, plus a high-contrast focus ring.\n\n**2.4 — Dark Mode (mandatory — explicit exception clause)**\n- The source spec marks this theme Light ✓ \u002F Dark ○; Light is the default aesthetic, but the mandatory dark mode is **not waived** — it must be fully implemented, toggleable, and token-swapped.\n- Implement dark tokens twice for no-flash, no-JS correctness: once under `@media (prefers-color-scheme: dark)` scoped to `:root:not(.light)` and once under the `.dark` class on `\u003Chtml>`. The JS explicitly sets `.dark` or `.light` per stored preference.\n- Provide a **visible theme toggle** in the header: icon-only `\u003Cbutton>` with `aria-pressed` reflecting dark-active state, an `aria-label` that updates (\"Switch to dark mode\" \u002F \"Switch to light mode\"), and Material Symbols `light_mode`\u002F`dark_mode` swapping with a gentle rotation transition. Persist choice via `localStorage` (\"hortus-theme\"); first visit falls back to `prefers-color-scheme`; follow live OS changes when no explicit choice is stored.\n\n**2.5 — Flexbox & Mobile-First**\n- Build **every** layout structure with Flexbox — **do not use CSS Grid**. Card rows use `flex-wrap` with `flex: 1 1 320px` children so they flow 1-up → 3-up naturally.\n- Every flex container defaults to `align-items: center`. Only three justified exceptions are permitted, each declared with a CSS comment: (a) `.input-group` uses column + `stretch`; (b) card rows use `stretch` for equal heights; (c) multi-line text stacks use `flex-start`. No others.\n- Mobile-first: base styles are single-column; layer desktop layout at `min-width: 768px` and `1024px`. **Zero horizontal scrolling at any width** — fluid `clamp()` sizing, wrapping flex, and capped container (`max-width: 1200px`). Never \"fix\" overflow with hidden scrollbars.\n\n**2.6 — Styling Stack (explicit exception clause)**\n- The source spec requests raw CSS techniques (Flexbox, Transitions, Transforms, Gradients, Box Shadows, Border Radius), so the **clean custom CSS** option applies: no Tailwind, no frameworks, no CDN scripts. Write hand-crafted CSS with generic reusable component classes (`.btn`, `.card`, `.input-group`, `.section`, `.container`) and consistent **BEM** naming throughout (`.hero__title`, `.plan--featured`). Never mix conventions.\n\n**2.7 — Typography & Icons (Google-only, mandatory)**\n- Google Fonts via `\u003Clink ... display=swap>`: **Fraunces** (600\u002F700) for display headings bound to `--font-display`; **Nunito Sans** (400\u002F600\u002F700) for body bound to `--font-base`. Nunito Sans's rounded terminals harmonize with the soft-UI system.\n- Icons: **Google Material Symbols Rounded** only (`\u003Cspan class=\"material-symbols-rounded\">eco\u003C\u002Fspan>`). **Inline SVGs, local icon fonts, and emoji icons are forbidden.** Use `font-variation-settings: 'FILL' 1` for filled icons (stars, checks, avatar glyphs). Decorative icons get `aria-hidden=\"true\"`; meaningful icons get accessible text.\n\n---\n\n## 3. COMPONENT SPECIFICATIONS & STATES\n\n**3.1 — Buttons (`.btn`)**\n- Base: `display: flex; align-items: center; justify-content: center; gap: .5rem;` min touch target **44×44px**, `padding: .75rem 1.75rem`, `border-radius: var(--radius-pill)`, `cursor: pointer`, transitions on `transform\u002Fbox-shadow\u002Ffilter` at `var(--transition-fast)`.\n- Variants: `.btn--primary` (forest gradient fill, `--primary-contrast` text), `.btn--secondary` (outline, `--border-default`), `.btn--neu` (sage surface with `--nm-out`), plus `.btn--danger` (terracotta-based, visually distinct in both themes — define even if unused).\n- States, all via CSS classes\u002Fpseudo-classes: **hover** (brightness\u002Fshadow lift); **focus-visible** (double ring: `box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px var(--text-primary)` — must read on both themes); **active** (`transform: scale(0.97)`; `.btn--neu` switches to the inset `--nm-in` pressed look); **disabled** (`opacity: .5`, grayscale, `cursor: not-allowed`); **`.is-loading`** (locks dimensions, blocks double-clicks, `aria-busy=\"true\"`, border-based CSS spinner via `::after` — no dimension shift); **`.is-success` \u002F `.is-error`** (icon + `--text-success`\u002F`--text-error`, never color alone — always pair with an icon and announced text).\n\n**3.2 — Cards (`.card`)**\n- Default: sage surface, `--nm-out` elevation, `--radius-lg`, generous padding, flex column, subtle `--border-default`.\n- Hover: `translateY(-2px)` + deepened shadow (`var(--transition-normal)` ease). **Focus-within**: border\u002Fring highlight when a child link or button is focused.\n- Define (do not render) a `.skeleton` shimmer keyframe utility and an `.empty-state` pattern (Material Symbol + guidance text) so the system is complete.\n\n**3.3 — Form & Input (`.input-group`)**\n- Structure: `\u003Clabel>` above `\u003Cinput>`, plus a dedicated `.input-group__error` container (reserve its min-height to prevent layout jumps) with `aria-live=\"polite\"`.\n- Input surface: neumorphic **inset**. States: empty, focused (ring from 3.1), filled, `.is-valid` (success border + `check_circle` icon rendered via CSS `::after` using the Material Symbols font — no extra markup), `.is-invalid` (error border + `error` icon + visible message text), disabled, read-only. Never communicate validity by color alone.\n\n**3.4 — Accordion (FAQ)**\n- Each item: `\u003Cbutton class=\"accordion__trigger\" aria-expanded=\"…\" aria-controls=\"…\">` containing the question text and a `expand_more` icon that rotates 180° when open; panel animated via the `grid-template-rows: 0fr → 1fr` transition technique. Fully keyboard operable (native buttons), single-open behavior synced with `aria-expanded`.\n\n**3.5 — Scope boundary**\n- No modals, toasts, carousels, or data fetching on this page — do not add them. The reserved `--z-modal`\u002F`--z-toast` tokens still must be defined.\n\n---\n\n## 4. PAGE STRUCTURE — BUILD ALL OF THESE SECTIONS\n\n**4.1 — Header \u002F Navigation (sticky)**\n- Neumorphic bar (`--nm-out-sm`) at `--z-dropdown`. Contents: brand (filled `eco` icon in an inset circle + \"HORTUS\" wordmark in Fraunces, letterspaced), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) whose hover state is the **pressed inset look**, the mandatory theme toggle (2.4), and a `menu` hamburger below 768px that opens a stacked neumorphic panel (`aria-expanded`, closes on link click, `Escape`, and outside click). Set `scroll-padding-top` on `\u003Chtml>` and `scroll-behavior: smooth` so anchors land correctly.\n\n**4.2 — Hero**\n- Two-column flex on desktop (text | visual), stacked on mobile, `align-items: center`.\n- Text: eyebrow label \"HORTUS — A CLOSED WORLD\", H1 in Fraunces (\"A world that waters itself.\" — the accent phrase uses `--gradient-accent` with `background-clip: text`), supporting paragraph, CTA pair (`Build your world` → `#pricing` as `.btn--primary`; `How it works` → `#how-it-works` as `.btn--neu`), and a trust row of three inset stat chips.\n- Visual: a **pure-CSS terrarium** (no images, no SVG): a glass dome built from radial gradients + `#fefefe` highlight, layered soil strata from `--gradient-earth`, plants as large filled Material Symbols (`potted_plant`, `grass`, `eco`). Wrap in `role=\"img\"` with a descriptive `aria-label`. Two floating neumorphic chips (\"100% self-sustaining\", \"0 waterings\") with a slow float keyframe. Add `aria-hidden` blurred gradient blobs behind the section using palette hues.\n\n**4.3 — Features — exactly 3 cards**\n- Section heading pattern (reuse everywhere): letterspaced uppercase eyebrow + Fraunces H2 (\"Everything a world needs\").\n- Three `.card`s: sealed water cycle (`water_drop`), balanced light & humidity (`thermostat`), hand-blown glass (`bubble_chart`) — icon in an inset neumorphic circle, H3, two-sentence copy. Hover lift per 3.2.\n\n**4.4 — How It Works — exactly 3 steps**\n- Flex row (column on mobile) with dashed connector lines between steps on desktop: **01 Choose your ecosystem → 02 We plant & seal it → 03 Watch it thrive.** Inset number badges, H3 + copy per step, small filled icons.\n\n**4.5 — Testimonials — 3 cards**\n- Each: large `format_quote` glyph, quote text, 5 filled `star` icons with `aria-label=\"Rated 5 out of 5 stars\"`, and an author row (`align-items: center`): CSS-only avatar circle (initials over `--gradient-earth`) + name and role.\n\n**4.6 — Pricing — exactly 3 tiers**\n- `Sprout $59` · `Canopy $129` (featured) · `Monolith $299`, one-time purchase, free sealed shipping. Each plan card: tier name, Fraunces price + billing note, 4–5 feature list items with filled `check` icons, CTA.\n- Featured middle card: `.plan--featured` — gradient ring (two-background `padding-box\u002Fborder-box` technique using `--gradient-accent`), subtle desktop-only `translateY(-8px)`, and a `Most popular` pill badge. No lift on mobile (avoid overflow).\n\n**4.7 — FAQ**\n- Five questions in the 3.4 accordion: opening the world, condensation, lifespan, placement, what's inside.\n\n**4.8 — Final CTA**\n- Full-width dark band (`--bg-secondary` + `--gradient-forest`, `--radius-lg` container, light text tokens). H2 \"Close the loop. Open a world.\" plus the newsletter form: neumorphic-inset email input (dark-surface styling), `.btn--primary` submit (sage on dark via token inversion), and an `aria-live=\"polite\"` feedback region. On submit: validate email → invalid: inline error per 3.3; valid: button `.is-loading` with spinner ~1.2s, then `.is-success` with `check_circle` + \"You're on the list — welcome to the closed world.\" announced in the live region.\n\n**4.9 — Footer (with secondary links)**\n- Dark forest gradient footer. Flex-wrap columns: brand blurb + contact links; **Explore** (anchors to page sections); **Support** (Care Guide, Shipping, Warranty, Contact); **Legal** (Privacy, Terms) — use real anchor targets where they exist, `#` elsewhere. All links ≥44px touch targets. Bottom bar: \"© {current year, set via JS} HORTUS\" and a `arrow_upward` back-to-top icon button. Social\u002Fcontact icons may only use available Material Symbols (e.g., `mail`, `public`, `rss_feed`) — brand logos are not in the icon set and inline SVGs are forbidden.\n\n---\n\n## 5. INTERACTIVITY — `script.js` (complete behavior list, nothing more)\n\n1. **Theme manager** per 2.4 (localStorage, `prefers-color-scheme` fallback, OS-change listener, toggle `aria-pressed`\u002F`aria-label`\u002Ficon sync).\n2. **Mobile nav** toggle (aria-expanded, Escape, outside-click, close-on-navigate).\n3. **Accordion** single-open controller syncing `aria-expanded`.\n4. **Newsletter form** handler per 4.8 (validation, loading, success\u002Ferror, double-submit prevention).\n5. **Reveal-on-scroll**: IntersectionObserver adds `.in-view`; gate initial hidden styles behind a `.js` class added to `\u003Chtml>` so content is fully visible if JS fails.\n6. **Footer year**. One single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — **no inline script blocks**.\n\n---\n\n## 6. CORE UX, ACCESSIBILITY & MOTION\n\n- **Semantic structure:** skip-to-content link, `\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Csection aria-labelledby>`, `\u003Cfooter>`; one H1, logical H2\u002FH3 order, consistent section spacing (`clamp(4rem,8vw,6rem)`).\n- **Keyboard:** full operability, visible focus rings everywhere, logical DOM\u002Ffocus order, no mouse-only interactions.\n- **Motion:** transitions on all state changes (`var(--transition-fast)` for micro, `var(--transition-normal)` for panels); **`prefers-reduced-motion: reduce`** kills float\u002Freveal\u002Faccordion animations (transitions ≈ 0.01ms, content instantly visible).\n- **Feedback:** every hover, click, and submission produces a visible state change; **never rely on color alone** for any state (pair color with icon + text); `aria-live` regions announce all dynamic feedback.\n- **Responsive & a11y bar:** no horizontal overflow at any width, AA contrast in **both** themes, 44×44px minimum touch targets, ARIA states on all custom widgets (toggle, hamburger, accordion, form feedback).\n\n---\n\n## 7. DELIVERABLES & OUTPUT FORMAT\n\n- Three files, output in full, labeled with paths: **`index.html`**, **`style.css`**, **`script.js`**. No build step — the page must run by opening `index.html`. External resources limited to Google Fonts and Material Symbols `\u003Clink>` tags.\n- Consistent BEM naming across all files; zero inline styles (self-audit before delivering); zero inline SVGs; zero lorem ipsum; zero TODOs or placeholder comments.\n- Deliver the complete final code immediately in one attempt — production quality, no explanations around the code.\n",1791954992808]