[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-401-Luxury-Typography":3},"# SYSTEM PROMPT — BUILD A \"LUXURY TYPOGRAPHY\" LANDING PAGE (HAUTE COUTURE EDITION)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The core design principle: **typography IS the design** — every section must be composed of dramatic, editorial type. Minimal to zero photography; oversized glyphs, numerals, hairline rules, and calligraphic flourishes act as the imagery.\n\n---\n\n## 0. PROJECT BRIEF & DESIGN DIRECTION\n\n**0.1 Theme Definition**\n* **Name:** Luxury Typography — Refined, Calligraphic, Premium, Script-Based\n* **Era:** Haute Couture & Fashion Editorial\n* **Keywords:** Luxury typography, refined fonts, calligraphic scripts, elaborate ligatures, premium, haute couture, custom typefaces, elegant, fashion\n* **Composition Language:** Stacked type compositions, mixed ultra-thin (100–200) and ultra-bold (800–900) weights on the same canvas, outline (stroked) display words, script accents overlapping serif display lines, champagne-gold hairlines, generous whitespace, sharp editorial edges.\n\n**0.2 Required Sections (build in this order)**\n1. Header — slim fixed bar: wordmark, anchor navigation, theme toggle, accessible mobile menu\n2. Hero\n3. Features — exactly 3 cards\n4. How It Works — exactly 3 steps\n5. Testimonials — 3 quotes\n6. Pricing — exactly 3 tiers (middle tier featured)\n7. FAQ — accordion, 5–6 items\n8. Final CTA — email capture form + consultation modal trigger\n9. Footer — secondary link groups\n\n**0.3 Color Palette & Token Mapping**\n* **Primary palette:** Jet Black `#0A0A0A`, Pure White `#FFFFFF`, Champagne Gold `#D4AF37`, Charcoal `#333333`\n* **Secondary palette:** Platinum `#E5E4E2`, Blush `#F5E6E0`, Deep Burgundy `#4A0020`, Soft Ivory `#FAF0E6`\n* **Light mode:** page background = Soft Ivory `#FAF0E6`; card surfaces = `#fefefe` with hairline borders; text = Jet Black \u002F Charcoal; gold is decorative (hairlines, strokes, icons, shimmer).\n* **Dark mode:** page background = Jet Black `#0A0A0A`; surfaces = Charcoal `#333333` (or `#0A0A0A` with gold hairline borders); text = Soft Ivory \u002F Platinum; Champagne Gold text is permitted on dark backgrounds (contrast ≈ 9.4:1).\n* **Exception clause (palette conflict):** Although the palette lists Pure White `#FFFFFF`, it must **never** be used as a light-mode background or card surface — reserve it for dark-mode display text and high-key accents. Light surfaces use Soft Ivory `#FAF0E6`, Platinum `#E5E4E2`, Blush `#F5E6E0`, or `#fefefe` if an additional near-white is required.\n* **Accessible gold rule:** `#D4AF37` on light backgrounds fails contrast for text. Define a dedicated `--gold-text` token (`#8C6D1F` in light mode, `#D4AF37` in dark mode) and use it for **any gold-colored readable text**. Raw `#D4AF37` in light mode is restricted to non-text decoration: borders, hairlines, text-stroke outlines paired with a filled high-contrast color, and large icons.\n* **Deep Burgundy `#4A0020`** is the thematic accent: use it for the danger\u002Ferror family and for one rich moment (e.g., the Final CTA band background in dark mode, or oversized decorative glyphs).\n\n**0.4 Typography System (Google Fonts only — see Rule 1.6)**\n* `--font-display`: **Playfair Display** (weights 400–900 + italics) — headlines, ultra-bold display lines\n* `--font-base`: **Cormorant** (weights 300–600 + italics) — refined body serif\n* `--font-script`: **Great Vibes** (400) — calligraphic accents with elaborate ligatures (single overlapping words, never full sentences)\n* `--font-label`: **Jost** (weights 100–600) — uppercase eyebrow labels, nav, buttons, oversized thin numerals. Jost supplies the 100–200 ultra-thin range that Playfair\u002FCormorant lack; the full 100–900 weight contrast must be exploited across these families.\n* **Scale:** Display type `font-size: clamp(3rem, 10vw, 12rem)` (target 8–12vw at desktop), `line-height: 0.9–1.1`, `letter-spacing: -0.05em` to `-0.02em`. Eyebrow labels: 0.75–0.875rem, uppercase, `letter-spacing: 0.2em–0.3em`. Body: 1.05–1.25rem, `line-height: 1.6–1.8`.\n* **Weight-contrast mandate:** every major section should visibly mix at least one ultra-thin (100\u002F200) oversized element against one ultra-bold (800\u002F900) element where the composition allows.\n\n**0.5 Mandatory Visual Effects**\n* **Outline typography:** `-webkit-text-stroke: 1px var(--gold)`. Light mode: filled `#0A0A0A` text + gold stroke. Dark mode: transparent fill + gold stroke (or `#FFFFFF` fill + gold stroke). Apply only at display sizes (≥3rem) for legibility.\n* **Gold shimmer on hover:** CSS-only gradient sweep using `background: linear-gradient(...); -webkit-background-clip: text; background-clip: text;` animated on hover for nav links, buttons, and headings.\n* **Scroll-triggered text reveals:** `IntersectionObserver` in `script.js` toggles an `.is-visible` class; CSS transitions handle fade + `translateY(24px → 0)` (+ optional letter-spacing settle). Content must be fully visible without JS.\n* **Stacked hero composition:** overlapping display lines mixing families\u002Fweights; the script word overlaps the serif display via negative margin; gold hairline rules flanking eyebrow labels.\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:** the `style=\"...\"` attribute anywhere in the HTML.\n* Target all design properties, layout rules, and states exclusively via class or ID selectors.\n* HTML must remain clean, semantic (header, nav, main, section, article, footer), and agnostic of visual styling — changing the site's look must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root`, overridden under `@media (prefers-color-scheme: dark)` and a `.dark` class:\n* **Colors (required names):** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n  * Light: `--primary: #0A0A0A`, `--secondary: #D4AF37`, `--bg-primary: #FAF0E6`, `--bg-secondary: #fefefe`, `--text-primary: #0A0A0A`, `--text-secondary: #333333`, `--text-success: #1B5E20`, `--text-error: #8E1B2F`, `--border-default: rgba(10,10,10,0.15)`, `--border-error: #8E1B2F`, `--border-success: #1B5E20`.\n  * Dark: `--primary: #FAF0E6`, `--secondary: #D4AF37`, `--bg-primary: #0A0A0A`, `--bg-secondary: #333333`, `--text-primary: #FAF0E6`, `--text-secondary: #E5E4E2`, `--text-success: #81C784`, `--text-error: #E57373`, `--border-default: rgba(245,240,230,0.18)`, `--border-error: #E57373`, `--border-success: #81C784`.\n  * **Theme extras:** `--gold: #D4AF37`, `--gold-text` (per 0.3), `--burgundy: #4A0020`, `--platinum: #E5E4E2`, `--blush: #F5E6E0`, `--ivory: #FAF0E6`, `--ink: #0A0A0A`, `--charcoal: #333333`.\n  * **Contrast pairing:** every light background token must pair with a dark text token and vice versa — enforce this in both themes, not just the default.\n* **Fonts:** `--font-display`, `--font-base`, `--font-script`, `--font-label` (per 0.4).\n* **Radius & shadows:** `--radius-sm: 0px`, `--radius-md: 2px`, `--radius-lg: 4px` (sharp couture edges); `--shadow-sm: 0 2px 12px rgba(10,10,10,0.06)`, `--shadow-md: 0 12px 32px rgba(10,10,10,0.12)`. In dark mode, prefer gold hairlines over shadows for elevation.\n* **Spacing & transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 350ms`, `--ease-standard: cubic-bezier(0.19, 1, 0.22, 1)`.\n* **Elevation\u002Fstacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 2000` — layered components (mobile menu, modal, toasts) must never conflict.\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 never requires HTML restructuring.\n* Provide a **visible theme toggle** in the header using Material Symbols (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n* Persist choice in `localStorage` (e.g., key `theme`); on first visit fall back to `prefers-color-scheme`. Apply the stored theme at the very top of the deferred `script.js`, and set the `html` element's background color in CSS per color scheme to prevent a theme flash.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified (equal-height stretched cards are the one sanctioned exception — document it in a CSS comment).\n* Mobile-first: rows convert to columns at breakpoints (suggested: 768px, 1024px). **No horizontal scrolling ever** — display type must use `clamp()`, `max-width: 100%`, and `overflow-wrap: break-word`; `overflow-x: clip` on `body` is permitted only as a final guard.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS via CDN. Custom typography effects, component classes, and theme tokens live in `style.css` (use `@layer` \u002F `@apply` where useful).\n* All utility usage must map back to CSS variables or generic reusable classes: `.btn`, `.card`, `.input-group`, plus BEM modifiers (see Section 4).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **only** Google Fonts via `\u003Clink>`: Playfair Display, Cormorant, Great Vibes, Jost (per 0.4), bound to the font tokens.\n* Icons: **Google Material Symbols** only. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-label`, uppercase, `letter-spacing: 0.15em`.\n* **Variants:** `.btn--primary` (solid ink: black in light mode \u002F ivory in dark mode; gold shimmer sweep on hover), `.btn--outline` (1px gold border, transparent background), `.btn--danger` (burgundy\u002Fcrimson family — visually distinct in **both** themes), `.btn--ghost`.\n* **Hover:** brightness\u002Fshadow shift + `cursor: pointer`.\n* **Focus:** distinct gold focus ring via `outline`\u002F`box-shadow` using tokens (`:focus-visible`).\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS border-spinner or rotating Material icon **without changing button dimensions**; set `aria-busy=\"true\"`.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component (`.card`)**\n* **Default:** flexible flexbox layout, `--bg-secondary` surface, 1px `--border-default` hairline, `--radius-md`, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` + shadow shift + a gold top hairline (via `::before`).\n* **Focus-within:** gold border when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define a `.card--skeleton` shimmer keyframe animation in CSS to prevent layout jumps (define it even if default content never triggers it).\n* **Empty State:** define a fallback layout with a Material icon and clear guidance text.\n* **Variants to build:** `.card--feature`, `.card--step`, `.card--testimonial`, `.card--pricing`, `.card--pricing--featured`.\n\n**2.3 Form & Input Requirements (`.input-group`)**\n* **Structure:** flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error feedback container.\n* **States — all styled:** Empty, Focused (gold outline ring), Filled, Valid (success border + Material check icon), Invalid (error border, error text + icon, `aria-invalid=\"true\"`, `aria-describedby` pointing to the error container), Disabled, Read-only.\n* Error and success messages must live in `aria-live=\"polite\"` regions. Never communicate validity by color alone — always pair with icon + text.\n\n**2.4 Modal \u002F Popup Requirements (`.modal`)**\n* Build one modal: **\"Request a Private Consultation\"**, triggered by the Final CTA's secondary button.\n* **States — all animated via CSS transitions:** Opening, Open, Loading (submit), Success\u002FError, Closing.\n* **UX:** centered flex container (`align-items: center`), backdrop overlay (dimmed, above all content at `--z-modal`), Material `close` icon button, keyboard **focus trapping**, close via `Esc` and overlay click, focus returns to the trigger on close, `role=\"dialog\"` + `aria-modal=\"true\"`, body scroll locked while open.\n\n**2.5 Landing Page Section Specifications**\n* **Header:** fixed slim bar; wordmark in script or Playfair; anchor links (Features, Process, Testimonials, Pricing, FAQ, Contact) with gold shimmer hover and smooth scrolling; theme toggle (Rule 1.3); mobile menu button with `aria-expanded`, keyboard-operable panel at `--z-dropdown`, `Esc` closes.\n* **Hero:** `min-height: 100svh` (with `100vh` fallback); eyebrow label flanked by gold hairlines; stacked display composition — line 1 in Playfair 800\u002F900, line 2 as a stroked outline word (per 0.5), line 3 in Great Vibes overlapping via negative margin; Cormorant 300 subcopy; primary + outline CTA pair; animated scroll cue; staggered load-in reveal.\n* **Features (3 cards):** section header pattern (eyebrow + display title + optional lede, reused site-wide); three `.card--feature` items, each with a Material icon inside a thin gold ring (or an oversized decorative glyph), Playfair title, Cormorant copy; flex row → column on mobile.\n* **How It Works (3 steps):** three `.card--step` items with oversized ultra-thin numerals (Jost 100, ~6–10vw, stroked or gold), connected by a gold hairline (horizontal on desktop, vertical on mobile); step title + copy per card.\n* **Testimonials (3 quotes):** `.card--testimonial` items: oversized decorative gold quotation glyph (`aria-hidden`), quote in Cormorant italic, attribution (name + role\u002Fbrand), optional star rating using filled Material Symbols with an `aria-label`. Static grid preferred; if a carousel is used it must be fully keyboard operable with `aria-roledescription=\"carousel\"`.\n* **Pricing (3 tiers):** three `.card--pricing` items; the middle `.card--pricing--featured` gets a 1–2px gold border, slight elevation\u002Fscale, and a \"Most Popular\"-style badge in label style; each card: tier name (script or display), price in display numerals with a currency\u002Fperiod label, feature list with Material `check` icons, one CTA per tier (featured = primary, others = outline). If a billing-period toggle is included, it must use `aria-pressed` group semantics.\n* **FAQ:** accordion with 5–6 items; each toggle is a `\u003Cbutton>` with `aria-expanded` + `aria-controls` controlling a region (or styled `\u003Cdetails>\u002F\u003Csummary>`); Material chevron rotates 180°; smooth height animation via CSS (`grid-template-rows: 0fr → 1fr` technique); fully keyboard operable.\n* **Final CTA:** inverted band — light mode: Jet Black background with ivory\u002Fgold type; dark mode: Deep Burgundy background with ivory\u002Fgold type; huge display line + script accent; email capture form per 2.3 with a primary submit button showing loading → inline success state (Material check + message in an `aria-live` region); secondary button opens the consultation modal per 2.4.\n* **Footer:** flex\u002Fgrid columns — brand wordmark, secondary link groups (e.g., Atelier, Support, Legal), social links (text or Material icons), copyright with dynamic year via JS; all links get shimmer hover; hairline top border.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing and breakpoints with zero horizontal overflow — guard all 8–12vw display type with `clamp()`, `max-width: 100%`, and `overflow-wrap: break-word`.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** — disable reveals, shimmer, and scale transforms, and keep all content visible.\n* **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes. Never rely on color alone to communicate state (pair icons + text). Use semantic HTML5, correct ARIA roles\u002Flabels on the accordion, modal, theme toggle, and mobile menu, logical DOM\u002Ffocus order, full keyboard operability (no mouse-only interactions), visible focus rings, `aria-live` regions for dynamic feedback (form errors, loading, success), a skip-to-content link, `lang=\"en\"`, meta viewport, and a descriptive `\u003Ctitle>`.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must be visually distinct in both themes via the burgundy\u002Ferror token family.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n* **Naming convention:** strict **BEM** (`.block__element--modifier`) for all custom classes, never mixed with other conventions. Tailwind utilities may be used for layout\u002Fspacing only — never for the custom typography effects, which live in `style.css`.\n* **Copy:** author original, polished **English** copy in a refined haute-couture editorial voice (e.g., an atelier\u002Fbrand voice) — **no lorem ipsum anywhere**. All user-facing text, labels, ARIA labels, and alt\u002Faria-hidden decisions in English.\n* **Completeness:** the page must work fully on the first attempt — theme toggle persists, accordion opens\u002Fcloses, form validates with inline feedback, modal opens\u002Fcloses with focus management, scroll reveals trigger. No TODOs, no placeholder stubs, no external assets beyond Google Fonts, Google Material Symbols, and the Tailwind CDN.\n* **Output:** deliver the complete contents of all three files in a single response.\n",1791954986195]