[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-269-Azulejaria-Digital-Moderna":3},"# BUILD PROMPT — LANDING PAGE: \"AZULEJARIA DIGITAL MODERNA\" (MODERN DIGITAL AZULEJO ART)\n\n**Your Role & Objective:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a **single response** — no partial builds, no follow-up questions. The page promotes a **collaborative digital art platform** inspired by Brazilian modernist azulejo (tilework). The entire page must behave like a wall of digital azulejos: content lives inside modular geometric tiles that rotate, combine, and \"assemble\" into place.\n\n---\n\n## 0. PROJECT BRIEF & THEME SPECIFICATION\n\n**Theme Definition**\n- **Name:** Azulejaria Digital Moderna (Modern Digital Azulejo Art)\n- **Type:** Geometric, Modular, Dynamic, Artistic\n- **Keywords:** digital art, collaborative, modular, geometric, dynamic, artistic, Brazilian modernism, azulejo, pattern, vibrant\n- **Era:** 2026+ — Brazilian Art & Technology\n\n**Visual Direction (binding):**\n- Modular grid layouts inspired by azulejo tiles, with geometric elements that rotate and combine.\n- Clean, modern sans-serif typography.\n- Abstract, geometric iconography.\n- Hover micro-interactions that change a tile's pattern or color.\n- Section transitions with a module \"assembly\" effect (tiles rotate\u002Fslide into place).\n\n**Required Sections (in page order):** Header\u002FNav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n**Copy & Language:** Write **all user-facing copy in English** — real, specific copy for a collaborative digital art platform (no lorem ipsum). Brand the platform with a short, evocative name (suggested: **\"Tessela\"**; substitute only with an equally fitting name).\n\n**Palette → Token Mapping**\n\n| Token | Light Mode | Dark Mode | Role |\n|---|---|---|---|\n| `--primary` | `#0047AB` (Cobalt Blue) | `#0047AB` for fills; `#5B9BFF` for text\u002Finteractive accents | Brand, buttons, links, focus rings |\n| `--secondary` | `#FFD700` (Sun Yellow) | `#FFD700` | Accents, badges, highlights — **always pair yellow fills with black text** |\n| `--accent-emerald` | `#2ECC40` (Emerald Green) | `#2ECC40` | Decorative success accents |\n| `--accent-coral` | `#FF6F61` (Coral Red) | `#FF6F61` | Decorative error\u002Fdanger accents |\n| `--bg-primary` | `#fefefe` | `#0A1224` (deep cobalt-black) | Page background |\n| `--bg-secondary` | `#F0F0F0` (Light Gray) | `#14213A` (elevated cobalt surface) | Section surfaces, cards, \"grout\" |\n| `--text-primary` | `#000000` (Black) | `#F0F0F0` | Headings and body |\n| `--text-secondary` | `#6C757D` (Medium Gray) | `#9FB0C7` | Supporting copy, captions |\n| `--text-success` | `#1E8E3E` (AA-darkened emerald) | `#2ECC40` | Success text\u002Ffeedback |\n| `--text-error` | `#D14334` (AA-darkened coral) | `#FF8A7E` | Error text\u002Ffeedback |\n| `--border-default` | `#E0E0E0` | `#2A3A57` | Default 1px borders |\n| `--border-success` \u002F `--border-error` | Derived from success\u002Ferror tokens | Same | Valid\u002Finvalid borders |\n\n- **Exception clause (background):** The source specification lists `#FFFFFF` as the page background; per mandatory architecture standards, `--bg-primary` must be `#fefefe` — pure `#FFFFFF` is reserved **exclusively** for azulejo tile faces and elevated surfaces in light mode.\n- **Exception clause (dark mode):** The source specification marked dark mode as not required; per mandatory architecture standards, full dark mode support is enforced and must be implemented exactly as defined in Section 1.3.\n- In dark mode, invert the tile dialogue: deep cobalt tile faces with light geometric patterns, maintaining the cobalt-and-white visual language.\n\n**Canonical Classes & Base Technical Values (from source spec — use verbatim):**\n- `.azulejo-grid` — modular tile-grid container\n- `.geometric-module` — individual tile\u002Fmodule unit\n- `.pattern-rotate-hover` — hover interaction modifier (pattern\u002Fcolor change + rotation)\n- Base values: `border: 1px solid #E0E0E0` (→ `--border-default`), `border-radius: 4px` (→ `--radius-sm`), `font-family: \"Inter\", sans-serif` (→ `--font-base`), `transition: all 0.3s ease-in-out` (→ `--transition-normal`)\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. JavaScript must not set inline styles either — all state changes happen by toggling classes.\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:** HTML stays semantic and styling-agnostic; re-theming the site must require edits to `style.css` only.\n- **Pure-CSS Decorations:** All azulejo patterns and geometric decorations must be built with CSS only (repeating\u002Fconic gradients, transforms, pseudo-elements). **Inline SVGs and local icon\u002Fimage files are forbidden.**\n\n### 1.2 CSS Variables & Theme Tokens\n- Store every visual token in `:root` (light) and override under the dark theme (see 1.3): all colors from the Section 0 table, plus:\n- **Radius:** `--radius-sm: 4px`, `--radius-md: 8px`, `--radius-lg: 16px`\n- **Shadows:** `--shadow-sm: 0 1px 3px rgba(0,0,0,0.08)`, `--shadow-md: 0 8px 24px rgba(0,0,0,0.12)`\n- **Spacing:** `--spacing-gap: 1.5rem`, `--spacing-section: clamp(4rem, 8vw, 7rem)`\n- **Transitions:** `--transition-fast: all 0.15s ease-in-out`, `--transition-normal: all 0.3s ease-in-out`, `--ease-standard: ease-in-out`\n- **Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000` (plus `--z-header: 900` for the sticky header)\n- **Typography:** `--font-base: 'Inter', sans-serif`\n- **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in **both** themes. Verify all text combinations meet WCAG AA (≥ 4.5:1); darken\u002Fbrighten accent-derived text tokens further if any pair fails.\n\n### 1.3 Mandatory Dark Mode Support\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`, so switching requires zero HTML restructuring.\n- **Persistence:** On first visit, follow `prefers-color-scheme`; once the user toggles, persist the choice in `localStorage` (key: `tessela-theme`) and apply it before paint to avoid flash-of-wrong-theme.\n- **Toggle Control:** A visible toggle button in the header using Google Material Symbols (`dark_mode` \u002F `light_mode`), with correct `aria-pressed` state and dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build layout structures with **Flexbox**. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `.card` uses `align-items: stretch` for equal-height tiles).\n- **CSS Grid is permitted only** for `.azulejo-grid` decorative tile walls and equal-height card rows — everywhere else, use Flexbox.\n- **Mobile-First:** All layouts work at 320px without horizontal scrolling; multi-column rows stack into single columns on small viewports; use fluid `clamp()` sizing and `max-width` containers (~1200px).\n\n### 1.5 Styling Engine & Reusable Classes\n- Use clean, hand-authored, token-driven CSS in `style.css`, organized with `@layer` (tokens → base → layout → components → utilities). Tailwind (CDN) may be used **only** for flex\u002Fgrid\u002Fspacing utilities, and every utility used must trace back to a design token.\n- Provide generic reusable classes: `.btn`, `.card`, `.input-group` — all mapped to CSS variables.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load **Inter** (weights 400, 500, 600, 700, 800) via Google Fonts `\u003Clink>` with `preconnect`; bind to `--font-base`.\n- **Icons:** Use **Google Material Symbols (Rounded)** via the official `\u003Clink>`; use `font-variation-settings: 'FILL' 1` for filled feature icons. **Raw inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-sm)`, font-weight 600. Primary = cobalt fill + white text; Secondary = white tile face + cobalt border\u002Ftext; Ghost = transparent + border.\n- **Hover:** Brightness shift + `--shadow-md`, `cursor: pointer`.\n- **Focus:** Distinct 2px focus ring in `var(--primary)` (brightened cobalt in dark mode) with 2px offset — visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** Disables interaction and prevents double-clicks (`pointer-events: none`, `aria-busy=\"true\"`), renders a spinning Material Symbol `progress` (CSS rotation) **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback states driven by `--text-success` \u002F `--text-error`, announced via `aria-live`.\n\n### 2.2 Cards & Geometric Modules (`.card`, `.geometric-module`)\n- **Default:** Flexible Flexbox column layout, `--bg-secondary` or white tile face, `1px solid var(--border-default)`, `--radius-sm`, `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` + the `.pattern-rotate-hover` effect (tile pattern rotates and cobalt\u002Fwhite colors invert).\n- **Focus-within:** Card border highlights in `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define a `.card--skeleton` shimmer animation in CSS (gradient sweep keyframes) as part of the design system.\n- **Empty State:** Define a reusable `.empty-state` pattern — Material Symbol icon in a geometric tile + clear guidance text.\n\n### 2.3 Forms & Inputs (`.input-group`, `.input`, `.input-label`, `.input-error`)\n- **States:** Empty, Focused (cobalt outline ring), Filled, Valid (emerald border + check icon), Invalid (coral border, error text, error icon), Disabled, Read-only. State icons render via Material Symbols in CSS pseudo-elements to keep HTML clean.\n- **Structure:** Flex column wrapper containing: `\u003Clabel>` (with `for`\u002F`id` pairing), the input field, and a dedicated error feedback container with `aria-live=\"polite\"`.\n- Used in the Final CTA email capture and the FAQ contact modal.\n\n### 2.4 Modal \u002F Contact Dialog (`.modal`, `.modal__overlay`, `.modal__dialog`)\n- **States:** Opening (fade + scale-in), Open, Loading (submit), Success\u002FError, Closing — all animated via CSS transitions.\n- **UX Features:** Centered flex overlay (`align-items: center; justify-content: center`), backdrop `rgba(10,18,36,0.6)` with optional blur, Material Symbol `close` button (44px target), keyboard **focus trapping**, focus returned to the trigger on close, close via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n- **Concrete use:** The FAQ section's \"Talk to the Team\" button opens a contact modal (name, email, message) with full validation (2.3), a loading state, and an in-modal success state.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### 3.1 Responsive by Default\nFluid type via `clamp()`, mobile-first breakpoints (base → 768px → 1024px → 1280px), zero horizontal overflow at any width.\n\n### 3.2 Smooth Animations & Reduced Motion\nApply `transition: var(--transition-normal)` to all state changes. Under `prefers-reduced-motion: reduce`, disable all rotations, assembly animations, spins, and smooth scrolling — states must still change visibly and instantly.\n\n### 3.3 Signature Azulejo Micro-Interactions (theme identity — mandatory)\n- **`.pattern-rotate-hover`:** On hover, a `.geometric-module` rotates (90° or a subtle 8°) and its pattern\u002Fcolor shifts (cobalt↔white inversion or gradient reposition) over `0.3s ease-in-out`.\n- **Continuous rotation:** Selected decorative tiles slowly rotate via CSS keyframes (20–40s linear infinite), paused under reduced motion.\n- **Module \"assembly\" transitions:** Gate all entrance animations behind an `html.js` class (content is fully visible without JS). Use `IntersectionObserver` to add `.is-assembled` to sections at ~20% visibility; tiles\u002Fcards enter from `opacity: 0; translateY(24px); rotate(-6deg)` and settle into place. Stagger delays via CSS `nth-child` rules — never via JS inline styles.\n- **Section dividers:** Thin azulejo pattern strips (repeating gradients) between sections reinforce the \"tile wall\" metaphor.\n\n### 3.4 Accessibility (a11y)\n- WCAG AA contrast in **both** modes; never rely on color alone — pair every state with an icon and\u002For text.\n- Semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`, `section` with `aria-labelledby`), a skip link, exactly one `\u003Ch1>` (Hero), logical DOM\u002Ffocus order.\n- Correct ARIA on all custom widgets: theme toggle, mobile nav, accordion, modal, toasts. Full keyboard operability — no mouse-only interactions.\n- `aria-live` regions for form errors, toasts, and loading feedback. All decorative layers marked `aria-hidden=\"true\"`.\n\n### 3.5 Mandatory Visual Feedback\nEvery click, hover, focus, and submission triggers a visible state change.\n\n### 3.6 Destructive & Distinct Actions\n`.btn--danger` uses coral-derived styling and must be clearly distinct in both light and dark themes.\n\n---\n\n## 4. PAGE STRUCTURE — SECTION-BY-SECTION REQUIREMENTS\n\n### 4.1 Header & Navigation\nSticky header with border-bottom. Brand mark = CSS-built geometric tile (rotates on hover) + wordmark. Nav anchors (Features, How It Works, Pricing, FAQ) with CSS smooth scrolling. Theme toggle (1.3). Primary CTA \"Start Creating\". Mobile: Material Symbol `menu` hamburger opens a dropdown panel (`--z-dropdown`) with `aria-expanded`\u002F`aria-controls`, closing on `Esc` and link click.\n\n### 4.2 Hero\nTwo-column layout (stacks on mobile). Left: eyebrow line, `\u003Ch1>` (e.g., \"Paint the future, one tile at a time.\"), subheadline about real-time collaborative tile art, dual CTAs (`.btn--primary` \"Start Creating Free\" + `.btn--ghost` \"Explore the Gallery\"), and a social-proof line (e.g., \"12,000+ artists building together\"). Right\u002Fbackdrop: an `aria-hidden` `.azulejo-grid` wall of 12–24 `.geometric-module` tiles with CSS-built cobalt\u002Fwhite\u002Femerald\u002Fcoral patterns — several slowly rotating, all hover-interactive via `.pattern-rotate-hover`. Tiles assemble with a staggered entrance on load.\n\n### 4.3 Features — 3 Cards\nSection heading + subheading, then three equal-height `.card` tiles: **Collaborative Canvas** (real-time co-creation on shared tile walls; icon `group`), **Modular Pattern Library** (remixable azulejo modules; icon `auto_awesome_mosaic`), **Live Exhibitions** (publish works as gallery\u002FAR shows; icon `view_in_ar`). Each card: icon in a geometric tile badge, title, 2–3 line description, hover lift + `.pattern-rotate-hover`. Responsive 3→1 columns. (If a suggested symbol name is unavailable, use the nearest Material Symbols equivalent.)\n\n### 4.4 How It Works — 3 Steps\nThree numbered geometric tiles connected by a dashed\u002Fpattern connector line: **1. Assemble your modules** (`extension`), **2. Create together in real time** (`sync`), **3. Publish to the gallery** (`publish`). Each step: rotating number tile, title, description. Steps assemble sequentially on scroll; connector adapts to a vertical stack on mobile.\n\n### 4.5 Testimonials\nThree quote cards: artist quote, CSS-built geometric avatar tile with initials (no external images), name, and role (e.g., \"Digital Artist, São Paulo\"). Decorative Sun Yellow `star` icons (`aria-hidden`). Hover lift + pattern shift.\n\n### 4.6 Pricing — 3 Tiers\n**Aprendiz (Free — $0):** 3 tile walls, community patterns, basic exports. **Artista (featured middle — $12\u002Fmo):** badge \"Most Popular\", cobalt ring, unlimited walls, real-time co-op, HD\u002FAR exports, priority support. **Ateliê ($39\u002Fmo):** team workspaces, brand kits, API access, dedicated manager. Feature lists use emerald `check_circle` icons; each tier has a CTA button (featured tier = `.btn--primary`; others = `.btn--secondary`). Featured tier must be visually distinct in both themes. Optional enhancement: an accessible monthly\u002Fannual toggle (`role=\"switch\"`, `aria-checked`, visible price-update feedback).\n\n### 4.7 FAQ — Accordion\nFive to six real questions (e.g., \"What is a tile wall?\", \"Can I collaborate in real time?\", \"Do I own my creations?\", \"Can I export my work?\", \"Is there a free plan?\", \"Which devices are supported?\"). Implement as button + panel pairs with `aria-expanded`\u002F`aria-controls`, animated expand\u002Fcollapse via CSS, full keyboard operability. End the section with \"Still have questions?\" and a \"Talk to the Team\" button that opens the contact modal (2.4).\n\n### 4.8 Final CTA\nFull-bleed cobalt band with a subtle CSS azulejo pattern overlay (low-contrast, decorative). White headline (e.g., \"Your wall is waiting.\"), short supporting line, and an email capture form (`.input-group`: email input + `.btn--primary` \"Claim Your Wall\") exercising all 2.3 states, with button loading state on submit and a success toast (4.10). Include consent microcopy. The band remains cobalt in dark mode with adjusted pattern opacity.\n\n### 4.9 Footer with Secondary Links\nFour-column footer: brand block (tile logo, one-line mission, social presence as **labeled tile links** — e.g., \"Instagram\", \"Behance\", \"YouTube\" — since brand logos are not available as Material Symbols), plus link groups: **Platform** (Features, Pricing, Gallery, Updates), **Resources** (Help Center, Pattern Library, Community Guidelines, Blog), **Company\u002FLegal** (About, Contact, Privacy Policy, Terms of Service). Bottom bar: \"© 2026 [Brand]. All rights reserved.\" plus a flavor line (e.g., \"Made with azulejos in São Paulo\"). Links to in-page targets use real section anchors; links to out-of-scope pages may use `href=\"#\"` as their targets are genuinely unspecified.\n\n### 4.10 Toast System\nFixed toast component (`--z-toast`, bottom-right; bottom-center on mobile) with `role=\"status\"` and `aria-live=\"polite\"`, success\u002Ferror variants, auto-dismiss after ~5s, visible close button. Used for form submission feedback.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** Three separate files — `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>` entry point; **no inline `\u003Cscript>` blocks, no inline styles, no inline SVGs**. Google Fonts (Inter) and Material Symbols loaded via `\u003Clink>` in `\u003Chead>`.\n- **Naming Convention:** BEM throughout (`.btn--primary`, `.modal__overlay`, `.card--skeleton`), with the three canonical design-system classes `.azulejo-grid`, `.geometric-module`, `.pattern-rotate-hover` preserved verbatim. Never mix conventions.\n- **JavaScript Scope:** Theme toggle + persistence, mobile nav, accordion, modal (focus trap, `Esc`, overlay close), form validation, IntersectionObserver assembly animations (behind the `html.js` gate), and a toast helper. No other behavioral scripts.\n- **Copy:** Real English copy everywhere; placeholders only where content was genuinely left unspecified (Section 4.9 legal link targets).\n- **Quality Bar:** No horizontal scroll at 320px; end-to-end keyboard navigability; WCAG AA in both themes; semantic, landmark-complete HTML; no console errors; CSS organized in commented `@layer` blocks.\n- **Output:** Generate the complete, final code for all three files in this single response — first attempt, production-ready.\n",1791954984145]