layered-depth

## Offline media Copy the sibling `assets/` directory beside the generated HTML, retaining its relative paths (or embed these assets for a standalone file). Use the bundled images instead of remote media. Large video loops and animated previews are represented by local still images; render them as images or video posters without a video source. This offline-media rule overrides remote/video instructions below. See `assets/NOTICE.md` for attribution. # Layered Depth — Architecture Studio Landing (Qelora) Produce a cinematic, depth-layered landing page for an architecture studio called **Qelora**, built on stacked z-index layers (background video → warm overlay → animated birds → giant brand wordmark → parallax sculpture slab → frosted nav → frosted info panels) plus a second full-viewport video section with a centered editorial headline. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, layer stacking, parallax math, bird state machine, and 768px responsive behavior described below. This is the authoritative build brief. Follow it exactly — the named colors, fonts, asset URLs, z-indexes, and parallax constants are locked. ## Stack - Default output: a single self-contained HTML file (the `example.html` seed). It already includes everything inline. - If the user explicitly asks for a **React + Vite + TypeScript + Tailwind** project, port the seed faithfully into `Hero.tsx` + `Section2.tsx` (mounted by `App.tsx` → `main.tsx` in `StrictMode`, no routing). Tailwind is used **only for base reset** (`@tailwind base/components/utilities`); every element is styled with **inline styles**, no utility classes in JSX. Dependencies are only `react`, `react-dom`, `lucide-react` (lucide is declared but the page's icons are all inline SVG and lucide is not actually rendered). Do not change the design while porting. ## Fonts (Zimula Trial — locked) Load all three in `<head>` / `index.css`: ``` <link href="https://db.onlinewebfonts.com/c/076f8c5b3b67616658dd1e4e9bac62ec?family=Zimula+Trial+Med" rel="stylesheet"> <link href="https://db.onlinewebfonts.com/c/08d8ca53f66ab5b48659912fa0136b78?family=Zimula+Trial+Bd" rel="stylesheet"> @import url('https://db.onlinewebfonts.com/c/46024824a3dd3309c3a7f46f4f1283ba?family=Zimula+Trial+Reg'); ``` - Body / default: `'Zimula Trial Med', sans-serif` (primary weight, used everywhere). - Bold / logo / hero wordmark: `'Zimula Trial Bd', sans-serif`. - `Reg` is imported and available but Med is the primary weight. ## Global CSS (`index.css`) ``` *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Zimula Trial Med', sans-serif; background: #0e0c0a; overflow-x: hidden; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0e0c0a; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; } ``` ## Color palette — locked - Dark background: `#0e0c0a` - Primary text: `#241f21`, `#282425`, `#2a2420` - White: `#fff` - Dark accent: `#100e0c` - Warm transparent overlays: `rgba(235,230,218,0.12)` (hero), `rgba(242,238,230,0.38)` (section 2) - Frosted glass backgrounds: `rgba(248,245,240,0.72)`, `0.88`, `0.92`, `0.96` ## Assets (Cloudinary + Pexels — keep these remote) These are stable CDN media; keep them as remote URLs (do not try to inline the videos). The Cloudinary background videos / bird webm clips and the Pexels CTA photo stay as URLs. Videos: - Hero background: `./assets/bg-video_xsmysw-f9ba1c.mp4` - Bird enter: `./assets/bird-entrada_e72qt7-102269.webm` - Bird idle 1: `./assets/bird-idle_fzjami-a7d50b.webm` - Bird idle 2: `./assets/bird-idle2_rajmgo-a2bfbb.webm` - Bird leave: `./assets/bird-saida_ifroz1-4ad3cb.webm` - Section 2 background: `./assets/bg-2-video_sgbpqt-cdc7da.mp4` Images: - Q logo (declared, unused): `./assets/q-logo_isvugc-be3611.webp` - Center sculpture / slab: `./assets/slab_v1_kb4vqk-eb36b8.webp` - CTA card photo (Pexels): `./assets/pexels-photo-3184465-a44809.webp` > Do not swap these CDN URLs for other hosts and do not introduce remote avatar hosts (`i.pravatar.cc`, dicebear, etc.) — there are no avatars in this template. ## Section 1 — Hero Container: `position: relative; width: 100%; min-height: 100vh; overflow: visible; font-family: 'Zimula Trial Med'`. Responsive breakpoint: `isMobile = window.innerWidth < 768`, checked on mount and resize. Stack the layers by z-index exactly: - **Layer 1 — Background video (z-index 0):** `<video autoplay muted loop playsinline>`, `position:absolute; inset:0; width:100%; height:100vh; object-fit:cover`, source = hero bg mp4. - **Layer 2 — Warm overlay (z-index 1):** div, `background: rgba(235,230,218,0.12); height:100vh; pointer-events:none`. - **Layer 3 — Bird animation system (z-index 8):** container `position:absolute; top:0; left:0; width:100%; height:100vh; pointer-events:none; aria-hidden`. Four `<video>` elements (enter, idle1, idle2, leave) toggled via `display`. Desktop: each `position:absolute; inset:0; width:100%; height:100%; object-fit:cover`. Mobile: each `position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto`. **State machine** `'enter'|'idle1'|'idle2'|'leave'|'hidden'`: on load play `enter`; `enter` ended → `idle1`; `idle1` ended → `idle2`; `idle2` ended → `idle1` (infinite loop); scroll past 10px → pause/reset enter+idles, play `leave`; scroll back below 10px → pause/reset leave, play `enter` again. Use both state and a ref to avoid stale closures in the scroll handler. Preload all four with `.load()` on mount. The `playVideo` helper sets `currentTime=0`, checks `readyState>=2`, then plays (or waits for a `canplay` event). - **Layer 4 — Center brand text "Qelora" (z-index 5):** container fills `100vh`, flex centered, `pointer-events:none`. Text `Qelora` in `'Zimula Trial Bd'`, font-size mobile `26vw` / desktop `22vw`, `letter-spacing:-0.05em; color:#241f21; line-height:1; margin-bottom:` mobile `8vh` / desktop `12vh`. - **Layer 5 — Sculpture slab (z-index 5):** `<img>` `position:absolute; top:50%; left:50%`, `transform: translateX(-50%) translateY(${-heroScroll * 0.3}px)` — parallax that moves **UP** as the user scrolls down. Width mobile `220vw` / desktop `160vw`; `height:auto; pointer-events:none; will-change:transform`. - **Layer 6 — Fixed navbar (z-index 100):** `position:fixed; top:0`, full width, padding mobile `16px 20px` / desktop `20px 36px`. Left: brand "Qelora" with `®` superscript (`'Zimula Trial Bd'`, size mobile `20px`/desktop `24px`, `letter-spacing:-0.03em; color:#241f21`; the `®` sup is `font-size:0.4em; vertical-align:super`). Right desktop: **NavPills** — pills for `['Projects','Studio','Responsibility','Archive']` plus an `EN` language selector. Each pill: `background:rgba(248,245,240,0.92); border-radius:12px; padding:13px 22px 8px; height:40px; font-size:13px; text-transform:uppercase; letter-spacing:0.07em; color:#241f21`. Active pill: `font-weight:700` + a 3px round dot at `bottom:3px`, centered; non-active `font-weight:500`. Default active = "Projects". Language pill: separate capsule `border-radius:100px; padding:8px 14px; background:rgba(248,245,240,0.88); backdrop-filter:blur(12px); box-shadow:0 2px 20px rgba(0,0,0,0.1)`, "EN" + chevron-down SVG. Right mobile: hamburger button `42×42; border-radius:100px`, same frosted style — X icon when open, 3-line hamburger when closed. - **Layer 7 — Mobile dropdown menu (z-index 99):** `position:fixed; top:70px; left:16px; right:16px; background:rgba(248,245,240,0.96); backdrop-filter:blur(16px); border-radius:18px; padding:8px; box-shadow:0 8px 40px rgba(0,0,0,0.14)`. Each item: full-width button `padding:14px 20px; font-size:13px; uppercase; letter-spacing:0.07em; border-bottom:1px solid rgba(40,36,37,0.08)`. Bottom: EN language row. - **Layer 8 — Bottom panels (z-index 20):** `bottom = bottomOffset + heroScroll * 0.5` where `bottomOffset` = 24px mobile / 36px desktop — parallax push-DOWN as the user scrolls. - *Desktop (side-by-side):* - Bottom-left panel: `position:absolute; left:36px; border-radius:18px; padding:22px 28px; max-width:270px; background:rgba(248,245,240,0.72); backdrop-filter:blur(8px)`. Headline `"Designing places\nbeyond\nwhat's expected"` — `font-size:clamp(17px,2vw,24px); line-height:1.28; color:#282425; letter-spacing:-0.01em`. Then a 1px border-top divider (`rgba(40,36,37,0.2)`), then "EXPLORE OUR APPROACH" link + down-arrow SVG, `font-size:11px; uppercase; letter-spacing:0.1em`. - Bottom-right panel: `position:absolute; right:36px; border-radius:18px; width:clamp(210px,21vw,290px); height:180px; overflow:hidden`. Pexels photo covers the card. Dark gradient overlay `linear-gradient(to bottom, rgba(16,14,12,0.55) 0%, transparent 60%)`. Top text `"Every lasting space begins\nwith a quiet dialogue."` — `color:#fff; font-size:13px; line-height:1.35`. Bottom: inline flex with a white circle (envelope SVG, `36×36; border-radius:12px`) and a white "START A PROJECT" button (`font-size:11px; uppercase; letter-spacing:0.07em; font-weight:700; border-radius:12px; height:36px`). - *Mobile (stacked):* single flex column, `left:20px; right:20px; gap:12px`. Top card: tagline panel `background:rgba(248,245,240,0.72); backdrop-filter:blur(8px); border-radius:16px; padding:18px 20px`; same text on a single line "Designing places beyond what's expected", `font-size:17px`; same divider + link. Bottom card: CTA card `border-radius:16px; height:120px`, same structure as desktop right panel adapted (text `font-size:12px`, same button row). ## Section 2 Container: `position:relative; width:100%; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; font-family:'Zimula Trial Med'`. - **Layer 1 — Background video (z-index 0):** `<video autoplay muted loop playsinline>`, `position:absolute; inset:0; width:100%; height:100%; object-fit:cover`, source = section 2 bg mp4. - **Layer 2 — Warm overlay (z-index 1):** `background:rgba(242,238,230,0.38); position:absolute; inset:0; pointer-events:none`. - **Layer 3 — Center headline (z-index 2):** absolutely positioned `inset:0`, flex centered, `pointer-events:none; text-align:center; padding:0 24px`. Text `"What stands the\ntest of time is all\nthat guides the\nwork."` using `<br>` tags. `font-size:clamp(32px,5.5vw,80px); line-height:1.18; color:#2a2420; max-width:780px; letter-spacing:-0.025em; font-weight:400`. - **Layer 4 — Bottom element (z-index 2):** `position:absolute; bottom:clamp(24px,4vh,48px)`, full width, flex column centered, `padding:0 24px`. Vertical line `width:1px; height:56px; background:rgba(42,36,32,0.25)`. Below (`margin-top:22px`), flex column centered `gap:14px`: a 24×28px outline map-pin SVG (`stroke:#2a2420; stroke-width:1.4`), then subtext `"Civic bodies and private clients trust us to shape resilient communities and purposeful places."` — `font-size:clamp(11px,1.4vw,13px); color:#2a2420; letter-spacing:0.04em; line-height:1.6; max-width:340px; opacity:0.75`. ## Key behaviors — hard - **Bird state machine:** enter → idle1 ⇄ idle2 loop; scroll triggers leave; scroll back triggers re-enter. Driven entirely by native `<video>` `ended`/`play` events + scroll, no animation library. In the vanilla seed this is a `mousemove`/`scroll`-free pure state machine; in React use refs to avoid stale closures. - **Parallax (passive scroll listener writing inline style):** sculpture `translateY(-scrollY * 0.3)` (moves up); bottom panels `bottom = offset + scrollY * 0.5` (pushes down). Map any `useScroll`/`useTransform` down to a single passive `scroll` listener that writes inline `transform`/`bottom`. - **Responsive at 768px:** nav collapses to hamburger; panels stack vertically; bird videos switch from cover-fill to `width:100%/height:auto/vertically-centered`; sculpture grows `160vw → 220vw`; brand text grows `22vw → 26vw`. - **All styling is inline** — no CSS utility classes in JSX, no Tailwind utilities on elements (Tailwind base reset only). - **No third-party animation libraries** — all motion is native video playback + scroll-driven inline style changes. ## Color rules — hard Stay in the warm dark-stone palette above. Background is always `#0e0c0a`; text is the `#241f21 / #282425 / #2a2420` warm-ink family; frosted panels use the `rgba(248,245,240, …)` set; overlays are the warm `rgba(235,230,218,0.12)` / `rgba(242,238,230,0.38)` pair. Do not introduce a cool/blue/purple accent — the whole piece is monochrome warm stone with white only inside the CTA card.