[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-639-MongoDB-Forest-Neon":3},"# System Prompt: Build the \"MongoDB Forest Neon\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce the complete, final, production-ready code in a single attempt — no partial output, no follow-up questions.\n\n**Objective:** Build a full landing page in the **MongoDB Forest Neon** theme: a deep forest teal-black canvas (`#001e2b` — forest-dark, not space-dark), a single electric bioluminescent neon-green accent (`#00ed64`), editorial serif hero headlines, technical monospace labels, and a signature dual-mode rhythm of dark-teal sections alternating with light sections. The product is a document database. **All user-facing copy must be written in English.**\n\n**Sections to build:** Header (for navigation + 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- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** Markup stays clean, semantic, and styling-agnostic — restyling the site must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root`, overridden per theme mode:\n- **Required tokens:** `--primary: #00ed64` (neon MongoDB green), `--secondary: #006cfa` (action blue), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Theme palette tokens:** `--forest-black: #001e2b`, `--green-deep: #00684a`, `--white: #ffffff`, `--blue-hover: #3860be`, `--teal-gray: #b8c4c2` (secondary text on dark surfaces), `--cool-gray: #5c6c75` (secondary text on light surfaces), plus `--bg-section-dark` and `--bg-section-light` driving the dual-mode section rhythm.\n- **Contrast Pairing:** Every light background token pairs with dark text tokens and every dark background token with light text tokens — enforced in every theme mode. On dark teal surfaces, text is `#ffffff` \u002F `#b8c4c2`; on light surfaces, text is `#001e2b` \u002F `#5c6c75`.\n- **Accent Contrast Rule:** Neon `#00ed64` is used only on dark-teal backgrounds (text, borders, glows, underlines). On light sections, all green accents switch to `#00684a`. Never place `#00ed64` text on white.\n- **Light Mode Background:** Never use pure `#ffffff` for page or section backgrounds — use `#fefefe`. Reserve `#ffffff` for text on dark surfaces and card surfaces inside dark sections.\n- **Radius:** `--radius-sm: 8px`, `--radius-md: 16px` (cards), `--radius-lg: 24px`, `--radius-pill: 100px` (buttons).\n- **Shadows (teal-tinted):** `--shadow-sm: rgba(0,30,43,0.08) 0 8px 20px`, `--shadow-md: rgba(0,30,43,0.12) 0 26px 44px` (the signature elevation).\n- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.\n\n**1.3 Mandatory Dark Mode Support (Dual-Mode)**\n- **Two-Layer Theming:** (a) the design's signature alternation of dark-teal and light sections, and (b) a full site-wide light\u002Fdark theme with a toggle. Both must work simultaneously.\n- **Implementation:** Define light-mode tokens in `:root` and dark-mode overrides under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. In dark mode, the \"light\" sections become an elevated teal derived from `#001e2b` (e.g., `#0a3040`); in light mode, dark sections keep `#001e2b`. Switching modes must never require HTML restructuring.\n- **Persistence:** Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit. Apply the stored theme before first paint to avoid a flash of the wrong theme.\n- **Toggle Control:** A visible pill button in the header with a Google Material icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment.\n- **Mobile-Friendly First:** All multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px. No horizontal scrolling at any viewport.\n- Use fluid type via `clamp()`; the hero headline reaches 96px on desktop and scales down gracefully.\n\n**1.5 Framework Default**\nUse Tailwind CSS (CDN acceptable) or clean custom CSS. Either way, every utility must map back to the CSS variables above or to generic reusable class names (`.btn`, `.card`, `.section`, `.section--dark`, `.section--light`, `.input-group`). Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- **Google Fonts:** Load **Source Code Pro** from Google Fonts and bind it to `--font-label`.\n- **Exception Clauses (per theme spec):** The hero serif is **Georgia** (system font, no import required) bound to `--font-hero`, and body text uses the **system-ui** stack bound to `--font-base` — both are explicit, allowed exceptions to the Google Fonts requirement.\n- **Hero:** Georgia, weight 400, up to 96px, line-height ~1.05 — editorial authority.\n- **Labels:** Source Code Pro, uppercase, letter-spacing 1px–3px, 12–13px — used for eyebrow labels, section kickers, badges, step numbers, and tier names, evoking database field names.\n- **Body:** weight 300 (light), 16–18px, line-height 1.6.\n- **Icons:** Google Material Symbols only. Inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (Pill)**\nBase: `display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill); min-height: 44px; padding: 0 32px; font-weight: 500`. All states via CSS classes:\n- **Variants:** `.btn--primary` (neon `#00ed64` fill + `#001e2b` text on dark sections; `#00684a` fill + `#ffffff` text on light sections), `.btn--outline` (transparent with a 1.5px `#00ed64` border on dark surfaces \u002F `#00684a` border on light surfaces), `.btn--ghost` (text link with a green underline on hover).\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`; primary pills may gain a subtle neon glow (`box-shadow` with `#00ed64` alpha) — the bioluminescent signature.\n- **Focus:** Distinct ring via `outline` + `box-shadow` using `--secondary` or green tokens; visible in both modes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` disables pointer events, prevents double-clicks, and renders a CSS spinner or animated Material icon without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form submit).\n\n**2.2 Card Component**\n- **Default:** Flexible flexbox layout, `background: var(--bg-secondary)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-md)` (16px), resting shadow `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` plus elevation shift to `--shadow-md` (interactive cards only).\n- **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define shimmer animation classes for card content to prevent layout jumps if content loads asynchronously.\n- **Empty State:** Structured fallback layout with a Material icon and clear guidance text for any dynamic region.\n\n**2.3 Form & Input Requirements (Final CTA Email Capture)**\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, an `\u003Cinput type=\"email\">`, and a dedicated error\u002Fsuccess feedback container.\n- **States:** Empty, Focused (green\u002Fblue outline ring), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red text, error icon, message), Disabled, Read-only.\n- **Feedback:** Validation messages render in an `aria-live=\"polite\"` region; never rely on color alone — pair color with icon and text.\n\n**2.4 FAQ Accordion & Overlay Requirements**\n- **The FAQ must be an accordion, not a modal:** each item is a `\u003Cbutton aria-expanded>` (or `\u003Cdetails>\u002F\u003Csummary>`) controlling its panel; a chevron Material icon rotates 180° on open; open\u002Fclose animates via CSS (`grid-template-rows` or height transition); the entire header is keyboard operable with a visible focus ring.\n- **No modals are required on this page.** If an overlay is ever introduced, it must be a centered flex dialog with a backdrop, Material icon close button, focus trapping, and `Esc`\u002Foverlay-click closing — but do not add one unless explicitly requested.\n\n---\n\n## 3. PAGE STRUCTURE — SECTION-BY-SECTION REQUIREMENTS\n\nEvery section shares: a Source Code Pro uppercase kicker with wide tracking, a Georgia headline (32–48px), weight-300 body copy, and the signature green underline — a short `#00ed64` (dark sections) \u002F `#00684a` (light sections) underline bar as a recurring decorative motif. Alternate section themes exactly as prescribed:\n\n1. **Header (sticky):** Brand wordmark (invent a fitting English brand, e.g., \"CanopyDB\"), anchor links to all sections, and the theme toggle pill. On mobile, collapse links behind a Material icon menu button with `aria-expanded`\u002F`aria-controls`. Header background adapts per theme mode with translucency\u002Fblur.\n2. **Hero (dark teal):** Source Code Pro eyebrow label (e.g., \"DOCUMENT DATABASE · BUILT FOR SCALE\"), Georgia 96px headline with one keyword wrapped in a neon `#00ed64` underline decoration, weight-300 subheadline, and two pill CTAs (primary + outline). Add a CSS-only bioluminescent glow: a soft radial gradient of `#00ed64` at low alpha behind the headline — pure CSS, no images.\n3. **Features — 3 cards (light section):** Each card has a Material icon inside a neon-ringed circle, a Source Code Pro mini-label, a Georgia card title, and a weight-300 description. Follow §2.2.\n4. **How It Works — 3 steps (dark teal section):** Steps numbered `01 \u002F 02 \u002F 03` in Source Code Pro with wide tracking, connected by a thin `#00ed64` line (CSS pseudo-element) that hides on mobile; each step has an icon, title, and description.\n5. **Testimonials (light section):** Three quote cards with the `format_quote` Material icon, a weight-300 quote, an initials-based avatar circle (CSS only, no external images), and name + role in Source Code Pro small caps.\n6. **Pricing — 3 tiers (dark teal section):** Three cards; the middle \"Most Popular\" tier is visually elevated — a forest-black card with a 2px `#00ed64` border, a neon Source Code Pro badge, and the signature `--shadow-md`. Each tier: Source Code Pro tier label, Georgia price, feature list with `check` Material icons, and a pill CTA (the highlighted tier gets the primary neon pill).\n7. **FAQ (light section):** 5–6 real, thematically written questions about the database product; accordion per §2.4.\n8. **Final CTA (dark teal with neon glow):** Georgia headline, weight-300 subcopy, and the email capture form per §2.3, whose primary pill submit shows loading → success feedback.\n9. **Footer (deepest teal, e.g., `#00141d`):** Brand + tagline, secondary link columns (Product, Company, Resources, Legal), social links as Material icons, and a copyright line. Links use `--secondary` blue with `--blue-hover` on hover, with verified contrast on dark surfaces.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid `clamp()` type scale and responsive breakpoints with zero horizontal overflow. Anchor navigation uses smooth scrolling with `scroll-margin-top` compensating for the sticky header.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms and glow pulses).\n- **Accessibility (a11y):** Sufficient contrast in both light and dark modes; never communicate state by color alone; semantic HTML5 (`header`, `main`, `section`, `nav`, `footer`); correct ARIA roles\u002Flabels on the theme toggle, mobile menu, accordion, and form feedback; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, submit success).\n- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** Any `.btn-danger` must be visually distinct in both themes (include the class definition even if unused on this page).\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n- **Naming Convention:** One consistent BEM convention (`.card`, `.card__title`, `.card--featured`, `.btn--primary`) across the entire deliverable — never mix conventions.\n- **Copy:** All user-facing copy in English, real and thematically written for a document database product (collections, documents, queries, horizontal scale) — no lorem ipsum.\n- **No Unrequested Placeholders:** Every section is fully populated with themed content; placeholders are allowed only where content was genuinely unspecified.\n",1791954990349]