[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-109-Estilo-de-IA-Criativa":3},"# SYSTEM PROMPT — LANDING PAGE BUILD: \"CREATIVE AI STYLE\" (Single-Pass, First Attempt)\n\n**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page for **ChromaFlow AI** — a generative creative-AI image-transformation tool — themed **\"Creative AI Style\"** (*Estilo de IA Criativa*): artistic, innovative, user-empowering; era 2026+ Creative AI Revolution. Produce the final code immediately, in one pass — no questions, no TODOs, no partial output. The finished `index.html`, `style.css`, and `script.js` must run by simply opening `index.html`. Every numbered rule below is a hard requirement.\n\n---\n\n## 0. BUILD BRIEF — THEME, TOKENS & PAGE ARCHITECTURE\n\n**0.1 Design Identity**\nKeywords: creative, AI, generative, design, art, innovation, intuitive, powerful, vibrant, seamless. Art direction: an artistic, innovative landing page for a creative AI tool — creative red accents over a near-white canvas (light mode) and deep charcoal with neon cyan (dark mode); AI image-transformation animations; creative gradients; drag-and-drop micro-interactions; artistic sans-serif typography; customizable UI elements; before-and-after visualizations; fluid transitions; a user-empowering, generative feel. Signature moments: the hero before\u002Fafter comparison slider, the live drag-and-drop transformation demo, and the `.creative-gradient` \u002F `.ai-transform-animation` effects (0.5).\n\n**0.2 Mandatory Light-Mode Tokens (`:root`)**\nDefine exactly these tokens; component rules may only reference `var(--…)` — never raw values:\n\n- Surfaces\u002Ftext: `--bg-primary: #FEFEFE` · `--bg-secondary: #F8F8F8` · `--bg-muted: #E0E0E0` · `--text-primary: #2D2D2D` · `--text-secondary: #5C5C5C` · `--text-success: #0A7B00` · `--text-error: #C40000`\n- Brand: `--primary: #FF0000` (Creative Red — large display type, decorative fills, gradient stops only) · `--primary-strong: #C40000` (small text, borders, hover\u002Fpressed) · `--secondary: #00FFFF` (Cyan — decorative glows and gradient stops only on light backgrounds)\n- Accents (decorative only): `--accent-purple: #800080` · `--accent-orange: #FFA500` · `--accent-green: #00FF00`\n- Borders: `--border-default: #E0E0E0` · `--border-error: #C40000` · `--border-success: #0A7B00`\n- Gradients: `--gradient-creative: linear-gradient(135deg, #FF0000 0%, #FFA500 32%, #800080 66%, #00FFFF 100%)` (decorative surfaces, glows, icon chips, borders) · `--gradient-cta: linear-gradient(135deg, #C40000 0%, #800080 100%)` (interactive gradient surfaces with `#FEFEFE` text) · `--gradient-text: linear-gradient(120deg, #C40000 0%, #A80060 45%, #800080 100%)` (gradient-clipped headline words) · `--gradient-surface: linear-gradient(to bottom right, #F8F8F8, #FEFEFE)` (subtle card\u002Fsection sheen)\n- Shape\u002Fmotion\u002Fstack: `--radius-sm: 6px` · `--radius-md: 8px` · `--radius-lg: 16px` · `--shadow-sm: 0 2px 8px rgba(0,0,0,0.08)` · `--shadow-md: 0 5px 15px rgba(0,0,0,0.1)` · `--spacing-gap: 1.5rem` · `--transition-fast: 150ms ease` · `--transition-normal: 300ms ease-in-out` · `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)` · `--z-dropdown: 1000` · `--z-modal: 2000` · `--z-toast: 3000` · `--focus-ring: #C40000`\n\n**Usage law:** vivid pure hues (`#FF0000`, `#00FFFF`, `#FFA500`, `#00FF00`) appear only inside decorative gradients, blurred glows, and large display type (≥ 24px \u002F 18.7px bold). All body-size text, borders, and interactive states use the WCAG-derived tokens above. Never place cyan or pure green text on a light background.\n**Exception clause:** the source palette requests `#FFFFFF`; every requested white surface\u002Fbackground is implemented as `#FEFEFE` — `#FFFFFF` may never appear as a page or card background.\n\n**0.3 Mandatory Dark-Mode Tokens**\nDefine an identical token set under `.dark` **and** duplicated inside `@media (prefers-color-scheme: dark)` scoped to `:root:not(.light)` (so the very first paint matches the OS with zero inline JS; the JS-applied `.light`\u002F`.dark` class always wins):\n\n- `--bg-primary: #121212` · `--bg-secondary: #2D2D2D` · `--bg-muted: #3A3A3A` · `--text-primary: #FEFEFE` · `--text-secondary: #B3B3B3` · `--text-success: #3DDC84` · `--text-error: #FF6B6B` · `--primary: #FF3B3B` · `--primary-strong: #FF6B6B` · `--secondary: #00FFFF` (now safe for links\u002Ffocus\u002Ftext on dark) · `--border-default: #454545` · `--border-error: #FF6B6B` · `--border-success: #3DDC84` · `--gradient-text: linear-gradient(120deg, #FF5C5C 0%, #FF00A8 45%, #00FFFF 100%)` · `--shadow-sm: 0 2px 8px rgba(0,0,0,0.4)` · `--shadow-md: 0 5px 15px rgba(0,0,0,0.55)` · `--focus-ring: #00FFFF`\n- `--gradient-creative` and `--gradient-cta` remain unchanged (their stops already pass contrast with `#FEFEFE` text in both themes).\n- **Contrast pairing is law in both themes:** light surfaces pair with dark text, dark surfaces pair with light text — no exceptions.\n\n**0.4 Typography — Google Fonts Only**\nLoad via `\u003Clink>`: **Space Grotesk** (500, 700) for display\u002Fheadings and **Inter** (400, 500, 600) for body — an artistic sans-serif pairing. Tokens: `--font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif` · `--font-base: 'Inter', 'Helvetica Neue', Arial, sans-serif`.\n**Exception clause:** the source specification names `\"Helvetica Neue, Arial, sans-serif\"`; honor it only as fallbacks appended after the mandatory Google Fonts in the token stacks — never as the primary family.\nArtistic type treatments: one `h1` per page, fluid sizing via `clamp()` (e.g., `clamp(2.5rem, 6vw, 4.5rem)`), tight letter-spacing; exactly one key word per headline wrapped in a gradient-clip class (0.5) using `--gradient-text`; eyebrow labels styled uppercase, letter-spaced, colored `var(--primary-strong)`. Never gradient-clip body-size text.\n\n**0.5 Signature Utility Classes & Effects (define in `style.css`)**\n- **`.creative-gradient`** — applies `var(--gradient-creative)` as background; modifier **`.creative-gradient--text`** clips the theme's `--gradient-text` stops to text (`background-clip: text; color: transparent`).\n- **`.ai-transform-animation`** — an \"AI scan\" sheen: a `::after` overlay sweeping a semi-transparent white diagonal gradient across the element by animating `background-position` (~2.8s, `var(--ease-standard)`); runs as a subtle infinite loop on the hero \"after\" image and as a single-fire pass when a transformation \"completes\". Disabled under `prefers-reduced-motion`.\n- **`.card--skeleton`** — shimmer placeholder: diagonal gradient sweep over `var(--bg-muted)`, `var(--radius-md)`, sized to the final content so nothing shifts.\n- **Glow orbs** — absolutely positioned, `filter: blur(60px)`, low-opacity radial gradients built from `--accent-*` hues behind the hero and final CTA; `pointer-events: none`, `aria-hidden=\"true\"`.\n\n**0.6 Page Architecture — build all sections, in order**\n- **0.6.1 Sticky Header** — logo (Material Symbol `auto_awesome` + \"ChromaFlow AI\" wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (1.3), primary CTA \"Start Creating\". Mobile: hamburger (`menu`\u002F`close`) toggles a flex dropdown panel at `--z-dropdown` with `aria-expanded`; closes on Esc, link click, and outside click.\n- **0.6.2 Hero** — flex row (column on mobile). Left: eyebrow badge \"2026 Creative AI Revolution\"; H1 \"Turn any image into **art** — with a single prompt.\" (gradient word: *art*); subcopy about one-prompt generative transformation; CTA pair: `.btn--primary` \"Start Creating Free\" + outline \"See It in Action\" (opens modal, 2.4); proof line with 3 overlapping round picsum avatars, \"Loved by 40,000+ creators\", and five `star` icons (`aria-label=\"Rated 5 out of 5\"`). Right: **before\u002Fafter comparison card** — two picsum images (`seed\u002Fchromabefore\u002F800\u002F600`, `seed\u002Fchromaafter\u002F800\u002F600`) inside `.compare`; an `\u003Cinput type=\"range\">` overlay drives a `--pos` custom property; the \"after\" layer is clipped via `clip-path: inset(0 calc(100% - var(--pos)) 0 0)`; a vertical divider + `drag_indicator` handle sits at `left: var(--pos)` and scales up on drag; range carries `aria-label=\"Reveal transformed image\"` (arrow keys work natively). Below: **style preset chips** (\"Neon Bloom\", \"Ink Dreams\", \"Chroma Pop\", \"Vapor Wave\") — an `aria-pressed` toggle group; the active chip sets `data-preset` on the card, and CSS attribute selectors re-tint the card's glow and the \"after\" image's filter (this delivers the \"customizable UI elements\" effect). Beneath: **dropzone** — \"Drag an image here, or click to browse\" (spec 3).\n- **0.6.3 Features** — section header pattern (eyebrow, H2, lead) + 3 `.card`s in a flex-wrap row (column on mobile): \"Generative Transformations\" (`auto_fix_high`), \"Seamless Drag & Drop\" (`drag_pan`), \"Customizable Style Presets\" (`palette`); each icon sits in a `.creative-gradient`-tinted chip. States per 2.2.\n- **0.6.4 How It Works** — 3 steps in a flex row with a `.creative-gradient` connector line (pseudo-element, hidden on mobile): 01 \"Drop your image\" (`upload`), 02 \"Pick a style\" (`tune`), 03 \"Export your art\" (`download`); numbered badges use `var(--gradient-cta)` with `#FEFEFE` numerals.\n- **0.6.5 Testimonials** — 3 cards: `format_quote` icon, real-sounding quote, round picsum avatar, name, role, 5-star rating with accessible label.\n- **0.6.6 Pricing** — 3 tiers: \"Spark\" Free $0, \"Creator\" $12\u002Fmo (**featured**: 2px gradient border via the padding-box\u002Fborder-box double-background technique, \"Most Popular\" pill, `var(--shadow-md)`), \"Visionary\" $29\u002Fmo. Feature lists use `check_circle` icons. CTAs: \"Start Free\" (outline), \"Go Creator\" (primary), \"Go Visionary\" (outline).\n- **0.6.7 FAQ** — 5 real questions (file types, ownership of creations, free-plan limits, cancellation, browser support) as semantic `\u003Cdetails>\u002F\u003Csummary>` pairs; `expand_more` chevron rotates 180° on `[open]`; content fades in; `:focus-visible` ring on summary.\n- **0.6.8 Final CTA** — full-width band: decorative `var(--gradient-creative)` background **plus** a `rgba(0,0,0,0.55)` scrim overlay guaranteeing legibility; the band defines locally scoped tokens so its text, input, and buttons stay legible in both themes. Contains H2 \"Join the Creative AI Revolution\", short copy, and an **email capture form** (spec 2.3) with submit \"Get Early Access\".\n- **0.6.9 Footer** — brand + tagline; 3 columns of secondary links (Product \u002F Company \u002F Support; in-page anchors where they exist, `#` otherwise); icon buttons `alternate_email`, `rss_feed`, `public` with `aria-label`s; copyright with the dynamic year.\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 in authored HTML. Styling targets class (BEM) selectors only; IDs are reserved for JS hooks and anchors.\n- HTML stays semantic and style-agnostic: re-theming the site must be possible by editing CSS only, never the markup.\n- **Runtime exception:** JS may update CSS custom properties (e.g., `element.style.setProperty('--pos', …)` for the slider and theme class on `\u003Chtml>`) — that is runtime state, not inline CSS; no static `style=` attribute may ever appear in `index.html`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine exactly the token sets from 0.2\u002F0.3. Every light background token pairs with a dark text token and vice versa, enforced in both themes. Substituted-white rule (`#FEFEFE` over `#FFFFFF`) applies to every surface.\n\n**1.3 Mandatory Dark Mode Support**\nDark tokens per 0.3 under `.dark` (plus the media-query fallback for first paint). Header toggle button: Material Symbol `dark_mode`\u002F`light_mode` swap, correct `aria-pressed` and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), persisted in `localStorage` key `\"theme\"`, first-visit fallback to `prefers-color-scheme`, polite live-region announcement on switch. Include `\u003Cmeta name=\"color-scheme\" content=\"light dark\">` and update `\u003Cmeta name=\"theme-color\">` on toggle. Theme must flip with zero HTML restructuring and zero flash of the wrong theme.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout with flexbox; every flex container defaults to `align-items: center`. Any deviation (e.g., `stretch` for equal-height card rows) requires a one-line CSS comment justifying it.\n- Mobile-first: rows collapse to columns below 768px; fluid type\u002Fspacing via `clamp()`; content column max-width ~1140px; horizontal scrolling is forbidden (verify at 320px). Anchored sections get `scroll-margin-top` for the sticky header; enable `scroll-behavior: smooth` guarded by `prefers-reduced-motion`.\n\n**1.5 Styling Approach (Framework Decision)**\nDependency-free custom CSS in `style.css` (chosen so the deliverable runs with no build step), organized in comment-delimited layers: tokens → base\u002Freset → layout → components → utilities → animations → responsive. Raw hex values are permitted only inside the `:root`\u002Fdark token blocks; all component rules reference `var(--…)`.\n\n**1.6 Typography & Icons — Google Only**\nGoogle Fonts per 0.4 (with `\u003Clink rel=\"preconnect\">` + one stylesheet link). Icons are exclusively **Google Material Symbols (Rounded)** via the official stylesheet; decorative icon spans get `aria-hidden=\"true\"`, meaningful ones get text alternatives. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\nBase `.btn`: flex; `align-items: center; justify-content: center; gap: 0.5rem`; minimum 44×44px touch target; `var(--radius-md)`; font-weight 600. Variants: `.btn--primary` (background `var(--gradient-cta)`, color `#FEFEFE`), `.btn--outline` (2px border + text in `var(--primary-strong)`, transparent background), `.btn--ghost`, `.btn--icon` (44px square, for toggle\u002Fmenu\u002Fclose\u002Fsocial), `.btn--danger` (red fill, visually distinct in both themes — define it even though this page has no destructive action). States, all via CSS classes\u002Fpseudo-classes: hover (`brightness(1.08)` + `var(--shadow-sm)`, pointer cursor); focus-visible (2px `var(--focus-ring)` outline, offset 2px); active (`transform: scale(0.97)`); `.is-loading` (blocks re-clicks, swaps label to a spinning `progress_activity` icon without changing button dimensions); `[disabled]` (opacity 0.5, grayscale, `cursor: not-allowed`); `.is-success` \u002F `.is-error` (transient ~1.5s feedback using `--text-success`\u002F`--text-error`, always icon + text, never color alone).\n\n**2.2 Cards**\nBase `.card`: flex column, gap, padding `var(--spacing-gap)`, background `var(--bg-secondary)`, 1px `var(--border-default)`, `var(--radius-md)`, `var(--shadow-sm)`. Hover: `translateY(-2px)` + `var(--shadow-md)`; `:focus-within`: border shifts to `var(--primary-strong)` with a soft ring (for cards containing links\u002Fbuttons); `.card--skeleton`: shimmer styling that reserves final dimensions (no layout jump); `.card--featured`: gradient-border pricing tier; `.card--empty`: centered fallback layout — large Material Symbol (`add_photo_alternate`) + one line of guidance text (used by the dropzone's initial state).\n\n**2.3 Forms & Inputs**\n`.input-group`: flex column wrapping `\u003Clabel>`, the field, and a dedicated error container (`aria-live=\"polite\"`). Input base: min-height 48px, `var(--radius-md)`, background `var(--bg-primary)`, 1px `var(--border-default)`. States: empty; focus (2px `var(--focus-ring)` ring + subtle glow); filled; valid (`--border-success` + `check_circle` icon); invalid (`--border-error`, `error` icon, error message in `var(--text-error)` — message text accompanies the color, never color alone); disabled; read-only. Email validation on blur and submit: empty → \"Please enter your email address.\"; malformed → \"That doesn't look like a valid email.\"; on success the submit button enters `.is-loading` (≥1s), then `.is-success` with a live-region confirmation message.\n\n**2.4 Modal \u002F Demo Lightbox**\nTriggered by the hero's \"See It in Action\". Structure: `.modal` (fixed, inset 0, flex, `align-items: center; justify-content: center`, `var(--z-modal)`), backdrop (rgba(0,0,0,0.6) + `backdrop-filter: blur(4px)`), panel (background `var(--bg-primary)`, `var(--radius-lg)`, `var(--shadow-md)`, `width: min(92vw, 720px)`). States: opening (fade + scale 0.96→1 over `var(--transition-normal)`), open, loading (`.card--skeleton` shimmer while the \"demo renders\", `aria-busy`), success (before\u002Fafter image pair with a single `.ai-transform-animation` sweep + caption), error (empty-state-style fallback: \"Couldn't load the demo — check your connection.\"), closing (reverse animation, then hidden). UX: close button with `close` icon and `aria-label=\"Close dialog\"`; `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; Esc and backdrop click close; keyboard focus trapped inside while open; focus returns to the trigger; body scroll locked.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, flex wrapping, column stacking under 768px, zero horizontal overflow at any width.\n- **Fluid transitions:** every hover\u002Ffocus\u002Factive\u002Fstate change animates with `var(--transition-fast)` or `var(--transition-normal)`. Optional scroll-reveal: `.reveal` elements fade\u002Ftranslate into view via IntersectionObserver adding `.is-visible` — disabled under `prefers-reduced-motion`, which collapses all animations\u002Ftransitions to near-zero duration.\n- **Accessibility (a11y):** semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`), skip link, logical heading order (one `h1`), visible `:focus-visible` everywhere, full keyboard operability (menu, dropzone as a button, native range slider, chips as toggles, modal focus trap), `aria-live` regions for dropzone status and form feedback, contrast ≥ 4.5:1 body \u002F 3:1 large text in both themes, and state never communicated by color alone.\n- **Mandatory visual feedback:** every interactive element responds visibly — buttons tint and lift, chips show selection (border, fill, `aria-pressed`), the compare handle scales while dragging, the dropzone glows during dragover, forms show loading→success. Never rely on hover alone (touch devices): pair every hover effect with `:focus-visible`\u002Factive feedback.\n- **Drag-and-drop micro-interactions:** the dropzone reacts to `dragenter`\u002F`dragover` (dashed `var(--primary)` border, glow, icon swap `add_photo_alternate` → `bolt`), `dragleave`, and `drop`; it is keyboard-operable (role button, Enter\u002FSpace opens a visually hidden file input); a dropped real image previews as the \"before\" layer via `URL.createObjectURL` (revoke after use); a simulated ~1.4s \"transform\" runs `.ai-transform-animation` then announces completion — the entire flow is narrated in the live region.\n- **Theme integrity:** red remains the dominant brand accent in both themes; gradients never reduce text legibility (scrim on the CTA band, accessible gradient stops on interactive surfaces).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>` — no other inline JavaScript, no external JS libraries, no build tools, zero console errors.\n- **Naming:** BEM only, consistently (`.hero__title`, `.features__card`, `.pricing-card--featured`, `.btn--primary`); never mix conventions; never invent classes for elements that don't exist.\n- **Copy:** all user-facing text in **English**, written as real marketing copy in the confident, empowering creative-AI voice — no lorem ipsum, no \"Placeholder\", no TODOs. Anchor the voice with: hero H1 from 0.6.2, CTAs as named above, section eyebrows (\"Everything you need\", \"From photo to masterpiece in three steps\", \"Creators on ChromaFlow\", \"Simple, honest pricing\", \"Questions, answered\").\n- **Imagery:** only `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cw>\u002F\u003Ch>` with distinct seeds (hero before\u002Fafter, avatars, modal demo); no external brand assets.\n- **script.js scope (vanilla, commented, small named functions):** theme toggle + persistence + first-paint sync; mobile menu; comparison slider `--pos` updates; preset chips; dropzone demo (drag events, keyboard activation, object-URL preview, timed transform states, live-region updates); modal (open\u002Fclose, focus trap, Esc, backdrop, scroll lock, loading→success demo); email form validation + simulated async submit; optional scroll-reveal; dynamic footer year.\n\nShip the complete, polished, fully functional code for all three files now — first attempt, final quality.\n",1791954981692]