[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-166-Minimalismo-Fotografico-Elegante":3},"# CODING TASK — Landing Page: \"Elegant Photographic Minimalism\"\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready code for this landing page on the first attempt — no stubs, no TODOs, no partially built sections.\n\n**Project Brief:**\n- **Theme:** Elegant Photographic Minimalism — a fine-art photography studio\u002Fportfolio landing page.\n- **Style:** Elegant, Minimalist, Visual (2026+ Visual Art era). Keywords: photography, portfolio, elegant, minimalist, visual, clean, artistic, sophisticated, focused, serene.\n- **Design Direction:** Total focus on high-quality imagery; elegant serif typography for headings and sans-serif for body copy; discreet navigation; generous white space; smooth gallery transitions; image zoom micro-interactions. Apply Swiss\u002Fminimalist discipline: a strict grid, hairline rules, restrained ornamentation, and a strong typographic hierarchy.\n- **Sections (in this order):** Discreet sticky navigation → Hero (with photo gallery grid) → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n- **Copy:** Write ALL user-facing copy in English. Compose realistic, serene, sophisticated studio copy yourself — lorem ipsum is prohibited.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### **1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives exclusively in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- Target every design property, layout rule, and state via class or ID selectors only.\n- Keep HTML semantic and styling-agnostic (`header`, `nav`, `main`, `section`, `figure`, `footer`); changing the look must never require markup edits.\n\n### **1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` and reference them everywhere — no hard-coded hex values in rules:\n\n```css\n:root {\n  \u002F* Color — Light (default) *\u002F\n  --primary: #000000;         \u002F* Black — primary buttons, wordmark *\u002F\n  --secondary: #000080;       \u002F* Navy — links, quiet accents *\u002F\n  --bg-primary: #fefefe;      \u002F* Page background *\u002F\n  --bg-secondary: #F5F5DC;    \u002F* Beige — alternating section bands *\u002F\n  --text-primary: #333333;    \u002F* Dark gray — headings, body *\u002F\n  --text-secondary: #6b6b6b;  \u002F* Mid gray — captions, meta, footer *\u002F\n  --text-success: #006400;    \u002F* Dark green *\u002F\n  --text-error: #A52A2A;      \u002F* Brick brown — errors, danger *\u002F\n  --border-default: #E0E0E0;  \u002F* Light gray — hairlines, card borders *\u002F\n  --border-error: #A52A2A;\n  --border-success: #006400;\n\n  \u002F* Shape, elevation, motion, space *\u002F\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);\n  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 0.2s ease-in-out;\n  --transition-normal: all 0.4s ease-in-out;\n  --ease-standard: ease-in-out;\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n\n  \u002F* Type *\u002F\n  --font-base: 'Inter', sans-serif;\n  --font-heading: 'Lora', serif;\n}\n```\n\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — in every theme. Example: `.btn--primary { background: var(--primary); color: var(--bg-primary); }` so the pairing inverts automatically in dark mode.\n- **Near-white rule:** wherever white is needed, use `#fefefe`, never `#ffffff`. *Exception clause: although the source palette lists `#FFFFFF`, this rule overrides it.*\n- The source spec's anchors must appear verbatim in spirit: headings use `font-family: 'Lora', serif`; the nav uses `border-bottom: 1px solid var(--border-default)`; global state changes use `transition: var(--transition-normal)` (0.4s ease-in-out); the class names `.gallery-grid`, `.image-overlay`, and `.nav-discreet` must exist.\n\n### **1.3 Mandatory Dark Mode**\n- Define dark tokens under both a `.dark` class selector and `@media (prefers-color-scheme: dark)`, e.g.: `--bg-primary: #0f0f0f; --bg-secondary: #1c1b17; --text-primary: #f2f2f2; --text-secondary: #a8a8a8; --border-default: #333333; --primary: #f2f2f2; --secondary: #a9b6e8; --text-success: #7fc98a; --text-error: #e59a9a;` (adjust lightness for WCAG AA while preserving hue). Set `color-scheme` accordingly.\n- Background\u002Ftext variables must switch with zero HTML restructuring. Persist choice in `localStorage`, falling back to `prefers-color-scheme` on first visit; provide a visible toggle with correct `aria-pressed` and dynamic `aria-label`.\n- *Exception clause: the source style spec excluded dark mode; dark mode is nonetheless mandatory under these architecture rules — implement it fully, with light mode as the default presentation.*\n\n### **1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities). Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a code comment (e.g., card rows may use `stretch` for equal heights).\n- Mobile-first: rows collapse to columns below ~768px; no horizontal scrolling at any width down to 320px.\n\n### **1.5 Framework: Tailwind CSS**\n- Load Tailwind via the Play CDN (`\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>` — an external reference, permitted; it is not an inline script block). Use Tailwind utilities in markup **for layout only** (flex, items-center, gap, padding, responsive prefixes).\n- All visual design — colors, typography, radii, shadows, states — lives in `style.css` as CSS variables and reusable component classes (`.btn`, `.card`, `.nav-discreet`, `.gallery-grid`, `.image-overlay`, `.input-group`). Never encode colors via Tailwind arbitrary values; reference `var(--...)`.\n\n### **1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: Google Fonts — **Lora** (400\u002F500\u002F600 + italic) for all headings via `--font-heading`, **Inter** (400\u002F500) for body via `--font-base`. Include via `\u003Clink>` tags.\n- Icons: Google Material Symbols (Outlined, light weight). Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### **2.1 Button (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary = black fill \u002F near-white text (inverted in dark); secondary = 1px `var(--border-default)` outline; danger uses `--text-error`\u002F`#A52A2A` and must stay distinct in both themes.\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus:** distinct ring via `outline`\u002F`box-shadow` using tokens. **Active:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, blocks double-clicks, shows a CSS-animated spinner without changing button dimensions. **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states using `--text-success` \u002F `--text-error`.\n\n### **2.2 Card (`.card`)**\n- **Default:** flexible flexbox layout, `--bg-primary` surface, 1px `var(--border-default)` border, `--radius-md`.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md`. **Focus-within:** border highlight when a child link\u002Fbutton is focused.\n- **Loading (skeleton):** shimmer keyframes (`.is-skeleton`) applied to gallery\u002Ffeature images and the lightbox stage while loading — no layout jumps.\n- **Empty state:** `.card--empty` pattern with a Material icon (e.g., `photo_library`) and guidance text; apply wherever content could render empty (e.g., failed image loads).\n\n### **2.3 Form & Input (`.input-group`)**\n- Structure: flex container wrapping a visible `\u003Clabel>`, the input, and a dedicated error-feedback element.\n- **States:** empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, error icon, message announced in an `aria-live` region), disabled, read-only.\n\n### **2.4 Modal \u002F Lightbox (`.lightbox`)**\n- **States:** opening (fade + scale in), open, loading (skeleton\u002Fspinner while the full image loads), error (Material `broken_image` icon + message if the image fails), closing (animated out) — all via CSS transitions using `--transition-normal`.\n- **UX:** fixed backdrop (`rgba(0,0,0,0.8)`), centered flex container (`align-items: center; justify-content: center`), `z-index: var(--z-modal)`, `role=\"dialog\"` + `aria-modal=\"true\"`, Material `close` icon button with `aria-label`, focus trapped inside, focus returned to the trigger on close, body scroll locked, closes via `Esc` and overlay click. Include prev\u002Fnext Material icon buttons with `aria-label`s and arrow-key support for smooth gallery transitions.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`, breakpoints without overflow; set image dimensions\u002Faspect-ratio to prevent layout shift.\n- **Smooth animations:** every state change transitions with `transition: var(--transition-normal)`; fully disabled under `prefers-reduced-motion: reduce`.\n- **Accessibility:** WCAG AA contrast in both light and dark modes; never communicate state by color alone (pair with icons\u002Ftext); semantic HTML5; correct ARIA roles\u002Flabels on the accordion, lightbox, mobile menu, and theme toggle; logical focus order; complete keyboard operability; `aria-live` regions for form feedback and loading states.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible change — image zoom on hover (`transform: scale(1.05)` inside `overflow: hidden` frames), card lifts, link underline reveals, button state shifts.\n- **Destructive actions:** `.btn--danger` visually distinct in both themes.\n\n---\n\n## 4. PAGE SECTION REQUIREMENTS\n\n### **4.1 Discreet Navigation (`.nav-discreet`)**\nSticky top bar (~64–72px), `background: var(--bg-primary)`, `border-bottom: 1px solid var(--border-default)`. Flex row, `align-items: center`, `justify-between`: serif wordmark; anchor links (Features, Process, Testimonials, Pricing, FAQ) in small uppercase sans-serif with letter-spacing and a subtle hover underline; theme toggle (Material `dark_mode`\u002F`light_mode`, `aria-pressed`, dynamic `aria-label`); compact \"Book a Session\" `.btn--primary`. Mobile: hamburger button (`aria-expanded`, `aria-controls`) opens a dropdown panel (`var(--z-dropdown)`) with vertical links; closes on `Esc`, link click, and outside click; focus moves in on open and returns on close. Enable smooth scrolling with `scroll-margin-top` on sections.\n\n### **4.2 Hero + Gallery Grid**\nTwo-column flex (`align-items: center`), collapsing to a column on mobile. Left: small uppercase overline, large serif `clamp()` headline, supporting paragraph, and a CTA row (primary \"View the Gallery\" + outlined \"Book a Session\"). Right: `.gallery-grid` — four photographs arranged 2×2 via flex-wrap, each a `\u003Cfigure>` acting as a button that opens the lightbox (`aria-label=\"Open photograph: \u003Ctitle>\"`). Each item has an `.image-overlay` (caption in serif italic + sans meta + Material `zoom_in` icon) that fades in on hover\u002Ffocus while the image scales to 1.05. Gentle fade-in entrance animation, reduced-motion safe.\n\n### **4.3 Features — 3 Cards**\nSection header pattern (uppercase overline + serif `h2` + short intro), then three `.card` components in a flex row (documented `stretch` exception for equal heights) → column on mobile. Each card: photograph with zoom micro-interaction, Material icon, serif title, sans description, and a \"Learn more\" text link with arrow icon (drives `:focus-within`). Suggested services: Fine-Art Portraits, Editorial & Events, Print & Gallery Collections.\n\n### **4.4 How It Works — 3 Steps**\nThree steps in a flex row → column, separated by hairline rules. Each step: oversized serif numeral (\"01\", \"02\", \"03\") in `--text-secondary`, step title, description. Content: Book a Session → The Photoshoot → Receive Your Gallery.\n\n### **4.5 Testimonials**\nFull-width band on `--bg-secondary`. Three quote cards: large Lora italic quote, attribution (name + role in small sans), optional circular portrait. Cards follow the `.card` spec (hover lift, focus-within).\n\n### **4.6 Pricing — 3 Tiers**\nThree `.card` pricing tiers: \"Essential\", \"Signature\" (featured), \"Collector\". Featured tier: distinct border or `--shadow-md`, slight elevation, and a small uppercase \"Most Popular\" pill. Each tier: serif name, large serif USD price with period, feature list with Material `check` icons, and a CTA button (featured = `.btn--primary`, others = `.btn--secondary`). Clicking a CTA demonstrates loading → success feedback announced via `aria-live`.\n\n### **4.7 FAQ Accordion**\n5–6 realistic questions (sessions, delivery timelines, print licensing, rescheduling, travel). Each item: `h3` > button (`aria-expanded`, `aria-controls`) + panel (`role=\"region\"`, `aria-labelledby`, hidden toggle). Material `expand_more` icon rotates 180° on open; height\u002Fopacity animates via CSS. Keyboard operable; one panel open at a time.\n\n### **4.8 Final CTA**\nFull-width band on `--bg-secondary` (or a full-bleed photo with dark overlay — text must keep AA contrast). Serif headline, short copy, and an email-capture `.input-group`: visible label, email input with all states from 2.3, `.btn--primary` submit. On submit: invalid email → error border + icon + `aria-live` message; valid → button loading (~1s) → success state with a `--text-success` confirmation message in the `aria-live` region. Add a secondary \"write to hello@studio.com\" mailto link.\n\n### **4.9 Footer with Secondary Links**\n`border-top: 1px solid var(--border-default)`. Flex-wrap layout: brand column (serif wordmark, one-line tagline, Material Symbol social icons with `aria-label`s) plus two columns of secondary links (\"Explore\": Features, Process, Pricing, FAQ; \"Studio\": About, Journal, Contact, Privacy, Terms). Bottom bar: © 2026 line in `--text-secondary` and a back-to-top link. All links show visible focus rings.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. The HTML contains exactly one project script — `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — plus external references only (Google Fonts, Material Symbols, Tailwind CDN). No inline `\u003Cstyle>` or `\u003Cscript>` blocks.\n- **script.js scope:** theme toggle with `localStorage` persistence + `prefers-color-scheme` fallback, mobile menu, FAQ accordion, lightbox with focus trap and keyboard navigation, form validation\u002Ffeedback, skeleton toggles on image load.\n- **Naming convention:** one consistent convention — BEM (`.nav-discreet__link`, `.gallery-grid__item`, `.card__title`, `.btn--primary`, `.input-group__error`, `.faq-item__panel`). Tailwind utilities are permitted for layout only and must never duplicate a component class.\n- **Imagery:** no assets were supplied, so use `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cwidth>\u002F\u003Cheight>` placeholders with descriptive `alt` text and fixed aspect ratios. All copy must be real, elegant English — lorem ipsum is prohibited.\n- **Definition of Done:** all nine sections fully built; both themes pass AA contrast; keyboard-only navigation works end to end; no horizontal scroll at 320px; every interactive element has hover, focus, and active feedback; reduced-motion respected; zero inline styles.\n",1791954982668]