/* site-v1 — SHARED chrome across the two pages (index.html + filmmaker.html). What lives here is what makes two pages read as ONE site: the fixed header, the letterbox curtain entrance, the shared cue link, the footer, and the page-1 → page-2 hand-off card. What is NOT here: no hex, no font names, no absolute type sizes, no easing curves — tokens.css only. Structural geometry only. */ /* ---------- no-JS guard ---------------------------------------------------- tokens.css hides .reveal until .is-in arrives from JS. Without JS that is an invisible page. Both pages add class "js" from a script, so a no-JS render skips the hidden state entirely. Page 1's scroll-linked machinery hides content the same way outside the .reveal system — the seam logline (--seam-o) and the Film section's .emerge (--e) both default to opacity 0 and only JS raises them — so the guard must enrol them too or a no-JS render loses the logline and the whole "What is Project Bluebird?" section. */ html:not(.js) .reveal, html:not(.js) .seam__line, html:not(.js) .emerge{opacity:1;filter:none;transform:none} /* ---------- skip link ------------------------------------------------------ First focusable element on both pages. Invisible until keyboard focus: a fixed header + a 135svh hero is a long walk to content on Tab alone. z-index above the curtains (40) so the entrance can't swallow it. */ .skip-link{ position:fixed;top:.9rem;left:.9rem;z-index:60; font-family:var(--font-display);font-size:var(--text-label);font-weight:600; letter-spacing:var(--track-label);text-transform:uppercase; color:var(--ink);background:var(--black); padding:.85rem 1.5rem;border:1px solid var(--accent); transform:translateY(calc(-100% - 1.5rem)); } .skip-link:focus-visible{transform:none;outline:none} /* ---------- fixed header — one header, both pages -------------------------- Background is driven by --hero-progress (0 over the hero, 1 once it has released). Page 1 measures it off the pinned hero stage; page 2 measures it off its title-card hero. Same variable, same hand-over, either hero. */ #site-head{ position:fixed;z-index:20;top:0;right:0;left:0; display:flex;align-items:center;justify-content:space-between; padding:clamp(1rem,2.2vw,1.6rem) clamp(1.2rem,6vw,6rem); background:linear-gradient(180deg, color-mix(in srgb, var(--black) calc(62% * (1 - var(--hero-progress,0))), transparent), transparent); pointer-events:none; } #site-head::before{ content:"";position:absolute;inset:0;z-index:-1; background:color-mix(in srgb, var(--black) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in srgb, var(--line) calc(100% * var(--hero-progress,0)), transparent); opacity:var(--hero-progress,0); } #site-head > *{pointer-events:auto} .wordmark{ font-family:var(--font-display);font-size:var(--text-label);font-weight:700; letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink); transition:color var(--duration-ui) var(--ease),letter-spacing .4s var(--ease); } .wordmark:hover{letter-spacing:calc(var(--track-label) + .06em)} .wordmark:hover{color:var(--accent)} /* designed focus state — every peer control has one; the wordmark was the only control left on the UA default */ .wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:4px;color:var(--accent)} /* the away-page link, both headers: the wordmark voice at dim ink — brightness alone says which page you're on (page 1 dims The Filmmaker, page 2 dims the wordmark); hover/focus keep the wordmark's gold. The Industry Access button left both headers 2026-08-13 — its styles below survive for the in-page forms' peers and any future surface. */ .wordmark--away{color:var(--ink-dim)} .access-btn{ font-family:var(--font-display);font-size:var(--text-label);font-weight:600; letter-spacing:var(--track-label);text-transform:uppercase; padding:.85rem 1.5rem;border:1px solid var(--line);color:var(--ink); transition:color var(--duration-ui) var(--ease), border-color var(--duration-ui) var(--ease), transform var(--duration-ui) var(--ease); } .access-btn:hover,.access-btn:focus-visible{ color:var(--accent);border-color:var(--accent);transform:translateY(-2px); } /* ---------- entrance — curtains open from closed to nothing, both pages ---- */ .curtain{position:fixed;z-index:40;right:0;left:0;height:0;background:var(--black);pointer-events:none} .curtain--top{top:0} .curtain--bottom{bottom:0} .js-ready .curtain--top{animation:curtain-top var(--entrance-duration) var(--ease-expo) both} .js-ready .curtain--bottom{animation:curtain-bottom var(--entrance-duration) var(--ease-expo) both} @keyframes curtain-top{from{height:50vh}to{height:0}} @keyframes curtain-bottom{from{height:50vh}to{height:0}} /* ---------- shared cue link (hero cue · hand-off cue · return cue) --------- */ .cue{ display:inline-flex;align-items:center;gap:.9rem; font-family:var(--font-display);font-size:var(--text-label);font-weight:500; letter-spacing:.2em;text-transform:uppercase; border-bottom:1px solid color-mix(in srgb, var(--ink) 34%, transparent);padding-bottom:.55rem; transition:color var(--duration-ui) var(--ease),border-color var(--duration-ui) var(--ease); } .cue:hover,.cue:focus-visible{color:var(--accent);border-color:var(--accent)} .cue .cue-drift{display:block;animation:cue-drift 2.2s var(--ease) infinite} @keyframes cue-drift{50%{transform:translateY(.45rem);color:var(--accent)}} @media (prefers-reduced-motion:reduce){ .cue .cue-drift{animation:none} } /* ---------- hero entrance reveals — one stagger grammar, both heroes -------- Delays are keyed to --entrance-duration so the copy lands as the curtains finish opening, on either page. */ .hero-reveal{opacity:0;filter:blur(var(--reveal-blur));transform:translateY(var(--reveal-distance)); animation:hero-in var(--reveal-duration) var(--ease) forwards} @keyframes hero-in{to{opacity:1;filter:blur(0);transform:none}} .hero-reveal--1{animation-delay:calc(var(--entrance-duration) * .55)} .hero-reveal--2{animation-delay:calc(var(--entrance-duration) * .55 + var(--stagger))} .hero-reveal--3{animation-delay:calc(var(--entrance-duration) * .55 + var(--stagger) * 2)} .hero-reveal--4{animation-delay:calc(var(--entrance-duration) * .55 + var(--stagger) * 3)} .hero-reveal--5{animation-delay:calc(var(--entrance-duration) * .55 + var(--stagger) * 4)} .hero-reveal--6{animation-delay:calc(var(--entrance-duration) * .55 + var(--stagger) * 5)} /* ---------- hand-off — page 1's last act, pointing at page 2 --------------- Quiet on purpose: page 1 belongs to the film; the filmmaker is one gesture away, not a competing section. Tint drifts to --bg so the background river ends page 1 on the same near-black page 2 opens with. */ .handoff{text-align:center} .handoff .label{justify-content:center} .handoff .label::before{display:none} .handoff h2{max-width:18ch;margin-inline:auto;font-size:var(--text-h2)} .handoff__note{ max-width:46ch;margin:1.8rem auto 0;color:var(--ink-dim);font-size:var(--text-body); } .handoff .cue{margin-top:2.6rem} /* ---------- honeypot — shared by both forms -------------------------------- */ .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* ---------- footer — one footer, both pages -------------------------------- */ .site-foot{ position:relative;z-index:1;border-top:1px solid var(--line); padding:3rem clamp(1.2rem,6vw,6rem) 3.5rem; display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between; } .site-foot .f-title{ font-family:var(--font-display);font-weight:700;font-size:var(--text-label); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink); transition:color var(--duration-ui) var(--ease),letter-spacing .4s var(--ease); } /* mirrors the header wordmark's hover — one sign, both ends of the page */ .site-foot .f-title:hover{color:var(--accent);letter-spacing:calc(var(--track-label) + .06em)} .site-foot nav{display:flex;gap:clamp(1.4rem,3vw,3rem);flex-wrap:wrap} .site-foot nav a{ display:inline-block; /* span can't translate */ font-family:var(--font-display);font-size:var(--text-label);font-weight:500; letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--ink-dim); transition:color var(--duration-ui) var(--ease),transform var(--duration-ui) var(--ease); } .site-foot nav a:hover, .site-foot nav a:focus-visible{color:var(--accent);transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){ .site-foot nav a:hover, .site-foot nav a:focus-visible{transform:none} } .site-foot .f-note{width:100%;font-size:calc(var(--text-body) * .85);color:var(--ink-faint)} /* ---------- footer socials — icon tiles ------------------------------------ Adapted (never imported) from 21st.dev icon-set: muted-at-rest icons that gain colour + a little scale on hover. Re-voiced for this site: square 1px-bordered tiles (the --radius:0 contract), ink-dim glyphs, and the hover colour is the REAL brand colour — the only true colour on the page, so the two tiles read as small windows out of the film's world. */ .f-social{display:flex;gap:.9rem} .f-social a{ display:grid;place-items:center;width:44px;height:44px; border:1px solid var(--line);color:var(--ink-dim); transition:color var(--duration-ui) var(--ease), border-color var(--duration-ui) var(--ease), background var(--duration-ui) var(--ease), transform var(--duration-ui) var(--ease); } .f-social svg{width:21px;height:21px} .f-social .f-imdb span{ font-family:var(--font-display);font-weight:600;font-size:.78rem; letter-spacing:.02em; } .f-social a:hover, .f-social a:focus-visible{transform:translateY(-2px) scale(1.06)} .f-social .f-ig:hover, .f-social .f-ig:focus-visible{ color:#fff;border-color:transparent; background:radial-gradient(130% 130% at 30% 110%, #fdc468 0%, #f77737 26%, #d62976 55%, #962fbf 78%, #4f5bd5 100%); } .f-social .f-imdb:hover, .f-social .f-imdb:focus-visible{color:#0a0c0b;border-color:#f5c518;background:#f5c518} @media (prefers-reduced-motion:reduce){ .f-social a:hover, .f-social a:focus-visible{transform:none} } /* the footer's IMDb tile as a free-standing element (2026-08-13) — used under each short film's credits on the Filmmaker page, linking to that film's own IMDb title page. Same recipe: hard-edged tile, dim wordmark, brand yellow on hover. */ .imdb-tile{ display:inline-grid;place-items:center;width:44px;height:44px; border:1px solid var(--line);color:var(--ink-dim); transition:color var(--duration-ui) var(--ease), border-color var(--duration-ui) var(--ease), background var(--duration-ui) var(--ease), transform var(--duration-ui) var(--ease); } .imdb-tile span{ font-family:var(--font-display);font-weight:600;font-size:.78rem; letter-spacing:.02em; } .imdb-tile:hover, .imdb-tile:focus-visible{ color:#0a0c0b;border-color:#f5c518;background:#f5c518; transform:translateY(-2px) scale(1.06); } @media (prefers-reduced-motion:reduce){ .imdb-tile:hover, .imdb-tile:focus-visible{transform:none} } /* gold eyebrow family raised site-wide (Matthew, 2026-08-06) — labels + kickers sit at 1.35x the label token; the Commissioned Works title leads at 1.6x */ .label,.kicker{font-size:calc(var(--text-label) * 1.35)} /* ---------- page scrollbar — the one piece of chrome the browser paints ------ Left default it is a white gutter running down a black page. Scoped to html so only the viewport bar is styled and any inner scroller keeps its own treatment. Thumb is --accent knocked back into --black: the gold is an accent in this language, not a highlight; hover lifts it without reaching full accent. Both syntaxes carry the same two colours — Chromium/Firefox take the standard properties, older WebKit takes the pseudo-elements. */ html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--accent) 58%, var(--black)) var(--black)} html::-webkit-scrollbar{width:10px} html::-webkit-scrollbar-track{background:var(--black)} html::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent) 58%, var(--black))} html::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent) 80%, var(--black))}