[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-208-Editorial-Contemporaneo":3},"# SYSTEM PROMPT — BUILD THE \"CONTEMPORARY EDITORIAL\" LANDING PAGE (Luxury & Editorial)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver the complete, production-ready landing page in a single attempt — full `index.html`, `style.css`, and `script.js`. No partial output, no follow-up questions, no TODOs.\n\n---\n\n## PROJECT BRIEF & ART DIRECTION\n\n- **Theme:** Contemporary Editorial — the landing page of a digital culture & art magazine.\n- **Category:** Luxury & Editorial. **Era:** 2026+ Visual Journalism.\n- **Mood keywords:** magazine, culture, art, editorial, immersive, visual, sophisticated, engaging, curated, modern.\n- **Design language (mandatory):**\n  - **Contrasting typography:** decorative serif (Playfair Display) for headlines; highly legible sans-serif (Inter) for body.\n  - **Multilayer composition:** images and text overlap and offset each other.\n  - **High-quality visual content focus:** large curated imagery, generous whitespace, magazine grids.\n  - **Decorative elements:** hairline rules, ornamental frames, oversized numerals, drop caps, uppercase letter-spaced kickers.\n  - **Article-highlight micro-interactions:** hover lifts, image zooms, underline reveals.\n  - **Page-turn transitions:** a \"magazine flip\" reveal effect on scroll (CSS 3D `perspective` + `rotateY`), subtle and refined.\n  - **Accents:** wine red and gold on a paper-like light canvas; restrained, luxurious motion.\n- **Source palette (map to tokens in §1.2):** White `#FFFFFF`, Black `#000000`, Wine Red `#800000`, Dark Gray `#333333`, Gold `#FFD700`, Navy `#000080`, Emerald `#2ECC40`, Beige `#F5F5DC`.\n- **Mandatory spec classes:** `.magazine-cover`, `.article-layout-multilayer`, `.decorative-frame`.\n- **Mandatory spec values:** body `line-height: 1.7`; hairline dividers `1px solid #E0E0E0`; global motion timing `0.5s ease-in-out`; headline font `\"Playfair Display\", serif`.\n- **Copy rule:** Write all user-facing copy in **English** (the source specification is in Portuguese — translate every headline, label, and description). Author original, realistic editorial copy: masthead name, issue line, article titles, bylines, quotes, plan names, FAQ answers. **No lorem ipsum anywhere.**\n- **Sections to build, in order:** Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links — plus a sticky site header and a skip-to-content link.\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:** every design property, layout rule, and state is applied via classes\u002FIDs defined in `style.css`.\n- **Minimal HTML modifications:** markup stays semantic and style-agnostic — a full retheme must be achievable by editing `style.css` alone.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` (and theme overrides). No hard-coded hex values outside token definitions. Required tokens and starter values:\n\n- **Color:** `--primary: #800000` (wine red — CTAs, rules, hover underlines, featured frames) · `--secondary: #FFD700` (gold — decorative accents) · `--bg-primary: #FEFEFE` (**never `#FFFFFF` as a background** — the spec's pure white maps to `#FEFEFE`) · `--bg-secondary: #F5F5DC` (beige — alternating sections, card surfaces) · `--text-primary: #000000` · `--text-secondary: #333333` · `--text-success: #1E8C2E` (emerald darkened for light-bg contrast) · `--text-error: #C62828` · `--border-default: #E0E0E0` · `--border-error: #C62828` · `--border-success: #2ECC40` · `--accent-navy: #000080` (links, focus rings, numerals).\n- **Shape & depth:** `--radius-sm: 0` · `--radius-md: 2px` · `--radius-lg: 4px` (sharp, printed-page feel) · `--shadow-sm: 0 1px 3px rgba(0,0,0,.08)` · `--shadow-md: 0 10px 30px rgba(0,0,0,.14)`.\n- **Motion & space:** `--spacing-gap: 1.5rem` · `--transition-fast: .25s ease-in-out` · `--transition-normal: .5s ease-in-out` · `--ease-standard: ease-in-out`.\n- **Elevation:** `--z-dropdown: 10` · `--z-modal: 100` · `--z-toast: 200`.\n- **Type:** `--font-display: \"Playfair Display\", Georgia, serif` · `--font-base: \"Inter\", Arial, sans-serif`.\n- **Contrast pairing (enforced in every theme):** light backgrounds pair with dark text; dark backgrounds pair with light text. Gold `#FFD700` must never appear as text on light backgrounds — restrict it to decorative rules, frames, badges, and text on dark\u002Fwine surfaces. On dark surfaces, never use navy or wine as text color; use gold, beige, or white.\n\n### 1.3 Mandatory Dark Mode Support\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `[data-theme=\"dark\"]` selector. Starter values: `--bg-primary: #0D0D0D` · `--bg-secondary: #1B1B1B` · `--text-primary: #FEFEFE` · `--text-secondary: #C9C5B5` · `--text-success: #2ECC40` · `--text-error: #FF7A70` · `--border-default: #333333`; keep `--primary: #800000` (fills\u002Fborders paired with light text) and `--secondary: #FFD700`.\n- **Theme switching:** background and text variables must swap seamlessly with zero HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle (sun\u002Fmoon Material Symbols icon) with correct `aria-pressed` and `aria-label` states.\n- **Exception clause:** the source style spec requested a light-only presentation — treat light mode as the default and primary experience, but a complete, fully styled dark mode must still be delivered per these mandatory architecture rules.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build every layout structure with Flexbox.\n- **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified.\n- Mobile-first: multi-column rows collapse to columns on small viewports; **no horizontal scrolling at any breakpoint**; fluid type via `clamp()`.\n\n### 1.5 CSS Architecture & Naming Convention\n- Use **clean custom CSS** in `style.css` (the source spec supplies custom CSS, so Tailwind is not required; if used at all, only via `@layer`\u002F`@apply` mapping to these same tokens).\n- **One convention only — BEM** (e.g., `.pricing-card`, `.pricing-card__title`, `.pricing-card--featured`). Never mix conventions.\n- Required generic reusable classes: `.btn`, `.card`, `.input-group` — plus the three mandatory spec classes `.magazine-cover`, `.article-layout-multilayer`, `.decorative-frame`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text fonts:** load Playfair Display (400\u002F700\u002F900 + italic) and Inter (400\u002F500\u002F700) from Google Fonts via `\u003Clink>` with `preconnect`; bind to `--font-display` \u002F `--font-base`. Body `line-height: 1.7`.\n- **Icons:** Google Material Symbols (Outlined) via the official stylesheet link. **Inline SVGs, local icon files, and emoji-as-icons are forbidden.**\n- Editorial type treatments: uppercase letter-spaced kickers, drop caps on excerpts, oversized Playfair numerals for steps and prices.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + variants)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**. Variants: `.btn--primary` (wine fill, white text), `.btn--outline` (black border, transparent), `.btn--gold` (gold fill, black text), `.btn--danger`.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct visible ring via `outline`\u002F`box-shadow` using tokens (navy on light, gold on dark).\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol **without changing button dimensions** (apply to newsletter submit and pricing CTAs).\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styling driven by `--text-success` \u002F `--text-error`.\n\n### 2.2 Card Component (`.card`)\n- **Default:** flexible Flexbox layout; surfaces of `--bg-secondary` or `#FEFEFE` with `1px solid var(--border-default)` and subtle elevation.\n- **Hover:** shadow shift plus `transform: translateY(-2px)`; on article cards, add image `scale(1.03)` inside an `overflow: hidden` frame and a wine-red underline reveal on the headline.\n- **Focus-within:** card border highlights (wine\u002Fgold) when a child link or button receives focus.\n- **Loading (skeleton):** CSS shimmer animation on image areas with reserved aspect ratios — no layout jumps while images load.\n- **Empty state:** structured fallback with a Google Icon and guidance text for any dynamically loaded region.\n\n### 2.3 Form & Input Requirements (`.input-group`)\n- Used for the newsletter email capture (Final CTA and\u002For footer).\n- **Structure:** flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error\u002Fsuccess feedback element.\n- **States:** empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, error message, error icon), disabled, read-only.\n- Announce validation feedback through an `aria-live=\"polite\"` region.\n\n### 2.4 Modal \u002F Popup Requirements\n- If any overlay is used (e.g., issue preview or subscription confirmation), cover all states: **opening, open, loading, success\u002Ferror, closing** — animated via CSS transitions.\n- Centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, and close via `Esc` or overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n- **Smooth animations:** apply `transition: var(--transition-normal)` to state changes. Implement the **magazine page-turn reveal**: sections\u002Fcards enter with a subtle `rotateY` under `perspective`, triggered by an `.is-visible` class added via `IntersectionObserver` in `script.js`. Under `prefers-reduced-motion`, replace all flips\u002Fzooms with simple fades.\n- **Accessibility:** WCAG-compliant contrast in **both** modes; never communicate state by color alone (pair color with icons or text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `article`, `footer`); a single `h1` and logical heading hierarchy; correct ARIA on the accordion (`aria-expanded`, `aria-controls`) and theme toggle (`aria-pressed`); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback; visible skip-to-content link.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** any destructive link\u002Faction (e.g., \"Cancel subscription\" in FAQ or footer) uses `.btn--danger` \u002F distinct error styling, clearly visible in both themes.\n\n---\n\n## 4. SECTION-BY-SECTION BUILD SPECIFICATIONS\n\n### 4.1 Sticky Site Header\nInvented magazine masthead in Playfair (e.g., \"FOLIO\" or \"MERIDIAN\"), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, compact \"Subscribe\" `.btn--primary`. Background `--bg-primary`, `border-bottom: 1px solid var(--border-default)`. Collapses to an accessible, keyboard-operable mobile menu on small screens.\n\n### 4.2 Hero — `.magazine-cover`\nFull-viewport magazine cover: oversized Playfair masthead\u002Fheadline, issue number + date line framed by hairline rules, deck subheading, layered imagery behind\u002Faround the type (`.article-layout-multilayer`), imagery wrapped in `.decorative-frame`, two CTAs (\"Subscribe\" primary \u002F \"Read the Latest Issue\" outline), subtle scroll cue. Page-turn entrance animation on load.\n\n### 4.3 Features — 3 Article Cards\nSection kicker + Playfair headline + one-line intro. Three `.article-layout-multilayer` cards: seeded image, kicker (e.g., CULTURE \u002F ART \u002F DESIGN), Playfair headline, excerpt with drop cap, byline + read time, \"Read article\" stretched link. All §2.2 card states.\n\n### 4.4 How It Works — 3 Steps\nOversized Playfair numerals (01 \u002F 02 \u002F 03) in gold or navy, one Material Symbol icon per step, title + description, steps connected by hairline rules. Copy flow example: choose a plan → receive the weekly issue → unlock the archive.\n\n### 4.5 Testimonials\nThree pull-quotes on a beige (`--bg-secondary`) band: oversized Playfair quotation mark, italic serif quote, gold rule, attribution (name + role — critics, curators, readers). Hover micro-interaction (subtle lift or accent underline).\n\n### 4.6 Pricing — 3 Tiers\nEditorial plan names (e.g., Reader — free; Subscriber — monthly; Collector — annual). Middle tier featured: wine-red border or `.decorative-frame`, gold \"Most Popular\" badge, slight elevation. Each card: Playfair price + billing period, feature list with Material check icons, CTA button implementing the full §2.1 state set.\n\n### 4.7 FAQ — Accessible Accordion\n5–6 real questions (billing, delivery, cancellation, gifting, archive access). Button + region pattern with `aria-expanded`\u002F`aria-controls`, keyboard operable, CSS-animated expand\u002Fcollapse, rotating Material expand icon, hairline separators between items.\n\n### 4.8 Final CTA\nImmersive full-width band: wine `#800000` (or black) background with light text and gold accents. Playfair headline, supporting line, `.input-group` email capture with a submit button implementing loading → success\u002Ferror states and `aria-live` feedback.\n\n### 4.9 Footer\nMasthead repeat + tagline; secondary link columns (Magazine: About, Contact, Careers · Legal: Privacy, Terms · Social: Instagram, X, Pinterest); optional mini newsletter form (§2.3); copyright line; `border-top: 1px solid var(--border-default)`.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks — a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference in the HTML.\n- **script.js scope:** theme toggle + `localStorage` persistence, `IntersectionObserver` reveal\u002Fflip triggers, accordion behavior, newsletter validation + button loading\u002Fsuccess\u002Ferror states, mobile menu. No frameworks, no inline event handlers.\n- **Naming:** BEM consistently across all files; never mix conventions.\n- **Imagery:** `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cdescriptive-seed>\u002F\u003Cwidth>\u002F\u003Cheight>` with meaningful `alt` text; reserved aspect ratios + skeleton shimmer to prevent layout shift.\n- **Copy:** complete, original English editorial copy in every section — no lorem ipsum, no placeholder text where content is expected.\n- **Output:** the complete, runnable code for all three files in your first response.\n",1791954983156]