/* ============================================================
THE NEXT GEN — design tokens
Clone target: tokyofilmfestival.ai (Framer + UnicornStudio.js)
Fonts substituted for free equivalents — see BUILD_NOTES.md
============================================================ */
:root{
--cream: #f2efe6;
--cream-line: rgba(26,21,18,0.14);
--cream-line-inv: rgba(242,239,230,0.09); /* grid line on dark sections */
--grid: 48px; /* graph-paper cell, page-wide */
--frame: 6.25%; /* cream side-frame, matches the gate inset */
--veil: rgba(242,239,230,0.72); /* cream backing behind copy sections */
--ink: #1a1512; /* warm near-black */
--ink-soft: #4a4038; /* warm grey */
--navy: #060b12;
--navy-2: #0c1622;
/* Super San Francisco — International Orange primary, Golden Hour secondary */
--green-deep: #7a1f14; /* deep burnt orange */
--green: #c0362c; /* International Orange — primary accent */
--green-light: #e7a33c; /* Golden Hour — secondary accent */
--teal: #c0362c; /* kicker accent on the dark photos */
--gold: #e0b84c;
/* Logo mark — sampled from the source artwork, so deliberately not reusing --green/
--green-light/--ink above. Those are the palette's interpretation of the same two
hues and drift a few points off; the mark should match the supplied file exactly. */
--mark-gold: #e3ae28;
--mark-red: #da4433;
--mark-ground: #0c0d0f;
--blue: #5b7fd6;
--radius: 18px;
--ease: cubic-bezier(.16,.84,.32,1);
/* Display: Clash Display — editorial grotesque with real character (max weight 700).
Script: DM Serif Display italic — high-contrast editorial serif (single weight, 400).
Body + Mono: General Sans and Geist Mono, the actual families the reference site uses. */
--font-display: "Archivo", "Archivo Black", sans-serif;
--font-serif: "STIX Two Text", "Times New Roman", serif; /* hero lockup */
/* Gate lockup only — the wordmark moment. Boska Black is the closest free face to
the Gage EXO reference: same high-contrast display serif, dramatic thick/thin,
flared terminals. Free from Fontshare, which the page already preconnects for
General Sans, so it costs no extra provider.
Falls back to DM Serif Display rather than a sans — a high-contrast serif
degrading to a grotesque changes the lockup's character completely. */
--font-gate: "Boska", "DM Serif Display", Georgia, serif;
--font-script: "DM Serif Display", Georgia, serif;
--font-mono: "Geist Mono", ui-monospace, monospace;
--font-body: "General Sans", "Inter", sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{
scroll-behavior:smooth;
/* Warm "golden-hour paper" — not flat cream: a soft gold glow up top easing into
a deeper warm sand, with a faint ember pool at the base.
background-color first and separately: it is what paints if the gradient or the
shader canvas is mid-repaint, and without it that gap falls through to the
browser's white.
No background-attachment:fixed — mobile engines re-rasterise a fixed background
on every scroll frame and iOS Safari has never handled it properly. It was the
main source of the white flashing while scrolling on a phone. */
background-color:#f0e9db;
background-image:
radial-gradient(150% 70% at 50% -18%, rgba(231,163,60,0.16), rgba(231,163,60,0) 55%),
radial-gradient(130% 80% at 50% 118%, rgba(122,31,20,0.07), rgba(122,31,20,0) 55%),
linear-gradient(180deg, #f5f0e4 0%, #efe6d4 45%, #e8ddc9 100%);
}
/* NOT on body. #bgShader sits at z-index:-2, which paints above the root background
but below every block background — so an opaque body covers the shader completely.
The root background-color above is the right layer for this: it is behind the
canvas, so it catches a mid-repaint gap without hiding the animation. */
body{
color:var(--ink);
font-family:var(--font-body);
overflow-x:hidden;
position:relative;
/* Same cream side-frame as the gate/lander (6.25% L/R, flush top/bottom). */
padding:0 var(--frame);
}
/* Margin rules where the frame meets the content — a red rope rather than a hairline,
running the full height of the page on both sides to tie the sections together.
assets/rope.png is a mirror tile: the source rope stacked against a vertically
flipped copy of itself, so the seam matches by construction (the flipped copy's
first row is the original's last). One row is dropped from each half so that shared
row isn't drawn twice. The twist reverses at every join, which is what makes it
read as one continuous length instead of a repeating stamp.
Exported at 48px wide and drawn at 14 so it stays sharp on retina. The negative
margins centre the rope on the frame line rather than hanging it off one side. */
body::before, body::after{
content:""; position:absolute; top:0; bottom:0; width:14px;
background:url("assets/rope.png") repeat-y center top / 14px auto;
pointer-events:none; z-index:1;
}
body::before{ left:var(--frame); margin-left:-7px; }
body::after{ right:var(--frame); margin-right:-7px; }
/* Animated WebGL golden-hour background behind the whole page (assets/shader-bg.js).
The gradient is repeated here, on the canvas itself, as the no-WebGL fallback —
without it a failed context would leave the canvas transparent, which matters now
that the gate leans on this element rather than painting its own background. */
#bgShader{
position:fixed; inset:0; width:100%; z-index:-2; display:block; pointer-events:none;
/* lvh = the viewport at its tallest, i.e. URL bar hidden. height:100% tracks the
*current* viewport, so the canvas shrank and grew as the bar moved and left a
bare strip at the bottom mid-scroll. lvh is a fixed target, so it never resizes. */
height:100%; height:100lvh;
background:
radial-gradient(150% 70% at 50% -18%, rgba(231,163,60,0.16), rgba(231,163,60,0) 55%),
radial-gradient(130% 80% at 50% 118%, rgba(122,31,20,0.07), rgba(122,31,20,0) 55%),
linear-gradient(180deg, #f5f0e4 0%, #efe6d4 45%, #e8ddc9 100%);
}
/* While the gate is up it sits above the whole page at z-index 9997, so a shader
parked at -2 would be invisible behind it. Lift it above the page content but
below the gate, and the gate's side gutters show the same live background the
rest of the site has instead of flat cream. script.js owns the .gated class.
Dropping the class on enter is seamless: the canvas returns to -2, where the
transparent body still lets it show through the same 6.25% gutters. */
html.gated #bgShader{ z-index:9996; }
/* ---------------- cream veil, per-section ----------------
The veil used to be one fixed sheet across the whole viewport, which washed the
shader out everywhere. It now backs only the copy-heavy sections, so the live
shader reads through in three places:
- the side gutters (these rules sit inside body's --frame padding, so they
stop at the content column and never paint the frame)
- the card sections — .hosts, .speakers, .videos — where the photos and
embeds already carry their own contrast against the shader
- the sections that own an opaque background already (.schedule, .footer) or
a full-bleed photo (.hero, .where)
--veil is the single alpha knob; raise it if copy ever reads thin over the
brighter parts of the shader. */
.statement, .marquee-wrap, .about, .build{ background:var(--veil); }
@media (max-width:860px){ body{ --frame:4%; } }
/* Phones: the stacked gap is proportionally much larger on a short viewport,
so close it further — 34+34 becomes 14+16. */
@media (max-width:640px){
.marquee-wrap{ padding-bottom:14px; }
.about{ padding-top:16px; }
.marquee-label{ margin-bottom:14px; }
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; background:none; border:none; color:inherit; cursor:pointer;}
em{font-style:italic; font-family:var(--font-script);}
img{max-width:100%; display:block;}
::selection{background:var(--green-light); color:var(--ink);}
/* ---------------- grain overlay ---------------- */
.grain{
position:fixed; inset:-10%; width:120%; height:120%; z-index:9998;
pointer-events:none; mix-blend-mode:multiply; opacity:.05;
background-image:url("data:image/svg+xml;utf8,");
animation:grain-shift 8s steps(8) infinite;
}
/* Off on touch devices: a fixed full-viewport layer with mix-blend-mode has to be
recomposited on every scroll frame, and at 5% opacity the grain is barely
perceptible on a phone screen anyway. */
@media (hover: none), (max-width:640px){ .grain{ display:none; } }
@keyframes grain-shift{
0%,100%{transform:translate(0,0);} 10%{transform:translate(-2%,-3%);}
20%{transform:translate(-4%,2%);} 30%{transform:translate(2%,-4%);}
40%{transform:translate(-2%,4%);} 50%{transform:translate(4%,1%);}
60%{transform:translate(-3%,-2%);} 70%{transform:translate(3%,3%);}
80%{transform:translate(-1%,-4%);} 90%{transform:translate(1%,2%);}
}
/* ---------------- cursor spotlight ----------------
Scoped to the hero. Absolute, not fixed, so .hero's own overflow:hidden clips it —
the glow stops dead at the photo's edge with no extra masking.
soft-light rather than screen: the photo runs from bright sky to near-black, and
screen blows the light areas out while barely touching the dark.
z-index 1 puts it over the photo but under the hero copy at 2. Coordinates are
hero-relative, written by script.js.
Fade out is quicker than fade in — leaving the photo should read as switching off,
while arriving should read as the light rising. */
.spotlight{
position:absolute; inset:0; z-index:1; pointer-events:none;
mix-blend-mode:soft-light; opacity:0; transition:opacity .18s linear;
background:radial-gradient(circle 280px at var(--sx,50%) var(--sy,50%),
rgba(255,216,150,.95) 0%,
rgba(255,188,108,.42) 40%,
rgba(255,170,90,0) 72%);
}
html.pointer-live .spotlight{ opacity:1; transition:opacity .45s var(--ease); }
@media (prefers-reduced-motion: reduce){ .spotlight{ display:none; } }
@media (prefers-reduced-motion: reduce){ .spotlight{ display:none; } }
/* ---------------- ticket button (shared) ---------------- */
.ticket-btn{
position:relative; display:inline-flex; align-items:stretch;
background:var(--cream); border:1px solid var(--ink); border-radius:8px;
font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em;
text-transform:uppercase; overflow:hidden;
transition:transform .35s var(--ease), background .3s, color .3s;
}
.ticket-btn > span:first-child{ padding:15px 26px; display:flex; align-items:center; }
.ticket-btn .arrow{
padding:15px 20px; display:flex; align-items:center; font-size:1rem;
border-left:1px dashed var(--ink); transition:transform .35s var(--ease);
}
/* ticket edge notches */
.ticket-btn::before, .ticket-btn::after{
content:""; position:absolute; right:60px; width:12px; height:12px; border-radius:50%;
background:var(--cream); border:1px solid var(--ink); z-index:2;
}
.ticket-btn::before{ top:-7px; }
.ticket-btn::after{ bottom:-7px; }
.ticket-btn:hover{ transform:translateY(-3px); background:var(--ink); color:var(--cream); }
.ticket-btn:hover .arrow{ transform:translateX(3px); }
.ticket-btn.light{ background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.ticket-btn.light .arrow{ border-left-color:rgba(255,255,255,.6); }
.ticket-btn.light::before, .ticket-btn.light::after{ background:var(--ink); border-color:rgba(255,255,255,.6); }
.ticket-btn.light:hover{ background:#fff; color:var(--ink); }
/* ---------------- reveal-on-scroll ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* Phones: 28px of travel is a far bigger share of a short viewport than of a desktop
one, so the same animation reads as a lurch rather than a lift. Shorter distance
and a slightly quicker settle — and will-change promotes each element before it
moves, which is what stops the first frame of the transform from stuttering.
The property list is restated rather than using transition-duration alone so the
easing stays attached to both animated properties. */
@media (max-width:640px){
.reveal{
transform:translateY(14px);
transition:opacity .62s var(--ease), transform .62s var(--ease);
will-change:opacity, transform;
}
/* drop the hint once it has arrived — a permanent will-change keeps a layer alive
for every revealed element on the page */
.reveal.in{ will-change:auto; }
.reveal-line span{ transition-duration:.8s; }
}
/* Safety nets — content must never be stranded at opacity:0.
`.motion-ready` is set by script.js; without JS (or before it runs) nothing is hidden. */
html:not(.motion-ready) .reveal,
html:not(.motion-ready) .reveal-line span{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
.reveal, .reveal-line span{ opacity:1 !important; transform:none !important; transition:none !important; }
/* .gate-img is already the sharp photo, so reduced motion just needs the drifting
smoke gone and the settle scale held still. */
.gate-smoke-field{ display:none !important; }
.gate-img{ transform:none !important; animation:none !important; }
.marquee-track, .grain, .scroll-hint span{ animation:none !important; }
html{ scroll-behavior:auto !important; }
}
.reveal-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.reveal-line span{ display:block; line-height:1; padding-top:.06em; transform:translateY(115%); transition:transform 1.1s var(--ease); }
.reveal-line.in span{ transform:translateY(0); }
/* ============================================================ GATE */
/* The gate is the cinematic moment: the bridge photo behind a sheet of smoke that
the cursor carves through. Framed like the reference site — inset in the side
gutters rather than full-bleed. */
.gate{
/* transparent, not cream — the lifted #bgShader behind it supplies the same
background the main page uses. Any opaque colour here would hide it. */
position:fixed; inset:0; z-index:9997; background:transparent; color:#fff;
display:flex; align-items:center; justify-content:center; flex-direction:column;
transition:transform 1.1s var(--ease), opacity .8s var(--ease) .25s;
gap:26px; text-align:center; overflow:hidden;
padding:32px 20px;
}
.gate.closed{ transform:translateY(-100%); opacity:0; pointer-events:none; }
/* Inset left/right, flush to the top and bottom edges — no top band. Since the image
spans the full height, centring the content in .gate also centres it in the image. */
.gate-bg{ position:absolute; top:0; bottom:0; left:6.25%; right:6.25%; z-index:0; overflow:hidden; }
@media (max-width:860px){
.gate-bg{ left:4%; right:4%; }
}
/* The photo sits sharp from the start — the haze is a real smoke layer in front of
it rather than a pre-blurred copy of it underneath. */
.gate-img{
position:absolute; inset:0;
background-color:#17110c;
background-image:
url("assets/gate-bg.jpg"),
linear-gradient(180deg,#3a2113 0%,#1e130b 45%,#0c0703 100%);
background-size:cover, cover;
background-position:center, center;
transform:scale(1.16);
animation:fog-clear-img 4.6s var(--ease) forwards .3s;
}
/* ---- smoke ----
Three drifting sheets of fractal noise, blended to lighten. script.js carves the
pointer's wake out of them by writing mask layers onto the field below.
The whole field is masked as one, and it is the field that blends with the photo.
The blend has to live here rather than on each sheet: a mask creates a stacking
context, so a screen blend on a child would blend against its siblings inside this
box instead of against the bridge underneath.
No mask by default — that is the resting state now. With the pointer still, the
smoke is solid, which doubles as the no-JS fallback. */
.gate-smoke-field{
position:absolute; inset:0; overflow:hidden; pointer-events:none;
mix-blend-mode:screen; will-change:mask-image;
}
.gate-smoke{ position:absolute; inset:0; overflow:hidden; }
.gate-smoke-inner{
position:absolute; inset:-30%;
background-repeat:repeat; background-position:center;
}
/* Three scales and three speeds, so the sheets slide past each other instead of
moving as one flat texture. The blur is what turns noise into smoke. */
.s1 .gate-smoke-inner{
background-image:url("data:image/svg+xml;utf8,");
background-size:150% 150%; filter:blur(5px); opacity:.62;
animation:smoke-a 46s ease-in-out infinite alternate;
}
.s2 .gate-smoke-inner{
background-image:url("data:image/svg+xml;utf8,");
background-size:110% 110%; filter:blur(4px); opacity:.5;
animation:smoke-b 34s ease-in-out infinite alternate;
}
.s3 .gate-smoke-inner{
background-image:url("data:image/svg+xml;utf8,");
background-size:80% 80%; filter:blur(3px); opacity:.36;
animation:smoke-c 27s ease-in-out infinite alternate;
}
@keyframes smoke-a{
from{ transform:translate3d(-4%,2%,0) scale(1.05); }
to { transform:translate3d(5%,-3%,0) scale(1.18); }
}
@keyframes smoke-b{
from{ transform:translate3d(3%,-2%,0) scale(1.12); }
to { transform:translate3d(-5%,3%,0) scale(1.02); }
}
@keyframes smoke-c{
from{ transform:translate3d(-2%,-3%,0) scale(1.0); }
to { transform:translate3d(4%,4%,0) scale(1.14); }
}
/* Edge vignette only — deliberately NOT a central pool.
This layer sits above the reveal, so anything it darkens in the middle
compresses the fogged and revealed states toward the same value and kills the
effect. Type legibility is handled by text-shadow on .gate-content instead. */
.gate-vignette{
position:absolute; inset:0;
background:
radial-gradient(ellipse 70% 58% at 50% 50%, rgba(20,11,5,.42) 0%, rgba(20,11,5,.12) 55%, rgba(20,11,5,0) 82%),
linear-gradient(180deg,
rgba(20,11,5,.34) 0%, rgba(20,11,5,.06) 26%, rgba(20,11,5,.18) 60%, rgba(20,11,5,.72) 100%);
}
/* Legibility lives here rather than in a background scrim, so the fog wipe
behind it keeps its full contrast. The wide soft shadow reads as the type
pushing the fog away from itself. */
/* Kept tight — wide soft shadows on heavy display type merge into a visible
dark rectangle behind the words. The base plate is dark enough to carry it. */
/* Same rope as the page margins. The body's own pair sits at z-index 1, far below the
gate at 9997, so it is invisible while the gate is up — the gate needs its own.
Both use var(--frame), which body drops to 4% under 860px, so these stay lined up
with .gate-bg's inset and with the ropes waiting on the page behind.
z-index 2 puts them over the photo but under .gate-content at 3. */
.gate::before, .gate::after{
content:""; position:absolute; top:0; bottom:0; width:14px; z-index:2;
background:url("assets/rope.png") repeat-y center top / 14px auto;
pointer-events:none;
}
.gate::before{ left:var(--frame); margin-left:-7px; }
.gate::after{ right:var(--frame); margin-right:-7px; }
.gate-content{
position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:24px;
}
/* White, not --teal: that accent is International Orange, which sits on the dark
photo at almost the same luminance as the smoke behind it and disappears. */
.gate-kicker{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; color:#fff; }
/* One line now, so the size has to fall back further on narrow screens than the old
two-line lockup needed — 6.4vw keeps "The NextGen" inside a 360px viewport. */
/* Set as a wordmark: 900 is Boska's heaviest cut, and the tight tracking locks the
letters into one mark rather than a sentence. Only -.025em though, not the -.045em
a grotesque wanted — a high-contrast serif has hairline strokes and serifs that
collide and smudge together when tracked that tightly.
No text-shadow: the mark carries itself against the photo. The stroke below is what
keeps the hairlines from dropping out, so if the lockup ever reads thin over a
bright patch of the image, raise that rather than reintroducing a shadow. */
.gate-word{
font-family:var(--font-gate); font-weight:900;
font-size:clamp(2.1rem,7.2vw,5.8rem); line-height:1.02; letter-spacing:-.025em;
white-space:nowrap; text-shadow:none;
/* Boska is a variable font topping out at 900, so this is already its heaviest
cut — extra weight has to come from a stroke, not from font-weight. The stroke
is centred on the outline, so it thickens stems from both sides.
0.03em is deliberate: past roughly 0.05em the hairlines fatten up to meet the
stems and the thick/thin contrast that makes this face worth using collapses. */
-webkit-text-stroke:0.03em currentColor;
}
.gate-sub{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em; color:#fff; }
.gate-sub p{ margin:2px 0; }
/* the button sits on the photo, so it needs a little glass behind it and
notches dark enough to read as punched-out rather than as white dots */
.gate .ticket-btn{ background:rgba(6,11,18,.55); backdrop-filter:blur(8px); text-shadow:none; }
.gate .ticket-btn::before, .gate .ticket-btn::after{
background:rgba(6,11,18,.92); border-color:rgba(255,255,255,.55);
}
.gate .ticket-btn:hover{ background:#fff; }
.gate .ticket-btn:hover::before, .gate .ticket-btn:hover::after{ background:var(--cream); }
/* ============================================================ NAV */
.nav{ position:fixed; top:18px; left:0; right:0; z-index:900; display:flex; justify-content:center; padding:0 16px; }
/* Column, not row: the stub sits on top and the directory unfolds underneath it. */
.nav-ticket{
display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--ink);
border-radius:16px; padding:10px 10px 10px 14px; position:relative;
box-shadow:0 6px 20px rgba(0,0,0,.06);
transition:box-shadow .35s var(--ease);
}
.nav-ticket.open{ box-shadow:0 14px 38px rgba(0,0,0,.16); }
.nav-row{ display:flex; align-items:center; gap:16px; }
.nav-brand{ display:flex; align-items:center; gap:10px; }
/* The badge is the logo's dark ground, not a container for it: 8/34 lands on the
same 23.5% corner radius the mark is drawn with, so the two agree by construction. */
.nav-badge{
width:34px; height:34px; border-radius:8px; background:var(--mark-ground);
display:flex; align-items:center; justify-content:center;
}
/* width:0/height:0 rather than display:none on the sprite host: a display:none
ancestor stops