Aperture

1. COLORS — Set the page background to #0A0A0A (gallery black), secondary panels and lightbox chrome to #121212, card/surface areas to #161616, primary text to #F4F4F2 (warm white), muted/caption text to #8A8A88, thin dividers as hairlines at rgba(244,244,242,0.14), card and image borders at rgba(244,244,242,0.10)–rgba(244,244,242,0.12), and image overlay scrims at rgba(10,10,10,0.55)–rgba(10,10,10,0.85). The primary action color is #F4F4F2 (white on black); there is no color accent whatsoever — all emphasis comes from white text, scale contrast, and full-bleed photography. The nav uses a gradient background: linear-gradient(180deg, rgba(10,10,10,0.8), transparent). Overall palette mood: a lightless darkroom where luminous prints float against the void. 2. TYPOGRAPHY — Load two Google Fonts families: "Inter" (weights 400, 500, 600) and "JetBrains Mono" (weights 400, 500). H1 (Display): Inter 96px / weight 600 / line-height 0.9 / letter-spacing -0.05em. H2 section heads: Inter 48px / weight 600 / line-height 1.05 / letter-spacing -0.03em. H2 CTA variant: Inter 64px / weight 600 / line-height 1.0 / letter-spacing -0.04em. H3: Inter 28px / weight 600 / line-height 1.2 / letter-spacing -0.02em. H4 / service titles: Inter 24px / weight 600 / letter-spacing -0.01em. Body-L: Inter 18px / weight 400 / line-height 1.6 / letter-spacing 0. Body: Inter 16px / weight 400 / line-height 1.6 / letter-spacing 0. Eyebrow / section labels: JetBrains Mono 11px / weight 500 (or 600) / letter-spacing 0.10em / UPPERCASE. Caption / meta: JetBrains Mono 12px / weight 500 / letter-spacing 0.04em–0.08em / UPPERCASE. Index numerals (service cards): JetBrains Mono 12px / letter-spacing 0.04em. Section header h2 labels (e.g. "Featured Series") use JetBrains Mono 14px weight 600 letter-spacing 0.10em UPPERCASE in muted grey #8A8A88 — not Inter. No gradient text; no color on type; emphasis via scale and weight only. 3. PAGE SECTIONS — Build these sections in strict order: sticky nav → hero (full-bleed 100vh) → featured series (single wide feature image with overlay caption) → gallery grid (masonry 3-column, 9 photos) → clients/press (muted logo name list) → about (2-col grid: portrait image + bio text) → services/commissions (3-col grid with mono index, title, description, price-from) → testimonial (centered single large quote block) → CTA/contact (centered h2 + paragraph + primary button) → footer. The hero must contain: full-bleed background image, gradient scrim overlay, photographer name as h1 at bottom-left, tagline paragraph, and a mono location caption (e.g. "↓ Salt Flats, Bolivia — 35mm, 2024"). The gallery section must contain exactly 9 photo cards with varied aspect ratios (3/4, 1/1, 4/5 repeating) each showing a hover caption with title and mono focal-length metadata. The clients section must list exactly 5 publication/brand names. The services section must have 3 cells (Editorial, Portrait, Documentary) with mono index numbers 01–03 and price-from labels. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The most visually distinctive element is the masonry gallery grid where each photo card reveals a bottom-anchored caption overlay on hover. The overlay uses: background: linear-gradient(transparent, rgba(10,10,10,0.85)); positioned absolute bottom:0 left:0 right:0; padding: 16px; opacity: 0 at rest, opacity: 1 on hover; transition: opacity 0.3s (no cubic-bezier needed, just ease). The photo image itself scales on hover: transform: scale(1.04); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1). Cards have: border-radius: 0px; overflow: hidden; cursor: pointer; break-inside: avoid in CSS columns layout. The caption title is Inter 14px weight 600, the meta is JetBrains Mono 11px color rgba(244,244,242,0.6). This defines the aesthetic because it exemplifies the core philosophy: the image is everything, information disappears until invited. 5. COMPONENT SPECS — Primary button (.btn-w): background #ffffff; color #0A0A0A; padding 16px 36px; border-radius 0px; font-family Inter; font-size 15px; font-weight 600; border: none; hover state: transform translateY(-2px) + opacity 0.9; transition: transform 0.15s, opacity 0.2s. There is no styled secondary button in the HTML — ghost links in the nav serve that role. Cards (photo items .ph): border-radius 0px; overflow hidden; margin-bottom 20px; no explicit border; no box-shadow (depth from black negative space only). Service cells (.serv-cell): background #0A0A0A; padding 40px 32px; separated by 1px gaps using the parent grid background set to rgba(244,244,242,0.12) with gap:1px — this creates hairline dividers between cells without actual borders. Nav: height 64px; position fixed; top 0; background linear-gradient(180deg, rgba(10,10,10,0.8), transparent); mix-blend-mode: difference; no blur/backdrop-filter; transitions to fully transparent over full-bleed imagery naturally via the gradient. 6. COPY VOICE — This brand speaks for a seasoned editorial and documentary photographer whose work appears in Kinfolk, The New Yorker, and National Geographic — the audience is art directors, editorial clients, and brands who need images that feel discovered, not staged. Their core pain point: finding a photographer whose restraint matches their taste, who won't over-produce or over-direct. Exact example headlines: "I photograph the moment before it becomes a story." / "Twenty years behind the frame." / "Let's make something." / "My approach is patient. I'd rather wait three hours for the light than stage it." Example sublines: "Editorial, documentary, and portrait photography." / "Available for editorial, portrait, and documentary commissions worldwide. Tell me about the project." Banned generic phrases specific to photography: "Capturing your special moments", "We bring your vision to life", "Premium photography services", "Book your session today", "Your story deserves to be told." 7. BACKGROUND ZONES — There are three distinct background levels. Zone 1 (#0A0A0A): used for the page body, hero section, gallery section, about section, services cells, CTA section — the dominant gallery-black ground. Zone 2 (#121212): used for lightbox chrome, the about portrait image placeholder, and secondary panels. Zone 3 (#161616): used for thumbnail surfaces, input fields, and card backgrounds when elevated above Zone 1. The nav gradient is: linear-gradient(180deg, rgba(10,10,10,0.8), transparent) — bleeds edge-to-edge across the full viewport width. The hero gradient scrim is: linear-gradient(180deg, rgba(10,10,10,0.3), transparent 30%, transparent 60%, rgba(10,10,10,0.85)) — full bleed, ensures bottom-left text stays legible over any photograph. The featured series overlay is: linear-gradient(transparent, rgba(10,10,10,0.8)) — anchored to the bottom of the 21:9 feature image. No texture, no pattern — negative space is the only texture. 8. SCROLL ANIMATIONS — All animated elements carry the class .reveal with initial state: opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1). On intersection (threshold 0.1), add class .in-view which sets opacity: 1; transform: none. Stagger siblings via data-delay attributes: data-delay="1" → transition-delay: 0.1s; data-delay="2" → transition-delay: 0.2s; data-delay="3" → transition-delay: 0.3s. Gallery cards stagger in groups of 3 (columns): first card delay 0, second 0.1s, third 0.2s. Feature image reveals as a single unit. The featured series image has an additional hover scale: transform scale(1.02) over 0.8s cubic-bezier(0.16,1,0.3,1). Once in-view, the IntersectionObserver unobserves the element (one-shot reveal). Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Desktop breakpoint: ≥1024px. Tablet: 768px–1023px. Mobile: ≤767px. Gallery masonry: 3 columns (desktop, column-gap 20px) → 2 columns (tablet) → 1 column (mobile, full-width photos). H1 hero name: 96px (desktop) → 60px (tablet) → 42px (mobile). H2 CTA: 64px (desktop) → unchanged (tablet) → 38px (mobile). Testimonial quote: 32px (desktop) → unchanged (tablet) → 24px (mobile). Series title overlay: 36px (desktop) → unchanged (tablet) → 24px (mobile). About section grid (1fr 1.3fr): collapses to 1fr on tablet (portrait image hidden via display:none on tablet+); stacks to single column on mobile. Services grid (repeat(3,1fr)): collapses to 1fr on tablet and mobile. Nav links (.nl): hidden on mobile (display:none). Container padding (.wrap): 0 80px on desktop — reduce to 0 24px on mobile. Primary button remains inline (not forced full-width) but sits centered in the CTA section. 10. CRITICAL CSS — Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally include the full CSS variable block in :root: --bg:#0A0A0A; --surface:#121212; --text:#F4F4F2; --muted:#8A8A88; --border:rgba(244,244,242,.12); --font-b:'Inter',sans-serif; --font-m:'JetBrains Mono',monospace. The .reveal / .in-view animation system must be defined in the main <style> block before the body override tag, not inline. The IntersectionObserver script must be deferred until after DOM parse — place it just before </body>. 11. SEMANTIC HTML — Document structure: <header> is not used as a wrapper; instead <nav> sits directly as a top-level child of <body> before <main> (matching the HTML reference). <main> contains one <section> per block with descriptive class names: .hero, .series-sec, .gallery-sec, .clients-sec, .about-sec, .serv-sec, .testi-sec, .cta-sec. <footer> closes the document. Exactly one <h1> in the hero section (the photographer name). Every photograph must be wrapped in a <figure> with a <figcaption> containing JetBrains Mono metadata. SEO: <title> format "Aperture — [Photographer Name], Photographer" (≤60 chars). <meta name="description"> example: "The portfolio of Daniel Reyes — editorial, documentary, and portrait photography. Where the work fills the frame and the interface disappears." (≤155 chars). og:image should reference the hero/signature photograph at 1200×630px. Every <img> gets a descriptive alt covering subject, setting, and mood (e.g. alt="Portrait of a woman in golden afternoon light, Lisbon backstreet, 2024"). 12. FOOTER STRUCTURE — Single-row footer with two columns separated by justify-content: space-between inside a flex container (.foot-inner). Left column: copyright/fine print in JetBrains Mono 12px color #8A8A88 — format "© 2025 [Name] Photography · [City]". Right column: horizontal list of 4 navigation/social links (Instagram, Behance, Prints, Contact) in Inter 13px color #8A8A88 with hover transition to #F4F4F2 over 0.2s; list-style none; gap 24px. Footer container: border-top 1px solid rgba(244,244,242,0.12); padding 48px 0. No newsletter input. No social icons — text links only. No logo repeat in the footer. The footer uses .wrap for consistent horizontal padding matching all other sections (0 80px desktop). 13. UNIQUE INTERACTIVE — The gallery masonry implements two layered interactions per card. First: image scale on hover — the inner .ph-img div scales from 1.0 to 1.04 on .ph:hover, using transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); overflow:hidden on the parent clips the scale to the card boundary. Second: caption overlay reveal — the .ph-cap div sits absolute at the bottom of each card with opacity:0 at rest; on .ph:hover .ph-cap it transitions to opacity:1 over 0.3s linear. No JavaScript is needed for this interaction — pure CSS :hover cascade. The featured series image has a parallel but gentler hover scale: 1.0 to 1.02 over 0.8s cubic-bezier(0.16,1,0.3,1). Client names (.client-name) use a CSS hover opacity transition: color rgba(244,244,242,0.3) at rest → rgba(244,244,242,0.7) on hover over 0.2s. Nav links use opacity transition: opacity 1 at rest → opacity 0.6 on hover over 0.2s. ARIA: each interactive gallery card should carry role="button" tabindex="0" aria-label="[photo title], [year]" for keyboard accessibility. No accordion, tabs, or toggle components are present in this template. — Prompt set generated with Claude Sonnet 4.6 —