[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-781-COLONY-an-ant-colony-toy":3},"# CODING-AI PROMPT — Build the \"COLONY\" Landing Page (Complete, First Attempt)\n\n**Your role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-quality landing page specified below in a single first attempt. Do not ask clarifying questions; make expert decisions where the spec grants latitude, and follow every mandatory rule exactly.\n\n---\n\n## 0. PROJECT BRIEF & ART DIRECTION\n\n- **Product:** *COLONY* — an ant colony toy: a see-through, self-sustaining ant-habitat kit that lets people watch a live colony dig, build, and grow on their desk.\n- **Theme type:** Creative\u002FExperimental, 2020s contemporary. **Mood:** warm, tactile, organic, \"playful naturalist\" — soil browns, parchment creams, sprout greens; soft, generous, tunnel-like border radii.\n- **Sections required, in order:** sticky Header (nav + theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials (3 quotes), Pricing (3 tiers), FAQ (accordion), Final CTA, Footer with secondary link columns.\n- **Signature visual effects:** hover feedback on every interactive element; smooth transitions; transforms (`translateY`, `rotate`, `scale`); organic border-radius; a CSS-only \"ant trail\" dashed-path motif used sparingly as a decorative divider.\n- **All visuals must be CSS-composed** (gradients, layered radii, dashed borders, Google Material Symbols icons). Do not use external image files, photos, or placeholder images. Avatars are CSS monogram circles.\n- **All user-facing copy must be written in English** and must be real, on-theme product copy (see §5). Lorem ipsum is forbidden.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. No `\u003Cstyle>` blocks in the HTML either — all styles live in `style.css`.\n- **Class Selectors Only:** All design properties, layout rules, and states must be targeted via class (or ID) selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean and semantic (landmarks, headings, buttons, forms). All theming, layout, and state changes are achievable by editing CSS only, with no markup restructuring required.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\n\nStore every visual token in `:root` and override for dark mode (§1.3). Use exactly this token sheet (you may add tokens, never remove them):\n\n**Light theme (default, in `:root`):**\n```css\n--primary: #2a1f14;          \u002F* deep soil brown — headings, primary button bg *\u002F\n--secondary: #a08c6e;        \u002F* dry tan — decorative borders and accents ONLY *\u002F\n--accent: #8aae64;           \u002F* sprout green — highlights, icons, hover accents *\u002F\n--accent-strong: #6a8a4a;    \u002F* moss green — success borders, badges, focus rings *\u002F\n--bg-primary: #f2e6d0;      \u002F* parchment page background (NOT white) *\u002F\n--bg-secondary: #e8dcc8;     \u002F* cream cards \u002F alternating surfaces *\u002F\n--text-primary: #2a1f14;    \u002F* pairs with both light backgrounds *\u002F\n--text-secondary: #6a5a41;   \u002F* darkened derivative of #a08c6e for AA contrast *\u002F\n--text-success: #55763a;     \u002F* darkened moss — readable on cream *\u002F\n--text-error: #b3432b;      \u002F* warm terracotta *\u002F\n--border-default: #d5c4a5;\n--border-error: #b3432b;\n--border-success: #6a8a4a;\n--font-display: 'Fraunces', Georgia, serif;\n--font-base: 'Inter', system-ui, sans-serif;\n--radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-full: 999px;\n--shadow-sm: 0 2px 8px rgba(42, 31, 20, 0.08);\n--shadow-md: 0 12px 28px rgba(42, 31, 20, 0.16);\n--ring: 0 0 0 3px rgba(106, 138, 74, 0.25);\n--spacing-gap: 1.5rem;\n--transition-fast: 150ms; --transition-normal: 300ms;\n--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n--z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n```\n\n**Dark theme (override the same tokens under both `@media (prefers-color-scheme: dark)` — scoped so a `.light` class can force light — and a `.dark` class):**\n```css\n--primary: #f2e6d0;          \u002F* primary button bg inverts to cream *\u002F\n--secondary: #a08c6e;\n--accent: #8aae64;\n--accent-strong: #6a8a4a;\n--bg-primary: #1c140d;       \u002F* deep soil night background *\u002F\n--bg-secondary: #2a1f14;     \u002F* the signature brown becomes card surface *\u002F\n--text-primary: #f2e6d0;\n--text-secondary: #c9b896;\n--text-success: #8aae64;\n--text-error: #e08764;\n--border-default: #4a3b28;\n--border-error: #e08764;\n--border-success: #8aae64;\n--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);\n--shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45);\n--ring: 0 0 0 3px rgba(138, 174, 100, 0.3);\n```\n\n- **Contrast Pairing (mandatory, both themes):** every light background token pairs with dark text; every dark background token pairs with light text. Primary buttons use `background: var(--primary); color: var(--bg-primary);` so the pairing inverts correctly in both themes. Never place `#a08c6e` text on `--bg-primary`\u002F`--bg-secondary` (it fails contrast) — `--text-secondary` exists for that reason. Verify ≥ 4.5:1 for body text and ≥ 3:1 for large text\u002FUI components in both themes.\n- **Light Background Rule:** the page background is `#f2e6d0`, never `#ffffff`. If a near-white surface is genuinely needed (e.g., input fields inside cream cards in light mode), use `#fefefe`.\n- **Token-driven everything:** radii, shadows, spacing, transitions, easing, and z-index layers must come from the variables above so components stay consistent.\n\n### 1.3 Mandatory Dark Mode Support\n\n- **Implementation:** define dark tokens via BOTH `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (light-mode class `.light` as the manual override), so system-preference users get the correct theme with zero flash and manual toggling works everywhere.\n- **Persistence:** store the user's explicit choice in `localStorage` (e.g., key `colony-theme`, values `light`\u002F`dark`). On first visit with no stored choice, follow `prefers-color-scheme`.\n- **Visible toggle control:** a 44px icon button in the header showing the Material Symbols `light_mode` \u002F `dark_mode` icon, with `aria-pressed` reflecting the current dark-mode state and a descriptive, dynamically updated `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"). Background and text tokens must switch seamlessly with no HTML restructuring.\n- **Exception clause:** the source style spec marks Light as the primary mode; Light remains the default showcase theme, but Dark Mode is still a fully designed, first-class theme per this mandatory rule — never a simple invert filter.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n\n- **Flexbox for all layout:** build every container (header, hero, grids of cards, steps, pricing row, forms, footer columns) with `display: flex`. No CSS grid required; wrap cards in `flex-wrap: wrap` rows.\n- **Default Alignment Rule:** every flex container must default to `align-items: center` unless there is an explicitly justified exception. The only permitted exceptions: text blocks inside cards and form label\u002Finput stacks may use `align-items: flex-start` \u002F `stretch` for readability — document this exception in a CSS comment where used.\n- **Mobile-first:** write base styles for small viewports, then enhance at `min-width: 768px` and `min-width: 1024px`. Card rows stack as columns on mobile; the hero stacks copy over visual; the header collapses its nav links behind a menu button at \u003C 768px. Horizontal scrolling is forbidden at any width down to 320px.\n\n### 1.5 Styling Approach — Clean Custom CSS\n\n- The source specification requests raw CSS techniques (Flexbox, Transitions, Transforms, Border Radius) and names no framework, so use **clean, hand-authored custom CSS in `style.css`** — no Tailwind build, no framework CDN.\n- All component styling must map to **generic, reusable class names** (`.btn`, `.card`, `.input-group`, `.section`, `.container`) driven by the CSS variables in §1.2. Do not create one-off classes that duplicate existing component patterns.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n\n- **Fonts:** load via Google Fonts `\u003Clink>` tags (with `preconnect`): **Fraunces** (weights 600–700, use for all display headings via `--font-display`) and **Inter** (weights 400–600, body via `--font-base`). No other typefaces.\n- **Icons:** Google **Material Symbols Rounded** via its Google Fonts `\u003Clink>`, configured with `FILL 1`. Apply via the `.material-symbols-rounded` class. Raw inline SVGs, local icon files, emoji icons, and any other icon set are forbidden.\n- **Icon vocabulary for this build:** `pest_control` (logo + hero ants), `visibility`, `eco`, `school`, `inventory_2`, `trending_up`, `star`, `check_circle`, `error`, `expand_more`, `arrow_forward`, `menu`, `close`, `light_mode`, `dark_mode`, `progress` (loading spinner), `mail`, `record_voice_over`, and social glyphs (`public`, `alternate_email`, `photo_camera` as generic footer social icons).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (` .btn` + variants)\n\nStyle every state via CSS classes; all buttons share a base class:\n\n- **Base\u002FDefault:** `display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, pill radius (`--radius-full`), Inter 600, `text-decoration: none`, `transition: transform var(--transition-fast) var(--ease-standard), box-shadow ..., background-color ..., color ..., border-color ...`.\n- **Variants:** `.btn--primary` (`background: var(--primary); color: var(--bg-primary);` — inverts correctly in dark mode), `.btn--secondary` (transparent bg, 2px **dashed** `--secondary` border evoking the ant-trail motif, `color: var(--text-primary)`; on hover the border shifts to `--accent-strong` and bg to `--bg-secondary`), `.btn--danger` (must be visually distinct in both themes, built from `--text-error`\u002F`--border-error` — not used on this page but define the class).\n- **Hover:** `transform: translateY(-1px)`, subtle brightness lift, and `--shadow-sm`. Buttons with a trailing `arrow_forward` icon must translate the icon +3px on hover.\n- **Focus:** `:focus-visible` receives `outline: 2px solid var(--accent-strong); outline-offset: 3px;` plus the `--ring` box-shadow — distinct in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` disables pointer events, preserves the button's exact dimensions, and swaps in an animated Material `progress` icon (CSS rotation) so nothing shifts or allows double-clicks.\n- **Success\u002FError:** `.is-success` (bg `--accent-strong`, cream text, `check_circle` icon) and `.is-error` (border `--border-error`, text `--text-error`, `error` icon) as temporary submit-feedback states.\n- **Disabled:** `opacity: 0.5; filter: grayscale(60%); cursor: not-allowed;` and no hover transforms.\n\n### 2.2 Card Component (`.card` — Features, Testimonials, Pricing)\n\n- **Default:** flex column, `background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 2rem; gap: var(--spacing-gap)`. The pages' alternating section surfaces may swap `--bg-primary`\u002F`--bg-secondary` for rhythm.\n- **Icon chip:** 48px circle, flex centered, `background: var(--bg-primary); color: var(--accent-strong);`.\n- **Hover:** `transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-strong);` and the icon chip flips to `background: var(--accent-strong); color: var(--bg-primary)` — visible feedback in both themes.\n- **Focus-within:** when a child button\u002Flink is focused, the card border highlights to `--accent-strong` with the `--ring` shadow.\n- **Scope note (skeleton\u002Fempty states):** this page is fully static — do not fabricate fake loaders, skeletons, or empty states for cards. The only async-style states are the form submit states in §2.3.\n\n### 2.3 Form & Input (`.input-group` — Final CTA email capture)\n\n- **Structure:** flex column (`align-items: stretch` — justified exception), containing a visible `\u003Clabel>`, the `\u003Cinput type=\"email\">`, and a dedicated error-feedback `\u003Cp>` container wired with `aria-live=\"polite\"`.\n- **States:** Empty → default `background: #fefefe` in light mode (`var(--bg-primary)` in dark), 1px `--border-default`, pill radius, 48px height. Focused → `--border-success` border + `--ring` shadow. Filled → unchanged until validation. Valid → `--border-success` with a trailing `check_circle` icon. Invalid → `--border-error` border, `aria-invalid=\"true\"`, `aria-describedby` pointing at the error container, error copy in `--text-error` with a small `error` icon. Disabled → per button disabled treatment.\n- **Submit flow:** on submit, validate the email (simple pattern check in `script.js`); show the button's **loading** state, then simulate a short delay and render the **success** state plus an `aria-live` success message (\"You're on the list — welcome to the colony.\"). Invalid input must show the error state without page reload.\n- **Layout:** on desktop, input + button sit in a joined flex row (pill group); on mobile they stack as a column with full-width elements.\n\n### 2.4 FAQ Accordion & Overlay Policy\n\n- **Accordion markup (per item):** `\u003Cdiv class=\"faq-item\">` containing `\u003Ch3>\u003Cbutton class=\"faq-item__trigger\" aria-expanded=\"false\" aria-controls=\"...\" aria-labelledby pairing\">` with the question text and a trailing `expand_more` chevron, plus a `\u003Cdiv class=\"faq-item__panel\" role=\"region\" aria-labelledby=\"...\">` with the answer.\n- **States & animation:** open\u002Fclose animated via CSS (`grid-template-rows: 0fr → 1fr` transition on the panel wrapper, inner `overflow: hidden`); chevron `rotate(180deg)` when open; trigger hover tints the row background to `var(--bg-secondary)` and text to `--accent-strong`; `:focus-visible` ring per §2.1. Open the first item by default. JS enforces `aria-expanded` truthfully and (optionally) single-open behavior. `Esc` on a focused trigger closes its open item.\n- **Overlay policy:** do NOT invent any modal, popup, exit-intent, or cookie banner — none were requested. If a modal were ever required in the future, it must meet: centered flex overlay, backdrop, focus trap, `Esc` and overlay-click close, animated open\u002Fclose, and `--z-modal` stacking.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`, no fixed widths that overflow, no horizontal scrolling at any viewport ≥ 320px.\n- **Hover-effects inventory (the requested visual effect — implement all):** nav links get a `scaleX` underline grow-in via `::after`; all buttons per §2.1; feature\u002Ftestimonial\u002Fpricing cards per §2.2; pricing feature-list check icons tint to `--accent-strong`; step number badges fill with `--accent-strong` on step hover; FAQ rows per §2.4; footer links shift color to `--accent` with a `text-underline-offset` grow; footer social icons invert their circle background on hover.\n- **Ant-trail motif:** `.ant-trail` decorative divider = a 2px dashed line built from `repeating-linear-gradient` with a slow background-position \"marching\" animation, optionally centered with a small circled `pest_control` icon. Use at most twice on the page. The animation pauses entirely under `prefers-reduced-motion`.\n- **Smooth motion:** all state changes use `transition: var(--transition-normal) var(--ease-standard)` (hover micro-shifts may use `--transition-fast`). Anchor navigation uses `scroll-behavior: smooth` gated behind `prefers-reduced-motion: no-preference`, with `scroll-margin-top` on sections to clear the sticky header.\n- **Reduced motion:** `@media (prefers-reduced-motion: reduce)` disables transforms, the marching-ants animation, parallax, and smooth scrolling; opacity-only transitions may remain.\n- **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `main`, each `\u003Csection>` with `aria-labelledby` to its unique heading id, `footer`); a visually hidden \"Skip to content\" link; exactly one `h1`; logical DOM\u002Ffocus order; every interaction keyboard-operable; state is never communicated by color alone (errors pair icons + text; success pairs icon + `aria-live` message); `aria-live` regions for form feedback and any dynamic message; visible focus indicators everywhere.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a perceivable state change.\n- **Destructive actions:** none exist on this page; if any is ever added, it must use `.btn--danger` and remain distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** exactly three — `index.html`, `style.css`, `script.js`. The HTML contains no `\u003Cstyle>` blocks and no inline `\u003Cscript>` blocks; the only script reference is `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`.\n- **script.js scope (vanilla JS only, no libraries):** theme init\u002Fpersist\u002Ftoggle (§1.3), mobile menu toggle, FAQ accordion behavior (§2.4), email form validation with loading\u002Fsuccess\u002Ferror states (§2.3), optional scroll-reveal via `IntersectionObserver` (gated behind a `.js` class added to `\u003Chtml>` so no-JS users see all content), auto-updating footer year.\n- **Naming convention:** one consistent convention — BEM (`block__element--modifier`) — across the entire deliverable. Never mix conventions.\n- **Meta\u002FSEO basics:** `lang=\"en\"`, `\u003Cmeta name=\"viewport\">`, descriptive `\u003Ctitle>` (\"COLONY — The Observable Ant Habitat\"), a one-sentence meta description, and `theme-color` for both schemes.\n- **No unrequested placeholders:** write real, on-theme English copy for every section per §5. Placeholder `href=\"#\"` is acceptable only for footer\u002Fsecondary link targets, which point nowhere yet.\n\n---\n\n## 5. SECTION-BY-SECTION CONTENT SPEC (suggested copy — refine wording, keep the voice)\n\n1. **Header (sticky):** logo = circled `pest_control` icon + \"COLONY\" wordmark in Fraunces; nav links: Features, How It Works, Pricing, FAQ; theme toggle (§1.3); compact `.btn--primary` \"Get COLONY\" → `#pricing`. Mobile: `menu` icon button with `aria-expanded` toggling a `--z-dropdown` panel (Esc and link-click close it). Sticky header uses a translucent token-matched background with `backdrop-filter: blur(8px)`.\n2. **Hero:** two-column flex (copy left, visual right; stacked on mobile). Eyebrow chip: \"THE OBSERVABLE ANT HABITAT\". H1 (Fraunces): \"Watch a world dig itself.\" with \"dig\" highlighted by a `--accent` marker-style underline. Subcopy: \"COLONY is a see-through ant habitat — part terrarium, part time machine. Set it up in minutes, add your ants, and watch an entire civilization tunnel beneath your desk.\" CTAs: `.btn--primary` \"Start Your Colony\" (→ `#pricing`) and `.btn--secondary` \"See It Work\" (→ `#how-it-works`). Proof row: five `star` icons + \"4.9 — loved by 2,300+ colony keepers\". **Hero visual (CSS-only formicarium):** a large `--radius-lg` container with asymmetric organic radii; soil strata via layered gradients (`#2a1f14` → `--text-secondary` tones); an inner translucent \"acrylic pane\"; two or three dashed-border arc elements as tunnels; three absolutely positioned `pest_control` icons as ants that nudge along their tunnels on hover (paused under reduced motion); one `--accent-strong` \"queen chamber\" circle; floating pill chips (\"Live tunnel cam\", \"6+ months of activity\").\n3. **Features (3 `.card`s):** `visibility` — \"Crystal-Clear Tunnels\" (dual-pane acrylic gives an ant's-eye view of every chamber and grain of sand); `eco` — \"A Habitat That Cares for Itself\" (self-feeding nutrient gel means no feeding schedule and no guesswork); `school` — \"Serious STEM, Disguised as Play\" (included field guide and observation log turn curiosity into real science skills).\n4. **How It Works (3 steps):** numbered `01 \u002F 02 \u002F 03` badges connected by a dashed trail line (vertical on mobile): `inventory_2` — \"Set the Stage\" (snap in the gel cartridge and seal the panes); `pest_control` — \"Introduce Your Colony\" (redeem the live-ant voucher and release workers through the launch port); `trending_up` — \"Watch the Empire Grow\" (observe, log, and name your favorites as the network expands).\n5. **Testimonials (3 `.card`s):** five-star rows, quote, CSS monogram avatar (accent circle + initials), name + role. Suggested quotes: \"My kids canceled screen time on their own. I didn't know that was possible.\" — Maya R., parent of two; \"The observation log turned our class ant farm into the favorite science unit of the year.\" — Daniel K., 4th-grade teacher; \"Six months in and Tunnel #14 still surprises me every night.\" — Priya S., colony keeper since 2023.\n6. **Pricing (3 tiers, middle featured):** Starter Colony $39 (1 habitat, gel starter cartridge, live-ant voucher, field guide); **Classic Colony $69 — \"MOST POPULAR\" badge, `--accent-strong` border, larger shadow, desktop `scale(1.02)`** (larger habitat, 2 cartridges, tunnel toolkit, hardcover observation log); Mega Colony $119 (largest habitat, 4 cartridges, LED under-glow, expedition toolkit, 2 vouchers). Feature lists use `check_circle` icons; featured tier gets `.btn--primary`, others `.btn--secondary`. Footnote: \"Every plan includes live-ant vouchers (species varies by region) and a 30-day tunnel-back guarantee.\"\n7. **FAQ (accordion per §2.4, 5 items):** \"Do I have to catch the ants myself?\" (No — voucher ships a queen-safe worker colony); \"How long do the ants live?\" (workers live weeks-to-months; the gel sustains them without feeding); \"Is it safe for kids?\" (sealed panes, non-toxic gel; ages 6+, 8+ for solo care); \"What if a tunnel collapses?\" (ants are natural engineers — they rebuild; gel re-sets with a tap kit); \"Can I refill it or try other species?\" (refill cartridges and species vouchers sold separately).\n8. **Final CTA:** inset full-width band card (`--radius-lg`, generous padding) with a moss→sprout gradient (`#6a8a4a` → `#8aae64`), `--primary` text for both themes: H2 \"Your desk is about to get a civilization.\" + email capture form per §2.3 (\"Get launch updates and 10% off your first colony\", button \"Reserve Mine\").\n9. **Footer (inverted band: `background: var(--primary); color: var(--bg-primary);`):** brand block with logo, one-line blurb (\"An ant colony toy made for curious humans.\"), three secondary link columns — **Product** (Features, Pricing, Refill Cartridges, Gift Cards), **Company** (About, Journal, Careers, Contact), **Support** (Care Guide, Ant FAQ, Shipping, Returns) — a social icon row (circled Material icons with hover fill), and a bottom bar: \"© \u003Ccurrent year> COLONY Toys\" + Privacy, Terms, Accessibility links.\n\n---\n\n## 6. DEFINITION OF DONE — QA CHECKLIST\n\n- Zero inline `style` attributes; zero `\u003Cstyle>`\u002Finline `\u003Cscript>` blocks; only the deferred `script.js` reference.\n- Keyboard-only pass: header menu, theme toggle, nav, all buttons, FAQ triggers, and the form are fully operable; focus order is logical; focus is always visible.\n- No horizontal scroll at 320px; hero visual degrades gracefully on mobile.\n- Both themes pass 4.5:1 body-text contrast; toggle persists across reload; system-preference users get the right theme without flash.\n- `prefers-reduced-motion` disables the marching-ants animation, transforms, and smooth scrolling.\n- ARIA wiring is complete and truthful (`aria-expanded`, `aria-controls`, `aria-labelledby`, `aria-invalid`, `aria-live`, `aria-pressed`).\n- One naming convention (BEM) throughout; all colors\u002Fradii\u002Fshadows\u002Ftransitions from CSS variables; icons exclusively Material Symbols; fonts exclusively Google Fonts.\n- Real English copy everywhere; no lorem ipsum; no external images; no console errors.\n",1791954992696]