# S1-02 — Netflix Skin **Epic:** Demo Pages **Priority:** P1 **Role:** Developer **Depends on:** S1-01 ## User Story As a user, I want a Netflix-style dark UI with hero banner, horizontal card carousels, and top navigation. ## Acceptance Criteria - [ ] Dark background: `--color-surface` → near-black, `--color-surface-alt` → dark gray - [ ] Red primary: `--color-primary` → Netflix red (#E50914) - [ ] Hero section: full-width banner with gradient overlay using `data-opacity` - [ ] Card carousels: horizontal scrollable rows using `.flex` + `overflow-x-auto` - [ ] Cards with hover: `data-scale="1.05"` + `data-elevation="lg"` on hover - [ ] Top nav: logo, search icon, profile avatar using `.flex .justify-between .items-center` - [ ] Footer: multi-column links using `.grid` + `data-columns` - [ ] All styling via `skin.css` variable overrides only — no structural CSS additions beyond skin - [ ] **Light/Dark mode:** skin.css overrides `--default-color-*-light` AND `--default-color-*-dark` variants; demo is coherent and lisible in both modes - [ ] Theme toggle button visible in demo nav bar (sets `data-theme="light|dark"` on ``) ## Validation - [ ] Playwright screenshots: `netflix-light.png` + `netflix-dark.png` - [ ] If css-base gap found: update `dist/skill/css-base/SKILL.md` + redeploy via `/skiller` ## Key CSS Variables to Override ```css --color-surface: oklch(0.1 0 0); --color-surface-alt: oklch(0.15 0 0); --color-primary: oklch(0.55 0.25 27); --color-text: oklch(0.95 0 0); --radius-sm / --radius-md: reduce for sharper corners ```