/* ============================================================
BUILT DIFFERENT, PARE — DESIGN SYSTEM
------------------------------------------------------------
One stylesheet for the whole site: index, shop, checkout and
order-confirmed all link to this file.
── WHERE THE COLOURS COME FROM ──────────────────────────────
Sampled straight off the YouTube episode thumbnails, so the
site and the channel read as one brand:
#FFBF00 the amber every thumbnail title uses ← THE accent
#5B2C3C deep wine ┐
#432946 plum │ the studio wall behind Beng & Yen,
#16303F petrol teal │ left → right. That sweep is the
#945D49 warm copper ┘ --band-hero gradient.
Every band below is a segment of that same sweep, so the whole
site feels like one continuous room.
── THE TWO ACCENTS (important) ──────────────────────────────
--amber #FFBF00, IDENTICAL in both themes. Only ever a
FILL, and always carries near-black text on top
(buttons, ticker, badges, prices-on-dark). Reads
correctly on light or dark.
--accent the TEXT / BORDER accent. Amber text on white
fails contrast, so light mode darkens it to a
deep gold. NEVER use --accent as a fill behind
dark text, and never use --amber as text on white.
── LIGHT MODE ───────────────────────────────────────────────
theme.js stamps before first
paint. Light mode is deliberately quiet — white surfaces, one
grey page tone, hairline rules, soft shadows instead of
borders, gradients dropped almost entirely. The branding
carries through the amber and the type, not through colour
washes. Only tokens flip; component rules stay theme-agnostic.
============================================================ */
/* ============ RESET ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* ============ TOKENS — DARK (default) ============ */
:root{
/* surfaces */
--ink:#140A0E; /* page background — warm near-black */
--ink-2:#1C1014;
--card:rgba(8,3,6,.42); /* translucent card floating on a band */
--card-solid:#211419; /* opaque card on the flat background */
--line:rgba(255,255,255,.15);
--line-soft:rgba(255,255,255,.08);
/* brand — straight off the thumbnails */
--amber:#FFBF00; /* FILL only; pairs with --on-amber */
--on-amber:#140A0E;
--accent:#FFBF00; /* TEXT / BORDER accent */
--accent-2:#FFD24D;
--accent-soft:#FFD97A;
--wine:#5B2C3C;
--wine-deep:#3F0A1A;
--plum:#432946;
--petrol:#16303F;
--petrol-2:#23415B;
--copper:#945D49;
--rust:#8A5658;
/* type */
--text:#F6EFE9;
--muted:rgba(246,239,233,.64);
--on-band:#FFFFFF; /* text sitting on a gradient band */
--on-band-muted:rgba(255,255,255,.72);
/* bands — each one a segment of the studio-wall sweep */
--band-hero:linear-gradient(105deg,#2A0710 0%,#5B2C3C 24%,#432946 46%,#16303F 68%,#6B4340 88%,#945D49 100%);
--band-1:linear-gradient(160deg,#5B2C3C 0%,#4A2439 52%,#432946 100%);
--band-2:linear-gradient(180deg,#3A2440 0%,#1E2E3D 100%);
--band-3:linear-gradient(200deg,#16303F 0%,#3E2E3C 55%,#7E4E42 100%);
--band-4:linear-gradient(160deg,#1B0E14 0%,#3A2038 55%,#170B10 100%);
/* the copper band's mid-stop is kept deliberately dark — at
#8A5546 the amber eyebrows dropped to 3.66:1 against it */
--band-5:linear-gradient(180deg,#4E322D 0%,#6B3E35 58%,#2A1219 100%);
--band-foot:linear-gradient(180deg,#22101A 0%,#120709 100%);
/* hero atmospherics */
--hero-beams:.5;
--grain:.07;
/* Capped by legibility, not taste: the pattern sits BEHIND body
copy, so a bright line passing under muted text lifts the local
background and eats contrast. .11 is the highest value that
still clears AA in the worst case (amber line under muted text
on the darkest band) — measured, see the note in README. */
--pattern-op:.11;
/* The VIBRANT layer — used wherever the backdrop is flat --ink and
the only text over it is display-sized: the hero's revealed
backdrop and About. Measured on #140A0E with the worst-lit contour
pixel under muted body text: .34 → 4.6:1, .38 → 4.47 (just under
AA), so .34 is the ceiling with margin. Do NOT apply this over the
coloured bands — the same measurement on band-3's lightest stop
(#7E4E42) gives 2.45:1. */
--pattern-vibrant:.34;
/* shadows */
--sh-1:0 18px 44px rgba(0,0,0,.44);
--sh-2:0 26px 70px rgba(0,0,0,.56);
--glow:0 0 34px rgba(255,191,0,.34);
/* fonts */
--display:'Montserrat','Arial Black',system-ui,sans-serif;
--body:'Barlow','Segoe UI',system-ui,sans-serif;
--nav-h:74px;
--radius:4px;
}
/* ============ TOKENS — LIGHT ============
Apple/Facebook-quiet: one grey page tone, white cards,
hairline rules, soft shadows, gradients gone. The amber and
the big uppercase type are what keep it unmistakably BDP.
====================================================== */
:root[data-theme="light"]{
/* warm neutrals, not clinical grey — the wine/copper end of the
brand palette pulled almost all the way to white, so light
mode still feels like the same brand rather than a blank page */
--ink:#F7F4F1; /* page */
--ink-2:#FFFFFF;
--card:#FFFFFF;
--card-solid:#FFFFFF;
--line:#E8E1DB;
--line-soft:#F1EBE6;
--amber:#FFBF00; /* unchanged — still a fill */
--on-amber:#140A0E;
--accent:#FFBF00; /* brand yellow, kept as-is in light mode */
--accent-2:#E8AE00;
--accent-soft:#FFBF00;
--text:#1B1114;
/* a touch darker than it looks like it needs to be — buys the
headroom the pattern layer costs behind secondary text */
--muted:#5C5651;
--on-band:#1B1114;
--on-band-muted:#5C5651;
/* bands alternate white / warm off-white. The brand colour
arrives as soft washes (see .band::after below), not as
flat fills — that's what keeps it clean but not sterile. */
--band-hero:linear-gradient(180deg,#FFFFFF 0%,#FBF7F4 100%);
--band-1:#FFFFFF;
--band-2:#FAF6F2;
--band-3:#FFFFFF;
--band-4:#FAF6F2;
--band-5:#FFFFFF;
--band-foot:#F3EDE8;
--hero-beams:0;
--grain:.03; /* lighter — white shows noise more */
--pattern-op:.16; /* same legibility cap as dark mode */
/* light's ink is #F7F4F1; measured with the DARKEST composited pixel
under #5C5651 muted text: .30 → 4.85:1, .32 → 4.76, .40 → 4.37 */
--pattern-vibrant:.30;
/* warm-tinted shadows read richer than neutral black on cream */
--sh-1:0 1px 2px rgba(74,38,26,.05), 0 10px 28px rgba(74,38,26,.07);
--sh-2:0 2px 8px rgba(74,38,26,.07), 0 26px 58px rgba(74,38,26,.13);
--glow:0 6px 22px rgba(255,191,0,.42);
}
/* ============ BASE ============ */
/* scroll-behavior is deliberately auto: main.js animates anchor
jumps itself so the duration is short and consistent, instead
of the browser's slower native easing */
html{scroll-behavior:auto;scroll-padding-top:calc(var(--nav-h) + 10px)}
body{
background:var(--ink);
color:var(--text);
font-family:var(--body);
font-size:1.02rem;
font-weight:400;
line-height:1.72;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ============ MOVING CONTOUR LAYER ============
pattern.js appends this canvas to . It is sandwiched
between the backgrounds and the content:
z-index 2+ text, images, cards, forms, pop-ups
z-index 1 ← this canvas
z-index auto section background gradients
That works because none of the section elements create their
own stacking context (position:relative with z-index:auto
doesn't), so a section's BACKGROUND paints below any
positioned element while .wrap — which every content
container carries — is lifted to z-index 2 and paints above.
Don't add a z-index to .band / .hero / section: it would trap
the content underneath the pattern.
Tune or kill it with --pattern-op.
====================================================== */
/* ONE fixed field for the whole site. Because it is position:fixed it
never scrolls, never scales and never re-tiles, so the hero's
revealed backdrop and About show the *same pixels* — that is what
makes them read as one page, and it is also why the card shrinking
over it can't drag the pattern into a pixelated zoom.
Vibrant everywhere, per the owner's ask. --pattern-op is kept as the
measured legibility cap for reference; if a real per-element audit
ever flags text on the lighter band stops, darken that stop rather
than dropping this back. */
.bg-pattern{
position:fixed;inset:0;width:100%;height:100%;
z-index:1;pointer-events:none;
opacity:var(--pattern-vibrant);
}
/* ============ FILM GRAIN ============
One fixed noise layer over the whole page. It sits above the
content on purpose (that's what makes flat gradients read as
printed rather than digital) but pointer-events:none means it
never intercepts a click. Turn it off by setting --grain:0.
====================================================== */
body::after{
content:'';position:fixed;inset:0;z-index:1200;pointer-events:none;
opacity:var(--grain);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:190px 190px;
}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--on-amber)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4,.display{
font-family:var(--display);
font-weight:900;
text-transform:uppercase;
line-height:.94;
letter-spacing:-.015em;
}
/* every content container rides above the pattern layer —
see the .bg-pattern comment for why this z-index matters */
.wrap{width:min(1240px,90%);margin-inline:auto;position:relative;z-index:2}
/* the ticker is a full-bleed band with no .wrap of its own */
.ticker{position:relative;z-index:2}
/* full-bleed band */
/* NOTE: no z-index here on purpose — see .bg-pattern */
.band{position:relative;overflow:hidden;color:var(--on-band)}
.band-1{background:var(--band-1)}
/* About is flat --ink, the same surface the hero's stage reveals, and
the same single fixed pattern shows through both — so crossing from
the card's backdrop into About has no change of colour and no change
of pattern. #about beats .band-1 on specificity; the token is left
alone for any other band-1 use. */
#about.band-1{background:var(--ink)}
.band-2{background:var(--band-2)}
.band-3{background:var(--band-3)}
.band-4{background:var(--band-4)}
.band-5{background:var(--band-5)}
.sec{padding:112px 0}
/* soft floor shading, so a band has depth like the studio wall */
.band::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
background:
radial-gradient(900px 420px at 12% 108%, rgba(0,0,0,.44), transparent 62%),
radial-gradient(900px 420px at 88% 108%, rgba(0,0,0,.44), transparent 62%);
}
/* light mode: no dark floor shading — instead a very soft brand
wash (amber top-right, wine bottom-left) so each band has some
air and colour without losing the white-page cleanliness */
:root[data-theme="light"] .band::after{
opacity:1;
background:
radial-gradient(680px 380px at 84% -10%, rgba(255,191,0,.11), transparent 66%),
radial-gradient(560px 340px at 6% 110%, rgba(120,58,74,.055), transparent 66%);
}
/* hairline to separate stacked white / off-white bands */
:root[data-theme="light"] .band + .band,
:root[data-theme="light"] .feature{border-top:1px solid var(--line-soft)}
/* ============ SECTION HEADINGS ============ */
.sec-head{max-width:820px;margin-bottom:56px}
.sec-head.center{margin-inline:auto;text-align:center}
/* the lead paragraph is max-width capped, so it needs auto side
margins too or it sits left inside a centred block */
.sec-head.center p{margin-inline:auto}
.eyebrow{
display:inline-block;font-family:var(--display);font-weight:800;font-size:.72rem;
text-transform:uppercase;letter-spacing:.3em;color:var(--accent);
margin-bottom:18px;
}
.sec-head h2{font-size:clamp(2.5rem,6vw,4.6rem)}
.sec-head p{
margin-top:22px;font-weight:300;font-size:1.02rem;line-height:1.85;
color:var(--on-band-muted);max-width:64ch;
}
.sec-head p b{font-weight:600;color:var(--on-band)}
.hl{color:var(--accent)}
/* ============ BUTTONS ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:var(--display);font-weight:800;font-size:.78rem;
text-transform:uppercase;letter-spacing:.18em;
padding:1.05rem 2.1rem;border:2px solid transparent;border-radius:var(--radius);
cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s;
text-align:center;
}
.btn:hover{transform:translateY(-2px)}
/* solid amber + near-black text — identical in both themes */
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.btn-primary:hover{background:#FFCE33;border-color:#FFCE33;box-shadow:var(--glow)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
/* thin outline */
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.band .btn-ghost{border-color:rgba(255,255,255,.48);color:#fff}
.band .btn-ghost:hover{border-color:var(--amber);background:var(--amber);color:var(--on-amber)}
:root[data-theme="light"] .band .btn-ghost{border-color:var(--line);color:var(--text)}
:root[data-theme="light"] .band .btn-ghost:hover{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
/* small outlined pill used on cards */
.btn-mini{
display:inline-block;font-family:var(--display);font-weight:800;font-size:.64rem;
text-transform:uppercase;letter-spacing:.2em;padding:.82rem 1.3rem;
border:1px solid var(--accent);color:var(--accent);border-radius:var(--radius);
transition:background .2s,color .2s,border-color .2s;
}
.btn-mini:hover{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.band .btn-mini{border-color:rgba(255,191,0,.6);color:var(--accent)}
:root[data-theme="light"] .band .btn-mini{border-color:var(--accent);color:var(--accent)}
/* ============ PILL ============ */
.pill{
display:inline-flex;align-items:center;gap:.4rem;
font-family:var(--display);font-weight:800;font-size:.66rem;
text-transform:uppercase;letter-spacing:.22em;
padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:100px;
color:var(--muted);
}
.pill-live{border-color:var(--accent);color:var(--accent)}
.band .pill{border-color:rgba(255,255,255,.4);color:#fff}
:root[data-theme="light"] .band .pill{border-color:var(--line);color:var(--muted)}
.band .pill-live{border-color:var(--accent);color:var(--accent)}
/* ============ ANNOUNCEMENT BAR ============
Fixed strip above the navbar. --anno-h defaults to 0 (so every
page that has no bar is unaffected and the nav sits at the top);
home.js sets it to the bar height only when the promo is live and
undismissed. The navbar reads the same variable for its own top,
so bar and nav can never overlap. */
/* --anno-close-w is both the ✕ button's tap width and the gap the scrolling
message is clipped at, so the two can never disagree. 46px clears the 44px
minimum used everywhere else on the site; the bar is 40px tall, so the
button is 46×40 rather than 44×44. */
:root{--anno-h:0px;--anno-close-w:46px}
.anno-bar{
position:fixed;top:0;left:0;right:0;z-index:960;
height:var(--anno-h);overflow:hidden;
background:var(--amber);color:var(--on-amber);
transition:height .25s ease;
}
/* The message scrolls right-to-left, same mechanism and the same speed as
the .ticker strip further down the page (44.2px/s — the ticker's own
1502px half-track over its 34s). home.js repeats the message until one
half of the track is wider than the viewport, clones that half, and sets
--anno-dur from the measured width, so the rate is identical on a phone
and on a 4K monitor and the seam never shows.
⚠️ The viewport element is NOT the bar: it stops short of the ✕. Padding
on .anno-bar could not do this job — `overflow:hidden` clips at the
PADDING box, so the old `padding:0 2.4rem` did nothing to keep the text
off the button, and at 375px the ✕ sat on top of the "Preorder →" link. */
.anno-viewport{
position:absolute;inset:0 var(--anno-close-w) 0 0;
overflow:hidden;display:flex;align-items:center;
}
.anno-track{display:flex;width:max-content;animation:anno-scroll var(--anno-dur,30s) linear infinite}
@keyframes anno-scroll{to{transform:translateX(-50%)}}
.anno-link{
display:inline-flex;align-items:center;gap:.55rem;
color:var(--on-amber);text-decoration:none;white-space:nowrap;
font-family:var(--display);font-weight:800;font-size:.66rem;
text-transform:uppercase;letter-spacing:.09em;
padding-right:2.8rem;
}
.anno-cta{text-decoration:underline;text-underline-offset:2px}
.anno-close{
position:absolute;right:0;top:0;
width:var(--anno-close-w);height:100%;
display:flex;align-items:center;justify-content:center;
background:none;border:none;color:var(--on-amber);cursor:pointer;
font-size:.85rem;line-height:1;padding:0;opacity:.75;
}
.anno-close:hover{opacity:1}
/* Matches the ticker: no autonomous motion when the visitor asks for none.
The repeats collapse to the single real link and it re-centres, i.e. the
static bar it has always been — so this path still has to FIT, which is
why the narrow breakpoint below tightens the type. */
@media (prefers-reduced-motion:reduce){
.anno-track{animation:none;width:auto}
.anno-track .anno-link{padding-right:0}
.anno-track .anno-link:not(:first-child){display:none}
.anno-viewport{justify-content:center}
}
@media(max-width:520px){
.anno-link{font-size:.58rem;letter-spacing:.05em;gap:.4rem}
}
/* Static + narrow is the one combination with nowhere to hide: the message
cannot scroll and it has to clear the ✕, so it must physically fit the
remaining ~329px at 375. Scoped to reduced-motion so the scrolling version
keeps the larger type — it has the whole track to breathe in. */
@media (prefers-reduced-motion:reduce) and (max-width:520px){
.anno-link{font-size:.5rem;letter-spacing:.015em;gap:.3rem}
}
/* ============ NAVBAR ============ */
.nav{
position:fixed;top:var(--anno-h);left:0;right:0;z-index:900;height:var(--nav-h);
display:flex;align-items:center;
transition:top .25s ease,background .3s,border-color .3s,backdrop-filter .3s;
border-bottom:1px solid transparent;
}
.nav.solid{
background:color-mix(in srgb, var(--ink) 86%, transparent);
backdrop-filter:saturate(180%) blur(16px);
border-bottom-color:var(--line-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;width:min(1240px,90%)}
.brand-logo img{height:38px;width:auto}
/* the logo art is white — flip it to near-black on light surfaces */
:root[data-theme="light"] .brand-logo img{filter:invert(1) brightness(.14)}
.nav-links{display:flex;align-items:center;gap:2.1rem;list-style:none}
.nav-links a{
font-family:var(--display);font-weight:700;font-size:.72rem;
text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
padding:.45rem 0;position:relative;transition:color .2s;
}
.nav-links a::after{
content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--amber);transition:right .25s;
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a.active{color:var(--accent)}
.nav-links a.btn{color:var(--on-amber);padding:.75rem 1.5rem;letter-spacing:.16em}
.nav-links a.btn::after{display:none}
.nav-right{display:flex;align-items:center;gap:.7rem}
.icon-btn{
/* 44px is the minimum comfortable touch target */
width:44px;height:44px;display:grid;place-items:center;
border:1px solid var(--line);border-radius:var(--radius);
background:transparent;cursor:pointer;position:relative;
transition:border-color .2s,color .2s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-moon{display:none}
:root[data-theme="light"] .theme-toggle .ic-sun{display:none}
:root[data-theme="light"] .theme-toggle .ic-moon{display:block}
.cart-count{
position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
display:none;place-items:center;background:var(--amber);color:var(--on-amber);
font-family:var(--display);font-weight:800;font-size:.62rem;border-radius:100px;
}
.cart-count.show{display:grid}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;cursor:pointer;padding:12px 11px}
.burger span{display:block;height:2px;background:currentColor;margin:0 0 4px;transition:transform .25s,opacity .25s}
.burger span:last-child{margin-bottom:0}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ============ SIDE DOT NAV ============ */
.dotnav{
position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:850;
display:grid;gap:14px;
}
.dotnav a{
width:9px;height:9px;border-radius:50%;border:1px solid var(--line);
background:transparent;transition:background .2s,border-color .2s,transform .2s;
position:relative;
}
.dotnav a::before{
content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);
font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--accent);white-space:nowrap;
opacity:0;pointer-events:none;transition:opacity .2s;
}
.dotnav a:hover::before{opacity:1}
.dotnav a:hover,.dotnav a.active{background:var(--amber);border-color:var(--amber);transform:scale(1.3)}
/* ============ HERO ============
ONE section, and the card IS the page. The entire hero view —
its background, its own contour layer, the h1, subtitle, CTAs and
the hosts — lives inside .hero-shot, which scales down into the
framed card as you scroll. What's revealed behind it is the ABOUT
band colour, so when the stage unpins the page appears to continue
straight into About with no seam. (The amber ticker moved below
About for the same reason — it would cut that continuity in half.)
Scroll becomes --p (0 → 1) on .hero-stage, written by main.js.
Everything below is a pure CSS function of it, so nothing can
drift out of sync and BDPHero.setProgress(p) reproduces any frame.
.hero itself must stay free of z-index / transform / filter /
opacity — any of those makes it a stacking context and drops its
content under the contour pattern (same rule as .band).
Stage layer order (its own context, .hero-stage is z-index 2):
6 .hero-shot::after amber frame, fades in
5 .hero-meta, .hero-scroll, .hero-cap
3 .hero-shot the whole mini page (never fades)
2 .hero-kin sweeping type rows
- stage is TRANSPARENT — what shows through is the site-wide
fixed .bg-pattern on flat --ink, the very same layer About
shows, which is why the two are indistinguishable
============================================================ */
.hero{
position:relative;
height:220vh; /* scroll runway — retime the whole
sequence here, taller = slower.
300vh felt sluggish; 220vh plus the
lerp in main.js matches the
reference's pacing */
background:var(--ink);
}
.hero-stage{
position:sticky;top:0;z-index:2;
height:100svh;overflow:hidden;
display:grid;
/* minmax(0,…) NOT 1fr: a plain 1fr track sizes to max-content, and
the nowrap marquee rows are thousands of pixels wide — they once
blew the column to 6187px and dragged the row with it. */
grid-template-rows:minmax(0,1fr);
grid-template-columns:minmax(0,1fr);
text-align:center;color:var(--on-band);
/* TRANSPARENT on purpose. The colour comes from .hero (flat --ink,
same as About) and the texture comes from the site-wide fixed
.bg-pattern showing straight through — one field, shared with
About, so there is literally nothing that can differ at the seam.
Giving this its own background or its own canvas is what used to
create the mismatch; don't reintroduce either. */
background:transparent;
--p:0; /* scroll progress, written by main.js */
--rs-move:1; /* how much of the horizontal type sweep to allow */
}
.hero-stage > *{grid-area:1/1;min-width:0;min-height:0}
/* NOTE: there is no separate backdrop canvas any more. What the
shrinking card reveals is the site-wide fixed .bg-pattern, already
at full --pattern-vibrant and already the exact field About shows.
Nothing to fade up: it was there the whole time, just covered. */
/* ---- the two type rows, sweeping past each other behind the card ----
Sized and paired like the reference: a serif italic line over a
heavy grotesk line, close together around the centre, so they read
as one lockup sliding apart rather than two banners. */
.hero-kin{
z-index:2;align-self:center;justify-self:stretch;pointer-events:none;
font-family:var(--display);font-weight:900;
font-size:clamp(1.7rem,5.4vw,4.3rem);line-height:1;
text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
opacity:clamp(0,calc((var(--p) - .18) * 3),1);
will-change:transform;
}
.hero-kin i{font-style:normal;opacity:.42;margin:0 .34em}
.hero-kin-a{
font-family:'Playfair Display',Georgia,serif;font-weight:700;font-style:italic;
letter-spacing:.01em;color:var(--accent);
transform:translateY(-5.4vh) translateX(calc((16% - 44% * var(--p)) * var(--rs-move)));
}
.hero-kin-b{color:rgba(255,255,255,.92);
transform:translateY(5.4vh) translateX(calc((-44% + 44% * var(--p)) * var(--rs-move)))}
/* light mode's backdrop is white: the white row flips to near-black.
The amber row stays raw brand yellow — decorative display type at
~100px, same documented brand-mark exception as big headings. */
:root[data-theme="light"] .hero-kin-b{color:var(--text)}
/* ---- THE SHOT: the entire hero page in one scalable element ----
The card NEVER fades. It shrinks and then stays, holding the frame
until the stage unpins and About scrolls up over it. */
.hero-shot{
position:relative;z-index:3;overflow:hidden;
background:var(--band-hero);
/* ONE source of truth for how far the card shrinks. The pattern
canvas below counter-scales by exactly this, so the two always
cancel — override --card-shrink alone (see the mobile block) and
never the transform, or the counter-scale silently stops matching
and the pattern zooms again. */
--card-shrink:.58; /* 1 → 0.42 */
transform:scale(calc(1 - var(--card-shrink) * var(--p)));
will-change:transform;
}
/* The hero's own texture: full vibrancy on landing, faded out by the
time the card is small — the revealed fixed layer behind takes over.
COUNTER-SCALED. Its parent is scale()d, and a canvas dragged through
a scale gets resampled: the browser rasterises the promoted layer at
one scale and stretches it, which is the pixelated "zoomed pattern"
bug. scale(1 / cardScale) puts its NET on-screen scale back at 1, so
it always paints 1:1 with its backing store. It also means the
texture doesn't shrink with the card, so it stays the same size as
the field around it — reading as one continuous surface seen through
a window rather than a shrunken picture of one.
Its own will-change gets it a layer rasterised at ITS scale, not the
parent's. Overflow on .hero-shot clips the excess. */
.hero-shot-pattern{
position:absolute;inset:0;z-index:0;
width:100%;height:100%;pointer-events:none;
opacity:clamp(0, calc(var(--pattern-vibrant) * (1 - var(--p) * 1.6)), 1);
transform:scale(calc(1 / (1 - var(--card-shrink) * var(--p))));
transform-origin:center;
will-change:transform;
}
/* floor vignette so the type and hosts always have ground to sit on */
.hero-shot::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(1100px 700px at 20% 40%, rgba(0,0,0,.30), transparent 68%),
linear-gradient(to top, rgba(12,5,8,.85) 0%, transparent 44%);
}
:root[data-theme="light"] .hero-shot::before{
background:linear-gradient(to top, rgba(245,245,247,.92) 0%, transparent 42%);
}
/* the frame that makes the shrunken page read as a card */
.hero-shot::after{
content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
border:1px solid var(--accent);opacity:calc(.7 * var(--p));
}
.hero-inner{
position:absolute;inset:0;z-index:3;
display:flex;flex-direction:column;align-items:center;
padding:calc(var(--nav-h) + clamp(16px,4vh,52px)) 5vw 0;
}
.hero-mark{margin-bottom:clamp(10px,1.8vh,22px)}
.hero-mark img{width:clamp(42px,4.8vw,60px);height:auto;display:block;opacity:.94}
:root[data-theme="light"] .hero-mark img{filter:invert(1) brightness(.14)}
/* Three lines, ONE voice — equal size and weight, the middle line in
brand amber. No small/large split. */
/* --cast-h is the single source for how tall the host cut-outs are.
The hero's clearance maths depends on it: the transparent margin
above their heads is ~32% of the image, so the heads occupy the
bottom ~0.68 x --cast-h of the screen. Raise this and you eat into
the CTA row again — re-measure if you do. */
:root{--cast-h:32svh}
.hero-name{
font-weight:900;line-height:.95;letter-spacing:-.02em;
/* the vh term is what stops a short desktop (1280x800) from
rendering ~340px of headline and shoving the CTAs down into the
hosts. On tall screens the 7.2rem cap still governs, so nothing
changes there. */
font-size:clamp(2.7rem,min(8.8vw,11svh),7.2rem);
}
.hero-name span{display:block}
.hero-name .hn-mid{color:var(--accent)}
.hero-sub{
margin-top:clamp(14px,2.2vh,26px);max-width:56ch;
font-weight:300;font-size:clamp(.95rem,1.35vw,1.12rem);line-height:1.75;
color:var(--on-band-muted);
}
.hero-cta{
display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
margin-top:clamp(18px,3vh,34px);
}
/* the hosts, standing on the shot's bottom edge. They scale with the
shot — that is the whole "page gets smaller" effect.
⚠️ READ THE WHOLE HISTORY BEFORE CHANGING z-index HERE. It has been
flipped twice and the two owner requests behind those flips are NOT
in conflict — they were about different things:
29 Jul — cast in front (z4). Reference site does the same.
1 Aug — cast moved BEHIND (z2): "hosts are almost covering the
CTAs". Measured at 1280x800 the heads started 62px ABOVE
the button row and ran straight through the LABELS. The
real culprit was a height-budget clash, not stacking:
the hero's type block is a roughly fixed ~600px while the
cast scales with the viewport, so on a short desktop the
two did not both fit. --cast-h came down from 42svh and
.hero-name gained a height term, which is what actually
fixed it. Moving to z2 was the belt-and-braces half.
1 Aug — cast back in FRONT (z4, current). With the height budget
already fixed the overlap is now tiny and only at the
BOTTOM EDGE of the ghost button: at 390x844 the button
runs 544.5->603.5 and the cut-outs start at 590.5, so 13px
of border, nothing near the label. Behind the content that
border drew a hard line across Beng's cap, which is what
the owner saw on a phone.
So: in front is right *while the heights stay budgeted*. If the type
block or --cast-h ever grows again, fix the BUDGET (--cast-h, the
.hero-name clamp, .hero-inner padding-bottom) — do not "solve" it by
dropping the cast behind the content, or the cap gets sliced again.
The guard rail is the check below: the heads must stay clear of the
button LABELS, not merely of the buttons.
pointer-events:none keeps the buttons clickable through the
cut-outs regardless of which way the stacking goes. */
.hero-cast{
position:absolute;left:0;right:0;bottom:0;z-index:4;
display:flex;align-items:flex-end;justify-content:center;
pointer-events:none;
}
.hero-cast img{
width:auto;height:auto;max-width:30%;max-height:var(--cast-h);display:block;
filter:drop-shadow(0 26px 50px rgba(0,0,0,.45));
}
:root[data-theme="light"] .hero-cast img{
filter:drop-shadow(0 22px 40px rgba(70,48,36,.22));
}
.hc-beng{transform:translateX(9%)}
.hc-yen{transform:translateX(-9%)}
/* Caption above the card. Lives OUTSIDE the shot (which clips its
overflow) and doesn't scale with it, so no counter-scaling games:
at the end scale of .42 the card's top edge is 29svh from the top,
and -23svh from centre puts this just above it. Small amber text
needs the dark backing plate: raw amber over a lit contour measures
4.38:1, under the 4.5:1 floor for text this size. */
.hero-cap{
z-index:5;align-self:center;justify-self:center;
transform:translateY(-23svh);
white-space:nowrap;
font-family:var(--display);font-weight:900;font-size:.56rem;
text-transform:uppercase;letter-spacing:.26em;
color:var(--accent);
/* rises and STAYS — the card no longer fades, so the caption that
belongs to it shouldn't either */
opacity:clamp(0, calc(var(--p) * 2 - .6), 1);
background:rgba(18,10,13,.72);padding:.34rem .7rem;border-radius:3px;
}
/* ---- corner furniture: leaves as the shot shrinks ---- */
.hero-meta{
z-index:5;align-self:end;justify-self:start;
margin:0 0 clamp(16px,3vh,32px) clamp(16px,4vw,44px);
display:flex;flex-direction:column;gap:.3rem;text-align:left;
font-family:var(--display);text-transform:uppercase;
opacity:clamp(0,calc(1 - var(--p) * 3),1);
}
.hm-k{font-weight:900;font-size:.56rem;letter-spacing:.24em;color:var(--accent)}
.hm-v{font-weight:700;font-size:.58rem;letter-spacing:.15em;color:var(--on-band-muted)}
/* small yellow text can't sit on light mode's near-white — flip it to a
filled chip, same rule as .eyebrow (see KEEPING THE BRAND YELLOW
LEGIBLE at the bottom of this file) */
:root[data-theme="light"] .hm-k{
align-self:flex-start;background:var(--amber);color:var(--on-amber);
padding:.22rem .5rem;border-radius:3px;
}
/* min-width/padding are the TAP TARGET, not decoration: below 560px
the "Scroll" label is hidden (see the mobile block) and all that's
left is the 1px rule, which was a 1×36px link — impossible to
hit with a thumb and a WCAG 2.5.8 failure. The box stays ≥44px
wide; nothing about it is visible. */
.hero-scroll{
z-index:5;align-self:end;justify-self:end;
margin:0 clamp(16px,4vw,44px) clamp(16px,3vh,32px) 0;
min-width:44px;padding:4px 0;
display:flex;flex-direction:column;align-items:center;gap:.6rem;
font-family:var(--display);font-weight:800;font-size:.56rem;
text-transform:uppercase;letter-spacing:.24em;color:var(--on-band-muted);
transition:color .2s;
opacity:clamp(0,calc(1 - var(--p) * 3),1);
}
.hero-scroll:hover{color:var(--accent)}
:root[data-theme="light"] .hero-scroll:hover{color:var(--text)}
.hero-scroll i{
display:block;width:1px;height:36px;
background:linear-gradient(to bottom,var(--accent),transparent);
animation:scrollCue 2.4s ease-in-out infinite;transform-origin:top;
}
@keyframes scrollCue{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media (max-width:560px){
/* a .42-scale card of a 375px page is a postage stamp — end bigger,
and move the caption up to match (half-height .6 × 50svh = 30svh).
Override the VARIABLE only: the transform itself is shared so the
pattern's counter-scale keeps cancelling it exactly. */
/* phones get taller hosts back: the layout there centres the content
above them rather than competing for the same band */
.hero-shot{--card-shrink:.4}
:root{--cast-h:40svh}
.hero-cap{transform:translateY(-32svh)}
/* Close the gap between the wordmark block and the hosts: centre the
content in the space above them instead of pinning it under the
navbar. The padding is what reserves the hosts' half of the screen
— it tracks --cast-h so the two can't drift apart. The cast paints
IN FRONT of the content (see .hero-cast), so a graze reads as the
hosts standing over the button rather than a border sliced across a
cap — but the padding is what keeps that graze off the LABELS, so
lower it and the type starts disappearing behind a shoulder. */
/* ⚠️ Do NOT raise this factor to buy clearance over the hosts. It was
tried at .78 and it lifts the type block by half the change, which
on a short phone drives the .hero-mark straight up into the navbar's
own logo (measured at 375x667: mark 53.7-95.7 against a navbar of
40-114). The height budget on short screens belongs to --cast-h,
which is corrected below — shrinking the cast moves the heads DOWN
and, because this padding tracks --cast-h, gently moves the type
down too, instead of pushing it under the navbar. */
.hero-inner{justify-content:center;padding-bottom:calc(var(--cast-h) * .62)}
.hero-cast img{max-width:52%;max-height:var(--cast-h)}
.hc-beng{transform:translateX(13%)}
.hc-yen{transform:translateX(-13%)}
}
/* ⚠️ SHORT PHONES ARE THE REAL CASE, AND THEY ARE NOT THE DEVICE SIZE.
A phone browser's visible viewport is far shorter than the spec sheet:
Safari on a 390x844 iPhone with both toolbars showing is about 390x681,
and svh sizes against that. The hero's type block is close to fixed
height, so on a short viewport 40svh of cast leaves too little room and
the heads ride up into the CTA row — which only matters now that the
cast paints in FRONT of the content.
The lever is to DROP the cast, not to shrink it and not to lift the
type. Shrinking --cast-h barely helps, because this section's
padding-bottom tracks --cast-h and pulls the type back down by half of
whatever the heads gain (measured: 40svh -> 32svh bought only 4px).
Lifting the type puts .hero-mark into the navbar. Dropping the cast is
1px of clearance per 1px of drop, and it costs only torso, which the
bottom of the screen was already cropping.
At -7%: the label clears by 14.2px while the heads still cross the
ghost button's border by 8.1px — the hosts read as standing IN FRONT
of the button, which is the point, without touching the words.
Measured with the cut-outs' true alpha — they carry ~33% transparent
space above the heads, so the image's bounding box is meaningless here;
scan for the first opaque row instead. */
@media (max-width:560px) and (max-height:740px){
.hero-cast{bottom:calc(var(--cast-h) * -.07)}
}
/* Below roughly 630px of visible height the hero's type block and the cast
simply do not both fit — a 360x640 Android showing its toolbar renders at
about 360x560, and there the heads reach 37.7px into the "Preorder the
drop" LABEL even after the drop above. In front, that would swallow the
words; the drop needed to clear it would leave the hosts as a strip of
shoulders along the bottom edge. So on those viewports only, the cast
goes back behind the content: a border grazing a cap is cosmetic, an
unreadable CTA is not. Everything taller keeps the hosts in front.
Crossover measured: 360x610 label -13.5, 360x640 label +4.7. */
@media (max-width:560px) and (max-height:630px){
.hero-cast{z-index:2}
.hero-scroll span{display:none}
.hero-kin-a{transform:translateY(-4.6vh) translateX(calc((16% - 44% * var(--p)) * var(--rs-move)))}
.hero-kin-b{transform:translateY(4.6vh) translateX(calc((-44% + 44% * var(--p)) * var(--rs-move)))}
}
/* Reduced motion KEEPS the sequence. It is scroll-linked — it only
moves while the visitor is moving, and stops the moment they stop,
which is a different thing from animation that plays on its own.
Switching it off outright made the hero look broken on any machine
with Windows animations disabled, including this project's own.
Only the wide horizontal type sweep is damped; the ambient pattern
morph is autonomous motion, so pattern.js correctly freezes THAT
to a static frame. */
@media (prefers-reduced-motion:reduce){
.hero-stage{--rs-move:.2}
.hero-scroll i{animation:none}
}
/* ============ TICKER (LED strip) ============ */
.ticker{
background:var(--amber);color:var(--on-amber);overflow:hidden;
padding:.85rem 0;
}
.ticker-track{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker-track span{
font-family:var(--display);font-weight:900;font-size:.86rem;
text-transform:uppercase;letter-spacing:.24em;white-space:nowrap;
}
.ticker-track i{font-style:normal;opacity:.5;margin:0 1.6rem}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
/* ============ ABOUT ============ */
.story{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.story p{margin-bottom:1.15rem;font-weight:300;line-height:1.9;color:var(--on-band-muted)}
.story p strong{font-weight:600;color:var(--on-band)}
.story-quote{border-left:3px solid var(--amber);padding-left:28px}
.story-quote .q{
font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,2.6vw,2.1rem);
line-height:1.14;text-transform:uppercase;color:var(--on-band);
}
.story-quote .sig{
margin-top:16px;font-family:var(--display);font-weight:700;font-size:.7rem;
text-transform:uppercase;letter-spacing:.24em;color:var(--accent);
}
/* ============ HOSTS ============
The cut-outs are transparent PNGs, so the photo deliberately
BREAKS OUT of the card — it stands on the floor of the photo
panel and overflows above the top edge. That needs
overflow:visible on both the card and the panel, plus the
170px of clearance .hosts reserves above itself.
── THE YELLOW ───────────────────────────────────────────────
These are the only two portraits on the page, so they carry the
brand colour rather than sitting in a grey box: an amber hairline
round the card, the stage-light glow the cut-out stands in, a
SOLID amber rule under the photo, an amber chip for the role and
amber-outlined tags. Every one of those is a FILL or a border —
the body copy underneath never turns yellow, so nothing here
trades contrast for colour (see the light-mode note at the foot
of this file). The washes are all kept above the paragraph and
≤.10 alpha, which leaves --on-band-muted where it already was.
====================================================== */
.hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:170px}
.host{
background:
linear-gradient(180deg, color-mix(in srgb,var(--amber) 9%,transparent) 0%, transparent 62%),
var(--card);
border:1px solid color-mix(in srgb,var(--amber) 38%,transparent);
overflow:visible;
transition:transform .3s,border-color .3s,box-shadow .3s;
}
/* light mode drops borders everywhere else, but this one stays —
it's the yellow, not a divider */
:root[data-theme="light"] .host{
border-color:color-mix(in srgb,var(--amber) 55%,transparent);
box-shadow:var(--sh-1);
}
.host:hover{
transform:translateY(-6px);border-color:var(--amber);
box-shadow:var(--sh-2), 0 16px 44px rgba(255,191,0,.20);
}
/* Light mode needs its own hover: the block above it is (0,3,0) and
outranks .host:hover (0,2,0), so light mode lifted on hover but
never lit up — it kept re-asserting the resting shadow. */
:root[data-theme="light"] .host:hover{
border-color:var(--amber);
box-shadow:var(--sh-2), 0 16px 44px rgba(255,191,0,.34);
}
.host-photo{
position:relative;height:250px;overflow:visible;
border-bottom:2px solid var(--amber);
background:radial-gradient(420px 260px at 50% 120%, rgba(255,191,0,.34), rgba(67,41,70,.16) 56%, transparent 78%);
}
:root[data-theme="light"] .host-photo{
background:radial-gradient(420px 260px at 50% 120%, rgba(255,191,0,.38), rgba(140,110,150,.10) 56%, transparent 78%);
}
.host-photo img{
position:absolute;left:50%;bottom:0;transform:translateX(-50%);
height:172%;width:auto;max-width:none;object-fit:contain;object-position:bottom;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
:root[data-theme="light"] .host-photo img{filter:drop-shadow(0 18px 30px rgba(20,10,14,.24))}
.host-body{padding:26px 28px 30px}
.host h3{font-size:1.7rem;margin-bottom:8px}
.host h3 em{font-style:normal;color:var(--accent)}
/* The role reads as a printed chip in BOTH themes — light mode was
already flipping it to a fill for contrast, dark just matches it
now so the two themes show the same card.
Selector is .host .host-role, not .host-role: this is a