[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-367-Chalkboard":3},"# SYSTEM PROMPT — \"CHALKBOARD\" LANDING PAGE (HAND-DRAWN, EDUCATIONAL, DARK-ONLY)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Deliver final code only — no explanations, no TODOs, no unfinished sections.\n\n**Project Brief:**\n- **Theme:** \"Chalkboard\" — hand-drawn, educational, textured, nostalgic. A deep green\u002Fslate classroom board with chalk-white hand-written text, dashed hand-drawn borders, sketch-style accents, chalk-dust texture, eraser smudges, and pastel chalk colors.\n- **Sections (in this order):** Sticky Navigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (with email capture), Footer with secondary links.\n- **Mode:** Dark-only (see §1.3 exception).\n- **Copy:** Write complete, realistic English copy for a coherent fictional product — an interactive online learning platform (e.g., \"Chalkboard Academy\"). Warm, teacherly, nostalgic tone. No lorem ipsum anywhere.\n\n---\n\n## THEME DIRECTION — TOKENS & SIGNATURE EFFECTS\n\n**Color Tokens (define exactly in `:root`):**\n- `--bg-primary: #2D4A3E` (Chalkboard Green — main board surface)\n- `--bg-secondary: #1A1A2E` (Deep Slate — nav, footer, alternating panels, elevated surfaces)\n- `--text-primary: #F5F5DC` (Chalk White)\n- `--text-secondary: rgba(245, 245, 220, 0.75)` (dimmed chalk — must maintain ≥ 4.5:1 contrast)\n- `--primary: #FFF59D` (Pastel Chalk Yellow — primary CTA fill)\n- `--secondary: #81D4FA` (Chalk Blue — secondary accent)\n- `--accent-yellow: #FFF59D`, `--accent-pink: #F48FB1`, `--accent-blue: #81D4FA`, `--accent-orange: #FFAB91` (rotate across cards, steps, and testimonials)\n- `--text-success: #B9F6CA`, `--text-error: #EF9A9A` (pastel chalk family extensions for semantic states)\n- `--border-default: rgba(245, 245, 220, 0.45)`, `--border-error: rgba(239, 154, 154, 0.7)`, `--border-success: rgba(185, 246, 202, 0.7)`\n- **Contrast pairing (mandatory):** every dark surface token pairs with Chalk White text; every light fill (e.g., the yellow `--primary` button) pairs with dark text `#1A1A2E`. Pastel accents are for icons, borders, and large display text only — never small body copy.\n- Never use `#ffffff`; if a near-white is ever needed, use `#F5F5DC` or `#fefefe`.\n\n**Signature Visual Effects (all CSS-driven):**\n1. **Chalk glow:** `text-shadow: 0 0 3px rgba(255, 255, 255, 0.3)` on headings and display text.\n2. **Board grain:** subtle noise texture on backgrounds via layered CSS gradients or an `feTurbulence` data-URI in CSS `background-image`.\n3. **Hand-drawn borders:** `2px dashed` chalk borders plus the wobbly sketch radius trick — e.g., `border-radius: 255px 15px 225px 15px \u002F 15px 225px 15px 255px;` — on buttons, cards, badges, and inputs.\n4. **Eraser smudges:** soft, blurred lighter radial-gradient patches layered on section backgrounds.\n5. **Chalk dust particles:** a small set of `aria-hidden=\"true\"` decorative dots drifting via CSS keyframes; fully disabled under `prefers-reduced-motion`.\n6. **Sketch filter:** a single inline SVG `\u003Cfilter id=\"chalk-texture\">` (`feTurbulence` + `feDisplacementMap`) referenced via `filter: url(#chalk-texture)` — applied ONLY to decorative elements (chalk frames, dividers, badges, doodles), never to body copy.\n7. **Chalk line decorations:** dashed underlines beneath headings, dashed connector lines between steps, hand-drawn arrows\u002Fstars built from borders and pseudo-elements.\n\n**Typography (Google Fonts mandatory):**\n- Headings: **Caveat** (600\u002F700) → `--font-heading`. Body: **Patrick Hand** (400) → `--font-base`. Fallback: `cursive, sans-serif`. Load via Google Fonts `\u003Clink>`.\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 everywhere in the HTML.\n- **Class\u002FID Selectors Only:** all design properties, layout rules, and states live in `style.css`, targeted via class\u002FID selectors.\n- **Minimal HTML Modifications:** HTML stays clean, semantic, and style-agnostic — re-theming the site must require editing only `style.css`.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\n- All tokens above in `:root`, plus: `--radius-sm: 4px`, `--radius-md: 8px`, `--radius-lg: 16px` (the hand-drawn wobble radius overrides these on chalk components), `--shadow-sm`, `--shadow-md` (soft dark shadows with a faint chalk glow), `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- No hard-coded colors, sizes, or durations in any rule — always reference the variables.\n\n**1.3 Mandatory Dark Mode Support**\n- The color scheme must be fully token-driven so a palette could switch without any HTML restructuring.\n- **Exception (explicit):** the Chalkboard spec is dark-only (\"✗ Light \u002F ✓ Dark\"). The dark palette above IS the default and only theme — do NOT build a light palette and do NOT render a theme toggle or `localStorage` theme persistence. Every color must still live in CSS variables so a future light theme could be added without markup changes. `prefers-color-scheme` needs no handling since no light variant exists.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (and grid only for card\u002Fpricing columns).\n- **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., top-aligned text columns inside cards).\n- **Mobile-Friendly First:** all rows collapse to columns on small viewports; zero horizontal scrolling from 320px up.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (Play CDN via external `\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>` — an external script, which is permitted) for layout, spacing, and responsive utilities.\n- All chalk visual identity lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.chalk-frame`, `.faq__item`, …), defined via `@layer`\u002F`@apply` where useful, always mapping back to the CSS variables.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: Google Fonts only (Caveat + Patrick Hand), loaded via `\u003Clink>` tags.\n- Icons: Google Material Symbols (Rounded variant — it suits the hand-drawn feel), loaded via the Google Fonts link. Suggested names: `school`, `menu`, `close`, `check`, `star`, `format_quote`, `arrow_forward`, `help`, `mail`, `groups`, `insights`, `cast_for_education`, `error`, `check_circle`, `progress_activity`.\n- **Exception (explicit):** the style spec explicitly requires an SVG `feTurbulence`\u002F`feDisplacementMap` filter for the sketch aesthetic. One hidden `\u003Csvg>` block defining `\u003Cfilter id=\"chalk-texture\">` is the ONLY inline SVG permitted, used exclusively via `filter: url(#chalk-texture)` on decorative elements. It must never replace icons — all icons remain Material Symbols. No other inline SVGs, no local icon files, no SVG illustrations (compose \"illustrations\" from CSS shapes and filtered Material Symbols instead).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — all states via classes:\n- **Default:** `.btn` base with `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, 2px dashed chalk border, wobble radius, Caveat label. Variants: `.btn--primary` (Pastel Chalk Yellow fill + dark slate text), `.btn--ghost` (transparent, chalk border, chalk text), `.btn--danger` (pastel red border\u002Ftext — visually distinct on the dark board).\n- **Hover:** intensified chalk glow\u002Fbrightness shift with `cursor: pointer`.\n- **Focus:** distinct chalk ring via `box-shadow` using `--accent-yellow`, clearly visible on the dark background, for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.btn--loading` disables interaction, prevents double-clicks\u002Fdouble-submits, and shows a CSS spinner or rotating Material `progress_activity` icon without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary `.btn--success` \u002F `.btn--error` feedback styles driven by `--text-success` \u002F `--text-error`, always paired with an icon or label change — never color alone.\n\n**2.2 Card Component Requirements** (Features, Pricing tiers, Testimonials):\n- **Default:** flexible Flexbox layout, `--bg-secondary` or transparent with dashed chalk border + wobble radius, subtle `--shadow-sm`, `align-items: center` by default.\n- **Hover:** `transform: translateY(-2px)` plus a glow\u002Fshadow shift.\n- **Focus-within:** chalk border brightens when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** chalk-toned shimmer keyframes defined in CSS to prevent layout jumps.\n- **Empty State:** structured fallback layout with a Material Symbol icon and clear guidance text, centered flex.\n\n**2.3 Form & Input Requirements** (Final CTA email capture):\n- **States:** empty, focused (chalk outline ring), filled, valid (success border + `check` icon), invalid (error border, `--text-error` message + `error` icon), disabled, read-only.\n- **Structure:** flex `.input-group` wrapping a `\u003Clabel>`, the `\u003Cinput>` (dashed chalk border, wobble radius, Chalk White text, dark translucent fill, 44px min height), and a dedicated `.input-group__error` container whose messages are announced via `aria-live=\"polite\"`.\n\n**2.4 Modal \u002F Popup Requirements** (applies to any overlay you include, e.g., a \"Watch a demo\" modal triggered from the Hero):\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (fade + slight scale).\n- **UX Features:** centered flex container (`align-items: center`), backdrop overlay of Deep Slate at high opacity, Material `close` icon button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, stacked at `--z-modal`.\n\n**2.5 FAQ Accordion Requirements:**\n- Each trigger is a `\u003Cbutton>` with `aria-expanded` and `aria-controls`; a Material `add`\u002F`expand_more` icon rotates 180° on open; panels animate via CSS (`grid-template-rows` or `max-height`) using `--transition-normal`; fully keyboard operable; answers in `--text-secondary`.\n\n**2.6 Section-by-Section Build Spec:**\n- **Sticky Nav:** translucent `--bg-secondary` with blur; handwritten Caveat wordmark; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); CTA button; mobile hamburger (Material `menu`\u002F`close`, `aria-expanded`, panel at `--z-dropdown`); smooth anchor scrolling with `scroll-margin-top` on sections (reduced-motion safe).\n- **Hero:** full-viewport board; `\u003Ch1>` in Caveat with chalk glow and a dashed chalk underline; subheadline in `--text-secondary`; two CTAs (`.btn--primary` \"Get Started\", `.btn--ghost` \"See How It Works\"); a hand-drawn arrow doodle pointing at the primary CTA; drifting chalk dust particles; optional fade-in on load (reduced-motion safe).\n- **Features:** 3 cards (1 column mobile → 3 columns ≥ 768px); each with a Material icon tinted in a different pastel accent (yellow, pink, blue), a Caveat `\u003Ch3>`, and body copy; hover\u002Ffocus-within per §2.2.\n- **How It Works:** 3 steps with chalk-circled numbers (wobble-radius circles, Caveat digits), one Material icon per step, and a dashed chalk connector line between steps (horizontal on desktop, vertical on mobile).\n- **Testimonials:** 3 quote cards, one pastel accent each; Material `format_quote` icon; 5-star ratings with Material `star` icons in `--accent-yellow`; name + role attribution; eraser-smudge background variation on the section.\n- **Pricing:** 3 tiers with classroom-flavored names (e.g., \"Student\" free, \"Star Student\" featured, \"Faculty\"); the middle tier is featured with a hand-drawn \"Most Popular\" badge, a thicker\u002Fdouble dashed accent border, and slight elevation\u002Fscale; each tier shows name, large Caveat price, a feature list with Material `check` icons, and a CTA (`.btn--primary` on featured, `.btn--ghost` elsewhere); add a small chalk-note guarantee line.\n- **FAQ:** 5–6 realistic items per §2.5.\n- **Final CTA:** a `--bg-secondary` panel wrapped in a sketch-filtered chalk frame; headline plus the email capture form per §2.3, with a loading state and a success (\"You're on the list!\" + `check_circle`) \u002F error flow announced via `aria-live`; surface a toast at `--z-toast` on submission.\n- **Footer:** `--bg-secondary`; flex\u002Fgrid that stacks on mobile; brand + one-liner; secondary link columns (Product, Company, Support — including About, Contact, Privacy, Terms); Material social icons; copyright line; all links in `--text-secondary`, brightening with a glow on hover, with visible focus rings.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid type via `clamp()`; responsive breakpoints; no horizontal overflow from 320px up.\n- **Smooth Animations:** CSS transitions on all state changes using `--transition-normal` \u002F `--ease-standard`; `prefers-reduced-motion` disables dust particles, transforms, and smooth scrolling.\n- **Accessibility (a11y):** WCAG AA contrast across the dark theme (Chalk White on green\u002Fslate and dark slate text on yellow fills both pass); never rely on color alone to communicate state — always pair with an icon and\u002For text; semantic HTML5 (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); logical heading order h1 → h2 → h3; logical DOM\u002Ffocus order; full keyboard operability (nav menu, accordion, forms, modal); `aria-live` regions for form feedback and toasts; visible focus rings on every interactive element.\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** any delete\u002Fdanger action uses `.btn--danger` and is visually distinct on the dark board.\n- **Copy Locale:** all user-facing copy in English.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks — only the single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`) plus the external Tailwind CDN script. The SVG `\u003Cfilter id=\"chalk-texture\">` definitions block (§1.6 exception) lives in `index.html`.\n- **Naming Convention:** strict BEM for every custom class (`block__element--modifier`, e.g., `.btn--primary`, `.pricing-card--featured`, `.input-group__error`, `.faq__trigger`, `.chalk-dust__particle`); Tailwind utilities handle layout only; no other naming conventions may appear.\n- **No Unrequested Placeholders:** no lorem ipsum, no \"TODO\", no empty stubs — every section fully built and populated with real themed copy.\n- Deliver the final, complete code on the first attempt.\n",1791954985693]