, so once it docks it stays for the whole page (stories included). top = centred in the nav bar. */ .cta-rail { position: sticky; top: calc((var(--nav-h) - var(--pill-h)) / 2); z-index: 31; height: 0; padding: 0 var(--gutter); } .cta-rail__inner { position: relative; max-width: var(--col); margin: 0 auto; /* in the cards view main.js lifts an undocked button up into the nav bar */ transition: transform var(--enter-dur) var(--enter-ease); } .cta-rail__inner.is-instant { transition: none; } .cta { position: absolute; top: 0; right: 0; } .hero__logo { display: flex; flex-direction: column; align-items: center; font-size: 0; } .hero__markbox { position: relative; display: block; width: var(--mark-w); height: var(--mark-h); overflow: hidden; /* the intro clip is scaled up 3% to line up; keep it inside the logo's edges */ } .hero__mark { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------- intro (page load) ---------- boot.js adds .is-intro before first paint; main.js plays the video in the logo's box, shows the tagline, cuts to the logo, then runs the entrance. */ .hero--intro .hero__inner { --mark-w: 163px; /* logo box: the image and the intro video share it */ --mark-h: 91px; position: relative; } .hero__intro-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; /* same box + same fit as the logo */ /* Lines the clip's last frame up with the logo's first frame (measured by matching the two frames' edges): the hands in the logo loop are 3% smaller and sit slightly left/down, so the clip is scaled and nudged to match. */ transform: translate(0.32%, -0.58%) scale(1.031); opacity: 0; /* main.js fades it in once it's fully loaded and playing */ pointer-events: none; } .is-intro .hero__mark { opacity: 0; } .hero__intro-text { position: absolute; left: 50%; top: calc(var(--mark-h) + 36px); display: none; margin: 0; transform: translateX(-50%); font-family: var(--font-display); font-weight: 400; font-size: var(--intro-size, 23.5px); /* main.js fits the widest line to the logo's width */ line-height: 1.15; text-align: center; white-space: nowrap; color: var(--ink); pointer-events: none; } .hero__intro-text > span { display: block; } .is-intro .hero__intro-text, .hero__intro-text.is-leaving { display: block; } .hero__intro-text:not(.is-on) > span { opacity: 0; } .hero__type { width: 164px; height: 16px; object-fit: contain; } .hello { display: flex; align-items: center; gap: 16px; min-height: var(--pill-h); padding-right: 100px; /* room for the Sign up button beside it */ } .hello__text { display: flex; align-items: center; gap: 6px; font-size: 28px; line-height: normal; letter-spacing: -0.008em; /* matches Figma's Inter line breaks */ color: var(--ink); } /* Animated wave. --wave-size is the rendered size of the whole 80×80 SVG (original 80px → 64px → now 54.4px). In the SVG the hand is 32px wide, starting 25px in; the slot is sized to the hand so it sits right next to "Hello!" (6px gap) and the rest of the SVG hangs outside the slot. */ .hello__wave { --wave-size: 54.4px; position: relative; flex: none; width: calc(var(--wave-size) * 0.4); /* 32 / 80 */ height: calc(var(--wave-size) * 0.4); } .hello__wave img { position: absolute; left: calc(var(--wave-size) * -0.3125); /* -25 / 80 */ top: calc(var(--wave-size) * -0.3125); width: var(--wave-size); height: var(--wave-size); max-width: none; pointer-events: none; } .lede { margin-top: 62px; font-size: var(--lede-size); line-height: normal; letter-spacing: -0.008em; /* matches Figma's Inter line breaks */ color: var(--ink); } .lede--second { margin-top: 64px; } /* "See my talk on making talks": dotted underline, as in Figma (140:128) */ .lede__link { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; } .lede__link:hover { text-decoration-style: solid; } .lede__link em { font-style: italic; } /* ---------- email field ---------- */ .signup { margin-top: var(--signup-gap, 40px); } /* main.js centres it in the gap above the cards */ .signup__label { display: block; min-height: 17px; margin: 0 0 4px; padding-left: 10px; font-size: 14px; line-height: normal; color: var(--ink-label); } .signup__msg:empty { display: none; } .signup.has-msg .signup__hint { display: none; } .signup.is-error .signup__msg { color: var(--error); } .signup.is-success .signup__msg { color: var(--ink); } .signup__field { position: relative; display: flex; align-items: center; width: min(100%, 298px); height: 52px; padding: 0 49px 0 12px; border: 1px solid var(--field-border); border-radius: 16px; background: var(--field); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .signup__field:focus-within { border-color: var(--field-border-focus); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05); } .signup.is-error .signup__field { border-color: rgba(255, 143, 143, 0.45); } .signup__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 16px/normal var(--font-sans); caret-color: #fff; } .signup__input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; } .signup__input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px var(--field) inset; transition: background-color 9999s; } .signup__submit { position: absolute; top: 50%; right: 9px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transform: translateY(-50%); transition: transform 0.2s var(--ease-out), opacity 0.2s ease; } .signup__submit:hover { transform: translateY(-50%) translateX(1px); } .signup__submit:active { transform: translateY(-50%) scale(0.94); } /* sending: the arrow button gives way to the pixel spinner, which turns 90° every 0.3s in sudden jumps (steps, no easing) */ .signup__spinner { position: absolute; left: 50%; top: 50%; display: none; width: 16px; /* 1px per pixel of the 16×16 icon: always crisp */ height: 16px; margin: -8px 0 0 -8px; } .signup.is-busy .signup__submit { pointer-events: none; } .signup.is-busy .signup__submit img { visibility: hidden; } .signup.is-busy .signup__spinner { display: block; animation: spinner-steps 1.2s steps(4) infinite; } @keyframes spinner-steps { to { transform: rotate(360deg); } } .signup.is-success .signup__submit { opacity: 0.35; pointer-events: none; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .stories-spacer { height: 80vh; } @supports (height: 1svh) { .stories-spacer { height: 80svh; } } /* ---------- viewport fx: fade + progressive blur (bottom 30%) ---------- Fade: a fixed gradient over the bottom 30% of the screen. Blur: main.js blurs the header content itself, one line of text (or one block, like the email field) at a time, by where it sits on screen: 0px at 70% of the viewport height → 8px at the bottom edge. Each line is blurred evenly, so there are no half-sharp words or halos. */ .fx-fade { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--fade-zone); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, #000 100%); pointer-events: none; transition: opacity 0.6s var(--ease-out); } /* Animated glow (BottomAnimationV4). Same placement as the old static one: pinned to the bottom, centred, above the header text, below the cards. */ .fx-glow { opacity: 0.999; /* see the Safari 26 note on .card opacity in main.js: keeps it under the toolbar */ position: fixed; left: 50%; bottom: -1px; z-index: 4; width: 778px; height: 578px; margin-left: -389px; pointer-events: none; transition: opacity 0.8s var(--ease-out); } /* Safari / iOS get the MP4 flattened onto black; "screen" drops the black */ .fx-glow.is-flat { mix-blend-mode: screen; } .fx-glow__video { display: block; width: 100%; height: 100%; object-fit: cover; } .is-stories .fx-fade, .is-stories .fx-glow { opacity: 0; } /* typing in the email field: lift the fade so the field stays readable (main.js also drops the field's blur) */ .is-typing .fx-fade { opacity: 0; } /* ---------- pull hint ---------- */ .pull-hint { position: fixed; left: 0; right: 0; top: 80vh; /* main.js puts it 20px above the card pile */ z-index: 19; margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: normal; text-align: center; color: #fff; pointer-events: none; /* same entry animation as page load: fade + rise + blur 12→0 */ opacity: 0; transform: translateY(var(--enter-rise)); filter: blur(var(--enter-blur)); transition: opacity var(--enter-dur) var(--enter-ease), transform var(--enter-dur) var(--enter-ease), filter var(--enter-dur) var(--enter-ease); } .pull-hint.is-visible { opacity: 1; transform: none; filter: blur(0); } /* follows the pull without lag: brightens 50% → 100%, rises with the cards. It's a