[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-126-Estilo-de-Elegancia-Fintech":3},"# BUILD SPECIFICATION — \"FINTECH ELEGANCE\" LANDING PAGE (GLOBAL PAYMENTS PLATFORM)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page on the first attempt — every section built, every interactive state styled, dark mode fully functional. No stubs, no TODOs, no \"left as an exercise.\"\n\n---\n\n## 0. PROJECT BRIEF\n\n- **Product:** A fictional global payments platform for developers. Brand name: **Fluxpay**.\n- **Theme:** \"Fintech Elegance\" — clean, professional, developer-friendly. Category: Corporate & SaaS.\n- **Keywords:** fintech, payments, global, developer, API, secure, scalable, professional, minimalist, efficient.\n- **Mood \u002F Era:** 2026+ global payments. Clean data-focused layouts, modular elements, modern technical typography, subtle security glows, transaction status micro-interactions, API flow diagrams, money flow animations.\n- **Light\u002FDark:** Full light + dark mode support (mandatory — see §1.3).\n- **Copy:** All user-facing copy in **English**. Write real, thematic, professional copy — lorem ipsum is prohibited. No external image files: build all visuals from CSS, Google Material Symbols, and text (testimonial avatars = initials circles).\n\n### 0.1 Required Page Sections (in this order)\n\n1. **Sticky Header** — Brand mark (Material Symbol + \"Fluxpay\" wordmark), nav links (Features, How It Works, Pricing, FAQ), theme toggle (§1.3), \"Get started\" primary button, mobile hamburger (`aria-expanded`, slide-down panel at `--z-dropdown`). Include a \"Skip to main content\" skip link.\n2. **Hero** — Chip badge (\"Now supporting 135+ currencies\"), H1 (e.g., \"Global payments, one API.\"), supporting subheadline, dual CTAs (\"Start integrating\" primary \u002F \"Read the docs\" secondary), trust stat chips (99.99% uptime · 135+ currencies · PCI DSS Level 1), and a visual cluster: an **API flow diagram card** (nodes: Your app → Fluxpay API → Global payout, connected by animated lines — class `.api-flow-animation`) plus a **transaction status card** (class `.transaction-status-indicator`, see §3.6) showing a mono-font amount cycling Processing → Payment successful.\n3. **Features (3 cards)** — Global Coverage (icon: `public`), Developer-First API (icon: `code`), Bank-Grade Security (icon: `shield` — apply the subtle security glow, §3.6). Each: icon, title, real descriptive copy.\n4. **How It Works (3 steps)** — Numbered steps (Create your account → Integrate in an afternoon → Go live globally) connected by a flow line with traveling dots (money flow animation, §3.6). Horizontal on desktop, vertical on mobile.\n5. **Testimonials (3)** — Quote cards with 5-star ratings (Material Symbol `star`, yellow `#FFC700`, with `aria-label`), initials avatar circles, name, role, company.\n6. **Pricing (3 tiers)** — Starter (pay-as-you-go, secondary CTA), Growth (highlighted \"Most popular\" badge, primary CTA, elevated border\u002Fshadow), Enterprise (custom, \"Contact sales\" — opens modal per §2.4 or falls back to a `mailto:` anchor; never a dead button). Feature lists use `check_circle` icons.\n7. **FAQ (5–6 items)** — Accordion (§2.5): integration time, supported countries\u002Fcurrencies, security compliance, fees, refunds\u002Fdisputes, support.\n8. **Final CTA** — Primary-tinted gradient band, headline (\"Start accepting payments in minutes\"), **email capture form** (§2.3) with submit button demonstrating loading → success\u002Ferror states.\n9. **Footer** — Brand + tagline, four link columns (Product, Developers, Company, Legal — `href=\"#\"` stubs permitted for non-existent pages), \"All systems operational\" status chip with pulsing green dot, dynamic copyright year. Dark inverted treatment (`#242424` bg, light text) in light mode; near-black surface in dark mode.\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.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n- **Minimal, Semantic HTML:** Use semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) with a clean heading hierarchy (one `h1`, `h2` per section, `h3` for cards). Markup must remain agnostic of visual styling.\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` and override them in the dark theme blocks (§1.3). Never hardcode hex values in component rules.\n\n**Colors (Light mode):**\n\n| Token | Value | Notes |\n|---|---|---|\n| `--primary` | `#635BFF` | Fintech blue; white button text on it passes AA (~4.6:1) — verify |\n| `--primary-hover` | `#524AE6` | Darkened hover variant |\n| `--primary-soft` | `rgba(99,91,255,0.10)` | Tinted surfaces, chips, focus wash |\n| `--secondary` | `#00C48C` | Green; indicators, borders, glows |\n| `--accent-warning` | `#FFC700` | Pending status, stars; pair with dark text on chips |\n| `--bg-primary` | `#FFFFFF` | **Explicit exception:** normally near-white must be `#fefefe`, but this theme's source spec mandates `#FFFFFF` — permitted for light mode only |\n| `--bg-secondary` | `#F9F9F9` | Alternating section surfaces |\n| `--text-primary` | `#242424` | Dark gray |\n| `--text-secondary` | `#5B5B66` | Muted copy; verify AA |\n| `--text-success` | `#00795A` | AA-safe on light; vivid `#00C48C` reserved for non-text indicators |\n| `--text-error` | `#D9263C` | AA-safe on light; `#FF4B4B` reserved for borders\u002Findicators |\n| `--border-default` | `#E6E6E6` | Light gray |\n| `--border-success` | `#00C48C` | |\n| `--border-error` | `#FF4B4B` | |\n| `--color-black` | `#000000` | Reserved: footer\u002Fdeepest surfaces |\n\n**Colors (Dark mode overrides):** `--primary: #7B74FF` (lightened for text\u002Flinks; solid fills may keep `#635BFF` with white text), `--primary-hover: #8F89FF`, `--primary-soft: rgba(123,116,255,0.16)`, `--secondary: #00D496`, `--bg-primary: #0E0E14`, `--bg-secondary: #17171F`, `--text-primary: #F5F5F7`, `--text-secondary: #A6A6B3`, `--text-success: #00C48C`, `--text-error: #FF6B6B`, `--border-default: #2B2B36`, `--border-error: #FF6B6B`.\n\n**Contrast Pairing (mandatory in every theme):** Every light background token must pair with a dark text token and every dark background token with a light text token. Verify WCAG AA (4.5:1 text, 3:1 large text\u002FUI) in **both** modes.\n\n**Structure tokens:**\n- `--radius-sm: 4px`, `--radius-md: 6px`, `--radius-lg: 14px`\n- `--shadow-sm: 0 2px 8px rgba(0,0,0,0.10)`, `--shadow-md: 0 12px 32px rgba(0,0,0,0.12)` (dark: raise alphas to 0.45\u002F0.55)\n- `--glow-primary: 0 0 24px rgba(99,91,255,0.28)`, `--glow-success: 0 0 24px rgba(0,196,140,0.28)` (dark: alpha 0.40)\n- `--spacing-xs: 0.5rem`, `--spacing-gap: 1rem`, `--spacing-md: 1.5rem`, `--spacing-lg: 2rem`, `--spacing-xl: 4rem`\n- `--transition-fast: 0.15s ease-in-out`, `--transition-normal: all 0.3s ease-in-out`, `--ease-standard: ease-in-out`\n- `--z-header: 100`, `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`\n- `--font-base: 'Inter', sans-serif`, `--font-mono: 'JetBrains Mono', monospace`\n- `--gradient-surface: linear-gradient(to bottom, #F9F9F9, #FFFFFF)` (dark: `linear-gradient(to bottom, #17171F, #0E0E14)`)\n\n**Source CSS spec compliance:** The following values from the source spec must be embedded via the tokens above: background `#FFFFFF`, text `#242424`, `box-shadow: 0 2px 8px rgba(0,0,0,0.1)`, `border-radius: 6px`, Inter font, `transition: all 0.3s ease-in-out`, the `#F9F9F9 → #FFFFFF` gradient, and the class names `.api-flow-animation` and `.transaction-status-indicator` (which must exist verbatim).\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Define light tokens in `:root`; duplicate the identical dark token block inside both `.dark {}` (applied to `\u003Chtml>`) and `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`. Background and text variables must switch seamlessly with zero HTML restructuring.\n- **Persistence:** `script.js` reads `localStorage` (e.g., key `fluxpay-theme`) on execution; falls back to `prefers-color-scheme` on first visit. All theme logic lives in the single deferred `script.js` — **do not add inline scripts** (a brief first-paint flash following the media query is acceptable).\n- **Toggle Control:** A visible toggle button in the header with correct `aria-pressed` state, dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), and Material Symbol icon swap (`dark_mode` \u002F `light_mode`).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., card content columns using `stretch` for full-width children).\n- Mobile-first: author base styles for small screens, enhance upward (e.g., 640px \u002F 768px \u002F 1024px). Hero, features grid, steps, pricing tiers, and footer columns stack vertically on mobile and become rows on desktop. **No horizontal scrolling at any viewport (test at 320px).** Use `clamp()` for fluid typography; container max-width ~1152px.\n\n### 1.5 Styling Approach & Naming Convention\n- Use clean, framework-free custom CSS in `style.css` (the source spec supplies raw custom CSS tokens; no CSS framework is requested). Generic reusable classes (`.btn`, `.card`, `.container`, `.section`) must map back to the CSS variables.\n- **One naming convention: BEM** (`block__element--modifier`) across the entire deliverable. **Explicit exception:** the two source-mandated class names `.api-flow-animation` and `.transaction-status-indicator` must be kept verbatim.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load Google Fonts via `\u003Clink>` with preconnect: **Inter** (400\u002F500\u002F600\u002F700\u002F800) bound to `--font-base`, plus **JetBrains Mono** (400\u002F500) bound to `--font-mono` for code snippets, API keys, amounts, and stats.\n- **Icons:** Google Material Symbols (pick one style — Rounded or Outlined — and use it consistently). **Inline SVGs and local icon files are forbidden.**\n- Suggested icons: `public`, `code`, `shield`, `key`, `rocket_launch`, `check_circle`, `error`, `schedule`, `star`, `dark_mode`\u002F`light_mode`, `menu`\u002F`close`, `expand_more`, `arrow_forward`, `progress_activity` (loading spinner).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nAll states via CSS classes; base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**, `border-radius: var(--radius-md)`, font-weight 600, `transition: var(--transition-normal)`.\n- **Variants:** `.btn--primary` (bg `--primary`, white text), `.btn--secondary` (transparent bg, `1px solid var(--border-default)`, `--text-primary` text, hover bg `--bg-secondary`), `.btn--danger` if ever needed.\n- **Hover:** brightness shift or `--primary-hover` + shadow elevation; `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring (`outline: 2px solid var(--primary); outline-offset: 2px`) visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a rotating Material Symbol `progress_activity` (CSS keyframe spin) **without changing button dimensions**; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states (e.g., form submit → green check + \"Submitted\", or red error styling) driven by `--text-success` \u002F `--text-error`, always paired with an icon and text — never color alone.\n\n### 2.2 Cards\n- **Default:** Flexbox layout, `background: var(--bg-primary)`, `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)`, padding via spacing tokens.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` (only on cards that are genuinely interactive or visually elevated, e.g., the highlighted pricing tier).\n- **Focus-within:** border shifts to `--primary` with `--glow-primary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a `.skeleton` shimmer keyframe animation for the hero transaction card's initial render — no layout jumps.\n- **Empty State:** if any dynamic area (e.g., transaction feed) can be empty, provide a fallback layout with a Material Symbol and clear guidance text.\n\n### 2.3 Forms & Inputs (Final CTA email capture)\n- **Structure:** Flex container wrapping a `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error feedback element with `aria-live=\"polite\"`.\n- **States (all via classes):** empty, focused (border `--primary` + `box-shadow` ring using `--primary-soft`), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, `--text-error` message, `error` icon, `aria-invalid=\"true\"` + `aria-describedby`), disabled, read-only.\n- **Behavior:** `script.js` performs client-side email validation on submit and blur, `preventDefault()`, simulates async submit (button → loading → success check + inline confirmation message, or error feedback). No page reload.\n\n### 2.4 Modal (Conditional — \"Contact sales\")\nIf a modal is implemented, it must include: **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (opacity + scale). **UX:** centered flex overlay (`align-items: center; justify-content: center`), backdrop with dimming\u002Fblur, Material Symbol `close` button with `aria-label`, `role=\"dialog\"` + `aria-modal=\"true\"`, keyboard focus trapping, close via `Esc` and overlay click, focus restored to the trigger on close, stacking at `--z-modal`. If no modal is built, the Enterprise CTA must be a functional `mailto:` anchor.\n\n### 2.5 FAQ Accordion\n- `\u003Cbutton class=\"faq__question\" aria-expanded=\"false\" aria-controls=\"…\">` with a rotating `expand_more` icon; panel with `role=\"region\"` + `aria-labelledby`.\n- Smooth open\u002Fclose via CSS transition (suggested: `grid-template-rows: 0fr → 1fr` technique or equivalent); fully keyboard operable; state communicated by icon rotation + panel visibility, never color alone.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### 3.1 Responsive by Default\nFluid sizing, responsive breakpoints, `scroll-behavior: smooth` (respecting reduced motion) with `scroll-margin-top` on anchored sections to offset the sticky header. Zero horizontal overflow.\n\n### 3.2 Smooth Animations\nApply `transition: var(--transition-normal)` to all state changes. **Respect `prefers-reduced-motion`:** disable flow animations, pulses, transforms, and scroll reveals; provide static fallbacks.\n\n### 3.3 Accessibility (a11y)\n- Sufficient contrast in both light and dark modes (AA).\n- **Never rely solely on color** — every status pairs dot\u002Ficon + text label.\n- Semantic HTML5, correct ARIA roles\u002Flabels on custom widgets (toggle, mobile menu, accordion, modal), logical DOM\u002Ffocus order, full keyboard operability, visible focus rings everywhere.\n- `aria-live` regions for dynamic feedback: form errors\u002Fsuccess, transaction status changes, theme toggle state.\n\n### 3.4 Mandatory Visual Feedback\nEvery click, hover, and submission must trigger a visible state change.\n\n### 3.5 Destructive Actions\nNone expected; if introduced, `.btn--danger` must be visually distinct in **both** themes.\n\n### 3.6 Signature Theme Effects (required)\n- **`.api-flow-animation`** — Hero diagram: nodes as flex chips (Material Symbol + label) connected by CSS connector lines with animated traveling dots (`@keyframes` on `::before`\u002F`::after` or background-position). Vertical orientation on mobile. Static line under reduced motion.\n- **`.transaction-status-indicator`** — Pulsing status dot + icon + label; the hero transaction demo cycles pending (yellow `#FFC700`, `schedule` icon, \"Processing\") → succeeded (green, `check_circle`, \"Payment successful\") every ~4 seconds via `script.js`, announced through an `aria-live=\"polite\"` region. The footer \"All systems operational\" chip reuses this pattern.\n- **Security Glow** — Apply `--glow-success` \u002F `--glow-primary` subtly to the security feature card icon and security badges; tuned per theme (§1.2).\n- **Money Flow Animation** — Traveling dots along the How-It-Works connector line, sharing the same keyframe system as the API flow.\n- **Data-Focused Modularity** — Stat chips, mono-font amounts\u002Fkeys, and a styled `\u003Cpre>\u003Ccode>` API snippet card in the hero (mono font, muted token colors; no JS syntax highlighter).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** Separate `index.html`, `style.css`, `script.js`. Exactly one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline scripts, no inline styles.\n- **Naming:** BEM throughout, with the verbatim exception of `.api-flow-animation` and `.transaction-status-indicator`. Never mix conventions.\n- **Copy:** Real, thematic English copy for every section — no lorem ipsum. Footer links to non-existent pages may use `href=\"#\"` stubs.\n- **Completeness:** All sections, all component states, dark mode, persistence, and every signature effect delivered in the first attempt — no placeholders, no TODOs.\n- **CSS Organization:** tokens → base\u002Freset → layout → components → sections → animations, with section comments.\n- **JS Scope:** theme toggle + persistence, mobile menu, FAQ accordion, email form validation + simulated submit, transaction status cycle, optional modal, optional IntersectionObserver scroll reveal (content must be fully visible with JS disabled; reveal is enhancement only).\n- **Quality Gate:** Verify zero horizontal scroll at 320px, full keyboard navigation, AA contrast in both themes, and correct `aria-pressed`\u002F`aria-label` on the theme toggle before finishing.\n",1791954981780]