[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-672-Pink-Script-After-Hours":3},"# SYSTEM PROMPT — LANDING PAGE BUILD: \"PINK SCRIPT — AFTER HOURS\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready, single-page landing page on the first attempt. Every rule below is mandatory. Output the final code only after all specifications are satisfied.\n\n**Objective:** A nocturnal-luxury editorial landing page containing: sticky header\u002Fnav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, and Footer with secondary links.\n\n---\n\n## 0. PROJECT BRIEF & THEME SPECIFICATION\n\n**0.1 Theme Identity**\n* **Name:** Pink Script — After Hours\n* **Type:** Nocturnal Luxury · Italic-Serif · High-Contrast · Editorial (2020s design-studio era)\n* **Keywords:** hot pink on near-black canvas, Instrument Serif italic, nocturnal, luxe, magazine, low density\n* **Density rule:** Low — few words per section, maximum atmosphere, generous whitespace\n* **Mode:** Dark-first. Full dark theme; no standard white light mode (see exception clause in Rule 1.3)\n\n**0.2 Color Palette → Token Map** (Dark \"Nocturne\" is the default `:root`; light \"Paper\" is the toggle variant)\n\n| Token | Dark (Nocturne, default) | Light (Paper variant) |\n|---|---|---|\n| `--bg-primary` | `#111111` (near-black canvas) | `#F5EDF1` (Paper) |\n| `--bg-secondary` | `#E8E0D0` (pearl-cream content panels) | `#FEFEFE` (never `#FFFFFF`) |\n| `--bg-ink` | `#060507` (deepest ink: header scrim, footer) | `#F5EDF1` |\n| `--text-primary` | `#F5EDF1` | `#060507` |\n| `--text-secondary` | `#B7ABB4` (muted paper) | `#5C5461` (muted ink) |\n| `--text-on-paper` | `#060507` (text on cream panels) | `#060507` |\n| `--text-on-accent` | `#060507` (text on pink fills) | `#FEFEFE` |\n| `--primary` | `#ED3D8C` (hot pink) | `#B81D67` (deep pink — AA-safe small text) |\n| `--secondary` | `#FF66A8` (bright pink: glows, hovers) | `#ED3D8C` |\n| `--pink-deep` | `#B81D67` (borders, pressed states, gradients) | `#B81D67` |\n| `--text-success` | `#7FE0B0` | `#1C7A50` |\n| `--text-error` | `#FF9AA6` | `#C2183C` |\n| `--border-default` | `rgba(245,237,241,0.14)` | `rgba(6,5,7,0.16)` |\n| `--border-success` | `#7FE0B0` | `#1C7A50` |\n| `--border-error` | `#FF9AA6` | `#C2183C` |\n\n* **Contrast pairing (mandatory, both modes):** every light surface token pairs with ink text; every dark surface pairs with paper text. Hot pink is reserved for italic accent words, rules, and fills — never as long-form body text color.\n\n**0.3 Typography & Icons (Google Fonts mandatory)**\n* **Display:** `'Instrument Serif'`, `font-style: italic`, bound to `--font-display`. All hero and section headlines, huge and airy: hero `clamp(3.25rem, 8vw, 7.5rem)`; section headlines `clamp(2.25rem, 5vw, 4rem)`.\n* **Body\u002FUI:** `'Instrument Sans'` (Google Fonts, weights 400\u002F500\u002F600), bound to `--font-base`. Body 1rem, line-height 1.6. Eyebrow labels: uppercase, 0.75rem, letter-spacing 0.14em, `--text-secondary`.\n* Load both fonts via Google Fonts `\u003Clink>` with `preconnect` and `display=swap`.\n* **Icons:** Google Material Symbols (Rounded), loaded via the standard Google Fonts link with variable settings `FILL 0, wght 300, GRAD 0, opsz 24`. **No raw inline SVGs, no local icon files, no emoji as icons.**\n* Pink accent color is applied to italic display words only (e.g., one hero headline word wrapped in `\u003Cem>`).\n\n**0.4 Atmosphere & Visual Effects**\n* **Section rhythm:** `--spacing-gap: clamp(4rem, 8vw, 8rem)` — mandatory vertical gap between every section.\n* **Transitions:** hover transitions 200–250ms → `--transition-fast: 200ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`.\n* **Elevation & glow:** `--shadow-sm` (subtle lift), `--shadow-md` (hover lift), plus `--shadow-glow: 0 0 48px rgba(237,61,140,0.22)` for primary-element hovers and soft radial pink glows on the canvas (e.g., `radial-gradient(ellipse at 50% 0%, rgba(237,61,140,0.14), transparent 60%)` on hero and Final CTA).\n* **Editorial hairlines:** accent rules per theme CSS, e.g., `border-bottom: 2px solid var(--primary)` for eyebrows, header underline, and footer top border.\n* **Radii (editorial, kept small):** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px`.\n\n**0.5 Brand Voice & Copy Direction**\n* Author **all user-facing copy in English**. Lorem ipsum is forbidden.\n* Voice: nocturnal, confident, magazine-cover terse — ≤ 25 words per section block wherever possible.\n* Invent one coherent fictional brand (e.g., an after-hours private creative studio\u002Fclub) and keep naming consistent across wordmark, hero, and footer. Tone example (do not copy verbatim): eyebrow \"After hours, by invitation\"; headline \"The night is *young*.\"\n\n**0.6 Required Sections (in order)**\n1. Sticky header\u002Fnav · 2. Hero · 3. Features (3 cards) · 4. How It Works (3 steps) · 5. Testimonials · 6. Pricing (3 tiers) · 7. FAQ (accordion, min. 4 items) · 8. Final CTA (email capture) · 9. Footer with secondary links. Detailed per-section requirements in Section 5.\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`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n* Style exclusively via class\u002FID selectors. No JS-injected inline styles; JS may only toggle classes\u002F`data-theme`.\n* HTML must stay semantic, clean, and styling-agnostic — retheming the site must never require markup edits.\n\n**1.2 CSS Variables & Theme Tokens**\n* Define all tokens from 0.2 plus: `--font-base`, `--font-display`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm`, `--shadow-md`, `--shadow-glow`, `--container: 72rem`, `--header-h`, and stacking tokens `--z-dropdown: 20`, `--z-modal: 100`, `--z-toast: 200` (all defined in `:root` even if unused).\n* Light backgrounds must never be pure white — use `#FEFEFE` where a near-white panel is needed.\n* Enforce the light-bg\u002Fdark-text and dark-bg\u002Flight-text pairing in **both** themes.\n\n**1.3 Mandatory Dark Mode Support**\n* Nocturne tokens ship as default `:root`; Paper tokens under a class\u002Fattribute selector (e.g., `html[data-theme=\"paper\"]`). Also support `@media (prefers-color-scheme: dark)` pinning Nocturne and a `.dark` class override. Set `color-scheme` accordingly.\n* Switching must occur purely through variable overrides — zero HTML restructuring.\n* Persist the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme` (OS-light → Paper variant). Ship a **visible toggle button** (Material `dark_mode`\u002F`light_mode` icon) with correct `aria-pressed` and `aria-label` (\"Switch to Paper theme\" \u002F \"Switch to Nocturne theme\"), minimum 44×44px touch target.\n* **Theme exception:** \"Pink Script — After Hours\" is a dark-first nocturnal theme — Nocturne is the default `:root` palette and the primary experience; the light variant is the on-palette \"Paper\" mode (Paper `#F5EDF1` canvas + Ink `#060507` text), never a standard white theme.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structure with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is justified (document each exception with a CSS comment).\n* Mobile-first: single-column by default, escalating to multi-column at ≥48em\u002F≥64em breakpoints. No horizontal scrolling at any width down to 320px. Content container: `width: min(100% - 2.5rem, var(--container)); margin-inline: auto`.\n\n**1.5 Framework & Tailwind CSS Integration**\n* Use Tailwind CSS as the utility **engine**, with `style.css` as the single Tailwind entry file composing components via `@layer components` and `@apply`. If no build step is available, fall back to hand-authored custom CSS with identical class names.\n* All utility usage must map back to CSS variables and reusable component classes (`.btn`, `.card`, `.input-group`, `.section`, …). HTML carries **only** BEM component classes — no ad-hoc utility class names in markup, no hybrid naming.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Google Fonts `\u003Clink>` tags for Instrument Serif + Instrument Sans and Material Symbols, per 0.3. **Explicitly forbidden: inline SVGs, local icon fonts, icon sprite files, emoji icons.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum 44×44px touch target. Variants: `.btn--primary` (pink fill + `--text-on-accent`), `.btn--ghost` (transparent, hairline border, hover → pink border\u002Ftext\u002Fglow), `.btn--paper` (for use on cream panels: ink fill + paper text).\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer`, 200ms.\n* **Focus:** distinct `:focus-visible` ring via variables (`outline: 2px solid var(--primary); outline-offset: 2px`).\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `.is-loading` — disables interaction (prevents double submits), renders a CSS spinner or animated Material Icon, and must not change button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (icon + label, never color alone). `.btn--danger` must be visually distinct in both themes (crimson, not brand pink) — define it even though this page expects no destructive actions.\n\n**2.2 Cards**\n* **Default:** flexbox layout, subtle border (`--border-default`) + elevation, cream `--bg-secondary` \"paper slide\" panels on the dark canvas with `--text-on-paper` content (flip surfaces per theme).\n* **Hover:** `transform: translateY(-2px)` + `--shadow-md` (or glow on primary cards).\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** define shimmer keyframes + `.card--skeleton` styles in CSS (do not render skeleton cards in static content).\n* **Empty state:** define `.card--empty` fallback layout with a Material icon + guidance text in CSS.\n\n**2.3 Form & Input (Final CTA email capture)**\n* Structure: `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error\u002Ffeedback container with `aria-live=\"polite\"`.\n* **States (all styled):** empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, error text + icon message in feedback container), disabled, read-only.\n* Client-side validation: on submit, show button loading state (~900ms simulated), then success (button success state + confirmation copy + check icon) or error (inline message, focus retained). Feedback never relies on color alone. Reserve feedback height to prevent layout shift.\n\n**2.4 Modal \u002F Popup**\n* No modal is requested for this page — do not add one. If any overlay is ever introduced, it must implement: opening\u002Fopen\u002Floading\u002Fsuccess-error\u002Fclosing states animated via CSS; centered flex container (`align-items: center`); backdrop overlay; Material icon close button; keyboard focus trap; close via `Esc` and overlay click; `--z-modal` stacking.\n\n**2.5 FAQ Accordion**\n* Each item: `\u003Ch3>\u003Cbutton>` with `aria-expanded` \u002F `aria-controls`; Material `expand_more` icon rotating 180° on open; height animated via the CSS grid-rows technique, 250ms; fully keyboard operable with visible focus; items toggle independently.\n\n**2.6 Mobile Nav Dropdown**\n* Hamburger (Material `menu` icon) button with `aria-expanded`\u002F`aria-controls` toggles a panel stacked at `--z-dropdown`; closes on `Esc` and link selection; focus-visible throughout; all touch targets ≥ 44×44px.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` type and spacing; verify zero horizontal overflow from 320px up.\n* **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; honor `prefers-reduced-motion: reduce` by disabling transforms, glows, float animations, and scroll reveals (instant state changes only, keep smooth-scroll off).\n* **Accessibility (a11y):** WCAG AA contrast in both Nocturne and Paper modes (body 4.5:1, large display 3:1). Never communicate state by color alone. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`), one `h1` (hero), logical heading\u002Ffocus order, skip link, full keyboard operability, `aria-live` regions for form\u002Floading feedback.\n* **Mandatory visual feedback:** every click, hover, toggle, accordion open, and submission triggers a visible state change.\n* **Anchor navigation:** smooth in-page scrolling with `scroll-margin-top` offset for the sticky header; active section links may highlight (optional).\n* **Scroll reveal (subtle):** fade + 12px rise on section entrance via IntersectionObserver, ≤ 80ms stagger, 250ms duration, fully disabled under `prefers-reduced-motion`.\n* **Destructive actions:** none expected; if introduced, `.btn--danger` must remain distinct from brand pink in both themes.\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>\u003C\u002Fscript>`). No `onclick`\u002Finline JS handlers.\n* **Naming:** BEM is the single authored-class convention across the entire deliverable — never mix conventions. IDs only for anchors\u002FARIA wiring.\n* **JS scope (exactly this, nothing more):** theme toggle + `localStorage` persistence; mobile nav; FAQ accordion; header scroll state; email-capture validation\u002Ffeedback; scroll reveal.\n* **No unrequested placeholders:** author all copy per 0.5 in English. Footer secondary links use real on-brand labels (`href=\"#\"` acceptable for unlinked legal items).\n* **Performance:** font preconnect, `display=swap`, no layout shift on icon-font load.\n\n---\n\n## 5. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION\n\n**5.1 Header\u002Fnav (sticky):** brand wordmark in Instrument Serif italic; anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with pink underline-grow hover; theme toggle; compact `.btn--primary` CTA (\"Request an invitation\"). Add scrim + shadow class after scroll. Mobile: collapse links into 2.6 dropdown.\n\n**5.2 Hero:** ~92vh flex-centered; eyebrow, h1 display headline with one pink `\u003Cem>` accent word, ≤16-word sub-line, `.btn--primary` + `.btn--ghost` CTA pair; pink radial glow on canvas; optional Material `arrow_downward` scroll cue (reduced-motion safe).\n\n**5.3 Features (3 cards):** section eyebrow + italic h2; three `.card--paper` panels (Material icon, serif italic title, one-line sans body); grid 1→3 columns; hover lift + staggered reveal.\n\n**5.4 How It Works (3 steps):** oversized Instrument Serif italic pink numerals `01 \u002F 02 \u002F 03`, sans step title + one-liner each; connecting hairline between steps (pseudo-element); stacks vertically on mobile.\n\n**5.5 Testimonials:** 3 quotes — large italic serif pull-quotes on cream cards (or featured-quote + two smaller), pink quotation mark accents, attribution in letterspaced sans caps; subtle hover lift.\n\n**5.6 Pricing (3 tiers):** three `.card` tiers: italic serif tier name, large serif price + billing note, 3–4 features with Material `check` icons, CTA per tier. **Middle tier is featured:** `--primary` fill with `--text-on-accent` text, \"Most requested\" badge, `--shadow-glow`; outer tiers use paper panels + `.btn--ghost`.\n\n**5.7 FAQ:** 4–5 items per 2.5; answers ≤ 30 words; eyebrow + italic h2.\n\n**5.8 Final CTA:** full-bleed ink section with pink glow; giant italic headline with pink accent; email capture per 2.3 (input + button inline on desktop, stacked on mobile); success state swaps to check icon + confirmation without layout shift.\n\n**5.9 Footer:** `--bg-ink` full-bleed with `border-top: 2px solid var(--primary)`; wordmark + one-liner; 2–3 secondary link columns (Explore \u002F Company \u002F Legal) in a `nav[aria-label=\"Footer\"]`; Material icon social buttons (44px, `aria-label` each); copyright line.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST (verify before delivering)\n\n1. Zero `style=\"...\"` attributes; zero inline SVGs; BEM classes only in markup.\n2. All 0.2 tokens defined; Nocturne default; toggle works, persists, correct ARIA state.\n3. Every component state in Section 2 styled (hover, focus-visible, active, loading, disabled, success, error).\n4. Keyboard-only pass: skip link, nav, toggle, accordion, form, footer links all operable.\n5. No horizontal scroll at 320px; `clamp(4rem, 8vw, 8rem)` section rhythm present.\n6. `prefers-reduced-motion` honored; every interaction has visible feedback.\n7. All copy authored in English, on-brand, low-density — no lorem ipsum.\n8. Deliverables: exactly `index.html`, `style.css`, `script.js` (single deferred script reference).\n",1791954991062]