/* ============================================================
PASSION FLOWER Ai1 — neon-nightlife scroll site
Engine structure (.scrub/.sticky/.frame-canvas) preserved from
scroll-cinematic. Only the brand/content layer is new.
============================================================ */
:root {
/* --- core neutrals --- */
--ink: #f7f3ff;
--bg: #05040a; /* near-black, faint violet */
--bg-2: #0b0814;
/* --- 5 PASSION FLOWER BRAND COLORS — sampled from brand/palette.png --- */
--pf-1: #e85760; /* coral red */
--pf-2: #f1ba45; /* marigold */
--pf-3: #d0dd47; /* chartreuse */
--pf-4: #4396cd; /* sky blue */
--pf-5: #863f7b; /* plum purple */
/* primary accent = first brand color; swap if you prefer another */
--accent: var(--pf-1);
--accent-2: var(--pf-5);
/* Inter throughout — Apple-like. Display = heavier weights, body = regular. */
--font-display: "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* TEST: cinematic message headlines (curtain / takeover beats / tagline). Set to
Roboto to trial it; falls back to the display stack. Revert by pointing this
back at var(--font-display) and dropping Roboto from the font . */
--font-message: "Roboto", var(--font-display);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* CSS infinity-studio sweep: pure black falling into a soft floor-glow pool
low-center. Mathematically smooth (no banding). Used behind the hero canvas
(so the clip can fade INTO it) and on the brand-hold section. */
.studio-bg {
background:
radial-gradient(120% 75% at 50% 116%, rgba(60,60,72,0.55) 0%, rgba(20,20,26,0.0) 55%),
radial-gradient(90% 60% at 50% 100%, rgba(120,120,140,0.18) 0%, rgba(0,0,0,0) 60%),
#050507;
}
body {
background: #050507;
color: var(--ink);
font-family: var(--font-body);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ---------- Sticky nav (hidden during hero, seats in when logo docks) ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 60; /* above the nav-overlay (52) so the burger stays clickable to close */
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 28px; /* taller header — more breathing room for the logo */
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
color: rgba(247, 243, 255, 0.72);
mix-blend-mode: difference; /* keeps burger + EST text legible over the hero video */
transition: background 0.5s ease, border-color 0.5s ease;
}
/* The nav (burger + EST text) is ALWAYS present. Only the frosted bar background
appears once the hero logo docks into it. */
.nav-docked .nav {
mix-blend-mode: normal;
background: rgba(8, 6, 14, 0.55);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-bottom: 1px solid rgba(247, 243, 255, 0.08);
}
.nav-brand .dot { color: var(--accent); margin: 0 3px; }
/* "PRODUCT FINDER" top-bar link — pure white with a soft glow, no underline */
.nav-right { color: inherit; }
.nav-right--link {
text-decoration: none; color: #fff; cursor: pointer;
text-shadow: 0 0 9px rgba(255,255,255,0.5), 0 0 3px rgba(255,255,255,0.55);
transition: opacity 0.2s ease, text-shadow 0.2s ease;
}
.nav-right--link:hover { opacity: 0.85; text-shadow: 0 0 13px rgba(255,255,255,0.7), 0 0 4px rgba(255,255,255,0.6); }
/* Hamburger menu — left corner */
.nav-burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 30px;
height: 22px;
padding: 0;
background: none;
border: none;
cursor: pointer;
z-index: 60;
}
.nav-burger span {
display: block;
width: 100%;
height: 2px;
background: rgba(247, 243, 255, 0.9);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Nav logo: centered in the bar. Hidden until the hero logo docks into this slot
(the cross-fade hand-off), then it's the persistent seated logo. */
.nav-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: auto;
display: block;
opacity: 0;
transition: opacity 0.35s ease;
}
.nav-docked .nav-logo { opacity: 1; }
.nav-mid { color: var(--accent-2); }
/* ---------- Full-screen nav overlay (the menu) ---------- */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 52; /* below .nav (60) so the burger/X stays clickable on top */
display: flex;
align-items: center;
background: rgba(6, 5, 12, 0.94);
backdrop-filter: blur(22px) saturate(120%);
-webkit-backdrop-filter: blur(22px) saturate(120%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
body.menu-open .nav-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.5s ease, visibility 0s;
}
/* burger spans render clean (no difference-blend) over the open overlay */
body.menu-open .nav { mix-blend-mode: normal; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-overlay-inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 7vw;
display: flex;
flex-direction: column;
gap: 36px;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(34px, 6.5vw, 72px);
line-height: 1.08;
letter-spacing: -0.02em;
color: rgba(247, 243, 255, 0.92);
text-decoration: none;
background: none; border: none; padding: 4px 0; cursor: pointer;
/* staggered reveal on open */
opacity: 0;
transform: translateY(36px);
transition: color 0.25s ease;
}
.nav-link:hover { color: var(--accent); }
body.menu-open .nav-link {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.55s cubic-bezier(.2,.7,.2,1), color 0.25s ease;
}
body.menu-open .nav-list > li:nth-child(1) .nav-link { transition-delay: 0.08s; }
body.menu-open .nav-list > li:nth-child(2) .nav-link { transition-delay: 0.14s; }
body.menu-open .nav-list > li:nth-child(3) .nav-link { transition-delay: 0.20s; }
body.menu-open .nav-list > li:nth-child(4) .nav-link { transition-delay: 0.26s; }
.nav-caret {
width: 0.4em; height: 0.4em;
border-right: 3px solid currentColor;
border-bottom: 3px solid currentColor;
transform: rotate(45deg);
transition: transform 0.3s ease;
margin-top: -0.18em;
}
.nav-has-sub.open .nav-caret { transform: rotate(-135deg); }
.nav-sub {
list-style: none; margin: 6px 0 0; padding: 0;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height 0.45s ease, opacity 0.35s ease;
}
.nav-has-sub.open .nav-sub { max-height: 460px; opacity: 1; }
.nav-sub a {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(15px, 1.9vw, 20px);
letter-spacing: 0.01em;
color: rgba(247, 243, 255, 0.58);
text-decoration: none;
padding: 7px 0;
transition: color 0.2s ease;
}
.nav-sub a:hover { color: var(--accent); }
.nav-overlay-foot {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
margin-top: 12px;
font-family: var(--font-display);
font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
color: rgba(247, 243, 255, 0.45);
}
.nav-overlay-foot a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.nav-overlay-foot a:hover { color: var(--accent); }
.nav-overlay-legal { display: inline-flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 640px) {
/* MOBILE menu: a fully fleshed-out, ALWAYS-EXPANDED list (no accordions). Each
group is a quiet section header with all its links shown beneath it. The
overlay itself is the scroll container (block, not flex — flex centering was
pinning the inner to viewport height and blocking scroll). */
.nav-overlay {
display: block; align-items: initial; padding: 0;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav-overlay-inner {
display: block; max-width: none; width: 100%; margin: 0; min-height: 0;
padding: calc(var(--nav-h, 75px) + 18px) 9vw calc(40px + env(safe-area-inset-bottom));
}
.nav-overlay-inner > .nav-list { margin-bottom: 26px; }
.nav-list { display: flex; flex-direction: column; gap: 26px; width: 100%; }
/* group header = a small static label, NOT a big collapsible button */
.nav-has-sub { display: flex; flex-direction: column; gap: 4px; }
.nav-parent.nav-link {
opacity: 1 !important; transform: none !important; cursor: default;
font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(247, 243, 255, 0.42); padding: 0 0 6px;
border-bottom: 1px solid rgba(247, 243, 255, 0.1);
pointer-events: none; /* not a toggle on mobile */
}
.nav-caret { display: none; } /* no accordion caret */
/* subs always visible, laid out as a clean tappable list */
.nav-sub {
max-height: none !important; opacity: 1 !important; overflow: visible;
margin: 2px 0 0; display: flex; flex-direction: column;
}
.nav-sub a {
font-family: var(--font-display); font-weight: 600; font-size: 21px;
letter-spacing: -0.01em; color: rgba(247, 243, 255, 0.92);
padding: 11px 0; border-bottom: 1px solid rgba(247, 243, 255, 0.06);
}
.nav-sub li:last-child a { border-bottom: none; }
.nav-sub a:active { color: var(--accent); }
/* standalone top-level links (if any) stay readable but not giant */
.nav-list > li:not(.nav-has-sub) > .nav-link {
opacity: 1 !important; transform: none !important;
font-size: 26px; font-weight: 800; padding: 8px 0;
}
.nav-overlay-foot {
flex-direction: column; align-items: flex-start; gap: 10px;
margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(247, 243, 255, 0.1);
}
.nav-overlay-legal { gap: 16px; }
}
/* ---------- Desktop: full-width MEGA MENU dropping under the topbar ---------- */
@media (min-width: 768px) {
.nav-overlay {
align-items: flex-start; /* panel pinned to the top */
background: rgba(6, 5, 12, 0.55); /* light scrim — click-out to close */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
overflow: hidden; /* clip the panel as it drops in */
}
/* topbar gets its own frosted bar so the panel reads as "just under" it */
body.menu-open .nav {
background: rgba(8, 6, 14, 0.88);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-bottom: 1px solid rgba(247, 243, 255, 0.08);
}
.nav-overlay-inner {
width: 100%;
max-width: none;
margin: 0;
padding: 132px 6vw 52px; /* clear the ~120px topbar */
background: rgba(9, 7, 16, 0.98);
backdrop-filter: blur(24px) saturate(120%);
-webkit-backdrop-filter: blur(24px) saturate(120%);
border-bottom: 1px solid rgba(247, 243, 255, 0.08);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 0 5vw;
transform: translateY(-100%); /* drops down from behind the topbar */
transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}
body.menu-open .nav-overlay-inner { transform: translateY(0); }
.nav-list {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
gap: 5vw;
}
.nav-link {
font-size: clamp(19px, 1.7vw, 26px); /* column-header scale, not full-screen */
opacity: 1; /* appears with the panel (no big stagger) */
transform: none;
padding: 2px 0;
}
body.menu-open .nav-link { transform: none; transition-delay: 0s; }
.nav-caret { display: none; } /* Products is always expanded on desktop */
.nav-sub {
max-height: none !important;
opacity: 1 !important;
overflow: visible;
margin-top: 16px;
}
.nav-sub a { font-size: 15px; padding: 6px 0; color: rgba(247, 243, 255, 0.55); }
.nav-overlay-foot {
flex-basis: 100%;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(247, 243, 255, 0.07);
}
}
/* ---------- Scrub sections (canvas frame-scrub) ---------- */
.scrub {
position: relative;
height: 500vh; /* scroll distance = playback length */
}
.scrub.tall {
/* clip plays over ~first 80% of this height; last ~20% (~2 screens) holds
the brand lockup on the studio BG after the vape fades away */
height: 1000vh;
}
.sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
display: grid;
place-items: center;
/* Transparent: the fixed cart canvas (z-index -1) is the backdrop, so the
cart shows through and can persist behind the next section's entrance. */
background: transparent;
}
/* the scrub canvas HOLDS at full opacity as a fixed backdrop through the
hero→spectrum handoff (the dimmed cart backs "FIND YOUR LEAN"); the opaque
sections after spectrum cover it once scrolled past */
.frame-canvas { transition: opacity 0.15s linear; }
.frame-canvas {
position: fixed; /* persists behind content so the cart can HOLD
across the hero→spectrum handoff, then fade out */
inset: 0;
z-index: -1; /* behind in-flow content, above the body backdrop */
width: 100%;
height: 100%;
object-fit: cover;
}
/* End-still spin loop: same fixed backdrop layer as the cart canvas, painted just
above it (later in DOM) and below the end-tint. Hidden until JS engages it at the
end of the scrub, then fades in over the frozen frame and loops on its own. */
.hero-spin {
position: fixed;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0; /* instant cut on engage (no fade) — the cut lands on
frame 400, which the loop was generated from */
/* Size/position match the rotating-cart loop to scrub frame 400 at the handoff:
the spin clip's cart renders ~2.2% SMALLER than frame 400, so scale it up to
match (scale-in only => never opens a gap). translateY trims the ~2px vertical
drift (incl. Half B's seamNudgeB). Both are tunable dials. The residual cap
fringe is the spin's rotation pose vs frame 400 — that's the intended hard cut. */
transform: scale(1.022) translateY(2px);
transform-origin: center;
pointer-events: none;
will-change: opacity, transform;
}
/* ---------- Opening curtain (black title card) ---------- */
.hero-curtain {
position: absolute;
inset: 0;
z-index: 16; /* above the corner HUD (15) so the opening title card still covers it */
background: #050507;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 34px;
padding: 0 24px;
text-align: center;
will-change: opacity;
}
.hero-curtain-logo {
width: clamp(120px, 15vw, 210px);
height: auto;
opacity: 0.96;
}
.hero-curtain-line {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.1rem, 6.2vw, 5.2rem);
letter-spacing: -0.02em;
line-height: 0.82; /* tight cinematic stack */
color: #fff;
}
.hero-curtain-hint {
margin-top: 8px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.4em;
text-indent: 0.4em; /* compensate trailing letter-spacing → truly centered */
color: rgba(247, 243, 255, 0.6);
}
/* Pulsing rainbow line dropping down from SCROLL — our brand spectrum. */
.hero-curtain-rainbow {
width: 2px;
height: 64px;
margin-top: 14px;
border-radius: 2px;
background: linear-gradient(180deg,
var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5));
transform-origin: top center;
animation: rainbowDrop 1.9s ease-in-out infinite;
}
@keyframes rainbowDrop {
0%, 100% { opacity: 0.3; transform: scaleY(0.55); }
50% { opacity: 1; transform: scaleY(1); }
}
/* ---------- Overlay scroll copy ---------- */
.overlay {
position: relative;
z-index: 10;
text-align: center;
padding: 0 24px;
}
.reveal-line, .frame-line {
position: absolute;
left: 50%; top: 72%; /* lower third — away from the centered/tilted vape */
transform: translate(-50%, -50%);
width: max-content;
max-width: 96vw;
text-align: center;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.6rem, 9.5vw, 7.5rem);
letter-spacing: -0.02em;
line-height: 0.82; /* tight cinematic stack */
opacity: 0;
color: #ffffff;
/* layered shadow: tight dark halo for edge contrast + soft glow for depth */
text-shadow:
0 2px 18px rgba(0, 0, 0, 0.85),
0 0 4px rgba(0, 0, 0, 0.7),
0 0 60px rgba(0, 0, 0, 0.5);
will-change: opacity, transform;
}
.reveal-line.accent {
color: var(--accent);
text-shadow: 0 0 60px rgba(232, 87, 96, 0.5);
}
/* Fit-to-width messages: only the explicit
breaks (no auto-wrap), and JS
sets font-size to fill the viewport width. max-width removed so it can fill. */
.frame-line {
white-space: nowrap;
max-width: none;
font-size: 8vw; /* fallback before JS fit runs */
}
/* TEST: Roboto on the cinematic message headlines only (curtain line, takeover
beats, hero tagline). Roboto ships no 600/800 weights, so 800 renders as 900
(Black) and the tagline's 600 as 700 (Bold). Remove this block to revert. */
.hero-curtain-line,
.frame-line,
.hero-tagline {
font-family: var(--font-message);
}
/* DESKTOP: all cinematic headlines render at one fixed size (the JS width-fit is
disabled ≥641px; it still runs on mobile, where a fixed size would overflow). */
@media (min-width: 641px) {
.hero-curtain-line,
.frame-line {
font-size: 78px;
}
}
.hero-curtain-line {
white-space: nowrap;
width: max-content;
}
/* Desktop: words flow as a sentence (the desk-br gives a controlled break). */
.frame-line .w, .hero-curtain-line .w { display: inline; }
/* Desktop keeps "AWARD-WINNING" (hyphenated); the split mobile words are hidden. */
.hero-curtain-line .awl-mob { display: none; }
/* End tint: sits ABOVE the cart but BELOW the lockup text (overlay z10), so the
cart stays visible behind the final brand message. JS fades it in, then eases
it 10% lighter after the tagline seats. */
.hero-end-tint {
position: fixed; /* fixed like the cart so it holds + fades WITH it */
inset: 0;
z-index: -1; /* just above the cart canvas (later in DOM), below text */
background: #000;
opacity: 0;
pointer-events: none;
will-change: opacity;
}
/* Frame-45 freeze: black tint over the paused frame; JS fades it in/out. */
.hero-takeover {
position: absolute;
inset: 0;
z-index: 14; /* tint sits above the canvas/product, but BELOW the corner HUD (15) + curtain (16) so the corners stay bright */
background: rgba(0, 0, 0, 0.5);
opacity: 0;
will-change: opacity;
}
/* Full-screen white messages: centered. DESKTOP = 2 lines via a desk-br, exactly
like the opening curtain (words flow inline, fit-to-width). MOBILE stacks each
word — see the @media block below. */
.takeover {
top: 50%; /* centered, not lower-third */
line-height: 0.82; /* tight cinematic stack */
color: #fff;
text-shadow: none;
}
.takeover .w { white-space: nowrap; } /* keep word-groups (e.g. "IN THE") on one line */
/* "IN THE / COLORS / YOU LOVE" — 3-tier stack, always vertical. COLORS is larger
and each letter takes a brand color (6 letters cycle the 5 brand colors). */
.colors-line { white-space: normal; line-height: 0.82; }
.colors-line .cl-line { display: block; white-space: nowrap; }
.colors-line .cl-sm { color: #fff; }
.colors-line .cl-big { font-size: 1.5em; letter-spacing: 0.02em; margin: 0.05em 0; }
.colors-line .cl-big .l1 { color: var(--pf-1); } /* pure red */
.colors-line .cl-big .l2 { color: var(--pf-2); } /* yellow-orange */
.colors-line .cl-big .l3 { color: var(--pf-3); } /* lime green */
.colors-line .cl-big .l4 { color: var(--pf-4); } /* cyan blue */
.colors-line .cl-big .l5 { color: var(--pf-5); } /* light purple */
/* Mobile: stack each word on its own line — vertical typography, fixed 25px. */
@media (max-width: 640px) {
.frame-line, .hero-curtain-line { white-space: normal; line-height: 0.82; font-size: 55px; }
.frame-line .w, .hero-curtain-line .w { display: block; }
.desk-br { display: none; } /* ignore the desktop line break */
/* Drop the hyphenated word, stack AWARD / WINNING as separate lines. */
.hero-curtain-line .awl-desk { display: none; }
.hero-curtain-line .awl-mob { display: block; }
}
/* ---------- Corner detail ---------- */
.corner {
position: absolute;
z-index: 15; /* ABOVE the takeover tint (14) so the corner HUD stays bright while active; curtain (16) still covers it during the intro */
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.24em;
color: rgba(247, 243, 255, 0.9);
}
.tl { top: 90px; left: 28px; }
.tr { top: 90px; right: 28px; }
.bl { bottom: 70px; left: 28px; }
.br { bottom: 70px; right: 28px; transition: opacity 0.35s ease; }
/* Lower-right brand mark — PF logo, same size the header logo becomes (60px).
Fades out the moment the hero logo docks into the nav (.nav-docked), so the
seated header logo takes over as the single brand mark. */
.corner-logo { height: 60px; width: auto; display: block; }
.nav-docked .br { opacity: 0; pointer-events: none; }
/* ---------- Progress ---------- */
.progress {
position: absolute;
left: 28px; right: 28px; bottom: 44px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.12);
z-index: 12;
overflow: hidden; /* fill clips to reveal the fixed spectrum */
}
/* The full brand spectrum is painted across the FULL bar width and stays fixed.
The fill's width grows with scroll, revealing more of the spectrum left→right
(red → yellow/orange → green → blue → purple) instead of compressing it. */
.progress-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0%;
overflow: hidden; /* clip the inner full-width spectrum */
border-radius: 2px;
box-shadow: 0 0 16px var(--accent), 0 0 28px rgba(177,75,255,0.35);
}
.progress-fill::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: calc(100vw - 56px); /* = track width (left:28px + right:28px) */
background: linear-gradient(90deg,
var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5));
}
.scroll-hint {
position: absolute;
bottom: 14px; left: 50%;
transform: translateX(-50%);
z-index: 12;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.4em;
color: rgba(247,243,255,0.6);
animation: bob 1.8s ease-in-out infinite;
transition: opacity 0.4s;
}
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
/* ---------- Reveal-on-scroll (IntersectionObserver) ----------
TEMPORARILY DISABLED pending creative direction: all subsequent content just
scrolls in (no fade / slide-up). To re-enable the entrance animation, restore
the start state to `opacity: 0; transform: translateY(28px);` — the JS still
adds `.in`, so this is a no-op for now. */
.reveal {
opacity: 1; /* was 0 (start hidden) */
transform: none; /* was translateY(28px) */
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }
/* ---------- Story beat ---------- */
.story {
max-width: 1000px;
margin: 0 auto;
padding: 22vh 28px;
text-align: center;
}
.eyebrow {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.32em;
color: var(--accent);
margin-bottom: 22px;
}
.story h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 4.5vw, 3.4rem);
line-height: 1.15;
letter-spacing: -0.02em;
}
.story .lede {
margin-top: 26px;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.7;
color: rgba(247, 243, 255, 0.7);
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
/* ---------- Stats ---------- */
.stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(36px, 8vw, 110px);
padding: 16vh 28px;
background: radial-gradient(70% 60% at 50% 0%, rgba(177,75,255,0.08), transparent 60%), var(--bg-2);
}
.stat { text-align: center; }
.stat-num {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3rem, 8vw, 6rem);
line-height: 1;
background: linear-gradient(120deg, var(--pf-1), var(--pf-3));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat-label {
display: block;
margin-top: 14px;
font-size: 0.95rem;
letter-spacing: 0.04em;
color: rgba(247, 243, 255, 0.6);
max-width: 220px;
}
/* ---------- CTA ---------- */
.cta {
min-height: 100vh;
display: grid;
place-content: center;
text-align: center;
gap: 20px;
padding: 40px;
background: radial-gradient(80% 60% at 50% 0%, rgba(232,87,96,0.12), transparent 60%), var(--bg);
}
.cta h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.4rem, 7vw, 5rem);
letter-spacing: -0.02em;
}
.cta p { color: rgba(247,243,255,0.7); font-size: 1.15rem; line-height: 1.6; }
.btn {
justify-self: center;
margin-top: 8px;
padding: 16px 40px;
border-radius: 100px;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
color: #0a0710;
background: linear-gradient(120deg, var(--pf-1), var(--pf-5));
box-shadow: 0 0 40px rgba(232, 87, 96, 0.4);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 60px rgba(232, 87, 96, 0.55); }
.legal {
margin-top: 24px;
font-size: 0.8rem !important;
letter-spacing: 0.04em;
color: rgba(247,243,255,0.4) !important;
}
/* ============================================================
HERO END LOCKUP — brand logo + Ai1 tagline, centered over the
hero's final (clean-cart) frames. Uses the same absolute-center
positioning as the .reveal-line headlines so it scrubs with them.
============================================================ */
.hero-lockup {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px; /* tight stack: logo / presents / Ai1 */
opacity: 0;
width: max-content;
max-width: 96vw;
will-change: opacity, transform;
}
.hero-lockup img {
width: 80px; /* white PF logo, ~80px wide */
height: auto;
display: block;
opacity: 1;
}
.hero-lockup-presents {
display: block;
width: 140px; /* "PRESENTS" sized to ~140px wide */
text-align: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase; /* ALL CAPS */
letter-spacing: 0.42em; /* kerning to fill ~140px */
text-indent: 0.42em; /* balance trailing letter-space */
color: #fff;
margin: 4px 0 0;
}
.hero-lockup-tag {
font-family: var(--font-display);
font-weight: 800;
font-size: 300px; /* huge white Ai1, ~300px wide */
letter-spacing: -0.03em;
line-height: 0.9;
color: #fff;
margin-top: 22px; /* breathing room above the Ai1 */
}
/* Closing tagline — STARTS below the Ai1 (top: 70%), then JS rises it with the
lockup group, clamping at vertical center where it HOLDS. JS drives opacity +
translateY; this rule sets the start position and horizontal centering. */
.hero-tagline {
position: fixed; /* persists at the top as the #ai1 section header */
z-index: 20;
left: 50%; top: 50%; /* same origin as the lockup; JS offsets from center */
transform: translate(-50%, -50%);
width: max-content;
max-width: 92vw;
text-align: center;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.045rem, 2.28vw, 1.805rem); /* shrunk 5% */
letter-spacing: 0.02em;
color: #fff; /* "Our First" + "All-in-One" = white */
opacity: 0;
white-space: nowrap;
will-change: opacity, transform;
}
/* "Live Resin" — glowing amber, like the oil lit from within (soft warm glow) */
.hero-tagline .amber {
color: #f3b53a; /* warm amber */
text-shadow:
0 0 10px rgba(243, 181, 58, 0.55),
0 0 22px rgba(243, 150, 40, 0.35);
}
/* ============================================================
ACT 4 — DETAILS (sticky split: vape left, specs animate right)
Sticky product on the left, specs scroll/reveal on the right.
============================================================ */
.details {
position: relative;
background: var(--bg-2);
}
.details-sticky {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: clamp(24px, 6vw, 90px);
padding: 0 clamp(24px, 6vw, 90px);
}
.details-product {
position: sticky; /* the Ai1 pins while the features scroll past */
top: 0;
height: 100vh;
display: grid;
place-items: center;
}
.details-product img {
max-height: 78vh;
width: auto;
max-width: 100%;
filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6));
}
.details-list {
display: flex;
flex-direction: column;
gap: 26px;
max-width: 520px;
padding: 18vh 0;
}
.details-eyebrow {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.32em;
color: var(--accent);
margin-bottom: 2px;
}
.details-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
.details-tagline {
margin-top: -12px;
font-size: 1.02rem;
color: rgba(247, 243, 255, 0.6);
}
.feat { border-top: 1px solid rgba(247, 243, 255, 0.12); padding-top: 18px; }
.feat h4 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: -0.01em; margin: 0 0 8px;
}
.feat p { font-size: 0.98rem; line-height: 1.55; color: rgba(247, 243, 255, 0.6); margin: 0; }
.spec-strip {
list-style: none; margin: 8px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: rgba(247, 243, 255, 0.10);
border: 1px solid rgba(247, 243, 255, 0.10);
border-radius: 12px; overflow: hidden;
}
.spec-strip li {
display: flex; justify-content: space-between; gap: 12px;
padding: 12px 16px; background: var(--bg-2); font-size: 0.85rem;
}
.spec-strip span { color: rgba(247, 243, 255, 0.5); letter-spacing: 0.04em; }
.spec-strip strong { font-weight: 700; color: var(--ink); }
/* ============================================================
SPECTRUM — five color → category swatches (FIND YOUR LEAN)
============================================================ */
.spectrum {
padding: 18vh 28px;
text-align: center;
/* Fully transparent (no background): the held cart is the backdrop and must stay
clean. The old top-anchored radial glow had its bright center on the section's
top edge, creating a hard horizontal band that scrolled up over the cart. */
background: none;
}
.spectrum-head { max-width: 820px; margin: 0 auto 8vh; }
.spectrum-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin-top: 14px;
}
.spectrum-head .lede {
margin: 22px auto 0;
max-width: 560px;
font-size: clamp(1rem, 1.5vw, 1.2rem);
line-height: 1.6;
color: rgba(247, 243, 255, 0.7);
}
.swatch-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(18px, 4vw, 48px);
max-width: 1000px;
margin: 0 auto;
}
.swatch { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.swatch-chip {
width: clamp(56px, 9vw, 96px);
height: clamp(56px, 9vw, 96px);
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 32px -4px var(--c), 0 0 0 1px rgba(255,255,255,0.08) inset;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.swatch:hover .swatch-chip {
transform: translateY(-6px) scale(1.06);
box-shadow: 0 0 48px 0 var(--c), 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.swatch-cat {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(0.85rem, 1.3vw, 1.05rem);
letter-spacing: 0.01em;
color: rgba(247, 243, 255, 0.88);
}
.spectrum-axis {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
max-width: 680px;
margin: 7vh auto 0;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.28em;
color: rgba(247, 243, 255, 0.45);
}
.axis-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5));
}
/* ============================================================
BEYOND THE LEAN — cannabinoid second act
============================================================ */
.cannabinoid {
padding: 20vh 28px;
background: var(--bg-2);
}
.cannabinoid-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cannabinoid h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin-top: 14px;
}
.cannabinoid .lede {
margin: 24px auto 0;
font-size: clamp(1.02rem, 1.5vw, 1.25rem);
line-height: 1.7;
color: rgba(247, 243, 255, 0.72);
}
.cann-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 40px;
}
.cann-pill {
padding: 12px 28px;
border-radius: 100px;
border: 1px solid rgba(247, 243, 255, 0.18);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.08em;
font-size: 1.05rem;
color: var(--ink);
}
.spec-v em { color: rgba(247,243,255,0.4); font-style: italic; }
/* ---------- Mobile polish ---------- */
@media (max-width: 600px) {
/* Taller header so the 60px seated logo has breathing room (was 14px → cramped). */
.nav { padding: 32px 16px; font-size: 10px; letter-spacing: 0.16em; }
.nav-mid { display: none; }
.corner { font-size: 9px; letter-spacing: 0.14em; }
.tl, .tr { top: 96px; } /* clear the taller header bar */
.progress { left: 16px; right: 16px; }
.progress-fill::before { width: calc(100vw - 32px); } /* match the narrower track */
.story { padding: 16vh 20px; }
.details-sticky {
grid-template-columns: 1fr;
gap: 30px;
padding: 12vh 22px;
min-height: 0;
position: static;
}
.details-product { position: static; height: auto; }
.details-product img { max-height: 44vh; }
.details-list { padding: 0; max-width: none; }
.spec-strip { grid-template-columns: 1fr; }
}
/* ============================================================
HOMEPAGE FLOW — layered narrative (Thesis · Layers · Fairwinds · Lineup · Footer)
See BUILD-SHEETS.md. Rich graphics (slider, core column, particles) come next.
============================================================ */
.thesis, .terpene, .fairwinds, .lineup { position: relative; padding: clamp(14vh, 18vh, 22vh) 7vw; }
.thesis h2, .terpene h2, .fairwinds h2 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.08; letter-spacing: -0.025em;
}
.thesis .lede, .terpene .lede, .fairwinds .lede {
margin: 26px auto 0; max-width: 640px;
font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.7; color: rgba(247, 243, 255, 0.7);
}
/* 02 · THESIS — transparent so the held Ai1 cart shows behind it */
.thesis { background: none; text-align: center; min-height: 92vh; display: grid; place-content: center; }
.thesis-inner { max-width: 920px; margin: 0 auto; }
.thesis-line em {
font-style: normal;
background: linear-gradient(120deg, var(--pf-1), var(--pf-2) 38%, var(--pf-4) 74%, var(--pf-5));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.thesis-cue { display: inline-block; margin-top: 46px; font-size: 24px; color: rgba(247,243,255,0.5); animation: cueBob 2s ease-in-out infinite; }
@keyframes cueBob { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(8px); opacity: 1 } }
/* layer-number eyebrow tag */
.layer-tag { display: inline-flex; align-items: baseline; gap: 0.55em; }
.layer-no {
font-weight: 800; font-size: 0.9em;
background: linear-gradient(120deg, var(--pf-1), var(--pf-4));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 05 · TERPENE FORTIFICATION */
.terpene { background: radial-gradient(80% 60% at 50% 0%, rgba(241,186,69,0.10), transparent 60%), var(--bg-2); text-align: center; }
.terpene-inner { max-width: 820px; margin: 0 auto; }
/* 07 · BACKED BY FAIRWINDS */
.fairwinds { background: var(--bg); text-align: center; }
.fairwinds-inner { max-width: 980px; margin: 0 auto; }
.fw-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(32px, 7vw, 90px); margin-top: 7vh; }
.fw-stat { max-width: 240px; }
.fw-stat .stat-num, .fw-stat-big {
display: block; font-family: var(--font-display); font-weight: 800; line-height: 1;
font-size: clamp(2.6rem, 6vw, 4.2rem);
background: linear-gradient(120deg, var(--pf-1), var(--pf-3));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.fw-stat-label { display: block; margin-top: 14px; font-size: 0.92rem; letter-spacing: 0.03em; color: rgba(247,243,255,0.6); }
.fw-awards { margin-top: 7vh; display: flex; flex-direction: column; gap: 4px; }
.fw-awards-label { font-family: var(--font-display); letter-spacing: 0.22em; font-size: 12px; color: var(--accent); }
.fw-awards-note { font-size: 13px; color: rgba(247,243,255,0.4); font-style: italic; }
/* 08 · THE LINEUP — format grid (tiles get looping clips later) */
.lineup { background: var(--bg-2); }
.lineup-head { text-align: center; max-width: 820px; margin: 0 auto 7vh; }
.lineup-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
.lineup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.tile {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
min-height: 200px; padding: 26px; border-radius: 16px; text-decoration: none;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(247, 243, 255, 0.10);
overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
.tile::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 80% at 0% 100%, var(--c), transparent 55%);
opacity: 0.16; transition: opacity .35s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--c); }
.tile:hover::before { opacity: 0.32; }
.tile-feature { grid-column: span 3; min-height: 240px; }
.tile-name { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.9rem); color: var(--ink); }
.tile-sub { position: relative; font-size: 0.92rem; color: rgba(247, 243, 255, 0.62); }
/* ---------- Footer ---------- */
.site-footer { background: #030208; }
.footer-spectrum {
position: relative; height: 4px; overflow: visible;
background: linear-gradient(90deg, var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5));
/* shared so the core orb (::after) and the halo orb (::before) translate by the
SAME amount and stay perfectly stacked, even at different sizes. */
--orb-w: 96px;
}
/* SPECULAR HALO — a second, bigger, dimmer orb stacked under the bright core. It
uses SCREEN (not overlay) so it's visible as a soft reflection on the BLACK
surface above/below the strip, overhanging the rainbow a little. Same gradient
shape, larger, low opacity (tune --halo-op). Rides the identical travel path. */
.footer-spectrum::before {
--halo-w: 150px; /* a bit wider than the core */
--halo-h: 44px; /* overhangs the 4px strip symmetrically onto the black */
--halo-op: 0.26; /* DIAL THIS — the halo's overall strength */
content: ""; position: absolute; top: 50%; left: 0; z-index: 0;
width: var(--halo-w); height: var(--halo-h);
margin: calc(var(--halo-h) / -2) 0 0 calc(var(--halo-w) / -2);
/* Centered (50% 50%) → SYMMETRIC halo above and below the strip. Soft falloff so
it reads as a gentle reflection on the black, not a hot spotlight. */
background: radial-gradient(ellipse 50% 50% at 50% 50%,
rgba(255,255,255,0.85) 0%,
rgba(255,255,255,0.45) 30%,
rgba(255,255,255,0.18) 56%,
rgba(255,255,255,0) 85%);
mix-blend-mode: screen;
opacity: var(--halo-op);
pointer-events: none; will-change: transform;
animation: footer-orb-travel 5.5s linear infinite;
}
/* An ORB of light rides back and forth along the strip at a CONSTANT speed. The
orb IS the rainbow: its background is the SAME 100vw gradient, locked to the
viewport (background-attachment: fixed), so whatever x-position the orb is at,
the circle shows exactly the strip's local color there. A radial mask softens it
into a glowing ball; SCREEN blend makes that saturated color bloom brighter (in
its own hue, never white). It's round and taller than the 4px strip, spilling
above/below (the strip's overflow is visible). */
.footer-spectrum::after {
/* ---- TUNABLE KNOBS: opacity of each ring of the orb's glow gradient ---------
--orb-core : brightness right at the center (lands ON the strip → strongest)
--orb-mid : the inner falloff ring (kept bright + close to center)
--orb-edge : the faint long tail before it reaches 0
--orb-w : LONG horizontal length; --orb-h keeps the punch on the 4px strip.
The stops below are bunched near the center so the glow drops off QUICKLY just
past the core, then trails off in long faint tails to each end (non-linear). */
--orb-core: 0.95;
--orb-mid: 0.5;
--orb-edge: 0.12;
--orb-w: 96px;
--orb-h: 13px;
content: ""; position: absolute; top: 50%; left: 0;
width: var(--orb-w); height: var(--orb-h);
margin: calc(var(--orb-h) / -2) 0 0 calc(var(--orb-w) / -2);
/* A WHITE orb on OVERLAY brightens the strip strongly while KEEPING its rainbow
hue (unlike screen/plus-lighter, which wash toward white). The stops cluster
near 50% so it's bright in the middle and falls off fast, then a long faint
tail (--orb-edge) reaches the far ends and fades to 0 at the very tips. */
background: radial-gradient(ellipse 50% 50% at 50% 50%,
rgba(255,255,255,var(--orb-core)) 0%,
rgba(255,255,255,var(--orb-core)) 6%,
rgba(255,255,255,var(--orb-mid)) 16%,
rgba(255,255,255,var(--orb-edge)) 40%,
rgba(255,255,255,0) 82%);
mix-blend-mode: overlay;
opacity: 1; /* a CONSTANT bright light — no pulsing */
pointer-events: none; will-change: transform;
/* TRAVEL: a single linear translate at a slow, even speed — no stutter. It's a
one-way REVOLVE (off one end, resurface from the other), constant brightness. */
animation: footer-orb-travel 5.5s linear infinite;
}
/* REVOLVE (not bounce): one-way sweep that starts fully off the LEFT edge, glides
all the way across, exits fully off the RIGHT edge, then the loop restarts from
the left again — so it keeps circling the same direction. */
@keyframes footer-orb-travel {
0% { transform: translateX(calc(var(--orb-w) / -2)); } /* hidden off-left */
100% { transform: translateX(calc(100vw + var(--orb-w) / 2)); } /* hidden off-right */
}
@media (prefers-reduced-motion: reduce) {
.footer-spectrum::after { animation: none; opacity: 0.5; left: 50%; transform: translateX(-50%); }
}
.footer-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 6vw; max-width: 1200px; margin: 0 auto; padding: 9vh 7vw 6vh; }
.footer-logo { height: 52px; width: auto; display: block; }
.footer-by { margin-top: 16px; font-size: 13px; letter-spacing: 0.08em; color: rgba(247,243,255,0.55); }
/* ---- social icon row (footer · mobile menu · contact) ---- */
/* icon-only social links — solid WHITE glyphs, no box/background, grey on hover */
.social-row { display: flex; align-items: center; gap: 26px; }
/* white at rest, grey on hover, NEVER the brand accent — beat any global link rule */
.social-link,
.social-link:link,
.social-link:visited,
.social-link:active,
.social-link:focus {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0; border: none; background: none;
color: #fff !important; transition: color 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.social-link svg,
.social-link:active svg,
.social-link:focus svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.social-link:hover,
.social-link:focus-visible { color: #9aa0ab !important; } /* grey on hover only */
.social-link:hover svg,
.social-link:focus-visible svg { fill: #9aa0ab; }
.social-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.social-row--footer { margin-top: 18px; }
/* Fairwinds parent-brand logo (assets/fairwinds-logo.svg). Black artwork →
inverted to white on dark surfaces; left black on the light/clean (.invert) bands. */
.fw-logo { vertical-align: middle; filter: brightness(0) invert(1); }
.invert .fw-logo { filter: none; }
.footer-by .fw-logo { height: 24px; margin: 0 3px; position: relative; top: -1px; }
.fw-logo--feature { display: inline-block; height: clamp(30px, 3.75vw, 44px); width: auto; margin: 4px 0 16px; opacity: 0.95; }
.footer-news { margin-top: 30px; }
.footer-news label { display: block; font-family: var(--font-display); letter-spacing: 0.2em; font-size: 11px; color: rgba(247,243,255,0.55); margin-bottom: 12px; }
.news-row { display: flex; max-width: 320px; border: 1px solid rgba(247,243,255,0.18); border-radius: 999px; overflow: hidden; }
.news-row input { flex: 1; background: none; border: none; padding: 12px 18px; color: var(--ink); font-size: 14px; outline: none; }
.news-row button { background: var(--cat, var(--accent)); border: none; color: #0a0a12; width: 46px; cursor: pointer; font-size: 18px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-content: start; }
.footer-col h4 { font-family: var(--font-display); letter-spacing: 0.18em; font-size: 11px; color: var(--cat, var(--accent)); margin: 0 0 16px; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: rgba(247,243,255,0.66); text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-legal { max-width: 1200px; margin: 0 auto; padding: 30px 7vw 50px; border-top: 1px solid rgba(247,243,255,0.06); }
.footer-warning { font-size: 11px; line-height: 1.6; color: rgba(247,243,255,0.42); max-width: none; }
.footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; font-size: 12px; letter-spacing: 0.04em; color: rgba(247,243,255,0.45); }
.footer-links a { color: inherit; text-decoration: none; margin-left: 18px; }
.footer-links a:hover { color: var(--ink); }
@media (max-width: 760px) {
.lineup-grid { grid-template-columns: repeat(2, 1fr); }
.tile-feature { grid-column: span 2; }
.footer-top { grid-template-columns: 1fr; gap: 40px; }
.footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.lineup-grid { grid-template-columns: 1fr; }
.tile-feature { grid-column: span 1; }
}
/* ---------- .build entrance — additive & SAFE (visible by default; animates
only when the observer adds .in, so content never stays hidden) ---------- */
.build.in { animation: buildIn 0.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes buildIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* ---------- Ai1 — cart specs, PINNED reveal under the seated tagline ----------
The section is taller than the viewport; an inner sticky pin holds the sheet
centered (vertically stationary) while you scroll, so the rows can slide in
purely from the RIGHT instead of riding the page scroll up from the bottom. */
.ai1 {
position: relative;
height: 170vh; /* scroll length for the pinned right-slide + a hold */
background: none; /* transparent — the held cart canvas shows through */
text-align: center;
}
.ai1-pin {
position: sticky; top: 0;
height: 100vh; width: 100%;
box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
padding: 24vh 6vw 8vh; /* clears the fixed .hero-tagline at ~14vh */
overflow: hidden; /* clip the off-screen-right start, no scrollbar */
}
/* Editorial spec sheet — no boxes. A soft vignette behind the type keeps it
legible while the held cart breathes through the transparent section. */
.ai1-sheet {
position: relative; width: 100%; max-width: 980px; margin: 0 auto;
padding: clamp(26px, 5vh, 56px) clamp(8px, 3vw, 40px);
}
.ai1-sheet::before {
content: ""; position: absolute; inset: -4% -8%; z-index: -1; pointer-events: none;
background: radial-gradient(120% 100% at 50% 50%,
rgba(5,4,10,0.62) 0%, rgba(5,4,10,0.34) 42%, transparent 74%);
}
/* feature statements — three columns split by hairlines, no cards */
.ai1-feats {
display: grid; grid-template-columns: repeat(3, 1fr);
margin: 0 0 clamp(38px, 6vh, 66px);
}
.ai1-feat {
padding: 2px clamp(16px, 2.6vw, 38px); text-align: left;
border-left: 1px solid rgba(247, 243, 255, 0.14);
}
.ai1-feat:first-child { border-left: none; }
.ai1-feat-k {
display: block; font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--c, var(--accent)); margin-bottom: 11px;
}
.ai1-feat-t {
display: block; font-family: var(--font-display); font-weight: 500;
font-size: clamp(0.98rem, 1.2vw, 1.12rem); line-height: 1.5;
color: rgba(247, 243, 255, 0.9);
}
/* spec ledger — big light numerals over tiny caps labels, hairline-divided */
.ai1-ledger {
display: grid; grid-template-columns: repeat(8, 1fr); margin: 0;
}
.ai1-ledger > div {
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 4px 6px; border-left: 1px solid rgba(247, 243, 255, 0.10);
}
.ai1-ledger > div:first-child { border-left: none; }
.ai1-ledger dt {
font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em;
font-size: clamp(1.25rem, 2.3vw, 1.95rem); color: var(--ink); line-height: 1;
}
.ai1-ledger dt small { font-size: 0.46em; font-weight: 400; opacity: 0.55; margin-left: 1px; }
.ai1-ledger dd {
margin: 0; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(247, 243, 255, 0.42);
}
/* JS (driveAi1Cards) slides these in from the right as #ai1 enters the viewport. */
.ai1-slide { will-change: transform, opacity; }
@media (max-width: 760px) {
.ai1 { height: 150vh; }
.ai1-pin { padding: 20vh 6vw 8vh; }
.ai1-feats { grid-template-columns: 1fr; gap: 22px; }
.ai1-feat { border-left: none; padding: 0; text-align: center; }
.ai1-ledger { grid-template-columns: repeat(4, 1fr); gap: 22px 0; }
.ai1-ledger > div:nth-child(4n+1) { border-left: none; }
}