[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-551-Dark-Portfolio-Hero":3},"# Coding Agent Prompt — \"Dark Portfolio Hero\" Landing Page\n\n## 0. Project Brief\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page below in a single attempt. All user-facing copy, comments, class names, and file names must be in **English**.\n\n**Product:** \"Dark Portfolio Hero\" — a premium 2024–2026 creative-portfolio landing page for a fictional creative developer. Mood: contemplative, dark, editorial-premium.\n\n**Stack:** Vanilla HTML\u002FCSS\u002FJS (no build step). GSAP 3 + ScrollTrigger via CDN. hls.js via CDN. Google Fonts (Inter + Instrument Serif). Google Material Symbols (Rounded). Three files: `index.html`, `style.css`, `script.js`.\n\n**Sections (in this exact order):** animated loading screen → floating pill navbar → Hero (HLS video background) → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (with email capture) → Footer (secondary links).\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, and presentation HTML attributes.\n* Style only via class\u002FID selectors. HTML must stay semantic (`header`, `nav`, `main`, `section`, `footer`, `h1`–`h3`) and visually agnostic — re-theming must require CSS edits only.\n* Organize `style.css` with native CSS `@layer` ordering: `tokens`, `base`, `layout`, `components`, `utilities`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine every token in `:root` exactly as follows (add nothing that contradicts these values):\n\n```css\n:root {\n  \u002F* Colors *\u002F\n  --primary: #89AACC;\n  --secondary: #4E85BF;\n  --bg-primary: #0a0a0a;\n  --bg-secondary: #141414;\n  --text-primary: #f5f5f5;\n  --text-secondary: #888888;\n  --text-success: #5fd39a;\n  --text-error: #ff7a7a;\n  --border-default: #1f1f1f;\n  --border-error: rgba(255, 122, 122, 0.5);\n  --border-success: rgba(95, 211, 154, 0.5);\n  --accent-gradient: linear-gradient(90deg, #89AACC, #4E85BF);\n  --glow: rgba(137, 170, 204, 0.35);\n  --video-tint: #1a2a4a;\n  --overlay-dark: rgba(10, 10, 10, 0.2);\n\n  \u002F* Typography *\u002F\n  --font-base: 'Inter', sans-serif;\n  --font-display: 'Instrument Serif', serif;\n\n  \u002F* Radius \u002F Shadow *\u002F\n  --radius-sm: 6px;\n  --radius-md: 12px;\n  --radius-lg: 20px;\n  --radius-pill: 999px;\n  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);\n  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);\n\n  \u002F* Spacing \u002F Motion *\u002F\n  --spacing-gap: clamp(1.25rem, 3vw, 2rem);\n  --transition-fast: 150ms;\n  --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n  \u002F* Elevation *\u002F\n  --z-navbar: 100;\n  --z-dropdown: 200;\n  --z-modal: 300;\n  --z-toast: 400;\n  --z-loading: 500;\n}\n```\n* **Gradient-border technique (reused everywhere):** composite backgrounds — `linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box` plus a `border-box` layer that is `var(--border-default)` at rest and `var(--accent-gradient)` on hover\u002Ffocus, with `border: 1px solid transparent`. On hover, also apply `box-shadow: 0 0 16px var(--glow)`.\n* **Contrast pairing:** light text tokens (`--text-primary`) pair only with dark backgrounds (`--bg-primary`, `--bg-secondary`); gradient-filled elements use dark `#0a0a0a` text on the blue gradient.\n\n**1.3 Dark Mode (Dark-Only Theme — Explicit Exception)**\n* The dark palette above is the global default and **only** theme; it fully satisfies the mandatory dark-mode rule at `:root`.\n* **Exception clause:** the source specification marks light mode as \"Not Recommended\" — therefore no light palette, no `.dark` class, no `prefers-color-scheme` branching, no theme toggle, and no `localStorage` theme persistence are required.\n* Accessibility of the dark theme is still mandatory: all text must meet WCAG AA contrast against `#0a0a0a` \u002F `#141414`.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `stretch` for equal-height pricing cards).\n* Mobile-first: card\u002Fstep\u002Ftier rows use `flex-wrap` with `flex: 1 1 320px` children and collapse to a single column below ~768px. **Never** allow horizontal scrolling at any viewport width.\n* Use fluid `clamp()` sizing for all headline type. Section anchors get `scroll-margin-top` to offset the fixed navbar.\n\n**1.5 Styling Approach — Clean Custom CSS + BEM**\n* Use clean, hand-written custom CSS (no Tailwind, no framework), per the custom-CSS option of the architecture standard; the source spec supplies a custom CSS token block, so custom CSS is the correct choice.\n* **One naming convention only: BEM** (`block__element--modifier`), e.g., `.hero__headline`, `.pricing-card--featured`, `.btn--primary`. Never mix conventions, never invent classes without markup.\n\n**1.6 Typography & Icons (Google Only — Mandatory)**\n* Google Fonts via `\u003Clink>` with `preconnect`: **Inter** (400, 500, 600) for body\u002FUI, **Instrument Serif** (400 + italic) for display headlines. All `h1`\u002F`h2`\u002Flarge numerals use `--font-display` in *italic*; everything else uses `--font-base`.\n* Icons: **Google Material Symbols Rounded** via the official stylesheet, used as ligature text (e.g., `check`, `expand_more`, `format_quote`, `menu`, `close`, `progress_activity`, `mail`, `alternate_email`, `link`, `code`). Set `font-variation-settings` for consistent rendering.\n* **Explicitly forbidden:** raw inline SVGs, local icon files, emoji icons, external image files. Avatars are CSS gradient circles with text initials; all decorative visuals are CSS gradients.\n\n---\n\n## 2. Component & Section Specifications\n\n**2.1 Button System (`.btn`)**\n* **Base:** `display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-pill)`, Inter 500, `transition: all var(--transition-fast) var(--ease-standard)`.\n* **Variants:** `.btn--primary` (surface background + gradient-border hover technique per 1.2 — this is the CTA style), `.btn--ghost` (transparent, stroke border), `.btn--danger` (defined with `--text-error`\u002F`--border-error` tokens for completeness).\n* **States (all via CSS classes\u002Fattributes):** hover (gradient border + glow + `cursor: pointer`), `:focus-visible` (2px `--primary` outline with offset — never remove), active (`transform: scale(0.97)`), `.is-loading` (swap label for rotating Material Symbol `progress_activity` spinner; `pointer-events: none`; `aria-busy=\"true\"`; dimensions unchanged), `[disabled]` (`opacity: 0.5`, grayscale, `cursor: not-allowed`), `.is-success` \u002F `.is-error` (driven by `--text-success` \u002F `--text-error`).\n\n**2.2 Card System (`.card`)**\n* **Default:** flexbox layout, `background: var(--bg-secondary)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`, generous padding.\n* **Hover:** `transform: translateY(-2px)`, `box-shadow: var(--shadow-md)`, border brightens toward `--glow`.\n* **Focus-within:** border highlights when any child link\u002Fbutton receives focus.\n* **Icon chip:** 44×44 rounded square with the gradient-ring technique containing one Material Symbol.\n\n**2.3 Form & Input (Final CTA email capture)**\n* **Structure:** `.input-group` — flex column (documented exception to the center rule) wrapping a `\u003Clabel>`, an `\u003Cinput type=\"email\">`, and a dedicated `.input-group__feedback` container.\n* **States:** empty, focus (gradient ring + glow), filled, valid (`--border-success` + `check` icon), invalid (`--border-error`, error text in `--text-error`, `error` icon, message linked via `aria-describedby`), disabled, read-only.\n* **Behavior:** on submit, `preventDefault()`, validate with an email regex; invalid → inline error rendered into an `aria-live=\"polite\"` region; valid → submit button enters `.is-loading` (blocks double-clicks) → `.is-success` with a success message announced via the same live region. Never rely on color alone — pair every error\u002Fsuccess with icon + text.\n\n**2.4 Loading Screen (`.loader`)**\n* Fixed full-viewport overlay, `z-index: var(--z-loading)`, `background: var(--bg-primary)`, flex column centered; lock body scroll (`overflow: hidden`) while active.\n* **Counter:** `000` → `100` animated via `requestAnimationFrame` over ~2.2s, three zero-padded digits (`font-variant-numeric: tabular-nums`), large Instrument Serif italic.\n* **Rotating words:** \"Design\" → \"Create\" → \"Inspire\", cross-fading with a slight y-shift every ~0.9s. Implement with vanilla JS class toggling + CSS opacity\u002Ftransform transitions — **do not** use Framer Motion\u002FAnimatePresence (vanilla only).\n* **Progress bar:** thin track with fill using `var(--accent-gradient)` and `box-shadow: 0 0 12px var(--glow)`, width synced to the counter.\n* **Exit:** at 2.7s total, fade out over 0.6s (opacity + slight scale), then remove from the DOM, set `aria-hidden`, and restore body scroll.\n* **Resilience:** all \"initially hidden\" states for page content must be applied by JS, never CSS — if JS fails, content must be fully visible. Under `prefers-reduced-motion`, shorten to a simple 0.3s fade.\n\n**2.5 Floating Pill Navbar (`.nav`)**\n* Fixed top, horizontally centered pill container: `background: rgba(20, 20, 20, 0.7)`, `backdrop-filter: blur(12px)`, 1px `--border-default`, `--radius-pill`, `z-index: var(--z-navbar)`.\n* **Logo:** 36×36 circle with the gradient-ring technique, surface interior, gradient monogram; brand name beside it.\n* **Links:** pill-shaped anchors to each section; hover = surface background; active state (gradient text + pill background) driven by `IntersectionObserver` as the user scrolls, with `aria-current` managed in JS.\n* **\"Say hi\" button:** small `.btn--primary`.\n* **Mobile (\u003C768px):** collapse links behind a hamburger (Material Symbol `menu`) opening a dropdown panel (`--z-dropdown`); toggle has `aria-expanded` + `aria-controls`; `Esc` closes; focus returns to the toggle; panel uses the same blurred surface styling.\n* Entrance: GSAP fade + `y: -20 → 0` after the loader completes.\n\n**2.6 Hero (`.hero`)**\n* `min-height: 100svh`, flex column centered, centered text.\n* **Background layers (bottom to top):** (1) HLS `\u003Cvideo>` — absolute, `inset: 0`, `object-fit: cover`, `muted`, `autoplay`, `loop`, `playsinline`, `preload=\"metadata\"`, `aria-hidden=\"true\"`, `tabindex=\"-1\"`. The video is a ~17-second looping abstract animation of dark fluid: organic waves and gradients in deep navy `#1a2a4a` and black, smooth continuous motion, no text or objects, ~2:1 aspect. (2) Black overlay `var(--overlay-dark)` (20%). (3) Bottom fade: a 12rem (`h-48` equivalent) element with `linear-gradient(to top, var(--bg-primary), transparent)` melting the video into the page background.\n* **HLS implementation:** load hls.js from CDN; in `script.js` define `const HLS_URL = '...'; \u002F\u002F PLACEHOLDER — replace with the real .m3u8 stream`; support native HLS on Safari via `canPlayType('application\u002Fvnd.apple.mpegurl')`; on error or before playback, show a CSS fallback — layered radial gradients in `--video-tint` with a slow drift keyframe animation (static under reduced motion).\n* **Content:** small letter-spaced eyebrow label; massive Instrument Serif *italic* headline, `clamp(2.75rem, 8vw, 7rem)`; role-cycling line; one short muted sub-sentence; two CTAs (\"View my work\" = `.btn--primary`, \"Say hi\" = `.btn--ghost`); scroll indicator.\n* **GSAP entrance (after loader):** timeline with `power3.out` — headline `y: 50 → 0`, opacity `0 → 1`, duration `1.2s`; eyebrow, roles, copy, CTAs, navbar, and scroll indicator staggered after it.\n* **Role cycling:** array `[\"Creative Developer\", \"UI Designer\", \"Motion Artist\"]`; every 2s swap with fade-in (opacity + `translateY(8px)` transition); the cycling element is `aria-hidden=\"true\"` with a static screen-reader-only alternative listing all roles; pause cycling under `prefers-reduced-motion`.\n* **Scroll indicator:** thin vertical track with a dot animating `translateY` in a 1.5s infinite loop (`@keyframes scroll-down`), `aria-hidden=\"true\"`, hidden under reduced motion, \"Scroll\" label available to screen readers.\n\n**2.7 Features — 3 `.card`s**\n* Flex row (wrap) → column on mobile. Each card: gradient-ring icon chip (e.g., `auto_awesome`, `animation`, `devices`), Inter 600 title, muted description. Hover\u002Ffocus-within per 2.2. GSAP ScrollTrigger reveal: `y: 30 → 0`, opacity fade, `stagger: 0.1`.\n\n**2.8 How It Works — 3 steps**\n* Three flex columns; step numerals `01 \u002F 02 \u002F 03` in Instrument Serif italic with gradient text (`background-clip: text`); title + muted copy per step; a gradient dashed connector line between steps on desktop (pseudo-element), hidden on mobile. ScrollTrigger reveal.\n\n**2.9 Testimonials**\n* Three `.card`s: `format_quote` Material Symbol in gradient, quote text, author row (flex, centered) with a 44px gradient-ring avatar circle containing text initials (no images), name in `--text-primary`, role in `--text-secondary`. Hover per 2.2.\n\n**2.10 Pricing — 3 tiers**\n* Three flex columns (equal height via documented `stretch` exception). Middle tier `.pricing-card--featured`: gradient border (composite technique), \"Most popular\" pill badge with gradient background and dark `#0a0a0a` text, slight elevation.\n* Each tier: name, large Instrument Serif italic price + period, feature list with `check` Material Symbols in gradient, one `.btn` CTA (featured tier uses a gradient-filled button with dark text; others use `.btn--primary`).\n\n**2.11 FAQ — accessible accordion**\n* 5–6 items. Each: a `\u003Cbutton>` (min-height 44px, flex, `justify-content: space-between`, centered) containing the question and an `expand_more` icon that rotates 180° when open; `aria-expanded` + `aria-controls`; panel with `role=\"region\"` + `aria-labelledby`, animated via CSS `grid-template-rows: 0fr → 1fr` transition; JS enforces one-open-at-a-time; fully keyboard operable.\n\n**2.12 Final CTA**\n* Section with a soft radial `--glow` backdrop; massive Instrument Serif italic headline; short copy; the email capture form per 2.3 plus a `.btn--primary` \"Get in touch\" mailto link. All feedback announced via `aria-live`.\n\n**2.13 Footer**\n* Top row: brand (logo + tagline) on the left; secondary link columns on the right — \"Company\" (About, Blog, Careers, Contact), \"Resources\" (Portfolio, Process, FAQ, Press), \"Social\" (44×44 icon buttons: `mail`, `alternate_email`, `link`, `code`, each with `aria-label`).\n* Bottom bar: copyright with dynamic year via JS, \"Back to top\" smooth-scroll link, muted text.\n* Link hover: gradient text or animated underline; visible `:focus-visible` rings everywhere.\n\n**2.14 Modals**\n* None are required. Do not add any modal or popup.\n\n---\n\n## 3. Core UX & Micro-Interaction Rules\n\n* **Responsive by default:** fluid `clamp()` type, breakpoints ~640\u002F768\u002F1024px, zero horizontal overflow at any width.\n* **Smooth animations:** every state change uses `transition: var(--transition-fast|normal) var(--ease-standard)`. Under `prefers-reduced-motion`: disable all loops (scroll dot, role cycling, video fallback drift — pause the video too), and make GSAP set final states instantly via `gsap.matchMedia()`.\n* **Accessibility:** semantic landmarks; a skip-to-content link; every `\u003Csection>` has an `aria-labelledby` heading (`h2` in Instrument Serif italic); logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, success, and loading feedback; never communicate state by color alone (always icon + text); AA contrast throughout the dark theme.\n* **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n* **Destructive actions:** none on this page, but `.btn--danger` and its error tokens must still be defined in CSS.\n* **JS resilience:** scroll-reveal initial states are applied by JS only, so content is never hidden if GSAP or JS fails to load.\n\n---\n\n## 4. Deliverables & Output Format\n\n* **Files:** `index.html`, `style.css`, `script.js`. `script.js` loads once via `defer`; GSAP, ScrollTrigger, and hls.js load via CDN `\u003Cscript>` tags before it. No inline `\u003Cscript>` logic, no inline styles, no `\u003Cstyle>` blocks.\n* **Naming:** BEM exclusively, consistent across all three files.\n* **Copy:** write realistic, premium, on-brand English copy for a creative developer portfolio — no lorem ipsum. The only permitted placeholder is the HLS stream URL, clearly marked `\u002F\u002F PLACEHOLDER`.\n* **No external assets:** no image files, no inline SVGs — only Google Fonts, Google Material Symbols, CSS gradients, and the HLS video.\n* Output the complete, runnable code for all three files in a single response.\n",1791954989059]