[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-073-Estilo-de-Elegancia-Espacial":3},"# CODING PROMPT — \"Spatial Elegance\" Landing Page\n### Premium Spatial Computing Device · Minimalism & Swiss · Full Light\u002FDark\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page below in a single attempt. Do not ask clarifying questions — where copy or content is unspecified, invent realistic, on-brand English copy.\n\n---\n\n## 0. PROJECT BRIEF & DESIGN DIRECTION\n\n- **Theme:** \"Spatial Elegance\" — a minimalist, premium, futuristic landing page for a spatial computing device (era: 2026+ spatial computing). All source concepts are translated to English; every user-facing string, class name, and comment must be in English\u002FASCII.\n- **Keywords:** spatial computing, elegance, innovation, seamless, intuitive, premium, minimalist, futuristic, immersive, sleek.\n- **Aesthetic:** Frosted glass (backdrop blur), soft parallax, tactile micro-interactions, clean and generously spaced typography, floating elements, fluid transitions, subtle depth, immersive and sleek — executed through a **Minimalism & Swiss** lens: strict grid, generous negative space, strong typographic hierarchy, flush-left sans-serif type, restrained color, objective clarity, minimal ornamentation.\n- **Sections (in order):** Sticky header\u002Fnav · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.\n- **Light\u002FDark:** Full theming with adaptive elements. Dark mode is the theme's signature presentation; light mode is a fully designed counterpart — never an afterthought.\n\n**Source CSS directives → token mapping (mandatory):**\n- `background: linear-gradient(135deg, #1C1C1E, #000000)` → hero\u002Fdark background gradient token.\n- `backdrop-filter: blur(20px) saturate(1.5)` (with `-webkit-` prefix) + `transform: translateZ(0)` → frosted-glass surface tokens.\n- `transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)` → `--transition-normal` \u002F `--ease-standard`.\n- `border-radius: 12px` → `--radius-md`; `box-shadow: 0 10px 30px rgba(0,0,0,0.3)` → `--shadow-md`.\n- System font stack → fallback chain only (see §1.6 exception clause).\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`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks in HTML, inline event handlers.\n- All design properties, layout rules, and states are targeted via **class or ID selectors only**.\n- HTML stays semantic and style-agnostic: changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light) and override in `.dark`. Required contract:\n\n*Colors (Light — default token set):*\n- `--bg-primary: #F0EAD6` (Starlight — never pure white), `--bg-secondary: #fefefe` (use `#fefefe` instead of `#ffffff` wherever near-white is needed), `--bg-hero: linear-gradient(135deg, #F0EAD6, #E0E0E0)`\n- `--text-primary: #1C1C1E` (Space Grey), `--text-secondary: #581845` (Deep Purple, muted usage)\n- `--primary: #000080` (Midnight Blue — actions) paired with `--primary-contrast: #fefefe`\n- `--accent-soft: #E8C3BA` (Rose Sand), `--accent-rich: #581845` (Deep Purple)\n- `--text-error: #D70015`, `--border-error: #FF3B30` (Product Red), `--border-default: rgba(28,28,30,0.12)`\n- `--text-success: #1B7A3D`, `--border-success: #34C759` — *exception clause: the source palette contains no success hue; add this system green as a semantic-only token extension.*\n\n*Colors (Dark — `.dark` overrides):*\n- `--bg-primary: #1C1C1E`, `--bg-secondary: #2C2C2E`, `--bg-hero: linear-gradient(135deg, #1C1C1E, #000000)`\n- `--text-primary: #E0E0E0` (Silver), `--text-secondary: rgba(224,224,224,0.65)`\n- `--primary: #000080` paired with `--primary-contrast: #E0E0E0`; `--accent-soft: #F0EAD6` (Starlight highlights)\n- `--text-error: #FF3B30`, `--text-success: #34C759`, `--border-default: rgba(224,224,224,0.14)`\n\n*Glass tokens (per theme):* `--glass-bg` (`rgba(254,254,254,0.55)` light \u002F `rgba(255,255,255,0.08)` dark), `--glass-border`, `--glass-blur: blur(20px) saturate(1.5)` — always applied with the `-webkit-backdrop-filter` prefix and `transform: translateZ(0)` on glass layers.\n\n*Shape, depth, motion, stacking:* `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 24px`; `--shadow-sm: 0 4px 12px rgba(0,0,0,0.12)`, `--shadow-md: 0 10px 30px rgba(0,0,0,0.3)`; `--spacing-gap: 1.5rem`; `--transition-fast: 0.2s`, `--transition-normal: 0.4s`, `--ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1)`; `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n\n**Contrast pairing rule:** 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, not just the default.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark tokens defined under a `.dark` class **and** an `@media (prefers-color-scheme: dark)` no-JS fallback. Theme switching must never require HTML restructuring.\n- Resolution order on load: `localStorage` → `prefers-color-scheme` → Dark (signature presentation). Persist the user's choice in `localStorage`.\n- Visible toggle control in the header (Material Symbol sun\u002Fmoon) with correct `aria-pressed` and `aria-label` state, announcing the current theme.\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 a CSS comment (e.g., card bodies stacking from the top).\n- Mobile-first: multi-column rows collapse to columns on small viewports; fluid `clamp()` typography; a centered max-width container (~1200px) with side padding. **Zero horizontal scrolling at any viewport width.**\n\n**1.5 Framework Default**\n- Use Tailwind CSS (CDN or build) or clean custom CSS organized with `@layer`\u002F`@apply` — the heavy glass\u002Fparallax effects justify a token-driven `style.css`. Whichever you choose, apply it consistently and map every utility back to the CSS variables and generic reusable classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Google Fonts** via `\u003Clink>` with `preconnect`: **Space Grotesk** for display\u002Fheadings (`--font-display`) and **Inter** for body (`--font-base`). Clean, spaced typography: uppercase eyebrows with `letter-spacing: 0.12em`, large display headings with tight leading, strong Swiss scale contrast.\n- *Exception clause:* the source spec's system stack (`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif`) may appear **only as fallbacks appended after** the Google Font families.\n- Icons: **Google Material Symbols** only (e.g., `view_in_ar`, `progress_activity`). **Forbidden:** raw inline SVGs, local icon files, emoji as icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nBase `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-md`, `transition: var(--transition-fast) var(--ease-standard)`. Variants: `.btn--primary` (Midnight Blue), `.btn--ghost` (frosted glass), `.btn--danger` (Product Red — visually distinct in both themes). All states via CSS classes:\n- **Hover:** brightness\u002Fshift + `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring built from CSS variables for keyboard navigation.\n- **Active:** `transform: scale(0.97)` press feedback.\n- **Loading (`.is-loading`):** disables pointer events, prevents double-clicks\u002Fdouble submission, renders a CSS spinner or rotating `progress_activity` Material Symbol **without changing button dimensions** (reserve the label's space).\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`, never color-only (pair with icon + text).\n\n**2.2 Card Component**\nBase `.card`: frosted-glass surface (`--glass-bg`, `--glass-border`, `--glass-blur`), `--radius-lg`, `--shadow-sm`, flex column with top-aligned content (explicitly justified exception to the center rule). States:\n- **Hover:** `transform: translateY(-2px)` + elevation shift to `--shadow-md`.\n- **Focus-within:** accent border highlight when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** CSS shimmer keyframes that preserve layout dimensions.\n- **Empty state:** structured fallback with a Material Symbol icon and guidance text.\nApply to Features cards, Testimonial cards, and Pricing tiers. Pricing's recommended tier uses `.card--featured`: accent border, \"Recommended\" badge, elevated scale\u002Fshadow.\n\n**2.3 Form & Input Requirements**\nUsed in the Final CTA email capture and the pre-order modal. Structure `.input-group` as a flex column wrapping `\u003Clabel>`, the field, and a dedicated error-feedback container. Account for every state: **Empty, Focused** (outline ring from variables), **Filled, Valid** (success border + check icon), **Invalid** (error border, red text, error icon + message), **Disabled, Read-only**. Validate on blur and submit; set `aria-invalid` and `aria-describedby`; never rely on color alone.\n\n**2.4 Modal & FAQ Accordion**\n- **Pre-order modal** (triggered from pricing CTAs): states **Opening** (fade + scale via CSS transitions), **Open**, **Loading** (on submit), **Success\u002FError**, **Closing**. Centered flex overlay (`align-items: center`) with blurred backdrop at `--z-modal`; Material Symbol close button (`aria-label=\"Close dialog\"`); keyboard **focus trapping**; close via `Esc` and overlay click; focus returns to the trigger; `role=\"dialog\"` + `aria-modal=\"true\"`. Success confirmation announced via `aria-live`.\n- **FAQ:** accessible accordion — `\u003Cbutton>` with `aria-expanded` \u002F `aria-controls` + answer region; CSS height\u002Fopacity transition; chevron Material Symbol rotates 180°; fully keyboard operable; content present in the DOM.\n\n**2.5 Section-by-Section Build Specifications**\n- **Header (sticky):** frosted-glass bar; wordmark logo; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle; compact CTA. Mobile: accessible hamburger (`aria-expanded`) converting nav to a column at `--z-dropdown`. Include a \"Skip to main content\" link.\n- **Hero:** full viewport on `--bg-hero`; 2–3 floating abstract glass shapes with slow ambient float animation and soft scroll parallax (rAF or CSS scroll-driven; **disabled under `prefers-reduced-motion`**); eyebrow label, large display H1, subcopy, dual CTAs (primary \"Pre-order\" + ghost \"Explore features\"), scroll cue.\n- **Features:** 3 glass cards (icon, title, copy) in a flex row → column on mobile.\n- **How It Works:** 3 numbered steps (01\u002F02\u002F03) with hairline connectors, icons, and copy; row → column.\n- **Testimonials:** 3 `\u003Cblockquote>` cards; monogram-initial avatars in glass circles; `\u003Ccite>` name + role.\n- **Pricing:** 3 tiers with price, feature list (check Material Symbols), CTA opening the pre-order modal; middle tier featured.\n- **FAQ:** 5 realistic Q&As in the accessible accordion pattern.\n- **Final CTA:** full-width glass panel, headline, email-capture form with full §2.3 states, button success state, and an `aria-live` status message.\n- **Footer:** secondary links (About, Support, Privacy, Terms, Contact), Material Symbol social icons, copyright, small print.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, standard breakpoints, no horizontal overflow anywhere.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; respect `prefers-reduced-motion` (disable parallax, floating, and shimmer; retain simple opacity fades).\n- **Accessibility:** sufficient contrast (≥ 4.5:1) in **both** light and dark modes; never communicate state by color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, `blockquote`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback, loading, and confirmation messages.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive\u002Fdanger actions:** `.btn--danger` in Product Red, distinct in both themes.\n- **Tactile micro-interactions:** button press scale, card lift, icon nudge on hover, ambient floating hero elements — all token-driven and motion-safe.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>`).\n- **Naming convention:** BEM consistently across the entire deliverable (`.card`, `.card__title`, `.card--featured`, `.btn--primary`, `.faq__question`) — never mix conventions.\n- **Copy:** write realistic English product copy (invent the device name, tagline, feature descriptions, testimonial names\u002Froles, prices, and FAQ answers). **No lorem ipsum.** No unrequested placeholder content.\n- **`script.js` scope:** theme toggle + persistence, mobile nav, accordion, modal lifecycle + focus trap, form validation + states, parallax, smooth-scroll behavior — all as progressive enhancement.\n- Deliver complete, runnable code on the **first attempt**, with all rules above verifiably satisfied.\n",1791954981195]