[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-010-Estilo-de-Experiencia-de-Compra-Continua":3},"# CODING-AI SYSTEM PROMPT — LANDING PAGE BUILD: \"CONTINUUM\" (Continuous Shopping Experience)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below on the first attempt. Deliver the full final code — no clarifying questions, no scoped-down substitutes.\n\n---\n\n## 0. PROJECT DEFINITION & DESIGN DIRECTION\n\n**0.1 Product & Theme**\n- Fictional brand: **Continuum** — a premium e-commerce subscription service (2026-era): cloud-synced shopping, member pricing across a vast catalog, and autonomous delivery (drones\u002Frover fleets) with live route tracking.\n- Style name: **Continuous Shopping Experience** — Functional, Trustworthy, Scalable. Era: 2026+ E-commerce Evolution. Output category: Corporate & SaaS.\n- Keywords to express visually: e-commerce, cloud, logistics, autonomous delivery, customer-centric, reliable, efficient, vast, seamless, modern.\n- Feel: clean, product-focused, airy, conversion-oriented. Premium through efficiency and trust — never through ornamentation.\n\n**0.2 Language Rule (Mandatory)**\n- Write ALL user-facing copy (headlines, body text, button labels, form messages, footer links, aria-labels) in **English**. No Portuguese or any other language may appear anywhere in the UI.\n\n**0.3 Required Page Sections (single page, anchor-navigable, in this order)**\n1. Sticky Header — brand, nav links, theme toggle, CTA button\n2. Hero — copy, dual CTAs, trust row, autonomous delivery route visualization\n3. Features — 3 cards\n4. How It Works — 3 steps\n5. Testimonials — 3 quotes\n6. Pricing — 3 tiers + billing toggle\n7. FAQ — accordion\n8. Final CTA — conversion band with email capture\n9. Footer — secondary link columns\n\n**0.4 Source Style Specification (translated & adapted)**\n- Palette — Primary: Retail Orange `#FF9900`, Black `#000000`, White `#FFFFFF`, Dark Slate `#232F3E`. Secondary: Light Gray `#DDDDDD`, Teal `#00A8E1`, Green `#008000`, Gold `#FFD700`.\n- Base visual values from the source spec: `box-shadow: 0 1px 3px rgba(0,0,0,0.12)`, `border-radius: 3px`, `transition: all 0.2s ease-in-out`, page gradient `linear-gradient(to bottom, #F7FAFA, #FFFFFF)`, and the class hooks `.product-card-hover` and `.delivery-animation` (both must exist and be used).\n- Enforced adaptations: `#FFFFFF` is replaced by `#FEFEFE` everywhere (pure white is forbidden); the malformed quoted font stack `\"Verdana, Arial, sans-serif\"` is normalized into a Google-Font-first stack (see 1.6).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in a dedicated `style.css`. **Forbidden:** the `style=\"...\"` attribute anywhere in the HTML, inline `\u003Cscript>` blocks, and inline event-handler attributes (`onclick=`, `onsubmit=`, etc.).\n- All design properties, layout rules, and states are targeted exclusively via class or ID selectors.\n- HTML must remain clean, semantic, and style-agnostic: changing the entire look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and the `.dark` theme class. Use exactly these names:\n\n```css\n:root {\n  \u002F* Color tokens — Light theme *\u002F\n  --primary: #FF9900;        \u002F* Retail Orange — CTAs, key accents *\u002F\n  --secondary: #232F3E;      \u002F* Dark Slate — header\u002Ffooter surfaces, headings *\u002F\n  --bg-primary: #F7FAFA;     \u002F* Page background (gradient start) *\u002F\n  --bg-secondary: #FEFEFE;   \u002F* Card\u002Fsurface background — never #FFFFFF *\u002F\n  --text-primary: #000000;\n  --text-secondary: #565959;\u002F* Derived neutral for body copy (AA on light) *\u002F\n  --text-success: #008000;\n  --text-error: #CC0000;     \u002F* Derived — palette lacks error red; mandatory *\u002F\n  --border-default: #DDDDDD;\n  --border-success: #008000;\n  --border-error: #CC0000;\n  --accent-teal: #00A8E1;    \u002F* Icons, route lines, decorative accents *\u002F\n  --accent-teal-text: #00708F; \u002F* Darkened teal for teal TEXT on light bg (AA) *\u002F\n  --accent-gold: #FFD700;    \u002F* Star ratings, \"Most Popular\" badge *\u002F\n  --on-primary: #000000;     \u002F* Text\u002Ficons on orange surfaces *\u002F\n\n  \u002F* Shape & elevation *\u002F\n  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px;\n  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);\n  --shadow-md: 0 6px 16px rgba(0,0,0,0.16);\n\n  \u002F* Spacing, motion, stacking *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 0.2s; --transition-normal: 0.3s; --ease-standard: ease-in-out;\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n\n  \u002F* Typography & surfaces *\u002F\n  --font-base: \"Inter\", Verdana, Arial, sans-serif;\n  --gradient-page: linear-gradient(to bottom, #F7FAFA, #FEFEFE);\n}\n\n.dark {\n  --bg-primary: #131A22;     \u002F* Derived deep slate from #232F3E *\u002F\n  --bg-secondary: #232F3E;\n  --text-primary: #FEFEFE;\n  --text-secondary: #DDDDDD;\n  --text-success: #3FB950;   \u002F* Lightened for dark-surface contrast *\u002F\n  --text-error: #FF8A8A;\n  --border-default: #3B4655;\n  --border-success: #3FB950;\n  --border-error: #FF8A8A;\n  --accent-teal: #33BBE7;\n  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);\n  --shadow-md: 0 6px 16px rgba(0,0,0,0.6);\n  --gradient-page: linear-gradient(to bottom, #0E141B, #131A22);\n}\n```\n\n- **Contrast pairing (enforced in both themes):** every light surface pairs with dark text; every dark surface pairs with light text. Orange (`--primary`) surfaces ALWAYS pair with `--on-primary` (#000000) text — orange-on-white fails contrast and is forbidden for meaningful text. Teal `#00A8E1` is restricted to icons, lines, and large decorative elements on light backgrounds; use `--accent-teal-text` for teal text\u002Flinks on light surfaces. Gold badges pair with `--secondary` text. Never rely on color alone to communicate state.\n- All transitions use the pattern `transition: all var(--transition-fast) var(--ease-standard)` (matching the source spec's `0.2s ease-in-out`).\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens under BOTH `@media (prefers-color-scheme: dark)` (first-visit default) AND a `.dark` class on `\u003Chtml>` (user override). Background\u002Ftext variables must switch with zero HTML restructuring.\n- **Persistence:** store the choice in `localStorage`; on load, apply the saved choice, falling back to `prefers-color-scheme` for first visits. Provide a visible toggle button in the header with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), swapping Material icons `light_mode`\u002F`dark_mode`.\n- **Exception clause:** the source specification marked Dark Mode \"✗ No\" — this is overridden: dark mode is mandatory per architecture rules and must be fully implemented with AA contrast.\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 code comments (the only sanctioned default exception: `align-items: stretch` for equal-height card rows).\n- Mobile-first: all rows collapse to single columns below 768px; no horizontal scrolling at any viewport width; all interactive targets ≥ 44×44px.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Default to Tailwind CSS (CDN or build). Utilities must map back to CSS variables or a fixed, generic component class set: `.btn`, `.card`, `.input-group`, `.badge`, `.accordion`, `.theme-toggle`, `.delivery-animation`, `.product-card-hover`, `.reveal`, `.container`. Define these in a single `@layer components` block via `@apply`, with all values driven by the tokens in 1.2.\n- Alternative: clean custom CSS using strict BEM — but choose **ONE** convention for the entire deliverable and never mix conventions.\n\n**1.6 Typography & Icons — Google Fonts Mandatory**\n- Load **Inter** (weights 400\u002F500\u002F600\u002F700\u002F800) via Google Fonts `\u003Clink>` and bind it to `--font-base`.\n- Load **Google Material Symbols (Rounded)** via `\u003Clink>`; use `font-variation-settings: 'FILL' 1` for filled icons (e.g., stars). **Forbidden:** raw inline SVGs, local icon files, emoji as icons.\n- **Exception clause:** the source spec requested Verdana\u002FArial as the primary stack — superseded by the mandatory Google Fonts rule; `Verdana, Arial, sans-serif` are retained as fallbacks only inside `--font-base`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (` .btn` + variants `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px; `--radius-sm`; `--transition-fast` on all properties.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring via `box-shadow` using `--accent-teal` (visible on both themes).\n- **Active:** `transform: scale(0.97)`.\n- **Loading (`.btn--loading`):** `aria-busy=\"true\"`, pointer-events disabled (prevents double-clicks), CSS border-spinner or rotating Material `progress` icon; button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError (`.btn--success` \u002F `.btn--error`):** transient feedback states driven by `--text-success` \u002F `--text-error`, announced via an `aria-live=\"polite\"` region.\n- `.btn--danger` must be visually distinct in both light and dark themes.\n\n**2.2 Card Component (`.card` + variants `.card--feature`, `.card--pricing`, `.card--testimonial`, `.card--step`)**\n- **Default:** flex layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-sm`, `--shadow-sm`.\n- **Hover (`.product-card-hover`):** `transform: translateY(-2px)` + elevation shift to `--shadow-md` + border-color shift.\n- **Focus-within:** card border highlights in `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton` \u002F `.skeleton`):** shimmer gradient-sweep keyframes that preserve final layout dimensions (no layout jumps).\n- **Empty state (`.card--empty`):** fallback layout with a Google Material icon and clear guidance text — define it in the component system.\n\n**2.3 Form & Input Component (`.input-group`)**\n- **Structure:** flex container wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error-feedback container (`\u003Cp>` with `aria-live=\"polite\"`).\n- **States (all styled via classes):** empty, focused (visible ring — never remove the outline without replacing it), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error text in `--text-error`, `error`\u002F`cancel` icon, message announced), disabled, read-only.\n\n**2.4 Modal \u002F Popup (applies to any overlay used, e.g., a footer \"Terms\" link opening a dialog)**\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- **UX:** centered flex container (`align-items: center; justify-content: center`), backdrop overlay, Material `close` icon button, keyboard focus trap, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal`, `z-index: var(--z-modal)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** every state change transitions with `var(--transition-fast\u002Fnormal)`; fully respect `prefers-reduced-motion: reduce` (stop `.delivery-animation` movement, show `.reveal` content instantly, reduce transitions to none).\n- **Accessibility (a11y):** AA contrast in both light and dark modes; never color-only state communication; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a single `h1`; a \"Skip to main content\" link; logical focus order; full keyboard operability; `aria-live` regions for form errors, CTA success, and pricing-toggle announcements.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** `.btn--danger` visually distinct in both themes.\n- **Trust elements everywhere:** gold star ratings (always paired with numeric text like \"4.9\u002F5\"), verified badges, member counts, secure-checkout cues.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` in the HTML — no other script blocks.\n- **Head requirements:** `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>`, meta description, Google Fonts + Material Symbols links.\n- **Naming:** one consistent convention across the entire deliverable (see 1.5) — never mix.\n- **Copy:** realistic, specific English copy for the Continuum brand — lorem ipsum is forbidden. Footer\u002Flegal links without real destinations may use `href=\"#\"` but must carry descriptive labels.\n- **JS behaviors required in `script.js`:** theme toggle with `localStorage` persistence; mobile nav open\u002Fclose (with `Esc`\u002Foverlay\u002Flink-click close and focus management); FAQ accordion; pricing billing toggle; smooth anchor scrolling (respecting reduced motion); IntersectionObserver scroll reveals; CTA demo loading→success flows; email form validation with `aria-live` feedback.\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n**5.1 Sticky Header**\nFlex row: wordmark \"Continuum\" (Material `all_inclusive` or `bolt` icon + text), nav links (Features, How It Works, Pricing, FAQ), theme toggle (per 1.3), `.btn--primary` \"Get Started\". Mobile: Material `menu` button toggles a dropdown panel (`--z-dropdown`) with `aria-expanded`, keyboard accessible. Subtle `--shadow-sm` when scrolled.\n\n**5.2 Hero**\nTwo-column flex (stacks on mobile) over `--gradient-page`. Left: eyebrow badge (\"Now with autonomous delivery\"), `h1` \"Shopping that never stops.\", subheadline about cloud cart sync, member pricing, and 2-hour autonomous delivery; primary CTA \"Start Free Trial\" (smooth-scrolls to Pricing) + secondary \"See How It Works\"; trust row of 5 gold `star` icons (FILL 1) + \"4.9\u002F5 · 50,000+ verified member reviews\" + \"Secure checkout · Cancel anytime\". Right: **`.delivery-animation`** — a CSS-only autonomous delivery route visualization built as a tracking card: dashed route line (CSS gradient\u002Fborder), an orange marker circle with Material `local_shipping` traveling along waypoints via `@keyframes`, pulsing waypoint dots, an ETA chip (\"Arriving today · 2:38 PM\"), and a small mock product card. **No inline SVG** — pseudo-elements and keyframes only. Reduced motion → static route.\n\n**5.3 Features — 3 Cards**\nSection header (eyebrow + `h2` + support line), then a wrapping flex row of three `.card--feature` elements: (1) \"Autonomous Delivery\" — icon `local_shipping` — drones\u002Frovers in as little as 2 hours with live route tracking; (2) \"Cloud Cart Sync\" — icon `cloud_done` — cart, lists, and preferences follow you across every device; (3) \"Vast Catalog, Member Pricing\" — icon `workspace_premium` — millions of items with exclusive member deals and one-tap reordering. All cards use `.product-card-hover`.\n\n**5.4 How It Works — 3 Steps**\nHorizontal 3-step flex flow (vertical on mobile) with numbered markers (01\u002F02\u002F03), a connecting line that animates on scroll-into-view, and per-step Material icons: (1) `bolt` \"Join in 30 seconds\" — pick a plan, add your address; (2) `devices` \"Shop seamlessly\" — your cloud cart syncs, member pricing applies automatically; (3) `route` \"Track your delivery\" — watch the live route and get notified on arrival.\n\n**5.5 Testimonials**\nThree `.card--testimonial` elements using `figure`\u002F`blockquote`\u002F`figcaption`: 5 gold stars with sr-only \"Rated 5 out of 5 stars\", a realistic quote about speed\u002Freliability, reviewer name + role, CSS initial-circle avatar, and a `verified` \"Verified member\" badge.\n\n**5.6 Pricing — 3 Tiers**\nBilling toggle (Monthly \u002F Annual — \"save ~20%\") as a segmented control with `aria-pressed` and an `aria-live=\"polite\"` announcement; prices swap through a brief `.skeleton` shimmer (efficient loading animation). Three `.card--pricing` tiers: **Essential** $9\u002Fmo ($90\u002Fyr), **Plus** $19\u002Fmo ($190\u002Fyr) — highlighted with a gold \"Most Popular\" badge, `--primary` border, `--shadow-md`, and slight lift — and **Elite** $39\u002Fmo ($390\u002Fyr). Each card: tier name, price, tagline, feature list with `check_circle` icons, and a CTA implementing the full button state system (click → `.btn--loading` ~1s → `.btn--success` with check icon + live confirmation).\n\n**5.7 FAQ**\nAccordion of 5–6 items (coverage areas, delivery speed, cloud-cart security, cancellation, what happens after the trial, supported devices). Each item: `h3` > `button` with `aria-expanded` + `aria-controls`, rotating `expand_more` icon, and a `role=\"region\"` panel animated via CSS (grid-rows or max-height technique). Single-open behavior; fully keyboard operable.\n\n**5.8 Final CTA**\nFull-width band on `--secondary` (light mode) \u002F elevated dark surface (dark mode) with light text and orange accents. `h2` \"Ready to shop without friction?\", support line, and an `.input-group` email capture: label \"Email address\", input, primary button \"Start Free Trial\" with full validation states — invalid shows `--border-error` + announced error message; valid simulates `.btn--loading` then success (`check_circle` + \"You're on the list — check your inbox to activate your trial.\") in an `aria-live` region. Secondary text link \"View pricing\".\n\n**5.9 Footer**\nDark-surface footer with light text (contrast-paired). Flex columns: brand blurb + trust badges; \"Company\" (About, Careers, Press, Sustainability); \"Support\" (Help Center, Delivery Info, Contact, System Status); \"Legal\" (Privacy Policy, Terms of Service, Cookie Settings, Accessibility). Social icon row (Material icons with `aria-label`). Bottom bar: \"© 2026 Continuum. All rights reserved.\" In-page anchors where targets exist; otherwise `href=\"#\"` with descriptive labels.\n\n**5.10 Final QA Checklist (verify before delivering)**\nZero inline styles\u002Fhandlers; dark mode persists across reloads; no horizontal scroll at 320px–1920px; all states (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fsuccess\u002Ferror) present; keyboard-only pass through every section; reduced-motion pass; contrast AA in both themes; all copy in English; `.product-card-hover` and `.delivery-animation` present and functional.\n",1791954980034]