/* ========================================================= Jaydon — Portfolio Restrained glassmorphism, matched to the reference layout ========================================================= */ /* Sinteca — no longer referenced by --font-hero (see below, now Medival Pixel), but the files/@font-face stay: nothing currently uses them, removing a working @font-face isn't part of this task, and it's a one-line revert if a future design ever wants this face back. */ @font-face { font-family: "Sinteca"; src: url("../assets/fonts/Sinteca-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sinteca"; src: url("../assets/fonts/Sinteca-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* FS Mondwest — the pixel/glitch display face (see --font-hero below). A from-scratch recreation of PP Mondwest's look by NZWStudios2024, released under the SIL Open Font License 1.1 (assets/fonts/fs-mondwest-license.txt), which explicitly permits embedding/redistributing it on a site like this — that's why this file ships with its license + readme alongside it in assets/fonts/, per the OFL's own requirement to keep those attached to any copy. Regular only — ships in a single weight. */ @font-face { font-family: "FS Mondwest"; src: url("../assets/fonts/fs-mondwest-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* base */ --bg-top: #121327; --bg-bottom: #000000; --text-primary: #f4f5fb; --text-secondary: #a9aec7; --text-muted: #6d7291; /* nav / surfaces */ --nav-bg: #262739; --surface-bg: rgba(255, 255, 255, 0.035); --surface-border: rgba(255, 255, 255, 0.09); --surface-blur: blur(14px) saturate(140%); /* accent — used sparingly: primary CTA + small hover/active touches */ --accent: #a855f7; --accent-strong: #9333ea; /* light pill (Contact button, active filter) */ /* ---- theme-swappable semantics (see html[data-theme="light"]) ---- Everything below used to be a hard-coded literal repeated through the file. They are tokens now because the light theme is a real palette swap: one value changes here and every rule that names it follows, rather than each component carrying its own light-mode override. --overlay-rgb is the load-bearing one. Roughly fifty rules paint a translucent white over the dark page — hairline grids, glass fills, inner glows, borders — as rgba(255, 255, 255, a). Written as rgba(var(--overlay-rgb), a) they all invert together, so a light theme gets dark hairlines on light ground without touching a single one of them individually. Shadows deliberately do NOT participate: rgba(0, 0, 0, a) stays black in both themes, because a shadow is cast light, not a surface tint, and an inverted shadow reads as a glow. */ --overlay-rgb: 255, 255, 255; --ink: #ffffff; /* text/marks that sit on the page ground */ /* Running prose, one step down from --ink. --ink is right for anything the eye should land on: a heading, the current entry in a contents list, a word set in . It is too much for a paragraph. At full white every line of body copy competes with the heading above it, and a case study this long reads as one undifferentiated block of maximum contrast. Deliberately not --text-secondary. That token belongs to the nav and the small labels around a component, and it is a light lavender picked to sit against those surfaces; on paragraphs it tints the whole page. This is a cool blue-grey instead, and it holds 5.7:1 against the page ground (6.5:1 against the gradient's black end) - past AA for body text, which --text-muted (3.2:1) would not be. See html[data-theme="light"] for the counterpart, and why it is not this value inverted. */ --copy-ink: #81929d; --chip-bg: #171717; /* .tag / .cs-tag / .cs-callout fill */ --chip-border: #727272; /* the shared button + chip stroke */ --media-backdrop: #0d1024; /* letterbox behind project thumbnails */ --hero-glow: rgba(255, 255, 255, 0.62); /* halo on the FS Mondwest titles */ /* selected controls (nav Work/Play, filter pills). Split out of --light/--light-ink so the footer slab can keep its own light surface while these invert with the theme. */ --sel-bg: #eef0fb; --sel-ink: #0d0f1e; /* custom cursor (see .cursor-ring). White, not the Figma spec's #727272: that grey is the site's own chip/button stroke, which is exactly why it disappeared — the ring read as one more piece of furniture instead of the pointer. White stays white in BOTH themes rather than flipping to dark on the light one. That works only because of --cursor-halo, a contrasting 1px outline hugging the ring — the same trick the OS pointer itself uses to stay visible over arbitrary content. The halo is dark in both themes for exactly that reason: it is what carries a white ring over a light page, a photo, a video tile or the 3D model. */ --cursor-stroke: #ffffff; --cursor-stroke-hot: #ffffff; --cursor-glow: rgba(255, 255, 255, 0.32); --cursor-halo: rgba(0, 0, 0, 0.5); /* the footer's slab — a deliberate surface change against the page, so it flips to the opposite of whatever the page ground is */ --slab-bg: #ffffff; --slab-ink: #0d0f1e; --slab-ink-soft: rgba(13, 15, 30, 0.55); --slab-btn-bg: #ffffff; --slab-btn-hover: #eef0fb; --font-display: "Inter", sans-serif; --font-body: "Inter", sans-serif; /* the big hero-style titles (homepage name, case-study hero titles, footer heading) plus the FS Mondwest section headings — was Jersey 15, then Sinteca, then PP Mondwest, then FS Mondwest, then Medival Pixel, now back to FS Mondwest */ --font-hero: "FS Mondwest", serif; /* FS Mondwest's own glyphs sit noticeably smaller in their em-box than PP Mondwest's did — measured the actual rendered ink (cap height, word height, word width) of both fonts at an identical font-size via canvas pixel bounds: FS came out ~1.635x smaller across all three measurements, not just a rough guess. Multiplies every --font-hero font-size below so FS Mondwest reads at the same visual size PP Mondwest did — applied at the point of use, not baked into --text-title/--text-h1 themselves, since --text-h1 is also used by .cs-heading (Inter, --font-display) which must stay its own size. */ --font-hero-scale: 1.635; --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; --radius-pill: 999px; --container: 1320px; /* 0–1 "shrink everything in this hero by this much so it fits below the nav" multiplier — see .hero's own comment for the mechanism. main.js overrides it per hero element (.hero, .cs-hero); 1 here is both the pre-JS fallback and the real value for everything that ISN'T a hero, since .hero__title and .hero__desc are shared classes (About's .page-hero, the case-study body copy) and multiplying by an undefined custom property would make those font-size declarations invalid. */ --hero-fit: 1; /* Height arms for the two things that sit ABOVE the hero content and push it down: the nav bar itself, and the Play canvas's fixed top padding. Both were width-only, and every clamp driving nav height reaches its ceiling at 900px wide (see .nav__switch-opt) — so between a 2560×1440 monitor and a 1920×1080 laptop at 125% the nav shrank by 4.6px while the available height fell by 593px, taking the nav from 8.8% of the viewport to 16% of it and pushing everything below it down with it. Plain CSS rather than JS, unlike --hero-fit: a hero's natural height depends on the fit being solved for, which calc() can't express, but the nav's height has no effect on the viewport height it's reading, so there's no cycle here. Both reach their 1 ceiling at 1230px of viewport height, deliberately a little BELOW the 1271px reference monitor rather than exactly at it: calibrated to land on 1271 they evaluated to 0.99999 there and took 0.08px off the nav, so the reference wasn't quite pinned. The headroom means every window at or above 1230px tall is untouched, and the floors stop them running away on a very short one. Every value they multiply is also max()'d against its own existing floor, so the documented 900px→375px phone schedule is byte-identical — verified at 375×812 and 375×667, where these resolve to ~0.79 and every floor wins. */ --nav-fit: clamp(0.6, calc(0.3839 + 100svh / 1996px), 1); --stage-lead: clamp(0.6, calc(0.4499 + 100svh / 2236px), 1); /* ---------- type scale — 7 styles, nothing else ---------- FS Mondwest (--font-hero) + Inter (--font-body/--font-display), base 16 / scale 1.392, sized for a 1440px-wide screen. Every size reaches its ceiling exactly at 1440px viewport width and holds flat beyond it — a bigger monitor sits further away, so type shouldn't keep growing past this reference; --container already caps line length instead. The remaining two display/heading tiers (--text-h1, --text-h2) fall back fluidly to a floor at 375px; --text-body/--text-caption stay flat at every width since 16px/11px are already close to the smallest comfortable reading size. --text-title is the one exception to all of the above — see its own definition just below for why it's pure vw with no 1440px ceiling at all now. */ /* restored to the original brand-spec size (120px @1440) — it had been dialed to 2/3 (80px) earlier in the project, but that read too small across the board, so it's back to spec. Applies to EVERY member of this style everywhere it's used (JAYDON WANG, Jaydon's Digital Museum, About me, the footer, and the three case-study page titles) via this one token, not a per-element override, so the class stays one consistent size. Pure vw (no rem term, no separate ≥1440px tier below anymore) — aileens-beautiful-site.webflow.io was pulled up specifically to see how a reference site keeps large display text at a genuinely CONSTANT size relative to the viewport at every width, with no "stops scaling past this breakpoint" seam: their whole type scale is `body { font-size: 1vw }` + headings sized in em off that, so every heading is a fixed % of viewport width forever. Reproduced here directly on the token instead (this codebase sizes type via px/rem custom properties, not an em cascade off body, so there's no root font-size to repurpose the same way) — 8.333vw reproduces the exact 120px-@-1440px brand anchor (120 / 1440 × 100 = 8.3̄vw) while now scaling continuously past it instead of flattening at 7.5rem/120px the way the old two-tier clamp() did. 48px/300px are safety rails only, not a second tier: 48px keeps it legible below ~576px (phones), 300px is a backstop against runaway growth on an extreme ultra-wide monitor (doesn't engage until ~3600px wide) — neither changes the ratio anywhere in the range real viewports actually use, unlike the old clamp()'s floor/ceiling. */ --text-title: clamp(48px, 8.333vw, 300px); /* 120px @1440 — titles (FS Mondwest, scramble) */ --text-h1: clamp(2rem, calc(1.296rem + 3.005vw), 4rem); /* 64px @1440 — section headings (both fonts) */ --text-h2: clamp(1.75rem, calc(1.42rem + 1.408vw), 2.688rem); /* 43px @1440 — card titles */ /* 43px @1440 — case-study meta labels (Role/Timeline/Skills) and subheadings. Identical to --text-h2 at 1440 and close to it through the desktop range, which is the point: these three styles are meant to read as one voice (see .cs-hero__meta-item span), and on a desktop they still do. It exists because --text-h2's floor is too high for the phone range. That ramp only reaches 28px before flattening (below ~375px), while .cs-heading — the SECTION title these subheads are supposed to sit under — floors at 29px. Measured at 360/390/430px: subhead 28/28.2/ 28.8 against a section title of 29.3 at all three. A half-pixel step is no step at all, so a subheading and the heading above it rendered as the same size, and the Role/Timeline/Skills labels sat at 28px over their own 12px values. Same 2.688rem ceiling, but pinned through (400px, 20px) instead, so it stays a true ramp across phone widths: ~20.7px at 430, ~28px at 768 against a 48px section title, 43px at 1440. */ --text-subhead: clamp(1.125rem, calc(0.697rem + 2.212vw), 2.688rem); /* Was a flat 1.375rem (22px) at every width — fine at 1440, far too heavy on a phone, where it landed at 22px under a 78.5px title and ran the hero paragraph to four lines. Fluid now, pinned through (430px, 15px) and (1440px, 22px): unchanged on desktop, ~32% smaller on a phone. The 0.9375rem floor holds it at 15px below 430 rather than letting it keep shrinking into unreadability. */ --text-h3: clamp(0.9375rem, calc(0.751rem + 0.693vw), 1.375rem); /* 22px @1440 — homepage hero paragraph ("-Uses his love of games...") */ --text-body: 1rem; /* 16px — all paragraph + button text */ --text-caption: 0.688rem; /* 11px — captions, tags, metadata */ /* dedicated to the nav's Work/Play switch (.nav__switch-opt) — not a reuse of --text-body, which is intentionally flat/fixed below 1440px (see the media query below) since paragraph text shouldn't shrink on a narrower screen. The switch is different: its padding already shrinks fluidly at these widths (see .nav__switch-opt's own comment), and leaving its font-size flat against that shrinking padding was exactly the "doesn't shrink like the title does" mismatch this token fixes. Same 900px→375px breakpoint pair as that padding clamp, so text and padding shrink on the same schedule instead of drifting apart. */ --text-nav-switch: clamp(11px, calc(9.571px + 0.381vw), 13px); /* 13px @900px+, 11px @375px */ } /* ---------- light mode ---------- A real palette, not a filter. The previous implementation was `html[data-theme="light"] { filter: invert(1) hue-rotate(180deg) }` with a second, cancelling invert on every img/video/canvas — a trick that dates from an older version of this site and had stopped being survivable: it inverted the brand purple into a green, it could not tell a surface tint from a cast shadow (so shadows became glows), the double-invert on media broke the moment an element was both a surface and a picture, and `filter` on creates a containing block that quietly breaks position: fixed inside it. This block instead redefines the tokens the rest of the file already speaks in. Nothing below it is theme-aware; every rule just names a token and follows. Adding a component needs no light-mode rule of its own as long as it uses these. Deliberately NOT overridden: rgba(0, 0, 0, a) shadows, which stay dark in both themes, and the #000 letterbox on .cs-video / .cs-square--contain, which matches the video sources' own black slate rather than the page. */ html[data-theme="light"] { --bg-top: #e9ebf7; --bg-bottom: #ffffff; --text-primary: #14162b; --text-secondary: #4e5372; --text-muted: #767b96; --nav-bg: #dcdff0; --surface-bg: rgba(20, 22, 43, 0.04); --surface-border: rgba(20, 22, 43, 0.12); /* #a855f7 only reaches ~3.5:1 on white — fine for a 120px title, not for the inline links and small marks that also use it. Deepened. */ --accent: #7e22ce; --accent-strong: #6b21a8; /* the one line that flips ~44 translucent-white rules to dark */ --overlay-rgb: 20, 22, 43; --ink: #14162b; /* --copy-ink's counterpart, matched by CONTRAST rather than by hue. Inverting the dark value lands in the warm greys, which measure the same on a dark ground but only ~4.9:1 on this one - the same nominal step away from --ink reads noticeably fainter on a light page. This is picked to hold ~5.9:1 against the lighter end of the --bg-top/--bg-bottom gradient, so body copy sits the same distance below its headings in both themes, and it keeps the palette's blue lean rather than the warm grey a straight inversion produces. */ --copy-ink: #5f6377; --chip-bg: #e7eaf7; --chip-border: #a6abc6; --media-backdrop: #dce0f0; /* a white halo is invisible on white — a soft dark one keeps the Mondwest titles feeling lit rather than flat */ --hero-glow: rgba(20, 22, 43, 0.22); --sel-bg: #14162b; --sel-ink: #f4f5fb; /* the ring stays white here — only its supporting colours change. A white glow is invisible on a light page, so it becomes a soft dark one reading as a shadow under the ring, and the halo is pushed from 0.5 to 0.72: on a dark page the white stroke carries itself and the halo only needs to define an edge, but on a light one the halo is doing all the work of separating ring from background. */ --cursor-glow: rgba(20, 22, 43, 0.22); --cursor-halo: rgba(20, 22, 43, 0.72); /* the footer slab is a deliberate surface CHANGE, so it inverts with the page rather than staying white-on-white */ --slab-bg: #14162b; --slab-ink: #f4f5fb; --slab-ink-soft: rgba(244, 245, 251, 0.62); --slab-btn-bg: #22254a; --slab-btn-hover: #2d3160; } /* the 1440px sizes above are the brand spec's ceiling, not the whole site's — on an actual large monitor they were reading a little small. Past 1440px, every token keeps growing (each formula picks up exactly where its 1440px value left off, so there's no visible jump at the breakpoint) up to a second, higher ceiling reached at 1920px, then holds flat again beyond that — display/heading tiers grow ~15% further, body/caption a gentler ~10% since reading text shouldn't scale as aggressively as headlines. */ @media (min-width: 1440px) { :root { /* headings (title/h1/h2/h3) now scale ×2 by 1920px — same multiplier across the whole heading family, so their relative proportions to each other stay exactly what they are at 1440px, just uniformly bigger. Body/caption scale ×1.375 (the title/body split from before — display text can grow more aggressively than reading text without hurting layout/legibility). */ /* --text-title no longer has a tier here — it's pure vw now (see its :root definition above), so it already keeps scaling smoothly past 1440px on its own, with no seam at this breakpoint to patch. --text-h1, --text-h2, and --text-h3 are also intentionally NOT overridden here — all three stay at their original, flat ceilings (the base :root values above, unedited since first defined) for any viewport ≥1440px: 4rem for --text-h1 (section headings — "Projects & Case Studies", "Introduction", etc.), 2.688rem for --text-h2 (the "subheading" style), and 1.375rem/22px for --text-h3 (the homepage hero paragraph) — confirmed against the actual 1.375rem/22px spec, no big-screen growth for any of the three. */ --text-body: clamp(1rem, calc(-0.125rem + 1.25vw), 1.375rem); /* 22px @1920 (×1.375) */ --text-caption: clamp(0.688rem, calc(-0.086rem + 0.86vw), 0.946rem); /* ~15.1px @1920 (×1.375) */ } } * { margin: 0; padding: 0; box-sizing: border-box; } button, input, select, textarea { font-family: inherit; color: inherit; } html { scroll-behavior: smooth; } /* ---------- custom cursor ---------- A 38px ring that replaces the system pointer. Shape follows the Figma panel — a circle with no fill — but the stroke deliberately does not: the spec's 1px #727272 is the site's own chip/button stroke colour, and at 38px across it was a grey hairline that disappeared against photos, video tiles and the 3D model. It is 2px of white with a contrasting dark halo instead (see --cursor-stroke in :root). Restore the original by setting --cursor-stroke: #727272 and the border to 1px. Drawn in CSS rather than shipped as the supplied Ellipse PNG on purpose — "stroke weight 1, position inside" is a vector instruction, and a 38px raster would soften on a HiDPI screen while a border stays exactly 1 device-independent pixel at any zoom. It also costs no request and can react to hover. Gated behind pointer: fine. A touch device has no persistent pointer to follow, and hiding the system cursor there would take away the caret on a laptop's trackpad-less tablet mode for nothing. Everything in here — including cursor: none — lives inside that query, so a touch user keeps native behaviour untouched. */ @media (pointer: fine) { /* !important, and on the universal selector, on purpose. Six rules in this file set cursor: pointer and every one of them is class-based (.btn, .filter-pill, .nav__theme-toggle, ...). A type or universal selector loses to a class on specificity, so `button { cursor: none }` was silently beaten and the system arrow still appeared over every button — measured, not assumed. Raising specificity selector-by- selector would mean naming all six and re-naming them whenever one is added; the intent here is absolute ("no native cursor anywhere while the ring is active"), and !important is the honest expression of it. Scoped to pointer: fine, so it cannot reach a touch device. */ html, body, *, *::before, *::after { cursor: none !important; } /* Two elements, deliberately. This one is a fixed 38px POSITIONING box that never changes size; ::after draws the visible circle inside it and is the only thing that resizes. The split exists because main.js places the ring with translate3d(x - RADIUS, y - RADIUS) using a constant 19px — half of 38. Resize this box and that constant is wrong: the circle would drift ~10px down-right of the true pointer the moment it changed size, and the smear's rotate/scale (applied about the box's own centre) would pivot around the wrong point. Keeping the box rigid means the hover size change costs the follow loop nothing. */ .cursor-ring { position: fixed; top: 0; left: 0; width: 38px; height: 38px; /* never let the ring eat a click, and keep it above everything including .nav-wrap's z-index: 999 */ pointer-events: none; z-index: 2147483647; /* the element is moved by transform alone (never top/left), so the whole follow loop stays on the compositor. `filter` used to be listed here too, back when the loop wrote a blur radius every frame — promising the compositor a filter it no longer animates just costs it preparation for nothing. */ will-change: transform; /* opacity only — position must not be transitioned or it would fight the rAF loop that already smooths it */ transition: opacity 0.25s ease; opacity: 0; } .cursor-ring::after { content: ""; position: absolute; /* inset is what animates on hover — insetting equally on all four sides shrinks the circle about the box's centre, so it stays exactly on the pointer at every size */ inset: 0; border-radius: 50%; /* Figma: Fill (none) + Stroke #727272, weight 1, inside. --cursor-fill is a hook rather than a value in use: set it to a colour if the ring should read as the solid ball the PNG export shows. */ background: var(--cursor-fill, transparent); /* 1px -> 2px. At 38px across, a single pixel of stroke is a hairline and reads as an artefact rather than a pointer; 2px is still a thin ring but holds its shape while it is being stretched and blurred by the motion smear, which thins the stroke further along one axis. */ border: 2px solid var(--cursor-stroke, #ffffff); /* first shadow is the halo — a contrasting hairline hugging the ring so it stays readable over photos, video tiles and the 3D model, where a single flat colour would sink into the background. Second is a soft glow that makes it feel lit rather than drawn. */ box-shadow: 0 0 0 1px var(--cursor-halo, rgba(0, 0, 0, 0.45)), 0 0 14px 2px var(--cursor-glow, transparent); transition: inset 0.2s ease, border-color 0.2s ease; } /* revealed on the first real pointer move, so the ring never sits parked in the top-left corner before the visitor has touched the mouse */ .cursor-ring.is-live { opacity: 1; } /* stands in for the system pointer over interactive elements — the ring contracts to a small dot-like circle rather than expanding. Shrinking reads as the cursor "focusing" on the thing under it, and it keeps the target visible: a 58px ring grown over a filter pill covered the pill it was pointing at, which is the opposite of what a pointer should do. */ .cursor-ring.is-hot::after { /* 38 - (10 * 2) = an 18px circle, still centred on the pointer */ inset: 10px; border-color: var(--cursor-stroke-hot, #ffffff); } /* A ring is a 1px line; a plain filter: blur() at any strength that reads as "fast" would dissolve it entirely. The motion smear is therefore the directional stretch applied in main.js — the ring elongates along its own travel and thins across it, which is what a smeared circle actually looks like. It used to be that stretch PLUS a light per-frame filter: blur(). The blur is gone, and the reason is cost rather than taste. This element replaces the system cursor, and a system cursor is drawn by the OS compositor at no cost to the page at all. Everything the ring does per frame is now a single `transform` write — position, rotate and scale are all compositor properties, so a moving ring produces no layout, no paint and no raster. An animated filter radius was the one thing that broke that: it forced the element to be re-rasterised and run through a GPU blur every frame it moved, which on a laptop already short of frames is precisely where it hurt most. The stretch was always doing most of the work of reading as speed anyway. */ } /* prefers-reduced-motion needs no rule of its own here any more. It used to exist to out-specify the inline filter the loop wrote every frame; with no inline filter left, main.js's own `reduced` branch simply skips the smear transform and the ring follows the pointer rigidly. */ /* ---------- scrollbar ---------- */ /* hidden entirely, on request — was previously a thin, rounded, translucent bar (styled, not removed); this replaces that whole ::-webkit-scrollbar-* rule set (track/thumb/hover) since none of it paints once the bar itself is gone. Scrolling itself is untouched — this only hides the visual track/thumb, not overflow/scroll behavior — and -ms-overflow-style covers old (EdgeHTML) Edge, which ignores both scrollbar-width and ::-webkit-scrollbar. */ html { scrollbar-width: none; -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; width: 0; height: 0; } body { position: relative; font-family: var(--font-body); font-size: var(--text-body); /* #121327 fades to black right around where the circle buttons begin. NOT `fixed` attachment — that pins the gradient to the viewport, so it recomputes for whatever's currently on screen and effectively "follows" you as you scroll. Default (scroll) attachment anchors it to the page instead: purple only at the very top, solid black for the rest of the page as you scroll down. */ background: linear-gradient(180deg, var(--bg-top) 0px, var(--bg-bottom) 1396px); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } ::selection { background: var(--accent); color: var(--ink); } /* ---------- restrained "glass" surface (secondary panels only) ---------- */ .glass { background: var(--surface-bg); border: 1px solid var(--surface-border); backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3); } /* ---------- layout helpers ---------- */ .container { width: min(100% - 48px, var(--container)); margin-inline: auto; } .container--wide { /* the 110px side gutter was a flat subtraction regardless of viewport — fine at desktop widths, but on a small phone (~320px) it eats a disproportionate chunk of the screen (110/320 = ~34% just for padding) and was tight enough to wrap the hero CTA button onto two lines. Fluid between the same floor .container itself uses (48px) and the original 110px ceiling, so it shrinks in step with the viewport instead of staying desktop-sized until it doesn't fit. */ width: min(100% - clamp(48px, 6vw, 110px), 2600px); } section { padding-block: 64px; } /* separation BETWEEN sections, on top of the padding each already carries. Written as section + section rather than a margin on every section for two reasons: it can't add a gap above the first one (the heroes are viewport-fitted — .hero's height is measured as viewport minus nav, so a margin above it would push it down and overflow the very fit that JS just solved), and adjacent margins can't double up. Same construction as .cs-container section + section, which has done this inside the case-study pages all along; that rule is more specific, so those pages keep their own tighter rhythm rather than inheriting this one. */ section + section { margin-top: clamp(3rem, calc(1.944rem + 4.507vw), 6rem); } .eyebrow { display: inline-block; font-family: var(--font-display); font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } /* ---------- nav ---------- */ .nav-wrap { /* not sticky by design — the bar scrolls away with the rest of the page instead of pinning to the viewport */ /* --nav-fit is the height arm (see :root); max() against the clamp's own floor stops the two compounding into something tiny on a short phone. Range dropped 14–20px → 10–14px in the same pass that took the whole bar down a size — see .nav__switch-opt for the reasoning. */ padding-top: max(10px, calc(clamp(10px, calc(9.030px + 0.259vw), 14px) * var(--nav-fit))); /* position: relative carries no visual/layout change on its own (no offsets set) — it's here purely so z-index actually applies: a static element ignores z-index entirely. Wrapping the whole nav in one stacking context like this, rather than relying on the mobile dropdown's own z-index: 60 below, guarantees nothing on the page — now or added later, anywhere else in this file — can ever paint over any part of the nav, not just the dropdown. 999 is well above every other z-index in this file (60 is the next-highest, on .nav__links below, which this now sits above too). */ /* absolute, not relative: the bar is a LAYER over the page now rather than a block that occupies flow and pushes every hero down by its own height. z-index: 999 already put it on top in paint order; what it did not do was stop it consuming ~130px of vertical space that the Play hero wanted back. Still not fixed — it scrolls away with the page exactly as before, which absolute preserves and fixed would not. `main` takes an equal padding-top so every other page renders byte-identically; only .dm-hero opts out of that padding to reclaim the band. */ position: absolute; top: 0; left: 0; right: 0; z-index: 999; } /* Pays back the flow space .nav-wrap stopped occupying. Set from the measured bar height by main.js (--nav-h); the 130px fallback is the value at a typical desktop window, used only for the instant before the script runs and whenever JS is unavailable. */ main { padding-top: var(--nav-h, 130px); } .nav { /* three independent groups (logo / Work·Play switch / links), not one floating pill — a grid keeps the switch mathematically centered (equal 1fr side columns) no matter how wide the logo or the link list ends up being, which justify-content:space-between can't guarantee once the two sides are different widths */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, calc(11.087px + 0.777vw), 26px); /* height arm as on .nav-wrap above — gap is horizontal so it's left alone; only the block padding contributes to how tall the bar is */ padding-block: max(8px, calc(clamp(8px, calc(7.273px + 0.194vw), 11px) * var(--nav-fit))); } /* shared "liquid glass" surface, now only for .btn-glass (currently unused in markup, kept as a reusable component) — the nav bar itself sits directly on the page with no pill/blur of its own; only the Work/Play switch below carries its own glass surface */ .btn-glass { position: relative; isolation: isolate; background: var(--nav-bg); /* drop shadow: 50% #000, blur 17, y 4 + inner shadow: 25% #fff, blur 10, y 4 */ box-shadow: 0 4px 17px rgba(0, 0, 0, 0.5), inset 0 4px 10px rgba(var(--overlay-rgb), 0.25); /* glass effect approximation (refraction 58 / depth 20 / dispersion 50) */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .btn-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 115deg, rgba(var(--overlay-rgb), 0.35), rgba(168, 85, 247, 0.18) 35%, rgba(103, 232, 249, 0.14) 65%, rgba(var(--overlay-rgb), 0.05) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* The grid's first column, holding the logo and the theme switch side by side. Without this wrapper the switch had no grid-column of its own, so auto-placement dropped it into row 2 — the bar became two rows tall, which is what pushed --nav-h (and with it main's padding-top and every hero below) down the page. One row again. */ .nav__brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: clamp(8px, calc(6.545px + 0.388vw), 14px); } .nav__logo { display: flex; align-items: center; flex-shrink: 0; } .nav__logo-badge { /* full image, uncropped — aspect-ratio matches the source asset (124×59) exactly, so object-fit: cover below never has to crop anything off the sides to fill the box */ width: clamp(48px, calc(44.683px + 0.884vw), 66px); aspect-ratio: 124 / 59; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--nav-bg); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), inset 0 3px 6px rgba(var(--overlay-rgb), 0.2); } .nav__logo-badge img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .nav__logo-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; display: none; } /* Work / Play — the site's two halves (case studies vs. Digital Media) as a segmented control. The track shares the sitewide glass-outline formula (see .btn-outline, e.g. the homepage's "Building experiences" button) so it reads as the same surface; .is-active reuses the sitewide "active pill" look (see .filter-pill.is-active) so the interaction pattern matches too. */ .nav__switch { display: flex; align-items: center; flex-shrink: 0; border-radius: var(--radius-pill); grid-column: 2; justify-self: center; /* the track (this element) shrinking alongside the buttons it holds — same 900px→375px schedule as .nav__switch-opt's own padding/font clamps below, so the whole switch (track + both buttons) reads as one thing shrinking together, not just the buttons shrinking inside a fixed-size holder. */ gap: clamp(1px, calc(0.286px + 0.190vw), 2px); /* --nav-fit applied to all four sides, not just the block axis: this is a pill, so letting the track thin vertically while holding its full horizontal inset would visibly change its shape rather than its size */ padding: max(2px, calc(clamp(2px, calc(1.286px + 0.190vw), 3px) * var(--nav-fit))); } .nav__switch-opt { /* NOT the flat sitewide .btn spec (0.938rem/1.875rem) anymore — that read fine at desktop widths but stayed completely fixed all the way down to 420px (where a separate, abrupt media-query override used to cut it down to 8px/12px in one jump), making the nav bar's own Work/Play switch eat a disproportionate, non-shrinking chunk of a shrinking nav on tablet/small-laptop widths. Fluid instead, so there's no breakpoint jump and no "stuck at full size" range in between. The old 420px-only override is gone; this clamp covers it. The whole bar was then taken down a size on request — it read as too heavy for what it holds. Every nav clamp keeps the same 375px→cap schedule shape it always had, with both endpoints scaled down and the preferred term recomputed so the line still meets them exactly: this padding 8→15.008px became 6→9px, the inline pair 12→30px became 10→20px, --text-nav-switch 12→16px became 11→13px, .nav-wrap's padding-top 14→20px became 10→14px, .nav's padding-block 10→16px became 8→11px, .nav__switch's track 2→4px became 2→3px, and .nav__logo-badge 64→90px became 48→66px. Unlike the earlier height-only pass, the INLINE axis shrinks too — the request was for width as well as height, so the switch gets genuinely smaller rather than just flatter. Only the block axis takes --nav-fit on top of that, since only it feeds the bar's height. */ padding-block: max(6px, calc(clamp(6px, calc(3.857px + 0.571vw), 9px) * var(--nav-fit))); padding-inline: clamp(10px, calc(2.857px + 1.905vw), 20px); border-radius: var(--radius-pill); /* was var(--text-body), which is intentionally flat/fixed below 1440px — left the text at a constant 16px while the padding above kept shrinking around it, so the button never actually looked like it was shrinking, just getting tighter-fitting. --text-nav-switch is a dedicated token shrinking on this exact same 900px→375px schedule, so text and padding scale down together — see its own :root comment for the full reasoning. */ font-size: var(--text-nav-switch); font-weight: 500; color: var(--text-secondary); white-space: nowrap; /* same bouncy back-out curve as .btn — see its own comment for why */ transition: color 0.2s ease, background 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav__switch-opt:hover { color: var(--text-primary); transform: scale(1.14); } .nav__switch-opt.is-active { background: var(--sel-bg); color: var(--sel-ink); } .nav__links { display: flex; align-items: center; /* tightened 20–36px → 14–24px alongside the smaller link text above; 36px of air between three short words was spacing built for the old, larger type */ gap: clamp(14px, calc(8.140px + 1.563vw), 24px); flex-wrap: nowrap; grid-column: 3; justify-self: end; } .nav__links a { /* --text-nav-switch, not --text-body. --text-body grows above 1440px (see its media query) and reached 22px on a 2560-wide monitor, which was already the largest thing in the bar and became conspicuous once the switch came down to 13px — a 22px link next to a 13px button read as two different components rather than one bar. Sharing the switch's token keeps every piece of nav text on one size and one schedule. */ font-size: var(--text-nav-switch); font-weight: 400; color: var(--ink); white-space: nowrap; transition: color 0.2s ease; } .nav__links a:hover, .nav__links a:focus-visible { color: var(--text-secondary); } /* light/dark mode switch — always visible (unlike .nav__toggle, which only shows up once the mobile hamburger breakpoint kicks in) */ .nav__theme-toggle { display: flex; align-items: center; justify-content: center; /* takes --nav-fit like the rest of the bar, so it shrinks with the logo on a short window instead of being the one fixed-size thing in the row and quietly setting the bar's minimum height */ width: max(30px, calc(38px * var(--nav-fit))); height: max(30px, calc(38px * var(--nav-fit))); flex-shrink: 0; border-radius: 50%; background: rgba(var(--overlay-rgb), 0.05); border: 1px solid rgba(var(--overlay-rgb), 0.14); color: var(--text-primary); cursor: pointer; /* same bouncy back-out curve as .btn — see its own comment for why */ transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav__theme-toggle:hover { background: rgba(var(--overlay-rgb), 0.1); } .nav__theme-toggle:active { transform: scale(0.92); } /* dark mode (default): sun shown, click to switch TO light. light mode: moon shown, click to switch back to dark. */ .nav__theme-toggle .nav__theme-icon--moon { display: none; } html[data-theme="light"] .nav__theme-toggle .nav__theme-icon--sun { display: none; } html[data-theme="light"] .nav__theme-toggle .nav__theme-icon--moon { display: block; } .nav__toggle { display: none; grid-column: 3; justify-self: end; /* same bouncy back-out curve as .btn — see its own comment for why */ transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- buttons ---------- */ /* every button on the site (regardless of variant class) shares one exact spec now, not just .btn-outline: #fff text, no fill, 1px #727272 stroke, an inner shadow (x:0 y:1 blur:10 #fff 25%), and the sitewide glass effect (light -45°/80%, refraction 58, depth 18, dispersion 50, frost 15 — approximated the same way every other glass surface on the site is, via backdrop-filter blur+saturate plus the inner-shadow glow standing in for refraction/depth/dispersion/frost; there's no direct CSS equivalent for those Figma-specific params). .btn-glass/.btn-light/.btn-gradient used to each carry their own fill/text-color/shadow on top of this — those are gone now so every variant actually renders identically; the variant classes are kept only where a hover still needs its own distinct feedback (see below). .footer-links .btn is the one deliberate exception (see its own comment) — white text + no fill would be invisible on that section's white background. */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: var(--text-body); /* fixed, not fluid — a flat 0.938rem/1.875rem spec across every button on the site, not a clamp() range like before */ padding: 0.938rem 1.875rem; border-radius: var(--radius-pill); border: 1px solid var(--chip-border); background: transparent; color: var(--ink); box-shadow: inset 0 1px 10px rgba(var(--overlay-rgb), 0.25); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); cursor: pointer; /* back-out easing (overshoots past the target size, then settles) is what actually gives this the bouncy, "pops up" feel on hover instead of a flat linear grow — same idea as the chunky, springy button scale-up in Nintendo's Mii Creator. Faster/bigger than the first pass (0.35s/1.08 -> 0.22s/1.14) per follow-up feedback. */ transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease; } .btn:hover { transform: translateY(-2px) scale(1.14); background: rgba(var(--overlay-rgb), 0.08); } /* glass pill — "Case studies", mobile nav toggle. No properties of its own left — kept only as a marker class (see the shared .btn rule) in case a future variant-specific tweak needs a hook here again. */ .btn-glass { } /* solid light pill — "Contact" — no longer solid; same shared glass look as every other button now, kept only for its own hover tweak */ .btn-light:hover { background: rgba(var(--overlay-rgb), 0.08); } /* the one accent-colored button on the site — no longer accent-colored; same shared glass look as every other button now, kept only for its own hover tweak (a bit brighter than the default, since this one used to carry the site's one spot of accent color) */ .btn-gradient:hover { background: rgba(168, 85, 247, 0.18); } /* no-fill glass — the About hero's discs, and (below) the callout / CTA pills and takeaway cards: every glass-surface component on the site that ISN'T a button or a tag (those each moved to their own distinct formula — buttons up in .btn, tags down by .tag) shares this one formula: low 10px blur (kept low on purpose — see .cs-callout, "The creative content..." — rather than the heavier 20px blur this group used to carry), drop shadow, and a soft-blurred inner glow standing in for the Figma refraction/depth/dispersion glass effect. Original ~90%-opacity white stroke — these are decorative/content surfaces, not buttons, so they keep the old look rather than .btn's #727272 + single inner-shadow spec. .cs-callout and .cs-takeaway-card (the "My takeaways"/"The next steps"/"What I learned" cards — same component, different heading copy per case study) still share this base (position/isolation/color) but get their own flat fill + no stroke + no glass right below, and .cs-quote now joins them there. .about-hero__disc is what still keeps the original glass look. .cs-cta (the "Visit the website here."-style callouts that are actually links) is deliberately excluded from that flat treatment too: it already carries .btn/.btn-outline and gets the sitewide button treatment from there instead, which per this request is exactly what every callout WITH a link keeps. */ .about-hero__disc, .cs-callout, .cs-takeaway-card, .cs-quote { position: relative; isolation: isolate; background: transparent; border: 0.5px solid rgba(var(--overlay-rgb), 0.9); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 0 23px rgba(0, 0, 0, 0.25), inset 0 4px 16px rgba(var(--overlay-rgb), 0.25); color: var(--ink); } /* flat #171717, no stroke, no glass at all — overrides the shared rule above entirely rather than leaving blur/box-shadow declared but invisible under an opaque fill (the inner glow specifically would still show through regardless of the fill's opacity, so it has to be switched off outright, not just covered up). */ .cs-callout, .cs-takeaway-card, .cs-quote { background: var(--chip-bg); border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* .filter-pill/.nav__switch don't carry the .btn class, so they need this repeated explicitly — otherwise identical to .btn's own glass spec (transparent fill, #fff text, 1px #727272 stroke, the same single inner-shadow). .btn-outline/.cs-cta dropped from this whole block — both always carry .btn too (see their own markup), so they already get every one of these properties from there now; repeating them here would just be redundant, not different. */ .filter-pill, .nav__switch { position: relative; isolation: isolate; background: transparent; border: 1px solid var(--chip-border); color: var(--ink); box-shadow: inset 0 1px 10px rgba(var(--overlay-rgb), 0.25); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); } .about-hero__disc:hover, .filter-pill:hover, .nav__switch:hover { background: rgba(var(--overlay-rgb), 0.08); } /* Every button on the site grows on hover, to the same 1.14 the Work section's filter pills use. The theme toggle and the mobile menu button were changing colour and sitting still. Scale alone, no translateY: .btn adds a 2px lift on top because it is a free-standing pill with room above it, but these two are seated in the nav bar, where lifting reads as drift rather than as a press-ready button. */ .nav__theme-toggle:hover, .nav__toggle:hover { transform: scale(1.14); } /* The five buttons in the About hero (three discs, Biography, My design ethos) hover on `scale` rather than `transform`, unlike every other button on the site. All five run the wiggle keyframes, which animate `transform` — and an animation's value outranks a normal declaration for the same property, so a hover written as `transform` is liable to be swallowed for as long as the wiggle is running. That also applies to .btn's own hover transform, which is what Biography and My design ethos would otherwise be relying on. `scale` is an independent transform property, so it composes with whatever `transform` the animation sets on that frame instead of competing for the same slot. Same 1.14 as everything else, and the wiggle keeps drifting underneath it either way. */ .about-hero__disc:hover, .about-hero__action:hover { scale: 1.14; } /* font-size intentionally not overridden here — every button shares --text-body now (see .btn); this variant only changes padding */ .btn-sm { padding: 12px 22px; } /* ---------- hero ---------- */ /* Fit-the-viewport hero — nothing in here ever needs a scrollbar to see, at any window size, including a wide-but-short desktop window (the old version only shrank with WIDTH via vw units, so a short window just cropped the bottom of the hero instead of shrinking to fit it). Every fluid property below is `calc( * var(--hero-fit))`. The vw-clamp arm is completely unchanged, so width-driven behavior (phones, tablets) is exactly what it always was; --hero-fit is a 0–1 multiplier that only ever pulls things smaller, and only once the window gets short enough for it to matter. This used to be `min(, calc( * var(--hero-fit)))`, which was NOT proportional: near fit = 1 the clamp arm won instead, so the rendered height wasn't a straight multiple of --hero-fit and the shrink landed unevenly across the stack. A plain multiply is linear, which is what lets main.js solve for the right fit in a single measuring pass — and it means every part of the hero shrinks by the SAME factor, so a short window reproduces the tall-window composition at a smaller size instead of rearranging it into a different one. Unlike the old version the title and description shrink too (see their own comments). They were deliberately left out before because shrinking JAYDON WANG on its own made it render smaller than every other page's title on an ordinary laptop; that objection is gone now that .cs-hero__title takes the same multiplier, so the titles shrink together and stay in proportion with each other rather than drifting apart. --hero-fit itself is set by main.js, not computed here: it depends on the hero's natural (unshrunk) content height, which depends in turn on --hero-fit, and neither calc() nor a container query can resolve that cycle. That also retires the old hard-coded 1070px "natural height" constant and the 375–3840px width sweep that was needed to keep it honest — main.js measures the real number off the real page on every resize instead. :root's --hero-fit: 1 is the fallback, so anything that isn't a hero still renders full size. Unlike the old clamp()s this has no floor: a short enough window keeps shrinking for as long as it takes to fit, by design. */ .hero { position: relative; overflow: hidden; /* container-type: size used to be here purely so --hero-fit could read 100cqh; main.js computes the fit now, and nothing else in the file queries this container, so the containment it forced is gone too */ /* JS (main.js) overwrites this with the exact space left below the nav; 100vh is just the pre-JS fallback so nothing flashes at 0 height for the instant before that runs */ height: 100vh; display: flex; flex-direction: column; align-items: center; /* anchored to the top (padding-top is what controls the gap below the nav) rather than vertically centered — centering left a big empty gap above the laptop/title/paragraph/button on anything taller than the hero's natural content height, which read as the whole block sitting too low. overflow: hidden above is still the safety net if --hero-fit's estimate ever runs a few px short on a very tight window, same as before. */ justify-content: flex-start; text-align: center; /* the fixed gap between title/laptop/desc in .hero__intro's stacked grid (see its own comment) — replaces what used to be a 1fr row's worth of leftover hero height sitting between them. Multiplied by --hero-fit like the paddings below, so it shrinks along with everything else on a short window instead of holding a flat gap the shrunk content no longer has room for. Tightened further on request (was 20-48px) — the laptop sits noticeably closer under the title now, and the paragraph (same gap token, so it tracks the laptop's new position rather than getting stranded below it) moves up right along with it. */ /* nudged back up slightly (28px cap -> 36px) after .hero__intro .hero__title picked up its own negative margin-bottom below — trimming that title's real invisible font-metric padding closed part of the title-to-laptop gap for free, so this can afford to be a bit more generous again without the group reading as cramped */ --hero-stack-gap: calc(clamp(14px, 1.8vw, 36px) * var(--hero-fit)); /* these override the generic section{padding-block} rule (higher specificity), so without their own fluid range the hero would hold onto a fixed padding even on a phone — clamp() gives it the same continuous shrink as everything else, and the --hero-fit multiplier gives it a further shrink once height is tight */ /* down again (24-39px -> 14-23px) — with the title now a plain grid item (see .hero__intro), this padding-top IS the whole gap to the nav, no separate margin nudge layered on top of it anymore */ padding-top: calc(clamp(14px, calc(12.2px + 0.583vw), 23px) * var(--hero-fit)); /* was a flat 150px taller than padding-top at every viewport width (214–330px) — that was headroom for a decorative background that no longer needs it, and was the single biggest reason the hero didn't fit on an ordinary laptop window in the first place, so it's been brought back down near padding-top's own range instead */ padding-bottom: calc(clamp(24px, calc(14.29px + 2.589vw), 64px) * var(--hero-fit)); } .hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, rgba(var(--overlay-rgb), 0.4) 0px, rgba(var(--overlay-rgb), 0.4) 1px, transparent 1px, transparent 220px ), repeating-linear-gradient( 90deg, rgba(var(--overlay-rgb), 0.4) 0px, rgba(var(--overlay-rgb), 0.4) 1px, transparent 1px, transparent 220px ); /* fades out toward the bottom of the hero as it hands off to the section below */ mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%); } /* homepage-only variant — lives at the body level instead of inside .hero (see the HTML comment above its markup for why), so it needs its own positioning against body's box instead of .hero's inset: 0. height is set inline by main.js, since it has to reach from the true page top through the bottom of .hero — a distance CSS alone can't express once the element isn't nested inside .hero anymore. Negative z-index keeps it behind body's normal-flow content (nav, hero text) while still painting above body's own background. */ .hero__grid.hero__grid--homepage { top: 0; right: 0; bottom: auto; left: 0; z-index: -1; /* fainter, bigger squares than the shared .hero__grid default — full background-image override since its two comma-separated gradient layers (horizontal lines, vertical lines) can't be partially overridden. background-position shifts just the vertical-line layer half a square over, so the line that would otherwise sit flush against the page's left edge (reading like an unwanted border) lands in the middle of a gap instead. */ background-image: repeating-linear-gradient( 0deg, rgba(var(--overlay-rgb), 0.18) 0px, rgba(var(--overlay-rgb), 0.18) 1px, transparent 1px, transparent 320px ), repeating-linear-gradient( 90deg, rgba(var(--overlay-rgb), 0.18) 0px, rgba(var(--overlay-rgb), 0.18) 1px, transparent 1px, transparent 320px ); background-position: 0 0, 160px 0; } /* fills the full height .hero hands it (flex: 1 — .hero__intro is .hero's only child, so this just becomes 100% of .hero's own, JS-managed height) so the title/laptop/desc below have a real box to lay out against instead of stacking by natural content height. Four grid rows — title (auto), laptop (auto), desc (auto), then a trailing 1fr SPACER row with nothing in it. That 1fr row is what soaks up whatever height .hero__intro has left over beyond its own three lines of actual content, and — because it comes AFTER all three, not between them — that leftover space collects below the paragraph instead of being stretched out as gaps between the title/ laptop/desc themselves. (Used to be auto 1fr auto, with the laptop sitting in that middle 1fr row — centered there by default, nudged up toward the title with a large margin-bottom. That kept the title flush against the top, same as now, but put the entire hero's worth of leftover space between the three elements, reading as "too far apart" — moved that leftover space out to its own trailing row instead, and gave title/laptop/desc a small fixed --hero-stack-gap between them, so request.) */ .hero__intro { position: relative; z-index: 1; flex: 1; /* NOT width: 100% — that would override the width .container/ .container--wide already give this element (same specificity, later in cascade) and erase their side inset entirely, pinning the title flush against the true viewport edge */ display: grid; grid-template-rows: auto auto auto 1fr; row-gap: var(--hero-stack-gap); } .hero__title { font-family: var(--font-hero); /* FS Mondwest's own space glyph is essentially broken — measured it directly off the font file: 0.024em advance width, against 0.12–0.54em for actual letters (roughly a lowercase "i" would be the narrowest normal glyph). Words run together with no visible gap without this. word-spacing ADDS to whatever the glyph's own advance already is. Was 0.28em (landing the total around 0.3em, matched to this font's own letterforms) — tightened to 0.18em on request, still comfortably clear of the words running together. Repeated on every other rule that sets font-family: var(--font-hero) (this is a font-level bug, not specific to this one title). */ word-spacing: 0.18em; /* 400, not 700 — FS Mondwest only ships one weight; a "bold" request against it would just be browser-synthesized faux bold, which distorts a pixel-grid face like this one */ font-weight: 400; /* --text-title, same as every other member of this style (Digital Media's title, the case-study page titles, About me, JAYDON WANG included), times --hero-fit. The --hero-fit arm was previously removed from here: shrinking this title on a short window made JAYDON WANG render visibly smaller than every other title on ordinary laptop screens, because it was the ONLY title taking the multiplier. That's no longer true — .cs-hero__title now takes the same one and the Digital Museum title rides its stage's transform, so every title on the site shrinks by the same proportion on the same window and they stay matched to each other. Off the homepage --hero-fit resolves to :root's 1, so About's .page-hero title is untouched. JAYDON WANG briefly had its own width-driven override here (see .hero__intro .hero__title below) to keep it under half the viewport's width at any screen size — that constraint was explicitly dropped in favor of matching every other title's size exactly, and this still does that. */ font-size: calc(var(--text-title) * var(--font-hero-scale) * var(--hero-fit)); /* FS Mondwest also bakes in far more ascent/descent padding around its own glyphs than PP Mondwest did — measured both fonts' line metrics directly (canvas ascent/descent vs actual glyph ink): FS carries roughly 0.29em more built-in leading than PP did at any given line-height ratio. This was invisible on single-line titles, but on the multi-line ones ("Projects & Case Studies", "Jaydon's Digital Museum") it showed up as noticeably looser line spacing once --font-hero-scale enlarged the font to match PP's visual size. Was 1.2 under PP Mondwest — 0.91 here is that same PP-era looseness with FS's extra leading subtracted back out, not an arbitrary tighten. Repeated (with each rule's own original ratio minus ~0.29) on every other --font-hero rule. */ line-height: 0.91; color: var(--ink); } /* homepage only (scoped through .hero__intro, not the bare .hero__title the About page also uses) — pins the name to the top row, centered, matching the centered stack every other page keeps (was left-aligned; changed on request to match the reference layout). Just a normal grid item now (row 1, auto-sized to its own height) — no more position: absolute + a manually-tuned negative margin to fake "flush with the top": row 1 already IS exactly the title's height, so it sits flush against .hero's padding-top with nothing extra needed. To move the title closer to the nav from here, shrink .hero's own padding-top (see .hero) — that's the actual gap being closed. */ .hero__intro .hero__title { grid-row: 1; justify-self: center; /* no text-align override — inherits center from .hero */ /* no font-size override anymore — this used to have its own pure-vw clamp() specifically so JAYDON WANG always stayed under half the viewport's width at any screen size (measured off the font's actual glyph widths, with its own legibility floor for narrow phones). That constraint was explicitly dropped in favor of matching every other title's size exactly (see .hero__title's own comment on font-size) — so this now just inherits --text-title like the rest, and will run wider than half the viewport on most screens as a result. See git history for the old formula if that constraint ever needs to come back. */ /* white glow behind the name, per design request: FFFFFF at 62% opacity, 17px blur, no offset (a pure glow, not a cast shadow) */ filter: drop-shadow(0 0 17px var(--hero-glow)); /* FS Mondwest's line-box carries real empty space below the visible letters that --hero-stack-gap can't see or account for — it's baked inside this element's own box, not the space between this and .hero__faces below. Measured directly (rendered the same text to an offscreen canvas at this element's computed font-size and scanned for ink): about 0.1em of dead air sits between the bottom of the glyphs and the bottom of this box, on top of whatever --hero-stack-gap adds after it. This negative margin cancels that out so the laptop sits right under the actual letters instead of under invisible font padding — em-based so it scales with --text-title/--font-hero-scale at every viewport, same as the glow/word-spacing above. */ margin-bottom: -0.1em; } .hero__desc { /* the reserved --text-h3 (1.375rem) style — this is the placement for it. The About page used to carry a second, more specific .page-hero .hero__desc override; that page is a single-screen hero now (see .about-hero) and this class no longer appears on it, so the rule reaches the homepage paragraph and nothing else. The --hero-fit multiplier is back (it was dropped when the title's was — see .hero__title for why that no longer applies). This class is also shared with the case-study body copy, which sits outside any hero and so resolves --hero-fit to :root's 1; .cs-para overrides font-size there anyway. */ font-size: calc(var(--text-h3) * var(--hero-fit)); line-height: 1.5em; /* --copy-ink, the running-prose grey (see its own :root comment) — the same colour .cs-para already used, so every paragraph on the site that is not inside a button or a callout now reads as one voice. */ color: var(--copy-ink); } /* homepage only (see .hero__intro .hero__title above) — bottom row, centered, mirroring the title's placement across the grid (was right edge; changed on request to match the reference layout). Row 3 is auto-sized to this paragraph's own height, so it sits flush against .hero's padding-bottom the same way the title sits flush against padding-top — no position: absolute needed here either. */ .hero__intro .hero__desc { grid-row: 3; justify-self: center; margin: 0; /* scaled by --hero-fit like the font-size it measures, so the line breaks stay put. Left flat, a shrunk paragraph kept its full-width measure and re-wrapped from three lines to two, which changed the shape of the block on exactly the screens this is meant to leave looking identical. (.cs-hero__title's 14ch and .cs-hero__meta-item p's 32ch don't need this — ch already scales with font-size.) */ max-width: calc(560px * var(--hero-fit)); /* no text-align override — inherits center from .hero */ } .hero__desc strong { color: var(--ink); font-weight: 700; } /* ---------- About sub-pages: biography, film, music, trash ---------- */ /* Each view replaces the composition inside the SAME box the composition occupies: one screen below the nav, and no scrollbar. That is the whole point of the About page, and a view that pushed the window taller than the thing it replaced would break the illusion that you are still on the same screen. height, not min-height, and overflow: hidden with it — the contents are fitted to this box below rather than allowed to set it, so a clip is the failure mode instead of a scrollbar. Same bargain .about-hero makes for the composition, and the same 100vh - --nav-h arithmetic: --nav-h is measured by main.js and falls back to the 130px every other rule in this file uses. svh rather than vh so a mobile browser's collapsing address bar does not leave the box taller than the window. */ .about-view { /* a sheet laid on the board. Absolute inside .about-hero so it covers exactly the composition's box and nothing else: the grid underneath (.about-hero__grid, z-index 0) keeps drawing through every state, which is the one thing that makes this read as a swap rather than as a page change. Same z-index as .about-hero__inner, later in source, so a visible view sits over it. */ position: absolute; inset: 0; z-index: 1; /* laid out at all times, shown only when targeted. display: none would be simpler and cannot be animated — an element has to be in the layout to fade. visibility rides along with opacity so a hidden sheet is out of the accessibility tree and off the tab order rather than merely transparent, and it is in the transition list so it flips at the END of the fade out, not the start of it. */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s ease, visibility 0.45s; display: flex; flex-direction: column; overflow: hidden; /* Wider side gutters than .container--wide's own, which tops out at 110px and read as flush against the edge once the window is 2000px+. 7vw holds the proportion the design was drawn at instead of freezing at a pixel value. */ padding-inline: clamp(1.25rem, 7vw, 11rem); padding-block: clamp(0.75rem, 2.5vh, 2.25rem) clamp(1.25rem, 4vh, 3.5rem); /* Following a fragment scrolls the target to the top of the WINDOW, which here means straight past the nav. Reserving the nav's own height means the ideal scroll position is the one the page is already at, so nothing moves at all. That only holds while the sheet really does start at the top of the hero, which is what the margin reset below is protecting. */ scroll-margin-top: var(--nav-h, 130px); /* These are
s, so the sitewide `section + section` rhythm reached them: every view after the first (the three discs — only Biography is preceded by a div rather than a section) picked up a ~96px top margin. On an absolutely positioned box with inset: 0 that margin is not dead weight — it offsets the top edge and takes the same amount off the height, so the sheet sat one margin lower than the composition it replaces AND its scroll-margin no longer described where it starts. Following the fragment then scrolled the window down by exactly that margin, dragging the nav half off the screen. The rhythm between stacked sections means nothing for a sheet laid over another one, so it is switched off here rather than compensated for. margin-block only: these are .container elements, and the margin-inline: auto they get from it is what centres the sheet between left: 0 and right: 0 — a blanket margin: 0 here parks every view against the left edge and shifts its contents half a gutter off centre. */ margin-block: 0; } .about-view:target { opacity: 1; visibility: visible; pointer-events: auto; } /* the composition is the sheet that leaves. Not display: none, for the same reason as above: it has to stay in the layout to fade, and visibility keeps it out of the tab order while it is gone. */ .about-hero__inner { transition: opacity 0.45s ease, visibility 0.45s; } .about-hero:has(.about-view:target) .about-hero__inner { opacity: 0; visibility: hidden; pointer-events: none; } /* the crossfade is the interaction here, not decoration, so reduced motion gets the swap without the fade rather than losing the swap. */ @media (prefers-reduced-motion: reduce) { .about-view, .about-hero__inner { transition: none; } } /* everything in a view that is not the Back link is the content block. min-height: 0 because a flex item defaults to min-height: auto, which refuses to shrink below its content and is exactly how a "fitted" box ends up overflowing anyway. .subpage__shot is excluded rather than overridden: it is an that IS the content block, and flex: 1 in a column container sets an item's height, which stretched a 1431x1029 capture to fill the box and upscaled it into softness. Excluding it here is cheaper than winning a specificity fight with this selector later. */ .about-view > :not(.subpage__back):not(.subpage__shot) { flex: 1; min-height: 0; margin-top: clamp(0.75rem, 3vh, 2.25rem); } /* the way back up to the composition. Sized and coloured like the contents-list links in the case studies rather than like a .btn — it is a step in the page's hierarchy, not an action, and a full glass pill here would outweigh what it sits above. align-self keeps it from stretching the full width of the flex column. */ .subpage__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--text-body); color: var(--copy-ink); transition: color 0.2s ease; } .subpage__back:hover { color: var(--ink); } /* the arrow steps back on hover, toward where the link goes */ .subpage__back-arrow { display: inline-block; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .subpage__back:hover .subpage__back-arrow { transform: translateX(-0.25em); } /* ---- Music and Trash: one screenshot of a desktop app ---- contain rather than a max-width, so the window is fitted to whichever of the two axes runs out first and is never cropped or upscaled. It keeps its own corners: these are captures of real windows that are already rounded, and a radius from us would sit inside theirs and read as a double edge. */ .subpage__shot { display: block; width: auto; height: auto; /* Held well inside the sheet rather than fitted to it. At 100%/100% these two captures are under their own 1431px wide at most desktop sizes, so they rendered at full size and filled the board edge to edge — a window pasted over the page rather than a picture of one sitting on it. Both arms are caps, not sizes: whichever runs out first still decides, the aspect is still the image's own, and it is still never upscaled past its own pixels. */ max-width: min(100%, 70rem); max-height: 76vh; /* shrink to fit, never grow past its own pixels; align-self stops the cross-axis stretch doing the same to its width. */ flex: 0 1 auto; align-self: center; min-height: 0; /* auto block margins split the leftover column space above and below instead of banking it all under the image, which is what a fixed margin-top did — the capture hung off the Back link with the gap pooling at the bottom. This is the whole content of these two views, so it belongs in the middle of the board, not at the top of it. */ margin-block: auto; } /* ---- Film: three posters across ---- A list, because that is what it is: an unordered set of three things, not a layout of unrelated boxes. Sized off the row's HEIGHT — the posters are ~0.68:1 portraits, so height is what decides whether three of them fit a short window, and driving them from the width meant each one came out taller than the screen. */ .film-grid { list-style: none; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: clamp(0.75rem, 2.2vw, 2.5rem); } .film-grid li { min-height: 0; height: 100%; display: flex; } /* each poster keeps its own proportions: the three sources are 623, 608 and 602 wide against an identical 902 tall, so a shared width would stretch two of the three by a couple of percent. Equal heights, natural widths. */ .film-grid__poster { display: block; /* short of the full row on purpose: filling the box edge to edge made three posters read as a wall rather than as three objects laid out, and left no air under them. 62vh is roughly the proportion the design is drawn at. */ height: min(100%, 62vh); width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-md); } /* ---- Film, Music and Trash: the project cards' flip and tilt ---- Same motion as .project-card__media: a rotateY(-15deg) -> 0 swing in, then the pointer-tracked tilt from js/main.js. The swing is a keyframe on :target rather than the cards' class swap, because these sheets are opened by a link, not scrolled into, and :target re-matching restarts the animation every time a view is opened. A running animation also outranks the tilt's inline transform, so the swing can't be hijacked mid-flight and needs none of the cards' isFlipping() guard. The vanishing point lives on the parent, as with .project-card: each poster gets its own
  • so the outer two don't skew toward the middle of the row, and the lone screenshot uses the sheet itself. */ .film-grid li, .about-view:has(> .subpage__shot) { perspective: 900px; } .about-tilt { transition: transform 0.25s ease-out; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .about-view:target .about-tilt { animation: about-tilt-flip-in 1.1s ease-in-out; } @keyframes about-tilt-flip-in { from { transform: rotateY(-15deg); } to { transform: rotateY(0deg); } } @media (prefers-reduced-motion: reduce) { .about-view:target .about-tilt { animation: none; } } /* ---- Biography: copy left, photograph right ---- */ /* The pair is pushed down off the top of the view rather than starting flush under the Back link. Two reasons, both about how the eye reads a fixed-height box: 1. Optical balance. Content jammed against the top of a full-screen container with a large void beneath it reads as unfinished, like the page failed to load the rest. Sharing the slack between top and bottom makes the block look placed rather than dropped. 2. Slightly ABOVE centre, not on it. A block sitting on the exact geometric middle reads as low, because the eye takes the optical centre to be a little higher than the real one. The top gap here lands a bit under the bottom one on purpose. vh rather than a fixed pixel offset so the proportion survives a window of any height, and padding on the layout rather than a margin on either column, so the title and the photo still start on exactly the same line (see .bio__title's own margin-top). */ .bio__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: stretch; padding-top: clamp(1rem, 10vh, 9rem); } .bio__copy { display: flex; flex-direction: column; /* top-aligned, not centred: the title's first letter is meant to line up with the top edge of the photograph beside it. */ justify-content: flex-start; gap: clamp(0.75rem, 1.6vh, 1.5rem); min-height: 0; } /* Full title size, the same --text-title * --font-hero-scale every other H1 in this face uses (JAYDON WANG, the case-study titles, the footer). The 26vh arm is a guard, not a design choice: this title shares a fixed box with two paragraphs, so on a short window it has to give way rather than push the copy out of the bottom of the view. line-height 0.76 for the same reason the case-study titles carry it: FS Mondwest's default line box is far taller than its ink. */ .bio__title { font-size: min(calc(var(--text-title) * var(--font-hero-scale)), 26vh); line-height: 0.76; /* the white halo every FS Mondwest title on the site carries: FFFFFF at 62%, 17px blur, no offset. See .hero__intro .hero__title. */ filter: drop-shadow(0 0 17px var(--hero-glow)); /* FS Mondwest's line box opens with a slab of empty space above the letters, so top-aligning the two columns lined up the title's BOX with the photo, leaving its first letter sitting well below the photo's top edge. Measured for this rule the way .about-hero__title measures its own (glyph metrics off a canvas at the computed size, against this title's own 0.76 line-height): the ink starts 0.195em below the box. Cancelling exactly that puts the top of the B on the top of the photograph. em-based, so it holds at every size the clamp resolves to. */ margin-top: -0.195em; margin-bottom: clamp(0.5rem, 2vh, 1.75rem); } .bio__para { margin: 0; font-size: var(--text-body); line-height: 1.5em; /* the running-prose grey every other paragraph on the site uses, not full --ink: see .cs-para, which this matches exactly. */ color: var(--copy-ink); max-width: 62ch; } .bio__media { min-height: 0; display: flex; } .bio__photo { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; align-self: flex-start; border-radius: var(--radius-md); } /* ---- My design ethos: heading, rule, three takeaway cards ---- The case studies' "My takeaways" block lifted whole. The block is centred in the sheet the way the Music and Trash captures are, rather than hanging off the Back link with the slack pooled underneath. */ .ethos { display: flex; flex-direction: column; justify-content: center; } .ethos__grid { margin-top: 0; } /* Below the site's shared breakpoint the one-screen bargain is off: a phone cannot hold three posters or a two-column biography at a legible size, so the views go back to laying out in flow and scrolling. */ @media (max-width: 56.25em) { /* ---- the views stop being sheets pinned to a one-screen board ---- .about-hero is height: var(--about-h) — the viewport minus the nav — with overflow: hidden, and each .about-view is absolutely positioned inset: 0 inside it. That is the whole composition's premise on a desktop: the discs, the character and every view occupy exactly one screen and swapping between them never moves the page. It is also a hard cap, and on a phone the biography and the ethos cards simply contain more than one phone screen of content. Letting the sheet scroll inside itself was not enough: the content was still squeezed into a box the size of the viewport, with its own scrollbar nested inside the page's. So below this breakpoint an OPEN view drops the cap entirely — the section grows to whatever the content needs and the page scrolls, like every other section on the site. The board keeps its exact desktop behaviour whenever no view is open, which is the state the composition was actually designed for. display, not opacity, is what picks the visible view here: all five are laid out at once (see .about-view — they have to be, to fade), and in normal flow that would stack five full-height views down the page. The crossfade is the cost, and it is the right one to pay: display: none cannot transition, so the swap is instant on a phone and animated everywhere else. */ .about-hero:has(.about-view:target) { height: auto; /* still at least a full screen, so a short view (Music, Trash) does not leave the section shorter than the board it replaced */ min-height: var(--about-h); /* the desktop clip is a safety net for a composition built to fit; here the content is meant to exceed the old box */ overflow: visible; } /* opacity alone leaves it holding its full height in the flow, which would push every open view a screen down the page */ .about-hero:has(.about-view:target) .about-hero__inner { display: none; } .about-view { position: static; display: none; height: auto; /* overrides the base sheet's clip — the page scrolls now, not this */ overflow: visible; } .about-view:target { /* the base rule's column flex, restored: :target beats .about-view on specificity and comes later here, so this is what actually renders */ display: flex; } /* .about-view > :not(...) above gives every content block flex: 1 with min-height: 0, to divide up a sheet of known height. With the section auto-height there is no free space to divide, and a flex-basis of 0 with min-height: 0 collapses the block to nothing instead. Content sizing is what the flow layout needs. */ .about-view > :not(.subpage__back):not(.subpage__shot) { flex: 0 0 auto; } .bio__layout, .film-grid { grid-template-columns: 1fr; flex-direction: column; align-items: center; } .bio__layout { /* start, not the inherited center: with natural row heights there is nothing to centre, and centring is what turned an overflow into an overlap in both directions when there was. */ align-items: start; /* 10vh of optical centring belongs to a sheet holding one screen of two-column content — stacked and scrolling, it is 93px of dead space above the title on a 932px phone. */ padding-top: clamp(0.5rem, 2vh, 1.5rem); } .bio__title { /* cancels the -0.195em that lifts the title's ink onto the top edge of the photograph beside it. Stacked, the photograph is underneath and there is nothing to align to — the lift only pulls the title up into the Back link. */ margin-top: 0; } .bio__photo { /* max-height: 100% was a share of the squashed box; the column is content-sized now, so the image just takes its own aspect */ max-height: none; } .film-grid__poster { height: auto; width: 100%; max-width: 22rem; } .bio__photo { height: auto; aspect-ratio: 1448 / 1086; } .subpage__shot { height: auto; } } /* ---------- hero faces ---------- */ /* sits in .hero__intro's 2nd grid row, auto-sized to its own content — spacing to the title above and the paragraph below now comes from .hero__intro's own row-gap (--hero-stack-gap), not a margin nudge here. Used to sit in a 1fr row (the leftover space between title and paragraph) with a large margin-bottom pulling it off-center back toward the title — see .hero__intro's own comment for why that grew the title/laptop/desc gaps far apart and was replaced. */ .hero__faces { grid-row: 2; justify-self: center; position: relative; display: flex; justify-content: center; /* pulls the laptop up toward the title on request. Because this is a real margin on a grid row (not a transform), the row below follows: the paragraph rides up by the same amount and the pair keeps its own spacing, with the slack handed to .hero__intro's trailing 1fr row. Expressed against --hero-stack-gap rather than as a fixed px so it stays proportional as that gap scales with the viewport and --hero-fit — tightened on request from -0.7 to -1.5, so it now eats the whole row-gap and half as much again on top of it. That sounds like an overlap and isn't: the multiplier runs against the LAYOUT gap, while what reads as the gap on screen is the distance from the title's glyphs down to the laptop's raised right corner, and the title's line box leaves a deep band of empty space under its baseline that no letter occupies. Measured in the browser, this still leaves clear air at that tightest point. Push much past -1.5 and it closes — that corner is what runs out of room first, not anything the box model can see (see .hero__computer for the tilt). */ margin-top: calc(var(--hero-stack-gap) * -1.5); } /* replaces the old two-headshot pairing (a photo + a cartoon face) with a single looping clip — a laptop screen glitching between video static and the same cartoon avatar, rendered with real alpha transparency (WebM/VP9) so only the laptop shape shows, no background box. Sized up from the old two-headshot footprint — as a single, more detailed focal element it needs more visual weight to hold its own against the headline below; width follows the laptop's own ~1.8:1 aspect ratio. */ .hero__computer { /* multiplied by --hero-fit like everything else in the hero (see .hero), so it shrinks along with the rest on a short window instead of forcing the hero taller than the space actually available. Enlarged ~1.4x (142.5-270px -> 200-380px) on request — now that the hero is a tight, centered stack (title/laptop/desc all close together, see --hero-stack-gap) rather than spread across the full hero height, the laptop needed more visual weight to still read as the stack's secondary focal point instead of shrinking into it. Bumped up another ~10% (200-380px -> 220-420px, same vw slope methodology, just rescaled) — the three-line stack (title/laptop/ desc) sits well short of .hero's full height on tall/wide viewports, and the leftover space all collects below the paragraph (see .hero__intro's own comment on the trailing 1fr row); giving the laptop more presence is a safer way to fill that imbalance than stretching gaps or overriding the title's match-every-page size. */ /* Same size as the height-driven version this replaces (the laptop is exactly 1080x600, so height x 1.8 IS the width it was resolving to), but expressed as a width so it can be capped. Why it had to be: .hero__intro is a single-column grid, and a column with no explicit track size is as wide as its widest item. On a phone that item was this laptop — 220px tall, so 396px wide against a 342px container at 390px viewport — and a grid column wider than its container overflows to ONE side, the right. The title and paragraph are centred in that column, so the whole stack sat ~28px right of centre while the container around it was centred correctly. The cap is .container--wide's own width formula (its 2600px arm left out: it only binds past ~2710px, where this is nowhere near the limit), minus 1.5rem of air for the corners the -6deg tilt below swings past the layout box. */ width: calc(clamp(220px, calc(181px + 10.31vw), 420px) * var(--hero-fit) * 1.8); max-width: calc(100vw - clamp(48px, 6vw, 110px) - 1.5rem); height: auto; /* tilted counter-clockwise so the laptop leans toward the left side of the stack instead of sitting perfectly square between the title and the paragraph. Rotation doesn't change the layout box, so the corners swing past it by roughly (width / 2) * sin(angle) — at this size that's ~35px top and bottom against a --hero-stack-gap of only 14-36px, which is why the angle stays small: any steeper and the top-right corner starts biting into JAYDON WANG's baseline. The drop-shadow rotates with the element (filter is resolved in the element's own space, before transform); at 6deg the offset lands ~1.3px off true vertical, which is not perceptible. */ transform: rotate(-6deg); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45)); } /* irregular After-Effects-style wiggle — x/y drift only, no rotation */ @keyframes wiggle { 0% { transform: translate(0, 0); } 8% { transform: translate(4px, -4px); } 16% { transform: translate(-4px, 4px); } 25% { transform: translate(6px, 4px); } 35% { transform: translate(-4px, -6px); } 45% { transform: translate(4px, 2px); } 55% { transform: translate(-6px, -2px); } 65% { transform: translate(2px, 6px); } 75% { transform: translate(-3px, -4px); } 85% { transform: translate(5px, 3px); } 95% { transform: translate(-2px, -1px); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .project-card__media, .project-card__media.is-flipping-in, .project-card__media.is-flipped-in { transition: none; } } /* ---------- section heading ---------- */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; /* 36px, not 24px, so the head itself guarantees the gap to whatever follows it. It used to depend on the body element instead: .dm-media-grid carries margin-top: 36px and collapsed against this to 36, while .cs-cta carries none and fell back to the bare 24 — so Motion design sat 36px under its heading and Jaydon MP4 only 24px, on two sections that are otherwise identical. Matching 36 here makes Motion design collapse to the same 36 it already had (no visual change there) and brings the others up to it. */ margin-bottom: 36px; flex-wrap: wrap; } /* the heading/copy column fills the row instead of shrinking to its own content. As a default flex item (flex: 0 1 auto) it sized to its widest child, so the Jaydon MP4 paragraph sat in an 860px column inside a 2450px section while .cs-cta and the video grid below it ran the full width — the section read as two different widths stacked. min-width: 0 lets it actually shrink when it needs to, since a flex item's default min-width: auto refuses to go below its content. */ .section-head > div { flex: 1; min-width: 0; } /* Projects & Case Studies only — centered above the filters instead of the left-aligned heading+subtitle bar .section-head is elsewhere (e.g. Digital Media's "Motion design"). Scoped through .case-studies__side so that base .section-head layout stays untouched for other pages. Was right-aligned flush to the column's far edge; centered to read closer to the kynejang.com reference's centered sidebar treatment. */ .case-studies__side .section-head { justify-content: center; margin-bottom: 32px; } .case-studies__side .section-head h2 { text-align: center; /* "Projects" / "& Case Studies" is a hard
    in the markup, not natural wrapping — line-height is what actually controls the gap between those two lines. Deliberately NOT part of the site-wide 1.5em paragraph line-height below — this is a heading, not a paragraph. Was 1em under PP Mondwest — see .hero__title for why FS Mondwest needs its own ratio (0.71) to read the same. */ line-height: 0.71; } .section-head h2 { font-family: var(--font-hero); /* see .hero__title for why — FS Mondwest's own space glyph is essentially zero-width */ word-spacing: 0.18em; font-weight: 400; font-size: calc(var(--text-h1) * var(--font-hero-scale)); /* was unset ("normal", ≈1em for this font) — see .hero__title for why FS Mondwest needs an explicit, tighter ratio */ line-height: 0.71; letter-spacing: -0.01em; } /* spacing only. This paragraph now carries "hero__desc cs-para" in the markup, exactly like every case-study body paragraph, so its size, line-height and color come from .cs-para rather than being restated here — same reasoning as the comment on .cs-para itself: literally the same class, not a numeric match that can drift apart later. It used to set --text-secondary, which is what made it read grey next to the white body copy on the case studies. Scoped through .section-head so this margin still beats .cs-para's margin: 0 — .cs-para is later in the file, so a bare .section-head__sub would lose to it and the paragraph would sit flush against the h2 (the heading and this share a plain div with no gap of its own). */ .section-head .section-head__sub { /* the same clamp .dm-filter-row uses, not a fixed 28px. That row is what occupies this slot under Motion design's heading, and its gap is fluid (16px narrow → 28px at 1920px+), so a flat 28 would have matched only above 1920 and drifted apart everywhere below — at 1600px wide the pills sit 25.5px under their heading, not 28. Copying the expression keeps the two sections identical at every width. Was 8px, which made this paragraph read as tucked under the title rather than as its own line of the composition. */ margin-top: clamp(16px, calc(13.087px + 0.7767vw), 28px); /* runs the section's full width rather than .cs-para's 62ch measure. 62ch is a reading-length cap that suits a case study's long body copy; here it left the paragraph in a narrow column while everything else in the section spanned the full width. Type, line-height and color still come from .cs-para — this overrides the measure only. */ max-width: none; } /* ---------- case studies layout: narrow card list + right-hand heading/filters column ---------- */ .case-studies__layout { display: flex; align-items: flex-start; justify-content: space-between; /* was 64px — with .project-grid widened (see below), the sticky column no longer needs as much of a moat between it and the cards; a screenshot pass at 1440px showed the old 32%-wide card column leaving roughly two-thirds of the section as empty black space, with the heading/filters floating disconnected from the content they act on across that gap */ gap: 48px; margin-top: 40px; } /* heading + filters, right of the card list — sticks in view while the (now taller, 3-card) list scrolls past on the left, and is forced to exactly one viewport tall (top: 0 + height: 100vh) with its content flex-centered inside that box, so once pinned the heading/filters land near the vertical middle of the screen rather than hugging the top edge. height is min()'d against --side-max-h (set by main.js from .project-grid's real rendered height) purely as a safety cap — on a short card list / very tall viewport, an unconstrained 100vh box here would be taller than the list itself and stretch the whole row past what the list actually needs. padding-bottom is what pushes the pinned content up toward the top third of the screen instead of dead center: box-sizing: border-box (sitewide reset) keeps the box itself pinned at exactly 100vh, but shrinks the content area justify-content centers within, from the bottom only — so the centered group settles higher, above the box's true middle. vh-based so it lands at roughly the same ~33%-from-top position on any screen size. Was pushed as far as ~22vh at one point (a series of "move it up more" requests), which in an actual screenshot read as too close to the top edge — cramped, not the "visually appealing" middle-upper placement that was the actual goal the whole time. Backed off toward the original ~36% reference point, not all the way back to it — the earlier nudges up weren't wrong, just overshot. margin-top is kept small and fixed on purpose: it needs to already be visible the moment you scroll into the section (not pushed down out of view while waiting to pin), so it only nudges the heading off the very top edge rather than delaying the pin by any real amount. */ .case-studies__side { flex: 1; min-width: 240px; position: sticky; top: 0; height: min(100vh, var(--side-max-h, 100vh)); display: flex; flex-direction: column; justify-content: center; padding-bottom: 34vh; margin-top: 8px; } /* ---------- filters ---------- */ /* was a sticky, vertically-centered sidebar; now a plain wrapping row under the heading, centered so it lines up with the heading's own centered treatment (see .case-studies__side .section-head) — matches the kynejang.com reference's centered sidebar, and drops the position: sticky + translateY(-50%) reveal-animation math that only made sense for the old sidebar treatment */ .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; /* the pills wrap against THIS, not against however wide the sticky column happens to be. .case-studies__side is flex: 1, so it ran to 1177px on a 2560-wide monitor and held all four pills in one long 763px row, only breaking below ~1500px. Capping the row makes it break at every width instead. 32rem specifically: swept 24–32rem against the real pill widths at 1000–2560px. 32rem is the widest value that breaks on a big monitor, and it lands on 3+1 at every width — the same split the layout already fell into below 1440px, so nothing new appears. Narrower caps (26rem and below) split it 2+1+1 on wide screens, which reads as ragged rather than deliberate. margin-inline keeps the capped row centred under the heading; without it the column's align-items would leave it stuck to one side. */ max-width: 32rem; margin-inline: auto; } .filter-pill { /* same flat spec as .btn (was 12px 24px) — filter pills are a button family too now, not just tags/callouts' glass cousin */ padding: 0.938rem 1.875rem; border-radius: var(--radius-pill); font-size: var(--text-body); font-weight: 400; cursor: pointer; white-space: nowrap; /* same bouncy back-out curve as .btn — see its own comment for why */ transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .filter-pill:hover { transform: scale(1.14); } .filter-pill.is-active { color: var(--sel-ink); background: var(--sel-bg); border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---------- project list ---------- */ /* a substantial fraction of the row (was a flat 480px cap, then 50%, then dialed back to 32% — 50% read as too dominant against the sparse right column once the media boxes were fixed to the images' real 16:9 ratio, see .project-card__media). Back up to 50% now that the right column carries the sticky heading/filters at full-viewport height (see .case-studies__side) instead of being a plain in-flow block — a screenshot pass showed 32% leaving roughly two-thirds of the section as dead space at ordinary desktop widths, with the filters floating disconnected from the cards across that gap; wider cards also mean less total scroll depth for the same 3 projects. flex-grow: 0 keeps it from ballooning past this just because .case-studies__side doesn't need the rest of the space; flex-shrink: 1 is a safety net for the narrow band between this and the 900px mobile breakpoint below, where the layout is still in row mode. flex-basis sizes this along .case-studies__layout's main axis, which is row on desktop — on mobile that layout switches to column (see @media below), where flex-basis would size HEIGHT instead, so that breakpoint sets an explicit width there. */ .project-grid { flex: 0 1 50%; min-width: 0; /* filtering hides cards in here; without this the browser's scroll anchoring nudges the page to follow whichever card it was tracking, which reads as the screen jumping (see project filtering in main.js) */ overflow-anchor: none; display: flex; flex-direction: column; gap: 72px; } /* image on top, tag/title/description stacked below — was a horizontal media-left/copy-right row; the reference reads as a vertical card. The hover effect (pointer-tracked 3D tilt, see js/main.js) is scoped to .project-card__media only — .project-card itself carries no hover transform, so the tag row/title/paragraph never move. */ .project-card { display: flex; flex-direction: column; gap: 20px; /* gives .project-card__media's tilt below a vanishing point — lives on the parent (not .project-card__media itself) because an element can't be its own 3D perspective root */ perspective: 900px; } .project-card__media { width: 100%; /* matches the source thumbnails' real aspect ratio (all three are natively 16:9) — a mismatched box forces object-fit: cover to crop regardless of how big or small the container is; this is what actually eliminates the crop, not the container's width */ aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--media-backdrop); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); /* the rotate below is applied here, to the rounded/clipped box itself rather than to the img inside it — so the corners tilt as part of the same rigid object as the picture instead of staying a flat, static window with the image swimming around behind it (which is also what let the placeholder background peek through before) */ transition: transform 0.25s ease-out, box-shadow 0.3s ease; will-change: transform; /* the hover tilt only ever reaches ±10°, and the entrance flip below stays well under 90° too — this is now a defensive margin rather than something actually triggered, kept in case the flip angle ever gets dialed back up past 90°, where (without this) the browser would render the element's own mirrored front face instead of a blank back, i.e. the photo and its logo/text would visibly reverse partway through. */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .project-card__media:hover { box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55); } /* one-time flip-in the first time the card scrolls into view (see js/main.js), paired with .project-card.reveal's opacity fade below. Driven by its own pair of classes rather than through .reveal/.is-visible directly: .project-card__media's transform is also what the pointer-tilt hover above sets inline, and .is-visible stays on the card forever once added — if this slow 1.1s entrance transition lived there, every hover tilt afterward would inherit that same sluggish duration instead of the snappy 0.25s above. JS swaps is-flipping-in -> is-flipped-in to run the animation, then drops both classes once it finishes, handing the element back to the plain rule above for all subsequent hover tilts. ease-in-out (rather than the hover tilt's linear-ish ease-out) is what makes the swing read as smooth momentum building up and settling back down, instead of snapping off the start at full speed. */ .project-card__media.is-flipping-in, .project-card__media.is-flipped-in { transition: transform 1.1s ease-in-out, box-shadow 0.3s ease; } .project-card__media.is-flipping-in { transform: rotateY(-15deg); } .project-card__media.is-flipped-in { transform: rotateY(0deg); } .project-card__media img { width: 100%; height: 100%; object-fit: cover; } .project-card__body { display: flex; flex-direction: column; gap: 14px; } .tag-row { display: flex; gap: 8px; flex-wrap: wrap; } /* flat, not glass — deliberately distinct from .btn/.btn-outline's blurred surface (see the shared glass-formula group above) so tags read as a different kind of element from buttons at a glance, not just a smaller button. These no longer share .btn's 0.938rem/1.875rem padding spec, which used to be the thing tying the two families together. That pairing was costing more than it bought: at 1920px the chips rendered ~50px tall and ~155px wide for "After effects" — button-sized, for a non-interactive metadata label. A .tag is a , not a control, so it carries none of a button's hit-target obligation (the 44px minimum applies to .filter-pill, which IS a