/* ============ SCREEN 3: snob ============ Positioned inside .track via --snob-x (same fixed-inside-transformed-track pattern as the landing/work screens), so it pans with the existing horizontal scroll. js/horizontal-scroll.js toggles .snob-mode on as the screen arrives, which drives the dark/red theme swap below; js/snob-page.js owns the entry animation and hover-to-play videos. */ /* ---------- headline (pinned) ---------- Lives in its own fixed layer that slides in with the snob screen and then holds still while the cards keep panning underneath -- same mechanism as .work-fixed-layer, driven by the shared pan proxy in js/horizontal-scroll.js. Being after .track in the DOM, it always paints above the cards, so a hover-grown card can never cover the headline. */ .snob-fixed-layer { position: fixed; top: 0; left: 0; width: 1440px; height: 100vh; transform: translateX(1440px); pointer-events: none; } .snob-headline { position: absolute; left: 78px; top: 21px; width: 1294px; font-family: var(--font-climate); font-variation-settings: "YEAR" 1979; font-size: 100px; line-height: 100px; letter-spacing: -3px; color: var(--red); } .snob-headline .font-fender { font-family: var(--font-fender); } .snob-tagline { position: absolute; left: 80px; top: 249px; width: 278px; font-family: var(--font-impact); font-size: 14px; letter-spacing: -0.42px; color: var(--red); } /* ---------- cards row ---------- */ .snob-row { position: fixed; left: calc(var(--snob-x) + 82px); top: 364px; /* Fixed (not auto) height, matching the rest-state content height exactly -- this is what makes align-items:flex-end genuinely bottom-anchored. With auto height, growing a card just grows the container by the same amount (its top pinned, bottom extends downward, verified live), which both drags every OTHER card down with it and grows in the wrong direction entirely. With a fixed height, the container can't resize: an enlarged card overflows past the container's TOP instead (its own bottom staying flush with everyone else's), which is the real "bottom-anchored, grows upward" behavior -- same mechanism as .selected-projects on the work page (explicit height: 286px there). */ height: 444px; display: flex; gap: 30px; align-items: flex-end; } .snob-card { flex: none; box-sizing: border-box; padding: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .snob-card:hover { z-index: 2; } .snob-card__label { font-family: "Monomaniac One", sans-serif; font-size: 14px; line-height: 13px; letter-spacing: -0.28px; text-transform: uppercase; color: var(--red); } .snob-card__label p { margin: 0; } /* Real width/height growth (not transform:scale), same mechanism as the work page's project cards -- .snob-row is align-items:flex-end, so an enlarged card's extra height is added ABOVE its fixed bottom edge, and siblings reflow away in the row rather than the card just visually overlapping them. Kept to a modest 1.18x (vs. work's 2x): the pinned headline sits only ~180px above the row's rest-state top edge, and a work-style doubling would push a grown card's own label text straight into it. 1.18x adds well under half that on the tallest card, so the label always clears the headline with room to spare. */ .snob-card__media { position: relative; width: var(--media-w); height: var(--media-h, 400px); overflow: hidden; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .snob-card:hover .snob-card__media { width: calc(var(--media-w) * 1.18); height: calc(var(--media-h, 400px) * 1.18); } .snob-card__media img, .snob-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Cover image sits on top of the video; once the video is actually playing (js adds .is-playing on the card only after the 'playing' event, so a still-buffering video never flashes black), the cover fades out to reveal it. */ .snob-card__media img { z-index: 1; transition: opacity 0.3s ease; } .snob-card.is-playing .snob-card__media img { opacity: 0; } /* ---------- snob-mode theme (dark bg, red grid, inverted nav) ---------- .snob-mode is toggled on by js/horizontal-scroll.js as the snob screen scrolls into view, and removed when scrolling back out. */ html, body { transition: background-color 0.6s ease; } html.snob-mode, html.snob-mode body { background: #191919; } /* Grid recolor: red variants stacked on top of the blue tiles, crossfaded via opacity so the swap animates (background-image itself can't). */ .bg-grid__lines, .bg-grid__dots { transition: opacity 0.6s ease; } .bg-grid__lines--red, .bg-grid__dots--red { position: absolute; inset: 0; background-repeat: repeat; opacity: 0; transition: opacity 0.6s ease; } .bg-grid__lines--red { background-image: url("../assets/svg/grid-tile-red.svg"); background-size: 40px 40px; background-position: 0 0; } .bg-grid__dots--red { background-image: url("../assets/svg/dot-cross-red.svg"); background-size: 160px 160px; background-position: 73px 73px; } html.snob-mode .bg-grid__lines, html.snob-mode .bg-grid__dots { opacity: 0; } html.snob-mode .bg-grid__lines--red, html.snob-mode .bg-grid__dots--red { opacity: 1; } /* Rail: dark bg, red border/text; the active link flips to blue (per the Figma snob frame, where "snob" is the blue underlined item). */ .rail { transition: background-color 0.6s ease, border-color 0.6s ease; } html.snob-mode .rail { background: #191919; border-right-color: var(--red); } html.snob-mode .rail__nav a { color: var(--red); } html.snob-mode .rail__nav a:hover, html.snob-mode .rail__nav a:focus-visible, html.snob-mode .rail__nav a.active { color: var(--blue); } html.snob-mode .rail__nav a::after { background: var(--blue); } html.snob-mode .rail__name p { color: var(--red); } /* Clicking the name returns to the landing screen (wired in js/horizontal-scroll.js) -- make it read as clickable everywhere. */ .rail__name { cursor: url("../assets/svg/cursor.svg") 6 6, pointer; }