/* ============================================ LIQUID HERO - homepage gradient hero ============================================ */ /* The gradient canvas is fixed behind the whole page (see .liquid-hero__bg). It fades out to this black as the page scrolls toward the .hero-divider, so everything below reads as solid black. */ body { background-color: var(--color-black); } .liquid-hero { position: relative; width: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; /* clip the horizontal spill of the oversized 3D logo canvas (it's 230% wide) so it never widens the page, but leave the vertical axis visible so the logo can still drift up/down on scroll */ overflow-x: clip; background: transparent; } /* Delayed / "pinned" scroll before the content below. Only armed (desktop + motion) when carries .has-hero-pin. */ .hero-pin { position: relative; } .has-hero-pin .hero-pin { height: 200vh; /* 1 extra screen of hold; raise/lower to taste */ } .has-hero-pin .hero-pin .liquid-hero { position: sticky; top: 0; height: 100vh; min-height: 0; } /* WebGL gradient canvas - fixed to the viewport and pinned behind every section. The page background shows it from the top down until an opaque section (the .hero-divider onward) scrolls over it. */ .liquid-hero__bg { position: fixed; inset: 0; display: block; width: 100%; height: 100%; z-index: -1; /* opacity is driven per-scroll-frame by initHeroBgFade() in main.js; the transition just smooths the steps between rAF updates */ transition: opacity 0.15s linear; } /* Centered brand mark. The mark is a touch heavier on its right side, so a small left shift optically centres it. (Value is % of the viewport - the old -11% was left over from when the hero had a headline block beside the logo and is far too much now.) */ .liquid-hero__content { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); /* translateX = optical centring; translateY drops the mark lower to clear the tagline above it. */ transform: translate(-3%, 12vh); /* Let the cursor drive the gradient through the mark. */ pointer-events: none; } /* Tagline on the background plane, behind the logo. Driven by initHeroTagline() in main.js for the parallax + fade on scroll. */ .liquid-hero__tagline { position: absolute; top: 16%; left: 0; right: 0; margin: 0 auto; z-index: 1; /* above the gradient (0), below the logo (2) */ /* vw-based so the block keeps the same proportions / wrap across desktop sizes; phones get a bump below. */ width: 42vw; text-align: center; font-family: var(--font-marker); font-weight: 400; /* Instrument Serif ships regular only */ font-size: 3.8vw; line-height: 1.08; letter-spacing: -0.015em; text-transform: none; /* override the global h1-h4 uppercase */ color: var(--color-cream); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); pointer-events: none; /* never intercept the cursor -> gradient/tilt effects */ will-change: transform, opacity; } /* Highlighted phrases: italic + underlined; on hover flip to Big Shoulders uppercase. Only these get pointer-events so the rest of the tagline still lets the cursor through to the gradient. */ .liquid-hero__tagline .tagline-term { pointer-events: auto; font-style: italic; text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.045em; } .liquid-hero__tagline .tagline-term:hover { font-family: var(--font-display); /* Big Shoulders */ font-style: normal; font-weight: 600; text-transform: uppercase; } /* Heavier tail phrase. Instrument Serif has no bold, so this is a synthetic bold - swap to a real weight if it looks rough. */ .liquid-hero__tagline .tagline-strong { font-weight: 700; /* the tagline is pointer-events:none so the cursor reaches the gradient; this phrase opts back in so its gif pop can fire */ pointer-events: auto; } /* The tagline sits at z-index 1, below the logo at 2, so its gif would pop out behind the mark. Lift the whole layer only while it's hovered. */ .liquid-hero__tagline:has(.gif-pop:hover) { z-index: 5; } /* Band between the hero and the work section. Transparent - it sits on the page-wide gradient background, which is still mostly liquid here. */ .hero-divider { padding: clamp(6rem, 24vw, 19.5rem) calc(var(--space-xl) + clamp(0px, 6vw, 7rem)) clamp(3rem, 9vh, 6rem); overflow: hidden; } .hero-divider__text { margin: 0; white-space: nowrap; font-family: var(--font-marker); /* Instrument Serif */ font-weight: 400; font-style: italic; /* tier 1 floor (~47px mobile / 120px desktop) but keeps growing on ultra-wide screens so it still spans the band */ font-size: max(var(--fs-1), 7vw); line-height: 1; letter-spacing: -0.01em; text-transform: none; color: var(--color-red); /* brand orange (#FC6935) */ } /* Holds the three.js