[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-220-Desenho-a-Mao-Ludico":3},"## Landing Page Build Prompt — \"Playful Hand-Drawn\" (Children's Illustrator Blog)\n\nAct as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality Landing Page on the first attempt — no follow-up questions, no partial deliverables.\n\n**Project Brief**\n\n* **Theme:** \"Playful Hand-Drawn\" (*Desenho à Mão Lúdico*) — a playful, organic, artistic landing page for a children's illustrator blog.\n* **Style keywords:** hand-drawn, illustration, children, stories, playful, organic, artistic, unique, warm, friendly. Era: 2026+ Artisanal Creativity.\n* **Visual language:** hand-drawn illustrations as main elements, handwritten-style typography, paper and chalk textures, irregular borders, scribble-animation hover micro-interactions, notebook page-turn section transitions, sky blue and grass green accents, warm and friendly feel.\n* **Sections (in order):** Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n* **Copy:** All user-facing copy must be written in **English**, in a warm, storybook voice. Write original copy — lorem ipsum is prohibited.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* All design properties, layout rules, and states are targeted via class or ID selectors only.\n* HTML remains clean, semantic, and style-agnostic — changing the look must never require touching the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root`. Light mode is the default **\"Sketchbook Paper\"** theme:\n\n* Backgrounds: `--bg-primary: #FDFDFD` (Chalk White — the theme's specified near-white paper; never `#ffffff`), `--bg-secondary: #FFF8E1` (sun-warmed paper tint).\n* Brand: `--primary: #87CEEB` (Sky Blue), `--secondary: #FFB6C1` (Pastel Pink).\n* Decorative accents: `--accent-green: #7CFC00` (Grass Green), `--accent-yellow: #FFD700` (Sun Yellow), `--accent-orange: #FFA07A` (Soft Orange), `--accent-brown: #D2B48C` (Light Brown).\n* Text: `--text-primary: #333333` (pencil), `--text-secondary: #5C5C5C` (darkened Pencil Gray — raw `#A9A9A9` fails AA as text and is reserved for borders\u002Fdecoration only), `--text-success: #2E7D32`, `--text-error: #C62828` (deepened, AA-accessible variants of the palette).\n* Borders: `--border-default: #A9A9A9` (Pencil Gray, used as `1px dashed` per the theme's technical spec), `--border-success: #2E7D32`, `--border-error: #D32F2F`.\n* Shape & depth: `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 26px`, plus the signature wobbly corner token `--radius-doodle: 255px 15px 225px 15px \u002F 15px 225px 15px 255px`; `--shadow-sm: 2px 3px 0 rgba(51,51,51,.08)`, `--shadow-md: 4px 6px 0 rgba(51,51,51,.14)` (flat offset \"marker\" shadows).\n* Motion & layout: `--spacing-gap: 1.25rem`, `--transition-fast: 0.2s ease-in-out`, `--transition-normal: 0.5s ease-in-out`, `--ease-standard: ease-in-out`.\n* Stacking: `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100`.\n* Typography: `--font-display: \"Permanent Marker\", cursive`, `--font-base: \"Patrick Hand\", cursive`.\n* **Contrast pairing is mandatory:** every light background token pairs with dark text tokens and vice versa, in every theme. Bright crayon accents (`#7CFC00`, `#FFD700`, `#FFA07A`) may be used as fills with dark text, highlighter strokes, and decorative borders — never as light text on light backgrounds.\n\n**1.3 Mandatory Dark Mode**\n* Implement dark mode as a **\"Chalkboard\"** variant: `--bg-primary: #263238`, `--bg-secondary: #2F3D45`, `--text-primary: #FDFDFD` (chalk), `--text-secondary: #BFC9CF`, `--text-success: #7CFC00`, `--text-error: #FF8A80`, borders `#A9A9A9`; the pastel accents carry over and become the bright, accessible chalk strokes on the dark board.\n* Define tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class; switching must require zero HTML restructuring.\n* Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit; ship a visible toggle with correct `aria-pressed`\u002F`aria-label` state.\n* **Exception clause:** the source style spec lists dark mode as unsupported — dark mode remains architecturally mandatory and must ship as the Chalkboard variant.\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 explicitly justified in CSS comments.\n* Mobile-first: multi-column rows collapse to columns below ~768px; horizontal scrolling is prohibited at any viewport width.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (CDN or custom CSS via `@layer`\u002F`@apply`). Every utility must map back to the CSS variables or to generic reusable classes: `.btn`, `.card`, `.input-group`, plus the theme classes `.hand-drawn-illustration`, `.scribble-animation`, `.paper-texture`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Google Fonts** via `\u003Clink>`: \"Permanent Marker\" for display\u002Fheadings and \"Patrick Hand\" for body copy (base size ≥ 18px for legibility — Permanent Marker must never be used for long-form text).\n* Icons: **Google Material Symbols (Rounded variant)** only. Raw inline SVGs are forbidden for functional UI icons. **Exception clause:** decorative hand-drawn illustration artwork (hero scene, doodles, map path, scribbles) may be authored as inline SVG stroke paths — this is core to the theme's identity; all functional icons remain Material Symbols.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px, `--radius-doodle` corners, dashed or solid border, flat offset shadow. Primary CTA uses Sun Yellow or Sky Blue fill with `#333333` text.\n* **Hover:** shadow grows + slight `rotate(-1deg)`, `cursor: pointer`.\n* **Focus:** distinct 3px dashed outline using `--primary` with 3px offset — visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `aria-busy=\"true\"`, interactions disabled to prevent double-clicks, CSS spinner that does not distort button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback states driven by `--text-success`\u002F`--text-error`, always paired with a Material Symbol icon and text — never color alone.\n\n**2.2 Card Component** (applies to feature, testimonial, and pricing cards)\n* **Default:** flexible flexbox layout, `--bg-secondary` fill, `1px dashed var(--border-default)`, `--radius-doodle`, slight per-card rotation (±1deg) for organic imperfection.\n* **Hover:** `translateY(-2px)` + shadow shift + scribble underline on the title.\n* **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** Material Symbol icon + clear guidance text fallback layout.\n\n**2.3 Form & Input Requirements** (used by the Final CTA newsletter capture)\n* **States:** Empty, Focused (dashed ring), Filled, Valid (success border + check icon), Invalid (error border, error icon, error message), Disabled, Read-only.\n* **Structure:** flex `.input-group` wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container with `aria-live=\"polite\"`.\n\n**2.4 Modal \u002F Popup Requirements** (recommended for the newsletter success confirmation)\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX:** centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `z-index: var(--z-modal)`.\n\n**2.5 FAQ Accordion**\n* Button + panel pattern with `aria-expanded`, `aria-controls`, and linked IDs; CSS-animated open\u002Fclose; `expand_more` icon rotates with the panel; fully keyboard operable; panels use `--bg-secondary` with doodle borders.\n\n**2.6 Theme Toggle**\n* Doodle-circle button with Material Symbols `light_mode`\u002F`dark_mode`; `aria-pressed` and `aria-label` update on switch; persists via `localStorage`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Signature theme effects (mandatory):**\n  * `.paper-texture`: pure-CSS paper grain (layered repeating gradients + soft vignette); dark mode swaps to chalkboard grain. No external image assets.\n  * `.scribble-animation`: on hover\u002Ffocus of links, buttons, and card titles, a hand-drawn underline draws itself — use native `text-decoration: underline wavy` + `text-underline-offset` for links, and `stroke-dashoffset` draw-in transitions for SVG doodles.\n  * Irregular borders: wobbly `--radius-doodle` corners + `1px dashed var(--border-default)` throughout, with slight rotations for a hand-made feel.\n  * Notebook page-turn transitions: each `\u003Csection>` is a `.page` with a spiral-binding strip (CSS repeating radial-gradient dots) on its left edge and a torn-paper top edge; an IntersectionObserver adds a class triggering a subtle `rotateY(-3deg)` → `0` perspective turn on entry.\n  * Hero illustration strokes draw in on page load via `stroke-dashoffset` animation.\n* **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n* **Smooth animations:** all state changes use `transition: var(--transition-normal)` (scoped to `color`, `background-color`, `border-color`, `transform`, `box-shadow` for performance); `--transition-fast` for micro feedback.\n* **Reduced motion:** under `prefers-reduced-motion`, disable page turns, draw-ins, floats, and spins; keep simple opacity fades only.\n* **Accessibility (a11y):** WCAG AA contrast in both modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`, exactly one `h1`); skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback and dynamic messages; 44×44px minimum touch targets.\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 light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>` entry point — no inline script blocks, no inline styles.\n* **Naming:** one consistent convention — BEM (e.g., `.pricing-card`, `.pricing-card--featured`, `.pricing-card__title`) for components; Tailwind utilities only for flex layout and spacing. Never mix conventions.\n* **No unrequested placeholders:** write original, playful English copy for headlines, feature blurbs, testimonial quotes, plan names, and FAQ answers. Only genuinely unspecified data (social URLs, contact email) may use `#` placeholders.\n* Google Fonts and Material Symbols are loaded via `\u003Clink>` tags in `index.html`.\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n**5.1 Header** — sticky, paper-textured background; hand-lettered logo wordmark (Permanent Marker); anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with scribble hover underlines; theme toggle; accessible mobile burger menu (`aria-expanded`, `z-index: var(--z-dropdown)`).\n\n**5.2 Hero** — `h1` headline + playful subhead in storybook voice; primary CTA button + secondary text link; large inline-SVG hand-drawn illustration as the main element (a friendly storybook scene) with stroke draw-in on load; floating doodle accents (sun, cloud, stars) in palette colors, gently animated; trust line beneath the CTA; flex row on desktop, column on mobile, `align-items: center`.\n\n**5.3 Features (3 cards)** — each card: Material Symbol icon inside a doodle-circle badge (one accent per card: Sky Blue, Grass Green, Sun Yellow), a title, and a one-sentence description; staggered rotations; hover lift + scribble underline.\n\n**5.4 How It Works (3 steps)** — oversized hand-drawn numerals inside doodle circles, connected by a dashed treasure-map path (SVG dotted line on desktop, hidden or vertical on mobile); each step: icon, short title, description.\n\n**5.5 Testimonials** — 3 quote cards with oversized hand-drawn quotation marks; doodle avatars (SVG faces or Material Symbol `face` inside doodle circles — no photos); name + role (e.g., \"Mum of two\", \"Year 2 teacher\", \"Children's librarian\"); 5-star rating via `star` icons with visually-hidden \"Rated 5 out of 5 stars\" text.\n\n**5.6 Pricing (3 tiers)** — middle tier uses `.pricing-card--featured` with a thicker doodle border, slight scale\u002Frotation, and a text ribbon (\"Most loved\" — conveyed by text, not color alone); each card: plan name, price, feature list with success-colored check icons paired with text, and a CTA button with full state styling per 2.1.\n\n**5.7 FAQ** — 5–6 questions in the accessible accordion defined in 2.5; section heading + friendly intro line; answers in warm, plain English.\n\n**5.8 Final CTA** — doodle-framed panel with a sun-yellow highlighter sweep behind the headline; newsletter `.input-group` per 2.3 (label, email input, submit button with loading + success\u002Ferror states); inline `aria-live` feedback (\"You're on the list!\"); optional success modal per 2.4.\n\n**5.9 Footer** — `--bg-secondary` background; grouped secondary links (Explore \u002F Stories \u002F Help); social icons (Material Symbols, `#` hrefs, descriptive `aria-label`s); copyright and small print; scribble hover underlines; contrast maintained in both themes.\n\n**JavaScript responsibilities (`script.js`):** theme toggle + `localStorage` persistence, mobile nav, FAQ accordion, IntersectionObserver page-turn reveals, newsletter form validation feedback, smooth anchor scrolling (disabled under `prefers-reduced-motion`).\n",1791954983231]